Replace CSS classes with semantic HTML
This commit is contained in:
@@ -82,85 +82,83 @@ const delete_reporter = async (email) => {
|
||||
onMount(get_reporters);
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if loading}
|
||||
<div class="spinner_container">
|
||||
<Spinner />
|
||||
{#if loading}
|
||||
<div class="spinner_container">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<section>
|
||||
<div class="toolbar" style="text-align: left;">
|
||||
<div class="toolbar_spacer"></div>
|
||||
<button class:button_highlight={creating} on:click={() => {creating = !creating}}>
|
||||
<i class="icon">create</i> Add abuse reporter
|
||||
</button>
|
||||
</div>
|
||||
{#if creating}
|
||||
<div class="highlight_light">
|
||||
<form on:submit|preventDefault={create_reporter}>
|
||||
<table class="form">
|
||||
<tr>
|
||||
<td>E-mail address</td>
|
||||
<td><input type="text" bind:this={new_reporter_email}/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td><input type="text" bind:this={new_reporter_name} value="Anonymous tip"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Type</td>
|
||||
<td>
|
||||
<input id="reporter_type_individual" name="reporter_type" type="radio" bind:group={new_reporter_type} value="individual" />
|
||||
<label for="reporter_type_individual">Individual</label>
|
||||
<br/>
|
||||
<input id="reporter_type_org" name="reporter_type" type="radio" bind:group={new_reporter_type} value="org" />
|
||||
<label for="reporter_type_org">Organisation</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<button class="button_highlight" type="submit" style="float: right;">
|
||||
<i class="icon">save</i> Save
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<div class="limit_width">
|
||||
<div class="toolbar" style="text-align: left;">
|
||||
<div class="toolbar_spacer"></div>
|
||||
<button class:button_highlight={creating} on:click={() => {creating = !creating}}>
|
||||
<i class="icon">create</i> Add abuse reporter
|
||||
</button>
|
||||
</div>
|
||||
{#if creating}
|
||||
<div class="highlight_light">
|
||||
<form on:submit|preventDefault={create_reporter}>
|
||||
<table class="form">
|
||||
<tr>
|
||||
<td>E-mail address</td>
|
||||
<td><input type="text" bind:this={new_reporter_email}/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td><input type="text" bind:this={new_reporter_name} value="Anonymous tip"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Type</td>
|
||||
<td>
|
||||
<input id="reporter_type_individual" name="reporter_type" type="radio" bind:group={new_reporter_type} value="individual" />
|
||||
<label for="reporter_type_individual">Individual</label>
|
||||
<br/>
|
||||
<input id="reporter_type_org" name="reporter_type" type="radio" bind:group={new_reporter_type} value="org" />
|
||||
<label for="reporter_type_org">Organisation</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<button class="button_highlight" type="submit" style="float: right;">
|
||||
<i class="icon">save</i> Save
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="table_scroll">
|
||||
<table style="text-align: left;">
|
||||
<div class="table_scroll">
|
||||
<table style="text-align: left;">
|
||||
<tr>
|
||||
<td>E-mail</td>
|
||||
<td>Name</td>
|
||||
<td>Blocked</td>
|
||||
<td>Type</td>
|
||||
<td>Last used</td>
|
||||
<td>Created</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
{#each reporters as reporter (reporter.email)}
|
||||
<tr>
|
||||
<td>E-mail</td>
|
||||
<td>Name</td>
|
||||
<td>Blocked</td>
|
||||
<td>Type</td>
|
||||
<td>Last used</td>
|
||||
<td>Created</td>
|
||||
<td></td>
|
||||
<td>{reporter.email}</td>
|
||||
<td>{reporter.name}</td>
|
||||
<td>{reporter.files_blocked}</td>
|
||||
<td>{reporter.type}</td>
|
||||
<td>{formatDate(reporter.last_used, true, true, false)}</td>
|
||||
<td>{formatDate(reporter.created, false, false, false)}</td>
|
||||
<td>
|
||||
<button on:click|preventDefault={() => {delete_reporter(reporter.email)}} class="button button_red round">
|
||||
<i class="icon">delete</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{#each reporters as reporter (reporter.email)}
|
||||
<tr>
|
||||
<td>{reporter.email}</td>
|
||||
<td>{reporter.name}</td>
|
||||
<td>{reporter.files_blocked}</td>
|
||||
<td>{reporter.type}</td>
|
||||
<td>{formatDate(reporter.last_used, true, true, false)}</td>
|
||||
<td>{formatDate(reporter.created, false, false, false)}</td>
|
||||
<td>
|
||||
<button on:click|preventDefault={() => {delete_reporter(reporter.email)}} class="button button_red round">
|
||||
<i class="icon">delete</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
</div>
|
||||
{/each}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -91,38 +91,36 @@ onMount(() => {
|
||||
});
|
||||
</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 (report.id)}
|
||||
{#if report.status === "pending"}
|
||||
<AbuseReport report={report} on:refresh={get_reports}/>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<h2>Resolved</h2>
|
||||
{#each reports_processed as report (report.id)}
|
||||
{#if report.status !== "pending"}
|
||||
<AbuseReport report={report} on:refresh={get_reports}/>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if loading}
|
||||
<div class="spinner_container">
|
||||
<Spinner />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<section>
|
||||
<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 (report.id)}
|
||||
{#if report.status === "pending"}
|
||||
<AbuseReport report={report} on:refresh={get_reports}/>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<h2>Resolved</h2>
|
||||
{#each reports_processed as report (report.id)}
|
||||
{#if report.status !== "pending"}
|
||||
<AbuseReport report={report} on:refresh={get_reports}/>
|
||||
{/if}
|
||||
{/each}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.spinner_container {
|
||||
|
||||
@@ -65,17 +65,12 @@ onMount(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="limit_width">
|
||||
<h2>File removal</h2>
|
||||
<p>
|
||||
Paste any pixeldrain file links in here to remove them
|
||||
</p>
|
||||
<div class="highlight_dark">
|
||||
<Form config={block_form}></Form>
|
||||
</div>
|
||||
<section>
|
||||
<h2>File removal</h2>
|
||||
<p>
|
||||
Paste any pixeldrain file links in here to remove them
|
||||
</p>
|
||||
<div class="highlight_dark">
|
||||
<Form config={block_form}></Form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
</section>
|
||||
|
||||
@@ -159,168 +159,160 @@ onDestroy(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="limit_width">
|
||||
<h3>Bandwidth usage and file views</h3>
|
||||
</div>
|
||||
<div class="highlight_dark" style="margin-bottom: 6px;">
|
||||
<button on:click={() => { loadGraph(1440, 1, true) }}>Day</button>
|
||||
<button on:click={() => { loadGraph(10080, 10, false) }}>Week</button>
|
||||
<button on:click={() => { loadGraph(20160, 60, false) }}>Two Weeks</button>
|
||||
<button on:click={() => { loadGraph(43200, 60, false) }}>Month</button>
|
||||
<button on:click={() => { loadGraph(131400, 1440, false) }}>Quarter</button>
|
||||
<button on:click={() => { loadGraph(262800, 1440, false) }}>Half-year</button>
|
||||
<button on:click={() => { loadGraph(525600, 1440, false) }}>Year</button>
|
||||
<button on:click={() => { loadGraph(1051200, 1440, false) }}>Two Years</button>
|
||||
</div>
|
||||
<Chart bind:this={graphBandwidth} data_type="bytes" legend={false} />
|
||||
<Chart bind:this={graphViews} data_type="number" legend={false} />
|
||||
<div class="highlight_dark">
|
||||
Total usage from {start_time} to {end_time}<br/>
|
||||
{formatDataVolume(total_bandwidth, 3)} bandwidth,
|
||||
{formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth,
|
||||
{formatThousands(total_views, 3)} views and
|
||||
{formatThousands(total_downloads, 3)} downloads
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<a class="button" href="/api/admin/call_stack">Call stack</a>
|
||||
<a class="button" href="/api/admin/heap_profile">Heap profile</a>
|
||||
<a class="button" href="/api/admin/cpu_profile">CPU profile (wait 1 min)</a>
|
||||
<br/>
|
||||
|
||||
<div class="limit_width">
|
||||
<table>
|
||||
<tr>
|
||||
<td>DB Time</td>
|
||||
<td>{formatDate(new Date(status.db_time), true, true, true)}</td>
|
||||
<td>DB Latency</td>
|
||||
<td>{formatNumber(status.db_latency / 1000, 3)} ms</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h3>Pixelstore peers</h3>
|
||||
<div class="table_scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Address</td>
|
||||
<td>Pos</td>
|
||||
<td>Alive</td>
|
||||
<td>Err</td>
|
||||
<td>1m</td>
|
||||
<td>5m</td>
|
||||
<td>15m</td>
|
||||
<td>Ping</td>
|
||||
<td>Free</td>
|
||||
<td>Min free</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each status.peers as peer}
|
||||
<tr class="peer_row"
|
||||
class:highlight_red={peer.free_space < peer.min_free_space / 2 || !peer.reachable}
|
||||
class:highlight_yellow={peer.free_space < peer.min_free_space}
|
||||
class:highlight_green={peer.reachable}
|
||||
>
|
||||
<td>{peer.address}</td>
|
||||
<td>{peer.position}</td>
|
||||
<td>{peer.reachable}</td>
|
||||
<td>{peer.unreachable_count}</td>
|
||||
<td>{peer.load_1_min.toFixed(1)}</td>
|
||||
<td>{peer.load_5_min.toFixed(1)}</td>
|
||||
<td>{peer.load_15_min.toFixed(1)}</td>
|
||||
<td>{formatDuration(peer.latency, 3)}</td>
|
||||
<td>{formatDataVolume(peer.free_space, 4)}</td>
|
||||
<td>{formatDataVolume(peer.min_free_space, 3)}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h3>Pixelstore stats</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Local reads</td>
|
||||
<td>Local read size</td>
|
||||
<td>Remote reads</td>
|
||||
<td>Remote read size</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{status.local_reads}</td>
|
||||
<td>{formatDataVolume(status.local_read_size, 4)}</td>
|
||||
<td>{status.remote_reads}</td>
|
||||
<td>{formatDataVolume(status.remote_read_size, 4)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{status.local_reads_per_sec.toPrecision(4)} / s</td>
|
||||
<td>{formatDataVolume(status.local_read_size_per_sec, 4)} / s</td>
|
||||
<td>{status.remote_reads_per_sec.toPrecision(4)} / s</td>
|
||||
<td>{formatDataVolume(status.remote_read_size_per_sec, 4)} /s</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Socket statistics</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Watcher</td>
|
||||
<td>Threads</td>
|
||||
<td>Listeners</td>
|
||||
<td>Avg</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>File statistics</td>
|
||||
<td>{status.stats_watcher_threads}</td>
|
||||
<td>{status.stats_watcher_listeners}</td>
|
||||
<td>{(status.stats_watcher_listeners / status.stats_watcher_threads).toPrecision(3)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Downloads</td>
|
||||
<td>{status.download_clients}</td>
|
||||
<td>{status.download_connections}</td>
|
||||
<td>{(status.download_connections / status.download_clients).toPrecision(3)}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Query statistics</h3>
|
||||
<div class="table_scroll" style="text-align: left;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td style="cursor: pointer;" on:click={() => { getStats('query_name') }}>Query</td>
|
||||
<td style="cursor: pointer;" on:click={() => { getStats('calls') }}>Calls</td>
|
||||
<td style="cursor: pointer;" on:click={() => { getStats('average_duration') }}>Avg dur</td>
|
||||
<td style="cursor: pointer;" on:click={() => { getStats('total_duration') }}>Total dur</td>
|
||||
<td>Callers</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tstat_body">
|
||||
{#each status.query_statistics as q}
|
||||
<tr>
|
||||
<td>{q.query_name}</td>
|
||||
<td>{q.calls}</td>
|
||||
<td>{q.average_duration}ms</td>
|
||||
<td>{formatDuration(q.total_duration, 0)}</td>
|
||||
<td>
|
||||
{#each q.callers as caller}
|
||||
{caller.count}x {caller.name}<br/>
|
||||
{/each}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<h3>Bandwidth usage and file views</h3>
|
||||
</section>
|
||||
<div class="highlight_dark" style="margin-bottom: 6px;">
|
||||
<button on:click={() => { loadGraph(1440, 1, true) }}>Day</button>
|
||||
<button on:click={() => { loadGraph(10080, 10, false) }}>Week</button>
|
||||
<button on:click={() => { loadGraph(20160, 60, false) }}>Two Weeks</button>
|
||||
<button on:click={() => { loadGraph(43200, 60, false) }}>Month</button>
|
||||
<button on:click={() => { loadGraph(131400, 1440, false) }}>Quarter</button>
|
||||
<button on:click={() => { loadGraph(262800, 1440, false) }}>Half-year</button>
|
||||
<button on:click={() => { loadGraph(525600, 1440, false) }}>Year</button>
|
||||
<button on:click={() => { loadGraph(1051200, 1440, false) }}>Two Years</button>
|
||||
</div>
|
||||
<Chart bind:this={graphBandwidth} data_type="bytes" legend={false} />
|
||||
<Chart bind:this={graphViews} data_type="number" legend={false} />
|
||||
<div class="highlight_dark">
|
||||
Total usage from {start_time} to {end_time}<br/>
|
||||
{formatDataVolume(total_bandwidth, 3)} bandwidth,
|
||||
{formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth,
|
||||
{formatThousands(total_views, 3)} views and
|
||||
{formatThousands(total_downloads, 3)} downloads
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.peer_row {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
<br/>
|
||||
<a class="button" href="/api/admin/call_stack">Call stack</a>
|
||||
<a class="button" href="/api/admin/heap_profile">Heap profile</a>
|
||||
<a class="button" href="/api/admin/cpu_profile">CPU profile (wait 1 min)</a>
|
||||
<br/>
|
||||
|
||||
<section>
|
||||
<table>
|
||||
<tr>
|
||||
<td>DB Time</td>
|
||||
<td>{formatDate(new Date(status.db_time), true, true, true)}</td>
|
||||
<td>DB Latency</td>
|
||||
<td>{formatNumber(status.db_latency / 1000, 3)} ms</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h3>Pixelstore peers</h3>
|
||||
<div class="table_scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Address</td>
|
||||
<td>Pos</td>
|
||||
<td>Alive</td>
|
||||
<td>Err</td>
|
||||
<td>1m</td>
|
||||
<td>5m</td>
|
||||
<td>15m</td>
|
||||
<td>Ping</td>
|
||||
<td>Free</td>
|
||||
<td>Min free</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each status.peers as peer}
|
||||
<tr style="text-align: left"
|
||||
class:highlight_red={peer.free_space < peer.min_free_space / 2 || !peer.reachable}
|
||||
class:highlight_yellow={peer.free_space < peer.min_free_space}
|
||||
class:highlight_green={peer.reachable}
|
||||
>
|
||||
<td>{peer.address}</td>
|
||||
<td>{peer.position}</td>
|
||||
<td>{peer.reachable}</td>
|
||||
<td>{peer.unreachable_count}</td>
|
||||
<td>{peer.load_1_min.toFixed(1)}</td>
|
||||
<td>{peer.load_5_min.toFixed(1)}</td>
|
||||
<td>{peer.load_15_min.toFixed(1)}</td>
|
||||
<td>{formatDuration(peer.latency, 3)}</td>
|
||||
<td>{formatDataVolume(peer.free_space, 4)}</td>
|
||||
<td>{formatDataVolume(peer.min_free_space, 3)}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h3>Pixelstore stats</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Local reads</td>
|
||||
<td>Local read size</td>
|
||||
<td>Remote reads</td>
|
||||
<td>Remote read size</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{status.local_reads}</td>
|
||||
<td>{formatDataVolume(status.local_read_size, 4)}</td>
|
||||
<td>{status.remote_reads}</td>
|
||||
<td>{formatDataVolume(status.remote_read_size, 4)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{status.local_reads_per_sec.toPrecision(4)} / s</td>
|
||||
<td>{formatDataVolume(status.local_read_size_per_sec, 4)} / s</td>
|
||||
<td>{status.remote_reads_per_sec.toPrecision(4)} / s</td>
|
||||
<td>{formatDataVolume(status.remote_read_size_per_sec, 4)} /s</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Socket statistics</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Watcher</td>
|
||||
<td>Threads</td>
|
||||
<td>Listeners</td>
|
||||
<td>Avg</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>File statistics</td>
|
||||
<td>{status.stats_watcher_threads}</td>
|
||||
<td>{status.stats_watcher_listeners}</td>
|
||||
<td>{(status.stats_watcher_listeners / status.stats_watcher_threads).toPrecision(3)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Downloads</td>
|
||||
<td>{status.download_clients}</td>
|
||||
<td>{status.download_connections}</td>
|
||||
<td>{(status.download_connections / status.download_clients).toPrecision(3)}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Query statistics</h3>
|
||||
<div class="table_scroll" style="text-align: left;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td style="cursor: pointer;" on:click={() => { getStats('query_name') }}>Query</td>
|
||||
<td style="cursor: pointer;" on:click={() => { getStats('calls') }}>Calls</td>
|
||||
<td style="cursor: pointer;" on:click={() => { getStats('average_duration') }}>Avg dur</td>
|
||||
<td style="cursor: pointer;" on:click={() => { getStats('total_duration') }}>Total dur</td>
|
||||
<td>Callers</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tstat_body">
|
||||
{#each status.query_statistics as q}
|
||||
<tr>
|
||||
<td>{q.query_name}</td>
|
||||
<td>{q.calls}</td>
|
||||
<td>{q.average_duration}ms</td>
|
||||
<td>{formatDuration(q.total_duration, 0)}</td>
|
||||
<td>
|
||||
{#each q.callers as caller}
|
||||
{caller.count}x {caller.name}<br/>
|
||||
{/each}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -80,91 +80,89 @@ const delete_ban = async (addr) => {
|
||||
onMount(get_bans);
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if loading}
|
||||
<div class="spinner_container">
|
||||
<Spinner />
|
||||
{#if loading}
|
||||
<div class="spinner_container">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<section>
|
||||
<div class="toolbar" style="text-align: left;">
|
||||
<div class="toolbar_spacer"></div>
|
||||
<button class:button_highlight={creating} on:click={() => {creating = !creating}}>
|
||||
<i class="icon">create</i> Add IP ban
|
||||
</button>
|
||||
</div>
|
||||
{#if creating}
|
||||
<div class="highlight_light">
|
||||
<form on:submit|preventDefault={create_ban}>
|
||||
<table class="form">
|
||||
<tr>
|
||||
<td>IP address</td>
|
||||
<td><input type="text" bind:this={new_ban_address}/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Reason</td>
|
||||
<td>
|
||||
<input id="reason_unknown" name="reporter_type" type="radio" bind:group={new_ban_reason} value="unknown" />
|
||||
<label for="reason_unknown">unknown</label>
|
||||
<br/>
|
||||
<input id="reason_copyright" name="reporter_type" type="radio" bind:group={new_ban_reason} value="copyright" />
|
||||
<label for="reason_copyright">copyright</label>
|
||||
<br/>
|
||||
<input id="reason_child_abuse" name="reporter_type" type="radio" bind:group={new_ban_reason} value="child_abuse" />
|
||||
<label for="reason_child_abuse">child_abuse</label>
|
||||
<br/>
|
||||
<input id="reason_terrorism" name="reporter_type" type="radio" bind:group={new_ban_reason} value="terorrism" />
|
||||
<label for="reason_terrorism">terrorism</label>
|
||||
<br/>
|
||||
<input id="reason_gore" name="reporter_type" type="radio" bind:group={new_ban_reason} value="gore" />
|
||||
<label for="reason_gore">gore</label>
|
||||
<br/>
|
||||
<input id="reason_malware" name="reporter_type" type="radio" bind:group={new_ban_reason} value="malware" />
|
||||
<label for="reason_malware">malware</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<button class="button_highlight" type="submit" style="float: right;">
|
||||
<i class="icon">save</i> Save
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<div class="limit_width">
|
||||
<div class="toolbar" style="text-align: left;">
|
||||
<div class="toolbar_spacer"></div>
|
||||
<button class:button_highlight={creating} on:click={() => {creating = !creating}}>
|
||||
<i class="icon">create</i> Add IP ban
|
||||
</button>
|
||||
</div>
|
||||
{#if creating}
|
||||
<div class="highlight_light">
|
||||
<form on:submit|preventDefault={create_ban}>
|
||||
<table class="form">
|
||||
<tr>
|
||||
<td>IP address</td>
|
||||
<td><input type="text" bind:this={new_ban_address}/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Reason</td>
|
||||
<td>
|
||||
<input id="reason_unknown" name="reporter_type" type="radio" bind:group={new_ban_reason} value="unknown" />
|
||||
<label for="reason_unknown">unknown</label>
|
||||
<br/>
|
||||
<input id="reason_copyright" name="reporter_type" type="radio" bind:group={new_ban_reason} value="copyright" />
|
||||
<label for="reason_copyright">copyright</label>
|
||||
<br/>
|
||||
<input id="reason_child_abuse" name="reporter_type" type="radio" bind:group={new_ban_reason} value="child_abuse" />
|
||||
<label for="reason_child_abuse">child_abuse</label>
|
||||
<br/>
|
||||
<input id="reason_terrorism" name="reporter_type" type="radio" bind:group={new_ban_reason} value="terorrism" />
|
||||
<label for="reason_terrorism">terrorism</label>
|
||||
<br/>
|
||||
<input id="reason_gore" name="reporter_type" type="radio" bind:group={new_ban_reason} value="gore" />
|
||||
<label for="reason_gore">gore</label>
|
||||
<br/>
|
||||
<input id="reason_malware" name="reporter_type" type="radio" bind:group={new_ban_reason} value="malware" />
|
||||
<label for="reason_malware">malware</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<button class="button_highlight" type="submit" style="float: right;">
|
||||
<i class="icon">save</i> Save
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="table_scroll">
|
||||
<table style="text-align: left;">
|
||||
<div class="table_scroll">
|
||||
<table style="text-align: left;">
|
||||
<tr>
|
||||
<td>Address</td>
|
||||
<td>Reason</td>
|
||||
<td>Ban time</td>
|
||||
<td>Expire time</td>
|
||||
<td>Offences</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
{#each rows as row (row.address)}
|
||||
<tr>
|
||||
<td>Address</td>
|
||||
<td>Reason</td>
|
||||
<td>Ban time</td>
|
||||
<td>Expire time</td>
|
||||
<td>Offences</td>
|
||||
<td></td>
|
||||
<td>{row.address}</td>
|
||||
<td>{row.reason}</td>
|
||||
<td>{formatDate(row.ban_time, true, true, false)}</td>
|
||||
<td>{formatDate(row.expire_time, true, true, false)}</td>
|
||||
<td>{row.offences}</td>
|
||||
<td>
|
||||
<button on:click|preventDefault={() => {delete_ban(row.address)}} class="button button_red round">
|
||||
<i class="icon">delete</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{#each rows as row (row.address)}
|
||||
<tr>
|
||||
<td>{row.address}</td>
|
||||
<td>{row.reason}</td>
|
||||
<td>{formatDate(row.ban_time, true, true, false)}</td>
|
||||
<td>{formatDate(row.expire_time, true, true, false)}</td>
|
||||
<td>{row.offences}</td>
|
||||
<td>
|
||||
<button on:click|preventDefault={() => {delete_ban(row.address)}} class="button button_red round">
|
||||
<i class="icon">delete</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
</div>
|
||||
{/each}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -26,7 +26,7 @@ onMount(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="checkers inset">
|
||||
<header>
|
||||
<h1>Admin Panel</h1>
|
||||
|
||||
<div class="tab_bar">
|
||||
@@ -77,7 +77,7 @@ onMount(() => {
|
||||
Update global settings
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if page === "status"}
|
||||
<Home></Home>
|
||||
|
||||
@@ -173,7 +173,7 @@ onMount(get_coupons)
|
||||
|
||||
</script>
|
||||
|
||||
<div class="limit_width">
|
||||
<section>
|
||||
{#if loading}
|
||||
<div class="spinner_container">
|
||||
<Spinner />
|
||||
@@ -221,7 +221,7 @@ onMount(get_coupons)
|
||||
{/each}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.spinner_container {
|
||||
|
||||
Reference in New Issue
Block a user