From 5b2a9308f59d65d550a6ed9be48094ebbe146431 Mon Sep 17 00:00:00 2001 From: Sergei Birukov Date: Tue, 6 Feb 2024 17:45:33 +0300 Subject: [PATCH 01/15] Update client list layout and show total client RX/TX Update client layout to show current and total rx/tx values in columns. Update tablet and mobile layout --- src/tailwind.config.js | 10 +++ src/www/css/app.css | 62 ++++++++++++++- src/www/index.html | 170 +++++++++++++++++++++++------------------ 3 files changed, 166 insertions(+), 76 deletions(-) diff --git a/src/tailwind.config.js b/src/tailwind.config.js index 0594481d..19e648df 100644 --- a/src/tailwind.config.js +++ b/src/tailwind.config.js @@ -5,4 +5,14 @@ module.exports = { darkMode: 'media', content: ['./www/**/*.{html,js}'], + theme: { + screens: { + 'xs': '576px', + 'sm': '640px', + 'md': '768px', + 'lg': '1024px', + 'xl': '1280px', + '2xl': '1536px', + } + } }; diff --git a/src/www/css/app.css b/src/www/css/app.css index 4f4e21dd..cbb94d2e 100644 --- a/src/www/css/app.css +++ b/src/www/css/app.css @@ -1,5 +1,5 @@ /* -! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com +! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com */ /* @@ -548,6 +548,12 @@ video { width: 100%; } +@media (min-width: 576px) { + .container { + max-width: 576px; + } +} + @media (min-width: 640px) { .container { max-width: 640px; @@ -676,6 +682,10 @@ video { margin-bottom: 4rem; } +.-ml-4 { + margin-left: -1rem; +} + .mb-10 { margin-bottom: 2.5rem; } @@ -700,8 +710,16 @@ video { margin-right: 0.5rem; } -.mr-5 { - margin-right: 1.25rem; +.mr-4 { + margin-right: 1rem; +} + +.mt-0 { + margin-top: 0px; +} + +.mt-0\.5 { + margin-top: 0.125rem; } .mt-10 { @@ -720,6 +738,10 @@ video { margin-top: 1.25rem; } +.mt-px { + margin-top: 1px; +} + .block { display: block; } @@ -840,6 +862,10 @@ video { width: 100%; } +.min-w-24 { + min-width: 6rem; +} + .max-w-3xl { max-width: 48rem; } @@ -925,6 +951,18 @@ video { gap: 0.25rem; } +.gap-2 { + gap: 0.5rem; +} + +.gap-3 { + gap: 0.75rem; +} + +.self-start { + align-self: flex-start; +} + .overflow-hidden { overflow: hidden; } @@ -1421,6 +1459,12 @@ video { opacity: 1; } +@media (min-width: 576px) { + .xs\:flex-row { + flex-direction: row; + } +} + @media (min-width: 640px) { .sm\:mx-0 { margin-left: 0px; @@ -1488,10 +1532,18 @@ video { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } + .sm\:flex-row { + flex-direction: row; + } + .sm\:flex-row-reverse { flex-direction: row-reverse; } + .sm\:flex-nowrap { + flex-wrap: nowrap; + } + .sm\:items-start { align-items: flex-start; } @@ -1528,6 +1580,10 @@ video { } @media (min-width: 768px) { + .md\:ml-0 { + margin-left: 0px; + } + .md\:inline-block { display: inline-block; } diff --git a/src/www/index.html b/src/www/index.html index 2edf3c70..412d26a0 100644 --- a/src/www/index.html +++ b/src/www/index.html @@ -89,11 +89,16 @@ style="transform: scaleY(-1);"> -
-
-
- + +
+
+ + + + +
+ @@ -108,52 +113,26 @@
-
+ +
-
- - - - {{client.name}} - - - - - - - -
- - -
- - - +
+
- - {{client.address}} + + {{client.name}} - - +
+ +
+ + + + {{client.address}} + + + + + + + + + + + {{new Date(client.latestHandshakeAt) | timeago}} + +
+
+ + +
- - · - - - - {{client.transferTxCurrent | bytes}}/s - +
+ + + + +
+ {{client.transferTxCurrent | + bytes}}/s + +
{{bytes(client.transferTx)}} +
+ + +
- - · - - - - {{client.transferRxCurrent | bytes}}/s - - - - - · {{new Date(client.latestHandshakeAt) | timeago}} - +
+ + + + + +
+ {{client.transferRxCurrent | + bytes}}/s + +
{{bytes(client.transferRx)}} +
+ +
+
+
@@ -509,4 +533,4 @@ - + \ No newline at end of file From fa392cf2603df770b9c006f9fa44a3d6e080d303 Mon Sep 17 00:00:00 2001 From: Sergei Birukov Date: Tue, 13 Feb 2024 12:53:32 +0300 Subject: [PATCH 02/15] Add UI_DETAILED_STATS variable Show detailed RX / TX stats when UI_DETAILED_STATS = true Add api method to get UI_DETAILED_STATS value on frontend --- src/config.js | 1 + src/lib/Server.js | 4 ++++ src/www/index.html | 32 ++++++++++++++++++++++++-------- src/www/js/api.js | 7 +++++++ src/www/js/app.js | 3 +++ 5 files changed, 39 insertions(+), 8 deletions(-) diff --git a/src/config.js b/src/config.js index 09fbcf3e..22778432 100644 --- a/src/config.js +++ b/src/config.js @@ -29,3 +29,4 @@ iptables -A FORWARD -o wg0 -j ACCEPT; module.exports.WG_PRE_DOWN = process.env.WG_PRE_DOWN || ''; module.exports.WG_POST_DOWN = process.env.WG_POST_DOWN || ''; module.exports.LANG = process.env.LANG || 'en'; +module.exports.UI_DETAILED_STATS = process.env.UI_DETAILED_STATS || 'false'; diff --git a/src/lib/Server.js b/src/lib/Server.js index 1f00a6b4..3a419aa8 100644 --- a/src/lib/Server.js +++ b/src/lib/Server.js @@ -18,6 +18,7 @@ const { RELEASE, PASSWORD, LANG, + UI_DETAILED_STATS, } = require('../config'); module.exports = class Server { @@ -44,6 +45,9 @@ module.exports = class Server { .get('/api/lang', (Util.promisify(async () => { return LANG; }))) + .get('/api/ui-detailed-stats', (Util.promisify(async () => { + return UI_DETAILED_STATS === 'true' ? true : false; + }))) // Authentication .get('/api/session', Util.promisify(async (req) => { diff --git a/src/www/index.html b/src/www/index.html index 412d26a0..b63f158f 100644 --- a/src/www/index.html +++ b/src/www/index.html @@ -17,11 +17,8 @@ -
-
-
- -
@@ -166,16 +161,37 @@ + + + · + + + + {{client.transferTxCurrent | bytes}}/s + + + + + · + + + + {{client.transferRxCurrent | bytes}}/s + - - {{new Date(client.latestHandshakeAt) | timeago}} + {{!uiDetailedStats ? " · " : ""}}{{new Date(client.latestHandshakeAt) | timeago}}
-
diff --git a/src/www/js/api.js b/src/www/js/api.js index 366aeaa1..620a930b 100644 --- a/src/www/js/api.js +++ b/src/www/js/api.js @@ -43,6 +43,13 @@ class API { }); } + async getUiDetailedStats() { + return this.call({ + method: 'get', + path: '/ui-detailed-stats', + }); + } + async getSession() { return this.call({ method: 'get', diff --git a/src/www/js/app.js b/src/www/js/app.js index 45f7118b..8dec5052 100644 --- a/src/www/js/app.js +++ b/src/www/js/app.js @@ -53,6 +53,7 @@ new Vue({ latestRelease: null, isDark: null, + uiDetailedStats: false, chartOptions: { chart: { @@ -299,6 +300,8 @@ new Vue({ i18n.locale = lang; } + this.uiDetailedStats = await this.api.getUiDetailedStats(); + const currentRelease = await this.api.getRelease(); const latestRelease = await fetch('https://wg-easy.github.io/wg-easy/changelog.json') .then((res) => res.json()) From 45147ee7c4a5b5c300a101b2e2f92d625dc50a0d Mon Sep 17 00:00:00 2001 From: Sergei Birukov Date: Tue, 13 Feb 2024 19:30:34 +0300 Subject: [PATCH 03/15] Fix lint errors --- src/lib/Server.js | 2 +- src/tailwind.config.js | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/lib/Server.js b/src/lib/Server.js index 3a419aa8..fd09db99 100644 --- a/src/lib/Server.js +++ b/src/lib/Server.js @@ -46,7 +46,7 @@ module.exports = class Server { return LANG; }))) .get('/api/ui-detailed-stats', (Util.promisify(async () => { - return UI_DETAILED_STATS === 'true' ? true : false; + return UI_DETAILED_STATS === 'true'; }))) // Authentication diff --git a/src/tailwind.config.js b/src/tailwind.config.js index 19e648df..483d6ada 100644 --- a/src/tailwind.config.js +++ b/src/tailwind.config.js @@ -7,12 +7,12 @@ module.exports = { content: ['./www/**/*.{html,js}'], theme: { screens: { - 'xs': '576px', - 'sm': '640px', - 'md': '768px', - 'lg': '1024px', - 'xl': '1280px', + xs: '576px', + sm: '640px', + md: '768px', + lg: '1024px', + xl: '1280px', '2xl': '1536px', - } - } + }, + }, }; From 081e3eef7587ee5ed4dd2d5d9ff9c177b5935215 Mon Sep 17 00:00:00 2001 From: Sergei Birukov Date: Wed, 14 Feb 2024 22:06:30 +0300 Subject: [PATCH 04/15] Update Readme and docker-compose --- README.md | 1 + docker-compose.yml | 1 + 2 files changed, 2 insertions(+) diff --git a/README.md b/README.md index 5cdb4034..a7712045 100644 --- a/README.md +++ b/README.md @@ -98,6 +98,7 @@ These options can be configured by setting environment variables using `-e KEY=" | `WG_PRE_DOWN` | `...` | - | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L27) for the default value. | | `WG_POST_DOWN` | `...` | `iptables ...` | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L28) for the default value. | | `LANG` | `en` | `de` | Web UI language (Supports: en, ru, tr, no, pl, fr, de, ca, es). | +| `UI_DETAILED_STATS` | `false` | `true` | Enable detailed RX / TX client stats in Web UI | > If you change `WG_PORT`, make sure to also change the exposed port. diff --git a/docker-compose.yml b/docker-compose.yml index 3336589c..78d52499 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -24,6 +24,7 @@ services: # - WG_POST_UP=echo "Post Up" > /etc/wireguard/post-up.txt # - WG_PRE_DOWN=echo "Pre Down" > /etc/wireguard/pre-down.txt # - WG_POST_DOWN=echo "Post Down" > /etc/wireguard/post-down.txt + # - UI_DETAILED_STATS=true image: ghcr.io/wg-easy/wg-easy container_name: wg-easy From a522a442ae705c83d216d146a5d81e190f575303 Mon Sep 17 00:00:00 2001 From: Sergei Birukov Date: Sat, 17 Feb 2024 15:22:43 +0300 Subject: [PATCH 05/15] Change layout wrapping. Fix last seen --- src/tailwind.config.js | 1 + src/www/css/app.css | 55 ++++++++++++++++++++++++------------------ src/www/index.html | 18 +++++++------- 3 files changed, 41 insertions(+), 33 deletions(-) diff --git a/src/tailwind.config.js b/src/tailwind.config.js index 483d6ada..8070b0cd 100644 --- a/src/tailwind.config.js +++ b/src/tailwind.config.js @@ -7,6 +7,7 @@ module.exports = { content: ['./www/**/*.{html,js}'], theme: { screens: { + xxs: '450px', xs: '576px', sm: '640px', md: '768px', diff --git a/src/www/css/app.css b/src/www/css/app.css index cbb94d2e..19b9df72 100644 --- a/src/www/css/app.css +++ b/src/www/css/app.css @@ -548,6 +548,12 @@ video { width: 100%; } +@media (min-width: 450px) { + .container { + max-width: 450px; + } +} + @media (min-width: 576px) { .container { max-width: 576px; @@ -710,10 +716,6 @@ video { margin-right: 0.5rem; } -.mr-4 { - margin-right: 1rem; -} - .mt-0 { margin-top: 0px; } @@ -862,8 +864,8 @@ video { width: 100%; } -.min-w-24 { - min-width: 6rem; +.min-w-20 { + min-width: 5rem; } .max-w-3xl { @@ -878,6 +880,10 @@ video { flex-shrink: 0; } +.shrink-0 { + flex-shrink: 0; +} + .flex-grow { flex-grow: 1; } @@ -1151,10 +1157,6 @@ video { padding-bottom: 3rem; } -.pb-2 { - padding-bottom: 0.5rem; -} - .pb-20 { padding-bottom: 5rem; } @@ -1459,8 +1461,12 @@ video { opacity: 1; } -@media (min-width: 576px) { - .xs\:flex-row { +@media (min-width: 450px) { + .xxs\:ml-0 { + margin-left: 0px; + } + + .xxs\:flex-row { flex-direction: row; } } @@ -1532,18 +1538,10 @@ video { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } - .sm\:flex-row { - flex-direction: row; - } - .sm\:flex-row-reverse { flex-direction: row-reverse; } - .sm\:flex-nowrap { - flex-wrap: nowrap; - } - .sm\:items-start { align-items: flex-start; } @@ -1580,18 +1578,22 @@ video { } @media (min-width: 768px) { - .md\:ml-0 { - margin-left: 0px; - } - .md\:inline-block { display: inline-block; } + .md\:min-w-24 { + min-width: 6rem; + } + .md\:flex-row { flex-direction: row; } + .md\:gap-4 { + gap: 1rem; + } + .md\:px-0 { padding-left: 0px; padding-right: 0px; @@ -1600,6 +1602,11 @@ video { .md\:pb-0 { padding-bottom: 0px; } + + .md\:text-base { + font-size: 1rem; + line-height: 1.5rem; + } } @media (prefers-color-scheme: dark) { diff --git a/src/www/index.html b/src/www/index.html index b63f158f..a5992bff 100644 --- a/src/www/index.html +++ b/src/www/index.html @@ -87,11 +87,11 @@
-
-
+
+
-
+
-
+
-
@@ -183,7 +183,7 @@ {{client.transferRxCurrent | bytes}}/s - {{!uiDetailedStats ? " · " : ""}}{{new Date(client.latestHandshakeAt) | timeago}} @@ -192,10 +192,10 @@
+ class="flex gap-2 items-center shrink-0 text-gray-400 dark:text-neutral-400 text-xs mt-px -ml-4 xxs:ml-0"> -
+
@@ -214,7 +214,7 @@
-
+
Date: Sat, 17 Feb 2024 17:47:52 +0300 Subject: [PATCH 06/15] Wrap layout on <640px --- src/www/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/www/index.html b/src/www/index.html index a5992bff..20160e5f 100644 --- a/src/www/index.html +++ b/src/www/index.html @@ -87,7 +87,7 @@
-
+
From c47ade71cc440506224c220d45d499079c02443d Mon Sep 17 00:00:00 2001 From: Sergei Birukov Date: Sat, 17 Feb 2024 21:48:43 +0300 Subject: [PATCH 07/15] Fix some bugs json error update css some refactoring for getUiDetailedStats --- docs/changelog.json | 2 +- src/www/css/app.css | 8 ++++---- src/www/js/app.js | 13 ++++++++++--- 3 files changed, 15 insertions(+), 8 deletions(-) diff --git a/docs/changelog.json b/docs/changelog.json index e9d1b9e5..fe4431f4 100644 --- a/docs/changelog.json +++ b/docs/changelog.json @@ -8,6 +8,6 @@ "7": "Improved the look & performance of the upload/download chart.", "8": "Updated to Node.js v18.", "9": "Fixed issue running on devices with older kernels.", - "10": "Added sessionless HTTP API auth & automatic dark mode." + "10": "Added sessionless HTTP API auth & automatic dark mode.", "11": "Multilanguage Support & various bugfixes" } diff --git a/src/www/css/app.css b/src/www/css/app.css index 19b9df72..84dbce7b 100644 --- a/src/www/css/app.css +++ b/src/www/css/app.css @@ -1538,6 +1538,10 @@ video { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } + .sm\:flex-row { + flex-direction: row; + } + .sm\:flex-row-reverse { flex-direction: row-reverse; } @@ -1586,10 +1590,6 @@ video { min-width: 6rem; } - .md\:flex-row { - flex-direction: row; - } - .md\:gap-4 { gap: 1rem; } diff --git a/src/www/js/app.js b/src/www/js/app.js index 8dec5052..675d1215 100644 --- a/src/www/js/app.js +++ b/src/www/js/app.js @@ -293,6 +293,15 @@ new Vue({ }).catch(console.error); }, 1000); + this.api.getUiDetailedStats() + .then((res) => { + this.uiDetailedStats = res; + }) + .catch(() => { + console.log('Failed to get ui-detailed-stats'); + this.uiDetailedStats = false; + }); + Promise.resolve().then(async () => { const lang = await this.api.getLang(); if (lang !== localStorage.getItem('lang') && i18n.availableLocales.includes(lang)) { @@ -300,8 +309,6 @@ new Vue({ i18n.locale = lang; } - this.uiDetailedStats = await this.api.getUiDetailedStats(); - const currentRelease = await this.api.getRelease(); const latestRelease = await fetch('https://wg-easy.github.io/wg-easy/changelog.json') .then((res) => res.json()) @@ -324,6 +331,6 @@ new Vue({ this.currentRelease = currentRelease; this.latestRelease = latestRelease; - }).catch(console.error); + }).catch((err) => console.error(err)); }, }); From 2c05b7989f12328c901ea59cd84c64c566d8d70b Mon Sep 17 00:00:00 2001 From: Sergei Birukov Date: Thu, 22 Feb 2024 21:01:01 +0300 Subject: [PATCH 08/15] Align stats to the right on mobile --- src/www/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/www/index.html b/src/www/index.html index 20160e5f..b11a93c0 100644 --- a/src/www/index.html +++ b/src/www/index.html @@ -192,7 +192,7 @@
+ class="flex gap-2 items-center shrink-0 text-gray-400 dark:text-neutral-400 text-xs mt-px justify-end">
From a40dbe130ea39d06ff6c4ba5734d7f1893ee5aeb Mon Sep 17 00:00:00 2001 From: Peter Lewis Date: Sun, 25 Feb 2024 21:42:51 +0000 Subject: [PATCH 09/15] detailed -> usage --- README.md | 2 +- docker-compose.yml | 2 +- src/config.js | 2 +- src/lib/Server.js | 6 +++--- src/www/index.html | 8 ++++---- src/www/js/api.js | 4 ++-- src/www/js/app.js | 10 +++++----- 7 files changed, 17 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index a7712045..edae5488 100644 --- a/README.md +++ b/README.md @@ -98,7 +98,7 @@ These options can be configured by setting environment variables using `-e KEY=" | `WG_PRE_DOWN` | `...` | - | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L27) for the default value. | | `WG_POST_DOWN` | `...` | `iptables ...` | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L28) for the default value. | | `LANG` | `en` | `de` | Web UI language (Supports: en, ru, tr, no, pl, fr, de, ca, es). | -| `UI_DETAILED_STATS` | `false` | `true` | Enable detailed RX / TX client stats in Web UI | +| `UI_USAGE_STATS` | `false` | `true` | Enable detailed RX / TX client stats in Web UI | > If you change `WG_PORT`, make sure to also change the exposed port. diff --git a/docker-compose.yml b/docker-compose.yml index 59594010..be54a22a 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -24,7 +24,7 @@ services: # - WG_POST_UP=echo "Post Up" > /etc/wireguard/post-up.txt # - WG_PRE_DOWN=echo "Pre Down" > /etc/wireguard/pre-down.txt # - WG_POST_DOWN=echo "Post Down" > /etc/wireguard/post-down.txt - # - UI_DETAILED_STATS=true + # - UI_USAGE_STATS=true image: ghcr.io/wg-easy/wg-easy container_name: wg-easy diff --git a/src/config.js b/src/config.js index 22778432..14fde767 100644 --- a/src/config.js +++ b/src/config.js @@ -29,4 +29,4 @@ iptables -A FORWARD -o wg0 -j ACCEPT; module.exports.WG_PRE_DOWN = process.env.WG_PRE_DOWN || ''; module.exports.WG_POST_DOWN = process.env.WG_POST_DOWN || ''; module.exports.LANG = process.env.LANG || 'en'; -module.exports.UI_DETAILED_STATS = process.env.UI_DETAILED_STATS || 'false'; +module.exports.UI_USAGE_STATS = process.env.UI_USAGE_STATS || 'false'; diff --git a/src/lib/Server.js b/src/lib/Server.js index fd09db99..ccead598 100644 --- a/src/lib/Server.js +++ b/src/lib/Server.js @@ -18,7 +18,7 @@ const { RELEASE, PASSWORD, LANG, - UI_DETAILED_STATS, + UI_USAGE_STATS, } = require('../config'); module.exports = class Server { @@ -45,8 +45,8 @@ module.exports = class Server { .get('/api/lang', (Util.promisify(async () => { return LANG; }))) - .get('/api/ui-detailed-stats', (Util.promisify(async () => { - return UI_DETAILED_STATS === 'true'; + .get('/api/ui-usage-stats', (Util.promisify(async () => { + return UI_USAGE_STATS === 'true'; }))) // Authentication diff --git a/src/www/index.html b/src/www/index.html index 2dc6aed4..4c5b239f 100644 --- a/src/www/index.html +++ b/src/www/index.html @@ -162,7 +162,7 @@ - + · - + · - {{!uiDetailedStats ? " · " : ""}}{{new Date(client.latestHandshakeAt) | timeago}} + {{!uiUsageStats ? " · " : ""}}{{new Date(client.latestHandshakeAt) | timeago}}
-
diff --git a/src/www/js/api.js b/src/www/js/api.js index 620a930b..c4440ef2 100644 --- a/src/www/js/api.js +++ b/src/www/js/api.js @@ -43,10 +43,10 @@ class API { }); } - async getUiDetailedStats() { + async getuiUsageStats() { return this.call({ method: 'get', - path: '/ui-detailed-stats', + path: '/ui-usage-stats', }); } diff --git a/src/www/js/app.js b/src/www/js/app.js index c110d2a9..cc6dd5f1 100644 --- a/src/www/js/app.js +++ b/src/www/js/app.js @@ -53,7 +53,7 @@ new Vue({ latestRelease: null, isDark: null, - uiDetailedStats: false, + uiUsageStats: false, chartOptions: { chart: { @@ -293,13 +293,13 @@ new Vue({ }).catch(console.error); }, 1000); - this.api.getUiDetailedStats() + this.api.getuiUsageStats() .then((res) => { - this.uiDetailedStats = res; + this.uiUsageStats = res; }) .catch(() => { - console.log('Failed to get ui-detailed-stats'); - this.uiDetailedStats = false; + console.log('Failed to get ui-usage-stats'); + this.uiUsageStats = false; }); Promise.resolve().then(async () => { From f6b0085c1b13c6e2905050aa9bfc62c465d4f6b7 Mon Sep 17 00:00:00 2001 From: Peter Lewis Date: Sun, 25 Feb 2024 21:47:56 +0000 Subject: [PATCH 10/15] fix regression --- README.md | 2 +- src/www/css/app.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index edae5488..e44f105c 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,7 @@ These options can be configured by setting environment variables using `-e KEY=" | `WG_POST_UP` | `...` | `iptables ...` | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L20) for the default value. | | `WG_PRE_DOWN` | `...` | - | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L27) for the default value. | | `WG_POST_DOWN` | `...` | `iptables ...` | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L28) for the default value. | -| `LANG` | `en` | `de` | Web UI language (Supports: en, ru, tr, no, pl, fr, de, ca, es). | +| `LANG` | `en` | `de` | Web UI language (Supports: en, ru, tr, no, pl, fr, de, ca, es, vi, nl, is, chs, cht,) | | `UI_USAGE_STATS` | `false` | `true` | Enable detailed RX / TX client stats in Web UI | > If you change `WG_PORT`, make sure to also change the exposed port. diff --git a/src/www/css/app.css b/src/www/css/app.css index 20b39b51..9eda62bb 100644 --- a/src/www/css/app.css +++ b/src/www/css/app.css @@ -1,5 +1,5 @@ /* -! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com +! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */ /* From 117d713ee18a809870fb6da2a2009bd9c6d476c3 Mon Sep 17 00:00:00 2001 From: Peter Lewis Date: Sun, 25 Feb 2024 21:48:33 +0000 Subject: [PATCH 11/15] fix regression --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e44f105c..07881ff2 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,7 @@ These options can be configured by setting environment variables using `-e KEY=" | `WG_POST_UP` | `...` | `iptables ...` | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L20) for the default value. | | `WG_PRE_DOWN` | `...` | - | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L27) for the default value. | | `WG_POST_DOWN` | `...` | `iptables ...` | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L28) for the default value. | -| `LANG` | `en` | `de` | Web UI language (Supports: en, ru, tr, no, pl, fr, de, ca, es, vi, nl, is, chs, cht,) | +| `LANG` | `en` | `de` | Web UI language (Supports: en, ru, tr, no, pl, fr, de, ca, es, vi, nl, is, chs, cht,). | | `UI_USAGE_STATS` | `false` | `true` | Enable detailed RX / TX client stats in Web UI | > If you change `WG_PORT`, make sure to also change the exposed port. From ebc5173bd0ff4b57403c5b2ff28bdcddee9b627c Mon Sep 17 00:00:00 2001 From: Peter Lewis Date: Sun, 25 Feb 2024 22:02:53 +0000 Subject: [PATCH 12/15] usage -> traffic --- README.md | 2 +- docker-compose.yml | 2 +- src/config.js | 2 +- src/lib/Server.js | 6 +++--- src/www/index.html | 8 ++++---- src/www/js/api.js | 4 ++-- src/www/js/app.js | 10 +++++----- 7 files changed, 17 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 07881ff2..45164ca4 100644 --- a/README.md +++ b/README.md @@ -98,7 +98,7 @@ These options can be configured by setting environment variables using `-e KEY=" | `WG_PRE_DOWN` | `...` | - | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L27) for the default value. | | `WG_POST_DOWN` | `...` | `iptables ...` | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L28) for the default value. | | `LANG` | `en` | `de` | Web UI language (Supports: en, ru, tr, no, pl, fr, de, ca, es, vi, nl, is, chs, cht,). | -| `UI_USAGE_STATS` | `false` | `true` | Enable detailed RX / TX client stats in Web UI | +| `UI_TRAFFIC_STATS` | `false` | `true` | Enable detailed RX / TX client stats in Web UI | > If you change `WG_PORT`, make sure to also change the exposed port. diff --git a/docker-compose.yml b/docker-compose.yml index be54a22a..afe1be88 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -24,7 +24,7 @@ services: # - WG_POST_UP=echo "Post Up" > /etc/wireguard/post-up.txt # - WG_PRE_DOWN=echo "Pre Down" > /etc/wireguard/pre-down.txt # - WG_POST_DOWN=echo "Post Down" > /etc/wireguard/post-down.txt - # - UI_USAGE_STATS=true + # - UI_TRAFFIC_STATS=true image: ghcr.io/wg-easy/wg-easy container_name: wg-easy diff --git a/src/config.js b/src/config.js index 14fde767..4d71f96c 100644 --- a/src/config.js +++ b/src/config.js @@ -29,4 +29,4 @@ iptables -A FORWARD -o wg0 -j ACCEPT; module.exports.WG_PRE_DOWN = process.env.WG_PRE_DOWN || ''; module.exports.WG_POST_DOWN = process.env.WG_POST_DOWN || ''; module.exports.LANG = process.env.LANG || 'en'; -module.exports.UI_USAGE_STATS = process.env.UI_USAGE_STATS || 'false'; +module.exports.UI_TRAFFIC_STATS = process.env.UI_TRAFFIC_STATS || 'false'; diff --git a/src/lib/Server.js b/src/lib/Server.js index ccead598..13a5d51d 100644 --- a/src/lib/Server.js +++ b/src/lib/Server.js @@ -18,7 +18,7 @@ const { RELEASE, PASSWORD, LANG, - UI_USAGE_STATS, + UI_TRAFFIC_STATS, } = require('../config'); module.exports = class Server { @@ -45,8 +45,8 @@ module.exports = class Server { .get('/api/lang', (Util.promisify(async () => { return LANG; }))) - .get('/api/ui-usage-stats', (Util.promisify(async () => { - return UI_USAGE_STATS === 'true'; + .get('/api/ui-traffic-stats', (Util.promisify(async () => { + return UI_TRAFFIC_STATS === 'true'; }))) // Authentication diff --git a/src/www/index.html b/src/www/index.html index 4c5b239f..ff208499 100644 --- a/src/www/index.html +++ b/src/www/index.html @@ -162,7 +162,7 @@ - + · - + · - {{!uiUsageStats ? " · " : ""}}{{new Date(client.latestHandshakeAt) | timeago}} + {{!uiTrafficStats ? " · " : ""}}{{new Date(client.latestHandshakeAt) | timeago}}
-
diff --git a/src/www/js/api.js b/src/www/js/api.js index c4440ef2..e69e5a3a 100644 --- a/src/www/js/api.js +++ b/src/www/js/api.js @@ -43,10 +43,10 @@ class API { }); } - async getuiUsageStats() { + async getuiTrafficStats() { return this.call({ method: 'get', - path: '/ui-usage-stats', + path: '/ui-traffic-stats', }); } diff --git a/src/www/js/app.js b/src/www/js/app.js index cc6dd5f1..22fe3bfc 100644 --- a/src/www/js/app.js +++ b/src/www/js/app.js @@ -53,7 +53,7 @@ new Vue({ latestRelease: null, isDark: null, - uiUsageStats: false, + uiTrafficStats: false, chartOptions: { chart: { @@ -293,13 +293,13 @@ new Vue({ }).catch(console.error); }, 1000); - this.api.getuiUsageStats() + this.api.getuiTrafficStats() .then((res) => { - this.uiUsageStats = res; + this.uiTrafficStats = res; }) .catch(() => { - console.log('Failed to get ui-usage-stats'); - this.uiUsageStats = false; + console.log('Failed to get ui-traffic-stats'); + this.uiTrafficStats = false; }); Promise.resolve().then(async () => { From 7d19b748452bbf9832974704219bf48a5d10f521 Mon Sep 17 00:00:00 2001 From: Sergei Birukov Date: Tue, 27 Feb 2024 20:03:43 +0300 Subject: [PATCH 13/15] Fix simple stats wrapping on mobile --- src/www/css/app.css | 19 ++++++++++--------- src/www/index.html | 10 +++++----- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/www/css/app.css b/src/www/css/app.css index 9eda62bb..6c8e6307 100644 --- a/src/www/css/app.css +++ b/src/www/css/app.css @@ -1,5 +1,5 @@ /* -! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com +! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com */ /* @@ -688,10 +688,6 @@ video { margin-bottom: 4rem; } -.-ml-4 { - margin-left: -1rem; -} - .mb-10 { margin-bottom: 2.5rem; } @@ -975,6 +971,10 @@ video { white-space: nowrap; } +.whitespace-nowrap { + white-space: nowrap; +} + .rounded { border-radius: 0.25rem; } @@ -1141,6 +1141,11 @@ video { padding-bottom: 0.75rem; } +.py-5 { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + .pb-1 { padding-bottom: 0.25rem; } @@ -1454,10 +1459,6 @@ video { } @media (min-width: 450px) { - .xxs\:ml-0 { - margin-left: 0px; - } - .xxs\:flex-row { flex-direction: row; } diff --git a/src/www/index.html b/src/www/index.html index ff208499..9311ef0c 100644 --- a/src/www/index.html +++ b/src/www/index.html @@ -18,7 +18,7 @@
-
+
-
+
@@ -162,7 +162,7 @@ - + · - + · - {{!uiTrafficStats ? " · " : ""}}{{new Date(client.latestHandshakeAt) | timeago}} From e942ebd57705293ac0a93d86de5de5562891f9a3 Mon Sep 17 00:00:00 2001 From: Philip H <47042125+pheiduck@users.noreply.github.com> Date: Tue, 27 Feb 2024 21:33:53 +0100 Subject: [PATCH 14/15] app.css: revert version modification --- src/www/css/app.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/www/css/app.css b/src/www/css/app.css index 6c8e6307..3064646a 100644 --- a/src/www/css/app.css +++ b/src/www/css/app.css @@ -1,5 +1,5 @@ /* -! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com +! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */ /* From 1a6e5e3ea7c8b10c29feac22be36f90798458deb Mon Sep 17 00:00:00 2001 From: Philip H <47042125+pheiduck@users.noreply.github.com> Date: Fri, 1 Mar 2024 14:24:38 +0100 Subject: [PATCH 15/15] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d57f2477..95810441 100644 --- a/README.md +++ b/README.md @@ -97,8 +97,8 @@ These options can be configured by setting environment variables using `-e KEY=" | `WG_POST_UP` | `...` | `iptables ...` | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L20) for the default value. | | `WG_PRE_DOWN` | `...` | - | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L27) for the default value. | | `WG_POST_DOWN` | `...` | `iptables ...` | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L28) for the default value. | -| `UI_TRAFFIC_STATS` | `false` | `true` | Enable detailed RX / TX client stats in Web UI | | `LANG` | `en` | `de` | Web UI language (Supports: en, ua, ru, tr, no, pl, fr, de, ca, es, ko, vi, nl, is, pt, chs, cht, it, th). | +| `UI_TRAFFIC_STATS` | `false` | `true` | Enable detailed RX / TX client stats in Web UI | > If you change `WG_PORT`, make sure to also change the exposed port.