Refactoring: port Parts of OHVis to svelte

src/UI/Base/Combine.ts

@@ -2,6 +2,9 @@ import { FixedUiElement } from "./FixedUiElement"
 import { Utils } from "../../Utils"
 import BaseUIElement from "../BaseUIElement"
 
+/**
+ * @deprecated
+ */
 export default class Combine extends BaseUIElement {
     private readonly uiElements: BaseUIElement[]
 

src/UI/OpeningHours/OpeningHoursVisualization.ts

@@ -7,10 +7,13 @@ import BaseUIElement from "../BaseUIElement"
 import Toggle from "../Input/Toggle"
 import { VariableUiElement } from "../Base/VariableUIElement"
 import Table from "../Base/Table"
-import { Translation, TypedTranslation } from "../i18n/Translation"
+import { Translation } from "../i18n/Translation"
 import Loading from "../Base/Loading"
 import opening_hours from "opening_hours"
 import Locale from "../i18n/Locale"
+import SpecialCase from "./Visualisation/SpecialCase.svelte"
+import SvelteUIElement from "../Base/SvelteUIElement"
+import OpeningHoursRangeElement from "./Visualisation/OpeningHoursRangeElement.svelte"
 
 export default class OpeningHoursVisualization extends Toggle {
     private static readonly weekdays: Translation[] = [
@@ -79,7 +82,7 @@ export default class OpeningHoursVisualization extends Toggle {
             return OpeningHoursVisualization.ConstructVizTable(oh, ranges, lastMonday)
         }
         // The special case that range is completely empty
-        return OpeningHoursVisualization.ShowSpecialCase(oh)
+        return new SvelteUIElement(SpecialCase, { oh })
     }
 
     private static ConstructVizTable(
@@ -130,13 +133,13 @@ export default class OpeningHoursVisualization extends Toggle {
             day.SetClass("w-full h-full flex")
 
             const rangesForDay = ranges[i].map((range) =>
-                OpeningHoursVisualization.CreateRangeElem(
+                new SvelteUIElement(OpeningHoursRangeElement, {
                     availableArea,
                     earliestOpen,
                     latestclose,
                     range,
                     isWeekstable
-                )
+                })
             )
             const allRanges = new Combine([
                 ...OpeningHoursVisualization.CreateLinesAtChangeHours(
@@ -172,37 +175,6 @@ export default class OpeningHoursVisualization extends Toggle {
             )
     }
 
-    private static CreateRangeElem(
-        availableArea: number,
-        earliestOpen: number,
-        latestclose: number,
-        range: {
-            isOpen: boolean
-            isSpecial: boolean
-            comment: string
-            startDate: Date
-            endDate: Date
-        },
-        isWeekstable: boolean
-    ): BaseUIElement {
-        const textToShow =
-            range.comment ?? (isWeekstable ? "" : range.startDate.toLocaleDateString())
-
-        if (!range.isOpen && !range.isSpecial) {
-            return new FixedUiElement(textToShow).SetClass("ohviz-day-off")
-        }
-
-        const startOfDay: Date = new Date(range.startDate)
-        startOfDay.setHours(0, 0, 0, 0)
-        const startpoint = (range.startDate.getTime() - startOfDay.getTime()) / 1000 - earliestOpen
-        // prettier-ignore
-        const width = (100 * (range.endDate.getTime() - range.startDate.getTime()) / 1000) / (latestclose - earliestOpen)
-        const startPercentage = (100 * startpoint) / availableArea
-        return new FixedUiElement(textToShow)
-            .SetStyle(`left:${startPercentage}%; width:${width}%`)
-            .SetClass("ohviz-range")
-    }
-
     private static CreateLinesAtChangeHours(
         changeHours: number[],
         availableArea: number,
@@ -280,27 +252,4 @@ export default class OpeningHoursVisualization extends Toggle {
         const headerHeight = showHigherUsed ? "4rem" : "2rem"
         return [headerElem, headerHeight]
     }
-
-    /*
-     * Visualizes any special case: e.g. not open for a long time, 24/7 open, ...
-     * */
-    private static ShowSpecialCase(oh: opening_hours) {
-        const nextChange = oh.getNextChange()
-        if (nextChange !== undefined) {
-            const nowOpen = oh.getState(new Date())
-            const t = Translations.t.general.opening_hours
-            const tr: TypedTranslation<{ date }> = nowOpen ? t.open_until : t.closed_until
-            const date = nextChange.toLocaleString()
-            return tr.Subs({ date })
-        }
-        const comment = oh.getComment() ?? oh.getUnknown()
-        if (typeof comment === "string") {
-            return new FixedUiElement(comment)
-        }
-
-        if (oh.getState()) {
-            return Translations.t.general.opening_hours.open_24_7.Clone()
-        }
-        return Translations.t.general.opening_hours.closed_permanently.Clone()
-    }
 }

src/UI/OpeningHours/Visualisation/OpeningHoursRangeElement.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  /**
+   * A single bar in the Opening-Hours visualisations table, eventually with a text
+   */
+  export let availableArea: number
+  export let earliestOpen: number
+  export let latestclose: number
+  export let range: {
+    isOpen: boolean
+    isSpecial: boolean
+    comment: string
+    startDate: Date
+    endDate: Date
+  }
+  export let isWeekstable: boolean
+
+  let textToShow = range.comment ?? (isWeekstable ? "" : range.startDate.toLocaleDateString())
+  let startOfDay: Date = new Date(range.startDate)
+  startOfDay.setHours(0, 0, 0, 0)
+  let startpoint = (range.startDate.getTime() - startOfDay.getTime()) / 1000 - earliestOpen
+  // prettier-ignore
+  let width = (100 * (range.endDate.getTime() - range.startDate.getTime()) / 1000) / (latestclose - earliestOpen)
+  let startPercentage = (100 * startpoint) / availableArea
+
+</script>
+
+{#if !range.isOpen && !range.isSpecial}
+  <div class="ohviz-day-off">{textToShow}</div>
+{:else}
+  <div class="ohviz-range" style={`left:${startPercentage}%; width:${width}%`}>{textToShow}</div>
+{/if}

src/UI/OpeningHours/Visualisation/SpecialCase.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  /*
+     * Visualizes any special case: e.g. not open for a long time, 24/7 open, ...
+     * */
+  import opening_hours from "opening_hours"
+  import Tr from "../../Base/Tr.svelte"
+  import Translations from "../../i18n/Translations"
+
+  export let oh: opening_hours
+  let nextChange = oh.getNextChange()
+  let nowOpen = oh.getState(new Date())
+  let comment = oh.getComment() ?? oh.getUnknown()
+  const t = Translations.t.general.opening_hours
+</script>
+
+{#if nextChange !== undefined}
+  <Tr t={(nowOpen ? t.open_until : t.closed_until).Subs({ date :nextChange.toLocaleString() })} />
+{:else if typeof comment === "string"}
+  <div>{comment}</div>
+{:else if oh.getState()}
+  <Tr t={t.open_24_7} />
+{:else}
+  <Tr t={t.closed_permanently} />
+{/if}