pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make abuse report window more user friendly

Browse Source
This commit is contained in:
Wim Brand
2021-05-17 11:16:20 +02:00
parent 5be98caadc
commit 5875d187b6
8 changed files with 92 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
svelte/src/admin_abuse_reports/AbuseReport.svelte
View File

@@ -28,19 +28,18 @@ let set_status = async (action, report_type) => {
alert(err);
}
}
</script>
<Expandable bind:this={expandable} expanded={report.status === "pending"}>
<Expandable bind:this={expandable} expanded={report.status === "pending" && report.reports.length > 2}>
<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.file.abuse_type === "" ? report.type : report.file.abuse_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}
@@ -77,7 +76,7 @@ let set_status = async (action, report_type) => {
</tr>
{#each report.reports as user_report}
<tr>
<td>{formatDate(user_report.time, true, true, true, true)}</td>
<td>{formatDate(user_report.time, true, true, false)}</td>
<td>{user_report.ip_address}</td>
<td>{user_report.type}</td>
<td>{user_report.status}</td>

45
svelte/src/admin_abuse_reports/AbuseReports.svelte
View File

@@ -4,12 +4,12 @@ import Spinner from "../util/Spinner.svelte";
import AbuseReport from "./AbuseReport.svelte";
let loading = true
let reports = []
let reports_pending = []
let reports_processed = []
let startPicker
let endPicker
const get_reports = async () => {
loading = true;
@@ -23,11 +23,21 @@ const get_reports = async () => {
if(resp.status >= 400) {
throw new Error(resp.text());
}
reports = await resp.json();
let reports = await resp.json();
// Sort files from new to old
// 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.first_report_time > b.first_report_time) {
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
@@ -36,7 +46,11 @@ const get_reports = async () => {
}
})
// Sort individual reports from old to new
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) {
@@ -47,7 +61,17 @@ const get_reports = async () => {
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 {
@@ -57,7 +81,7 @@ const get_reports = async () => {
onMount(() => {
let start = new Date()
start.setMonth(start.getMonth() - 1)
start.setDate(start.getDate() - 14)
let end = new Date()
startPicker.valueAsNumber = start.getTime()
@@ -88,14 +112,14 @@ onMount(() => {
</div>
<h2>Pending</h2>
{#each reports as report}
{#each reports_pending as report}
{#if report.status === "pending"}
<AbuseReport report={report} on:refresh={get_reports}/>
{/if}
{/each}
<h2>Resolved</h2>
{#each reports as report}
{#each reports_processed as report}
{#if report.status !== "pending"}
<AbuseReport report={report} on:refresh={get_reports}/>
{/if}
@@ -107,9 +131,10 @@ onMount(() => {
.spinner_container {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
height: 100px;
width: 100px;
z-index: 1000;
}
.toolbar {
display: flex;