diff --git a/README.md b/README.md index 6ae66b3..a116813 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,7 @@ These options can be configured by setting environment variables using `-e KEY=" > If you change `WG_PORT`, make sure to also change the exposed port. -# Updating +## Updating To update to the latest version, simply run: @@ -103,4 +103,8 @@ docker rm wg-easy docker pull weejewel/wg-easy ``` -And then run the `docker run -d \ ...` command above again. \ No newline at end of file +And then run the `docker run -d \ ...` command above again. + +## Common Use Cases + +* [Using WireGuard-Easy with Pi-Hole](https://github.com/WeeJeWel/wg-easy/wiki/Using-WireGuard-Easy-with-Pi-Hole) diff --git a/docs/changelog.json b/docs/changelog.json index 1831e98..ebccbb3 100644 --- a/docs/changelog.json +++ b/docs/changelog.json @@ -3,5 +3,6 @@ "2": "You can now rename a client, and update the address. Enjoy!", "3": "Many improvements and small changes. Enjoy!", "4": "Now with pretty charts for client's network speed. Enjoy!", - "5": "Many small improvements & feature requests. Enjoy!" + "5": "Many small improvements & feature requests. Enjoy!", + "6": "Many small performance improvements & bug fixes. Enjoy!" } \ No newline at end of file diff --git a/src/lib/Server.js b/src/lib/Server.js index e204fa5..c893d7d 100644 --- a/src/lib/Server.js +++ b/src/lib/Server.js @@ -62,7 +62,7 @@ module.exports = class Server { req.session.authenticated = true; req.session.save(); - debug(`New Session: ${req.session.id})`); + debug(`New Session: ${req.session.id}`); })) // WireGuard @@ -99,7 +99,11 @@ module.exports = class Server { const { clientId } = req.params; const client = await WireGuard.getClient({ clientId }); const config = await WireGuard.getClientConfiguration({ clientId }); - const configName = client.name.replace(/[^a-zA-Z0-9_=+.-]/g, '-').replace(/(-{2,}|-$)/g, '-').replace(/-$/, '').substring(0, 32); + const configName = client.name + .replace(/[^a-zA-Z0-9_=+.-]/g, '-') + .replace(/(-{2,}|-$)/g, '-') + .replace(/-$/, '') + .substring(0, 32); res.header('Content-Disposition', `attachment; filename="${configName}.conf"`); res.header('Content-Type', 'text/plain'); res.send(config); diff --git a/src/package.json b/src/package.json index b65bc22..ef48ef2 100644 --- a/src/package.json +++ b/src/package.json @@ -1,5 +1,5 @@ { - "release": 5, + "release": 6, "name": "wg-easy", "version": "1.0.0", "description": "", diff --git a/src/www/index.html b/src/www/index.html index 4080c51..7e443de 100644 --- a/src/www/index.html +++ b/src/www/index.html @@ -11,11 +11,17 @@ + +
-
+
-
- - -
-
- +
+
@@ -101,7 +102,7 @@
-
+
- + · @@ -179,7 +180,7 @@ + :title="'Last seen on ' + dateTime(new Date(client.latestHandshakeAt))"> · {{new Date(client.latestHandshakeAt) | timeago}}
@@ -465,7 +466,7 @@
-

Made by Made by Emile Nijssen · Donate · GitHub

diff --git a/src/www/js/api.js b/src/www/js/api.js index accbb57..84885f1 100644 --- a/src/www/js/api.js +++ b/src/www/js/api.js @@ -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', diff --git a/src/www/js/app.js b/src/www/js/app.js index 137fb22..67c6842 100644 --- a/src/www/js/app.js +++ b/src/www/js/app.js @@ -51,31 +51,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: { @@ -130,9 +135,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 = { @@ -155,22 +160,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; }); },