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 {
background: var(--shaded_background);
background: var(--background_color);
color: var(--background_text_color);
}
.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")
statsInterval = setInterval(() => {
getStats(lastOrder)
}, 10000)
}, 20000)
})
onDestroy(() => {
if (graphTimeout !== null) {
@@ -164,14 +164,14 @@ onDestroy(() => {
<h3>Bandwidth usage and file views</h3>
</section>
<div class="highlight_shaded" 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>
<button on:click={() => loadGraph(1440, 1, true)}>Day 1m</button>
<button on:click={() => loadGraph(10080, 10, true)}>Week 10m</button>
<button on:click={() => loadGraph(10080, 60, true)}>Week 1h</button>
<button on:click={() => loadGraph(43200, 60, true)}>Month 1h</button>
<button on:click={() => loadGraph(131400, 1440, false)}>Quarter 1d</button>
<button on:click={() => loadGraph(262800, 1440, false)}>Half-year 1d</button>
<button on:click={() => loadGraph(525600, 1440, false)}>Year 1d</button>
<button on:click={() => loadGraph(1051200, 1440, false)}>Two Years 1d</button>
</div>
<Chart bind:this={graphBandwidth} data_type="bytes" 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>
</Modal>
{#if ads_enabled}
<!-- Disabled to reduce clutter while the Ukraine banner is live -->
<!-- {#if ads_enabled}
<IntroPopup target={button_home}></IntroPopup>
{/if}
{/if} -->
<Downloader bind:this={downloader} file={file} list={list}></Downloader>
</div>

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

@@ -85,14 +85,12 @@ onMount(() => {
</button>
</div>
<div class="table_scroll">
<table style="text-align: left;">
<thead>
<tr>
<td>Time</td>
<td>Event</td>
<td>File name</td>
<td>File removal reason</td>
<td>Event</td>
</tr>
</thead>
<tbody>
@@ -101,13 +99,6 @@ onMount(() => {
<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>
@@ -116,13 +107,16 @@ onMount(() => {
{/if}
</td>
<td>
{row.file_removal_reason}
{#if row.event === "file_instance_blocked"}
Blocked for abuse
{:else if row.event === "file_instance_expired"}
Expired
{/if}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{#if data.length > 100}
<div class="toolbar">

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

@@ -11,10 +11,6 @@ let graph_views_downloads = null
let graph_bandwidth = null
let time_start = ""
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 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 resp = await fetch(
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
resp.timestamps.forEach((val, idx) => {
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.getHours()).slice(-2);
str += ":" + ("00" + date.getMinutes()).slice(-2);
@@ -83,6 +86,8 @@ let get_graph_data = async (stat, start, end, interval) => {
total_bandwidth = total;
} else if (stat == "transfer_paid") {
total_transfer_paid = total;
} else if (stat == "transfer_kickback") {
total_transfer_kickback = total;
}
return resp
@@ -176,7 +181,7 @@ onMount(() => {
},
];
update_graphs(1440, 1, true);
update_graphs(10080, 60, true);
})
onDestroy(() => {
if (graph_timeout !== null) {
@@ -244,58 +249,49 @@ onDestroy(() => {
<h2>Statistics</h2>
<p>
Here you can see how often your files are viewed, downloaded
and how much bandwidth they consume. The buttons at the top
can be pressed to adjust the timeframe. If you choose 'Day'
the statistics will be updated periodically. No need to
refresh the page.
Here you can see how often your files are viewed, downloaded and how
much bandwidth they consume. The buttons below can be pressed to adjust
the timeframe.
</p>
</section>
<div class="highlight_shaded">
<button
on:click={() => { update_graphs(1440, 1, true) }}
on:click={() => update_graphs(1440, 1, true)}
class:button_highlight={graph_timespan == 1440}>
Day (1m)
</button>
<button
on:click={() => { update_graphs(10080, 10, false) }}
on:click={() => update_graphs(10080, 60, true)}
class:button_highlight={graph_timespan == 10080}>
Week (10m)
Week (1h)
</button>
<button
on:click={() => { update_graphs(20160, 60, false) }}
on:click={() => update_graphs(20160, 60, true)}
class:button_highlight={graph_timespan == 20160}>
Two Weeks (1h)
</button>
<button
on:click={() => { update_graphs(43200, 1440, false) }}
on:click={() => update_graphs(43200, 1440, false)}
class:button_highlight={graph_timespan == 43200}>
Month (1d)
</button>
<button
on:click={() => { update_graphs(131400, 1440, false) }}
on:click={() => update_graphs(131400, 1440, false)}
class:button_highlight={graph_timespan == 131400}>
Quarter (1d)
</button>
<button
on:click={() => { update_graphs(525600, 1440, false) }}
on:click={() => update_graphs(525600, 1440, false)}
class:button_highlight={graph_timespan == 525600}>
Year (1d)
</button>
<button
on:click={() => { update_graphs(1051200, 1440, false) }}
on:click={() => update_graphs(1051200, 1440, false)}
class:button_highlight={graph_timespan == 1051200}>
Two Years (1d)
</button>
<br/>
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>
<p>
Total bandwidth usage is the combined bandwidth usage of all the files
@@ -316,9 +312,17 @@ onDestroy(() => {
<a href="/user/transactions">transactions page</a>.
</p>
</section>
<Chart bind:this={graph_bandwidth} data_type="bytes"/>
<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>
<p>
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.
</p>
</section>
<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>

8
webcontroller/style.go
View File

@@ -249,7 +249,7 @@ var defaultPixeldrainStyle = styleSheet{
ScrollbarForeground: hsl{266, .85, .40},
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}),
BackgroundPattern: NoColor,
ParallaxSlider: hsl{275, .8, .1},
@@ -383,7 +383,7 @@ var nordLightStyle = styleSheet{
InputText: hsl{222, .16, .28}, // nord1 hsl(222, 16%, 28%)
InputDisabledText: hsl{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
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%)
ScrollbarForeground: hsl{179, .25, .65}, // nord7 hsl(179, 25%, 65%)
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%)
InputDisabledText: hsl{194, .14, .30}, // hsl(194, 14%, 40%)
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%)
BackgroundColor: hsl{192, 1, .11}, //hsl(192, 100%, 11%)
@@ -478,7 +478,7 @@ var solarizedLightStyle = styleSheet{
InputText: hsl{194, .14, .20}, // hsl(192, 81%, 14%)
InputDisabledText: hsl{194, .14, .80},
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%)
BackgroundColor: hsl{46, .42, .88}, // hsl(46, 42%, 88%)