feat: reports

src/lib/components/Report.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+    import { reportTypes } from "$lib";
+    import crossUrl from "$lib/assets/cross.svg";
+    import Textarea from "./inputs/Textarea.svelte";
+    import type { Table } from "$lib";
+
+    const { data, studySpaceId, hideFunc } = $props();
+    const { supabase } = $derived(data);
+
+    let uploading = $state(false);
+    let reportData = $state<Omit<Table<"reports">, "id" | "created_at" | "updated_at">>({
+        study_space_id: studySpaceId,
+        type: "",
+        content: ""
+    });
+
+    async function uploadReport() {
+        const { data: studySpaceInsert, error: reportUploadError } = await supabase
+            .from("reports")
+            .insert(reportData)
+            .select()
+            .single();
+
+        if (reportUploadError)
+            return alert(`Error submitting report: ${reportUploadError.message}`);
+        else alert("Report submitted successfully!");
+    }
+</script>
+
+<div class="overlay">
+    <form
+        onsubmit={async (event) => {
+            event.preventDefault();
+            uploading = true;
+            await uploadReport();
+            uploading = false;
+            hideFunc();
+        }}
+        class="reportContainer"
+    >
+        <h1>Submit a Report</h1>
+        <p>What's the reason?</p>
+        <select name="reportType" class="reportType" required bind:value={reportData.type}>
+            <option value="" disabled selected>Report type</option>
+            {#each reportTypes as reportType (reportType)}
+                <option value={reportType}>{reportType}</option>
+            {/each}
+        </select>
+        <label for="description">Briefly describe the problem:</label>
+        <Textarea
+            name="description"
+            placeholder="Image is inappropriate..."
+            rows={2}
+            bind:value={reportData.content}
+        />
+        <button disabled={!reportData.type || reportData.content?.length === 0} class="submit"
+            >Submit</button
+        >
+        <button type="button" class="exit" aria-label="exit" onclick={hideFunc}
+            ><img src={crossUrl} alt="exit" /></button
+        >
+    </form>
+</div>
+
+<style>
+    .overlay {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        justify-content: center;
+        align-items: center;
+        background-color: rgba(8, 15, 18, 0.9);
+        z-index: 100;
+    }
+
+    .reportContainer {
+        display: flex;
+        flex-direction: column;
+        width: 80%;
+        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: absolute;
+        translate: 0 -3.5rem;
+        border: 2px solid #eaffeb;
+    }
+
+    .reportType {
+        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;
+    }
+
+    .reportType option {
+        background-color: #2e4653;
+        color: #eaffeb;
+    }
+
+    .submit {
+        width: 100%;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        border: none;
+        background-color: #49bd85;
+        color: #ffffff;
+        font-size: 1rem;
+        cursor: pointer;
+    }
+
+    .exit {
+        position: absolute;
+        top: 0.1rem;
+        right: 0.1rem;
+        background: none;
+        border: none;
+        cursor: pointer;
+    }
+</style>

src/lib/database.d.ts

@@ -34,6 +34,41 @@ export type Database = {
   }
   public: {
     Tables: {
+      reports: {
+        Row: {
+          content: string | null
+          created_at: string | null
+          id: string
+          study_space_id: string | null
+          type: string
+          updated_at: string | null
+        }
+        Insert: {
+          content?: string | null
+          created_at?: string | null
+          id?: string
+          study_space_id?: string | null
+          type: string
+          updated_at?: string | null
+        }
+        Update: {
+          content?: string | null
+          created_at?: string | null
+          id?: string
+          study_space_id?: string | null
+          type?: string
+          updated_at?: string | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "reports_study_space_id_fkey"
+            columns: ["study_space_id"]
+            isOneToOne: false
+            referencedRelation: "study_spaces"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       study_space_images: {
         Row: {
           created_at: string | null

src/lib/index.ts

@@ -24,3 +24,9 @@ export const availableStudySpaceTags = [
 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"];
+export const reportTypes = [
+    "Inappropriate content",
+    "Duplicate content",
+    "Incorrect content",
+    "Other"
+];