feat: added compulsory tags

2025-06-09 17:25:12 +01:00
parent f6f09c8492
commit 3cec498192
8 changed files with 206 additions and 27 deletions
--- a/src/lib/components/CompulsoryTags.svelte
+++ b/src/lib/components/CompulsoryTags.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+    const { space } = $props();
+</script>
+
+<span class="compulsoryTagGreen">{space.volume}</span>
+<span
+    class={space.power === "Many Outlets"
+        ? "compulsoryTagGreen"
+        : space.power === "No Outlets"
+          ? "compulsoryTagRed"
+          : space.power === "Some Outlets"
+            ? "compulsoryTagYellow"
+            : "compulsoryTagGreen"}>{space.power}</span
+>
+<span
+    class={space.wifi === "Good WiFi"
+        ? "compulsoryTagGreen"
+        : space.wifi === "Bad WiFi" || space.wifi === "No WiFi"
+          ? "compulsoryTagRed"
+          : space.wifi === "Moderate WiFi"
+            ? "compulsoryTagYellow"
+            : "compulsoryTagGreen"}>{space.wifi}</span
+>
+
+<style>
+    .compulsoryTagGreen {
+        display: flex;
+        font-weight: bold;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        border-radius: 0.25rem;
+        background-color: #eaffeb;
+        color: #2e4653;
+        cursor: pointer;
+        padding: 0.2rem 0.6rem;
+    }
+    .compulsoryTagYellow {
+        display: flex;
+        font-weight: bold;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        border-radius: 0.25rem;
+        background-color: #ffffd4;
+        color: #534b2e;
+        cursor: pointer;
+        padding: 0.2rem 0.6rem;
+    }
+    .compulsoryTagRed {
+        display: flex;
+        font-weight: bold;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        border-radius: 0.25rem;
+        background-color: #ffcece;
+        color: #532e2e;
+        cursor: pointer;
+        padding: 0.2rem 0.6rem;
+    }
+</style>
--- a/src/lib/components/SpaceCard.svelte
+++ b/src/lib/components/SpaceCard.svelte
@@ -9,17 +9,21 @@
    }

    const { space, alt, imgSrc, href }: Props = $props();
+    import CompulsoryTags from "./CompulsoryTags.svelte";
 </script>

 <a class="card" {href}>
    <img src={imgSrc} {alt} />
    <div class="description">
        <h1>{space.location}</h1>
+        <div class="compulsoryContainer"><CompulsoryTags {space} /></div>
+        {#if space.tags.length > 0}
            <div class="tagContainer">
                {#each space.tags as tag (tag)}
                    <span class="tag">{tag}</span>
                {/each}
            </div>
+        {/if}
    </div>
 </a>

@@ -55,11 +59,14 @@
        gap: 0.4rem;
        border-radius: 0.5rem;
        background: none;
+        padding-top: 0.5rem;
    }

    .tag {
        display: flex;
        align-items: center;
+        justify-content: center;
+        text-align: center;
        border-radius: 0.25rem;
        background-color: #2e4653;
        color: #eaffeb;
@@ -67,4 +74,11 @@
        cursor: pointer;
        padding: 0.2rem 0.6rem;
    }
+
+    .compulsoryContainer {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 0.5rem;
+        font-size: 0.875rem;
+    }
 </style>
--- a/src/lib/database.d.ts
+++ b/src/lib/database.d.ts
@@ -70,8 +70,11 @@ export type Database = {
          description: string | null
          id: string
          location: string | null
+          power: string
          tags: string[]
          updated_at: string | null
+          volume: string
+          wifi: string
        }
        Insert: {
          building_location?: string | null
@@ -79,8 +82,11 @@ export type Database = {
          description?: string | null
          id?: string
          location?: string | null
+          power: string
          tags?: string[]
          updated_at?: string | null
+          volume: string
+          wifi: string
        }
        Update: {
          building_location?: string | null
@@ -88,8 +94,11 @@ export type Database = {
          description?: string | null
          id?: string
          location?: string | null
+          power?: string
          tags?: string[]
          updated_at?: string | null
+          volume?: string
+          wifi?: string
        }
        Relationships: []
      }
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -5,26 +5,22 @@ export type Table<T extends keyof Database["public"]["Tables"]> =
 export type Enum<T extends keyof Database["public"]["Enums"]> = Database["public"]["Enums"][T];

 export const availableStudySpaceTags = [
-    "Quiet",
-    "Loud",
-    "Silent",
    "Crowded",
    "Group study",
-    "Power outlets",
-    "No power outlets",
    "24/7",
    "Food allowed",
    "No food allowed",
    "Well lit",
    "Poorly lit",
-    "Good wifi",
-    "Bad wifi",
-    "No wifi",
    "Whiteboard",
    "Restricted access",
    "Hot",
    "Air conditioned",
    "Cold",
-    "Cringe",
-    "PCs"
+    "PCs",
+    "Cringe"
 ];
+
+export const volumeTags = ["Silent", "Quiet", "Some Noise", "Loud"];
+export const wifiTags = ["Good WiFi", "Moderate WiFi", "Bad WiFi", "No WiFi"];
+export const powerOutletTags = ["Many Outlets", "Some Outlets", "No Outlets"];
--- a/src/routes/space/+page.svelte
+++ b/src/routes/space/+page.svelte
@@ -7,7 +7,7 @@
    import Button from "$lib/components/Button.svelte";
    import Images from "$lib/components/inputs/Images.svelte";
    import type { Table } from "$lib";
-    import { availableStudySpaceTags } from "$lib";
+    import { availableStudySpaceTags, wifiTags, powerOutletTags, volumeTags } from "$lib";
    const { data } = $props();
    const { supabase } = $derived(data);

@@ -17,7 +17,10 @@
        description: "",
        building_location: "",
        location: "",
-        tags: []
+        tags: [],
+        volume: "",
+        power: "",
+        wifi: ""
    });

    async function uploadStudySpace() {
@@ -115,7 +118,41 @@
        required
    />

-    <label for="tags">Add tags:</label>
+    <div class="compulsoryTags">
+        <div class="compulsoryContainer">
+            <label for="volume">Sound level:</label>
+            <select bind:value={studySpaceData.volume} name="volume" class="compulsoryTagSelect">
+                <option value="" disabled selected>How noisy is it?</option>
+                {#each volumeTags as volumeTag (volumeTag)}
+                    <option value={volumeTag}>{volumeTag}</option>
+                {/each}
+            </select>
+        </div>
+        <div class="compulsoryContainer">
+            <label for="powerOutlets">Power outlets:</label>
+            <select
+                bind:value={studySpaceData.power}
+                name="poweOutlets"
+                class="compulsoryTagSelect"
+            >
+                <option value="" disabled selected>Power outlets?</option>
+                {#each powerOutletTags as powerOutletTag (powerOutletTag)}
+                    <option value={powerOutletTag}>{powerOutletTag}</option>
+                {/each}
+            </select>
+        </div>
+        <div class="compulsoryContainer">
+            <label for="wifi">Wifi:</label>
+            <select bind:value={studySpaceData.wifi} name="wifi" class="compulsoryTagSelect">
+                <option value="" disabled selected>How's the wifi?</option>
+                {#each wifiTags as wifiTag (wifiTag)}
+                    <option value={wifiTag}>{wifiTag}</option>
+                {/each}
+            </select>
+        </div>
+    </div>
+
+    <label for="tags">Additional tags:</label>
    <div class="tagDisplay">
        {#each studySpaceData.tags as tagName (tagName)}
            <button class="tag" onclick={deleteTag(tagName)} type="button">
@@ -184,7 +221,9 @@
            type="submit"
            disabled={(spaceImgs?.length || 0) === 0 ||
                !studySpaceData.location ||
-                studySpaceData.tags.length === 0 ||
+                !studySpaceData.wifi ||
+                !studySpaceData.volume ||
+                !studySpaceData.power ||
                !studySpaceData.building_location ||
                uploading}
        >
@@ -294,4 +333,40 @@
    .avaliableTag:last-child {
        padding-bottom: 0.6rem;
    }
+
+    .compulsoryTags {
+        display: grid;
+        gap: 0.4rem;
+        border-radius: 0.5rem;
+        background-color: none;
+        width: 100%;
+        font-size: 1rem;
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .compulsoryContainer {
+        display: flex;
+        flex-direction: column;
+        align-items: left;
+        justify-content: top;
+        border-radius: 0.5rem;
+        background-color: none;
+    }
+
+    .compulsoryTagSelect {
+        width: 100%;
+        height: 100%;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        border: 2px solid #eaffeb;
+        background: none;
+        color: #eaffeb;
+        font-size: 0.9rem;
+        text-align: left;
+    }
+
+    .compulsoryTagSelect option {
+        background-color: #2e4653;
+        color: #eaffeb;
+    }
 </style>
--- a/src/routes/space/[id]/+page.svelte
+++ b/src/routes/space/[id]/+page.svelte
@@ -3,6 +3,7 @@
    import crossUrl from "$lib/assets/cross.svg";
    import placeholder from "$lib/assets/study_space.png";
    import Carousel from "$lib/components/Carousel.svelte";
+    import CompulsoryTags from "$lib/components/CompulsoryTags.svelte";

    const { data } = $props();
    const { space, supabase } = $derived(data);
@@ -35,6 +36,8 @@
        </p>
        <hr />
    {/if}
+    <div class="compulsoryContainer"><CompulsoryTags {space} /></div>
+    {#if space.tags.length > 0}
        <div class="tagContainer">
            {#each space.tags as tag (tag)}
                <span class="tag">
@@ -42,6 +45,7 @@
                </span>
            {/each}
        </div>
+    {/if}
    <hr />
    <div class="subtitle">Where it is:</div>
    <p class="addrContainer">
@@ -128,4 +132,13 @@
        cursor: pointer;
        padding: 0.2rem 0.6rem;
    }
+
+    .compulsoryContainer {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 0.5rem;
+        padding: 1.4rem;
+        font-size: 1.3rem;
+        padding-bottom: 0;
+    }
 </style>
--- a/supabase/migrations/20250609142130_add-compulsory-tags.sql
+++ b/supabase/migrations/20250609142130_add-compulsory-tags.sql
@@ -0,0 +1,11 @@
+alter table "public"."study_spaces" add column "power" text;
+alter table "public"."study_spaces" add column "volume" text;
+alter table "public"."study_spaces" add column "wifi" text;
+
+update "public"."study_spaces" set "power" = 'Many' where "power" is null;
+update "public"."study_spaces" set "volume" = 'Quiet' where "volume" is null;
+update "public"."study_spaces" set "wifi" = 'Good' where "wifi" is null;
+
+alter table "public"."study_spaces" alter column "power" set not null;
+alter table "public"."study_spaces" alter column "volume" set not null;
+alter table "public"."study_spaces" alter column "wifi" set not null;
--- a/supabase/schemas/0001_study_spaces.sql
+++ b/supabase/schemas/0001_study_spaces.sql
@@ -13,7 +13,6 @@ CREATE TABLE study_spaces (
    location text,
    building_location text,
    tags text[] NOT NULL DEFAULT array[]::text[],
-    timing text NOT NULL,
    volume text NOT NULL,
    wifi text NOT NULL,
    power text NOT NULL,