Themes(postboxes): add 'points_in_time' input element, add 'collection_times' to posbox theme, fix #757

src/UI/CollectionTimes/CollectionTimeRange.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  /*
+   * Visualises collection times for a single collection range
+   */
+  import { OH } from "../OpeningHours/OpeningHours"
+  import type { OpeningRange } from "../OpeningHours/OpeningHours"
+
+  import Translations from "../i18n/Translations"
+  import Tr from "../Base/Tr.svelte"
+
+  export let range: OpeningRange[][]
+  const wt = Translations.t.general.weekdays
+  const weekdays: Translation[] = [wt.sunday, wt.monday, wt.tuesday, wt.wednesday, wt.thursday, wt.friday, wt.saturday]
+  let allTheSame = OH.weekdaysIdentical(range, 0, range.length - 1)
+  let today = new Date().getDay()
+
+  let dayZero = -1
+  for (let i = 0; i < range.length; i++) {
+    const moments = range[i]
+    if (moments.length === 0) {
+      continue
+    }
+    const moment = moments[0]
+    const day = moment.startDate.getDay()
+    dayZero = day - i
+  }
+  function isToday(i:number ){
+    i = (i+dayZero) % 7
+    return i === today
+  }
+</script>
+
+{#if allTheSame && range[0]?.length > 0}
+  <div class="flex justify-between">
+    <slot />
+    {#each range[0] as moment (moment)}
+      <div class="ml-8">{moment.startDate.toLocaleTimeString()}</div>
+    {/each}
+  </div>
+{:else if dayZero >= 0 } <!-- /*If dayZero == -1, then we got no valid values at all*/ -->
+  {#each range as moments, i (moments)}
+    <div class="flex gap-x-4 justify-between w-full px-2" class:interactive={isToday(i)} class:text-bold={isToday(i)} >
+      <Tr t={weekdays[(i + dayZero) % 7]} />
+      {#if range[i].length > 0}
+        {#each moments as moment (moment)}
+          <div class="ml-8">{moment.startDate.toLocaleTimeString()}</div>
+        {/each}
+      {:else}
+          <Tr cls="italic subtle" t={Translations.t.general.points_in_time.closed}/>
+      {/if}
+    </div>
+  {/each}
+{/if}