diff options
Diffstat (limited to 'src/client/pages/settings/drive.vue')
| -rw-r--r-- | src/client/pages/settings/drive.vue | 200 |
1 files changed, 191 insertions, 9 deletions
diff --git a/src/client/pages/settings/drive.vue b/src/client/pages/settings/drive.vue index 89c9b4bd69..8ca8bc9eec 100644 --- a/src/client/pages/settings/drive.vue +++ b/src/client/pages/settings/drive.vue @@ -1,33 +1,97 @@ <template> -<section class="uawsfosz _section"> - <div class="_title"><Fa :icon="faCloud"/> {{ $ts.drive }}</div> - <div class="_content"> - <span>{{ $ts.uploadFolder }}: {{ uploadFolder ? uploadFolder.name : '-' }}</span> - <MkButton primary @click="chooseUploadFolder()"><Fa :icon="faFolderOpen"/> {{ $ts.selectFolder }}</MkButton> +<FormBase class=""> + <FormGroup v-if="!fetching"> + <template #label>{{ $ts.usageAmount }}</template> + <div class="_formItem uawsfosz"> + <div class="_formPanel"> + <div class="meter"><div :style="meterStyle"></div></div> + </div> + </div> + <FormKeyValueView> + <template #key>{{ $ts.capacity }}</template> + <template #value>{{ bytes(capacity, 1) }}</template> + </FormKeyValueView> + <FormKeyValueView> + <template #key>{{ $ts.inUse }}</template> + <template #value>{{ bytes(usage, 1) }}</template> + </FormKeyValueView> + </FormGroup> + + <div class="_formItem"> + <div class="_formLabel">{{ $ts.statistics }}</div> + <div class="_formPanel"> + <div ref="chart"></div> + </div> </div> -</section> + + <FormButton :center="false" @click="chooseUploadFolder()" primary> + {{ $ts.uploadFolder }} + <template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template> + <template #suffixIcon><Fa :icon="faFolderOpen"/></template> + </FormButton> +</FormBase> </template> <script lang="ts"> import { defineComponent } from 'vue'; +import * as tinycolor from 'tinycolor2'; +import ApexCharts from 'apexcharts'; import { faCloud, faFolderOpen } from '@fortawesome/free-solid-svg-icons'; import { faClock, faEyeSlash, faTrashAlt } from '@fortawesome/free-regular-svg-icons'; -import MkButton from '@/components/ui/button.vue'; +import FormButton from '@/components/form/button.vue'; +import FormGroup from '@/components/form/group.vue'; +import FormKeyValueView from '@/components/form/key-value-view.vue'; +import FormBase from '@/components/form/base.vue'; import * as os from '@/os'; +import bytes from '@/filters/bytes'; export default defineComponent({ components: { - MkButton, + FormBase, + FormButton, + FormGroup, + FormKeyValueView, }, + emits: ['info'], + data() { return { + INFO: { + title: this.$ts.drive, + icon: faCloud + }, + fetching: true, + usage: null, + capacity: null, uploadFolder: null, faCloud, faClock, faEyeSlash, faFolderOpen, faTrashAlt } }, + computed: { + meterStyle(): any { + return { + width: `${this.usage / this.capacity * 100}%`, + background: tinycolor({ + h: 180 - (this.usage / this.capacity * 180), + s: 0.7, + l: 0.5 + }) + }; + } + }, + async created() { + os.api('drive').then(info => { + this.capacity = info.capacity; + this.usage = info.usage; + this.fetching = false; + this.$nextTick(() => { + this.renderChart(); + }); + }); + if (this.$store.state.uploadFolder) { this.uploadFolder = await os.api('drive/folders/show', { folderId: this.$store.state.uploadFolder @@ -35,6 +99,10 @@ export default defineComponent({ } }, + mounted() { + this.$emit('info', this.INFO); + }, + methods: { chooseUploadFolder() { os.selectDriveFolder(false).then(async folder => { @@ -48,13 +116,127 @@ export default defineComponent({ this.uploadFolder = null; } }); - } + }, + + renderChart() { + os.api('charts/user/drive', { + userId: this.$i.id, + span: 'day', + limit: 21 + }).then(stats => { + const addition = []; + const deletion = []; + const now = new Date(); + const y = now.getFullYear(); + const m = now.getMonth(); + const d = now.getDate(); + for (let i = 0; i < 21; i++) { + const x = new Date(y, m, d - i); + addition.push([ + x, + stats.incSize[i] + ]); + deletion.push([ + x, + -stats.decSize[i] + ]); + } + const chart = new ApexCharts(this.$refs.chart, { + chart: { + type: 'bar', + stacked: true, + height: 150, + toolbar: { + show: false + }, + zoom: { + enabled: false + } + }, + plotOptions: { + bar: { + columnWidth: '80%' + } + }, + grid: { + clipMarkers: false, + borderColor: 'rgba(0, 0, 0, 0.1)', + xaxis: { + lines: { + show: true, + } + }, + }, + tooltip: { + shared: true, + intersect: false, + theme: this.$store.state.darkMode ? 'dark' : 'light', + }, + dataLabels: { + enabled: false + }, + legend: { + show: false + }, + series: [{ + name: 'Additions', + data: addition + }, { + name: 'Deletions', + data: deletion + }], + xaxis: { + type: 'datetime', + labels: { + style: { + colors: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--fg')).toRgbString() + } + }, + axisBorder: { + color: 'rgba(0, 0, 0, 0.1)' + }, + axisTicks: { + color: 'rgba(0, 0, 0, 0.1)' + }, + crosshairs: { + width: 1, + opacity: 1 + } + }, + yaxis: { + labels: { + formatter: v => bytes(v, 0), + style: { + colors: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--fg')).toRgbString() + } + } + } + }); + chart.render(); + }); + }, + + bytes } }); </script> <style lang="scss" scoped> .uawsfosz { + > div { + padding: 24px; + + > .meter { + $size: 12px; + background: rgba(0, 0, 0, 0.1); + border-radius: ($size / 2); + overflow: hidden; + > div { + height: $size; + border-radius: ($size / 2); + } + } + } } </style> |