Abuse report management UI
This commit is contained in:
@@ -33,6 +33,7 @@ export default [
|
||||
"modal",
|
||||
"user_buckets",
|
||||
"admin_abuse_reporters",
|
||||
"admin_abuse_reports",
|
||||
].map((name, index) => ({
|
||||
input: `src/${name}.js`,
|
||||
output: {
|
||||
|
||||
8
svelte/src/admin_abuse_reports.js
Normal file
8
svelte/src/admin_abuse_reports.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import App from './admin_abuse_reports/AbuseReports.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById("page_content"),
|
||||
props: {}
|
||||
});
|
||||
|
||||
export default app;
|
||||
110
svelte/src/admin_abuse_reports/AbuseReport.svelte
Normal file
110
svelte/src/admin_abuse_reports/AbuseReport.svelte
Normal file
@@ -0,0 +1,110 @@
|
||||
<script>
|
||||
import { formatDate } from "../util/Formatting.svelte";
|
||||
import Expandable from "../util/Expandable.svelte";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
let dispatch = createEventDispatcher()
|
||||
|
||||
export let report
|
||||
let expandable
|
||||
|
||||
let grant = () => {
|
||||
set_status("grant")
|
||||
}
|
||||
let reject = () => {
|
||||
set_status("reject")
|
||||
}
|
||||
let set_status = async (action) => {
|
||||
const form = new FormData()
|
||||
form.append("action", action)
|
||||
if (action === "grant") {
|
||||
form.append("type", report.type)
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await fetch(
|
||||
window.api_endpoint+"/admin/abuse_report/"+report.id,
|
||||
{ method: "POST", body: form }
|
||||
);
|
||||
if(resp.status >= 400) {
|
||||
throw new Error(resp.text())
|
||||
}
|
||||
|
||||
dispatch("refresh");
|
||||
} catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<Expandable bind:this={expandable} expanded={report.status === "pending"}>
|
||||
<div slot="header" class="header" on:click={expandable.toggle}>
|
||||
<div class="icon_cell">
|
||||
<img class="file_icon" src={"/api/file/"+report.file.id+"/thumbnail"} alt="File thumbnail"/>
|
||||
</div>
|
||||
|
||||
<div class="title">{report.file.name}</div>
|
||||
<div class="stats">Type<br/>{report.type}</div>
|
||||
{#if report.status !== "pending"}
|
||||
<div class="stats">Status<br/>{report.status}</div>
|
||||
{/if}
|
||||
<div class="stats">R<br/>{report.reports.length}</div>
|
||||
<div class="stats">V<br/>{report.file.views}</div>
|
||||
<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>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Time</td>
|
||||
<td>IP</td>
|
||||
<td>Type</td>
|
||||
<td>Status</td>
|
||||
</tr>
|
||||
{#each report.reports as user_report}
|
||||
<tr>
|
||||
<td>{formatDate(user_report.time, true, true, true, true)}</td>
|
||||
<td>{user_report.ip_address}</td>
|
||||
<td>{user_report.type}</td>
|
||||
<td>{user_report.status}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
</div>
|
||||
</Expandable>
|
||||
|
||||
<style>
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.icon_cell {
|
||||
flex: 0 0 auto;
|
||||
line-height: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.title {
|
||||
flex: 1 1 auto;
|
||||
align-self: center;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.file_icon {
|
||||
width:48px;
|
||||
height:48px;
|
||||
}
|
||||
</style>
|
||||
108
svelte/src/admin_abuse_reports/AbuseReports.svelte
Normal file
108
svelte/src/admin_abuse_reports/AbuseReports.svelte
Normal file
@@ -0,0 +1,108 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import Spinner from "../util/Spinner.svelte";
|
||||
import AbuseReport from "./AbuseReport.svelte";
|
||||
|
||||
let loading = true
|
||||
let reports = []
|
||||
|
||||
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()
|
||||
);
|
||||
if(resp.status >= 400) {
|
||||
throw new Error(resp.text());
|
||||
}
|
||||
reports = await resp.json();
|
||||
|
||||
reports.sort((a, b) => {
|
||||
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.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
|
||||
}
|
||||
})
|
||||
})
|
||||
} catch (err) {
|
||||
alert(err);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMount(get_reports);
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if loading}
|
||||
<div class="spinner_container">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="limit_width">
|
||||
<div class="toolbar" style="text-align: left;">
|
||||
<a class="button" href="/admin">
|
||||
<i class="icon">arrow_back</i> Return to admin panel
|
||||
</a>
|
||||
<div class="toolbar_spacer"></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"}
|
||||
<AbuseReport report={report} on:refresh={get_reports}/>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<h2>Resolved</h2>
|
||||
{#each reports 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;
|
||||
}
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
.toolbar > * { flex: 0 0 auto; }
|
||||
.toolbar_spacer { flex: 1 1 auto; }
|
||||
|
||||
</style>
|
||||
63
svelte/src/util/Expandable.svelte
Normal file
63
svelte/src/util/Expandable.svelte
Normal file
@@ -0,0 +1,63 @@
|
||||
<script>
|
||||
export let expanded = false
|
||||
export const toggle = () => {
|
||||
expanded = !expanded
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="expandable">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
|
||||
<button class="bucket_expand" on:click={toggle}>
|
||||
{#if expanded}
|
||||
<i class="icon">expand_less</i>
|
||||
{:else}
|
||||
<i class="icon">expand_more</i>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
<div class="body" class:hidden={!expanded}>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.expandable {
|
||||
text-decoration: none;
|
||||
background-color: var(--layer_3_color);
|
||||
transition: box-shadow 0.5s;
|
||||
box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);
|
||||
margin: 1em 0;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: var(--text_color);
|
||||
}
|
||||
.header:hover {
|
||||
background-color: var(--input_color_dark)
|
||||
}
|
||||
.title {
|
||||
flex: 1 1 auto;
|
||||
text-align: left;
|
||||
}
|
||||
.bucket_expand {
|
||||
flex: 0 0 auto;
|
||||
align-self: center;
|
||||
height: auto;
|
||||
}
|
||||
.body {
|
||||
display: flex;
|
||||
padding: 0.4em;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
border-top: 1px solid var(--layer_3_color_border);
|
||||
color: var(--text_color);
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user