forks/amnezia-wg-easy
1
0
Fork 0
forked from mirrors/amnezia-wg-easy
Code Pull requests Activity

Merge branch 'master' into master

Browse source
This commit is contained in:
cany748 2022-06-20 17:59:29 +07:00 • committed by GitHub
commit 02cdb21405
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 69 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/www/index.html
View file

@ -11,11 +11,17 @@
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<style>
[v-cloak] {
display: none;
}
</style>
<body class="bg-gray-50">
<div id="app">
<div class="container mx-auto max-w-3xl">
<div v-cloak class="container mx-auto max-w-3xl">
<div v-if="authenticated === true">
<span v-if="requiresPassword"
@ -88,13 +94,8 @@
class="relative overflow-hidden border-b border-gray-100 border-solid">
<!-- Chart -->
<div class="absolute z-0 bottom-0 left-0 right-0" style="top: 60%;">
<apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.transferTxSeries">
</apexchart>
</div>
<div class="absolute z-0 top-0 left-0 right-0" style="bottom: 60%;">
<apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.transferRxSeries"
style="transform: scaleY(-1);">
<div class="absolute z-0 bottom-0 left-0 right-0" style="width: 100%; height: 30%;">
<apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.chartSeries">
</apexchart>
</div>
@ -117,7 +118,7 @@
<div class="flex-grow">
<!-- Name -->
<div class="text-gray-700 group" :title="$t('createdAt') + dateTime(new Date(client.createdAt))">
<div class="text-gray-700 group" :title="$t('createdOn') + dateTime(new Date(client.createdOn))">
<!-- Show -->
<input v-show="clientEditNameId === client.id" v-model="clientEditName"
@ -170,7 +171,7 @@
</span>
<!-- Transfer TX -->
<span v-if="client.transferTx":title="$t('totalDownload') + bytes(client.transferTx)">
<span v-if="client.transferTx" :title="$t('totalDownload') + bytes(client.transferTx)">
·
<svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
@ -480,7 +481,7 @@
</div>
<p class="text-center m-10 text-gray-300 text-xs">{{$t("madeBy")}} <a target="_blank" class="hover:underline"
<p v-cloak class="text-center m-10 text-gray-300 text-xs">{{$t("madeBy")}} <a target="_blank" class="hover:underline"
href="https://emilenijssen.nl/?ref=wg-easy">Emile Nijssen</a> · <a class="hover:underline"
href="https://github.com/sponsors/WeeJeWel" target="_blank">{{$t("donate")}}</a> · <a class="hover:underline"
href="https://github.com/weejewel/wg-easy" target="_blank">GitHub</a></p>

2
src/www/js/api.js
View file

@ -6,7 +6,7 @@
class API {
async call({ method, path, body }) {
const res = await fetch(`/api${path}`, {
const res = await fetch(`./api${path}`, {
method,
headers: {
'Content-Type': 'application/json',

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

@ -60,31 +60,36 @@ new Vue({
chartOptions: {
chart: {
background: 'transparent',
type: 'area',
type: 'bar',
stacked: false,
toolbar: {
show: false,
},
animations: {
enabled: false,
},
},
fill: {
type: 'gradient',
},
colors: ['#CCCCCC'],
colors: [
'#DDDDDD', // rx
'#EEEEEE', // tx
],
dataLabels: {
enabled: false,
},
stroke: {
curve: 'smooth',
width: 0,
plotOptions: {
bar: {
horizontal: false,
},
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
show: true,
},
axisBorder: {
show: false,
show: true,
},
},
yaxis: {
@ -139,9 +144,9 @@ new Vue({
if (!this.clientsPersist[client.id]) {
this.clientsPersist[client.id] = {};
this.clientsPersist[client.id].transferRxHistory = Array(20).fill(0);
this.clientsPersist[client.id].transferRxHistory = Array(100).fill(0);
this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
this.clientsPersist[client.id].transferTxHistory = Array(20).fill(0);
this.clientsPersist[client.id].transferTxHistory = Array(100).fill(0);
this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
this.clientsPersist[client.id].chartOptions = {
@ -164,22 +169,20 @@ new Vue({
this.clientsPersist[client.id].transferTxHistory.push(this.clientsPersist[client.id].transferTxCurrent);
this.clientsPersist[client.id].transferTxHistory.shift();
this.clientsPersist[client.id].chartMax = Math.max(...this.clientsPersist[client.id].transferTxHistory, ...this.clientsPersist[client.id].transferRxHistory);
client.transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent;
client.transferTxSeries = [{
client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent;
client.chartOptions = this.clientsPersist[client.id].chartOptions;
client.chartSeries = [{
name: 'tx',
data: this.clientsPersist[client.id].transferTxHistory,
}];
client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent;
client.transferRxSeries = [{
}, {
name: 'rx',
data: this.clientsPersist[client.id].transferRxHistory,
}];
this.clientsPersist[client.id].chartMax = Math.max(...this.clientsPersist[client.id].transferTxHistory, ...this.clientsPersist[client.id].transferRxHistory);
client.chartOptions = this.clientsPersist[client.id].chartOptions;
return client;
});
},