Add 24/7 detection to Opening Hours

Logic/OpeningHours.ts

@@ -29,6 +29,9 @@ export class OH {
         const partsPerWeekday: string [][] = [[], [], [], [], [], [], []];
 
         function hhmm(h, m) {
+            if (h == 24) {
+                return "00:00";
+            }
             return Utils.TwoDigits(h) + ":" + Utils.TwoDigits(m);
         }
 
@@ -69,7 +72,11 @@ export class OH {
         }
         pushRule();
 
-        return rules.join("; ") + ";"
+        const oh = rules.join("; ") + ";"
+        if (oh === "Mo-Su 00:00-00:00;") {
+            return "24/7"
+        }
+        return oh;
     }
 
     /**
@@ -184,6 +191,10 @@ export class OH {
         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]);
@@ -205,6 +216,7 @@ export class OH {
             .map(s => s.trim())
             .filter(str => str !== "")
             .map(OH.parseHHMMRange)
+            .filter(v => v != null)
     }
 
     private static ParseWeekday(weekday: string): number {
@@ -252,6 +264,10 @@ export class OH {
     }
 
     public static ParseRule(rule: string): OpeningHour[] {
+        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

State.ts

@@ -23,7 +23,7 @@ export default class State {
     // The singleton of the global state
     public static state: State;
     
-    public static vNumber = "0.1.0";
+    public static vNumber = "0.1.0a";
     
     // The user journey states thresholds when a new feature gets unlocked
     public static userJourney = {

UI/Input/OpeningHours/OpeningHoursPickerTable.ts

@@ -3,6 +3,7 @@ import {OpeningHour} from "../../../Logic/OpeningHours";
 import {UIEventSource} from "../../../Logic/UIEventSource";
 import {Utils} from "../../../Utils";
 import {UIElement} from "../../UIElement";
+import Translations from "../../i18n/Translations";
 
 /**
  * This is the base-table which is selectable by hovering over it.
@@ -12,7 +13,17 @@ export default class OpeningHoursPickerTable extends InputElement<OpeningHour[]>
     public readonly IsSelected: UIEventSource<boolean>;
     private readonly weekdays: UIEventSource<UIElement[]>;
 
-    public static readonly days = ["Maan", "Din", "Woe", "Don", "Vrij", "Zat", "Zon"];
+    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[]>;
 
@@ -48,7 +59,7 @@ export default class OpeningHoursPickerTable extends InputElement<OpeningHour[]>
                 Utils.Times(id => `<td id="${this.id}-timecell-${id}-${h}-30" class="oh-timecell oh-timecell-half"><div class="oh-timecell-inner"></div></td>`, 7) +
                 '</tr>';
         }
-        let days = OpeningHoursPickerTable.days.join("</th><th width='14%'>");
+        let days = OpeningHoursPickerTable.days.map(day => day.Render()).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>`;
     }
 

UI/i18n/Translations.ts

@@ -807,8 +807,82 @@ export default class Translations {
                 "en": "Zoom in to see this layer",
                 "nl": "Vergroot de kaart om deze laag te zien",
                 "de": "Vergrößern, um diese Ebene zu sehen"
+            }),
+            weekdays: {
+                abbreviations:{
+                    monday: new T({
+                        "en": "Mon",
+                        "nl": "Maan",
+                        "fr": "Lun",
+                    }),
+                    tuesday: new T({
+                        "en": "Tue",
+                        "nl": "Din",
+                        "fr": "Mar",
+                    }),
+                    wednesday: new T({
+                        "en": "Wed",
+                        "nl": "Woe",
+                        "fr": "Mercr",
+                    }),
+                    thursday: new T({
+                        "en": "Thu",
+                        "nl": "Don",
+                        "fr": "Jeudi",
+                    }),
+                    friday: new T({
+                        "en": "Fri",
+                        "nl": "Vrij",
+                        "fr": "Vendr",
+                    }),
+                    saturday: new T({
+                        "en": "Sat",
+                        "nl": "Zat",
+                        "fr": "Sam",
+                    }),
+                    sunday: new T({
+                        "en": "Sun",
+                        "nl": "Zon",
+                        "fr": "Dim",
                     })
                 },
+                monday: new T({
+                    "en": "Monday",
+                    "nl": "Maandag",
+                    "fr": "Lundi",
+                }),
+                tuesday: new T({
+                    "en": "Tuesdday",
+                    "nl": "Dinsdag",
+                    "fr": "Mardi",
+                }),
+                wednesday: new T({
+                    "en": "Wednesday",
+                    "nl": "Woensdag",
+                    "fr": "Mercredi",
+                }),
+                thursday: new T({
+                    "en": "Thursday",
+                    "nl": "Donderdag",
+                    "fr": "Jeudi",
+                }),
+                friday: new T({
+                    "en": "Friday",
+                    "nl": "Vrijdag",
+                    "fr": "Vendredi",
+                }),
+                saturday: new T({
+                    "en": "Saturday",
+                    "nl": "Zaterdag",
+                    "fr": "Samedi",
+                }),
+                sunday: new T({
+                    "en": "Sunday",
+                    "nl": "Zondag",
+                    "fr": "Dimance",
+                })
+            }
+        },
         favourite: {
             title: new T({
                 en: "Personal theme",

test/Tag.spec.ts

@@ -278,6 +278,13 @@ new T([
             },
 
         ]);
-        equal(rules, "Tu 10:00-12:00; Sucons 13:00-17:00;");
+        equal(rules, "Tu 10:00-12:00; Su 13:00-17:00;");
+    }],
+    ["OH 24/7",() => {
+        const rules = OH.Parse("24/7");
+        equal(rules.length, 7);
+        equal(rules[0].startHour, 0);
+        const asStr = OH.ToString(rules);
+        equal(asStr, "24/7");
     }]
 ]);