190 lines
4.2 KiB
Vue
190 lines
4.2 KiB
Vue
<template>
|
|
<div id="admin">
|
|
<div v-if="loggedIn">
|
|
<Menu></Menu>
|
|
|
|
<div class="content">
|
|
<router-view></router-view>
|
|
</div>
|
|
</div>
|
|
|
|
<router-view v-else></router-view>
|
|
|
|
<div class="footer" v-if="loggedIn">
|
|
<div v-if="diskspace !== null">
|
|
{{ $t('admin.diskspace', formattedDiskspace) }}
|
|
|
|
<div class="diskspace">
|
|
<div class="bar" :class="{ warning: diskspaceWarning}" :style="'width: ' + diskspacePercentage + '%'"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Menu from './Menu.vue';
|
|
import shared from '../../shared';
|
|
import axios from 'axios';
|
|
|
|
export default {
|
|
data()
|
|
{
|
|
return {
|
|
diskspace: null
|
|
}
|
|
},
|
|
|
|
components: {
|
|
Menu
|
|
},
|
|
|
|
computed: {
|
|
loggedIn()
|
|
{
|
|
return shared.adminToken !== null;
|
|
},
|
|
|
|
formattedDiskspace()
|
|
{
|
|
var self = this;
|
|
if (self.diskspace === null)
|
|
return null;
|
|
|
|
return {
|
|
free: self.$options.filters.formatSizeSI(self.diskspace.free),
|
|
available: self.$options.filters.formatSizeSI(self.diskspace.available),
|
|
total: self.$options.filters.formatSizeSI(self.diskspace.total)
|
|
}
|
|
},
|
|
|
|
diskspacePercentage()
|
|
{
|
|
var self = this;
|
|
return Math.floor((self.diskspace.total - self.diskspace.available) / self.diskspace.total * 100);
|
|
},
|
|
|
|
diskspaceWarning()
|
|
{
|
|
var self = this;
|
|
return self.diskspacePercentage >= 80;
|
|
}
|
|
},
|
|
|
|
created()
|
|
{
|
|
var self = this;
|
|
self.unwatch = self.$watch(self.updateDiskSpace, () => self.updateDiskSpace());
|
|
},
|
|
|
|
beforeDestroy()
|
|
{
|
|
var self = this;
|
|
self.unwatch();
|
|
},
|
|
|
|
methods: {
|
|
updateDiskSpace()
|
|
{
|
|
var self = this;
|
|
if (shared.adminToken !== null)
|
|
{
|
|
axios.get('/admin/diskspace', {
|
|
headers: {
|
|
Authorization: 'Bearer ' + shared.adminToken
|
|
}})
|
|
.then((response) =>
|
|
{
|
|
self.diskspace = response.data;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
#admin .content
|
|
{
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.nodata
|
|
{
|
|
color: #c0c0c0;
|
|
}
|
|
|
|
.loading
|
|
{
|
|
color: #c0c0c0;
|
|
}
|
|
|
|
|
|
$list-padding: .2rem;
|
|
|
|
.list-header
|
|
{
|
|
background-color: #f0f0f0;
|
|
font-weight: bold;
|
|
|
|
margin-top: 1rem;
|
|
padding: $list-padding;
|
|
}
|
|
|
|
.list
|
|
{
|
|
.row
|
|
{
|
|
border-bottom: solid 1px #e0e0e0;
|
|
padding: $list-padding;
|
|
}
|
|
}
|
|
|
|
.footer
|
|
{
|
|
font-size: 75%;
|
|
text-align: center;
|
|
margin-top: 3rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
|
|
.diskspace
|
|
{
|
|
border: solid 1px black;
|
|
width: 350px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
height: 21px;
|
|
|
|
/* Thanks http://www.colorzilla.com/gradient-editor/ ! */
|
|
background: #f6f8f9;
|
|
background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
|
|
background: -webkit-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%);
|
|
background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
|
|
|
|
.bar
|
|
{
|
|
height: 21px;
|
|
|
|
background: #b7deed;
|
|
background: -moz-linear-gradient(top, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%);
|
|
background: -webkit-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
|
|
background: linear-gradient(to bottom, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 );
|
|
|
|
&.warning
|
|
{
|
|
background: #feccb1;
|
|
background: -moz-linear-gradient(top, #feccb1 0%, #f17432 50%, #ea5507 51%, #fb955e 100%);
|
|
background: -webkit-linear-gradient(top, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%);
|
|
background: linear-gradient(to bottom, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=0 );
|
|
}
|
|
}
|
|
}
|
|
|
|
</style> |