120 lines
3.1 KiB
Svelte
120 lines
3.1 KiB
Svelte
<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: #189f5e;
|
|
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>
|