upload/download storage chart

This commit is contained in:
Čarodej
2021-11-30 10:53:09 +01:00
parent 69e167a337
commit 751ebcb7eb
4 changed files with 117 additions and 50 deletions

View File

@@ -72,8 +72,8 @@
"/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=aa32489d4652f18b4a8c",
"/chunks/settings-password.js": "/chunks/settings-password.js?id=fc95bc9d31d3e9ee0442",
"/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=3a88e55341d1f1ffe12d",
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=c1a4036392db4eea190f",
"/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js": "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js?id=ea97ac1cb976ca635778",
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=07ab72ae0c586211689e",
"/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js": "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js?id=147afaac8c8bacfe6433",
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=cd4f59468aaaca384307",
"/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=c33cd2341b9b04a732e5",
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5",
@@ -165,5 +165,73 @@
"/chunks/settings-subscription.ef966a31135ab618aa48.hot-update.js": "/chunks/settings-subscription.ef966a31135ab618aa48.hot-update.js",
"/chunks/settings-subscription.be5c344dacad3df9ce4f.hot-update.js": "/chunks/settings-subscription.be5c344dacad3df9ce4f.hot-update.js",
"/chunks/settings-subscription.958d6569c0c219566b31.hot-update.js": "/chunks/settings-subscription.958d6569c0c219566b31.hot-update.js",
"/chunks/settings-subscription.280bb2661b1be8df3762.hot-update.js": "/chunks/settings-subscription.280bb2661b1be8df3762.hot-update.js"
"/chunks/settings-subscription.280bb2661b1be8df3762.hot-update.js": "/chunks/settings-subscription.280bb2661b1be8df3762.hot-update.js",
"/chunks/settings-storage.22b53f1be0e4d334ed72.hot-update.js": "/chunks/settings-storage.22b53f1be0e4d334ed72.hot-update.js",
"/chunks/settings-storage.68ad64b9690ede821c8e.hot-update.js": "/chunks/settings-storage.68ad64b9690ede821c8e.hot-update.js",
"/chunks/settings-storage.2aef1a3ce7d066c44b81.hot-update.js": "/chunks/settings-storage.2aef1a3ce7d066c44b81.hot-update.js",
"/chunks/settings-storage.05fc0fde78b34737938d.hot-update.js": "/chunks/settings-storage.05fc0fde78b34737938d.hot-update.js",
"/chunks/settings-storage.bd9d7e0b647ef0f960f5.hot-update.js": "/chunks/settings-storage.bd9d7e0b647ef0f960f5.hot-update.js",
"/chunks/settings-storage.3d5e804a0270706a3564.hot-update.js": "/chunks/settings-storage.3d5e804a0270706a3564.hot-update.js",
"/chunks/settings-storage.f7fedf429c369b28e2d3.hot-update.js": "/chunks/settings-storage.f7fedf429c369b28e2d3.hot-update.js",
"/chunks/settings-storage.65b5307325c1d956f99d.hot-update.js": "/chunks/settings-storage.65b5307325c1d956f99d.hot-update.js",
"/chunks/settings-storage.d489a8d6ddc08abb9bda.hot-update.js": "/chunks/settings-storage.d489a8d6ddc08abb9bda.hot-update.js",
"/chunks/settings-storage.46fbd5d099963553c449.hot-update.js": "/chunks/settings-storage.46fbd5d099963553c449.hot-update.js",
"/chunks/settings-storage.cd4776df0f1b5133be71.hot-update.js": "/chunks/settings-storage.cd4776df0f1b5133be71.hot-update.js",
"/chunks/settings-storage.82794b8050a14b4d017e.hot-update.js": "/chunks/settings-storage.82794b8050a14b4d017e.hot-update.js",
"/chunks/settings-storage.6ba4d5ce5cbf585fde67.hot-update.js": "/chunks/settings-storage.6ba4d5ce5cbf585fde67.hot-update.js",
"/chunks/settings-storage.7098f6a3be0d5ef3aeed.hot-update.js": "/chunks/settings-storage.7098f6a3be0d5ef3aeed.hot-update.js",
"/chunks/settings-storage.32b4154a2e1a459ddeec.hot-update.js": "/chunks/settings-storage.32b4154a2e1a459ddeec.hot-update.js",
"/chunks/settings-storage.45e099283be2dc7d4e86.hot-update.js": "/chunks/settings-storage.45e099283be2dc7d4e86.hot-update.js",
"/chunks/settings-storage.5061d3c2313cdb6aa7c2.hot-update.js": "/chunks/settings-storage.5061d3c2313cdb6aa7c2.hot-update.js",
"/chunks/settings-storage.56727d53ccdcd9ff7687.hot-update.js": "/chunks/settings-storage.56727d53ccdcd9ff7687.hot-update.js",
"/chunks/settings-storage.d381f794e0675681ca1f.hot-update.js": "/chunks/settings-storage.d381f794e0675681ca1f.hot-update.js",
"/chunks/settings-storage.a6b1833763323553ce47.hot-update.js": "/chunks/settings-storage.a6b1833763323553ce47.hot-update.js",
"/chunks/settings-storage.090eb321177646467a1b.hot-update.js": "/chunks/settings-storage.090eb321177646467a1b.hot-update.js",
"/chunks/settings-storage.cb639a8abdb348e8756f.hot-update.js": "/chunks/settings-storage.cb639a8abdb348e8756f.hot-update.js",
"/chunks/settings-storage.7221e8e4238d0cb13324.hot-update.js": "/chunks/settings-storage.7221e8e4238d0cb13324.hot-update.js",
"/chunks/settings-storage.d0ea16b4f16cd7719373.hot-update.js": "/chunks/settings-storage.d0ea16b4f16cd7719373.hot-update.js",
"/chunks/settings-storage.dc394fddd78fd07d4569.hot-update.js": "/chunks/settings-storage.dc394fddd78fd07d4569.hot-update.js",
"/chunks/settings-storage.98a8a76acdb39e84171e.hot-update.js": "/chunks/settings-storage.98a8a76acdb39e84171e.hot-update.js",
"/chunks/settings-storage.6995fb55e099e421fe4a.hot-update.js": "/chunks/settings-storage.6995fb55e099e421fe4a.hot-update.js",
"/chunks/settings-storage.02dd1a07903e80683473.hot-update.js": "/chunks/settings-storage.02dd1a07903e80683473.hot-update.js",
"/chunks/settings-storage.a7a8543edf74412436b3.hot-update.js": "/chunks/settings-storage.a7a8543edf74412436b3.hot-update.js",
"/chunks/settings-storage.00d242b851b7554b9780.hot-update.js": "/chunks/settings-storage.00d242b851b7554b9780.hot-update.js",
"/chunks/settings-storage.da696ec483e93a5d56c9.hot-update.js": "/chunks/settings-storage.da696ec483e93a5d56c9.hot-update.js",
"/chunks/settings-storage.1fa210db7321ff046a90.hot-update.js": "/chunks/settings-storage.1fa210db7321ff046a90.hot-update.js",
"/chunks/settings-storage.c729bad032b731c16844.hot-update.js": "/chunks/settings-storage.c729bad032b731c16844.hot-update.js",
"/chunks/settings-storage.303d10ee2e9af4fbc2ad.hot-update.js": "/chunks/settings-storage.303d10ee2e9af4fbc2ad.hot-update.js",
"/chunks/settings-storage.66859c09af3618c47cc4.hot-update.js": "/chunks/settings-storage.66859c09af3618c47cc4.hot-update.js",
"/chunks/settings-storage.f72b0850226a7ba778cf.hot-update.js": "/chunks/settings-storage.f72b0850226a7ba778cf.hot-update.js",
"/chunks/settings-storage.b5e1ae884941e1036d32.hot-update.js": "/chunks/settings-storage.b5e1ae884941e1036d32.hot-update.js",
"/chunks/settings-storage.c2c648b7d93c8550e13c.hot-update.js": "/chunks/settings-storage.c2c648b7d93c8550e13c.hot-update.js",
"/chunks/settings-storage.b95c02fc4dd982610b5a.hot-update.js": "/chunks/settings-storage.b95c02fc4dd982610b5a.hot-update.js",
"/chunks/settings-storage.c79327d92df26383cddd.hot-update.js": "/chunks/settings-storage.c79327d92df26383cddd.hot-update.js",
"/chunks/settings-storage.bd2434df03153d82bb60.hot-update.js": "/chunks/settings-storage.bd2434df03153d82bb60.hot-update.js",
"/chunks/settings-storage.1eeee6e9d3f68ea6e0fc.hot-update.js": "/chunks/settings-storage.1eeee6e9d3f68ea6e0fc.hot-update.js",
"/chunks/settings-storage.301e53e7b625fae7060a.hot-update.js": "/chunks/settings-storage.301e53e7b625fae7060a.hot-update.js",
"/chunks/settings-storage.2b8753602bff89b4c34e.hot-update.js": "/chunks/settings-storage.2b8753602bff89b4c34e.hot-update.js",
"/chunks/settings-storage.9b8983559d0ea778fc00.hot-update.js": "/chunks/settings-storage.9b8983559d0ea778fc00.hot-update.js",
"/chunks/settings-storage.f014642de1daec3851c3.hot-update.js": "/chunks/settings-storage.f014642de1daec3851c3.hot-update.js",
"/chunks/settings-storage.568bca6ba02ac69c29c7.hot-update.js": "/chunks/settings-storage.568bca6ba02ac69c29c7.hot-update.js",
"/chunks/settings-storage.b3e6a64dbf0cbd733a44.hot-update.js": "/chunks/settings-storage.b3e6a64dbf0cbd733a44.hot-update.js",
"/chunks/settings-storage.591183b03f35a5ec943b.hot-update.js": "/chunks/settings-storage.591183b03f35a5ec943b.hot-update.js",
"/chunks/settings-storage.1c45750113d31f3c1eaa.hot-update.js": "/chunks/settings-storage.1c45750113d31f3c1eaa.hot-update.js",
"/chunks/settings-storage.7815207e9e7d6ba351c5.hot-update.js": "/chunks/settings-storage.7815207e9e7d6ba351c5.hot-update.js",
"/chunks/settings-storage.ddaf61f5fc54ecdfe279.hot-update.js": "/chunks/settings-storage.ddaf61f5fc54ecdfe279.hot-update.js",
"/chunks/settings-storage.9b2dc01006573a9177b5.hot-update.js": "/chunks/settings-storage.9b2dc01006573a9177b5.hot-update.js",
"/chunks/settings-storage.9c2db72d22847ba2a800.hot-update.js": "/chunks/settings-storage.9c2db72d22847ba2a800.hot-update.js",
"/chunks/settings-storage.6a0806fb4f32c003e821.hot-update.js": "/chunks/settings-storage.6a0806fb4f32c003e821.hot-update.js",
"/chunks/settings-storage.e07cb8a59e517c824dd8.hot-update.js": "/chunks/settings-storage.e07cb8a59e517c824dd8.hot-update.js",
"/chunks/settings-storage.30259a6331c07775c10b.hot-update.js": "/chunks/settings-storage.30259a6331c07775c10b.hot-update.js",
"/chunks/settings-storage.8088946e48224f5fa4f1.hot-update.js": "/chunks/settings-storage.8088946e48224f5fa4f1.hot-update.js",
"/chunks/settings-storage.ccce4646006767ac5bcf.hot-update.js": "/chunks/settings-storage.ccce4646006767ac5bcf.hot-update.js",
"/chunks/settings-storage.25248ea9ce4aa7f6f861.hot-update.js": "/chunks/settings-storage.25248ea9ce4aa7f6f861.hot-update.js",
"/chunks/settings-storage.41f9c02cc30e461bdace.hot-update.js": "/chunks/settings-storage.41f9c02cc30e461bdace.hot-update.js",
"/chunks/settings-storage.093f263a673139ef55ad.hot-update.js": "/chunks/settings-storage.093f263a673139ef55ad.hot-update.js",
"/js/main.bfeb194fc281575d2f38.hot-update.js": "/js/main.bfeb194fc281575d2f38.hot-update.js",
"/chunks/settings-storage.842510a496438e5f5ab0.hot-update.js": "/chunks/settings-storage.842510a496438e5f5ab0.hot-update.js",
"/chunks/settings-storage.bc9b0469009df5b5eab3.hot-update.js": "/chunks/settings-storage.bc9b0469009df5b5eab3.hot-update.js",
"/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.27b9a61682a249f71c20.hot-update.js": "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.27b9a61682a249f71c20.hot-update.js",
"/chunks/settings-storage.98ffc3f928190cda8a1b.hot-update.js": "/chunks/settings-storage.98ffc3f928190cda8a1b.hot-update.js",
"/chunks/settings-storage.f8bb07f42ef648dd2548.hot-update.js": "/chunks/settings-storage.f8bb07f42ef648dd2548.hot-update.js"
}

View File

@@ -131,7 +131,7 @@ export default {
@import '/resources/sass/vuefilemanager/_mixins';
.card {
@apply dark:bg-dark-foreground bg-white lg:p-6 p-4 rounded-xl lg:mb-6 mb-4
@apply dark:bg-dark-foreground bg-white lg:p-6 p-5 rounded-xl lg:mb-6 mb-4
}
.input-dark {

View File

@@ -11,7 +11,7 @@
'border-r-2 dark:border-gray-800 border-white rounded-tl-lg rounded-bl-lg': chart.progress < 100,
'border-none rounded-lg': chart.progress >= 100
}, chart.color]"
class="chart-progress w-full h-2 block"
class="chart-progress w-full h-2.5 block"
>
</span>
@@ -24,7 +24,7 @@
'border-r-2 dark:border-gray-800 border-white': i < (data.length - 1),
'rounded-tr-lg rounded-br-lg': i === (data.length - 1),
}, chart.color]"
class="chart-progress w-full h-2 block"
class="chart-progress w-full h-2.5 block"
></span>
</div>
</div>

View File

@@ -1,15 +1,52 @@
<template>
<PageTab>
<div class="card shadow-card">
<div v-if="distribution" class="card shadow-card">
<FormLabel icon="hard-drive">
{{ $t('Storage Usage') }}
</FormLabel>
<div v-if="distribution">
<b class="mb-3 block text-sm text-gray-400">
{{ $t('Total') }} {{ storage.data.attributes.used }} {{ $t('of') }} {{ storage.data.attributes.capacity }} {{ $t('Used') }}
</b>
<ProgressLine :data="distribution" />
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
{{ storage.data.attributes.used }}
</b>
<b class="mb-3 block text-sm text-gray-400 mb-5">
{{ $t('Total of') }} {{ storage.data.attributes.capacity }} {{ $t('Used') }}
</b>
<ProgressLine :data="distribution" />
</div>
<div v-if="distribution" class="card shadow-card">
<FormLabel icon="hard-drive">
{{ $t('Upload') }}
</FormLabel>
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
154.98MB
</b>
<b class="mb-3 block text-sm text-gray-400 mb-5">
{{ $t('In last 30 days') }}
</b>
<div class="flex items-end justify-between h-28">
<span class="w-2.5 block rounded-lg lg:mr-2 mr-1.5" :style="{height: Math.random() * 100 + '%', backgroundColor: '#9d66fe'}" v-for="(item, i) in Array(45).fill(0)" :key="i"></span>
</div>
</div>
<div v-if="distribution" class="card shadow-card">
<FormLabel icon="hard-drive">
{{ $t('Download') }}
</FormLabel>
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
927.12MB
</b>
<b class="mb-3 block text-sm text-gray-400 mb-5">
{{ $t('In last 30 days') }}
</b>
<div class="flex items-end justify-between h-28">
<span class="w-2.5 bg-theme block rounded-lg lg:mr-2 mr-1.5" :style="{height: Math.random() * 100 + '%', backgroundColor: '#ffb822'}" v-for="(item, i) in Array(45).fill(0)" :key="i"></span>
</div>
</div>
</PageTab>
@@ -49,41 +86,3 @@
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
#single-page {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
.content-page {
overflow-y: auto;
height: 100%;
padding-bottom: 100px;
max-width: 700px;
width: 100%;
margin: 0 auto;
}
}
@media only screen and (max-width: 960px) {
#single-page {
.content-page {
padding-left: 15px;
padding-right: 15px;
}
}
}
.dark {
}
</style>