From 50db50174e21574eb1da72448ddcf9b851dcc34f Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 23:23:34 +0200
Subject: [PATCH] webapp: use value class to format live values

avoids inline style and removes right padding such that the value and
its unit move closed together, replicating the design of the inverter
channel info tables.
---
 webapp/src/components/BatteryView.vue  |  4 ++--
 webapp/src/components/HuaweiView.vue   | 24 ++++++++++++------------
 webapp/src/components/VedirectView.vue |  4 ++--
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/webapp/src/components/BatteryView.vue b/webapp/src/components/BatteryView.vue
index 68040921..78e15128 100644
--- a/webapp/src/components/BatteryView.vue
+++ b/webapp/src/components/BatteryView.vue
@@ -53,7 +53,7 @@
                                                 <thead>
                                                     <tr>
                                                         <th scope="col">{{ $t('battery.Property') }}</th>
-                                                        <th style="text-align: right" scope="col">
+                                                        <th class="value" scope="col">
                                                             {{ $t('battery.Value') }}
                                                         </th>
                                                         <th scope="col">{{ $t('battery.Unit') }}</th>
@@ -62,7 +62,7 @@
                                                 <tbody>
                                                     <tr v-for="(prop, key) in values" v-bind:key="key">
                                                         <th scope="row">{{ $t('battery.' + key) }}</th>
-                                                        <td style="text-align: right">
+                                                        <td class="value">
                                                             <template v-if="isStringValue(prop) && prop.translate">
                                                                 {{ $t('battery.' + prop.value) }}
                                                             </template>
diff --git a/webapp/src/components/HuaweiView.vue b/webapp/src/components/HuaweiView.vue
index f85a0a35..79a3ca91 100644
--- a/webapp/src/components/HuaweiView.vue
+++ b/webapp/src/components/HuaweiView.vue
@@ -50,7 +50,7 @@
                                             <thead>
                                                 <tr>
                                                     <th scope="col">{{ $t('huawei.Property') }}</th>
-                                                    <th style="text-align: right" scope="col">
+                                                    <th class="value" scope="col">
                                                         {{ $t('huawei.Value') }}
                                                     </th>
                                                     <th scope="col">{{ $t('huawei.Unit') }}</th>
@@ -59,35 +59,35 @@
                                             <tbody>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.input_voltage') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ formatNumber(huaweiData.input_voltage.v) }}
                                                     </td>
                                                     <td>{{ huaweiData.input_voltage.u }}</td>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.input_current') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ formatNumber(huaweiData.input_current.v) }}
                                                     </td>
                                                     <td>{{ huaweiData.input_current.u }}</td>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.input_power') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ formatNumber(huaweiData.input_power.v) }}
                                                     </td>
                                                     <td>{{ huaweiData.input_power.u }}</td>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.input_temp') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ Math.round(huaweiData.input_temp.v) }}
                                                     </td>
                                                     <td>{{ huaweiData.input_temp.u }}</td>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.efficiency') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ huaweiData.efficiency.v.toFixed(1) }}
                                                     </td>
                                                     <td>{{ huaweiData.efficiency.u }}</td>
@@ -105,7 +105,7 @@
                                             <thead>
                                                 <tr>
                                                     <th scope="col">{{ $t('huawei.Property') }}</th>
-                                                    <th style="text-align: right" scope="col">
+                                                    <th class="value" scope="col">
                                                         {{ $t('huawei.Value') }}
                                                     </th>
                                                     <th scope="col">{{ $t('huawei.Unit') }}</th>
@@ -114,35 +114,35 @@
                                             <tbody>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.output_voltage') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ huaweiData.output_voltage.v.toFixed(1) }}
                                                     </td>
                                                     <td>{{ huaweiData.output_voltage.u }}</td>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.output_current') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ huaweiData.output_current.v.toFixed(2) }}
                                                     </td>
                                                     <td>{{ huaweiData.output_current.u }}</td>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.max_output_current') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ huaweiData.max_output_current.v.toFixed(1) }}
                                                     </td>
                                                     <td>{{ huaweiData.max_output_current.u }}</td>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.output_power') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ huaweiData.output_power.v.toFixed(1) }}
                                                     </td>
                                                     <td>{{ huaweiData.output_power.u }}</td>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.output_temp') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ Math.round(huaweiData.output_temp.v) }}
                                                     </td>
                                                     <td>{{ huaweiData.output_temp.u }}</td>
diff --git a/webapp/src/components/VedirectView.vue b/webapp/src/components/VedirectView.vue
index 9097f6cd..e385bf8e 100644
--- a/webapp/src/components/VedirectView.vue
+++ b/webapp/src/components/VedirectView.vue
@@ -74,7 +74,7 @@
                                                 <thead>
                                                     <tr>
                                                         <th scope="col">{{ $t('vedirecthome.Property') }}</th>
-                                                        <th style="text-align: right" scope="col">
+                                                        <th class="value" scope="col">
                                                             {{ $t('vedirecthome.Value') }}
                                                         </th>
                                                         <th scope="col">{{ $t('vedirecthome.Unit') }}</th>
@@ -85,7 +85,7 @@
                                                         <th scope="row">
                                                             {{ $t('vedirecthome.' + section + '.' + key) }}
                                                         </th>
-                                                        <td style="text-align: right">
+                                                        <td class="value">
                                                             <template v-if="typeof prop === 'string'">
                                                                 {{ prop }}
                                                             </template>