patrick/OpenDTU-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

webapp: use value class to format live values

Browse Source 
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.
This commit is contained in:
Bernhard Kirchen 2024-10-26 23:23:34 +02:00 committed by Bernhard Kirchen
parent bad5260630
commit 50db50174e
3 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/src/components/BatteryView.vue
View File

@ -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>

24
webapp/src/components/HuaweiView.vue
View File

@ -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>

4
webapp/src/components/VedirectView.vue
View File

@ -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>