mirrors/amnezia-wg-easy
1
0
Fork 1
mirror of https://github.com/w0rng/amnezia-wg-easy.git synced 2025-04-26 13:20:11 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

replace apexcharts with 'ye olde divs

Browse source
This commit is contained in:
Emile Nijssen 2022-06-25 22:39:41 +02:00
parent f364e0775a
commit faf00d46d9
5 changed files with 82 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/www/js/app.js
View file

@ -25,9 +25,6 @@ function bytes(bytes, decimals, kib, maxunit) {
new Vue({
el: '#app',
components: {
apexchart: VueApexCharts,
},
data: {
authenticated: null,
authenticating: false,
@ -124,7 +121,9 @@ new Vue({
minute: 'numeric',
}).format(value);
},
async refresh() {
async refresh({
updateCharts = false,
} = {}) {
if (!this.authenticated) return;
const clients = await this.api.getClients();
@ -135,44 +134,38 @@ new Vue({
if (!this.clientsPersist[client.id]) {
this.clientsPersist[client.id] = {};
this.clientsPersist[client.id].transferRxHistory = Array(100).fill(0);
this.clientsPersist[client.id].transferRxHistory = Array(50).fill(0);
this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
this.clientsPersist[client.id].transferTxHistory = Array(100).fill(0);
this.clientsPersist[client.id].transferTxHistory = Array(50).fill(0);
this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
this.clientsPersist[client.id].chartOptions = {
...this.chartOptions,
yaxis: {
...this.chartOptions.yaxis,
max: () => this.clientsPersist[client.id].chartMax,
},
};
}
this.clientsPersist[client.id].transferRxCurrent = client.transferRx - this.clientsPersist[client.id].transferRxPrevious;
this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
this.clientsPersist[client.id].transferTxCurrent = client.transferTx - this.clientsPersist[client.id].transferTxPrevious;
this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
// Debug
// client.transferRx = this.clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
// client.transferTx = this.clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
this.clientsPersist[client.id].transferRxHistory.push(this.clientsPersist[client.id].transferRxCurrent);
this.clientsPersist[client.id].transferRxHistory.shift();
if (updateCharts) {
this.clientsPersist[client.id].transferRxCurrent = client.transferRx - this.clientsPersist[client.id].transferRxPrevious;
this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
this.clientsPersist[client.id].transferTxCurrent = client.transferTx - this.clientsPersist[client.id].transferTxPrevious;
this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
this.clientsPersist[client.id].transferTxHistory.push(this.clientsPersist[client.id].transferTxCurrent);
this.clientsPersist[client.id].transferTxHistory.shift();
this.clientsPersist[client.id].transferRxHistory.push(this.clientsPersist[client.id].transferRxCurrent);
this.clientsPersist[client.id].transferRxHistory.shift();
this.clientsPersist[client.id].chartMax = Math.max(...this.clientsPersist[client.id].transferTxHistory, ...this.clientsPersist[client.id].transferRxHistory);
this.clientsPersist[client.id].transferTxHistory.push(this.clientsPersist[client.id].transferTxCurrent);
this.clientsPersist[client.id].transferTxHistory.shift();
}
client.transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent;
client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent;
client.chartOptions = this.clientsPersist[client.id].chartOptions;
client.chartSeries = [{
name: 'tx',
data: this.clientsPersist[client.id].transferTxHistory,
}, {
name: 'rx',
data: this.clientsPersist[client.id].transferRxHistory,
}];
client.transferTxHistory = this.clientsPersist[client.id].transferTxHistory;
client.transferRxHistory = this.clientsPersist[client.id].transferRxHistory;
client.transferMax = Math.max(...client.transferTxHistory, ...client.transferRxHistory);
client.hoverTx = this.clientsPersist[client.id].hoverTx;
client.hoverRx = this.clientsPersist[client.id].hoverRx;
return client;
});
@ -259,7 +252,9 @@ new Vue({
.then(session => {
this.authenticated = session.authenticated;
this.requiresPassword = session.requiresPassword;
this.refresh().catch(err => {
this.refresh({
updateCharts: true,
}).catch(err => {
alert(err.message || err.toString());
});
})
@ -268,7 +263,9 @@ new Vue({
});
setInterval(() => {
this.refresh().catch(console.error);
this.refresh({
updateCharts: true,
}).catch(console.error);
}, 1000);
Promise.resolve().then(async () => {