refactor: open timings

src/lib/components/SpaceCard.svelte

@@ -6,19 +6,22 @@
 
     interface Props {
         space: Table<"study_spaces">;
-        hours: Table<"study_space_hours">[];
         alt: string;
         imgSrc: string;
         href?: string;
         isFavourite: boolean;
-
+        isAvailable?: boolean;
         onToggleFavourite?: () => void;
+        footer?: string;
     }
 
-    const { space, hours, alt, imgSrc, href, isFavourite, onToggleFavourite }: Props = $props();
+    const { space, alt, imgSrc, href, isFavourite, onToggleFavourite, isAvailable, footer }: Props =
+        $props();
+
+    console.log(isAvailable);
 </script>
 
-<a class="card" {href}>
+<a class="card {isAvailable ? 'green' : 'grey'}" {href}>
     <!-- <img src={imgSrc} {alt} /> -->
     <div class="image-container">
         <img src={imgSrc} {alt} />
@@ -34,11 +37,14 @@
         {#if space.tags.length > 0}
             <div class="tagContainer">
                 {#each space.tags as tag (tag)}
-                    <span class="tag">{tag}</span>
+                    <span class="tag {isAvailable ? 'tagGreen' : 'tagGrey'}">{tag}</span>
                 {/each}
             </div>
         {/if}
-        <div class="openingTimesContainer"><OpeningTimes {hours} /></div>
+        <div class="spacer"></div>
+        {#if footer}
+            <div class="footer">{footer}</div>
+        {/if}
     </div>
 </a>
 
@@ -46,14 +52,25 @@
     .card {
         display: flex;
         flex-direction: column;
-        background-color: #49bd85;
         width: 100%;
         max-width: 20rem;
         border-radius: 0.5rem;
         overflow: hidden;
         text-decoration: none;
     }
+    .green {
+        background-color: #49bd85;
+    }
+    .grey {
+        background-color: #2e4653;
+    }
+    .spacer {
+        flex: 1;
+    }
     .description {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
         padding: 0.5rem;
         color: #edebe9;
     }
@@ -83,13 +100,20 @@
         justify-content: center;
         text-align: center;
         border-radius: 0.25rem;
-        background-color: #2e4653;
         color: #eaffeb;
         font-size: 0.875rem;
         cursor: pointer;
         padding: 0.2rem 0.6rem;
     }
 
+    .tagGreen {
+        background-color: #2e4653;
+    }
+
+    .tagGrey {
+        background-color: #49bd85;
+    }
+
     .compulsoryContainer {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(3.75rem, 1fr));
@@ -109,4 +133,16 @@
         padding: 0.25rem;
         z-index: 1;
     }
+
+    .footer {
+        width: 100%;
+        color: #2e4653;
+        background-color: #eaffeb;
+        align-self: flex-end;
+        border-radius: 0.5rem;
+        padding: 0.1rem;
+        text-align: center;
+        font-weight: bold;
+        margin-top: 0.4rem;
+    }
 </style>

src/lib/index.ts

@@ -84,3 +84,21 @@ export function haversineDistance(
         Math.pow(Math.sin(deltaLng / 2), 2) * Math.cos(lat1) * Math.cos(lat2);
     return radius * 2 * Math.asin(Math.sqrt(e1));
 }
+
+export function collectTimings(study_space_hours: Table<"study_space_hours">[]) {
+    // Collect all timing entries
+    const timingsPerDay: Record<number, Table<"study_space_hours">[]> = {
+        0: [],
+        1: [],
+        2: [],
+        3: [],
+        4: [],
+        5: [],
+        6: []
+    };
+
+    for (const entry of study_space_hours) {
+        timingsPerDay[entry.day_of_week].push(entry);
+    }
+    return timingsPerDay;
+}