141 lines
4.0 KiB
JavaScript
141 lines
4.0 KiB
JavaScript
/* eslint-disable no-console */
|
|
/* eslint-disable no-alert */
|
|
/* eslint-disable no-undef */
|
|
/* eslint-disable no-new */
|
|
|
|
'use strict';
|
|
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
authenticated: null,
|
|
authenticating: false,
|
|
password: null,
|
|
|
|
clients: null,
|
|
clientDelete: null,
|
|
clientCreate: null,
|
|
clientCreateName: '',
|
|
qrcode: null,
|
|
},
|
|
methods: {
|
|
dateTime: value => {
|
|
return new Intl.DateTimeFormat(undefined, {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: 'numeric',
|
|
minute: 'numeric',
|
|
}).format(value);
|
|
},
|
|
async refresh() {
|
|
if (!this.authenticated) return;
|
|
|
|
const clients = await this.api.getClients();
|
|
this.clients = clients.map(client => {
|
|
if (client.name.includes('@') && client.name.includes('.')) {
|
|
client.avatar = `https://www.gravatar.com/avatar/${md5(client.name)}?d=blank`;
|
|
}
|
|
|
|
return client;
|
|
});
|
|
},
|
|
login(e) {
|
|
e.preventDefault();
|
|
|
|
if (!this.password) return;
|
|
if (this.authenticating) return;
|
|
|
|
this.authenticating = true;
|
|
this.api.createSession({
|
|
password: this.password,
|
|
})
|
|
.then(async () => {
|
|
const session = await this.api.getSession();
|
|
this.authenticated = session.authenticated;
|
|
return this.refresh();
|
|
})
|
|
.catch(err => {
|
|
alert(err.message || err.toString());
|
|
})
|
|
.finally(() => {
|
|
this.authenticating = false;
|
|
});
|
|
},
|
|
logout(e) {
|
|
e.preventDefault();
|
|
|
|
this.api.deleteSession()
|
|
.then(() => {
|
|
this.authenticated = false;
|
|
this.clients = null;
|
|
})
|
|
.catch(err => {
|
|
alert(err.message || err.toString());
|
|
});
|
|
},
|
|
createClient() {
|
|
const name = this.clientCreateName;
|
|
if (!name) return;
|
|
|
|
this.api.createClient({ name })
|
|
.catch(err => alert(err.message || err.toString()))
|
|
.finally(() => this.refresh().catch(console.error));
|
|
},
|
|
deleteClient(clientId) {
|
|
this.api.deleteClient({ clientId: client.id })
|
|
.catch(err => alert(err.message || err.toString()))
|
|
.finally(() => this.refresh().catch(console.error));
|
|
},
|
|
enableClient(client) {
|
|
this.api.enableClient({ clientId: client.id })
|
|
.catch(err => alert(err.message || err.toString()))
|
|
.finally(() => this.refresh().catch(console.error));
|
|
},
|
|
disableClient(client) {
|
|
this.api.disableClient({ clientId: client.id })
|
|
.catch(err => alert(err.message || err.toString()))
|
|
.finally(() => this.refresh().catch(console.error));
|
|
},
|
|
},
|
|
filters: {
|
|
timeago: value => {
|
|
return timeago().format(value);
|
|
},
|
|
bytes: (bytes, decimals, kib, maxunit) => {
|
|
kib = kib || false;
|
|
if (bytes === 0) return '0 Bytes';
|
|
if (Number.isNaN(parseFloat(bytes)) && !Number.isFinite(bytes)) return 'Not an number';
|
|
const k = kib ? 1024 : 1000;
|
|
const dm = decimals != null && !Number.isNaN(decimals) && decimals >= 0 ? decimals : 2;
|
|
const sizes = kib
|
|
? ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB', 'BiB']
|
|
: ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB', 'BB'];
|
|
let i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
if (maxunit !== undefined) {
|
|
const index = sizes.indexOf(maxunit);
|
|
if (index !== -1) i = index;
|
|
}
|
|
// eslint-disable-next-line no-restricted-properties
|
|
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
|
|
},
|
|
},
|
|
mounted() {
|
|
this.api = new API();
|
|
this.api.getSession()
|
|
.then(session => {
|
|
this.authenticated = session.authenticated;
|
|
this.refresh().catch(err => {
|
|
alert(err.message || err.toString());
|
|
});
|
|
})
|
|
.catch(err => {
|
|
alert(err.message || err.toString());
|
|
});
|
|
|
|
setInterval(() => {
|
|
this.refresh().catch(console.error);
|
|
}, 1000);
|
|
},
|
|
});
|