webapp: Added additional locale specific formatting

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>

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>

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) }}
+            {{ $n(Math.round((total - used) / 1024), 'kilobyte') }}
-            KByte
         </td>
-        <td class="rightCell">{{ Math.round(used / 1024) }} KByte</td>
+        <td class="rightCell">{{ $n(Math.round(used / 1024), 'kilobyte') }}</td>
-        <td class="rightCell">{{ Math.round(total / 1024) }} KByte</td>
+        <td class="rightCell">{{ $n(Math.round(total / 1024), 'kilobyte') }}</td>
     </tr>
 </template>
 

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>

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

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