Refactoring: port opening hours visualisation to svelte

src/UI/OpeningHours/Visualisation/OpeningHoursHeader.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import BaseUIElement from "../../BaseUIElement"
+  import Combine from "../../Base/Combine"
+  import { FixedUiElement } from "../../Base/FixedUiElement"
+
+  /**
+   * The element showing an "hour" in a bubble, above or below the opening hours table
+   * Dumbly shows one row of what is given.
+   *
+   * Does not include lines
+   */
+  export let availableArea: number
+  export let changeHours: number[]
+  export let changeHourText: string[]
+  export let earliestOpen: number
+  export let todayChangeMoments: Set<number>
+
+  function calcOffset(changeMoment: number) {
+    return (100 * (changeMoment - earliestOpen)) / availableArea
+  }
+
+</script>
+
+<div class="w-full absolute block h-8" style="margin-top: -1rem">
+  {#each changeHours as changeMoment, i}
+    {#if calcOffset(changeMoment) >= 0 && calcOffset(changeMoment) <= 100}
+      <div style={`left:${calcOffset(changeMoment)}%; margin-top: 0.1rem`}
+           class="block absolute top-0 m-0 h-full box-border ohviz-time-indication">
+        <div
+          style="left: -50%; word-break: initial;"
+          class:border-opacity-50={!todayChangeMoments?.has(changeMoment)}
+          class="relative h-fit bg-white pl-1 pr-1 h-3 font-sm rounded-xl border-2 border-black">
+          {changeHourText[i]}
+        </div>
+      </div>
+    {/if}
+  {/each}
+</div>