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

User home page and styling fixes

Browse Source
This commit is contained in:
Fornax
2022-04-03 22:54:55 +02:00
parent 4d5720cb1e
commit 78cd5b555e
6 changed files with 119 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
res/include/style/layout.css
View File

@@ -221,7 +221,8 @@ section {
} }
.highlight_shaded { .highlight_shaded {
background: var(--shaded_background); background: var(--background_color);
color: var(--background_text_color);
} }
.highlight_green { .highlight_green {

20
svelte/src/admin_panel/Home.svelte
View File

@@ -144,11 +144,11 @@ onMount(() => {
}, },
]; ];
loadGraph(10080, 10, false); loadGraph(43200, 60, true);
getStats("calls") getStats("calls")
statsInterval = setInterval(() => { statsInterval = setInterval(() => {
getStats(lastOrder) getStats(lastOrder)
}, 10000) }, 20000)
}) })
onDestroy(() => { onDestroy(() => {
if (graphTimeout !== null) { if (graphTimeout !== null) {
@@ -164,14 +164,14 @@ onDestroy(() => {
<h3>Bandwidth usage and file views</h3> <h3>Bandwidth usage and file views</h3>
</section> </section>
<div class="highlight_shaded" style="margin-bottom: 6px;"> <div class="highlight_shaded" style="margin-bottom: 6px;">
<button on:click={() => { loadGraph(1440, 1, true) }}>Day</button> <button on:click={() => loadGraph(1440, 1, true)}>Day 1m</button>
<button on:click={() => { loadGraph(10080, 10, false) }}>Week</button> <button on:click={() => loadGraph(10080, 10, true)}>Week 10m</button>
<button on:click={() => { loadGraph(20160, 60, false) }}>Two Weeks</button> <button on:click={() => loadGraph(10080, 60, true)}>Week 1h</button>
<button on:click={() => { loadGraph(43200, 60, false) }}>Month</button> <button on:click={() => loadGraph(43200, 60, true)}>Month 1h</button>
<button on:click={() => { loadGraph(131400, 1440, false) }}>Quarter</button> <button on:click={() => loadGraph(131400, 1440, false)}>Quarter 1d</button>
<button on:click={() => { loadGraph(262800, 1440, false) }}>Half-year</button> <button on:click={() => loadGraph(262800, 1440, false)}>Half-year 1d</button>
<button on:click={() => { loadGraph(525600, 1440, false) }}>Year</button> <button on:click={() => loadGraph(525600, 1440, false)}>Year 1d</button>
<button on:click={() => { loadGraph(1051200, 1440, false) }}>Two Years</button> <button on:click={() => loadGraph(1051200, 1440, false)}>Two Years 1d</button>
</div> </div>
<Chart bind:this={graphBandwidth} data_type="bytes" legend={false} /> <Chart bind:this={graphBandwidth} data_type="bytes" legend={false} />
<Chart bind:this={graphViews} data_type="number" legend={false} /> <Chart bind:this={graphViews} data_type="number" legend={false} />

5
svelte/src/file_viewer/FileViewer.svelte
View File

@@ -609,9 +609,10 @@ const keyboard_event = evt => {
<ReportWindow file={file} list={list}></ReportWindow> <ReportWindow file={file} list={list}></ReportWindow>
</Modal> </Modal>
{#if ads_enabled} <!-- Disabled to reduce clutter while the Ukraine banner is live -->
<!-- {#if ads_enabled}
<IntroPopup target={button_home}></IntroPopup> <IntroPopup target={button_home}></IntroPopup>
{/if} {/if} -->
<Downloader bind:this={downloader} file={file} list={list}></Downloader> <Downloader bind:this={downloader} file={file} list={list}></Downloader>
</div> </div>

66
svelte/src/user_home/ActivityLog.svelte
View File

@@ -85,44 +85,38 @@ onMount(() => {
</button> </button>
</div> </div>
<div class="table_scroll"> <table style="text-align: left;">
<table style="text-align: left;"> <thead>
<thead> <tr>
<td>Time</td>
<td>File name</td>
<td>Event</td>
</tr>
</thead>
<tbody>
{#each data as row}
<tr> <tr>
<td>Time</td> <td>
<td>Event</td> {formatDate(row.time, true, true, false)}
<td>File name</td> </td>
<td>File removal reason</td> <td>
{#if row.event === "file_instance_blocked"}
<a href="/u/{row.file_id}">{row.file_name}</a>
{:else}
{row.file_name}
{/if}
</td>
<td>
{#if row.event === "file_instance_blocked"}
Blocked for abuse
{:else if row.event === "file_instance_expired"}
Expired
{/if}
</td>
</tr> </tr>
</thead> {/each}
<tbody> </tbody>
{#each data as row} </table>
<tr>
<td>
{formatDate(row.time, true, true, false)}
</td>
<td>
{#if row.event === "file_instance_blocked"}
File blocked for abuse
{:else if row.event === "file_instance_expired"}
File expired
{/if}
</td>
<td>
{#if row.event === "file_instance_blocked"}
<a href="/u/{row.file_id}">{row.file_name}</a>
{:else}
{row.file_name}
{/if}
</td>
<td>
{row.file_removal_reason}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{#if data.length > 100} {#if data.length > 100}
<div class="toolbar"> <div class="toolbar">

125
svelte/src/user_home/Home.svelte
View File

@@ -11,10 +11,6 @@ let graph_views_downloads = null
let graph_bandwidth = null let graph_bandwidth = null
let time_start = "" let time_start = ""
let time_end = "" let time_end = ""
let total_views = 0
let total_downloads = 0
let total_bandwidth = 0
let total_transfer_paid = 0
let load_graphs = async (minutes, interval) => { let load_graphs = async (minutes, interval) => {
let end = new Date() let end = new Date()
@@ -52,6 +48,12 @@ let load_graphs = async (minutes, interval) => {
} }
} }
let total_views = 0
let total_downloads = 0
let total_bandwidth = 0
let total_transfer_paid = 0
let total_transfer_kickback = 0
let get_graph_data = async (stat, start, end, interval) => { let get_graph_data = async (stat, start, end, interval) => {
let resp = await fetch( let resp = await fetch(
window.api_endpoint + "/user/time_series/" + stat + window.api_endpoint + "/user/time_series/" + stat +
@@ -64,7 +66,8 @@ let get_graph_data = async (stat, start, end, interval) => {
// Convert the timestamps to a human-friendly format // Convert the timestamps to a human-friendly format
resp.timestamps.forEach((val, idx) => { resp.timestamps.forEach((val, idx) => {
let date = new Date(val); let date = new Date(val);
let str = ("00" + (date.getMonth() + 1)).slice(-2); let str = date.getFullYear();
str += "-" + ("00" + (date.getMonth() + 1)).slice(-2);
str += "-" + ("00" + date.getDate()).slice(-2); str += "-" + ("00" + date.getDate()).slice(-2);
str += " " + ("00" + date.getHours()).slice(-2); str += " " + ("00" + date.getHours()).slice(-2);
str += ":" + ("00" + date.getMinutes()).slice(-2); str += ":" + ("00" + date.getMinutes()).slice(-2);
@@ -83,6 +86,8 @@ let get_graph_data = async (stat, start, end, interval) => {
total_bandwidth = total; total_bandwidth = total;
} else if (stat == "transfer_paid") { } else if (stat == "transfer_paid") {
total_transfer_paid = total; total_transfer_paid = total;
} else if (stat == "transfer_kickback") {
total_transfer_kickback = total;
} }
return resp return resp
@@ -176,7 +181,7 @@ onMount(() => {
}, },
]; ];
update_graphs(1440, 1, true); update_graphs(10080, 60, true);
}) })
onDestroy(() => { onDestroy(() => {
if (graph_timeout !== null) { if (graph_timeout !== null) {
@@ -244,58 +249,49 @@ onDestroy(() => {
<h2>Statistics</h2> <h2>Statistics</h2>
<p> <p>
Here you can see how often your files are viewed, downloaded Here you can see how often your files are viewed, downloaded and how
and how much bandwidth they consume. The buttons at the top much bandwidth they consume. The buttons below can be pressed to adjust
can be pressed to adjust the timeframe. If you choose 'Day' the timeframe.
the statistics will be updated periodically. No need to
refresh the page.
</p> </p>
</section>
<div class="highlight_shaded"> <div class="highlight_shaded">
<button <button
on:click={() => { update_graphs(1440, 1, true) }} on:click={() => update_graphs(1440, 1, true)}
class:button_highlight={graph_timespan == 1440}> class:button_highlight={graph_timespan == 1440}>
Day (1m) Day (1m)
</button> </button>
<button <button
on:click={() => { update_graphs(10080, 10, false) }} on:click={() => update_graphs(10080, 60, true)}
class:button_highlight={graph_timespan == 10080}> class:button_highlight={graph_timespan == 10080}>
Week (10m) Week (1h)
</button> </button>
<button <button
on:click={() => { update_graphs(20160, 60, false) }} on:click={() => update_graphs(20160, 60, true)}
class:button_highlight={graph_timespan == 20160}> class:button_highlight={graph_timespan == 20160}>
Two Weeks (1h) Two Weeks (1h)
</button> </button>
<button <button
on:click={() => { update_graphs(43200, 1440, false) }} on:click={() => update_graphs(43200, 1440, false)}
class:button_highlight={graph_timespan == 43200}> class:button_highlight={graph_timespan == 43200}>
Month (1d) Month (1d)
</button> </button>
<button <button
on:click={() => { update_graphs(131400, 1440, false) }} on:click={() => update_graphs(131400, 1440, false)}
class:button_highlight={graph_timespan == 131400}> class:button_highlight={graph_timespan == 131400}>
Quarter (1d) Quarter (1d)
</button> </button>
<button <button
on:click={() => { update_graphs(525600, 1440, false) }} on:click={() => update_graphs(525600, 1440, false)}
class:button_highlight={graph_timespan == 525600}> class:button_highlight={graph_timespan == 525600}>
Year (1d) Year (1d)
</button> </button>
<button <button
on:click={() => { update_graphs(1051200, 1440, false) }} on:click={() => update_graphs(1051200, 1440, false)}
class:button_highlight={graph_timespan == 1051200}> class:button_highlight={graph_timespan == 1051200}>
Two Years (1d) Two Years (1d)
</button> </button>
<br/> </div>
Total usage from {time_start} to {time_end}<br/>
{formatThousands(total_views)} views,
{formatThousands(total_downloads)} downloads,
{formatDataVolume(total_bandwidth, 3)} bandwidth and
{formatDataVolume(total_transfer_paid, 3)} paid transfers
</div>
<section>
<h3>Premium transfers and total bandwidth usage</h3> <h3>Premium transfers and total bandwidth usage</h3>
<p> <p>
Total bandwidth usage is the combined bandwidth usage of all the files Total bandwidth usage is the combined bandwidth usage of all the files
@@ -316,9 +312,17 @@ onDestroy(() => {
<a href="/user/transactions">transactions page</a>. <a href="/user/transactions">transactions page</a>.
</p> </p>
</section> </section>
<Chart bind:this={graph_bandwidth} data_type="bytes"/> <Chart bind:this={graph_bandwidth} data_type="bytes"/>
<section> <section>
<div class="highlight_shaded">
Total usage from {time_start} to {time_end}<br/>
{formatDataVolume(total_bandwidth, 3)} bandwidth,
{formatDataVolume(total_transfer_paid, 3)} paid transfers
{formatDataVolume(total_transfer_kickback, 3)} kickback transfers
</div>
<h3>Views and downloads</h3> <h3>Views and downloads</h3>
<p> <p>
A view is counted when someone visits the download page of one of A view is counted when someone visits the download page of one of
@@ -330,4 +334,13 @@ onDestroy(() => {
or not, only the start of the download is counted. or not, only the start of the download is counted.
</p> </p>
</section> </section>
<Chart bind:this={graph_views_downloads} data_type="number"/> <Chart bind:this={graph_views_downloads} data_type="number"/>
<section>
<div class="highlight_shaded">
Total usage from {time_start} to {time_end}<br/>
{formatThousands(total_views)} views and
{formatThousands(total_downloads)} downloads
</div>
</section>

10
webcontroller/style.go
View File

@@ -249,7 +249,7 @@ var defaultPixeldrainStyle = styleSheet{
ScrollbarForeground: hsl{266, .85, .40}, ScrollbarForeground: hsl{266, .85, .40},
ScrollbarHover: hsl{266, .85, .50}, ScrollbarHover: hsl{266, .85, .50},
BackgroundColor: hsl{275, .8, .10}, BackgroundColor: hsl{273, .93, .12},
Background: NewGradient(120, hsl{250, .9, .14}, hsl{300, .9, .10}), Background: NewGradient(120, hsl{250, .9, .14}, hsl{300, .9, .10}),
BackgroundPattern: NoColor, BackgroundPattern: NoColor,
ParallaxSlider: hsl{275, .8, .1}, ParallaxSlider: hsl{275, .8, .1},
@@ -383,7 +383,7 @@ var nordLightStyle = styleSheet{
InputText: hsl{222, .16, .28}, // nord1 hsl(222, 16%, 28%) InputText: hsl{222, .16, .28}, // nord1 hsl(222, 16%, 28%)
InputDisabledText: hsl{219, .28, .88}, // nord4 hsl(219, 28%, 88%) InputDisabledText: hsl{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
Highlight: hsl{92, .28, .65}, // nord14 hsl(92, 28%, 65%) Highlight: hsl{92, .28, .65}, // nord14 hsl(92, 28%, 65%)
HighlightText: hsl{220, .16, .22}, // nord0 HighlightText: hsl{222, .16, .28}, // nord3 hsl(220, 16%, 36%)
Danger: hsl{354, .42, .56}, // nord11 hsl(354, 42%, 56%) Danger: hsl{354, .42, .56}, // nord11 hsl(354, 42%, 56%)
ScrollbarForeground: hsl{179, .25, .65}, // nord7 hsl(179, 25%, 65%) ScrollbarForeground: hsl{179, .25, .65}, // nord7 hsl(179, 25%, 65%)
ScrollbarHover: hsl{193, .43, .67}, // nord8 hsl(193, 43%, 67%) ScrollbarHover: hsl{193, .43, .67}, // nord8 hsl(193, 43%, 67%)
@@ -460,7 +460,7 @@ var solarizedDarkStyle = styleSheet{
InputText: hsl{180, .07, .80}, // hsl(44, 87%, 94%) InputText: hsl{180, .07, .80}, // hsl(44, 87%, 94%)
InputDisabledText: hsl{194, .14, .30}, // hsl(194, 14%, 40%) InputDisabledText: hsl{194, .14, .30}, // hsl(194, 14%, 40%)
Highlight: hsl{68, 1, .30}, // hsl(68, 100%, 30%) Highlight: hsl{68, 1, .30}, // hsl(68, 100%, 30%)
HighlightText: hsl{192, 1, .11}, // hsl(192, 100%, 11%) HighlightText: hsl{192, .81, .14}, // hsl(192, 100%, 11%)
Danger: hsl{1, .71, .52}, // hsl(1, 71%, 52%) Danger: hsl{1, .71, .52}, // hsl(1, 71%, 52%)
BackgroundColor: hsl{192, 1, .11}, //hsl(192, 100%, 11%) BackgroundColor: hsl{192, 1, .11}, //hsl(192, 100%, 11%)
@@ -477,8 +477,8 @@ var solarizedLightStyle = styleSheet{
InputHover: hsl{46, .42, .88}, InputHover: hsl{46, .42, .88},
InputText: hsl{194, .14, .20}, // hsl(192, 81%, 14%) InputText: hsl{194, .14, .20}, // hsl(192, 81%, 14%)
InputDisabledText: hsl{194, .14, .80}, InputDisabledText: hsl{194, .14, .80},
Highlight: hsl{68, 1, .30}, // hsl(68, 100%, 30%) Highlight: hsl{68, 1, .30}, // hsl(68, 100%, 30%)
HighlightText: hsl{192, 1, .11}, // hsl(192, 100%, 11%) HighlightText: hsl{44, .87, .94},
Danger: hsl{1, .71, .52}, // hsl(1, 71%, 52%) Danger: hsl{1, .71, .52}, // hsl(1, 71%, 52%)
BackgroundColor: hsl{46, .42, .88}, // hsl(46, 42%, 88%) BackgroundColor: hsl{46, .42, .88}, // hsl(46, 42%, 88%)