Add UI for viewing storage space limit

This commit is contained in:
2021-09-07 17:09:52 +02:00
parent ebc7bc34e4
commit f4a9d0595a
6 changed files with 112 additions and 23 deletions

View File

@@ -58,7 +58,12 @@ function loadDirectBW() {
return resp.json();
}).then(resp => {
let total = resp.amounts.reduce((accum, val) => accum += val, 0);
document.getElementById("direct_bandwidth_month").innerText = formatDataVolume(total, 4)
document.getElementById("direct_bandwidth_progress").style.width = (total / window.user.subscription.direct_linking_bandwidth) * 100 + "%"
document.getElementById("direct_bandwidth_text").innerText = formatDataVolume(total, 3) + " out of " + formatDataVolume(window.user.subscription.direct_linking_bandwidth, 3)
document.getElementById("storage_progress").style.width = (window.user.storage_space_used / window.user.subscription.storage_space) * 100 + "%"
document.getElementById("storage_text").innerText = formatDataVolume(window.user.storage_space_used, 3) + " out of " + formatDataVolume(window.user.subscription.storage_space, 3)
}).catch(e => {
console.error("Error requesting time series: " + e);
})

View File

@@ -3,7 +3,24 @@
<head>
{{template "meta_tags" .User.Username}}
{{template "user_style" .}}
<script>var apiEndpoint = '{{.APIEndpoint}}';</script>
<script>
var apiEndpoint = '{{.APIEndpoint}}';
window.user = {{.User}};
</script>
<style>
.progress_bar_outer {
background-color: var(--layer_1_color);
width: 100%;
height: 3px;
}
.progress_bar_inner {
background-color: var(--highlight_color);
height: 100%;
width: 0;
transition: width 1s;
}
</style>
</head>
<body>
@@ -23,29 +40,45 @@
(<a href="https://www.patreon.com/join/pixeldrain/checkout?edit=1">Manage subscription</a>)
{{end}}
<ul>
<li>Ads when viewing files: {{if .User.Subscription.DisableAdDisplay}}No{{else}}Yes{{end}}</li>
<li>Ads on your uploaded files: {{if .User.Subscription.DisableAdsOnFiles}}No{{else}}Yes{{end}}</li>
<li>Advertisements when viewing files: {{if .User.Subscription.DisableAdDisplay}}No{{else}}Yes{{end}}</li>
<li>Advertisements on your uploaded files: {{if .User.Subscription.DisableAdsOnFiles}}No{{else}}Yes{{end}}</li>
{{if gt .User.Subscription.FileExpiryDays 0}}
<li>Files expire after {{.User.Subscription.FileExpiryDays}} days</li>
{{else}}
<li>Files never expire</li>
{{end}}
<li>File size limit: {{formatData .User.Subscription.FileSizeLimit}}</li>
<li>
Direct linking bandwidth:
{{formatData .User.Subscription.DirectLinkingBandwidth}}
(<span id="direct_bandwidth_month">0 B</span> used in the last 30 days)
<br/>
<a href="/#direct_linking">More information about direct linking</a>
</li>
</ul>
</li>
</ul>
<a href="/user/settings" class="button button_highlight">Change account settings</a>
<br/><br/>
<a href="/user/export/files" class="button">Export uploaded files to CSV</a>
<a href="/user/export/lists" class="button">Export created lists to CSV</a>
<h3>Limits</h3>
Storage: <span id="storage_text"></span><br/>
<div class="progress_bar_outer">
<div id="storage_progress" class="progress_bar_inner" style="width: 0%;"></div>
</div>
<br/>
Direct link bandwidth: <span id="direct_bandwidth_text"></span>
(<a href="/#direct_linking">More information about direct linking</a>)
<div class="progress_bar_outer">
<div id="direct_bandwidth_progress" class="progress_bar_inner" style="width: 0%;"></div>
</div>
<br/>
<h3>Settings</h3>
<div style="text-align: center;">
<a href="/user/settings" class="button button_highlight">
<i class="icon">edit</i>
Change account settings
</a>
<a href="/user/export/files" class="button">
<i class="icon">list</i>
Export uploaded files to CSV
</a>
<a href="/user/export/lists" class="button">
<i class="icon">list</i>
Export created lists to CSV
</a>
</div>
<h2>Statistics</h2>
<p>

View File

@@ -74,8 +74,8 @@
window.api_endpoint = '{{.APIEndpoint}}';
window.user_subscription = {{.User.Subscription}};
</script>
<link rel='stylesheet' href='/res/svelte/home_page.css?v9'>
<script defer src='/res/svelte/home_page.js?v9'></script>
<link rel='stylesheet' href='/res/svelte/home_page.css?v1'>
<script defer src='/res/svelte/home_page.js?v1'></script>
</head>
<body>
{{template "page_top" .}}
@@ -187,6 +187,17 @@
</button>
</div>
</div>
<div>
<div class="feat_label">
Storage space
</div>
<div class="feat_normal">
500 gigabytes
</div>
<div class="feat_pro">
<span class="text_highlight">1 terabyte</span>
</div>
</div>
<div>
<div class="feat_label">
Online file previews
@@ -230,6 +241,7 @@
<div class="feat_normal">
<span class="text_highlight">20 GB</span> file size<br/>
<span class="text_highlight">2 TB</span> direct link bandwidth<br/>
<span class="text_highlight">2 TB</span> storage space<br/>
<span class="text_highlight">120 days</span> file expiry
</div>
<div class="feat_pro round_tr round_br cell_background" style="background-image: url('/res/img/benefit_5_small.png');">
@@ -246,6 +258,7 @@
<div class="feat_normal">
<span class="text_highlight">20 GB</span> file size<br/>
<span class="text_highlight">4 TB</span> direct link bandwidth<br/>
<span class="text_highlight">4 TB</span> storage space<br/>
<span class="text_highlight">240 days</span> file expiry
</div>
<div class="feat_pro round_tr round_br cell_background" style="background-image: url('/res/img/benefit_2_small.png');">
@@ -262,6 +275,7 @@
<div class="feat_normal">
<span class="text_highlight">20 GB</span> file size<br/>
<span class="text_highlight">8 TB</span> direct link bandwidth<br/>
<span class="text_highlight">8 TB</span> storage space<br/>
<span class="text_highlight">480 days</span> file expiry
</div>
<div class="feat_pro round_tr round_br cell_background" style="background-image: url('/res/img/benefit_3_small.png');">
@@ -278,6 +292,7 @@
<div class="feat_normal">
<span class="text_highlight">20 GB</span> file size<br/>
<span class="text_highlight">16 TB</span> direct link bandwidth<br/>
<span class="text_highlight">16 TB</span> storage space<br/>
<span class="text_highlight">Files never expre</span>
</div>
<div class="feat_pro round_tr round_br cell_background" style="background-image: url('/res/img/benefit_4_small.png');">
@@ -294,6 +309,7 @@
<div class="feat_normal">
<span class="text_highlight">20 GB</span> file size<br/>
<span class="text_highlight">32 TB</span> direct link bandwidth<br/>
<span class="text_highlight">32 TB</span> storage space<br/>
<span class="text_highlight">Files never expre</span>
</div>
<div class="feat_pro round_tr round_br cell_background" style="background-image: url('/res/img/benefit_6_small.png');">

View File

@@ -81,7 +81,7 @@ const get_reports = async () => {
onMount(() => {
let start = new Date()
start.setDate(start.getDate() - 14)
start.setDate(start.getDate() - 28)
let end = new Date()
startPicker.valueAsNumber = start.getTime()

View File

@@ -118,7 +118,10 @@ export const start = () => {
resp = JSON.parse(xhr.response)
}
if (resp.value == "file_too_large" || resp.value == "ip_banned" || tries === 3) {
if (resp.value == "file_too_large"
|| resp.value == "ip_banned"
|| resp.value == "user_out_of_space"
|| tries === 3) {
// Permanent failure
on_failure(resp.value, resp.message)
} else {

View File

@@ -135,6 +135,7 @@ func (tm *TemplateManager) ParseTemplates(silent bool) {
"pageNr": tm.pageNr,
"add": tm.add,
"sub": tm.sub,
"mul": tm.mul,
"div": tm.div,
"formatData": tm.formatData,
"formatSC": tm.formatSC,
@@ -245,9 +246,10 @@ func (tm *TemplateManager) pageNr(s string) (nr int) {
}
return nr
}
func (tm *TemplateManager) add(a, b interface{}) int { return detectInt(a) + detectInt(b) }
func (tm *TemplateManager) sub(a, b interface{}) int { return detectInt(a) - detectInt(b) }
func (tm *TemplateManager) div(a, b float64) float64 { return a / b }
func (tm *TemplateManager) add(a, b interface{}) float64 { return toFloat(a) + toFloat(b) }
func (tm *TemplateManager) sub(a, b interface{}) float64 { return toFloat(a) - toFloat(b) }
func (tm *TemplateManager) mul(a, b interface{}) float64 { return toFloat(a) * toFloat(b) }
func (tm *TemplateManager) div(a, b interface{}) float64 { return toFloat(a) / toFloat(b) }
func (tm *TemplateManager) formatData(i interface{}) string {
return util.FormatData(int64(detectInt(i)))
@@ -311,3 +313,33 @@ func detectInt(i interface{}) int {
}
panic(fmt.Sprintf("%v is not an int", i))
}
func toFloat(i interface{}) float64 {
switch v := i.(type) {
case int:
return float64(v)
case int8:
return float64(v)
case int16:
return float64(v)
case int32:
return float64(v)
case int64:
return float64(v)
case uint:
return float64(v)
case uint8:
return float64(v)
case uint16:
return float64(v)
case uint32:
return float64(v)
case uint64:
return float64(v)
case float32:
return float64(v)
case float64:
return float64(v)
}
panic(fmt.Sprintf("%v is not a number", i))
}