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

Styling fixes and progressbar class

Browse Source
This commit is contained in:
Fornax
2021-11-23 14:22:42 +01:00
parent 0c4aeef80b
commit 3a77f8c13a
7 changed files with 145 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
res/template/home.html
View File

@@ -197,16 +197,16 @@
</div>
<div>
<div class="feat_label">
Hotlinking
Transfer limit
</div>
<div class="feat_normal">
Rate limiting mode will be enabled when a file has 3
times more downloads than views
</div>
<div class="feat_pro">
<span class="text_highlight">1 terabyte</span> of
direct downloads per 30 days. Never have to enter a
CAPTCHA while logged in
Transfer limit of <span class="text_highlight">1
terabyte</span>. If the transfer limit is exceeded files
will show ads again and rate limiting is enabled
<br/>
<button class="round" onclick="return explainDirectLinking()">
<i class="icon">info</i>
@@ -297,7 +297,7 @@
<div class="feat_pro features_cell round_tr">
<div><span class="text_highlight">20 GB</span> max file size (18.63 GiB)<br/></div>
<div><span class="text_highlight">120 days</span> file expiry</div>
<div><span class="text_highlight">2 TB</span> hotlink bandwidth<br/></div>
<div><span class="text_highlight">2 TB</span> transfer limit<br/></div>
<div><span class="text_highlight">2 TB</span> storage space<br/></div>
</div>
</div>
@@ -314,7 +314,7 @@
<div class="feat_pro features_cell">
<div><span class="text_highlight">20 GB</span> max file size<br/></div>
<div><span class="text_highlight">240 days</span> file expiry</div>
<div><span class="text_highlight">4 TB</span> hotlink bandwidth<br/></div>
<div><span class="text_highlight">4 TB</span> transfer limit<br/></div>
<div><span class="text_highlight">4 TB</span> storage space<br/></div>
</div>
</div>
@@ -331,7 +331,7 @@
<div class="feat_pro features_cell">
<div><span class="text_highlight">20 GB</span> max file size<br/></div>
<div><span class="text_highlight">480 days</span> file expiry</div>
<div><span class="text_highlight">8 TB</span> hotlink bandwidth<br/></div>
<div><span class="text_highlight">8 TB</span> transfer limit<br/></div>
<div><span class="text_highlight">8 TB</span> storage space<br/></div>
</div>
</div>
@@ -348,7 +348,7 @@
<div class="feat_pro features_cell">
<div><span class="text_highlight">20 GB</span> max file size<br/></div>
<div><span class="text_highlight">Files never expire</span></div>
<div><span class="text_highlight">16 TB</span> hotlink bandwidth<br/></div>
<div><span class="text_highlight">16 TB</span> transfer limit<br/></div>
<div><span class="text_highlight">16 TB</span> storage space<br/></div>
</div>
</div>
@@ -365,7 +365,7 @@
<div class="feat_pro features_cell">
<div><span class="text_highlight">20 GB</span> max file size<br/></div>
<div><span class="text_highlight">Files never expire</span></div>
<div><span class="text_highlight">32 TB</span> hotlink bandwidth<br/></div>
<div><span class="text_highlight">32 TB</span> transfer limit<br/></div>
<div><span class="text_highlight">32 TB</span> storage space<br/></div>
</div>
</div>
@@ -384,7 +384,7 @@
<div class="feat_pro features_cell">
<div><span class="text_highlight">20 GB</span> max file size<br/></div>
<div><span class="text_highlight">Files never expire</span></div>
<div><span class="text_highlight">48 TB</span> hotlink bandwidth<br/></div>
<div><span class="text_highlight">48 TB</span> transfer limit<br/></div>
<div><span class="text_highlight">48 TB</span> storage space<br/></div>
</div>
</div>
@@ -403,7 +403,7 @@
<div class="feat_pro features_cell">
<div><span class="text_highlight">20 GB</span> max file size<br/></div>
<div><span class="text_highlight">Files never expire</span></div>
<div><span class="text_highlight">64 TB</span> hotlink bandwidth<br/></div>
<div><span class="text_highlight">64 TB</span> transfer limit<br/></div>
<div><span class="text_highlight">64 TB</span> storage space<br/></div>
</div>
</div>
@@ -422,7 +422,7 @@
<div class="feat_pro features_cell">
<div><span class="text_highlight">20 GB</span> max file size<br/></div>
<div><span class="text_highlight">Files never expire</span></div>
<div><span class="text_highlight">96 TB</span> hotlink bandwidth<br/></div>
<div><span class="text_highlight">96 TB</span> transfer limit<br/></div>
<div><span class="text_highlight">96 TB</span> storage space<br/></div>
</div>
</div>
@@ -441,7 +441,7 @@
<div class="feat_pro features_cell round_br">
<div><span class="text_highlight">20 GB</span> max file size<br/></div>
<div><span class="text_highlight">Files never expire</span></div>
<div><span class="text_highlight">128 TB</span> hotlink bandwidth<br/></div>
<div><span class="text_highlight">128 TB</span> transfer limit<br/></div>
<div><span class="text_highlight">128 TB</span> storage space<br/></div>
</div>
</div>

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

@@ -127,7 +127,7 @@ onDestroy(() => {
<div>
<div class="limit_width">
<h3>Bandwidth, hotlinking and views</h3>
<h3>Bandwidth, paid transfers and views</h3>
</div>
<div class="highlight_dark" style="margin-bottom: 6px;">
<button on:click={() => { loadGraph(1440, 1, true) }}>Day</button>

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

@@ -105,10 +105,10 @@ let load_direct_bw = () => {
}
onMount(() => {
if (window.user.subscription.monthly_transfer_cap > 0) {
transfer_cap = window.user.subscription.monthly_transfer_cap
} else if (window.user.monthly_transfer_cap > 0) {
if (window.user.monthly_transfer_cap > 0) {
transfer_cap = window.user.monthly_transfer_cap
} else if (window.user.subscription.monthly_transfer_cap > 0) {
transfer_cap = window.user.subscription.monthly_transfer_cap
} else {
transfer_cap = -1
}
@@ -151,17 +151,24 @@ onDestroy(() => {
{/if}
</ul>
{#if window.user.subscription.storage_space === -1}
Storage space used: {formatDataVolume(storage_space_used, 3)}<br/>
{:else}
<StorageProgressBar used={storage_space_used} total={window.user.subscription.storage_space}></StorageProgressBar>
{/if}
<div class="indent">
{#if window.user.subscription.storage_space === -1}
Storage space used: {formatDataVolume(storage_space_used, 3)}<br/>
{:else}
<StorageProgressBar used={storage_space_used} total={window.user.subscription.storage_space}></StorageProgressBar>
{/if}
{#if transfer_cap === -1}
Paid transfers in the last 30 days: {formatDataVolume(transfer_used, 3)}<br/>
{:else}
<HotlinkProgressBar used={transfer_used} total={transfer_cap}></HotlinkProgressBar>
{/if}
{#if transfer_cap === -1}
Paid transfers in the last 30 days: {formatDataVolume(transfer_used, 3)}<br/>
{:else}
Paid transfers:
{formatDataVolume(transfer_used, 3)}
out of
{formatDataVolume(transfer_cap, 3)}
(<a href="/user/subscription">Set your transfer limit on the subscription page</a>)
<HotlinkProgressBar used={transfer_used} total={transfer_cap}></HotlinkProgressBar>
{/if}
</div>
<h3>Exports</h3>
<div style="text-align: center;">
@@ -233,7 +240,8 @@ onDestroy(() => {
A paid transfer is when a file is downloaded using the data cap on
your subscription plan. These can be files you downloaded from other
people, or other people downloading your files if you have bandwidth
sharing enabled.
sharing enabled. Bandwidth sharing can be changed on
<a href="/user/subscription">the subscription page</a>.
</p>
</div>
<Chart bind:this={graph_transfer_paid} dataType="bytes" label="Paid transfers" />

11
svelte/src/user_home/HotlinkProgressBar.svelte
View File

@@ -1,5 +1,6 @@
<script>
import { formatDataVolume } from "../util/Formatting.svelte"
import ProgressBar from "../util/ProgressBar.svelte";
export let total = 0
export let used = 0
@@ -8,15 +9,7 @@ $: frac = used / total
</script>
<div>
Paid transfers:
{formatDataVolume(used, 3)}
out of
{formatDataVolume(total, 3)}
(<a href="/#hotlinking">More information about hotlinking</a>)
<br/>
<div class="progress_bar_outer">
<div class="progress_bar_inner" style="width: {frac*100}%;"></div>
</div>
<ProgressBar total={total} used={used}></ProgressBar>
{#if frac > 0.99}
<div class="highlight_red">

19
svelte/src/user_home/StorageProgressBar.svelte
View File

@@ -1,9 +1,9 @@
<script>
import { formatDataVolume } from "../util/Formatting.svelte"
import ProgressBar from "../util/ProgressBar.svelte";
export let total = 0
export let used = 0
$: frac = used / total
</script>
@@ -13,9 +13,7 @@ $: frac = used / total
out of
{formatDataVolume(total, 3)}
<br/>
<div class="progress_bar_outer">
<div class="progress_bar_inner" style="width: {frac*100}%;"></div>
</div>
<ProgressBar total={total} used={used}></ProgressBar>
{#if frac > 2.0}
<div class="highlight_red">
@@ -65,17 +63,4 @@ $: frac = used / total
font-weight: bold;
font-size: 1.5em;
}
.progress_bar_outer {
display: block;
background-color: var(--layer_1_color);
width: 100%;
height: 3px;
margin: 6px 0 12px 0;
}
.progress_bar_inner {
background-color: var(--highlight_color);
height: 100%;
width: 0;
transition: width 1s;
}
</style>

84
svelte/src/user_home/Subscription.svelte
View File

@@ -1,22 +1,34 @@
<script>
import Spinner from "../util/Spinner.svelte";
import Euro from "../util/Euro.svelte"
import ProgressBar from "../util/ProgressBar.svelte";
import { onMount } from "svelte";
import { formatDataVolume } from "../util/Formatting.svelte";
let loading = false
let subscription = window.user.subscription.id
let hotlinking = window.user.hotlinking_enabled
let transfer_cap = window.user.monthly_transfer_cap / 1e12
let transfer_cap = window.user.monthly_transfer_cap / 1e9
let result = ""
let result_success = false
const update_subscription = async () => {
const update = async (update_field) => {
loading = true
const form = new FormData()
form.append("subscription", subscription)
form.append("hotlinking_enabled", hotlinking)
form.append("transfer_cap", transfer_cap*1e12)
if (update_field === "subscription") {
form.append("update", "subscription")
form.append("subscription", subscription)
} else if (update_field === "limits") {
form.append("update", "limits")
form.append("hotlinking_enabled", hotlinking)
form.append("transfer_cap", transfer_cap*1e9)
} else {
console.error("Invalid update type", update_field)
return
}
try {
const resp = await fetch(
window.api_endpoint+"/user/subscription",
@@ -38,6 +50,28 @@ const update_subscription = async () => {
}
}
let transfer_used = 0
let load_tranfer_used = () => {
let today = new Date()
let start = new Date()
start.setDate(start.getDate() - 30)
fetch(
window.api_endpoint + "/user/time_series/transfer_paid" +
"?start=" + start.toISOString() +
"&end=" + today.toISOString() +
"&interval=60"
).then(resp => {
if (!resp.ok) { return Promise.reject("Error: " + resp.status); }
return resp.json();
}).then(resp => {
transfer_used = resp.amounts.reduce((acc, cur) => { return acc + cur }, 0)
}).catch(e => {
console.error("Error requesting time series: " + e);
})
}
onMount(load_tranfer_used)
</script>
<div>
@@ -84,7 +118,7 @@ const update_subscription = async () => {
{#if subscription === "prepaid"}
Currently active
{:else}
<button on:click={() => {subscription = "prepaid"; update_subscription()}}>
<button on:click={() => {subscription = "prepaid"; update("subscription")}}>
<i class="icon">attach_money</i>
Activate
</button>
@@ -105,7 +139,7 @@ const update_subscription = async () => {
{#if subscription === "prepaid_temp_storage_120d"}
Currently active
{:else}
<button on:click={() => {subscription = "prepaid_temp_storage_120d"; update_subscription()}}>
<button on:click={() => {subscription = "prepaid_temp_storage_120d"; update("subscription")}}>
<i class="icon">attach_money</i>
Activate
</button>
@@ -126,7 +160,7 @@ const update_subscription = async () => {
{#if subscription === "prepaid_temp_storage_60d"}
Currently active
{:else}
<button on:click={() => {subscription = "prepaid_temp_storage_60d"; update_subscription()}}>
<button on:click={() => {subscription = "prepaid_temp_storage_60d"; update("subscription")}}>
<i class="icon">attach_money</i>
Activate
</button>
@@ -147,7 +181,7 @@ const update_subscription = async () => {
{#if subscription === ""}
Currently active
{:else}
<button on:click={() => {subscription = ""; update_subscription()}}>
<button on:click={() => {subscription = ""; update("subscription")}}>
<i class="icon">money_off</i>
Activate
</button>
@@ -163,16 +197,17 @@ const update_subscription = async () => {
{/if}
<h3>Bandwidth sharing</h3>
<div class="indent">
{#if hotlinking}
<button on:click={() => { hotlinking = false; update_subscription() }}>
<button on:click={() => { hotlinking = false; update("limits") }}>
<i class="icon green">check</i> ON (click to turn off)
</button>
{:else}
<button on:click={() => { hotlinking = true; update_subscription() }}>
<button on:click={() => { hotlinking = true; update("limits") }}>
<i class="icon red">close</i> OFF (click to turn on)
</button>
{/if}
</div>
<p>
When bandwidth sharing is enabled all the bandwidth that your files
use will be subtracted from your data cap. Advertisements will be
@@ -184,11 +219,21 @@ const update_subscription = async () => {
</p>
<h3>Bill shock limit</h3>
Billshock limit in terabytes per month. Set to 0 to disable<br/>
<input type="number" bind:value={transfer_cap}/> TB
<button on:click={update_subscription}>
<i class="icon">save</i> Save
</button>
<div class="indent">
Billshock limit in gigabytes per month (1 TB = 1000 GB). Set to 0 to disable.
<br/>
<form on:submit|preventDefault={() => {update("limits")}} class="billshock_container">
<input type="number" bind:value={transfer_cap} step="100" min="0"/>
<div style="margin: 0.5em;">GB</div>
<button type="submit">
<i class="icon">save</i> Save
</button>
</form>
Bandwidth used in the last 30 days: {formatDataVolume(transfer_used, 3)},
new limit: {formatDataVolume(transfer_cap*1e9, 3)}
<ProgressBar used={transfer_used} total={transfer_cap*1e9}></ProgressBar>
</div>
<p>
The billshock limit limits how much bandwidth your account can use
in a 30 day window. When this limit is reached files will show ads
@@ -253,5 +298,10 @@ const update_subscription = async () => {
.red {
color: var(--danger_color);
}
.billshock_container {
display: flex;
flex-direction: row;
align-items: center;
}
</style>

38
svelte/src/util/ProgressBar.svelte Normal file
View File

@@ -0,0 +1,38 @@
<script>
export let total = 0
export let used = 0
let percent = 0
$: {
// Avoid division by 0
if (total === 0) {
total = 1
}
// Don't allow more than 100% progress
if (used / total > 1) {
percent = 100
} else {
percent = (used / total) * 100
}
}
</script>
<div class="progress_bar_outer">
<div class="progress_bar_inner" style="width: {percent}%;"></div>
</div>
<style>
.progress_bar_outer {
display: block;
background-color: var(--layer_1_color);
width: 100%;
height: 3px;
margin: 6px 0 12px 0;
}
.progress_bar_inner {
background-color: var(--highlight_color);
height: 100%;
width: 0;
transition: width 1s;
}
</style>