feat: added compulsory tags

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>