Styling fixes and progressbar class

svelte/src/admin_panel/Home.svelte

@@ -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>

svelte/src/user_home/Home.svelte

@@ -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" />

svelte/src/user_home/HotlinkProgressBar.svelte

@@ -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">

svelte/src/user_home/StorageProgressBar.svelte

@@ -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>

svelte/src/user_home/Subscription.svelte

@@ -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>

svelte/src/util/ProgressBar.svelte

@@ -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>