From 20e856ecfcf9c9af9cc3b21b37c5335d49da3a90 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Mon, 31 Oct 2022 15:08:56 +0100
Subject: [PATCH] Use correct locale for number formatting

Also moved numberFormat method so separate file
---
 webapp/src/components/InverterChannelInfo.vue |  7 ++--
 .../src/components/LimitSettingsCurrent.vue   | 15 +++------
 webapp/src/utils/index.ts                     |  3 ++
 webapp/src/utils/number.ts                    |  5 +++
 webapp/src/views/HomeView.vue                 | 32 +++++++++++--------
 5 files changed, 33 insertions(+), 29 deletions(-)
 create mode 100644 webapp/src/utils/number.ts

diff --git a/webapp/src/components/InverterChannelInfo.vue b/webapp/src/components/InverterChannelInfo.vue
index f3af0c6f..025c0817 100644
--- a/webapp/src/components/InverterChannelInfo.vue
+++ b/webapp/src/components/InverterChannelInfo.vue
@@ -28,6 +28,7 @@
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue';
 import type { InverterStatistics } from '@/types/LiveDataStatus';
+import { formatNumber } from '@/utils';
 
 export default defineComponent({
     props: {
@@ -35,11 +36,7 @@ export default defineComponent({
         channelNumber: { type: Number, required: true },
     },
     methods: {
-        formatNumber(num: number, digits: number) {
-            return new Intl.NumberFormat(
-                undefined, { minimumFractionDigits: digits, maximumFractionDigits: digits }
-            ).format(num);
-        },
+        formatNumber,
     },
 });
 </script>
diff --git a/webapp/src/components/LimitSettingsCurrent.vue b/webapp/src/components/LimitSettingsCurrent.vue
index fd9c99cd..24ced637 100644
--- a/webapp/src/components/LimitSettingsCurrent.vue
+++ b/webapp/src/components/LimitSettingsCurrent.vue
@@ -3,7 +3,7 @@
         <tbody>
             <tr>
                 <td>Current Limit</td>
-                <td>{{ formatNumber(limitData.limit) }}%</td>
+                <td>{{ formatNumber(limitData.limit, 2) }}%</td>
             </tr>
         </tbody>
     </table>
@@ -11,6 +11,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { formatNumber } from '@/utils';
 
 declare interface LimitData {
     limit: number,
@@ -20,14 +21,8 @@ export default defineComponent({
     props: {
         limitData: { type: Object as () => LimitData, required: true },
     },
-    computed: {
-        formatNumber() {
-            return (num: number) => {
-                return new Intl.NumberFormat(
-                    undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }
-                ).format(num)
-            };
-        },
-    },
+    methods: {
+        formatNumber,
+    }
 });
 </script>
\ No newline at end of file
diff --git a/webapp/src/utils/index.ts b/webapp/src/utils/index.ts
index 0db17789..d96d8ac8 100644
--- a/webapp/src/utils/index.ts
+++ b/webapp/src/utils/index.ts
@@ -1,9 +1,12 @@
 import { timestampToString } from './time';
+import { formatNumber } from './number';
 
 export {
     timestampToString,
+    formatNumber,
 };
 
 export default {
     timestampToString,
+    formatNumber,
 }
\ No newline at end of file
diff --git a/webapp/src/utils/number.ts b/webapp/src/utils/number.ts
new file mode 100644
index 00000000..bcd76125
--- /dev/null
+++ b/webapp/src/utils/number.ts
@@ -0,0 +1,5 @@
+export const formatNumber = (num: number, digits: number): string => {
+    return new Intl.NumberFormat(
+        undefined, { minimumFractionDigits: digits, maximumFractionDigits: digits }
+    ).format(num);
+}
\ No newline at end of file
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index 5aa37436..651011c0 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -1,7 +1,7 @@
 <template>
     <BasePage :title="'Live Data'" :isLoading="dataLoading" :isWideScreen="true">
         <div class="row gy-3">
-            <div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? {'display': 'none' } : {}]">
+            <div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? { 'display': 'none' } : {}]">
                 <div class="nav nav-pills row-cols-sm-1" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                     <button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link"
                         :id="'v-pills-' + inverter.serial + '-tab'" data-bs-toggle="pill"
@@ -15,8 +15,10 @@
                 </div>
             </div>
 
-            <div class="tab-content" id="v-pills-tabContent" :class="{'col-sm-9 col-md-10': inverterData.length > 1,
-            'col-sm-12 col-md-12': inverterData.length == 1 }">
+            <div class="tab-content" id="v-pills-tabContent" :class="{
+                'col-sm-9 col-md-10': inverterData.length > 1,
+                'col-sm-12 col-md-12': inverterData.length == 1
+            }">
                 <div v-for="inverter in inverterData" :key="inverter.serial" class="tab-pane fade show"
                     :id="'v-pills-' + inverter.serial" role="tabpanel"
                     :aria-labelledby="'v-pills-' + inverter.serial + '-tab'" tabindex="0">
@@ -37,9 +39,8 @@
                                     </div>
                                     <div style="padding-right: 2em;">
                                         Current Limit: <template v-if="inverter.limit_absolute > -1"> {{
-                                        inverter.limit_absolute.toFixed(0) }}W | </template>{{
-                                            inverter.limit_relative.toFixed(0)
-                                            }}%
+                                                formatNumber(inverter.limit_absolute, 0)
+                                        }}W | </template>{{ formatNumber(inverter.limit_relative, 0) }}%
                                     </div>
                                     <div style="padding-right: 2em;">
                                         Data Age: {{ inverter.data_age }} seconds
@@ -178,15 +179,16 @@
                                     Limit:</label>
                                 <div class="col-sm-4">
                                     <div class="input-group">
-                                        <input type="number" class="form-control" id="inputCurrentLimit"
-                                            aria-describedby="currentLimitType" v-model="currentLimitRelative" disabled />
+                                        <input type="text" class="form-control" id="inputCurrentLimit"
+                                            aria-describedby="currentLimitType" v-model="currentLimitRelative"
+                                            disabled />
                                         <span class="input-group-text" id="currentLimitType">%</span>
                                     </div>
                                 </div>
 
                                 <div class="col-sm-4" v-if="currentLimitList.max_power > 0">
                                     <div class="input-group">
-                                        <input type="number" class="form-control" id="inputCurrentLimitAbsolute"
+                                        <input type="text" class="form-control" id="inputCurrentLimitAbsolute"
                                             aria-describedby="currentLimitTypeAbsolute" v-model="currentLimitAbsolute"
                                             disabled />
                                         <span class="input-group-text" id="currentLimitTypeAbsolute">W</span>
@@ -333,6 +335,7 @@ import type { EventlogItems } from '@/types/EventlogStatus';
 import type { Inverters } from '@/types/LiveDataStatus';
 import type { LimitStatus } from '@/types/LimitStatus';
 import type { LimitConfig } from '@/types/LimitConfig';
+import { formatNumber } from '@/utils';
 
 export default defineComponent({
     components: {
@@ -424,17 +427,18 @@ export default defineComponent({
         }
     },
     computed: {
-        currentLimitAbsolute(): number {
+        currentLimitAbsolute(): string {
             if (this.currentLimitList.max_power > 0) {
-                return Number((this.currentLimitList.limit_relative * this.currentLimitList.max_power / 100).toFixed(1));
+                return formatNumber(this.currentLimitList.limit_relative * this.currentLimitList.max_power / 100, 2);
             }
-            return 0;
+            return "0";
         },
-        currentLimitRelative(): number {
-            return Number((this.currentLimitList.limit_relative).toFixed(1));
+        currentLimitRelative(): string {
+            return formatNumber(this.currentLimitList.limit_relative, 2);
         }
     },
     methods: {
+        formatNumber,
         getInitialData() {
             this.dataLoading = true;
             fetch("/api/livedata/status")