Implement drive setting page

This commit is contained in:
syuilo 2021-01-23 18:14:57 +09:00
parent d439bc8c2f
commit 9fff26b900
2 changed files with 195 additions and 11 deletions

View file

@ -1,33 +1,97 @@
<template> <template>
<section class="uawsfosz _section"> <FormBase class="">
<div class="_title"><Fa :icon="faCloud"/> {{ $ts.drive }}</div> <FormGroup v-if="!fetching">
<div class="_content"> <template #label>{{ $ts.usageAmount }}</template>
<span>{{ $ts.uploadFolder }}: {{ uploadFolder ? uploadFolder.name : '-' }}</span> <div class="_formItem uawsfosz">
<MkButton primary @click="chooseUploadFolder()"><Fa :icon="faFolderOpen"/> {{ $ts.selectFolder }}</MkButton> <div class="_formPanel">
<div class="meter"><div :style="meterStyle"></div></div>
</div> </div>
</section> </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>
<FormButton :center="false" @click="chooseUploadFolder()" primary>
{{ $ts.uploadFolder }}
<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
<template #suffixIcon><Fa :icon="faFolderOpen"/></template>
</FormButton>
</FormBase>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import * as tinycolor from 'tinycolor2';
import ApexCharts from 'apexcharts';
import { faCloud, faFolderOpen } from '@fortawesome/free-solid-svg-icons'; import { faCloud, faFolderOpen } from '@fortawesome/free-solid-svg-icons';
import { faClock, faEyeSlash, faTrashAlt } from '@fortawesome/free-regular-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 * as os from '@/os';
import bytes from '@/filters/bytes';
export default defineComponent({ export default defineComponent({
components: { components: {
MkButton, FormBase,
FormButton,
FormGroup,
FormKeyValueView,
}, },
emits: ['info'],
data() { data() {
return { return {
INFO: {
title: this.$ts.drive,
icon: faCloud
},
fetching: true,
usage: null,
capacity: null,
uploadFolder: null, uploadFolder: null,
faCloud, faClock, faEyeSlash, faFolderOpen, faTrashAlt 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() { 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) { if (this.$store.state.uploadFolder) {
this.uploadFolder = await os.api('drive/folders/show', { this.uploadFolder = await os.api('drive/folders/show', {
folderId: this.$store.state.uploadFolder folderId: this.$store.state.uploadFolder
@ -35,6 +99,10 @@ export default defineComponent({
} }
}, },
mounted() {
this.$emit('info', this.INFO);
},
methods: { methods: {
chooseUploadFolder() { chooseUploadFolder() {
os.selectDriveFolder(false).then(async folder => { os.selectDriveFolder(false).then(async folder => {
@ -48,13 +116,127 @@ export default defineComponent({
this.uploadFolder = null; 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.uawsfosz { .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> </style>

View file

@ -6,6 +6,7 @@
<FormLink :active="page === 'profile'" replace to="/settings/profile"><template #icon><Fa :icon="faUser"/></template>{{ $ts.profile }}</FormLink> <FormLink :active="page === 'profile'" replace to="/settings/profile"><template #icon><Fa :icon="faUser"/></template>{{ $ts.profile }}</FormLink>
<FormLink :active="page === 'privacy'" replace to="/settings/privacy"><template #icon><Fa :icon="faLockOpen"/></template>{{ $ts.privacy }}</FormLink> <FormLink :active="page === 'privacy'" replace to="/settings/privacy"><template #icon><Fa :icon="faLockOpen"/></template>{{ $ts.privacy }}</FormLink>
<FormLink :active="page === 'reaction'" replace to="/settings/reaction"><template #icon><Fa :icon="faLaugh"/></template>{{ $ts.reaction }}</FormLink> <FormLink :active="page === 'reaction'" replace to="/settings/reaction"><template #icon><Fa :icon="faLaugh"/></template>{{ $ts.reaction }}</FormLink>
<FormLink :active="page === 'drive'" replace to="/settings/drive"><template #icon><Fa :icon="faCloud"/></template>{{ $ts.drive }}</FormLink>
<FormLink :active="page === 'notifications'" replace to="/settings/notifications"><template #icon><Fa :icon="faBell"/></template>{{ $ts.notifications }}</FormLink> <FormLink :active="page === 'notifications'" replace to="/settings/notifications"><template #icon><Fa :icon="faBell"/></template>{{ $ts.notifications }}</FormLink>
<FormLink :active="page === 'email'" replace to="/settings/email"><template #icon><Fa :icon="faEnvelope"/></template>{{ $ts.email }}</FormLink> <FormLink :active="page === 'email'" replace to="/settings/email"><template #icon><Fa :icon="faEnvelope"/></template>{{ $ts.email }}</FormLink>
<FormLink :active="page === 'integration'" replace to="/settings/integration"><template #icon><Fa :icon="faShareAlt"/></template>{{ $ts.integration }}</FormLink> <FormLink :active="page === 'integration'" replace to="/settings/integration"><template #icon><Fa :icon="faShareAlt"/></template>{{ $ts.integration }}</FormLink>
@ -42,7 +43,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'; import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
import { faCog, faPalette, faPlug, faUser, faListUl, faLock, faCommentSlash, faMusic, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey, faBoxes } from '@fortawesome/free-solid-svg-icons'; import { faCog, faPalette, faPlug, faUser, faListUl, faLock, faCommentSlash, faMusic, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey, faBoxes, faCloud } from '@fortawesome/free-solid-svg-icons';
import { faLaugh, faBell, faEnvelope } from '@fortawesome/free-regular-svg-icons'; import { faLaugh, faBell, faEnvelope } from '@fortawesome/free-regular-svg-icons';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import FormLink from '@/components/form/link.vue'; import FormLink from '@/components/form/link.vue';
@ -85,6 +86,7 @@ export default defineComponent({
case 'profile': return defineAsyncComponent(() => import('./profile.vue')); case 'profile': return defineAsyncComponent(() => import('./profile.vue'));
case 'privacy': return defineAsyncComponent(() => import('./privacy.vue')); case 'privacy': return defineAsyncComponent(() => import('./privacy.vue'));
case 'reaction': return defineAsyncComponent(() => import('./reaction.vue')); case 'reaction': return defineAsyncComponent(() => import('./reaction.vue'));
case 'drive': return defineAsyncComponent(() => import('./drive.vue'));
case 'notifications': return defineAsyncComponent(() => import('./notifications.vue')); case 'notifications': return defineAsyncComponent(() => import('./notifications.vue'));
case 'mute-block': return defineAsyncComponent(() => import('./mute-block.vue')); case 'mute-block': return defineAsyncComponent(() => import('./mute-block.vue'));
case 'word-mute': return defineAsyncComponent(() => import('./word-mute.vue')); case 'word-mute': return defineAsyncComponent(() => import('./word-mute.vue'));
@ -157,7 +159,7 @@ export default defineComponent({
localStorage.removeItem('theme'); localStorage.removeItem('theme');
location.reload(); location.reload();
}, },
faPalette, faPlug, faUser, faListUl, faLock, faLaugh, faCommentSlash, faMusic, faBell, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey, faBoxes, faEnvelope, faPalette, faPlug, faUser, faListUl, faLock, faLaugh, faCommentSlash, faMusic, faBell, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey, faBoxes, faEnvelope, faCloud,
}; };
}, },
}); });