From d7532e407e73e162d43785731769da97bd635d90 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Mon, 2 Jan 2023 15:37:11 +0100
Subject: [PATCH] webapp: Added additional locale specific formatting

---
 webapp/src/components/DevInfo.vue         | 2 +-
 webapp/src/components/FirmwareInfo.vue    | 2 +-
 webapp/src/components/FsInfo.vue          | 9 ++++-----
 webapp/src/components/WifiApInfo.vue      | 2 +-
 webapp/src/components/WifiStationInfo.vue | 6 +++---
 webapp/src/locales/index.ts               | 9 +++++++++
 6 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/webapp/src/components/DevInfo.vue b/webapp/src/components/DevInfo.vue
index 3abfb006..7e4f5fb9 100644
--- a/webapp/src/components/DevInfo.vue
+++ b/webapp/src/components/DevInfo.vue
@@ -13,7 +13,7 @@
             </tr>
             <tr>
                 <td>{{ $t('devinfo.DetectedMaxPower') }}</td>
-                <td>{{ devInfoList.max_power }} W</td>
+                <td>{{ $n(devInfoList.max_power, 'decimal') }} W</td>
             </tr>
             <tr>
                 <td>{{ $t('devinfo.BootloaderVersion') }}</td>
diff --git a/webapp/src/components/FirmwareInfo.vue b/webapp/src/components/FirmwareInfo.vue
index e41d8a96..7a127c10 100644
--- a/webapp/src/components/FirmwareInfo.vue
+++ b/webapp/src/components/FirmwareInfo.vue
@@ -41,7 +41,7 @@
                     </tr>
                     <tr>
                         <th>{{ $t('firmwareinfo.ConfigSaveCount') }}</th>
-                        <td>{{ systemStatus.cfgsavecount }}</td>
+                        <td>{{ $n(systemStatus.cfgsavecount, 'decimal') }}</td>
                     </tr>
                     <tr>
                         <th>{{ $t('firmwareinfo.Uptime') }}</th>
diff --git a/webapp/src/components/FsInfo.vue b/webapp/src/components/FsInfo.vue
index 4fa3e4a8..70e5eeb2 100644
--- a/webapp/src/components/FsInfo.vue
+++ b/webapp/src/components/FsInfo.vue
@@ -5,16 +5,15 @@
             <div class="progress">
                 <div class="progress-bar" role="progressbar" :style="{ width: getPercent() + '%' }"
                     v-bind:aria-valuenow="getPercent()" aria-valuemin="0" aria-valuemax="100">
-                    {{ getPercent() }}%
+                    {{ $n(getPercent() / 100, 'percent') }}
                 </div>
             </div>
         </td>
         <td class="rightCell">
-            {{ Math.round((total - used) / 1024) }}
-            KByte
+            {{ $n(Math.round((total - used) / 1024), 'kilobyte') }}
         </td>
-        <td class="rightCell">{{ Math.round(used / 1024) }} KByte</td>
-        <td class="rightCell">{{ Math.round(total / 1024) }} KByte</td>
+        <td class="rightCell">{{ $n(Math.round(used / 1024), 'kilobyte') }}</td>
+        <td class="rightCell">{{ $n(Math.round(total / 1024), 'kilobyte') }}</td>
     </tr>
 </template>
 
diff --git a/webapp/src/components/WifiApInfo.vue b/webapp/src/components/WifiApInfo.vue
index fba40b2a..f00858ca 100644
--- a/webapp/src/components/WifiApInfo.vue
+++ b/webapp/src/components/WifiApInfo.vue
@@ -19,7 +19,7 @@
                     </tr>
                     <tr>
                         <th>{{ $t('wifiapinfo.Stations') }}</th>
-                        <td>{{ networkStatus.ap_stationnum }}</td>
+                        <td>{{ $n(networkStatus.ap_stationnum, 'decimal') }}</td>
                     </tr>
                 </tbody>
             </table>
diff --git a/webapp/src/components/WifiStationInfo.vue b/webapp/src/components/WifiStationInfo.vue
index 44b71ee5..d60b914a 100644
--- a/webapp/src/components/WifiStationInfo.vue
+++ b/webapp/src/components/WifiStationInfo.vue
@@ -19,11 +19,11 @@
                     </tr>
                     <tr>
                         <th>{{ $t('wifistationinfo.Quality') }}</th>
-                        <td>{{ getRSSIasQuality(networkStatus.sta_rssi) }} %</td>
+                        <td>{{ $n(getRSSIasQuality(networkStatus.sta_rssi), 'percent') }}</td>
                     </tr>
                     <tr>
                         <th>{{ $t('wifistationinfo.Rssi') }}</th>
-                        <td>{{ networkStatus.sta_rssi }}</td>
+                        <td>{{ $n(networkStatus.sta_rssi, 'decimal') }}</td>
                     </tr>
                 </tbody>
             </table>
@@ -55,7 +55,7 @@ export default defineComponent({
                 quality = 2 * (rssi + 100);
             }
 
-            return quality;
+            return quality / 100;
         },
     },
 });
diff --git a/webapp/src/locales/index.ts b/webapp/src/locales/index.ts
index 64104daf..eb788647 100644
--- a/webapp/src/locales/index.ts
+++ b/webapp/src/locales/index.ts
@@ -71,6 +71,9 @@ export const numberFormats: I18nOptions["numberFormats"] = {
         percent: {
             style: 'percent',
         },
+        kilobyte: {
+            style: 'unit', unit: 'kilobyte',
+        },
     },
     [Locales.DE]: {
         decimal: {
@@ -85,6 +88,9 @@ export const numberFormats: I18nOptions["numberFormats"] = {
         percent: {
             style: 'percent',
         },
+        kilobyte: {
+            style: 'unit', unit: 'kilobyte',
+        },
     },
     [Locales.FR]: {
         decimal: {
@@ -99,6 +105,9 @@ export const numberFormats: I18nOptions["numberFormats"] = {
         percent: {
           style: 'percent',
         },
+        kilobyte: {
+            style: 'unit', unit: 'kilobyte',
+        },
     },
 };