fnx_web/svelte/src/admin_panel/AbuseReports.svelte

<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() - 28)
	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>