Merge branch 'feat/admin-mode' into 'master'

Feat/admin mode

See merge request gk1623/drp-48!12

Co-authored-by: Barf-Vader <47476490+Barf-Vader@users.noreply.github.com>
Co-authored-by: Gleb Koval <gleb@koval.net>

src/lib/index.ts

@@ -22,8 +22,8 @@ export const availableStudySpaceTags = [
     "Cringe"
 ];
 
-export const volumeTags = ["Silent", "Quiet", "Some Noise", "Loud"];
-export const wifiTags = ["Good WiFi", "Moderate WiFi", "Bad WiFi", "No WiFi"];
+export const volumeTags = ["Silent", "Some Noise", "Loud"];
+export const wifiTags = ["Good WiFi", "Moderate WiFi", "Bad/No WiFi"];
 export const powerOutletTags = ["Many Outlets", "Some Outlets", "No Outlets"];
 
 export const allTags = [...availableStudySpaceTags, ...volumeTags, ...wifiTags, ...powerOutletTags];

src/routes/+page.svelte

@@ -57,6 +57,7 @@
 </Navbar>
 
 <main>
+    <a href="/space/reports" class="checkReports">Check Reports</a>
     <div class="tag-filter-container">
         <form>
             <div class="tagDisplay">
@@ -234,6 +235,17 @@
     .avaliableTag:last-child {
         padding-bottom: 0.6rem;
     }
+    .checkReports {
+        grid-column: 1 / -1;
+        display: block;
+        text-align: center;
+        color: #ffeaea;
+        font-size: 1.2rem;
+        text-decoration: none;
+        padding: 0.5rem;
+        background-color: #bd4949;
+        border-radius: 0.5rem;
+    }
 
     @media (max-width: 20rem) {
         main {

src/routes/space/[id]/+page.svelte

@@ -11,6 +11,8 @@
     const { data } = $props();
     const { space, supabase } = $derived(data);
 
+    let adminMode = $state(true);
+
     const place = $derived(space.building_location as google.maps.places.PlaceResult);
     const imgUrls = $derived(
         space.study_space_images.length === 0
@@ -85,14 +87,17 @@
         {/each}
     </p>
     <div class="addrMap" bind:this={mapElem}></div>
-
-    <button
-        type="button"
-        class="reportButton"
-        onclick={() => {
-            isReportVisible = true;
-        }}>Report</button
-    >
+    {#if adminMode}
+        <a href={`/space/${space.id}/edit`} class="editButton">Edit</a>
+    {:else}
+        <button
+            type="button"
+            class="reportButton"
+            onclick={() => {
+                isReportVisible = true;
+            }}>Report</button
+        >
+    {/if}
 </main>
 
 <style>
@@ -201,4 +206,18 @@
         cursor: pointer;
         margin-top: 1rem;
     }
+
+    .editButton {
+        width: 100%;
+        padding: 0.4rem;
+        border-radius: 0.5rem;
+        border: none;
+        background-color: #49bd85;
+        color: #ffffff;
+        font-size: 1rem;
+        cursor: pointer;
+        margin-top: 1rem;
+        text-decoration: none;
+        text-align: center;
+    }
 </style>

src/routes/space/reports/+page.server.ts

@@ -0,0 +1,14 @@
+import { error } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ depends, locals: { supabase } }) => {
+    depends("db:reports");
+    const { data: reports, error: err } = await supabase
+        .from("reports")
+        .select("*, study_spaces(location)");
+    if (err) error(500, "Failed to load reports");
+
+    return {
+        reports
+    };
+};

src/routes/space/reports/+page.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+    import Navbar from "$lib/components/Navbar.svelte";
+    import crossUrl from "$lib/assets/cross.svg";
+    import type { Table } from "$lib";
+    const { data } = $props();
+    const { reports, supabase } = $derived(data);
+    import { invalidate } from "$app/navigation";
+
+    let deleting = $state(false);
+
+    async function deleteReport(report: Table<"reports">) {
+        const { error: reportDeleteError } = await supabase
+            .from("reports")
+            .delete()
+            .eq("id", report.id);
+
+        if (reportDeleteError)
+            return alert(`Error submitting report: ${reportDeleteError.message}`);
+        else alert("Report deleted successfully!");
+    }
+</script>
+
+<Navbar>
+    <a href="/">
+        <img src={crossUrl} alt="close" />
+    </a>
+</Navbar>
+
+<main>
+    {#each reports as report (report.id)}
+        <div class="reportContainer">
+            <button
+                type="button"
+                class="deleteReport"
+                aria-label="delete"
+                disabled={deleting}
+                onclick={async () => {
+                    deleting = true;
+                    await deleteReport(report);
+                    await invalidate("db:reports");
+                    deleting = false;
+                }}><img src={crossUrl} alt="delete" /></button
+            >
+            <h1 class="submitHeader">
+                {report.study_spaces?.location ?? "Study space doesn't exist"}
+            </h1>
+            <span class="tag">
+                {report.type}
+            </span>
+            <p class="content">{report.content}</p>
+
+            <a href="/space/{report.study_space_id}" class="viewPage">View Space</a>
+        </div>
+    {/each}
+</main>
+
+<style>
+    main {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        flex-wrap: wrap;
+        flex-direction: column;
+        padding: 5rem 0 1rem 0;
+        max-width: 100%;
+        margin: 0 auto;
+        height: 200vh;
+    }
+
+    .tag {
+        display: flex;
+        align-items: center;
+        border-radius: 0.25rem;
+        background-color: #2e4653;
+        color: #eaffeb;
+        font-size: 1.1rem;
+        cursor: pointer;
+        padding: 0.2rem 0.6rem;
+        width: fit-content;
+    }
+
+    .reportContainer {
+        display: flex;
+        flex-direction: column;
+        width: 90%;
+        gap: 0.5rem;
+        padding: 1rem;
+        background-color: #182125;
+        border-radius: 0.5rem;
+        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
+        color: #eaffeb;
+        position: relative;
+        translate: 0 -3.5rem;
+        border: 2px solid #eaffeb;
+    }
+
+    .viewPage {
+        width: 100%;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        border: none;
+        background-color: #49bd85;
+        color: #ffffff;
+        font-size: 1rem;
+        cursor: pointer;
+        margin-top: 1rem;
+        text-align: center;
+        text-decoration: none;
+    }
+
+    .deleteReport {
+        position: absolute;
+        top: 0.1rem;
+        right: 0.1rem;
+        background: none;
+        border: none;
+        cursor: pointer;
+    }
+</style>