Small fixes to OH visualization

UI/OhVisualization.ts

@@ -27,7 +27,11 @@ export default class OpeningHoursVisualization extends UIElement {
 
         const values = [[], [], [], [], [], [], []];
 
-        const iterator = oh.getIterator(from);
+       const start  = new Date(from);
+        // We go one day more into the past, in order to force rendering of holidays in the start of the period
+        start.setDate(from.getDate() - 1);
+        
+        const iterator = oh.getIterator(start);
 
         let prevValue = undefined;
         while (iterator.advance(to)) {
@@ -51,6 +55,10 @@ export default class OpeningHoursVisualization extends UIElement {
                 // simply closed, nothing special here
                 continue;
             }
+            
+            if(value.startDate < from){
+                continue;
+            }
             // Get day: sunday is 0, monday is 1. We move everything so that monday == 0
             values[(value.startDate.getDay() + 6) % 7].push(value);
         }
@@ -233,11 +241,13 @@ export default class OpeningHoursVisualization extends UIElement {
 
             let innerContent: string[] = [];
 
+            // Add the lines
             for (const changeMoment of changeHours) {
                 const offset = 100 * (changeMoment - earliestOpen) / availableArea;
                 innerContent.push(new FixedUiElement("").SetStyle(`left:${offset}%;`).SetClass("ohviz-line").Render())
             }
 
+            // Add the actual ranges
             for (const range of dayRanges) {
                 if (!range.isOpen && !range.isSpecial) {
                     innerContent.push(
@@ -256,6 +266,7 @@ export default class OpeningHoursVisualization extends UIElement {
                     new FixedUiElement(range.comment).SetStyle(`left:${startPercentage}%; width:${width}%`).SetClass("ohviz-range").Render())
             }
 
+            // Add line for 'now'
             if (now >= 0 && now <= 100) {
                 innerContent.push(new FixedUiElement("").SetStyle(`left:${now}%;`).SetClass("ohviz-now").Render())
             }

UI/SpecialVisualizations.ts

@@ -4,13 +4,26 @@ import {UIEventSource} from "../Logic/UIEventSource";
 
 export default class SpecialVisualizations {
 
-    public static specialVisualizations: { funcName: string, constr: ((tagSource: UIEventSource<any>, argument: string) => UIElement) }[] =
+    public static specialVisualizations: {
+        funcName: string,
+        constr: ((tagSource: UIEventSource<any>, argument: string[]) => UIElement),
+        docs: string,
+        args: {name: string, defaultValue: string, doc: string}[]
+    }[] =
 
         [{
             funcName: "opening_hours_table",
-            constr: (tagSource: UIEventSource<any>, keyname) => {
+            docs: "Creates an opening-hours table. Usage: {opening_hours_table(opening_hours)} to create a table of the tag 'opening_hours'.",
+            args:[{name:"key", defaultValue: "opening_hours", doc: "The tag from which the table is constructed"}],
+            constr: (tagSource: UIEventSource<any>, args) => {
+                let keyname = args[0];
+                if (keyname === undefined || keyname === "") {
+                    keyname = keyname ?? "opening_hours"
+                }
                 return new OpeningHoursVisualization(tagSource, keyname)
             }
-        }]
+        },
+
+        ]
 
 }

UI/TagRendering.ts

@@ -518,7 +518,7 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
         const knownSpecials : {funcName: string, constr: ((arg: string) => UIElement)}[]= SpecialVisualizations.specialVisualizations.map(
             special => ({
                 funcName: special.funcName,
-                constr: arg => special.constr(this.currentTags, arg)
+                constr: arg => special.constr(this.currentTags, arg.split(","))
             })
         )
         

css/openinghourstable.css

@@ -141,8 +141,8 @@
             45deg,
             rgba(255, 255, 255, 0),
             rgba(255, 255, 255, 0) 10px,
-            rgba(216, 235, 255, 0.5) 10px,
-            rgba(216, 235, 255, 0.5) 20px
+            rgba(102, 207, 255, 0.5) 10px,
+            rgba(102, 207, 255, 0.5) 20px
     );
     position: absolute;
     left: 0;
@@ -153,8 +153,29 @@
     color: black;
     font-weight: bold;
     text-align: center;
+    border-radius: 1em;
 }
 
+.ohviz-today .ohviz-day-off {
+    display: block;
+    background: repeating-linear-gradient(
+            45deg,
+            rgba(255, 255, 255, 0),
+            rgba(255, 255, 255, 0) 10px,
+            rgb(153, 231, 255) 10px,
+            #99e7ff 20px
+    );
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    color: black;
+    font-weight: bold;
+    text-align: center;
+    border-radius: 1em;
+}
 
 .ohviz-now {
     position: absolute;

test.ts

@@ -2,14 +2,11 @@
 
 
 import {UIEventSource} from "./Logic/UIEventSource";
-import OpeningHoursInput from "./UI/Input/OpeningHours/OpeningHoursInput";
+import OpeningHoursVisualization from "./UI/OhVisualization";
 
-const oh = "Sep 1-Feb 28 Mo-Th 08:00-12:00, 13:30-17:30; Mar 1-Aug 31 Mo-Fr 07:00-12:00, 13:30-17:30; PH off"
+const oh = "Tu-Fr 09:00-17:00 'as usual'; mo off 'yyy'; su off 'xxx'"
 
-const source = new UIEventSource<string>("")
-new OpeningHoursInput(source).AttachTo('maindiv')
-console.log("SEtting ",oh)
-source.setData(oh)
+new OpeningHoursVisualization(new UIEventSource<any>({opening_hours:oh}), 'opening_hours').AttachTo('maindiv')
 
 
 /*/