Convert admin panel to svelte

svelte/src/admin_panel/AbuseReports.svelte

@@ -0,0 +1,145 @@
+<script>
+import { onMount } from "svelte";
+import Spinner from "../util/Spinner.svelte";
+import AbuseReport from "./AbuseReport.svelte";
+
+let loading = true
+let reports_pending = []
+let reports_processed = []
+
+let startPicker
+let endPicker
+
+const get_reports = async () => {
+	loading = true;
+
+	try {
+		const resp = await fetch(
+			window.api_endpoint+
+				"/admin/abuse_report"+
+				"?start="+(new Date(startPicker.value)).toISOString()+
+				"&end="+(new Date(endPicker.value)).toISOString()
+		);
+		if(resp.status >= 400) {
+			throw new Error(resp.text());
+		}
+		let reports = await resp.json();
+
+		// Sort files by number of reports. If the number of reports is equal we
+		// sort by number of views. If the number of views is equal we sort by
+		// date of the first report received
+		reports.sort((a, b) => {
+			if (a.reports.length > b.reports.length) {
+				return -1
+			} else if (a.reports.length < b.reports.length) {
+				return 1
+			} else if (a.file.views > b.file.views) {
+				return -1
+			} else if (a.file.views < b.file.views) {
+				return 1
+			} else if (a.first_report_time > b.first_report_time) {
+				return -1
+			} else if (a.first_report_time < b.first_report_time) {
+				return 1
+			} else {
+				return 0
+			}
+		})
+
+		reports_pending = []
+		reports_processed = []
+
+		// Sort individual reports of each file from old to new, then separate
+		// pending reports and processed reports
+		reports.forEach(v => {
+			v.reports.sort((a, b) => {
+				if (a.time > b.time) {
+					return 1
+				} else if (a.time < b.time) {
+					return -1
+				} else {
+					return 0
+				}
+			})
+
+			if (v.status === "pending") {
+				reports_pending.push(v)
+			} else {
+				reports_processed.push(v)
+			}
+		})
+
+		// Update svelte views
+		reports_processed = reports_processed
+		reports_pending = reports_pending
+	} catch (err) {
+		alert(err);
+	} finally {
+		loading = false;
+	}
+};
+
+onMount(() => {
+	let start = new Date()
+	start.setDate(start.getDate() - 14)
+	let end = new Date()
+
+	startPicker.valueAsNumber = start.getTime()
+	endPicker.valueAsNumber = end.getTime()
+
+	get_reports()
+});
+</script>
+
+<div>
+	{#if loading}
+		<div class="spinner_container">
+			<Spinner />
+		</div>
+	{/if}
+
+	<div class="limit_width">
+		<div class="toolbar" style="text-align: left;">
+			<div class="toolbar_spacer"></div>
+			<div>Start:</div>
+			<input type="date" bind:this={startPicker}/>
+			<div>End:</div>
+			<input type="date" bind:this={endPicker}/>
+			<button on:click={get_reports}>Go</button>
+		</div>
+
+		<h2>Pending</h2>
+		{#each reports_pending as report}
+			{#if report.status === "pending"}
+			<AbuseReport report={report} on:refresh={get_reports}/>
+			{/if}
+		{/each}
+
+		<h2>Resolved</h2>
+		{#each reports_processed as report}
+			{#if report.status !== "pending"}
+			<AbuseReport report={report} on:refresh={get_reports}/>
+			{/if}
+		{/each}
+	</div>
+</div>
+
+<style>
+.spinner_container {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	height: 100px;
+	width: 100px;
+	z-index: 1000;
+}
+.toolbar {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	align-items: center;
+}
+.toolbar > * { flex: 0 0 auto; }
+.toolbar_spacer { flex: 1 1 auto; }
+
+</style>