Improvements to OH picker

UI/Input/OpeningHours/OpeningHoursPickerTable.ts

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

UI/OhVisualization.ts

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

css/openinghourstable.css

@@ -5,6 +5,14 @@
     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 {
     font-weight: bold;
     font-size: medium;
@@ -16,37 +24,40 @@
 }
 
 .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 {
-    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;
 }
 
 .oh-timecell-half.oh-timecell-selected {
-   background-color:  lightsalmon;
+    background-color: #0048ff;
+}
+
+.oh-table tr {
+    background: #ddd;
 }
 
 .oh-left-col {
     border-bottom: 1px solid #aaa;
     margin: 0;
+    margin-left: 10px;
     width: 0.5em;
     font-size: large;
     padding: 0;
     padding-right: 0.2em;
-    background: #ddd;
 }
 
 .oh-draggable-header {
@@ -62,17 +73,19 @@
     top: 0;
     left: 0;
     width: 100%;
-    background: orange;
+    background: #0048ff;
     z-index: 1;
-    box-sizing: border-box
+    box-sizing: border-box;
 }
 
 .oh-timerange-inner {
     display: flex;
     flex-direction: column;
+    overflow-x: hidden;
     justify-content: space-between;
     align-content: center;
     height: 100%;
+    overflow-y: hidden;
 }
 
 .oh-timerange-inner input {