Fix some bugs

json error
update css
some refactoring for getUiDetailedStats

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"
 }

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

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