Merge branch 'compulsory-tags' into 'master'

Compulsory tags

See merge request gk1623/drp-48!7

Co-authored-by: Barf-Vader <47476490+Barf-Vader@users.noreply.github.com>

README.md

@@ -35,7 +35,7 @@
 - `npx supabase stop` will stop the local dev database (data is persisted unless you do a reset).
 - `npx supabase db push --local` will apply migrations to your local dev database. Useful if someone else has made new SQL migrations.
 - `npx supabase db reset` will completely reset the local dev database.
-- `npx supabase diff db -f <migration-name>` will generate a new migration file based on the current state of the database. This isn't 100% foolproof, so don't use it blindly.
+- `npx supabase db diff -f <migration-name>` will generate a new migration file based on the current state of the database. This isn't 100% foolproof, so don't use it blindly.
 
 ### What's where?
 

src/lib/components/CompulsoryTags.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    import type { Table } from "$lib";
+
+    interface Props {
+        space: Table<"study_spaces">;
+    }
+
+    const { space }: Props = $props();
+
+    const tagToColor: Record<string, string> = {
+        "Many Outlets": "compulsoryTagGreen",
+        "No Outlets": "compulsoryTagRed",
+        "Some Outlets": "compulsoryTagYellow",
+        "Good WiFi": "compulsoryTagGreen",
+        "Bad WiFi": "compulsoryTagRed",
+        "Moderate WiFi": "compulsoryTagYellow",
+        "No WiFi": "compulsoryTagRed"
+    };
+</script>
+
+<span class="compulsoryTagGreen">{space.volume}</span>
+<span class={tagToColor[space.power]}>{space.power}</span>
+<span class={tagToColor[space.wifi]}>{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>

src/lib/components/SpaceCard.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import CompulsoryTags from "./CompulsoryTags.svelte";
     import type { Table } from "$lib";
 
     interface Props {
@@ -15,11 +16,14 @@
     <img src={imgSrc} {alt} />
     <div class="description">
         <h1>{space.location}</h1>
-        <div class="tagContainer">
+        <div class="compulsoryContainer"><CompulsoryTags {space} /></div>
-            {#each space.tags as tag (tag)}
+        {#if space.tags.length > 0}
-                <span class="tag">{tag}</span>
+            <div class="tagContainer">
-            {/each}
+                {#each space.tags as tag (tag)}
-        </div>
+                    <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>

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: []
       }

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"];

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>

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,13 +36,16 @@
         </p>
         <hr />
     {/if}
-    <div class="tagContainer">
+    <div class="compulsoryContainer"><CompulsoryTags {space} /></div>
-        {#each space.tags as tag (tag)}
+    {#if space.tags.length > 0}
-            <span class="tag">
+        <div class="tagContainer">
-                {tag}
+            {#each space.tags as tag (tag)}
-            </span>
+                <span class="tag">
-        {/each}
+                    {tag}
-    </div>
+                </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>

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;

supabase/schemas/0001_study_spaces.sql

@@ -13,6 +13,9 @@ CREATE TABLE study_spaces (
     location text,
     building_location text,
     tags text[] NOT NULL DEFAULT array[]::text[],
+    volume text NOT NULL,
+    wifi text NOT NULL,
+    power text NOT NULL,
     created_at timestamp with time zone DEFAULT now(),
     updated_at timestamp with time zone DEFAULT now()
 );