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>

src/lib/database.d.ts

@@ -69,6 +69,47 @@ export type Database = {
           },
         ]
       }
+      study_space_hours: {
+        Row: {
+          closes_at: string
+          created_at: string | null
+          day_of_week: number
+          id: string
+          open_today_status: boolean | null
+          opens_at: string
+          study_space_id: string | null
+          updated_at: string | null
+        }
+        Insert: {
+          closes_at: string
+          created_at?: string | null
+          day_of_week: number
+          id?: string
+          open_today_status?: boolean | null
+          opens_at: string
+          study_space_id?: string | null
+          updated_at?: string | null
+        }
+        Update: {
+          closes_at?: string
+          created_at?: string | null
+          day_of_week?: number
+          id?: string
+          open_today_status?: boolean | null
+          opens_at?: string
+          study_space_id?: string | null
+          updated_at?: string | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "study_space_hours_study_space_id_fkey"
+            columns: ["study_space_id"]
+            isOneToOne: false
+            referencedRelation: "study_spaces"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       study_space_images: {
         Row: {
           created_at: string | null
@@ -161,47 +202,6 @@ export type Database = {
         }
         Relationships: []
       }
-      study_space_hours: {
-        Row: {
-          id: string
-          study_space_id: string
-          day_of_week: number
-          opens_at: string
-          closes_at: string
-          is_24_7: boolean
-          created_at: string | null
-          updated_at: string | null
-        }
-        Insert: {
-          id?: string
-          study_space_id: string
-          day_of_week: number
-          opens_at: string
-          closes_at: string
-          is_24_7: boolean
-          created_at?: string | null
-          updated_at?: string | null
-        }
-        Update: {
-          id?: string
-          study_space_id?: string
-          day_of_week?: number
-          opens_at?: string
-          closes_at?: string
-          is_24_7?: boolean
-          created_at?: string | null
-          updated_at?: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "study_space_hours_study_space_id_fkey"
-            columns: ["study_space_id"]
-            isOneToOne: false
-            referencedRelation: "study_spaces"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
     }
     Views: {
       [_ in never]: never
@@ -331,3 +331,4 @@ export const Constants = {
     Enums: {},
   },
 } as const
+

src/lib/index.ts

@@ -57,5 +57,12 @@ export const daysOfWeek = [
     "Wednesday",
     "Thursday",
     "Friday",
-    "Saturday"
+    "Saturday",
+    "All Days",
+    "All Other Days"
 ];
+
+export function timeToMins(time: string) {
+    const [hour, min] = time.split(":");
+    return Number(hour) * 60 + Number(min);
+}