Improvements to OH picker

This commit is contained in:
Pieter Vander Vennet 2020-10-21 20:54:15 +02:00
parent 418658a1e8
commit 2795e7c0db
3 changed files with 50 additions and 24 deletions

View file

@ -122,7 +122,8 @@ export default class OpeningHoursPickerTable extends InputElement<OpeningHour[]>
let row = table.rows[i] let row = table.rows[i]
for (let j = 0; j < row.cells.length; j++) { for (let j = 0; j < row.cells.length; j++) {
let cell = row.cells[j] let cell = row.cells[j]
cell?.classList?.remove("oh-timecell-selected") cell?.classList?.remove("oh-timecell-selected");
row.classList?.remove("oh-timerow-selected");
} }
} }
} }
@ -163,13 +164,18 @@ export default class OpeningHoursPickerTable extends InputElement<OpeningHour[]>
} }
offset = -1; offset = -1;
} }
row.classList?.add("oh-timerow-selected");
if (iStart <= i && i <= iEnd && if (iStart <= i && i <= iEnd &&
jStart <= j + offset && j + offset <= jEnd) { jStart <= j + offset && j + offset <= jEnd) {
cell?.classList?.add("oh-timecell-selected") cell?.classList?.add("oh-timecell-selected")
} else { } else {
cell?.classList?.remove("oh-timecell-selected") cell?.classList?.remove("oh-timecell-selected")
row.classList?.remove("oh-timerow-selected")
} }
} }
} }

View file

@ -153,13 +153,20 @@ export default class OpeningHoursVisualization extends UIElement {
if (tags._country === undefined) { if (tags._country === undefined) {
return "Loading..."; return "Loading...";
} }
const oh = new opening_hours(tags[this._key], { let oh = null;
try {
oh = new opening_hours(tags[this._key], {
lat: tags._lat, lat: tags._lat,
lon: tags._lon, lon: tags._lon,
address: { address: {
country_code: tags._country country_code: tags._country
} }
}, {tag_key: this._key}); }, {tag_key: this._key});
} catch (e) {
console.log(e);
return "Error: could not visualize these opening hours"
}
if (!oh.getState() && !oh.getUnknown()) { if (!oh.getState() && !oh.getUnknown()) {
// POI is currently closed // POI is currently closed

View file

@ -5,6 +5,14 @@
height: 100%; height: 100%;
} }
.oh-timecell {
background-color: white;
border-left: 1px solid #000;
border-right: 1px solid #000000;
position: relative;
box-sizing: border-box;
}
.oh-table th { .oh-table th {
font-weight: bold; font-weight: bold;
font-size: medium; font-size: medium;
@ -16,37 +24,40 @@
} }
.oh-timecell:hover { .oh-timecell:hover {
background-color: #ffd1be !important; background-color: #92b1ff !important;
} }
.oh-timecell {
background-color: white;
border-left: 1px solid #eee;
border-right: 1px solid #ccc;
position: relative;
box-sizing: border-box;
}
.oh-timecell-selected { .oh-timecell-selected {
background-color: orange; background-color: #0048ff;
} }
.oh-timerow-selected {
border-left: 10px solid black;
margin-left: 0px;
}
.oh-timecell-half { .oh-timecell-half {
background-color: aliceblue; background-color: aliceblue;
} }
.oh-timecell-half.oh-timecell-selected { .oh-timecell-half.oh-timecell-selected {
background-color: lightsalmon; background-color: #0048ff;
}
.oh-table tr {
background: #ddd;
} }
.oh-left-col { .oh-left-col {
border-bottom: 1px solid #aaa; border-bottom: 1px solid #aaa;
margin: 0; margin: 0;
margin-left: 10px;
width: 0.5em; width: 0.5em;
font-size: large; font-size: large;
padding: 0; padding: 0;
padding-right: 0.2em; padding-right: 0.2em;
background: #ddd;
} }
.oh-draggable-header { .oh-draggable-header {
@ -62,17 +73,19 @@
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
background: orange; background: #0048ff;
z-index: 1; z-index: 1;
box-sizing: border-box box-sizing: border-box;
} }
.oh-timerange-inner { .oh-timerange-inner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-x: hidden;
justify-content: space-between; justify-content: space-between;
align-content: center; align-content: center;
height: 100%; height: 100%;
overflow-y: hidden;
} }
.oh-timerange-inner input { .oh-timerange-inner input {