Refactoring: attempting to make State smaller

UI/OpeningHours/OhVisualization.ts

@@ -0,0 +1,313 @@
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {UIElement} from "../UIElement";
+import Combine from "../Base/Combine";
+import State from "../../State";
+import {FixedUiElement} from "../Base/FixedUiElement";
+import {OH} from "./OpeningHours";
+import Translations from "../i18n/Translations";
+
+export default class OpeningHoursVisualization extends UIElement {
+    private readonly _key: string;
+
+    constructor(tags: UIEventSource<any>, key: string) {
+        super(tags);
+        this._key = key;
+        this.ListenTo(UIEventSource.Chronic(60*1000)); // Automatically reload every minute
+        this.ListenTo(UIEventSource.Chronic(500, () => {
+            return tags.data._country === undefined;
+        }));
+        
+        
+    }
+    
+
+
+    private static GetRanges(oh: any, from: Date, to: Date): ({
+        isOpen: boolean,
+        isSpecial: boolean,
+        comment: string,
+        startDate: Date,
+        endDate: Date
+    }[])[] {
+
+
+        const values = [[], [], [], [], [], [], []];
+
+        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)) {
+
+            if (prevValue) {
+                prevValue.endDate = iterator.getDate() as Date
+            }
+            const endDate = new Date(iterator.getDate()) as Date;
+            endDate.setHours(0, 0, 0, 0)
+            endDate.setDate(endDate.getDate() + 1);
+            const value = {
+                isSpecial: iterator.getUnknown(),
+                isOpen: iterator.getState(),
+                comment: iterator.getComment(),
+                startDate: iterator.getDate() as Date,
+                endDate: endDate // Should be overwritten by the next iteration
+            }
+            prevValue = value;
+
+            if (value.comment === undefined && !value.isOpen && !value.isSpecial) {
+                // 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);
+        }
+        return values;
+    }
+
+    private static getMonday(d) {
+        d = new Date(d);
+        const day = d.getDay();
+        const diff = d.getDate() - day + (day == 0 ? -6 : 1); // adjust when day is sunday
+        return new Date(d.setDate(diff));
+    }
+
+
+    private allChangeMoments(ranges: {
+        isOpen: boolean,
+        isSpecial: boolean,
+        comment: string,
+        startDate: Date,
+        endDate: Date
+    }[][]): [number[], string[]] {
+        const changeHours: number[] = []
+        const changeHourText: string[] = [];
+        const extrachangeHours: number[] = []
+        const extrachangeHourText: string[] = [];
+
+        for (const weekday of ranges) {
+            for (const range of weekday) {
+                if (!range.isOpen && !range.isSpecial) {
+                    continue;
+                }
+                const startOfDay: Date = new Date(range.startDate);
+                startOfDay.setHours(0, 0, 0, 0);
+                // @ts-ignore
+                const changeMoment: number = (range.startDate - startOfDay) / 1000;
+                if (changeHours.indexOf(changeMoment) < 0) {
+                    changeHours.push(changeMoment);
+                    changeHourText.push(OH.hhmm(range.startDate.getHours(), range.startDate.getMinutes()))
+                }
+
+                // @ts-ignore
+                let changeMomentEnd: number = (range.endDate - startOfDay) / 1000;
+                if (changeMomentEnd >= 24 * 60 * 60) {
+                    if (extrachangeHours.indexOf(changeMomentEnd) < 0) {
+                        extrachangeHours.push(changeMomentEnd);
+                        extrachangeHourText.push(OH.hhmm(range.endDate.getHours(), range.endDate.getMinutes()))
+                    }
+                } else if (changeHours.indexOf(changeMomentEnd) < 0) {
+                    changeHours.push(changeMomentEnd);
+                    changeHourText.push(OH.hhmm(range.endDate.getHours(), range.endDate.getMinutes()))
+                }
+            }
+        }
+
+        changeHourText.sort();
+        changeHours.sort();
+        extrachangeHourText.sort();
+        extrachangeHours.sort();
+        changeHourText.push(...extrachangeHourText);
+        changeHours.push(...extrachangeHours);
+
+        return [changeHours, changeHourText]
+    }
+
+    private static readonly weekdays = [
+        Translations.t.general.weekdays.abbreviations.monday,
+        Translations.t.general.weekdays.abbreviations.tuesday,
+        Translations.t.general.weekdays.abbreviations.wednesday,
+        Translations.t.general.weekdays.abbreviations.thursday,
+        Translations.t.general.weekdays.abbreviations.friday,
+        Translations.t.general.weekdays.abbreviations.saturday,
+        Translations.t.general.weekdays.abbreviations.sunday,
+    ]
+
+    InnerRender(): string {
+
+
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+
+        const lastMonday = OpeningHoursVisualization.getMonday(today);
+        const nextSunday = new Date(lastMonday);
+        nextSunday.setDate(nextSunday.getDate() + 7);
+
+        const tags = this._source.data;
+        if (tags._country === undefined) {
+            return "Loading country information...";
+        }
+        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);
+            const msg = new Combine([Translations.t.general.opening_hours.error_loading,
+            State.state?.osmConnection?.userDetails?.data?.csCount >= State.userJourney.tagsVisibleAndWikiLinked ?
+                 `<span class='subtle'>${e}</span>`
+                : ""
+            ]);
+            return msg.Render();
+        }
+
+        if (!oh.getState() && !oh.getUnknown()) {
+            // POI is currently closed
+            const nextChange: Date = oh.getNextChange();
+            if (
+                // Shop isn't gonna open anymore in this timerange
+                nextSunday < nextChange
+                // And we are already in the weekend to show next week
+                && (today.getDay() == 0 || today.getDay() == 6)
+            ) {
+                // We mover further along
+                lastMonday.setDate(lastMonday.getDate() + 7);
+                nextSunday.setDate(nextSunday.getDate() + 7);
+            }
+        }
+
+        // ranges[0] are all ranges for monday
+        const ranges = OpeningHoursVisualization.GetRanges(oh, lastMonday, nextSunday);
+        if (ranges.map(r => r.length).reduce((a, b) => a + b, 0) == 0) {
+            // Closed!
+            const opensAtDate = oh.getNextChange();
+            if(opensAtDate === undefined){
+                return Translations.t.general.opening_hours.closed_permanently.SetClass("ohviz-closed").Render()
+            }
+            const moment = `${opensAtDate.getDay()}/${opensAtDate.getMonth() + 1} ${OH.hhmm(opensAtDate.getHours(), opensAtDate.getMinutes())}`
+            return Translations.t.general.opening_hours.closed_until.Subs({date: moment}).SetClass("ohviz-closed").Render()
+        }
+
+        const isWeekstable = oh.isWeekStable();
+
+        let [changeHours, changeHourText] = this.allChangeMoments(ranges);
+
+        // By default, we always show the range between 8 - 19h, in order to give a stable impression
+        // Ofc, a bigger range is used if needed
+        const earliestOpen = Math.min(8 * 60 * 60, ...changeHours);
+        let latestclose = Math.max(...changeHours);
+        // We always make sure there is 30m of leeway in order to give enough room for the closing entry
+        latestclose = Math.max(19 * 60 * 60, latestclose + 30 * 60)
+
+
+        const rows: UIElement[] = [];
+        const availableArea = latestclose - earliestOpen;
+        // @ts-ignore
+        const now = (100 * (((new Date() - today) / 1000) - earliestOpen)) / availableArea;
+
+
+        let header = "";
+
+        if (now >= 0 && now <= 100) {
+            header += new FixedUiElement("").SetStyle(`left:${now}%;`).SetClass("ohviz-now").Render()
+        }
+        for (const changeMoment of changeHours) {
+            const offset = 100 * (changeMoment - earliestOpen) / availableArea;
+            if (offset < 0 || offset > 100) {
+                continue;
+            }
+            const el = new FixedUiElement("").SetStyle(`left:${offset}%;`).SetClass("ohviz-line").Render();
+            header += el;
+        }
+
+        for (let i = 0; i < changeHours.length; i++) {
+            let changeMoment = changeHours[i];
+            const offset = 100 * (changeMoment - earliestOpen) / availableArea;
+            if (offset < 0 || offset > 100) {
+                continue;
+            }
+            const el = new FixedUiElement(
+                `<div style='margin-top: ${i % 2 == 0 ? '1.5em;' : "1%"}'>${changeHourText[i]}</div>`
+            )
+                .SetStyle(`left:${offset}%`)
+                .SetClass("ohviz-time-indication").Render();
+            header += el;
+        }
+
+        rows.push(new Combine([`<td width="5%">&NonBreakingSpace;</td>`,
+            `<td style="position:relative;height:2.5em;">${header}</td>`]));
+
+        for (let i = 0; i < 7; i++) {
+            const dayRanges = ranges[i];
+            const isToday = (new Date().getDay() + 6) % 7 === i;
+            let weekday = OpeningHoursVisualization.weekdays[i].Render();
+
+            if (!isWeekstable) {
+                const day = new Date(lastMonday)
+                day.setDate(day.getDate() + i);
+                weekday = " " + day.getDate() + "/" + (day.getMonth() + 1);
+            }
+
+            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(
+                        new FixedUiElement(range.comment).SetClass("ohviz-day-off").Render())
+                    continue;
+                }
+
+                const startOfDay: Date = new Date(range.startDate);
+                startOfDay.setHours(0, 0, 0, 0);
+                // @ts-ignore
+                const startpoint = (range.startDate - startOfDay) / 1000 - earliestOpen;
+                // @ts-ignore
+                const width = (100 * (range.endDate - range.startDate) / 1000) / (latestclose - earliestOpen);
+                const startPercentage = (100 * startpoint / availableArea);
+                innerContent.push(
+                    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())
+            }
+
+            let clss = ""
+            if (isToday) {
+                clss = "ohviz-today"
+            }
+
+            rows.push(new Combine(
+                [`<td class="ohviz-weekday ${clss}">${weekday}</td>`,
+                    `<td style="position:relative;" class="${clss}">${innerContent.join("")}</td>`]))
+        }
+
+
+        return new Combine([
+            "<table class='ohviz' style='width:100%;'>",
+            rows.map(el => "<tr>" + el.Render() + "</tr>").join(""),
+            "</table>"
+        ]).SetClass("ohviz-container").Render();
+    }
+
+}

UI/OpeningHours/OpeningHours.ts

@@ -0,0 +1,348 @@
+import {Utils} from "../../Utils";
+
+export interface OpeningHour {
+    weekday: number, // 0 is monday, 1 is tuesday, ...
+    startHour: number,
+    startMinutes: number,
+    endHour: number,
+    endMinutes: number
+}
+
+export class OH {
+
+
+    private static readonly days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]
+    private static readonly daysIndexed = {
+        mo: 0,
+        tu: 1,
+        we: 2,
+        th: 3,
+        fr: 4,
+        sa: 5,
+        su: 6
+    }
+
+    public static hhmm(h: number, m: number): string {
+        if (h == 24) {
+            return "00:00";
+        }
+        return Utils.TwoDigits(h) + ":" + Utils.TwoDigits(m);
+    }
+
+    public static ToString(ohs: OpeningHour[]) {
+        if (ohs.length == 0) {
+            return "";
+        }
+        const partsPerWeekday: string [][] = [[], [], [], [], [], [], []];
+
+
+        for (const oh of ohs) {
+            partsPerWeekday[oh.weekday].push(OH.hhmm(oh.startHour, oh.startMinutes) + "-" + OH.hhmm(oh.endHour, oh.endMinutes));
+        }
+
+        const stringPerWeekday = partsPerWeekday.map(parts => parts.sort().join(", "));
+
+        const rules = [];
+
+        let rangeStart = 0;
+        let rangeEnd = 0;
+        
+        function pushRule(){
+            const rule = stringPerWeekday[rangeStart];
+            if(rule === ""){
+                return;
+            }
+            if (rangeStart == (rangeEnd - 1)) {
+                rules.push(
+                    `${OH.days[rangeStart]} ${rule}`
+                );
+            } else {
+                rules.push(
+                    `${OH.days[rangeStart]}-${OH.days[rangeEnd-1]} ${rule}`
+                );
+            }
+        }
+
+        for (; rangeEnd < 7; rangeEnd++) {
+
+            if (stringPerWeekday[rangeStart] != stringPerWeekday[rangeEnd]) {
+                pushRule();
+                rangeStart = rangeEnd
+            }
+
+        }
+        pushRule();
+
+        const oh = rules.join("; ")
+        if (oh === "Mo-Su 00:00-00:00") {
+            return "24/7"
+        }
+        return oh;
+    }
+
+    /**
+     * Merge duplicate opening-hour element in place.
+     * Returns true if something changed
+     * @param ohs
+     * @constructor
+     */
+    public static MergeTimes(ohs: OpeningHour[]): OpeningHour[] {
+        const queue = [...ohs];
+        const newList = [];
+        while (queue.length > 0) {
+            let maybeAdd = queue.pop();
+
+            let doAddEntry = true;
+            if(maybeAdd.weekday == undefined){
+                doAddEntry = false;
+            }
+
+            for (let i = newList.length - 1; i >= 0 && doAddEntry; i--) {
+                let guard = newList[i];
+                if (maybeAdd.weekday != guard.weekday) {
+                    // Not the same day
+                    continue
+                }
+
+                if (OH.startTimeLiesInRange(maybeAdd, guard) && OH.endTimeLiesInRange(maybeAdd, guard)) {
+                    // Guard fully covers 'maybeAdd': we can safely ignore maybeAdd
+                    doAddEntry = false;
+                    break;
+                }
+
+                if (OH.startTimeLiesInRange(guard, maybeAdd) && OH.endTimeLiesInRange(guard, maybeAdd)) {
+                    // 'maybeAdd'  fully covers Guard - the guard is killed
+                    newList.splice(i, 1);
+                    break;
+                }
+
+                if (OH.startTimeLiesInRange(maybeAdd, guard) || OH.endTimeLiesInRange(maybeAdd, guard)
+                    || OH.startTimeLiesInRange(guard, maybeAdd) || OH.endTimeLiesInRange(guard, maybeAdd)) {
+                    // At this point, the maybeAdd overlaps the guard: we should extend the guard and retest it
+                    newList.splice(i, 1);
+                    let startHour = guard.startHour;
+                    let startMinutes = guard.startMinutes;
+                    if (OH.startTime(maybeAdd) < OH.startTime(guard)) {
+                        startHour = maybeAdd.startHour;
+                        startMinutes = maybeAdd.startMinutes;
+                    }
+
+                    let endHour = guard.endHour;
+                    let endMinutes = guard.endMinutes;
+                    if (OH.endTime(maybeAdd) > OH.endTime(guard)) {
+                        endHour = maybeAdd.endHour;
+                        endMinutes = maybeAdd.endMinutes;
+                    }
+
+                    queue.push({
+                        startHour: startHour,
+                        startMinutes: startMinutes,
+                        endHour:endHour,
+                        endMinutes:endMinutes,
+                        weekday: guard.weekday
+                    });
+
+                    doAddEntry = false;
+                    break;
+                }
+
+            }
+            if (doAddEntry) {
+                newList.push(maybeAdd);
+            }
+        }
+
+        // New list can only differ from the old list by merging entries
+        // This means that the list is changed only if the lengths are different.
+        // If the lengths are the same, we might just as well return the old list and be a bit more stable
+        if (newList.length !== ohs.length) {
+            return newList;
+        } else {
+            return ohs;
+        }
+
+    }
+
+    public static startTime(oh: OpeningHour): number {
+        return oh.startHour + oh.startMinutes / 60;
+    }
+
+    public static endTime(oh: OpeningHour): number {
+        return oh.endHour + oh.endMinutes / 60;
+    }
+
+    public static startTimeLiesInRange(checked: OpeningHour, mightLieIn: OpeningHour) {
+        return OH.startTime(mightLieIn) <= OH.startTime(checked) &&
+            OH.startTime(checked) <= OH.endTime(mightLieIn)
+    }
+
+    public static endTimeLiesInRange(checked: OpeningHour, mightLieIn: OpeningHour) {
+        return OH.startTime(mightLieIn) <= OH.endTime(checked) &&
+            OH.endTime(checked) <= OH.endTime(mightLieIn)
+    }
+
+    private static parseHHMM(hhmm: string): { hours: number, minutes: number } {
+        if(hhmm === undefined || hhmm == null){
+            return null;
+        }
+        const spl = hhmm.trim().split(":");
+        if(spl.length != 2){
+            return null;
+        }
+        return {hours: Number(spl[0].trim()), minutes: Number(spl[1].trim())};
+    }
+
+    public static parseHHMMRange(hhmmhhmm: string): {
+        startHour: number,
+        startMinutes: number,
+        endHour: number,
+        endMinutes: number
+    } {
+        if (hhmmhhmm == "off") {
+            return null;
+        }
+
+        const timings = hhmmhhmm.split("-");
+        const start = OH.parseHHMM(timings[0])
+        const end = OH.parseHHMM(timings[1]);
+        return {
+            startHour: start.hours,
+            startMinutes: start.minutes,
+            endHour: end.hours,
+            endMinutes: end.minutes
+        }
+    }
+
+    private static ParseHhmmRanges(hhmms: string): {
+        startHour: number,
+        startMinutes: number,
+        endHour: number,
+        endMinutes: number
+    }[] {
+        if (hhmms === "off") {
+            return [];
+        }
+        return hhmms.split(",")
+            .map(s => s.trim())
+            .filter(str => str !== "")
+            .map(OH.parseHHMMRange)
+            .filter(v => v != null)
+    }
+
+    private static ParseWeekday(weekday: string): number {
+        return OH.daysIndexed[weekday.trim().toLowerCase()];
+    }
+
+    private static ParseWeekdayRange(weekdays: string): number[] {
+        const split = weekdays.split("-");
+        if (split.length == 1) {
+            const parsed = OH.ParseWeekday(weekdays);
+            if(parsed == null){
+                return null;
+            }
+            return [parsed];
+        } else if (split.length == 2) {
+            let start = OH.ParseWeekday(split[0]);
+            let end = OH.ParseWeekday(split[1]);
+            if ((start ?? null) === null || (end ?? null) === null) {
+                return null;
+            }
+            let range = [];
+            for (let i = start; i <= end; i++) {
+                range.push(i);
+            }
+            return range;
+        } else {
+            return null;
+        }
+    }
+
+    private static ParseWeekdayRanges(weekdays: string): number[] {
+        let ranges = [];
+        let split = weekdays.split(",");
+        for (const weekday of split) {
+            const parsed = OH.ParseWeekdayRange(weekday)
+            if (parsed === undefined || parsed === null) {
+                return null;
+            }
+            ranges.push(...parsed);
+        }
+        return ranges;
+    }
+
+    private static multiply(weekdays: number[], timeranges: { startHour: number, startMinutes: number, endHour: number, endMinutes: number }[]) {
+        if ((weekdays ?? null) == null || (timeranges ?? null) == null) {
+            return null;
+        }
+        const ohs: OpeningHour[] = []
+        for (const timerange of timeranges) {
+            for (const weekday of weekdays) {
+                ohs.push({
+                    weekday: weekday,
+                    startHour: timerange.startHour, startMinutes: timerange.startMinutes,
+                    endHour: timerange.endHour, endMinutes: timerange.endMinutes,
+                });
+            }
+        }
+        return ohs;
+    }
+
+    public static ParseRule(rule: string): OpeningHour[] {
+        try {
+            if (rule.trim() == "24/7") {
+                return OH.multiply([0, 1, 2, 3, 4, 5, 6], [{
+                    startHour: 0,
+                    startMinutes: 0,
+                    endHour: 24,
+                    endMinutes: 0
+                }]);
+            }
+
+            const split = rule.trim().replace(/, */g, ",").split(" ");
+            if (split.length == 1) {
+                // First, try to parse this rule as a rule without weekdays
+                let timeranges = OH.ParseHhmmRanges(rule);
+                let weekdays = [0, 1, 2, 3, 4, 5, 6];
+                return OH.multiply(weekdays, timeranges);
+            }
+
+            if (split.length == 2) {
+                const weekdays = OH.ParseWeekdayRanges(split[0]);
+                const timeranges = OH.ParseHhmmRanges(split[1]);
+                return OH.multiply(weekdays, timeranges);
+            }
+            return null;
+        } catch (e) {
+            console.log("Could not parse weekday rule ", rule);
+            return null;
+        }
+    }
+
+
+    static Parse(rules: string) {
+        if (rules === undefined || rules === "") {
+            return []
+        }
+
+        const ohs = []
+
+        const split = rules.split(";");
+
+        for (const rule of split) {
+            if(rule === ""){
+                continue;
+            }
+            try {
+                const parsed = OH.ParseRule(rule)
+                if (parsed !== null) {
+                    ohs.push(...parsed);
+                }
+            } catch (e) {
+                console.error("Could not parse ", rule, ": ", e)
+            }
+        }
+
+        return ohs;
+    }
+}
+

UI/OpeningHours/OpeningHoursInput.ts

@@ -0,0 +1,117 @@
+/**
+ * The full opening hours element, including the table, opening hours picker.
+ * Keeps track of unparsed rules
+ * Exports everything conventiently as a string, for direct use
+ */
+import OpeningHoursPicker from "./OpeningHoursPicker";
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {UIElement} from "../UIElement";
+import {VariableUiElement} from "../Base/VariableUIElement";
+import Combine from "../Base/Combine";
+import {FixedUiElement} from "../Base/FixedUiElement";
+import {OH} from "./OpeningHours";
+import {InputElement} from "../Input/InputElement";
+import PublicHolidayInput from "./PublicHolidayInput";
+import Translations from "../i18n/Translations";
+
+
+export default class OpeningHoursInput extends InputElement<string> {
+
+
+    private readonly _value: UIEventSource<string>;
+
+    private readonly _ohPicker: UIElement;
+    private readonly _leftoverWarning: UIElement;
+    private readonly _phSelector: UIElement;
+
+    constructor(value: UIEventSource<string> = new UIEventSource<string>("")) {
+        super();
+
+      
+        const leftoverRules = value.map<string[]>(str => {
+            if (str === undefined) {
+                return []
+            }
+            const leftOvers: string[] = [];
+            const rules = str.split(";");
+            for (const rule of rules) {
+                if (OH.ParseRule(rule) !== null) {
+                    continue;
+                }
+                if (PublicHolidayInput.LoadValue(rule) !== null) {
+                    continue;
+                }
+                leftOvers.push(rule);
+            }
+            return leftOvers;
+        })
+        // NOte: MUST be bound AFTER the leftover rules!
+        const rulesFromOhPicker = value.map(OH.Parse);
+
+        const ph = value.map<string>(str => {
+            if (str === undefined) {
+                return ""
+            }
+            const rules = str.split(";");
+            for (const rule of rules) {
+                if (PublicHolidayInput.LoadValue(rule) !== null) {
+                    return rule;
+                }
+            }
+            return "";
+        })
+        this._phSelector = new PublicHolidayInput(ph);
+
+        function update() {
+            let rules = OH.ToString(rulesFromOhPicker.data);
+            if (leftoverRules.data.length != 0) {
+                rules += ";" + leftoverRules.data.join(";")
+            }
+            const phData = ph.data;
+            if (phData !== undefined && phData !== "") {
+                rules += ";" + phData;
+            }
+            value.setData(rules);
+        }
+
+        rulesFromOhPicker.addCallback(update);
+        ph.addCallback(update);
+
+        this._leftoverWarning = new VariableUiElement(leftoverRules.map((leftovers: string[]) => {
+
+            if (leftovers.length == 0) {
+                return "";
+            }
+            return new Combine([
+                Translations.t.general.opening_hours.not_all_rules_parsed,
+                    new FixedUiElement(leftovers.map(r => `${r}<br/>`).join("")).SetClass("subtle")
+            ]).Render();
+
+        }))
+
+        this._ohPicker = new OpeningHoursPicker(rulesFromOhPicker);
+
+
+    }
+
+
+    GetValue(): UIEventSource<string> {
+        return this._value;
+    }
+
+    InnerRender(): string {
+        return new Combine([
+            this._leftoverWarning,
+            this._ohPicker,
+            this._phSelector
+        ]).Render();
+    }
+
+
+    public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
+
+    IsValid(t: string): boolean {
+        return true;
+    }
+
+}

UI/OpeningHours/OpeningHoursPicker.ts

@@ -0,0 +1,65 @@
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {UIElement} from "../UIElement";
+import OpeningHoursRange from "./OpeningHoursRange";
+import Combine from "../Base/Combine";
+import OpeningHoursPickerTable from "./OpeningHoursPickerTable";
+import {OH, OpeningHour} from "./OpeningHours";
+import {InputElement} from "../Input/InputElement";
+
+export default class OpeningHoursPicker extends InputElement<OpeningHour[]> {
+    private readonly _ohs: UIEventSource<OpeningHour[]>;    
+    public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
+
+    private readonly _backgroundTable: OpeningHoursPickerTable;
+
+    private readonly _weekdays: UIEventSource<UIElement[]> = new UIEventSource<UIElement[]>([]);
+
+    constructor(ohs: UIEventSource<OpeningHour[]> = new UIEventSource<OpeningHour[]>([])) {
+        super();
+        this._ohs = ohs;
+        this._backgroundTable = new OpeningHoursPickerTable(this._weekdays, this._ohs);
+        const self = this;
+        
+        
+        this._ohs.addCallback(ohs => {
+            self._ohs.setData(OH.MergeTimes(ohs));
+        })
+
+        ohs.addCallbackAndRun(ohs => {
+            const perWeekday: UIElement[][] = [];
+            for (let i = 0; i < 7; i++) {
+                perWeekday[i] = [];
+            }
+
+            for (const oh of ohs) {
+                const source = new UIEventSource<OpeningHour>(oh)
+                source.addCallback(_ => {
+                    self._ohs.setData(OH.MergeTimes(self._ohs.data))
+                })
+                const r = new OpeningHoursRange(source, `oh-table-${this._backgroundTable.id}`);
+                perWeekday[oh.weekday].push(r); 
+            }
+
+            for (let i = 0; i < 7; i++) {
+                self._weekdays.data[i] = new Combine(perWeekday[i]);
+            }
+            self._weekdays.ping();
+
+        });
+
+    }
+
+    InnerRender(): string {
+        return this._backgroundTable.Render();
+    }
+
+    GetValue(): UIEventSource<OpeningHour[]> {
+        return this._ohs
+    }
+
+
+    IsValid(t: OpeningHour[]): boolean {
+        return true;
+    }
+
+}

UI/OpeningHours/OpeningHoursPickerTable.ts

@@ -0,0 +1,293 @@
+/**
+ * This is the base-table which is selectable by hovering over it.
+ * It will genarate the currently selected opening hour.
+ */
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {UIElement} from "../UIElement";
+import {Utils} from "../../Utils";
+import {OpeningHour} from "./OpeningHours";
+import {InputElement} from "../Input/InputElement";
+import Translations from "../i18n/Translations";
+
+export default class OpeningHoursPickerTable extends InputElement<OpeningHour[]> {
+    public readonly IsSelected: UIEventSource<boolean>;
+    private readonly weekdays: UIEventSource<UIElement[]>;
+
+    public static readonly days: UIElement[] =
+        [
+            Translations.t.general.weekdays.abbreviations.monday,
+            Translations.t.general.weekdays.abbreviations.tuesday,
+            Translations.t.general.weekdays.abbreviations.wednesday,
+            Translations.t.general.weekdays.abbreviations.thursday,
+            Translations.t.general.weekdays.abbreviations.friday,
+            Translations.t.general.weekdays.abbreviations.saturday,
+            Translations.t.general.weekdays.abbreviations.sunday
+        ]
+
+
+    private readonly source: UIEventSource<OpeningHour[]>;
+
+
+    constructor(weekdays: UIEventSource<UIElement[]>, source?: UIEventSource<OpeningHour[]>) {
+        super(weekdays);
+        this.weekdays = weekdays;
+        this.source = source ?? new UIEventSource<OpeningHour[]>([]);
+        this.IsSelected = new UIEventSource<boolean>(false);
+        this.SetStyle("width:100%;height:100%;display:block;");
+
+    }
+
+    InnerRender(): string {
+        let rows = "";
+        const self = this;
+        for (let h = 0; h < 24; h++) {
+            let hs = "" + h;
+            if (hs.length == 1) {
+                hs = "0" + hs;
+            }
+
+
+            rows += `<tr><td rowspan="2" class="oh-left-col oh-timecell-full">${hs}:00</td>` +
+                Utils.Times(weekday => `<td id="${this.id}-timecell-${weekday}-${h}" class="oh-timecell oh-timecell-full oh-timecell-${weekday}"></td>`, 7) +
+                '</tr><tr>' +
+                Utils.Times(id => `<td id="${this.id}-timecell-${id}-${h}-30" class="oh-timecell oh-timecell-half oh-timecell-${id}"></td>`, 7) +
+                '</tr>';
+        }
+        let days = OpeningHoursPickerTable.days.map((day, i) => {
+            const innerContent  =  self.weekdays.data[i]?.Render() ?? "";
+            return day.Render() + "<span style='width:100%; display:block; position: relative;'>"+innerContent+"</span>";
+        }).join("</th><th width='14%'>");
+        return `<table id="oh-table-${this.id}" class="oh-table"><tr><th></th><th width='14%'>${days}</th></tr>${rows}</table>`;
+    }
+
+    protected InnerUpdate() {
+        const self = this;
+        const table = (document.getElementById(`oh-table-${this.id}`) as HTMLTableElement);
+        console.log("Inner update!")
+        if (table === undefined || table === null) {
+            return;
+        }
+
+        for (const uielement of this.weekdays.data) {
+            uielement.Update();
+        }
+
+        let mouseIsDown = false;
+        let selectionStart: [number, number] = undefined;
+        let selectionEnd: [number, number] = undefined;
+
+        function h(timeSegment: number) {
+            return Math.floor(timeSegment / 2);
+        }
+
+        function m(timeSegment: number) {
+            return (timeSegment % 2) * 30;
+        }
+
+        function startSelection(i: number, j: number) {
+            mouseIsDown = true;
+            selectionStart = [i, j];
+            selectionEnd = [i, j];
+        }
+
+        function endSelection() {
+            if (selectionStart === undefined) {
+                return;
+            }
+            if (!mouseIsDown) {
+                return;
+            }
+            mouseIsDown = false
+            const dStart = Math.min(selectionStart[1], selectionEnd[1]);
+            const dEnd = Math.max(selectionStart[1], selectionEnd[1]);
+            const timeStart = Math.min(selectionStart[0], selectionEnd[0]) - 1;
+            const timeEnd = Math.max(selectionStart[0], selectionEnd[0]) - 1;
+            for (let weekday = dStart; weekday <= dEnd; weekday++) {
+                const oh: OpeningHour = {
+                    weekday: weekday,
+                    startHour: h(timeStart),
+                    startMinutes: m(timeStart),
+                    endHour: h(timeEnd + 1),
+                    endMinutes: m(timeEnd + 1)
+                }
+                if (oh.endHour > 23) {
+                    oh.endHour = 24;
+                    oh.endMinutes = 0;
+                }
+                self.source.data.push(oh);
+            }
+            self.source.ping();
+
+            // Clear the highlighting
+            let header = table.rows[0];
+            for (let j = 1; j < header.cells.length; j++) {
+                header.cells[j].classList?.remove("oh-timecol-selected")
+            }
+            for (let i = 1; i < table.rows.length; i++) {
+                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");
+                    row.classList?.remove("oh-timerow-selected");
+                }
+            }
+        }
+
+        table.onmouseup = () => {
+            endSelection();
+        };
+        table.onmouseleave = () => {
+            endSelection();
+        };
+
+        let lastSelectionIend, lastSelectionJEnd;
+        function selectAllBetween(iEnd, jEnd) {
+
+            if (lastSelectionIend === iEnd && lastSelectionJEnd === jEnd) {
+                return; // We already did this
+            }
+            lastSelectionIend = iEnd;
+            lastSelectionJEnd = jEnd;
+
+            let iStart = selectionStart[0];
+            let jStart = selectionStart[1];
+
+            if (iStart > iEnd) {
+                const h = iStart;
+                iStart = iEnd;
+                iEnd = h;
+            }
+            if (jStart > jEnd) {
+                const h = jStart;
+                jStart = jEnd;
+                jEnd = h;
+            }
+
+            let header = table.rows[0];
+            for (let j = 1; j < header.cells.length; j++) {
+                let cell = header.cells[j]
+                cell.classList?.remove("oh-timecol-selected-round-left");
+                cell.classList?.remove("oh-timecol-selected-round-right");
+
+                if (jStart + 1 <= j && j <= jEnd + 1) {
+                    cell.classList?.add("oh-timecol-selected")
+                    if (jStart + 1 == j) {
+                        cell.classList?.add("oh-timecol-selected-round-left");
+                    }
+                    if (jEnd + 1 == j) {
+                        cell.classList?.add("oh-timecol-selected-round-right");
+                    }
+
+                } else {
+                    cell.classList?.remove("oh-timecol-selected")
+                }
+            }
+
+
+            for (let i = 1; i < table.rows.length; i++) {
+                let row = table.rows[i];
+                if (iStart <= i && i <= iEnd) {
+                    row.classList?.add("oh-timerow-selected")
+                } else {
+                    row.classList?.remove("oh-timerow-selected")
+                }
+                for (let j = 0; j < row.cells.length; j++) {
+                    let cell = row.cells[j]
+                    if (cell === undefined) {
+                        continue;
+                    }
+                    let offset = 0;
+                    if (i % 2 == 1) {
+                        if (j == 0) {
+                            // This is the first column of a full hour -> This is the time indication (skip)
+                            continue;
+                        }
+                        offset = -1;
+                    }
+
+
+                    if (iStart <= i && i <= iEnd &&
+                        jStart <= j + offset && j + offset <= jEnd) {
+                        cell?.classList?.add("oh-timecell-selected")
+                    } else {
+                        cell?.classList?.remove("oh-timecell-selected")          
+                    }
+                    
+
+                }
+
+            }
+        }
+
+        for (let i = 1; i < table.rows.length; i++) {
+            let row = table.rows[i]
+            for (let j = 0; j < row.cells.length; j++) {
+                let cell = row.cells[j]
+                let offset = 0;
+                if (i % 2 == 1) {
+                    if (j == 0) {
+                        continue;
+                    }
+                    offset = -1;
+                }
+
+
+                cell.onmousedown = (ev) => {
+                    ev.preventDefault();
+                    startSelection(i, j + offset)
+                    selectAllBetween(i, j + offset);
+                }
+                cell.ontouchstart = (ev) => {
+                    ev.preventDefault();
+                    startSelection(i, j + offset);
+                    selectAllBetween(i, j + offset);
+                }
+                cell.onmouseenter = () => {
+                    if (mouseIsDown) {
+                        selectionEnd = [i, j + offset];
+                        selectAllBetween(i, j + offset)
+                    }
+                }
+
+
+                cell.ontouchmove = (ev: TouchEvent) => {
+
+                    ev.preventDefault();
+                    for (const k in ev.targetTouches) {
+                        const touch = ev.targetTouches[k];
+                        if(touch.clientX === undefined || touch.clientY === undefined){
+                            continue;
+                        }
+                        const elUnderTouch = document.elementFromPoint(
+                            touch.clientX,
+                            touch.clientY
+                        );
+                        // @ts-ignore
+                        const f = elUnderTouch.onmouseenter;
+                        if (f) {
+                            f();
+                        }
+                    }
+
+                }
+
+                cell.ontouchend = (ev) => {
+                    ev.preventDefault();
+                    endSelection();
+                }
+            }
+
+        }
+
+
+    }
+
+    IsValid(t: OpeningHour[]): boolean {
+        return true;
+    }
+
+    GetValue(): UIEventSource<OpeningHour[]> {
+        return this.source;
+    }
+
+}

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";
+
+    }
+
+
+}

UI/OpeningHours/PublicHolidayInput.ts

@@ -0,0 +1,170 @@
+
+import {OH} from "./OpeningHours";
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {UIElement} from "../UIElement";
+import Combine from "../Base/Combine";
+import {TextField} from "../Input/TextField";
+import {DropDown} from "../Input/DropDown";
+import {InputElement} from "../Input/InputElement";
+import Translations from "../i18n/Translations";
+
+export default class PublicHolidayInput extends InputElement<string> {
+    IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
+
+    private readonly _value: UIEventSource<string>;
+    private readonly _dropdown: UIElement;
+    private readonly _mode: UIEventSource<string>;
+    private readonly _startHour: UIElement;
+    private readonly _endHour: UIElement;
+
+    constructor(value: UIEventSource<string> = new UIEventSource<string>("")) {
+        super();
+        this._value = value;
+
+        const dropdown = new DropDown(
+            Translations.t.general.opening_hours.open_during_ph,
+            [
+                {shown: Translations.t.general.opening_hours.ph_not_known, value: ""},
+                {shown: Translations.t.general.opening_hours.ph_closed, value: "off"},
+                {shown:Translations.t.general.opening_hours.ph_open, value: " "}
+            ]
+        );
+        this._dropdown = dropdown.SetStyle("display:inline-block;");
+        this._mode = dropdown.GetValue();
+        this.ListenTo(this._mode);
+
+        const start = new TextField({
+            placeholder: "starthour",
+            htmlType: "time"
+        });
+        const end = new TextField({
+            placeholder: "starthour",
+            htmlType: "time"
+        });
+        this._startHour = start.SetStyle("display:inline-block;");
+        this._endHour = end.SetStyle("display:inline-block;");
+        const self = this;
+
+        this._value.addCallbackAndRun(ph => {
+            if (ph === undefined) {
+                return;
+            }
+            const parsed = PublicHolidayInput.LoadValue(ph);
+            if (parsed === null) {
+                return;
+            }
+
+            dropdown.GetValue().setData(parsed.mode);
+            if (parsed.start) {
+                start.GetValue().setData(parsed.start);
+            }
+            if (parsed.end) {
+                end.GetValue().setData(parsed.end);
+            }
+
+        })
+
+
+        function updateValue() {
+            const phStart = dropdown.GetValue().data;
+            if (phStart === undefined || phStart === "") {
+                // Unknown
+                self._value.setData("");
+                return;
+            }
+
+            if (phStart === " ") {
+                // THey are open, we need to include the start- and enddate
+                const startV = start.GetValue().data;
+                const endV = end.GetValue().data;
+                if (startV === undefined || endV === undefined) {
+                    self._value.setData(`PH open`);
+                    return;
+                }
+
+                self._value.setData(`PH ${startV}-${endV}`);
+                return;
+            }
+            self._value.setData(`PH ${phStart}`);
+        }
+
+        dropdown.GetValue().addCallbackAndRun(() => {
+            updateValue();
+        });
+        start.GetValue().addCallbackAndRun(() => {
+            updateValue();
+        });
+        end.GetValue().addCallbackAndRun(() => {
+            updateValue();
+        });
+    }
+
+    public static LoadValue(str: string): {
+        mode: string,
+        start?: string,
+        end?: string
+    } {
+        str = str.trim();
+        if (!str.startsWith("PH")) {
+            return null;
+        }
+
+        str = str.trim();
+        if (str === "PH off") {
+            return {
+                mode: "off"
+            }
+        }
+        
+        if(str === "PH open"){
+            return {
+                mode: " "
+            }
+        }
+
+        if (!str.startsWith("PH ")) {
+            return null;
+        }
+        try {
+
+            const timerange = OH.parseHHMMRange(str.substring(2));
+            if (timerange === null) {
+                return null;
+            }
+
+            return {
+                mode: " ",
+                start: OH.hhmm(timerange.startHour, timerange.startMinutes),
+                end: OH.hhmm(timerange.endHour, timerange.endMinutes),
+
+            }
+        } catch (e) {
+            return null;
+        }
+    }
+
+    InnerRender(): string {
+        const mode = this._mode.data;
+        if (mode === " ") {
+            return new Combine([this._dropdown,
+                " ",
+                Translations.t.general.opening_hours.opensAt,
+                " ",
+                this._startHour,
+                " ",
+                Translations.t.general.opening_hours.openTill,
+                " ",
+                this._endHour]).Render();
+        }
+        return this._dropdown.Render();
+    }
+
+    GetValue(): UIEventSource<string> {
+        return this._value;
+    }
+
+    IsValid(t: string): boolean {
+        return true;
+    }
+
+}