detailed -> usage

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.
 

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

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';

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 () => {
+      .get('/api/ui-usage-stats', (Util.promisify(async () => {
-        return UI_DETAILED_STATS === 'true';
+        return UI_USAGE_STATS === 'true';
       })))
 
     // Authentication

src/www/index.html

@@ -162,7 +162,7 @@
                           </span>
                         </span>
                         <!-- Inline Transfer TX -->
-                        <span v-if="!uiDetailedStats && client.transferTx" :title="$t('totalDownload') + bytes(client.transferTx)">
+                        <span v-if="!uiUsageStats && 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">
                             <path fill-rule="evenodd"
@@ -173,7 +173,7 @@
                         </span>
                         
                         <!-- Inline Transfer RX -->
-                        <span v-if="!uiDetailedStats && client.transferRx" :title="$t('totalUpload') + bytes(client.transferRx)">
+                        <span v-if="!uiUsageStats && client.transferRx" :title="$t('totalUpload') + bytes(client.transferRx)">
                           ·
                           <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                             <path fill-rule="evenodd"
@@ -185,13 +185,13 @@
                         <!-- Last seen -->
                         <span class="text-gray-400 dark:text-neutral-500" v-if="client.latestHandshakeAt"
                           :title="$t('lastSeen') + dateTime(new Date(client.latestHandshakeAt))">
-                          {{!uiDetailedStats ? " · " : ""}}{{new Date(client.latestHandshakeAt) | timeago}}
+                          {{!uiUsageStats ? " · " : ""}}{{new Date(client.latestHandshakeAt) | timeago}}
                         </span>
                       </div>
                     </div>
 
                     <!-- Info -->
-                    <div v-if="uiDetailedStats"
+                    <div v-if="uiUsageStats"
                       class="flex gap-2 items-center shrink-0 text-gray-400 dark:text-neutral-400 text-xs mt-px justify-end">
 
                       <!-- Transfer TX -->

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',
     });
   }
 

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');
+        console.log('Failed to get ui-usage-stats');
-        this.uiDetailedStats = false;
+        this.uiUsageStats = false;
       });
 
     Promise.resolve().then(async () => {