From 5b2a9308f59d65d550a6ed9be48094ebbe146431 Mon Sep 17 00:00:00 2001 From: Sergei Birukov Date: Tue, 6 Feb 2024 17:45:33 +0300 Subject: [PATCH 1/8] 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 2/8] 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 3/8] 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 4/8] 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 5/8] 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 6/8] 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 7/8] 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 8/8] 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">