From 2795e7c0dba1c48a99366f38e8680748fa1a9740 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@gmail.com>
Date: Wed, 21 Oct 2020 20:54:15 +0200
Subject: [PATCH] Improvements to OH picker

---
 .../OpeningHours/OpeningHoursPickerTable.ts   | 10 ++++-
 UI/OhVisualization.ts                         | 23 +++++++----
 css/openinghourstable.css                     | 41 ++++++++++++-------
 3 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/UI/Input/OpeningHours/OpeningHoursPickerTable.ts b/UI/Input/OpeningHours/OpeningHoursPickerTable.ts
index 3c26659..47553ee 100644
--- a/UI/Input/OpeningHours/OpeningHoursPickerTable.ts
+++ b/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")
                     }
+                    
 
                 }
 
diff --git a/UI/OhVisualization.ts b/UI/OhVisualization.ts
index 3a012c4..0e20b33 100644
--- a/UI/OhVisualization.ts
+++ b/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
diff --git a/css/openinghourstable.css b/css/openinghourstable.css
index f573746..9a49836 100644
--- a/css/openinghourstable.css
+++ b/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 {