132 lines
3.9 KiB
Svelte
132 lines
3.9 KiB
Svelte
<script lang="ts">
|
|
import { run, preventDefault } from 'svelte/legacy';
|
|
import { createEventDispatcher } from "svelte";
|
|
import { formatDate } from "util/Formatting";
|
|
import Modal from "util/Modal.svelte"
|
|
import SortButton from "layout/SortButton.svelte";
|
|
import { flip } from "svelte/animate";
|
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
let { reporters = $bindable([]) } = $props();
|
|
|
|
const update_table = (reporters) => sort("")
|
|
|
|
let sort_field = $state("last_used")
|
|
let asc = $state(false)
|
|
const sort = (field) => {
|
|
if (field !== "" && field === sort_field) asc = !asc
|
|
if (field === "") field = sort_field
|
|
sort_field = field
|
|
|
|
console.log("sorting by", field, "asc", asc)
|
|
reporters.sort((a, b) => {
|
|
if (typeof (a[field]) === "number") {
|
|
// Sort ints from high to low
|
|
if (asc) {
|
|
return a[field] - b[field]
|
|
} else {
|
|
return b[field] - a[field]
|
|
}
|
|
} else {
|
|
// Sort strings alphabetically
|
|
if (asc) {
|
|
return a[field].localeCompare(b[field])
|
|
} else {
|
|
return b[field].localeCompare(a[field])
|
|
}
|
|
}
|
|
})
|
|
reporters = reporters
|
|
}
|
|
|
|
let modal: Modal = $state()
|
|
let preview_subject = $state("")
|
|
let preview_html = $state("")
|
|
let preview_text = $state("")
|
|
const toggle_preview = (rep) => {
|
|
preview_subject = rep.last_message_subject
|
|
preview_text = rep.last_message_text
|
|
preview_html = rep.last_message_html
|
|
modal.show()
|
|
}
|
|
run(() => {
|
|
update_table(reporters)
|
|
});
|
|
</script>
|
|
|
|
<div class="table_scroll">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<td><SortButton field="from_address" active_field={sort_field} asc={asc} sort_func={sort}>Address</SortButton></td>
|
|
<td><SortButton field="name" active_field={sort_field} asc={asc} sort_func={sort}>Name</SortButton></td>
|
|
<td><SortButton field="reports_sent" active_field={sort_field} asc={asc} sort_func={sort}>Reports</SortButton></td>
|
|
<td><SortButton field="files_blocked" active_field={sort_field} asc={asc} sort_func={sort}>Blocked</SortButton></td>
|
|
<td><SortButton field="last_used" active_field={sort_field} asc={asc} sort_func={sort}>Last used</SortButton></td>
|
|
<td><SortButton field="created" active_field={sort_field} asc={asc} sort_func={sort}>Created</SortButton></td>
|
|
<td></td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each reporters as rep (rep.from_address)}
|
|
<tr animate:flip={{duration: 500}}>
|
|
<td>{rep.from_address}</td>
|
|
<td>{rep.name}</td>
|
|
<td>{rep.reports_sent}</td>
|
|
<td>{rep.files_blocked}</td>
|
|
<td>{formatDate(rep.last_used, true, true, false)}</td>
|
|
<td>{formatDate(rep.created, false, false, false)}</td>
|
|
<td>
|
|
<button onclick={preventDefault(() => toggle_preview(rep))} class="button round">
|
|
<i class="icon">email</i>
|
|
</button>
|
|
<button onclick={preventDefault(() => {dispatch("edit", rep)})} class="button round">
|
|
<i class="icon">edit</i>
|
|
</button>
|
|
{#if rep.status !== "trusted"}
|
|
<button onclick={preventDefault(() => {dispatch("approve", rep)})} class="button button_highlight round">
|
|
<i class="icon">check</i>
|
|
</button>
|
|
{/if}
|
|
{#if rep.status !== "rejected"}
|
|
<button onclick={preventDefault(() => {dispatch("spam", rep)})} class="button button_red round">
|
|
<i class="icon">block</i>
|
|
</button>
|
|
{/if}
|
|
<button onclick={preventDefault(() => {dispatch("delete", rep)})} class="button button_red round">
|
|
<i class="icon">delete</i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<Modal bind:this={modal} title={preview_subject} width="1000px">
|
|
{#if preview_html !== ""}
|
|
<div class="message_html">{@html preview_html}</div>
|
|
{:else if preview_text !== ""}
|
|
<div class="message_pre">{preview_text}</div>
|
|
{/if}
|
|
</Modal>
|
|
|
|
<style>
|
|
.table_scroll {
|
|
text-align: initial;
|
|
}
|
|
.message_html {
|
|
padding: 8px;
|
|
text-align: initial;
|
|
white-space: normal;
|
|
overflow: hidden;
|
|
}
|
|
.message_pre {
|
|
padding: 8px;
|
|
text-align: initial;
|
|
white-space: pre-wrap;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|