Refactoring: port opening hours visualisation to svelte

src/UI/OpeningHours/Visualisation/OpeningHours.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  /**
+   * Full opening hours visualisations table, dispatches to special cases
+   */
+
+  import { OH, ToTextualDescription } from "../OpeningHours"
+  import opening_hours from "opening_hours"
+  import { ariaLabel } from "../../../Utils/ariaLabel"
+  import RegularOpeningHoursTable from "./RegularOpeningHoursTable.svelte"
+  import SpecialCase from "./SpecialCase.svelte"
+  import { Translation } from "../../i18n/Translation"
+  import type { OpeningRange } from "../OpeningHours"
+
+  export let opening_hours_obj: opening_hours
+
+  let applicableWeek = OH.createRangesForApplicableWeek(opening_hours_obj)
+  let oh = opening_hours_obj
+
+  let textual: Translation = ToTextualDescription.createTextualDescriptionFor(oh, applicableWeek.ranges)
+  let applicableWeekRanges: { ranges: OpeningRange[][]; startingMonday: Date } = OH.createRangesForApplicableWeek(oh)
+  let ranges = applicableWeekRanges.ranges
+  let lastMonday = applicableWeekRanges.startingMonday
+
+</script>
+<div use:ariaLabel={textual} class="no-weblate">
+  <!-- First, a small sanity check. The business might be permanently closed, 24/7 opened or be another special case -->
+  {#if ranges.some((range) => range.length > 0)}
+    <!-- The normal case: we have items for the coming days -->
+    <RegularOpeningHoursTable {ranges} rangeStart={lastMonday} oh={opening_hours_obj} />
+  {:else}
+    <!-- The special case that range is completely empty -->
+    <SpecialCase oh={opening_hours_obj} />
+  {/if}
+</div>