refactor: simpler timing inputs

src/lib/components/inputs/OpeningTimesDay.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+    import { daysOfWeek } from "$lib";
+    import Button from "../Button.svelte";
+    import CrossUrl from "../../assets/cross.svg";
+    interface Props {
+        index: number;
+        openingValue: string;
+        closingValue: string;
+        openTodayStatus: boolean | null;
+        onHide?: () => void;
+        day: number; //0-6 for Sunday-Saturday, 7 for all days, 8 for all other days
+    }
+
+    let {
+        index,
+        openingValue = $bindable(),
+        closingValue = $bindable(),
+        openTodayStatus = $bindable(),
+        day = $bindable(),
+        onHide
+    }: Props = $props();
+</script>
+
+<div class="opening-time-item">
+    {#if day <= 6}
+        <select bind:value={day} class="dayOfWeek">
+            {#each [0, 1, 2, 3, 4, 5, 6] as dayNum (dayNum)}
+                <option value={dayNum}>{daysOfWeek[dayNum]}</option>
+            {/each}
+        </select>
+    {:else}
+        <label for={"opens-" + index} class="dayOfWeek">{daysOfWeek[day]}</label>
+    {/if}
+    <label for={"isAllDay-" + index}>
+        <input
+            id={"isAllDay-" + index}
+            class="checkbox"
+            type="checkbox"
+            bind:checked={
+                () => openTodayStatus === true, (v) => (openTodayStatus = v ? true : null)
+            }
+        />
+        Open all day
+    </label>
+    <label for={"isclosed-" + index}>
+        <input
+            id={"isclosed-" + index}
+            class="checkbox"
+            type="checkbox"
+            bind:checked={
+                () => openTodayStatus === false, (v) => (openTodayStatus = v ? false : null)
+            }
+        />
+        Closed
+    </label>
+    {#if onHide}
+        <button class="hideButton" onclick={onHide} type="button">
+            <img src={CrossUrl} alt="nah" />
+        </button>
+    {/if}
+    {#if openTodayStatus === null}
+        <div class="timeRange">
+            <input id={"opens-" + index} type="time" bind:value={openingValue} />
+            <span class="to">to</span>
+            <input id={"closes-" + index} type="time" bind:value={closingValue} />
+        </div>
+    {/if}
+</div>
+
+<style>
+    .opening-time-item {
+        display: flex;
+        flex-direction: row;
+        gap: 0.25rem 1rem;
+        padding: 0.5rem;
+        align-items: center;
+        flex-wrap: wrap;
+        position: relative;
+    }
+
+    input[type="time"] {
+        border: 2px solid #000000;
+        border-radius: 4px;
+        background: none;
+        color: #000000;
+        padding: 0.25rem;
+        flex: 1;
+        filter: brightness(0) saturate(100%) invert(98%) sepia(8%) saturate(555%) hue-rotate(54deg)
+            brightness(100%) contrast(102%);
+    }
+
+    input[type="checkbox"] {
+        margin: 0;
+        padding: 0;
+    }
+
+    .timeRange {
+        display: flex;
+        flex-direction: row;
+        gap: 0.5rem;
+        align-items: center;
+        width: 100%;
+    }
+
+    .dayOfWeek {
+        display: flex;
+        align-items: center;
+        font-weight: bold;
+        justify-content: center;
+        text-align: center;
+        border-radius: 0.25rem;
+        background-color: #eaffeb;
+        color: #2e4653;
+        cursor: pointer;
+        padding: 0.2rem 0.4rem;
+        font-size: 1rem;
+    }
+
+    .hideButton {
+        background: none;
+        border: none;
+        margin: 0 0.5% 0 auto;
+        width: 5%;
+        padding: 0;
+        overflow: visible;
+    }
+
+    .hideButton img {
+        width: 120%;
+        transform: scale(2);
+    }
+</style>