141 lines
3.8 KiB
Svelte
141 lines
3.8 KiB
Svelte
<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";
|
|
import type { SupabaseClient } from "@supabase/supabase-js";
|
|
import type { Database } from "$lib/database.d.ts";
|
|
|
|
interface Props {
|
|
data: { supabase: SupabaseClient<Database> };
|
|
studySpaceId: string;
|
|
hideFunc: () => void;
|
|
}
|
|
|
|
const { data, studySpaceId, hideFunc }: Props = $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 { 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 class="submitHeader">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 || uploading}
|
|
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;
|
|
}
|
|
|
|
.submitHeader {
|
|
width: 80%;
|
|
}
|
|
.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>
|