Refactoring: attempting to make State smaller

UI/OpeningHours/OpeningHoursRange.ts

@@ -0,0 +1,103 @@
+/**
+ * A single opening hours range, shown on top of the OH-picker table
+ */
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {UIElement} from "../UIElement";
+import {VariableUiElement} from "../Base/VariableUIElement";
+import Svg from "../../Svg";
+import {Utils} from "../../Utils";
+import Combine from "../Base/Combine";
+import {OH, OpeningHour} from "./OpeningHours";
+
+export default class OpeningHoursRange extends UIElement {
+    private _oh: UIEventSource<OpeningHour>;
+
+    private readonly _startTime: UIElement;
+    private readonly _endTime: UIElement;
+    private readonly _deleteRange: UIElement;
+    private readonly _tableId: string;
+
+    constructor(oh: UIEventSource<OpeningHour>, tableId: string) {
+        super(oh);
+        this._tableId = tableId;
+        const self = this;
+        this._oh = oh;
+        this.SetClass("oh-timerange");
+        oh.addCallbackAndRun(() => {
+            const el = document.getElementById(this.id) as HTMLElement;
+            self.InnerUpdate(el);
+        })
+
+        this._deleteRange = 
+            Svg.delete_icon_ui()
+            .SetClass("oh-delete-range")
+            .onClick(() => {
+                oh.data.weekday = undefined;
+                oh.ping();
+            });
+
+
+        this._startTime = new VariableUiElement(oh.map(oh => {
+            return Utils.TwoDigits(oh.startHour) + ":" + Utils.TwoDigits(oh.startMinutes);
+        })).SetClass("oh-timerange-label")
+
+        this._endTime = new VariableUiElement(oh.map(oh => {
+            return Utils.TwoDigits(oh.endHour) + ":" + Utils.TwoDigits(oh.endMinutes);
+        })).SetClass("oh-timerange-label")
+
+
+    }
+
+    InnerRender(): string {
+        const oh = this._oh.data;
+        if (oh === undefined) {
+            return "";
+        }
+        const height = this.getHeight();
+
+        let content = [this._deleteRange]
+        if (height > 2) {
+            content = [this._startTime, this._deleteRange, this._endTime];
+        }
+
+        return new Combine(content)
+            .SetClass("oh-timerange-inner")
+            .Render();
+    }
+
+    private getHeight(): number {
+        const oh = this._oh.data;
+
+        let endhour = oh.endHour;
+        if (oh.endHour == 0 && oh.endMinutes == 0) {
+            endhour = 24;
+        }
+        const height = (endhour - oh.startHour + ((oh.endMinutes - oh.startMinutes) / 60));
+        return height;
+    }
+
+    protected InnerUpdate(el: HTMLElement) {
+        if (el == null) {
+            return;
+        }
+        const oh = this._oh.data;
+        if (oh === undefined) {
+            return;
+        }
+
+        // The header cell containing monday, tuesday, ...
+        const table = document.getElementById(this._tableId) as HTMLTableElement;
+
+        const bodyRect = document.body.getBoundingClientRect();
+        const rangeStart = table.rows[1].cells[1].getBoundingClientRect().top - bodyRect.top;
+        const rangeEnd = table.rows[table.rows.length - 1].cells[1].getBoundingClientRect().bottom - bodyRect.top;
+
+        const pixelsPerHour = (rangeEnd - rangeStart) / 24;
+
+        el.style.top = (pixelsPerHour * OH.startTime(oh)) + "px";
+        el.style.height = (pixelsPerHour * (OH.endTime(oh) - OH.startTime(oh))) + "px";
+
+    }
+
+
+}