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> <thead>
<tr> <tr>
<th scope="col">{{ $t('battery.Property') }}</th> <th scope="col">{{ $t('battery.Property') }}</th>
<th style="text-align: right" scope="col"> <th class="value" scope="col">
{{ $t('battery.Value') }} {{ $t('battery.Value') }}
</th> </th>
<th scope="col">{{ $t('battery.Unit') }}</th> <th scope="col">{{ $t('battery.Unit') }}</th>
@ -62,7 +62,7 @@
<tbody> <tbody>
<tr v-for="(prop, key) in values" v-bind:key="key"> <tr v-for="(prop, key) in values" v-bind:key="key">
<th scope="row">{{ $t('battery.' + key) }}</th> <th scope="row">{{ $t('battery.' + key) }}</th>
<td style="text-align: right"> <td class="value">
<template v-if="isStringValue(prop) && prop.translate"> <template v-if="isStringValue(prop) && prop.translate">
{{ $t('battery.' + prop.value) }} {{ $t('battery.' + prop.value) }}
</template> </template>

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

@ -50,7 +50,7 @@
<thead> <thead>
<tr> <tr>
<th scope="col">{{ $t('huawei.Property') }}</th> <th scope="col">{{ $t('huawei.Property') }}</th>
<th style="text-align: right" scope="col"> <th class="value" scope="col">
{{ $t('huawei.Value') }} {{ $t('huawei.Value') }}
</th> </th>
<th scope="col">{{ $t('huawei.Unit') }}</th> <th scope="col">{{ $t('huawei.Unit') }}</th>
@ -59,35 +59,35 @@
<tbody> <tbody>
<tr> <tr>
<th scope="row">{{ $t('huawei.input_voltage') }}</th> <th scope="row">{{ $t('huawei.input_voltage') }}</th>
<td style="text-align: right"> <td class="value">
{{ formatNumber(huaweiData.input_voltage.v) }} {{ formatNumber(huaweiData.input_voltage.v) }}
</td> </td>
<td>{{ huaweiData.input_voltage.u }}</td> <td>{{ huaweiData.input_voltage.u }}</td>
</tr> </tr>
<tr> <tr>
<th scope="row">{{ $t('huawei.input_current') }}</th> <th scope="row">{{ $t('huawei.input_current') }}</th>
<td style="text-align: right"> <td class="value">
{{ formatNumber(huaweiData.input_current.v) }} {{ formatNumber(huaweiData.input_current.v) }}
</td> </td>
<td>{{ huaweiData.input_current.u }}</td> <td>{{ huaweiData.input_current.u }}</td>
</tr> </tr>
<tr> <tr>
<th scope="row">{{ $t('huawei.input_power') }}</th> <th scope="row">{{ $t('huawei.input_power') }}</th>
<td style="text-align: right"> <td class="value">
{{ formatNumber(huaweiData.input_power.v) }} {{ formatNumber(huaweiData.input_power.v) }}
</td> </td>
<td>{{ huaweiData.input_power.u }}</td> <td>{{ huaweiData.input_power.u }}</td>
</tr> </tr>
<tr> <tr>
<th scope="row">{{ $t('huawei.input_temp') }}</th> <th scope="row">{{ $t('huawei.input_temp') }}</th>
<td style="text-align: right"> <td class="value">
{{ Math.round(huaweiData.input_temp.v) }} {{ Math.round(huaweiData.input_temp.v) }}
</td> </td>
<td>{{ huaweiData.input_temp.u }}</td> <td>{{ huaweiData.input_temp.u }}</td>
</tr> </tr>
<tr> <tr>
<th scope="row">{{ $t('huawei.efficiency') }}</th> <th scope="row">{{ $t('huawei.efficiency') }}</th>
<td style="text-align: right"> <td class="value">
{{ huaweiData.efficiency.v.toFixed(1) }} {{ huaweiData.efficiency.v.toFixed(1) }}
</td> </td>
<td>{{ huaweiData.efficiency.u }}</td> <td>{{ huaweiData.efficiency.u }}</td>
@ -105,7 +105,7 @@
<thead> <thead>
<tr> <tr>
<th scope="col">{{ $t('huawei.Property') }}</th> <th scope="col">{{ $t('huawei.Property') }}</th>
<th style="text-align: right" scope="col"> <th class="value" scope="col">
{{ $t('huawei.Value') }} {{ $t('huawei.Value') }}
</th> </th>
<th scope="col">{{ $t('huawei.Unit') }}</th> <th scope="col">{{ $t('huawei.Unit') }}</th>
@ -114,35 +114,35 @@
<tbody> <tbody>
<tr> <tr>
<th scope="row">{{ $t('huawei.output_voltage') }}</th> <th scope="row">{{ $t('huawei.output_voltage') }}</th>
<td style="text-align: right"> <td class="value">
{{ huaweiData.output_voltage.v.toFixed(1) }} {{ huaweiData.output_voltage.v.toFixed(1) }}
</td> </td>
<td>{{ huaweiData.output_voltage.u }}</td> <td>{{ huaweiData.output_voltage.u }}</td>
</tr> </tr>
<tr> <tr>
<th scope="row">{{ $t('huawei.output_current') }}</th> <th scope="row">{{ $t('huawei.output_current') }}</th>
<td style="text-align: right"> <td class="value">
{{ huaweiData.output_current.v.toFixed(2) }} {{ huaweiData.output_current.v.toFixed(2) }}
</td> </td>
<td>{{ huaweiData.output_current.u }}</td> <td>{{ huaweiData.output_current.u }}</td>
</tr> </tr>
<tr> <tr>
<th scope="row">{{ $t('huawei.max_output_current') }}</th> <th scope="row">{{ $t('huawei.max_output_current') }}</th>
<td style="text-align: right"> <td class="value">
{{ huaweiData.max_output_current.v.toFixed(1) }} {{ huaweiData.max_output_current.v.toFixed(1) }}
</td> </td>
<td>{{ huaweiData.max_output_current.u }}</td> <td>{{ huaweiData.max_output_current.u }}</td>
</tr> </tr>
<tr> <tr>
<th scope="row">{{ $t('huawei.output_power') }}</th> <th scope="row">{{ $t('huawei.output_power') }}</th>
<td style="text-align: right"> <td class="value">
{{ huaweiData.output_power.v.toFixed(1) }} {{ huaweiData.output_power.v.toFixed(1) }}
</td> </td>
<td>{{ huaweiData.output_power.u }}</td> <td>{{ huaweiData.output_power.u }}</td>
</tr> </tr>
<tr> <tr>
<th scope="row">{{ $t('huawei.output_temp') }}</th> <th scope="row">{{ $t('huawei.output_temp') }}</th>
<td style="text-align: right"> <td class="value">
{{ Math.round(huaweiData.output_temp.v) }} {{ Math.round(huaweiData.output_temp.v) }}
</td> </td>
<td>{{ huaweiData.output_temp.u }}</td> <td>{{ huaweiData.output_temp.u }}</td>

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

@ -74,7 +74,7 @@
<thead> <thead>
<tr> <tr>
<th scope="col">{{ $t('vedirecthome.Property') }}</th> <th scope="col">{{ $t('vedirecthome.Property') }}</th>
<th style="text-align: right" scope="col"> <th class="value" scope="col">
{{ $t('vedirecthome.Value') }} {{ $t('vedirecthome.Value') }}
</th> </th>
<th scope="col">{{ $t('vedirecthome.Unit') }}</th> <th scope="col">{{ $t('vedirecthome.Unit') }}</th>
@ -85,7 +85,7 @@
<th scope="row"> <th scope="row">
{{ $t('vedirecthome.' + section + '.' + key) }} {{ $t('vedirecthome.' + section + '.' + key) }}
</th> </th>
<td style="text-align: right"> <td class="value">
<template v-if="typeof prop === 'string'"> <template v-if="typeof prop === 'string'">
{{ prop }} {{ prop }}
</template> </template>