refactor: simpler timing inputs

src/lib/components/Button.svelte

@@ -5,7 +5,7 @@
         onclick?: (event: MouseEvent) => void;
         disabled?: boolean;
         type?: "button" | "submit" | "reset";
-        style?: "normal" | "red";
+        style?: "normal" | "red" | "invisible";
         formaction?: string;
         children?: Snippet;
     }
@@ -45,6 +45,9 @@
     .red {
         background-color: #bd4949;
     }
+    .invisible {
+        background: none;
+    }
     .button:focus {
         outline: 2px solid #007bff;
     }

src/lib/components/CompulsoryTags.svelte

@@ -12,7 +12,7 @@
         "No Outlets": "compulsoryTagRed",
         "Some Outlets": "compulsoryTagYellow",
         "Good WiFi": "compulsoryTagGreen",
-        "Bad WiFi": "compulsoryTagRed",
+        "Bad/No WiFi": "compulsoryTagRed",
         "Moderate WiFi": "compulsoryTagYellow",
         "No WiFi": "compulsoryTagRed"
     };

src/lib/components/OpeningTimes.svelte

@@ -18,7 +18,7 @@
     // Compute the display string for opening times
     let openingDisplay = $state("");
     if (todayHours) {
-        openingDisplay = todayHours.is_24_7
+        openingDisplay = todayHours.open_today_status
             ? "Open 24/7"
             : `${formatTime(todayHours.opens_at)} - ${formatTime(todayHours.closes_at)}`;
     } else {

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>