Add date picker and different report types

res/include/style/layout.css

@@ -502,7 +502,8 @@ textarea,
 input[type="text"],
 input[type="password"],
 input[type="email"],
-input[type="number"]{
+input[type="number"],
+input[type="date"]{
 	display: inline-block;
 	margin: 3px; /* Same as button, to make them align nicely */
 	border: none;
@@ -521,11 +522,13 @@ input[type="text"]:active,
 input[type="password"]:active,
 input[type="email"]:active,
 input[type="number"]:active,
+input[type="date"]:active,
 textarea:focus,
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="email"]:focus,
-input[type="number"]:focus{
+input[type="number"]:focus,
+input[type="date"]:focus{
 	box-shadow: var(--highlight_border), inset 3px 3px 6px -3px var(--shadow_color);
 }
 

res/template/admin.html

@@ -18,7 +18,7 @@
 					Block files
 				</a>
 				<a class="button" href="/admin/abuse_reports">
-					<i class="icon">report</i>
+					<i class="icon">flag</i>
 					User abuse reports
 				</a>
 				<a class="button" href="/admin/abuse_reporters">

svelte/src/admin_abuse_reports/AbuseReport.svelte

@@ -7,17 +7,11 @@ let dispatch = createEventDispatcher()
 export let report
 let expandable
 
-let grant = () => {
-	set_status("grant")
-}
-let reject = () => {
-	set_status("reject")
-}
-let set_status = async (action) => {
+let set_status = async (action, report_type) => {
 	const form = new FormData()
 	form.append("action", action)
 	if (action === "grant") {
-		form.append("type", report.type)
+		form.append("type", report_type)
 	}
 
 	try {
@@ -44,7 +38,9 @@ let set_status = async (action) => {
 		</div>
 
 		<div class="title">{report.file.name}</div>
-		<div class="stats">Type<br/>{report.type}</div>
+		<div class="stats">Type<br/>
+			{report.file.abuse_type === "" ? report.type : report.file.abuse_type}
+		</div>
 		{#if report.status !== "pending"}
 			<div class="stats">Status<br/>{report.status}</div>
 		{/if}
@@ -53,12 +49,24 @@ let set_status = async (action) => {
 		<div class="stats">DL<br/>{Math.round(report.file.bandwidth_used / report.file.size)}</div>
 	</div>
 	<div class="details">
-		<div style="text-align: center;">
-			<a class="button" target="_blank" href={"/u/"+report.file.id}>
-				<i class="icon">open_in_new</i> Open file
-			</a>
-			<button on:click={grant}><i class="icon">done</i> Grant (block file)</button>
-			<button on:click={reject}><i class="icon">delete</i> Ignore reports</button>
+		<div class="toolbar">
+			<div style="flex: 1 1 auto">
+				<a class="button" target="_blank" href={"/u/"+report.file.id}>
+					<i class="icon">open_in_new</i> Open file
+				</a>
+				<button class="button_highlight" on:click={() => {set_status("grant", report.type)}}>
+					<i class="icon">done</i> Block ({report.type})
+				</button>
+				<button class="button_red" on:click={() => {set_status("reject", "")}}>
+					<i class="icon">delete</i> Ignore
+				</button>
+			</div>
+			<div style="flex: 0 1 auto">
+				<button on:click={() => {set_status("grant", "terrorism")}}>terrorism</button>
+				<button on:click={() => {set_status("grant", "gore")}}>gore</button>
+				<button on:click={() => {set_status("grant", "child_abuse")}}>child_abuse</button>
+				<button on:click={() => {set_status("grant", "malware")}}>malware</button>
+			</div>
 		</div>
 		<table>
 			<tr>
@@ -83,6 +91,7 @@ let set_status = async (action) => {
 .header {
 	display: flex;
 	flex-direction: row;
+	line-height: 1.2em;
 }
 .icon_cell {
 	flex: 0 0 auto;
@@ -96,13 +105,16 @@ let set_status = async (action) => {
 .stats {
 	flex: 0 0 auto;
 	padding: 3px 4px;
-	line-height: 1.2em;
 	border-left: 1px solid var(--layer_3_color_border);
 	text-align: center;
 }
 .details {
 	flex: 1 1 auto;
 }
+.toolbar {
+	display: flex;
+	flex-direction: row;
+}
 .file_icon {
 	width:48px;
 	height:48px;

svelte/src/admin_abuse_reports/AbuseReports.svelte

@@ -6,25 +6,26 @@ import AbuseReport from "./AbuseReport.svelte";
 let loading = true
 let reports = []
 
+let startPicker
+let endPicker
+
+
 const get_reports = async () => {
 	loading = true;
 
-	let today = new Date()
-	let start = new Date()
-	start.setMonth(start.getMonth() - 1)
-
 	try {
 		const resp = await fetch(
 			window.api_endpoint+
-				"/admin/abuse_report?start="+
-				start.toISOString()+
-				"&end="+today.toISOString()
+				"/admin/abuse_report"+
+				"?start="+(new Date(startPicker.value)).toISOString()+
+				"&end="+(new Date(endPicker.value)).toISOString()
 		);
 		if(resp.status >= 400) {
 			throw new Error(resp.text());
 		}
 		reports = await resp.json();
 
+		// Sort files from new to old
 		reports.sort((a, b) => {
 			if (a.first_report_time > b.first_report_time) {
 				return -1
@@ -34,6 +35,8 @@ const get_reports = async () => {
 				return 0
 			}
 		})
+
+		// Sort individual reports from old to new
 		reports.forEach(v => {
 			v.reports.sort((a, b) => {
 				if (a.time > b.time) {
@@ -52,7 +55,16 @@ const get_reports = async () => {
 	}
 };
 
-onMount(get_reports);
+onMount(() => {
+	let start = new Date()
+	start.setMonth(start.getMonth() - 1)
+	let end = new Date()
+
+	startPicker.valueAsNumber = start.getTime()
+	endPicker.valueAsNumber = end.getTime()
+
+	get_reports()
+});
 </script>
 
 <div>
@@ -68,11 +80,13 @@ onMount(get_reports);
 				<i class="icon">arrow_back</i> Return to admin panel
 			</a>
 			<div class="toolbar_spacer"></div>
+			<div>
+				Start: <input type="date" bind:this={startPicker}/>
+				End: <input type="date" bind:this={endPicker}/>
+			</div>
 			<button on:click={get_reports}><i class="icon">refresh</i></button>
 		</div>
 
-		<br/>
-
 		<h2>Pending</h2>
 		{#each reports as report}
 			{#if report.status === "pending"}