From 6db65edd59fe3a4782323764c700aa466692e732 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Fri, 25 Oct 2024 21:55:31 +0200
Subject: [PATCH 01/33] webapp: right-align labels for inputs on non-sm
 viewports

this change tries to achieve a pleasing look of input forms by
right-aligning the texts of labels. the input form now looks similar
to a table, achieving a cleaner look, especially for forms where the
labels have varying text lenghts.
---
 webapp/src/scss/styles.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/webapp/src/scss/styles.scss b/webapp/src/scss/styles.scss
index f97d33894..9977f9215 100644
--- a/webapp/src/scss/styles.scss
+++ b/webapp/src/scss/styles.scss
@@ -4,3 +4,10 @@
 .container-fluid .row {
     font-feature-settings: 'tnum';
 }
+
+@include media-breakpoint-up(sm) {
+    label.col-form-label,
+    label.form-check-label {
+        text-align: end;
+    }
+}

From 630b5c0bfee133264f4f6c15893e9c98b991346f Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Fri, 25 Oct 2024 22:13:34 +0200
Subject: [PATCH 02/33] webapp: last table row shall have no bottom border

similar to the first row which has no border at the top.
---
 webapp/src/scss/styles.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/webapp/src/scss/styles.scss b/webapp/src/scss/styles.scss
index 9977f9215..fb6b75857 100644
--- a/webapp/src/scss/styles.scss
+++ b/webapp/src/scss/styles.scss
@@ -11,3 +11,8 @@
         text-align: end;
     }
 }
+
+table.table tr:last-child th,
+table.table tr:last-child td {
+    border-bottom: 0;
+}

From f4ce0ba4377452f62dd88cf6a7bd770758623116 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Fri, 25 Oct 2024 22:15:40 +0200
Subject: [PATCH 03/33] webapp: remove table's bottom margin

we don't need a margin at the bottom of tables in general. not sure why
this is even a thing in bootstrap. this change, in particular, makes the
space between a table and a parent card symmetric on all sides.
---
 webapp/src/components/InverterChannelInfo.vue | 2 +-
 webapp/src/scss/styles.scss                   | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/webapp/src/components/InverterChannelInfo.vue b/webapp/src/components/InverterChannelInfo.vue
index 94dbc57af..00b514b42 100644
--- a/webapp/src/components/InverterChannelInfo.vue
+++ b/webapp/src/components/InverterChannelInfo.vue
@@ -21,7 +21,7 @@
         </div>
 
         <div class="table-responsive">
-            <table class="table table-striped table-hover" style="margin: 0">
+            <table class="table table-striped table-hover">
                 <tbody>
                     <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
                         <template v-if="key != 'name' && property">
diff --git a/webapp/src/scss/styles.scss b/webapp/src/scss/styles.scss
index fb6b75857..b1b3a6b13 100644
--- a/webapp/src/scss/styles.scss
+++ b/webapp/src/scss/styles.scss
@@ -16,3 +16,7 @@ table.table tr:last-child th,
 table.table tr:last-child td {
     border-bottom: 0;
 }
+
+table.table {
+    margin-bottom: 0;
+}

From 6f07d6ae6ca0c6599e5f80bfcc42fe61374921d3 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 20:43:00 +0200
Subject: [PATCH 04/33] webapp: add gap between inverter selectors

---
 webapp/src/views/HomeView.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index ba4eb0509..4af62ff46 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -17,7 +17,12 @@
         />
         <div class="row gy-3 mt-0">
             <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">
+                <div
+                    class="nav nav-pills row-cols-sm-1 gap-3"
+                    id="v-pills-tab"
+                    role="tablist"
+                    aria-orientation="vertical"
+                >
                     <button
                         v-for="inverter in inverterData"
                         :key="inverter.serial"

From 83cab36715e65bf311528736c4a1a5e096787094 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 22:32:05 +0200
Subject: [PATCH 05/33] webapp: avoid inline style in inverter channel info
 card

---
 webapp/src/components/InverterChannelInfo.vue | 3 +--
 webapp/src/scss/styles.scss                   | 6 ++++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/InverterChannelInfo.vue b/webapp/src/components/InverterChannelInfo.vue
index 00b514b42..359d20738 100644
--- a/webapp/src/components/InverterChannelInfo.vue
+++ b/webapp/src/components/InverterChannelInfo.vue
@@ -1,11 +1,10 @@
 <template>
     <div
-        class="card"
+        class="card card-table"
         :class="{
             'border-info': channelType == 'AC',
             'border-secondary': channelType == 'INV',
         }"
-        style="overflow: hidden"
     >
         <div v-if="channelType == 'INV'" class="card-header text-bg-secondary">
             {{ $t('inverterchannelinfo.General') }}
diff --git a/webapp/src/scss/styles.scss b/webapp/src/scss/styles.scss
index b1b3a6b13..77f162a36 100644
--- a/webapp/src/scss/styles.scss
+++ b/webapp/src/scss/styles.scss
@@ -20,3 +20,9 @@ table.table tr:last-child td {
 table.table {
     margin-bottom: 0;
 }
+
+div.card.card-table {
+    // prevent tables in cards from
+    // messing up the bottom corner radii
+    overflow: hidden;
+}

From ed28913734fe5d1de2ec45f8ef3d539b9a0c9adf Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 22:34:35 +0200
Subject: [PATCH 06/33] webapp: equalize style of cards with tables in live
 view

this change adjusts the style of cards showing tables such that they
look the same as inverter channel info tables.
---
 webapp/src/components/BatteryView.vue  | 4 ++--
 webapp/src/components/HuaweiView.vue   | 4 ++--
 webapp/src/components/VedirectView.vue | 2 +-
 webapp/src/scss/styles.scss            | 4 ++++
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/webapp/src/components/BatteryView.vue b/webapp/src/components/BatteryView.vue
index d7a9665d2..680409211 100644
--- a/webapp/src/components/BatteryView.vue
+++ b/webapp/src/components/BatteryView.vue
@@ -45,7 +45,7 @@
                                 v-bind:key="section"
                                 class="col order-0"
                             >
-                                <div class="card" :class="{ 'border-info': true }">
+                                <div class="card card-table" :class="{ 'border-info': true }">
                                     <div class="card-header text-bg-info">{{ $t('battery.' + section) }}</div>
                                     <div class="card-body">
                                         <div class="table-responsive">
@@ -91,7 +91,7 @@
                                 </div>
                             </div>
                             <div class="col order-1" v-show="batteryData.showIssues">
-                                <div class="card">
+                                <div class="card card-table">
                                     <div :class="{ 'card-header': true, 'border-bottom-0': maxIssueValue === 0 }">
                                         <div class="d-flex flex-row justify-content-between align-items-baseline">
                                             {{ $t('battery.issues') }}
diff --git a/webapp/src/components/HuaweiView.vue b/webapp/src/components/HuaweiView.vue
index 32b7c2b66..f85a0a359 100644
--- a/webapp/src/components/HuaweiView.vue
+++ b/webapp/src/components/HuaweiView.vue
@@ -43,7 +43,7 @@
                     <div class="card-body">
                         <div class="row flex-row flex-wrap align-items-start g-3">
                             <div class="col order-0">
-                                <div class="card" :class="{ 'border-info': true }">
+                                <div class="card card-table" :class="{ 'border-info': true }">
                                     <div class="card-header bg-info">{{ $t('huawei.Input') }}</div>
                                     <div class="card-body">
                                         <table class="table table-striped table-hover">
@@ -98,7 +98,7 @@
                                 </div>
                             </div>
                             <div class="col order-1">
-                                <div class="card" :class="{ 'border-info': false }">
+                                <div class="card card-table" :class="{ 'border-info': false }">
                                     <div class="card-header bg-info">{{ $t('huawei.Output') }}</div>
                                     <div class="card-body">
                                         <table class="table table-striped table-hover">
diff --git a/webapp/src/components/VedirectView.vue b/webapp/src/components/VedirectView.vue
index 95cb245b8..9097f6cdb 100644
--- a/webapp/src/components/VedirectView.vue
+++ b/webapp/src/components/VedirectView.vue
@@ -64,7 +64,7 @@
                     <div class="card-body">
                         <div class="row flex-row flex-wrap align-items-start g-3">
                             <div v-for="(values, section) in item.values" v-bind:key="section" class="col order-0">
-                                <div class="card" :class="{ 'border-info': section === 'device' }">
+                                <div class="card card-table" :class="{ 'border-info': section === 'device' }">
                                     <div :class="section === 'device' ? 'card-header text-bg-info' : 'card-header'">
                                         {{ $t('vedirecthome.section_' + section) }}
                                     </div>
diff --git a/webapp/src/scss/styles.scss b/webapp/src/scss/styles.scss
index 77f162a36..1a9288390 100644
--- a/webapp/src/scss/styles.scss
+++ b/webapp/src/scss/styles.scss
@@ -26,3 +26,7 @@ div.card.card-table {
     // messing up the bottom corner radii
     overflow: hidden;
 }
+
+div.card.card-table div.card-body {
+    padding: 0;
+}

From fb83405fc0b2c53a8e7ad923e8e033ff8d517932 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Fri, 25 Oct 2024 22:20:26 +0200
Subject: [PATCH 07/33] webapp: use reasonable name for radio stats accordion

---
 webapp/src/views/HomeView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index 4af62ff46..8d81061c2 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -222,7 +222,7 @@
                                 </div>
                             </BootstrapAlert>
 
-                            <div class="accordion mt-5" id="accordionExample">
+                            <div class="accordion mt-5" id="accordionRadioStats">
                                 <div class="accordion-item">
                                     <h2 class="accordion-header">
                                         <button
@@ -239,7 +239,7 @@
                                     <div
                                         id="collapseStats"
                                         class="accordion-collapse collapse"
-                                        data-bs-parent="#accordionExample"
+                                        data-bs-parent="#accordionRadioStats"
                                     >
                                         <div class="accordion-body">
                                             <table class="table table-striped table-hover">

From 2f189be6b5eb8ff33eb600a5dd223f8d4d9568ba Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 21:15:22 +0200
Subject: [PATCH 08/33] webapp: align table headers with card headers

set the left margin of table header cells to the same marging the card
header use, such that the text align on the same axis.
---
 webapp/src/scss/styles.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/webapp/src/scss/styles.scss b/webapp/src/scss/styles.scss
index 1a9288390..34d352983 100644
--- a/webapp/src/scss/styles.scss
+++ b/webapp/src/scss/styles.scss
@@ -27,6 +27,14 @@ div.card.card-table {
     overflow: hidden;
 }
 
+div.card.card-table tr > :first-child {
+    padding-left: var(--bs-card-cap-padding-x);
+}
+
+div.card.card-table tr > :last-child {
+    padding-right: var(--bs-card-cap-padding-x);
+}
+
 div.card.card-table div.card-body {
     padding: 0;
 }

From 6b0c363d97a6fedf570b2ce808468e64a40925bc Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 21:29:38 +0200
Subject: [PATCH 09/33] webapp: apply card-table class to info view cards

the cards in all information views still used a div.card-body around the
table, which added a margin on all sides of the table. to achieve a
unified look, these cards and tables now look the same as the inverter
channel cards.
---
 webapp/src/components/CardElement.vue          | 3 ++-
 webapp/src/components/FirmwareInfo.vue         | 2 +-
 webapp/src/components/HardwareInfo.vue         | 2 +-
 webapp/src/components/HeapDetails.vue          | 2 +-
 webapp/src/components/InterfaceApInfo.vue      | 2 +-
 webapp/src/components/InterfaceNetworkInfo.vue | 1 +
 webapp/src/components/MemoryInfo.vue           | 2 +-
 webapp/src/components/PinInfo.vue              | 2 +-
 webapp/src/components/RadioInfo.vue            | 2 +-
 webapp/src/components/TaskDetails.vue          | 2 +-
 webapp/src/components/WifiApInfo.vue           | 2 +-
 webapp/src/components/WifiStationInfo.vue      | 2 +-
 webapp/src/views/MqttInfoView.vue              | 6 +++---
 webapp/src/views/NtpInfoView.vue               | 4 ++--
 webapp/src/views/VedirectInfoView.vue          | 2 +-
 15 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/webapp/src/components/CardElement.vue b/webapp/src/components/CardElement.vue
index e7027367b..28a0fd533 100644
--- a/webapp/src/components/CardElement.vue
+++ b/webapp/src/components/CardElement.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="['card', addSpace ? 'mt-5' : '']">
+    <div :class="['card', table ? 'card-table' : '', addSpace ? 'mt-5' : '']">
         <div :class="['card-header', textVariant]">{{ text }}</div>
         <div :class="['card-body', 'card-text', centerContent ? 'text-center' : '', flexChildren ? 'd-flex' : '']">
             <slot />
@@ -14,6 +14,7 @@ export default defineComponent({
     props: {
         text: String,
         textVariant: String,
+        table: Boolean,
         addSpace: Boolean,
         centerContent: Boolean,
         flexChildren: Boolean,
diff --git a/webapp/src/components/FirmwareInfo.vue b/webapp/src/components/FirmwareInfo.vue
index e1f5d1ef6..e49c2c7ec 100644
--- a/webapp/src/components/FirmwareInfo.vue
+++ b/webapp/src/components/FirmwareInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('firmwareinfo.FirmwareInformation')" textVariant="text-bg-primary">
+    <CardElement :text="$t('firmwareinfo.FirmwareInformation')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>
diff --git a/webapp/src/components/HardwareInfo.vue b/webapp/src/components/HardwareInfo.vue
index 372eeff0d..982549d65 100644
--- a/webapp/src/components/HardwareInfo.vue
+++ b/webapp/src/components/HardwareInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('hardwareinfo.HardwareInformation')" textVariant="text-bg-primary">
+    <CardElement :text="$t('hardwareinfo.HardwareInformation')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>
diff --git a/webapp/src/components/HeapDetails.vue b/webapp/src/components/HeapDetails.vue
index bb2c8a27d..32d2ffd6a 100644
--- a/webapp/src/components/HeapDetails.vue
+++ b/webapp/src/components/HeapDetails.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('heapdetails.HeapDetails')" textVariant="text-bg-primary">
+    <CardElement :text="$t('heapdetails.HeapDetails')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>
diff --git a/webapp/src/components/InterfaceApInfo.vue b/webapp/src/components/InterfaceApInfo.vue
index f5e220544..18b8c3f30 100644
--- a/webapp/src/components/InterfaceApInfo.vue
+++ b/webapp/src/components/InterfaceApInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('interfaceapinfo.NetworkInterface')" textVariant="text-bg-primary">
+    <CardElement :text="$t('interfaceapinfo.NetworkInterface')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>
diff --git a/webapp/src/components/InterfaceNetworkInfo.vue b/webapp/src/components/InterfaceNetworkInfo.vue
index ea87dc5e0..832030cd9 100644
--- a/webapp/src/components/InterfaceNetworkInfo.vue
+++ b/webapp/src/components/InterfaceNetworkInfo.vue
@@ -2,6 +2,7 @@
     <CardElement
         :text="$t('interfacenetworkinfo.NetworkInterface', { iface: networkStatus.network_mode })"
         textVariant="text-bg-primary"
+        table
     >
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
diff --git a/webapp/src/components/MemoryInfo.vue b/webapp/src/components/MemoryInfo.vue
index 7fffbd810..321b9030a 100644
--- a/webapp/src/components/MemoryInfo.vue
+++ b/webapp/src/components/MemoryInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('memoryinfo.MemoryInformation')" textVariant="text-bg-primary">
+    <CardElement :text="$t('memoryinfo.MemoryInformation')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <thead>
diff --git a/webapp/src/components/PinInfo.vue b/webapp/src/components/PinInfo.vue
index a24103254..ee9359e3f 100644
--- a/webapp/src/components/PinInfo.vue
+++ b/webapp/src/components/PinInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('pininfo.PinOverview')" textVariant="text-bg-primary">
+    <CardElement :text="$t('pininfo.PinOverview')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <thead>
diff --git a/webapp/src/components/RadioInfo.vue b/webapp/src/components/RadioInfo.vue
index ed84e0fb8..758a710ca 100644
--- a/webapp/src/components/RadioInfo.vue
+++ b/webapp/src/components/RadioInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('radioinfo.RadioInformation')" textVariant="text-bg-primary">
+    <CardElement :text="$t('radioinfo.RadioInformation')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>
diff --git a/webapp/src/components/TaskDetails.vue b/webapp/src/components/TaskDetails.vue
index a9ab86ac3..badc5b815 100644
--- a/webapp/src/components/TaskDetails.vue
+++ b/webapp/src/components/TaskDetails.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('taskdetails.TaskDetails')" textVariant="text-bg-primary">
+    <CardElement :text="$t('taskdetails.TaskDetails')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>
diff --git a/webapp/src/components/WifiApInfo.vue b/webapp/src/components/WifiApInfo.vue
index 024ac7a63..0a8978912 100644
--- a/webapp/src/components/WifiApInfo.vue
+++ b/webapp/src/components/WifiApInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('wifiapinfo.WifiApInfo')" textVariant="text-bg-primary">
+    <CardElement :text="$t('wifiapinfo.WifiApInfo')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>
diff --git a/webapp/src/components/WifiStationInfo.vue b/webapp/src/components/WifiStationInfo.vue
index db13594cd..5143e4b4d 100644
--- a/webapp/src/components/WifiStationInfo.vue
+++ b/webapp/src/components/WifiStationInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('wifistationinfo.WifiStationInfo')" textVariant="text-bg-primary">
+    <CardElement :text="$t('wifistationinfo.WifiStationInfo')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>
diff --git a/webapp/src/views/MqttInfoView.vue b/webapp/src/views/MqttInfoView.vue
index c79a4366b..e55659f55 100644
--- a/webapp/src/views/MqttInfoView.vue
+++ b/webapp/src/views/MqttInfoView.vue
@@ -5,7 +5,7 @@
         :show-reload="true"
         @reload="getMqttInfo"
     >
-        <CardElement :text="$t('mqttinfo.ConfigurationSummary')" textVariant="text-bg-primary">
+        <CardElement :text="$t('mqttinfo.ConfigurationSummary')" textVariant="text-bg-primary" table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
@@ -112,7 +112,7 @@
             </div>
         </CardElement>
 
-        <CardElement :text="$t('mqttinfo.HassSummary')" textVariant="text-bg-primary" add-space>
+        <CardElement :text="$t('mqttinfo.HassSummary')" textVariant="text-bg-primary" add-space table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
@@ -165,7 +165,7 @@
             </div>
         </CardElement>
 
-        <CardElement :text="$t('mqttinfo.RuntimeSummary')" textVariant="text-bg-primary" add-space>
+        <CardElement :text="$t('mqttinfo.RuntimeSummary')" textVariant="text-bg-primary" add-space table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
diff --git a/webapp/src/views/NtpInfoView.vue b/webapp/src/views/NtpInfoView.vue
index 68100d1c8..29aa00e43 100644
--- a/webapp/src/views/NtpInfoView.vue
+++ b/webapp/src/views/NtpInfoView.vue
@@ -1,6 +1,6 @@
 <template>
     <BasePage :title="$t('ntpinfo.NtpInformation')" :isLoading="dataLoading" :show-reload="true" @reload="getNtpInfo">
-        <CardElement :text="$t('ntpinfo.ConfigurationSummary')" textVariant="text-bg-primary">
+        <CardElement :text="$t('ntpinfo.ConfigurationSummary')" textVariant="text-bg-primary" table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
@@ -21,7 +21,7 @@
             </div>
         </CardElement>
 
-        <CardElement :text="$t('ntpinfo.CurrentTime')" textVariant="text-bg-primary" add-space>
+        <CardElement :text="$t('ntpinfo.CurrentTime')" textVariant="text-bg-primary" add-space table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
diff --git a/webapp/src/views/VedirectInfoView.vue b/webapp/src/views/VedirectInfoView.vue
index 0a1fdd8c8..aff6da75f 100644
--- a/webapp/src/views/VedirectInfoView.vue
+++ b/webapp/src/views/VedirectInfoView.vue
@@ -1,6 +1,6 @@
 <template>
     <BasePage :title="$t('vedirectinfo.VedirectInformation')" :isLoading="dataLoading">
-        <CardElement :text="$t('vedirectinfo.ConfigurationSummary')" textVariant="text-bg-primary">
+        <CardElement :text="$t('vedirectinfo.ConfigurationSummary')" textVariant="text-bg-primary" table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>

From 4441f3827cb4ae5aa084a8a40214c354aa09fc8c Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 22:45:53 +0200
Subject: [PATCH 10/33] webapp: adjust look of tables in accordions to live
 view cards

this is relevant for the radio statistics table, as well as the tables
in the grid profile modal.
---
 webapp/src/components/GridProfile.vue |  6 +++++-
 webapp/src/scss/styles.scss           | 10 ++++++++++
 webapp/src/views/HomeView.vue         |  2 +-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/GridProfile.vue b/webapp/src/components/GridProfile.vue
index 8385dd479..a9e7f26de 100644
--- a/webapp/src/components/GridProfile.vue
+++ b/webapp/src/components/GridProfile.vue
@@ -19,7 +19,11 @@
         </table>
 
         <div class="accordion" id="accordionProfile">
-            <div class="accordion-item" v-for="(section, index) in gridProfileList.sections" :key="index">
+            <div
+                class="accordion-item accordion-table"
+                v-for="(section, index) in gridProfileList.sections"
+                :key="index"
+            >
                 <h2 class="accordion-header">
                     <button
                         class="accordion-button collapsed"
diff --git a/webapp/src/scss/styles.scss b/webapp/src/scss/styles.scss
index 34d352983..b1b454fab 100644
--- a/webapp/src/scss/styles.scss
+++ b/webapp/src/scss/styles.scss
@@ -35,6 +35,16 @@ div.card.card-table tr > :last-child {
     padding-right: var(--bs-card-cap-padding-x);
 }
 
+div.accordion-item.accordion-table tr > :first-child {
+    padding-left: var(--bs-accordion-btn-padding-x);
+}
+
+div.accordion-item.accordion-table div.accordion-body {
+    padding-top: 0;
+    padding-left: 0;
+    padding-right: 0;
+}
+
 div.card.card-table div.card-body {
     padding: 0;
 }
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index 8d81061c2..532f2d211 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -223,7 +223,7 @@
                             </BootstrapAlert>
 
                             <div class="accordion mt-5" id="accordionRadioStats">
-                                <div class="accordion-item">
+                                <div class="accordion-item accordion-table">
                                     <h2 class="accordion-header">
                                         <button
                                             class="accordion-button collapsed"

From 7197dc634a732ba78c873c4bb9269e406291a37c Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 22:49:32 +0200
Subject: [PATCH 11/33] webapp: beautify radio statistics reset button

it would be nice to have this in the header of the accordion, which is
hard, but doable. however, clicking the button then also toggles the
accordion, which is unacceptable. preventing that seems non-trivial, as
the @click.stop() is not enough. also, nesting interactive elements is
simply bad practice. the button can also go to the right of header, with
reasonable effort, but the corner radii are then messed up and would
need to react interactively (accordion collapsed or not), which is also
a pain.

we now "float" the reset button to the right, add a nice icon, and give
the button some space so it at least looks like it belongs there.
---
 webapp/src/views/HomeView.vue | 36 ++++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index 532f2d211..e50098fb7 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -314,23 +314,25 @@
                                                     </tr>
                                                 </tbody>
                                             </table>
-                                            <button
-                                                :disabled="!isLogged || performRadioStatsReset"
-                                                type="button"
-                                                class="btn btn-danger"
-                                                @click="onResetRadioStats(inverter.serial)"
-                                            >
-                                                <template v-if="!performRadioStatsReset">
-                                                    {{ $t('home.StatsReset') }}
-                                                </template>
-                                                <template v-else>
-                                                    <span
-                                                        class="spinner-border spinner-border-sm"
-                                                        aria-hidden="true"
-                                                    ></span>
-                                                    <span role="status"> {{ $t('home.StatsResetting') }}</span>
-                                                </template>
-                                            </button>
+                                            <div class="d-flex">
+                                                <button
+                                                    :disabled="!isLogged || performRadioStatsReset"
+                                                    type="button"
+                                                    class="btn btn-danger ms-auto me-3 mt-3"
+                                                    @click="onResetRadioStats(inverter.serial)"
+                                                >
+                                                    <template v-if="!performRadioStatsReset">
+                                                        <BIconArrowCounterclockwise />&nbsp;{{ $t('home.StatsReset') }}
+                                                    </template>
+                                                    <template v-else>
+                                                        <span
+                                                            class="spinner-border spinner-border-sm"
+                                                            aria-hidden="true"
+                                                        ></span>
+                                                        <span role="status">&nbsp;{{ $t('home.StatsResetting') }}</span>
+                                                    </template>
+                                                </button>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>

From a0faf960a650828bc890df215f1382f47dd059d2 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 21:46:15 +0200
Subject: [PATCH 12/33] webapp: fix inverter "add" and "save order" button
 positions

the source tells us that the buttons are supposed to be on the right of
tha card, but the CSS broke at some point.
---
 webapp/src/views/InverterAdminView.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/webapp/src/views/InverterAdminView.vue b/webapp/src/views/InverterAdminView.vue
index 548c8ff54..36680b1fb 100644
--- a/webapp/src/views/InverterAdminView.vue
+++ b/webapp/src/views/InverterAdminView.vue
@@ -20,8 +20,8 @@
                         required
                     />
                 </div>
-                <div class="ml-auto text-right">
-                    <button type="submit" class="btn btn-primary my-2">
+                <div class="d-flex my-3">
+                    <button type="submit" class="btn btn-primary ms-auto">
                         {{ $t('inverteradmin.Add') }}
                     </button>
                 </div>
@@ -81,8 +81,8 @@
                     </tbody>
                 </table>
             </div>
-            <div class="ml-auto text-right">
-                <button class="btn btn-primary my-2" @click="onSaveOrder()">
+            <div class="d-flex mt-1 mb-3">
+                <button class="btn btn-primary ms-auto" @click="onSaveOrder()">
                     {{ $t('inverteradmin.SaveOrder') }}
                 </button>
             </div>

From a2d79aada091c21d5e8d17157d85dc5e7390dc0c Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 22:16:20 +0200
Subject: [PATCH 13/33] webapp: do not use div with v-if but template elements

when using v-if on a div element, the div will be part of the DOM in
case the condition is true. if we group elements to use v-if on the
group, we shall use a template element, so the group elements appear
as siblings of the other elements.

in particular, these spurious div do not mess up our CSS patch that sets
the bottom margin for the last child in a card to "auto".
---
 webapp/src/views/NetworkAdminView.vue      |  4 ++--
 webapp/src/views/PowerLimiterAdminView.vue | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/webapp/src/views/NetworkAdminView.vue b/webapp/src/views/NetworkAdminView.vue
index 058dfe322..43a636658 100644
--- a/webapp/src/views/NetworkAdminView.vue
+++ b/webapp/src/views/NetworkAdminView.vue
@@ -89,7 +89,7 @@
                     type="checkbox"
                 />
 
-                <div v-if="networkConfigList.syslogenabled">
+                <template v-if="networkConfigList.syslogenabled">
                     <InputElement
                         :label="$t('networkadmin.SyslogHostname')"
                         v-model="networkConfigList.sysloghostname"
@@ -104,7 +104,7 @@
                         min="1"
                         max="65535"
                     />
-                </div>
+                </template>
             </CardElement>
 
             <CardElement :text="$t('networkadmin.AdminAp')" textVariant="text-bg-primary" add-space>
diff --git a/webapp/src/views/PowerLimiterAdminView.vue b/webapp/src/views/PowerLimiterAdminView.vue
index 05b7bdd9c..639641a40 100644
--- a/webapp/src/views/PowerLimiterAdminView.vue
+++ b/webapp/src/views/PowerLimiterAdminView.vue
@@ -228,7 +228,7 @@
                     wide
                 />
 
-                <div v-if="powerLimiterConfigList.solar_passthrough_enabled">
+                <template v-if="powerLimiterConfigList.solar_passthrough_enabled">
                     <InputElement
                         :label="$t('powerlimiteradmin.SolarPassthroughLosses')"
                         v-model="powerLimiterConfigList.solar_passthrough_losses"
@@ -245,7 +245,7 @@
                         role="alert"
                         v-html="$t('powerlimiteradmin.SolarPassthroughLossesInfo')"
                     ></div>
-                </div>
+                </template>
             </CardElement>
 
             <CardElement
@@ -261,7 +261,7 @@
                     wide
                 />
 
-                <div v-if="!powerLimiterConfigList.ignore_soc">
+                <template v-if="!powerLimiterConfigList.ignore_soc">
                     <div
                         class="alert alert-secondary"
                         role="alert"
@@ -302,7 +302,7 @@
                         type="number"
                         wide
                     />
-                </div>
+                </template>
             </CardElement>
 
             <CardElement
@@ -335,7 +335,7 @@
                     wide
                 />
 
-                <div v-if="isSolarPassthroughEnabled()">
+                <template v-if="isSolarPassthroughEnabled()">
                     <InputElement
                         :label="$t('powerlimiteradmin.FullSolarPassthroughStartThreshold')"
                         :tooltip="$t('powerlimiteradmin.FullSolarPassthroughStartThresholdHint')"
@@ -360,7 +360,7 @@
                         step="0.01"
                         wide
                     />
-                </div>
+                </template>
 
                 <InputElement
                     :label="$t('powerlimiteradmin.VoltageLoadCorrectionFactor')"

From 49dfaee776876c7099db3768c695852232c05b57 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sun, 27 Oct 2024 18:07:22 +0100
Subject: [PATCH 14/33] webapp: avoid spurious DOM elements, avoid v-show, use
 v-if

avoid hidden (but existing) or simply redundant DOM elements from
messing with the style sheet, which uses :last-child in particular to
fix up the margin on the bottom of cards.
---
 webapp/src/components/HttpRequestSettings.vue | 116 +++++++++---------
 webapp/src/views/AcChargerAdminView.vue       |  89 +++++++-------
 webapp/src/views/BatteryAdminView.vue         |  45 +++----
 webapp/src/views/PowerMeterAdminView.vue      |  65 +++++-----
 4 files changed, 159 insertions(+), 156 deletions(-)

diff --git a/webapp/src/components/HttpRequestSettings.vue b/webapp/src/components/HttpRequestSettings.vue
index 66b252efc..ef15ce562 100644
--- a/webapp/src/components/HttpRequestSettings.vue
+++ b/webapp/src/components/HttpRequestSettings.vue
@@ -1,70 +1,68 @@
 <template>
-    <div>
-        <InputElement
-            :label="$t('httprequestsettings.url')"
-            v-model="cfg.url"
-            type="text"
-            maxlength="1024"
-            placeholder="http://admin:supersecret@mypowermeter.home/status"
-            prefix="GET "
-            :tooltip="$t('httprequestsettings.urlDescription')"
-            wide
-        />
+    <InputElement
+        :label="$t('httprequestsettings.url')"
+        v-model="cfg.url"
+        type="text"
+        maxlength="1024"
+        placeholder="http://admin:supersecret@mypowermeter.home/status"
+        prefix="GET "
+        :tooltip="$t('httprequestsettings.urlDescription')"
+        wide
+    />
 
-        <div class="row mb-3">
-            <label for="auth_type" class="col-sm-4 col-form-label">{{ $t('httprequestsettings.authorization') }}</label>
-            <div class="col-sm-8">
-                <select id="auth_type" class="form-select" v-model="cfg.auth_type">
-                    <option v-for="a in authTypeList" :key="a.key" :value="a.key">
-                        {{ $t('httprequestsettings.authType' + a.value) }}
-                    </option>
-                </select>
-            </div>
+    <div class="row mb-3">
+        <label for="auth_type" class="col-sm-4 col-form-label">{{ $t('httprequestsettings.authorization') }}</label>
+        <div class="col-sm-8">
+            <select id="auth_type" class="form-select" v-model="cfg.auth_type">
+                <option v-for="a in authTypeList" :key="a.key" :value="a.key">
+                    {{ $t('httprequestsettings.authType' + a.value) }}
+                </option>
+            </select>
         </div>
+    </div>
 
-        <InputElement
-            v-if="cfg.auth_type != 0"
-            :label="$t('httprequestsettings.username')"
-            v-model="cfg.username"
-            type="text"
-            maxlength="64"
-            wide
-        />
+    <InputElement
+        v-if="cfg.auth_type != 0"
+        :label="$t('httprequestsettings.username')"
+        v-model="cfg.username"
+        type="text"
+        maxlength="64"
+        wide
+    />
 
-        <InputElement
-            v-if="cfg.auth_type != 0"
-            :label="$t('httprequestsettings.password')"
-            v-model="cfg.password"
-            type="password"
-            maxlength="64"
-            wide
-        />
+    <InputElement
+        v-if="cfg.auth_type != 0"
+        :label="$t('httprequestsettings.password')"
+        v-model="cfg.password"
+        type="password"
+        maxlength="64"
+        wide
+    />
 
-        <InputElement
-            :label="$t('httprequestsettings.headerKey')"
-            v-model="cfg.header_key"
-            type="text"
-            maxlength="64"
-            :tooltip="$t('httprequestsettings.headerKeyDescription')"
-            wide
-        />
+    <InputElement
+        :label="$t('httprequestsettings.headerKey')"
+        v-model="cfg.header_key"
+        type="text"
+        maxlength="64"
+        :tooltip="$t('httprequestsettings.headerKeyDescription')"
+        wide
+    />
 
-        <InputElement
-            :label="$t('httprequestsettings.headerValue')"
-            v-model="cfg.header_value"
-            type="text"
-            maxlength="256"
-            wide
-        />
+    <InputElement
+        :label="$t('httprequestsettings.headerValue')"
+        v-model="cfg.header_value"
+        type="text"
+        maxlength="256"
+        wide
+    />
 
-        <InputElement
-            :label="$t('httprequestsettings.timeout')"
-            v-model="cfg.timeout"
-            type="number"
-            :postfix="$t('httprequestsettings.milliSeconds')"
-            wide
-        />
-    </div>
+    <InputElement
+        :label="$t('httprequestsettings.timeout')"
+        v-model="cfg.timeout"
+        type="number"
+        :postfix="$t('httprequestsettings.milliSeconds')"
+        wide
+    />
 </template>
 
 <script lang="ts">
diff --git a/webapp/src/views/AcChargerAdminView.vue b/webapp/src/views/AcChargerAdminView.vue
index d8ae820e6..390315ce5 100644
--- a/webapp/src/views/AcChargerAdminView.vue
+++ b/webapp/src/views/AcChargerAdminView.vue
@@ -13,60 +13,59 @@
                     wide
                 />
 
-                <div class="row mb-3" v-show="acChargerConfigList.enabled">
-                    <label class="col-sm-4 col-form-label">
-                        {{ $t('acchargeradmin.CanControllerFrequency') }}
-                    </label>
-                    <div class="col-sm-8">
-                        <select class="form-select" v-model="acChargerConfigList.can_controller_frequency">
-                            <option
-                                v-for="frequency in frequencyTypeList"
-                                :key="frequency.key"
-                                :value="frequency.value"
-                            >
-                                {{ frequency.key }} MHz
-                            </option>
-                        </select>
+                <template v-if="acChargerConfigList.enabled">
+                    <div class="row mb-3">
+                        <label class="col-sm-4 col-form-label">
+                            {{ $t('acchargeradmin.CanControllerFrequency') }}
+                        </label>
+                        <div class="col-sm-8">
+                            <select class="form-select" v-model="acChargerConfigList.can_controller_frequency">
+                                <option
+                                    v-for="frequency in frequencyTypeList"
+                                    :key="frequency.key"
+                                    :value="frequency.value"
+                                >
+                                    {{ frequency.key }} MHz
+                                </option>
+                            </select>
+                        </div>
                     </div>
-                </div>
 
-                <InputElement
-                    v-show="acChargerConfigList.enabled"
-                    :label="$t('acchargeradmin.VerboseLogging')"
-                    v-model="acChargerConfigList.verbose_logging"
-                    type="checkbox"
-                    wide
-                />
+                    <InputElement
+                        :label="$t('acchargeradmin.VerboseLogging')"
+                        v-model="acChargerConfigList.verbose_logging"
+                        type="checkbox"
+                        wide
+                    />
 
-                <InputElement
-                    v-show="acChargerConfigList.enabled"
-                    :label="$t('acchargeradmin.EnableAutoPower')"
-                    v-model="acChargerConfigList.auto_power_enabled"
-                    type="checkbox"
-                    wide
-                />
+                    <InputElement
+                        :label="$t('acchargeradmin.EnableAutoPower')"
+                        v-model="acChargerConfigList.auto_power_enabled"
+                        type="checkbox"
+                        wide
+                    />
 
-                <InputElement
-                    v-show="acChargerConfigList.enabled && acChargerConfigList.auto_power_enabled"
-                    :label="$t('acchargeradmin.EnableBatterySoCLimits')"
-                    v-model="acChargerConfigList.auto_power_batterysoc_limits_enabled"
-                    type="checkbox"
-                    wide
-                />
+                    <InputElement
+                        v-if="acChargerConfigList.auto_power_enabled"
+                        :label="$t('acchargeradmin.EnableBatterySoCLimits')"
+                        v-model="acChargerConfigList.auto_power_batterysoc_limits_enabled"
+                        type="checkbox"
+                        wide
+                    />
 
-                <InputElement
-                    v-show="acChargerConfigList.enabled"
-                    :label="$t('acchargeradmin.EnableEmergencyCharge')"
-                    v-model="acChargerConfigList.emergency_charge_enabled"
-                    type="checkbox"
-                    wide
-                />
+                    <InputElement
+                        :label="$t('acchargeradmin.EnableEmergencyCharge')"
+                        v-model="acChargerConfigList.emergency_charge_enabled"
+                        type="checkbox"
+                        wide
+                    />
+                </template>
 
                 <CardElement
                     :text="$t('acchargeradmin.Limits')"
                     textVariant="text-bg-primary"
                     add-space
-                    v-show="acChargerConfigList.auto_power_enabled || acChargerConfigList.emergency_charge_enabled"
+                    v-if="acChargerConfigList.auto_power_enabled || acChargerConfigList.emergency_charge_enabled"
                 >
                     <div class="row mb-3">
                         <label for="voltageLimit" class="col-sm-2 col-form-label"
@@ -174,7 +173,7 @@
                     :text="$t('acchargeradmin.BatterySoCLimits')"
                     textVariant="text-bg-primary"
                     add-space
-                    v-show="
+                    v-if="
                         acChargerConfigList.auto_power_enabled &&
                         acChargerConfigList.auto_power_batterysoc_limits_enabled
                     "
diff --git a/webapp/src/views/BatteryAdminView.vue b/webapp/src/views/BatteryAdminView.vue
index 46bd5da79..d0090a76b 100644
--- a/webapp/src/views/BatteryAdminView.vue
+++ b/webapp/src/views/BatteryAdminView.vue
@@ -13,30 +13,31 @@
                     wide
                 />
 
-                <InputElement
-                    v-show="batteryConfigList.enabled"
-                    :label="$t('batteryadmin.VerboseLogging')"
-                    v-model="batteryConfigList.verbose_logging"
-                    type="checkbox"
-                    wide
-                />
+                <template v-if="batteryConfigList.enabled">
+                    <InputElement
+                        :label="$t('batteryadmin.VerboseLogging')"
+                        v-model="batteryConfigList.verbose_logging"
+                        type="checkbox"
+                        wide
+                    />
 
-                <div class="row mb-3" v-show="batteryConfigList.enabled">
-                    <label class="col-sm-4 col-form-label">
-                        {{ $t('batteryadmin.Provider') }}
-                    </label>
-                    <div class="col-sm-8">
-                        <select class="form-select" v-model="batteryConfigList.provider">
-                            <option v-for="provider in providerTypeList" :key="provider.key" :value="provider.key">
-                                {{ $t(`batteryadmin.Provider` + provider.value) }}
-                            </option>
-                        </select>
+                    <div class="row mb-3">
+                        <label class="col-sm-4 col-form-label">
+                            {{ $t('batteryadmin.Provider') }}
+                        </label>
+                        <div class="col-sm-8">
+                            <select class="form-select" v-model="batteryConfigList.provider">
+                                <option v-for="provider in providerTypeList" :key="provider.key" :value="provider.key">
+                                    {{ $t(`batteryadmin.Provider` + provider.value) }}
+                                </option>
+                            </select>
+                        </div>
                     </div>
-                </div>
+                </template>
             </CardElement>
 
             <CardElement
-                v-show="batteryConfigList.enabled && batteryConfigList.provider == 1"
+                v-if="batteryConfigList.enabled && batteryConfigList.provider == 1"
                 :text="$t('batteryadmin.JkBmsConfiguration')"
                 textVariant="text-bg-primary"
                 addSpace
@@ -152,7 +153,7 @@
 
                     <InputElement
                         :label="$t('batteryadmin.DischargeCurrentLimitBelowSoc')"
-                        v-show="batteryConfigList.enabled"
+                        v-if="batteryConfigList.enabled"
                         v-model="batteryConfigList.discharge_current_limit_below_soc"
                         type="number"
                         min="0"
@@ -165,7 +166,7 @@
 
                     <InputElement
                         :label="$t('batteryadmin.DischargeCurrentLimitBelowVoltage')"
-                        v-show="batteryConfigList.enabled"
+                        v-if="batteryConfigList.enabled"
                         v-model="batteryConfigList.discharge_current_limit_below_voltage"
                         type="number"
                         min="0"
@@ -196,7 +197,7 @@
                             <div
                                 class="alert alert-secondary"
                                 role="alert"
-                                v-show="batteryConfigList.enabled"
+                                v-if="batteryConfigList.enabled"
                                 v-html="$t('batteryadmin.BatteryReportedDischargeCurrentLimitInfo')"
                             ></div>
 
diff --git a/webapp/src/views/PowerMeterAdminView.vue b/webapp/src/views/PowerMeterAdminView.vue
index c0a9514c1..82a7aaee9 100644
--- a/webapp/src/views/PowerMeterAdminView.vue
+++ b/webapp/src/views/PowerMeterAdminView.vue
@@ -13,30 +13,35 @@
                     wide
                 />
 
-                <InputElement
-                    v-show="powerMeterConfigList.enabled"
-                    :label="$t('powermeteradmin.VerboseLogging')"
-                    v-model="powerMeterConfigList.verbose_logging"
-                    type="checkbox"
-                    wide
-                />
+                <template v-if="powerMeterConfigList.enabled">
+                    <InputElement
+                        :label="$t('powermeteradmin.VerboseLogging')"
+                        v-model="powerMeterConfigList.verbose_logging"
+                        type="checkbox"
+                        wide
+                    />
 
-                <div class="row mb-3" v-show="powerMeterConfigList.enabled">
-                    <label for="inputPowerMeterSource" class="col-sm-4 col-form-label">{{
-                        $t('powermeteradmin.PowerMeterSource')
-                    }}</label>
-                    <div class="col-sm-8">
-                        <select id="inputPowerMeterSource" class="form-select" v-model="powerMeterConfigList.source">
-                            <option v-for="source in powerMeterSourceList" :key="source.key" :value="source.key">
-                                {{ source.value }}
-                            </option>
-                        </select>
+                    <div class="row mb-3">
+                        <label for="inputPowerMeterSource" class="col-sm-4 col-form-label">{{
+                            $t('powermeteradmin.PowerMeterSource')
+                        }}</label>
+                        <div class="col-sm-8">
+                            <select
+                                id="inputPowerMeterSource"
+                                class="form-select"
+                                v-model="powerMeterConfigList.source"
+                            >
+                                <option v-for="source in powerMeterSourceList" :key="source.key" :value="source.key">
+                                    {{ source.value }}
+                                </option>
+                            </select>
+                        </div>
                     </div>
-                </div>
+                </template>
             </CardElement>
 
-            <div v-if="powerMeterConfigList.enabled">
-                <div v-if="powerMeterConfigList.source === 0 || powerMeterConfigList.source === 3">
+            <template v-if="powerMeterConfigList.enabled">
+                <template v-if="powerMeterConfigList.source === 0 || powerMeterConfigList.source === 3">
                     <div class="alert alert-secondary mt-5" role="alert">
                         <h2>{{ $t('powermeteradmin.jsonPathExamplesHeading') }}:</h2>
                         {{ $t('powermeteradmin.jsonPathExamplesExplanation') }}
@@ -58,10 +63,10 @@
                             <li><code>total</code> &mdash; <code>{ "othervalue": 66, "total": 123.4 }</code></li>
                         </ul>
                     </div>
-                </div>
+                </template>
 
                 <!-- yarn linter wants us to not combine v-if with v-for, so we need to wrap the CardElements //-->
-                <div v-if="powerMeterConfigList.source === 0">
+                <template v-if="powerMeterConfigList.source === 0">
                     <CardElement
                         v-for="(mqtt, index) in powerMeterConfigList.mqtt.values"
                         v-bind:key="index"
@@ -107,7 +112,7 @@
                             wide
                         />
                     </CardElement>
-                </div>
+                </template>
 
                 <CardElement
                     v-if="powerMeterConfigList.source === 1 || powerMeterConfigList.source === 2"
@@ -133,7 +138,7 @@
                     />
                 </CardElement>
 
-                <div v-if="powerMeterConfigList.source === 3">
+                <template v-if="powerMeterConfigList.source === 3">
                     <div class="alert alert-secondary mt-5" role="alert">
                         <h2>{{ $t('powermeteradmin.urlExamplesHeading') }}:</h2>
                         <ul>
@@ -178,7 +183,7 @@
                             wide
                         />
 
-                        <div v-if="httpJson.enabled || index == 0">
+                        <template v-if="httpJson.enabled || index == 0">
                             <HttpRequestSettings
                                 v-model="httpJson.http_request"
                                 v-if="index == 0 || powerMeterConfigList.http_json.individual_requests"
@@ -213,7 +218,7 @@
                                 type="checkbox"
                                 wide
                             />
-                        </div>
+                        </template>
                     </CardElement>
 
                     <CardElement
@@ -235,9 +240,9 @@
                             {{ testHttpJsonRequestAlert.message }}
                         </BootstrapAlert>
                     </CardElement>
-                </div>
+                </template>
 
-                <div v-if="powerMeterConfigList.source === 6">
+                <template v-if="powerMeterConfigList.source === 6">
                     <CardElement :text="$t('powermeteradmin.HTTP_SML')" textVariant="text-bg-primary" add-space>
                         <InputElement
                             :label="$t('powermeteradmin.pollingInterval')"
@@ -271,8 +276,8 @@
                             {{ testHttpSmlRequestAlert.message }}
                         </BootstrapAlert>
                     </CardElement>
-                </div>
-            </div>
+                </template>
+            </template>
 
             <FormFooter @reload="getPowerMeterConfig" />
         </form>

From 7905baa9036cbb8852472d28cf9a92c2d9a4fcb7 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 22:19:11 +0200
Subject: [PATCH 15/33] webapp: optimize spacing on bottom of cards

if the last child in a card (div.card > div.card-body) adds bottom
marging, we don't want the card to add more space through its
padding-bottom. most cards have children that add sufficient space
at the bottom anyways.
---
 webapp/src/scss/styles.scss            | 4 ++++
 webapp/src/views/DtuAdminView.vue      | 4 ++--
 webapp/src/views/InverterAdminView.vue | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/webapp/src/scss/styles.scss b/webapp/src/scss/styles.scss
index b1b454fab..bdad04153 100644
--- a/webapp/src/scss/styles.scss
+++ b/webapp/src/scss/styles.scss
@@ -48,3 +48,7 @@ div.accordion-item.accordion-table div.accordion-body {
 div.card.card-table div.card-body {
     padding: 0;
 }
+
+div.card div.card-body > :last-child {
+    margin-bottom: auto !important;
+}
diff --git a/webapp/src/views/DtuAdminView.vue b/webapp/src/views/DtuAdminView.vue
index 668c3edee..74f33afb7 100644
--- a/webapp/src/views/DtuAdminView.vue
+++ b/webapp/src/views/DtuAdminView.vue
@@ -50,7 +50,7 @@
                         <BIconInfoCircle v-tooltip :title="$t('dtuadmin.CmtPaLevelHint')" />
                     </label>
                     <div class="col-sm-10">
-                        <div class="input-group mb-3">
+                        <div class="input-group">
                             <input
                                 type="range"
                                 class="form-control form-range"
@@ -91,7 +91,7 @@
                         <BIconInfoCircle v-tooltip :title="$t('dtuadmin.CmtFrequencyHint')" />
                     </label>
                     <div class="col-sm-10">
-                        <div class="input-group mb-3">
+                        <div class="input-group">
                             <input
                                 type="range"
                                 class="form-control form-range"
diff --git a/webapp/src/views/InverterAdminView.vue b/webapp/src/views/InverterAdminView.vue
index 36680b1fb..341279b3a 100644
--- a/webapp/src/views/InverterAdminView.vue
+++ b/webapp/src/views/InverterAdminView.vue
@@ -25,8 +25,8 @@
                         {{ $t('inverteradmin.Add') }}
                     </button>
                 </div>
-                <div class="alert alert-secondary" role="alert" v-html="$t('inverteradmin.AddHint')"></div>
             </form>
+            <div class="alert alert-secondary" role="alert" v-html="$t('inverteradmin.AddHint')"></div>
         </CardElement>
 
         <CardElement :text="$t('inverteradmin.InverterList')" textVariant="text-bg-primary" add-space>

From 723d3f15bb0324a2756003b206795a897677e9cc Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 23:08:58 +0200
Subject: [PATCH 16/33] webapp: MQTT: use v-if in favor of v-show

if we hide elements (which is done using style="display:none;"), they
are still part of the DOM and mess with CSS rules that shall apply to
the last element of a card or the last row of a table.
---
 webapp/src/views/MqttAdminView.vue | 18 +++++++++---------
 webapp/src/views/MqttInfoView.vue  |  4 ++--
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/webapp/src/views/MqttAdminView.vue b/webapp/src/views/MqttAdminView.vue
index 0420a1fce..daa9fb4b8 100644
--- a/webapp/src/views/MqttAdminView.vue
+++ b/webapp/src/views/MqttAdminView.vue
@@ -14,7 +14,7 @@
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_enabled"
+                    v-if="mqttConfigList.mqtt_enabled"
                     :label="$t('mqttadmin.VerboseLogging')"
                     v-model="mqttConfigList.mqtt_verbose_logging"
                     type="checkbox"
@@ -22,7 +22,7 @@
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_enabled"
+                    v-if="mqttConfigList.mqtt_enabled"
                     :label="$t('mqttadmin.EnableHass')"
                     v-model="mqttConfigList.mqtt_hass_enabled"
                     type="checkbox"
@@ -34,7 +34,7 @@
                 :text="$t('mqttadmin.MqttBrokerParameter')"
                 textVariant="text-bg-primary"
                 add-space
-                v-show="mqttConfigList.mqtt_enabled"
+                v-if="mqttConfigList.mqtt_enabled"
             >
                 <InputElement
                     :label="$t('mqttadmin.Hostname')"
@@ -107,7 +107,7 @@
                 <InputElement :label="$t('mqttadmin.EnableTls')" v-model="mqttConfigList.mqtt_tls" type="checkbox" />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_tls"
+                    v-if="mqttConfigList.mqtt_tls"
                     :label="$t('mqttadmin.RootCa')"
                     v-model="mqttConfigList.mqtt_root_ca_cert"
                     type="textarea"
@@ -116,14 +116,14 @@
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_tls"
+                    v-if="mqttConfigList.mqtt_tls"
                     :label="$t('mqttadmin.TlsCertLoginEnable')"
                     v-model="mqttConfigList.mqtt_tls_cert_login"
                     type="checkbox"
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_tls_cert_login"
+                    v-if="mqttConfigList.mqtt_tls_cert_login"
                     :label="$t('mqttadmin.ClientCert')"
                     v-model="mqttConfigList.mqtt_client_cert"
                     type="textarea"
@@ -132,7 +132,7 @@
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_tls_cert_login"
+                    v-if="mqttConfigList.mqtt_tls_cert_login"
                     :label="$t('mqttadmin.ClientKey')"
                     v-model="mqttConfigList.mqtt_client_key"
                     type="textarea"
@@ -145,7 +145,7 @@
                 :text="$t('mqttadmin.LwtParameters')"
                 textVariant="text-bg-primary"
                 add-space
-                v-show="mqttConfigList.mqtt_enabled"
+                v-if="mqttConfigList.mqtt_enabled"
             >
                 <InputElement
                     :label="$t('mqttadmin.LwtTopic')"
@@ -190,7 +190,7 @@
                 :text="$t('mqttadmin.HassParameters')"
                 textVariant="text-bg-primary"
                 add-space
-                v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled"
+                v-if="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled"
             >
                 <InputElement
                     :label="$t('mqttadmin.HassPrefixTopic')"
diff --git a/webapp/src/views/MqttInfoView.vue b/webapp/src/views/MqttInfoView.vue
index e55659f55..1ffb67f57 100644
--- a/webapp/src/views/MqttInfoView.vue
+++ b/webapp/src/views/MqttInfoView.vue
@@ -89,7 +89,7 @@
                                 />
                             </td>
                         </tr>
-                        <tr v-show="mqttDataList.mqtt_tls">
+                        <tr v-if="mqttDataList.mqtt_tls">
                             <th>{{ $t('mqttinfo.RootCertifcateInfo') }}</th>
                             <td>{{ mqttDataList.mqtt_root_ca_cert_info }}</td>
                         </tr>
@@ -103,7 +103,7 @@
                                 />
                             </td>
                         </tr>
-                        <tr v-show="mqttDataList.mqtt_tls_cert_login">
+                        <tr v-if="mqttDataList.mqtt_tls_cert_login">
                             <th>{{ $t('mqttinfo.ClientCertifcateInfo') }}</th>
                             <td>{{ mqttDataList.mqtt_client_cert_info }}</td>
                         </tr>

From d8a701031fa9b27c569ec54aabb153f65e5aeb81 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 23:11:17 +0200
Subject: [PATCH 17/33] webapp: MQTT: no login with cert if TLS disabled

in the settings view we hide the "login with cert" setting while TLS is
disabled, so we should also hide that info in the info view when TLS is
disabled.
---
 webapp/src/views/MqttInfoView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/views/MqttInfoView.vue b/webapp/src/views/MqttInfoView.vue
index 1ffb67f57..7aaed981a 100644
--- a/webapp/src/views/MqttInfoView.vue
+++ b/webapp/src/views/MqttInfoView.vue
@@ -93,7 +93,7 @@
                             <th>{{ $t('mqttinfo.RootCertifcateInfo') }}</th>
                             <td>{{ mqttDataList.mqtt_root_ca_cert_info }}</td>
                         </tr>
-                        <tr>
+                        <tr v-if="mqttDataList.mqtt_tls">
                             <th>{{ $t('mqttinfo.TlsCertLogin') }}</th>
                             <td>
                                 <StatusBadge
@@ -103,7 +103,7 @@
                                 />
                             </td>
                         </tr>
-                        <tr v-if="mqttDataList.mqtt_tls_cert_login">
+                        <tr v-if="mqttDataList.mqtt_tls && mqttDataList.mqtt_tls_cert_login">
                             <th>{{ $t('mqttinfo.ClientCertifcateInfo') }}</th>
                             <td>{{ mqttDataList.mqtt_client_cert_info }}</td>
                         </tr>

From 9a04a5ce62988537fa164c90170a44022dad4862 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 23:23:08 +0200
Subject: [PATCH 18/33] webapp: avoid inline style for inverter channel info
 value

---
 webapp/src/components/InverterChannelInfo.vue | 2 +-
 webapp/src/scss/styles.scss                   | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/webapp/src/components/InverterChannelInfo.vue b/webapp/src/components/InverterChannelInfo.vue
index 359d20738..b7ebc27ba 100644
--- a/webapp/src/components/InverterChannelInfo.vue
+++ b/webapp/src/components/InverterChannelInfo.vue
@@ -25,7 +25,7 @@
                     <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
                         <template v-if="key != 'name' && property">
                             <th scope="row">{{ $t('inverterchannelproperty.' + key) }}</th>
-                            <td style="text-align: right; padding-right: 0">
+                            <td class="value">
                                 {{
                                     $n(property.v, 'decimal', {
                                         minimumFractionDigits: property.d,
diff --git a/webapp/src/scss/styles.scss b/webapp/src/scss/styles.scss
index bdad04153..4c468e54d 100644
--- a/webapp/src/scss/styles.scss
+++ b/webapp/src/scss/styles.scss
@@ -52,3 +52,8 @@ div.card.card-table div.card-body {
 div.card div.card-body > :last-child {
     margin-bottom: auto !important;
 }
+
+div.card.card-table table .value {
+    text-align: right;
+    padding-right: 0;
+}

From e2abc20b34b0b09cfbf6be9f811bf4746c30c61e Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 23:23:34 +0200
Subject: [PATCH 19/33] 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 680409211..78e151280 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 f85a0a359..79a3ca913 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 9097f6cdb..e385bf8e7 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>

From 57565b9d30f9df5d50410aa8fb8094f876f9aa8e Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 23:31:04 +0200
Subject: [PATCH 20/33] webapp: fixup battery total cards

the total cards have been trimmed at the bottom as the card's last child
has its margin-bottom removed (set to "auto"). that is desired as it
places the text in the middle of the cards. however, the battery total
cards are different, as they show two values each, which are arranged by
div.flex-fill containers, which are the children of the cards rather
than the h2 tags as in all other totals cards.
---
 webapp/src/components/InverterTotalInfo.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/InverterTotalInfo.vue b/webapp/src/components/InverterTotalInfo.vue
index a1f0a3157..d811bd03f 100644
--- a/webapp/src/components/InverterTotalInfo.vue
+++ b/webapp/src/components/InverterTotalInfo.vue
@@ -99,7 +99,7 @@
                     :text="$t('invertertotalinfo.BatteryCharge')"
                 >
                     <div class="flex-fill" v-if="totalBattData.soc">
-                        <h2>
+                        <h2 class="mb-0">
                             {{
                                 $n(totalBattData.soc.v, 'decimal', {
                                     minimumFractionDigits: totalBattData.soc.d,
@@ -111,7 +111,7 @@
                     </div>
 
                     <div class="flex-fill" v-if="totalBattData.voltage">
-                        <h2>
+                        <h2 class="mb-0">
                             {{
                                 $n(totalBattData.voltage.v, 'decimal', {
                                     minimumFractionDigits: totalBattData.voltage.d,
@@ -131,7 +131,7 @@
                     :text="$t('invertertotalinfo.BatteryPower')"
                 >
                     <div class="flex-fill" v-if="totalBattData.power">
-                        <h2>
+                        <h2 class="mb-0">
                             {{
                                 $n(totalBattData.power.v, 'decimal', {
                                     minimumFractionDigits: totalBattData.power.d,
@@ -143,7 +143,7 @@
                     </div>
 
                     <div class="flex-fill" v-if="totalBattData.current">
-                        <h2>
+                        <h2 class="mb-0">
                             {{
                                 $n(totalBattData.current.v, 'decimal', {
                                     minimumFractionDigits: totalBattData.current.d,

From 9d4e820fb298a3ab9fca544ad2395c814b54dc46 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sun, 27 Oct 2024 17:53:28 +0100
Subject: [PATCH 21/33] webapp: consistently use no colon in form labels

there are no colons for table headers as well. some form labels had no
colon already, so this change uses a unified look among form labels.
---
 webapp/src/locales/de.json              | 106 ++++++++++++------------
 webapp/src/locales/en.json              | 100 +++++++++++-----------
 webapp/src/locales/fr.json              |  32 +++----
 webapp/src/views/AcChargerAdminView.vue |  16 ++--
 4 files changed, 127 insertions(+), 127 deletions(-)

diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
index ae13e2c11..f2b3ac282 100644
--- a/webapp/src/locales/de.json
+++ b/webapp/src/locales/de.json
@@ -459,21 +459,21 @@
     "dtuadmin": {
         "DtuSettings": "DTU-Einstellungen",
         "DtuConfiguration": "DTU-Konfiguration",
-        "Serial": "Seriennummer:",
+        "Serial": "Seriennummer",
         "SerialHint": "Sowohl der Wechselrichter als auch die DTU haben eine Seriennummer. Die DTU-Seriennummer wird beim ersten Start zufällig generiert und muss normalerweise nicht geändert werden.",
-        "PollInterval": "Abfrageintervall:",
+        "PollInterval": "Abfrageintervall",
         "VerboseLogging": "@:base.VerboseLogging",
         "Seconds": "Sekunden",
-        "NrfPaLevel": "NRF24 Sendeleistung:",
-        "CmtPaLevel": "CMT2300A Sendeleistung:",
+        "NrfPaLevel": "NRF24 Sendeleistung",
+        "CmtPaLevel": "CMT2300A Sendeleistung",
         "NrfPaLevelHint": "Verwendet für HM-Wechselrichter. Stellen Sie sicher, dass Ihre Stromversorgung stabil genug ist, bevor Sie die Sendeleistung erhöhen.",
         "CmtPaLevelHint": "Verwendet für HMS/HMT-Wechselrichter. Stellen Sie sicher, dass Ihre Stromversorgung stabil genug ist, bevor Sie die Sendeleistung erhöhen.",
-        "CmtCountry": "CMT2300A Region/Land:",
+        "CmtCountry": "CMT2300A Region/Land",
         "CmtCountryHint": "Jedes Land hat unterschiedliche Frequenzzuteilungen.",
         "country_0": "Europa ({min}MHz - {max}MHz)",
         "country_1": "Nordamerika ({min}MHz - {max}MHz)",
         "country_2": "Brasilien ({min}MHz - {max}MHz)",
-        "CmtFrequency": "CMT2300A Frequenz:",
+        "CmtFrequency": "CMT2300A Frequenz",
         "CmtFrequencyHint": "Stelle sicher, dass nur Frequenzen verwendet werden, welche im entsprechenden Land erlaubt sind! Nach einer Frequenzänderung kann es bis zu 15min dauern bis eine Verbindung hergestellt wird.",
         "CmtFrequencyWarning": "Die gewählte Frequenz liegt außerhalb des zulässigen Bereichs in der gewählten Region/dem Land. Vergewissere dich, dass mit dieser Auswahl keine lokalen Regularien verletzt werden.",
         "MHz": "{mhz} MHz",
@@ -486,8 +486,8 @@
     "securityadmin": {
         "SecuritySettings": "Sicherheitseinstellungen",
         "AdminPassword": "Administrator-Passwort",
-        "Password": "Passwort:",
-        "RepeatPassword": "Passwort wiederholen:",
+        "Password": "Passwort",
+        "RepeatPassword": "Passwort wiederholen",
         "PasswordHint": "<b>Hinweis:</b> Das Administrator-Passwort wird für den Zugriff auf die Webschnittstelle (Benutzer 'admin'), aber auch für die Verbindung mit dem Gerät im AP-Modus verwendet. Es muss zwischen 8 und 64 Zeichen lang sein.",
         "Permissions": "Berechtigungen",
         "ReadOnly": "Nur-Lese-Zugriff auf die Weboberfläche ohne Passwort zulassen"
@@ -495,40 +495,40 @@
     "ntpadmin": {
         "NtpSettings": "NTP-Einstellungen",
         "NtpConfiguration": "NTP-Konfiguration",
-        "TimeServer": "Zeitserver:",
+        "TimeServer": "Zeitserver",
         "TimeServerHint": "Der Standardwert ist in Ordnung, solange OpenDTU direkten Zugang zum Internet hat.",
-        "Timezone": "Zeitzone:",
-        "TimezoneConfig": "Zeitzonenkonfiguration:",
+        "Timezone": "Zeitzone",
+        "TimezoneConfig": "Zeitzonenkonfiguration",
         "LocationConfiguration": "Standortkonfiguration",
-        "Longitude": "Längengrad:",
-        "Latitude": "Breitengrad:",
-        "SunSetType": "Dämmerungstyp:",
+        "Longitude": "Längengrad",
+        "Latitude": "Breitengrad",
+        "SunSetType": "Dämmerungstyp",
         "SunSetTypeHint": "Beeinflusst die Tag/Nacht Berechnung. Es kann bis zu einer Minute dauern bis der neue Typ angewendet wurde.",
         "OFFICIAL": "Standard Dämmerung (90.8°)",
         "NAUTICAL": "Nautische Dämmerung (102°)",
         "CIVIL": "Bürgerliche Dämmerung (96°)",
         "ASTONOMICAL": "Astronomische Dämmerung (108°)",
         "ManualTimeSynchronization": "Manuelle Zeitsynchronisation",
-        "CurrentOpenDtuTime": "Aktuelle OpenDTU-Zeit:",
-        "CurrentLocalTime": "Aktuelle lokale Zeit:",
+        "CurrentOpenDtuTime": "Aktuelle OpenDTU-Zeit",
+        "CurrentLocalTime": "Aktuelle lokale Zeit",
         "SynchronizeTime": "Zeit synchronisieren",
         "SynchronizeTimeHint": "<b>Hinweis:</b> Sie können die manuelle Zeitsynchronisation verwenden, um die aktuelle Zeit von OpenDTU einzustellen, wenn kein NTP-Server verfügbar ist. Beachten Sie aber, dass im Falle eines Stromausfalls die Zeit verloren geht. Beachten Sie auch, dass die Zeitgenauigkeit stark verzerrt wird, da sie nicht regelmäßig neu synchronisiert werden kann und der ESP32-Mikrocontroller nicht über eine Echtzeituhr verfügt."
     },
     "networkadmin": {
         "NetworkSettings": "Netzwerkeinstellungen",
         "WifiConfiguration": "WLAN-Konfiguration",
-        "WifiSsid": "WLAN-SSID:",
-        "WifiPassword": "WLAN-Passwort:",
-        "Hostname": "Hostname:",
+        "WifiSsid": "WLAN-SSID",
+        "WifiPassword": "WLAN-Passwort",
+        "Hostname": "Hostname",
         "HostnameHint": "<b>Hinweis:</b> Der Text <span class=\"font-monospace\">%06X</span> wird durch die letzten 6 Ziffern der ESP-ChipID im Hex-Format ersetzt.",
         "EnableDhcp": "DHCP aktivieren",
         "StaticIpConfiguration": "Statische IP-Konfiguration",
-        "IpAddress": "IP-Adresse:",
-        "Netmask": "Netzmaske:",
-        "DefaultGateway": "Standardgateway:",
-        "Dns": "DNS-Server {num}:",
+        "IpAddress": "IP-Adresse",
+        "Netmask": "Netzmaske",
+        "DefaultGateway": "Standardgateway",
+        "Dns": "DNS-Server {num}",
         "AdminAp": "WLAN-Konfiguration (Admin AccessPoint)",
-        "ApTimeout": "AccessPoint Zeitlimit:",
+        "ApTimeout": "AccessPoint Zeitlimit",
         "ApTimeoutHint": "Zeit die der AccessPoint offen gehalten wird. Ein Wert von 0 bedeutet unendlich.",
         "Minutes": "Minuten",
         "EnableMdns": "mDNS aktivieren",
@@ -545,38 +545,38 @@
         "VerboseLogging": "@:base.VerboseLogging",
         "EnableHass": "Home Assistant MQTT-Auto-Discovery aktivieren",
         "MqttBrokerParameter": "MQTT-Broker-Parameter",
-        "Hostname": "Hostname:",
+        "Hostname": "Hostname",
         "HostnameHint": "Hostname oder IP-Adresse",
-        "Port": "Port:",
-        "ClientId": "Client ID:",
-        "Username": "Benutzername:",
+        "Port": "Port",
+        "ClientId": "Client ID",
+        "Username": "Benutzername",
         "UsernameHint": "Benutzername, leer lassen für anonyme Verbindung",
-        "Password": "Passwort:",
+        "Password": "Passwort",
         "PasswordHint": "Passwort, leer lassen für anonyme Verbindung",
-        "BaseTopic": "Basis-Topic:",
+        "BaseTopic": "Basis-Topic",
         "BaseTopicHint": "Basis-Topic, wird allen veröffentlichten Themen vorangestellt (z.B. inverter/)",
-        "PublishInterval": "Veröffentlichungsintervall:",
+        "PublishInterval": "Veröffentlichungsintervall",
         "Seconds": "Sekunden",
         "CleanSession": "CleanSession Flag aktivieren",
         "EnableRetain": "Retain Flag aktivieren",
         "EnableTls": "TLS aktivieren",
-        "RootCa": "CA-Root-Zertifikat (Standard Letsencrypt):",
+        "RootCa": "CA-Root-Zertifikat (Standard Letsencrypt)",
         "TlsCertLoginEnable": "TLS Zertifikat Login",
-        "ClientCert": "TLS Client-Zertifikat:",
-        "ClientKey": "TLS Client-Key:",
+        "ClientCert": "TLS Client-Zertifikat",
+        "ClientKey": "TLS Client-Key",
         "LwtParameters": "LWT-Parameter",
-        "LwtTopic": "LWT-Topic:",
+        "LwtTopic": "LWT-Topic",
         "LwtTopicHint": "LWT-Topic, wird der Basis-Topic angehängt",
-        "LwtOnline": "LWT-Online-Nachricht:",
+        "LwtOnline": "LWT-Online-Nachricht",
         "LwtOnlineHint": "Nachricht, die im LWT-Topic veröffentlicht wird, wenn OpenDTU online ist",
-        "LwtOffline": "LWT-Offline-Nachricht:",
+        "LwtOffline": "LWT-Offline-Nachricht",
         "LwtOfflineHint": "Nachricht, die im LWT-Topic veröffentlicht wird, wenn OpenDTU offline ist",
-        "LwtQos": "QoS (Quality of Service):",
+        "LwtQos": "QoS (Quality of Service)",
         "QOS0": "0 (Höchstens einmal)",
         "QOS1": "1 (Mindestens einmal)",
         "QOS2": "2 (Exakt einmal)",
         "HassParameters": "Home Assistant MQTT-Auto-Discovery-Parameter",
-        "HassPrefixTopic": "Präfix Topic:",
+        "HassPrefixTopic": "Präfix Topic",
         "HassPrefixTopicHint": "The prefix for the discovery topic",
         "HassRetain": "Retain Flag aktivieren",
         "HassExpire": "Ablauffunktion aktivieren",
@@ -770,7 +770,7 @@
         "StringYtOffset": "Ertragsversatz String {num}:",
         "StringYtOffsetHint": "Dieser Offset wird beim Auslesen des Gesamtertragswertes des Wechselrichters angewendet. Damit kann der Gesamtertrag des Wechselrichters auf Null gesetzt werden, wenn ein gebrauchter Wechselrichter verwendet wird.",
         "InverterHint": "*) Geben Sie die W<sub>p</sub> des Ports ein, um die Einstrahlung zu errechnen.",
-        "ReachableThreshold": "Erreichbarkeit Schwellenwert:",
+        "ReachableThreshold": "Erreichbarkeit Schwellenwert",
         "ReachableThresholdHint": "Legt fest, wie viele Anfragen fehlschlagen dürfen, bis der Wechselrichter als unerreichbar eingestuft wird.",
         "ZeroRuntime": "Nulle Laufzeit Daten",
         "ZeroRuntimeHint": "Nulle Laufzeit Daten (keine Ertragsdaten), wenn der Wechselrichter nicht erreichbar ist.",
@@ -851,34 +851,34 @@
         "DeviceManager": "Hardware-Einstellungen",
         "ParseError": "Syntaxfehler in 'pin_mapping.json': {error}",
         "PinAssignment": "Anschlusseinstellungen",
-        "SelectedProfile": "Ausgewähltes Profil:",
+        "SelectedProfile": "Ausgewähltes Profil",
         "DefaultProfile": "(Standardeinstellungen)",
         "ProfileHint": "Ihr Gerät reagiert möglicherweise nicht mehr, wenn Sie ein inkompatibles Profil wählen. In diesem Fall müssen Sie eine Löschung über das serielle Interface durchführen.",
         "Display": "Display",
-        "PowerSafe": "Ausschalten wenn kein Inverter erreichbar:",
+        "PowerSafe": "Ausschalten wenn kein Inverter erreichbar",
         "PowerSafeHint": "Schaltet das Display aus, wenn kein Wechselrichter Strom erzeugt",
-        "Screensaver": "OLED-Schutz gegen Einbrennen:",
+        "Screensaver": "OLED-Schutz gegen Einbrennen",
         "ScreensaverHint": "Bewegt die Ausgabe bei jeder Aktualisierung um ein Einbrennen zu verhindern (v. a. für OLED-Displays nützlich)",
-        "DiagramMode": "Diagramm Modus:",
+        "DiagramMode": "Diagramm Modus",
         "off": "Deaktiviert",
         "small": "Klein",
         "fullscreen": "Vollbild",
-        "DiagramDuration": "Diagramm Periode:",
+        "DiagramDuration": "Diagramm Periode",
         "DiagramDurationHint": "Die Zeitperiode welche im Diagramm dargestellt wird.",
         "Seconds": "Sekunden",
-        "Contrast": "Kontrast ({contrast}):",
-        "Rotation": "Rotation:",
+        "Contrast": "Kontrast ({contrast})",
+        "Rotation": "Rotation",
         "rot0": "Keine Rotation",
         "rot90": "90 Grad Drehung",
         "rot180": "180 Grad Drehung",
         "rot270": "270 Grad Drehung",
-        "DisplayLanguage": "Displaysprache:",
+        "DisplayLanguage": "Displaysprache",
         "en": "Englisch",
         "de": "Deutsch",
         "fr": "Französisch",
         "Leds": "LEDs",
-        "EqualBrightness": "Gleiche Helligkeit:",
-        "LedBrightness": "LED {led} Helligkeit ({brightness}):"
+        "EqualBrightness": "Gleiche Helligkeit",
+        "LedBrightness": "LED {led} Helligkeit ({brightness})"
     },
     "pininfo": {
         "PinOverview": "Anschlussübersicht",
@@ -918,9 +918,9 @@
         "SetOnline": "Limit setzen, CAN Bus verbunden",
         "LimitHint": "<b>Hinweis:</b> Spannungsbereich wenn CAN Bus nicht verbunden ist 48V-58.5V ",
         "Close": "Schließen",
-        "SetVoltageLimit": "Spannungslimit:",
-        "SetCurrentLimit": "Stromlimit:",
-        "CurrentLimit": "Aktuelles Limit: "
+        "SetVoltageLimit": "Spannungslimit",
+        "SetCurrentLimit": "Stromlimit",
+        "CurrentLimit": "Aktuelles Limit "
     },
     "acchargeradmin": {
         "ChargerSettings": "AC Ladegerät Einstellungen",
diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index 5e76c52ff..f6c940169 100644
--- a/webapp/src/locales/en.json
+++ b/webapp/src/locales/en.json
@@ -461,21 +461,21 @@
     "dtuadmin": {
         "DtuSettings": "DTU Settings",
         "DtuConfiguration": "DTU Configuration",
-        "Serial": "Serial:",
+        "Serial": "Serial",
         "SerialHint": "Both the inverter and the DTU have a serial number. The DTU serial number is randomly generated at the first start and does not normally need to be changed.",
-        "PollInterval": "Poll Interval:",
+        "PollInterval": "Poll Interval",
         "VerboseLogging": "@:base.VerboseLogging",
         "Seconds": "Seconds",
-        "NrfPaLevel": "NRF24 Transmitting power:",
-        "CmtPaLevel": "CMT2300A Transmitting power:",
+        "NrfPaLevel": "NRF24 Transmitting power",
+        "CmtPaLevel": "CMT2300A Transmitting power",
         "NrfPaLevelHint": "Used for HM-Inverters. Make sure your power supply is stable enough before increasing the transmit power.",
         "CmtPaLevelHint": "Used for HMS/HMT-Inverters. Make sure your power supply is stable enough before increasing the transmit power.",
-        "CmtCountry": "CMT2300A Region/Country:",
+        "CmtCountry": "CMT2300A Region/Country",
         "CmtCountryHint": "Each country has different frequency allocations.",
         "country_0": "Europe ({min}MHz - {max}MHz)",
         "country_1": "North America ({min}MHz - {max}MHz)",
         "country_2": "Brazil ({min}MHz - {max}MHz)",
-        "CmtFrequency": "CMT2300A Frequency:",
+        "CmtFrequency": "CMT2300A Frequency",
         "CmtFrequencyHint": "Make sure to only use frequencies that are allowed in the respective country! After a frequency change, it can take up to 15min until a connection is established.",
         "CmtFrequencyWarning": "The selected frequency is outside the allowed range in your selected region/country. Make sure that this selection does not violate any local regulations.",
         "MHz": "{mhz} MHz",
@@ -488,8 +488,8 @@
     "securityadmin": {
         "SecuritySettings": "Security Settings",
         "AdminPassword": "Admin password",
-        "Password": "Password:",
-        "RepeatPassword": "Repeat Password:",
+        "Password": "Password",
+        "RepeatPassword": "Repeat Password",
         "PasswordHint": "<b>Hint:</b> The administrator password is used to access this web interface (user 'admin'), but also to connect to the device when in AP mode. It must be 8..64 characters.",
         "Permissions": "Permissions",
         "ReadOnly": "Allow readonly access to web interface without password"
@@ -497,10 +497,10 @@
     "ntpadmin": {
         "NtpSettings": "NTP Settings",
         "NtpConfiguration": "NTP Configuration",
-        "TimeServer": "Time Server:",
+        "TimeServer": "Time Server",
         "TimeServerHint": "The default value is fine as long as OpenDTU has direct access to the internet.",
-        "Timezone": "Timezone:",
-        "TimezoneConfig": "Timezone Config:",
+        "Timezone": "Timezone",
+        "TimezoneConfig": "Timezone Config",
         "LocationConfiguration": "Location Configuration",
         "Longitude": "Longitude",
         "Latitude": "Latitude",
@@ -511,26 +511,26 @@
         "CIVIL": "Civil dawn (96°)",
         "ASTONOMICAL": "Astronomical dawn (108°)",
         "ManualTimeSynchronization": "Manual Time Synchronization",
-        "CurrentOpenDtuTime": "Current OpenDTU Time:",
-        "CurrentLocalTime": "Current Local Time:",
+        "CurrentOpenDtuTime": "Current OpenDTU Time",
+        "CurrentLocalTime": "Current Local Time",
         "SynchronizeTime": "Synchronize Time",
         "SynchronizeTimeHint": "<b>Hint:</b> You can use the manual time synchronization to set the current time of OpenDTU if no NTP server is available. But be aware, that in case of power cycle the time gets lost. Also note that time accuracy will be skewed badly, as it can not be resynchronised regularly and the ESP32 microcontroller does not have a real time clock."
     },
     "networkadmin": {
         "NetworkSettings": "Network Settings",
         "WifiConfiguration": "WiFi Configuration",
-        "WifiSsid": "WiFi SSID:",
-        "WifiPassword": "WiFi Password:",
-        "Hostname": "Hostname:",
+        "WifiSsid": "WiFi SSID",
+        "WifiPassword": "WiFi Password",
+        "Hostname": "Hostname",
         "HostnameHint": "<b>Hint:</b> The text <span class=\"font-monospace\">%06X</span> will be replaced with the last 6 digits of the ESP ChipID in hex format.",
         "EnableDhcp": "Enable DHCP",
         "StaticIpConfiguration": "Static IP Configuration",
-        "IpAddress": "IP Address:",
-        "Netmask": "Netmask:",
-        "DefaultGateway": "Default Gateway:",
-        "Dns": "DNS Server {num}:",
+        "IpAddress": "IP Address",
+        "Netmask": "Netmask",
+        "DefaultGateway": "Default Gateway",
+        "Dns": "DNS Server {num}",
         "AdminAp": "WiFi Configuration (Admin AccessPoint)",
-        "ApTimeout": "AccessPoint Timeout:",
+        "ApTimeout": "AccessPoint Timeout",
         "ApTimeoutHint": "Time which the AccessPoint is kept open. A value of 0 means infinite.",
         "Minutes": "minutes",
         "EnableMdns": "Enable mDNS",
@@ -547,38 +547,38 @@
         "VerboseLogging": "@:base.VerboseLogging",
         "EnableHass": "Enable Home Assistant MQTT Auto Discovery",
         "MqttBrokerParameter": "MQTT Broker Parameter",
-        "Hostname": "Hostname:",
+        "Hostname": "Hostname",
         "HostnameHint": "Hostname or IP address",
-        "Port": "Port:",
-        "ClientId": "Client ID:",
-        "Username": "Username:",
+        "Port": "Port",
+        "ClientId": "Client ID",
+        "Username": "Username",
         "UsernameHint": "Username, leave empty for anonymous connection",
-        "Password": "Password:",
+        "Password": "Password",
         "PasswordHint": "Password, leave empty for anonymous connection",
-        "BaseTopic": "Base Topic:",
+        "BaseTopic": "Base Topic",
         "BaseTopicHint": "Base topic, will be prepend to all published topics (e.g. inverter/)",
-        "PublishInterval": "Publish Interval:",
+        "PublishInterval": "Publish Interval",
         "Seconds": "seconds",
         "CleanSession": "Enable CleanSession flag",
         "EnableRetain": "Enable Retain Flag",
         "EnableTls": "Enable TLS",
-        "RootCa": "CA-Root-Certificate (default Letsencrypt):",
+        "RootCa": "CA-Root-Certificate (default Letsencrypt)",
         "TlsCertLoginEnable": "Enable TLS Certificate Login",
-        "ClientCert": "TLS Client-Certificate:",
-        "ClientKey": "TLS Client-Key:",
+        "ClientCert": "TLS Client-Certificate",
+        "ClientKey": "TLS Client-Key",
         "LwtParameters": "LWT Parameters",
-        "LwtTopic": "LWT Topic:",
+        "LwtTopic": "LWT Topic",
         "LwtTopicHint": "LWT topic, will be append base topic",
-        "LwtOnline": "LWT Online message:",
+        "LwtOnline": "LWT Online message",
         "LwtOnlineHint": "Message that will be published to LWT topic when online",
-        "LwtOffline": "LWT Offline message:",
+        "LwtOffline": "LWT Offline message",
         "LwtOfflineHint": "Message that will be published to LWT topic when offline",
-        "LwtQos": "QoS (Quality of Service):",
+        "LwtQos": "QoS (Quality of Service)",
         "QOS0": "0 (At most once)",
         "QOS1": "1 (At least once)",
         "QOS2": "2 (Exactly once)",
         "HassParameters": "Home Assistant MQTT Auto Discovery Parameters",
-        "HassPrefixTopic": "Prefix Topic:",
+        "HassPrefixTopic": "Prefix Topic",
         "HassPrefixTopicHint": "The prefix for the discovery topic",
         "HassRetain": "Enable Retain Flag",
         "HassExpire": "Enable Expiration",
@@ -773,7 +773,7 @@
         "StringYtOffset": "Yield total offset string {num}:",
         "StringYtOffsetHint": "This offset is applied the read yield total value from the inverter. This can be used to set the yield total of the inverter to zero if a used inverter is used. But you can still try polling data.",
         "InverterHint": "*) Enter the W<sub>p</sub> of the channel to calculate irradiation.",
-        "ReachableThreshold": "Reachable Threshold:",
+        "ReachableThreshold": "Reachable Threshold",
         "ReachableThresholdHint": "Defines how many requests are allowed to fail until the inverter is treated is not reachable.",
         "ZeroRuntime": "Zero runtime data",
         "ZeroRuntimeHint": "Zero runtime data (no yield data) if inverter becomes unreachable.",
@@ -854,34 +854,34 @@
         "DeviceManager": "Device-Manager",
         "ParseError": "Parse error in 'pin_mapping.json': {error}",
         "PinAssignment": "Connection settings",
-        "SelectedProfile": "Selected profile:",
+        "SelectedProfile": "Selected profile",
         "DefaultProfile": "(Default settings)",
         "ProfileHint": "Your device may stop responding if you select an incompatible profile. In this case, you must perform a deletion via the serial interface.",
         "Display": "Display",
-        "PowerSafe": "Switch off if no solar:",
+        "PowerSafe": "Switch off if no solar",
         "PowerSafeHint": "Turn off the display if no inverter is producing.",
-        "Screensaver": "OLED Anti burn-in:",
+        "Screensaver": "OLED Anti burn-in",
         "ScreensaverHint": "Move the display a little bit on each update to prevent burn-in. (Useful especially for OLED displays)",
-        "DiagramMode": "Diagram mode:",
+        "DiagramMode": "Diagram mode",
         "off": "Off",
         "small": "Small",
         "fullscreen": "Fullscreen",
-        "DiagramDuration": "Diagram duration:",
+        "DiagramDuration": "Diagram duration",
         "DiagramDurationHint": "The time period which is shown in the diagram.",
         "Seconds": "Seconds",
-        "Contrast": "Contrast ({contrast}):",
-        "Rotation": "Rotation:",
+        "Contrast": "Contrast ({contrast})",
+        "Rotation": "Rotation",
         "rot0": "No rotation",
         "rot90": "90 degree rotation",
         "rot180": "180 degree rotation",
         "rot270": "270 degree rotation",
-        "DisplayLanguage": "Display language:",
+        "DisplayLanguage": "Display language",
         "en": "English",
         "de": "German",
         "fr": "French",
         "Leds": "LEDs",
-        "EqualBrightness": "Equal brightness:",
-        "LedBrightness": "LED {led} brightness ({brightness}):"
+        "EqualBrightness": "Equal brightness",
+        "LedBrightness": "LED {led} brightness ({brightness})"
     },
     "pininfo": {
         "PinOverview": "Connection overview",
@@ -922,9 +922,9 @@
         "SetOnline": "Set limit, CAN bus connected",
         "LimitHint": "<b>Hint:</b> CAN bus not connected voltage limit is 48V-58.5V.",
         "Close": "close",
-        "SetVoltageLimit": "Voltage limit:",
-        "SetCurrentLimit": "Current limit:",
-        "CurrentLimit": "Current limit:"
+        "SetVoltageLimit": "Voltage limit",
+        "SetCurrentLimit": "Current limit",
+        "CurrentLimit": "Current limit"
     },
     "acchargeradmin": {
         "ChargerSettings": "AC Charger Settings",
diff --git a/webapp/src/locales/fr.json b/webapp/src/locales/fr.json
index 37e107ac1..43c581376 100644
--- a/webapp/src/locales/fr.json
+++ b/webapp/src/locales/fr.json
@@ -485,12 +485,12 @@
         "CmtPaLevel": "CMT2300A Niveau de puissance d'émission",
         "NrfPaLevelHint": "Used for HM-Inverters. Assurez-vous que votre alimentation est suffisamment stable avant d'augmenter la puissance d'émission.",
         "CmtPaLevelHint": "Used for HMS/HMT-Inverters. Assurez-vous que votre alimentation est suffisamment stable avant d'augmenter la puissance d'émission.",
-        "CmtCountry": "CMT2300A Region/Country:",
+        "CmtCountry": "CMT2300A Region/Country",
         "CmtCountryHint": "Each country has different frequency allocations.",
         "country_0": "Europe ({min}MHz - {max}MHz)",
         "country_1": "North America ({min}MHz - {max}MHz)",
         "country_2": "Brazil ({min}MHz - {max}MHz)",
-        "CmtFrequency": "CMT2300A Frequency:",
+        "CmtFrequency": "CMT2300A Frequency",
         "CmtFrequencyHint": "Make sure to only use frequencies that are allowed in the respective country! After a frequency change, it can take up to 15min until a connection is established.",
         "CmtFrequencyWarning": "The selected frequency is outside the allowed range in your selected region/country. Make sure that this selection does not violate any local regulations.",
         "MHz": "{mhz} MHz",
@@ -561,10 +561,10 @@
         "Hostname": "Nom d'hôte",
         "HostnameHint": "Nom d'hôte ou adresse IP",
         "Port": "Port",
-        "ClientId": "Client ID:",
+        "ClientId": "Client ID",
         "Username": "Nom d'utilisateur",
         "UsernameHint": "Nom d'utilisateur, laisser vide pour une connexion anonyme",
-        "Password": "Mot de passe:",
+        "Password": "Mot de passe",
         "PasswordHint": "Mot de passe, laissez vide pour une connexion anonyme",
         "BaseTopic": "Sujet de base",
         "BaseTopicHint": "Sujet de base, qui sera ajouté en préambule à tous les sujets publiés (par exemple, inverter/).",
@@ -575,8 +575,8 @@
         "EnableTls": "Activer le TLS",
         "RootCa": "Certificat CA-Root (par défaut Letsencrypt)",
         "TlsCertLoginEnable": "Activer la connexion par certificat TLS",
-        "ClientCert": "Certificat client TLS:",
-        "ClientKey": "Clé client TLS:",
+        "ClientCert": "Certificat client TLS",
+        "ClientKey": "Clé client TLS",
         "LwtParameters": "Paramètres LWT",
         "LwtTopic": "Sujet LWT",
         "LwtTopicHint": "Sujet LWT, sera ajouté comme sujet de base",
@@ -584,7 +584,7 @@
         "LwtOnlineHint": "Message qui sera publié sur le sujet LWT lorsqu'il sera en ligne",
         "LwtOffline": "Message hors ligne de LWT",
         "LwtOfflineHint": "Message qui sera publié sur le sujet LWT lorsqu'il sera hors ligne",
-        "LwtQos": "QoS (Quality of Service):",
+        "LwtQos": "QoS (Quality of Service)",
         "QOS0": "0 (Au maximum une fois)",
         "QOS1": "1 (Au moins une fois)",
         "QOS2": "2 (Exactement une fois)",
@@ -809,15 +809,15 @@
         "PowerSafeHint": "Eteindre l'écran si aucun onduleur n'est en production.",
         "Screensaver": "OLED Anti burn-in",
         "ScreensaverHint": "Déplacez un peu l'écran à chaque mise à jour pour éviter le phénomène de brûlure. (Utile surtout pour les écrans OLED)",
-        "DiagramMode": "Diagram mode:",
+        "DiagramMode": "Diagram mode",
         "off": "Off",
         "small": "Small",
         "fullscreen": "Fullscreen",
-        "DiagramDuration": "Diagram duration:",
+        "DiagramDuration": "Diagram duration",
         "DiagramDurationHint": "The time period which is shown in the diagram.",
         "Seconds": "Seconds",
-        "Contrast": "Contraste ({contrast}):",
-        "Rotation": "Rotation:",
+        "Contrast": "Contraste ({contrast})",
+        "Rotation": "Rotation",
         "rot0": "Pas de rotation",
         "rot90": "Rotation de 90 degrés",
         "rot180": "Rotation de 180 degrés",
@@ -827,8 +827,8 @@
         "de": "Allemand",
         "fr": "Français",
         "Leds": "LEDs",
-        "EqualBrightness": "Même luminosité:",
-        "LedBrightness": "LED {led} luminosité ({brightness}):"
+        "EqualBrightness": "Même luminosité",
+        "LedBrightness": "LED {led} luminosité ({brightness})"
     },
     "pininfo": {
         "PinOverview": "Vue d'ensemble des connexions",
@@ -868,9 +868,9 @@
         "SetOnline": "Set limit, CAN bus connected",
         "LimitHint": "<b>Hint:</b> CAN bus not connected voltage limit is 48V-58.5V.",
         "Close": "close",
-        "SetVoltageLimit": "Voltage limit:",
-        "SetCurrentLimit": "Current limit:",
-        "CurrentLimit": "Current limit:"
+        "SetVoltageLimit": "Voltage limit",
+        "SetCurrentLimit": "Current limit",
+        "CurrentLimit": "Current limit"
     },
     "acchargeradmin": {
         "ChargerSettings": "AC Charger Settings",
diff --git a/webapp/src/views/AcChargerAdminView.vue b/webapp/src/views/AcChargerAdminView.vue
index 390315ce5..8b2fa9116 100644
--- a/webapp/src/views/AcChargerAdminView.vue
+++ b/webapp/src/views/AcChargerAdminView.vue
@@ -69,7 +69,7 @@
                 >
                     <div class="row mb-3">
                         <label for="voltageLimit" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.VoltageLimit') }}:
+                            >{{ $t('acchargeradmin.VoltageLimit') }}
                             <BIconInfoCircle v-tooltip :title="$t('acchargeradmin.stopVoltageLimitHint')" />
                         </label>
                         <div class="col-sm-10">
@@ -90,7 +90,7 @@
                             </div>
                         </div>
                         <label for="enableVoltageLimit" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.enableVoltageLimit') }}:
+                            >{{ $t('acchargeradmin.enableVoltageLimit') }}
                             <BIconInfoCircle v-tooltip :title="$t('acchargeradmin.enableVoltageLimitHint')" />
                         </label>
                         <div class="col-sm-10">
@@ -110,9 +110,9 @@
                                 <span class="input-group-text" id="enableVoltageLimitDescription">V</span>
                             </div>
                         </div>
-                        <label for="lowerPowerLimit" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.lowerPowerLimit') }}:</label
-                        >
+                        <label for="lowerPowerLimit" class="col-sm-2 col-form-label">{{
+                            $t('acchargeradmin.lowerPowerLimit')
+                        }}</label>
                         <div class="col-sm-10">
                             <div class="input-group">
                                 <input
@@ -130,7 +130,7 @@
                             </div>
                         </div>
                         <label for="upperPowerLimit" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.upperPowerLimit') }}:
+                            >{{ $t('acchargeradmin.upperPowerLimit') }}
                             <BIconInfoCircle v-tooltip :title="$t('acchargeradmin.upperPowerLimitHint')" />
                         </label>
                         <div class="col-sm-10">
@@ -150,7 +150,7 @@
                             </div>
                         </div>
                         <label for="targetPowerConsumption" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.targetPowerConsumption') }}:
+                            >{{ $t('acchargeradmin.targetPowerConsumption') }}
                             <BIconInfoCircle v-tooltip :title="$t('acchargeradmin.targetPowerConsumptionHint')" />
                         </label>
                         <div class="col-sm-10">
@@ -180,7 +180,7 @@
                 >
                     <div class="row mb-3">
                         <label for="stopBatterySoCThreshold" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.StopBatterySoCThreshold') }}:
+                            >{{ $t('acchargeradmin.StopBatterySoCThreshold') }}
                             <BIconInfoCircle v-tooltip :title="$t('acchargeradmin.StopBatterySoCThresholdHint')" />
                         </label>
                         <div class="col-sm-10">

From 27083f1e46d390f15ca345fc2bbde5ffb5ccc6c0 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 22:21:53 +0200
Subject: [PATCH 22/33] webapp: replace remaining "OpenDTU" texts with
 "OpenDTU-OnBattery"

---
 webapp/index.html          |  2 +-
 webapp/src/locales/de.json | 16 ++++++++--------
 webapp/src/locales/en.json | 14 +++++++-------
 webapp/src/locales/fr.json | 14 +++++++-------
 4 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/webapp/index.html b/webapp/index.html
index bbb68b549..c9038613d 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -11,7 +11,7 @@
   </head>
   <body>
     <noscript>
-        <strong>We're sorry but OpenDTU doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+        <strong>We're sorry but OpenDTU-OnBattery doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
index f2b3ac282..50c427bbc 100644
--- a/webapp/src/locales/de.json
+++ b/webapp/src/locales/de.json
@@ -452,9 +452,9 @@
         "PerformReboot": "Neustart durchführen",
         "Reboot": "Neustarten!",
         "Cancel": "@:base.Cancel",
-        "RebootOpenDTU": "OpenDTU neu starten",
+        "RebootOpenDTU": "OpenDTU-OnBattery neu starten",
         "RebootQuestion": "Möchten Sie das Gerät wirklich neu starten?",
-        "RebootHint": "<b>Hinweis:</b> Ein manueller Neustart muss normalerweise nicht durchgeführt werden. OpenDTU führt jeden erforderlichen Neustart (z. B. nach einem Firmware-Update) automatisch durch. Einstellungen werden auch ohne Neustart übernommen. Wenn Sie aufgrund eines Fehlers einen Neustart durchführen müssen, denken Sie bitte daran, diesen unter <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/issues\" class=\"alert-link\" target=\"_blank\">Github</a> zu melden."
+        "RebootHint": "<b>Hinweis:</b> Ein manueller Neustart muss normalerweise nicht durchgeführt werden. OpenDTU-OnBattery führt jeden erforderlichen Neustart (z. B. nach einem Firmware-Update) automatisch durch. Einstellungen werden auch ohne Neustart übernommen. Wenn Sie aufgrund eines Fehlers einen Neustart durchführen müssen, denken Sie bitte daran, diesen unter <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/issues\" class=\"alert-link\" target=\"_blank\">Github</a> zu melden."
     },
     "dtuadmin": {
         "DtuSettings": "DTU-Einstellungen",
@@ -496,7 +496,7 @@
         "NtpSettings": "NTP-Einstellungen",
         "NtpConfiguration": "NTP-Konfiguration",
         "TimeServer": "Zeitserver",
-        "TimeServerHint": "Der Standardwert ist in Ordnung, solange OpenDTU direkten Zugang zum Internet hat.",
+        "TimeServerHint": "Der Standardwert ist in Ordnung, solange OpenDTU-OnBattery direkten Zugang zum Internet hat.",
         "Timezone": "Zeitzone",
         "TimezoneConfig": "Zeitzonenkonfiguration",
         "LocationConfiguration": "Standortkonfiguration",
@@ -512,7 +512,7 @@
         "CurrentOpenDtuTime": "Aktuelle OpenDTU-Zeit",
         "CurrentLocalTime": "Aktuelle lokale Zeit",
         "SynchronizeTime": "Zeit synchronisieren",
-        "SynchronizeTimeHint": "<b>Hinweis:</b> Sie können die manuelle Zeitsynchronisation verwenden, um die aktuelle Zeit von OpenDTU einzustellen, wenn kein NTP-Server verfügbar ist. Beachten Sie aber, dass im Falle eines Stromausfalls die Zeit verloren geht. Beachten Sie auch, dass die Zeitgenauigkeit stark verzerrt wird, da sie nicht regelmäßig neu synchronisiert werden kann und der ESP32-Mikrocontroller nicht über eine Echtzeituhr verfügt."
+        "SynchronizeTimeHint": "<b>Hinweis:</b> Sie können die manuelle Zeitsynchronisation verwenden, um die aktuelle Zeit von OpenDTU-OnBattery einzustellen, wenn kein NTP-Server verfügbar ist. Beachten Sie aber, dass im Falle eines Stromausfalls die Zeit verloren geht. Beachten Sie auch, dass die Zeitgenauigkeit stark verzerrt wird, da sie nicht regelmäßig neu synchronisiert werden kann und der ESP32-Mikrocontroller nicht über eine Echtzeituhr verfügt."
     },
     "networkadmin": {
         "NetworkSettings": "Netzwerkeinstellungen",
@@ -568,9 +568,9 @@
         "LwtTopic": "LWT-Topic",
         "LwtTopicHint": "LWT-Topic, wird der Basis-Topic angehängt",
         "LwtOnline": "LWT-Online-Nachricht",
-        "LwtOnlineHint": "Nachricht, die im LWT-Topic veröffentlicht wird, wenn OpenDTU online ist",
+        "LwtOnlineHint": "Nachricht, die im LWT-Topic veröffentlicht wird, wenn OpenDTU-OnBattery online ist",
         "LwtOffline": "LWT-Offline-Nachricht",
-        "LwtOfflineHint": "Nachricht, die im LWT-Topic veröffentlicht wird, wenn OpenDTU offline ist",
+        "LwtOfflineHint": "Nachricht, die im LWT-Topic veröffentlicht wird, wenn OpenDTU-OnBattery offline ist",
         "LwtQos": "QoS (Quality of Service)",
         "QOS0": "0 (Höchstens einmal)",
         "QOS1": "1 (Mindestens einmal)",
@@ -794,7 +794,7 @@
         "RestoreHeader": "Wiederherstellen: Wiederherstellen der Konfigurationsdatei",
         "Back": "Zurück",
         "UploadSuccess": "Erfolgreich hochgeladen",
-        "RestoreHint": "<b>Hinweis:</b> Bei diesem Vorgang wird die Konfigurationsdatei durch die wiederhergestellte Konfiguration ersetzt und OpenDTU neu gestartet, um alle Einstellungen zu übernehmen.",
+        "RestoreHint": "<b>Hinweis:</b> Bei diesem Vorgang wird die Konfigurationsdatei durch die wiederhergestellte Konfiguration ersetzt und OpenDTU-OnBattery neu gestartet, um alle Einstellungen zu übernehmen.",
         "ResetHeader": "Initialisieren: Werksreset durchführen",
         "FactoryResetButton": "Werkseinstellungen wiederherstellen",
         "ResetHint": "<b>Hinweis:</b> Klicken Sie auf Werkseinstellungen wiederherstellen, um die Werkseinstellungen wiederherzustellen und neu zu starten.",
@@ -832,7 +832,7 @@
         "ProjectOriginBody1": "OpenDTU-OnBattery ist eine Erweiterung von OpenDTU. Das Basis-Projekt OpenDTU wurde aus <a href=\"https://www.mikrocontroller.net/topic/525778\" target=\"_blank\">dieser Diskussion (mikrocontroller.net)</a> heraus gestartet.",
         "ProjectOriginBody2": "Das Hoymiles-Protokoll wurde durch die freiwilligen Bemühungen vieler Teilnehmer entschlüsselt. OpenDTU wurde unter anderem auf der Grundlage dieser Arbeit entwickelt. Das Projekt ist unter einer Open-Source-Lizenz lizenziert (<a href=\"https://www.gnu.de/documents/gpl-2.0.de.html\" target=\"_blank\">GNU General Public License version 2</a>).",
         "ProjectOriginBody3": "Die Software wurde nach bestem Wissen und Gewissen entwickelt. Dennoch kann keine Haftung für eine Fehlfunktion oder einen Garantieverlust des Wechselrichters übernommen werden.",
-        "ProjectOriginBody4": "OpenDTU ist frei verfügbar. Wenn Sie Geld für die Software bezahlt haben, wurden Sie wahrscheinlich abgezockt.",
+        "ProjectOriginBody4": "OpenDTU und OpenDTU-OnBattery sind frei verfügbar. Wenn Sie Geld für die Software bezahlt haben, wurden Sie wahrscheinlich abgezockt.",
         "NewsUpdates": "Neuigkeiten und Updates",
         "NewsUpdatesBody": "Neue Updates sind auf <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/releases\" target=\"_blank\">Github</a> zu finden.",
         "ErrorReporting": "Fehlerberichte",
diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index f6c940169..4542d99ae 100644
--- a/webapp/src/locales/en.json
+++ b/webapp/src/locales/en.json
@@ -454,9 +454,9 @@
         "PerformReboot": "Perform Reboot",
         "Reboot": "Reboot!",
         "Cancel": "@:base.Cancel",
-        "RebootOpenDTU": "Reboot OpenDTU",
+        "RebootOpenDTU": "Reboot OpenDTU-OnBattery",
         "RebootQuestion": "Do you really want to reboot the device?",
-        "RebootHint": "<b>Note:</b> A manual reboot does not normally have to be performed. OpenDTU performs any required reboot (e.g. after a firmware update) automatically. Settings are also adopted without rebooting. If you need to reboot due to an error, please consider reporting it at <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/issues\" class=\"alert-link\" target=\"_blank\">Github</a>."
+        "RebootHint": "<b>Note:</b> A manual reboot does not normally have to be performed. OpenDTU-OnBattery performs any required reboot (e.g. after a firmware update) automatically. Settings are also adopted without rebooting. If you need to reboot due to an error, please consider reporting it at <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/issues\" class=\"alert-link\" target=\"_blank\">Github</a>."
     },
     "dtuadmin": {
         "DtuSettings": "DTU Settings",
@@ -498,7 +498,7 @@
         "NtpSettings": "NTP Settings",
         "NtpConfiguration": "NTP Configuration",
         "TimeServer": "Time Server",
-        "TimeServerHint": "The default value is fine as long as OpenDTU has direct access to the internet.",
+        "TimeServerHint": "The default value is fine as long as OpenDTU-OnBattery has direct access to the internet.",
         "Timezone": "Timezone",
         "TimezoneConfig": "Timezone Config",
         "LocationConfiguration": "Location Configuration",
@@ -511,10 +511,10 @@
         "CIVIL": "Civil dawn (96°)",
         "ASTONOMICAL": "Astronomical dawn (108°)",
         "ManualTimeSynchronization": "Manual Time Synchronization",
-        "CurrentOpenDtuTime": "Current OpenDTU Time",
+        "CurrentOpenDtuTime": "Current OpenDTU-OnBattery Time",
         "CurrentLocalTime": "Current Local Time",
         "SynchronizeTime": "Synchronize Time",
-        "SynchronizeTimeHint": "<b>Hint:</b> You can use the manual time synchronization to set the current time of OpenDTU if no NTP server is available. But be aware, that in case of power cycle the time gets lost. Also note that time accuracy will be skewed badly, as it can not be resynchronised regularly and the ESP32 microcontroller does not have a real time clock."
+        "SynchronizeTimeHint": "<b>Hint:</b> You can use the manual time synchronization to set the current time of OpenDTU-OnBattery if no NTP server is available. But be aware, that in case of power cycle the time gets lost. Also note that time accuracy will be skewed badly, as it can not be resynchronised regularly and the ESP32 microcontroller does not have a real time clock."
     },
     "networkadmin": {
         "NetworkSettings": "Network Settings",
@@ -797,7 +797,7 @@
         "RestoreHeader": "Restore: Restore the Configuration File",
         "Back": "Back",
         "UploadSuccess": "Upload Success",
-        "RestoreHint": "<b>Note:</b> This operation replaces the configuration file with the restored configuration and restarts OpenDTU to apply all settings.",
+        "RestoreHint": "<b>Note:</b> This operation replaces the configuration file with the restored configuration and restarts OpenDTU-OnBattery to apply all settings.",
         "ResetHeader": "Initialize: Perform Factory Reset",
         "FactoryResetButton": "Restore Factory-Default Settings",
         "ResetHint": "<b>Note:</b> Click Restore Factory-Default Settings to restore and initialize the factory-default settings and reboot.",
@@ -835,7 +835,7 @@
         "ProjectOriginBody1": "OpenDTU-OnBattery is a fork of OpenDTU. The upstream project OpenDTU was started from <a href=\"https://www.mikrocontroller.net/topic/525778\" target=\"_blank\">this discussion. (Mikrocontroller.net)</a>",
         "ProjectOriginBody2": "The Hoymiles protocol was decrypted through the voluntary efforts of many participants. OpenDTU, among others, was developed based on this work. The project is licensed under an Open Source License (<a href=\"https://www.gnu.de/documents/gpl-2.0.de.html\" target=\"_blank\">GNU General Public License version 2</a>).",
         "ProjectOriginBody3": "The software was developed to the best of our knowledge and belief. Nevertheless, no liability can be accepted for a malfunction or guarantee loss of the inverter.",
-        "ProjectOriginBody4": "OpenDTU is freely available. If you paid money for the software, you probably got ripped off.",
+        "ProjectOriginBody4": "OpenDTU and OpenDTU-OnBattery are freely available. If you paid money for the software, you probably got ripped off.",
         "NewsUpdates": "News & Updates",
         "NewsUpdatesBody": "New updates can be found on <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/releases\" target=\"_blank\">Github</a>.",
         "ErrorReporting": "Error Reporting",
diff --git a/webapp/src/locales/fr.json b/webapp/src/locales/fr.json
index 43c581376..31c756300 100644
--- a/webapp/src/locales/fr.json
+++ b/webapp/src/locales/fr.json
@@ -469,9 +469,9 @@
         "PerformReboot": "Effectuer un redémarrage",
         "Reboot": "Redémarrer !",
         "Cancel": "@:base.Cancel",
-        "RebootOpenDTU": "Redémarrer OpenDTU",
+        "RebootOpenDTU": "Redémarrer OpenDTU-OnBattery",
         "RebootQuestion": "Voulez-vous vraiment redémarrer l'appareil ?",
-        "RebootHint": "<b>Astuce :</b> Normalement, il n'est pas nécessaire de procéder à un redémarrage manuel. OpenDTU effectue automatiquement tout redémarrage nécessaire (par exemple, après une mise à jour du firmware). Les paramètres sont également adoptés sans redémarrage. Si vous devez redémarrer en raison d'une erreur, veuillez envisager de la signaler à l'adresse suivante <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/issues\" class=\"alert-link\" target=\"_blank\">Github</a>."
+        "RebootHint": "<b>Astuce :</b> Normalement, il n'est pas nécessaire de procéder à un redémarrage manuel. OpenDTU-OnBattery effectue automatiquement tout redémarrage nécessaire (par exemple, après une mise à jour du firmware). Les paramètres sont également adoptés sans redémarrage. Si vous devez redémarrer en raison d'une erreur, veuillez envisager de la signaler à l'adresse suivante <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/issues\" class=\"alert-link\" target=\"_blank\">Github</a>."
     },
     "dtuadmin": {
         "DtuSettings": "Paramètres du DTU",
@@ -513,7 +513,7 @@
         "NtpSettings": "Paramètres NTP",
         "NtpConfiguration": "Configuration du protocole NTP",
         "TimeServer": "Serveur horaire",
-        "TimeServerHint": "La valeur par défaut convient tant que OpenDTU a un accès direct à Internet.",
+        "TimeServerHint": "La valeur par défaut convient tant que OpenDTU-OnBattery a un accès direct à Internet.",
         "Timezone": "Fuseau horaire",
         "TimezoneConfig": "Configuration du fuseau horaire",
         "LocationConfiguration": "Géolocalisation",
@@ -526,10 +526,10 @@
         "CIVIL": "Civil dawn (96°)",
         "ASTONOMICAL": "Astronomical dawn (108°)",
         "ManualTimeSynchronization": "Synchronisation manuelle de l'heure",
-        "CurrentOpenDtuTime": "Heure actuelle de l'OpenDTU",
+        "CurrentOpenDtuTime": "Heure actuelle de l'OpenDTU-OnBattery",
         "CurrentLocalTime": "Heure locale actuelle",
         "SynchronizeTime": "Synchroniser l'heure",
-        "SynchronizeTimeHint": "<b>Astuce :</b> Vous pouvez utiliser la synchronisation horaire manuelle pour définir l'heure actuelle d'OpenDTU si aucun serveur NTP n'est disponible. Mais attention, en cas de mise sous tension, l'heure est perdue. Notez également que la précision de l'heure sera faussée, car elle ne peut pas être resynchronisée régulièrement et le microcontrôleur ESP32 ne dispose pas d'une horloge temps réel."
+        "SynchronizeTimeHint": "<b>Astuce :</b> Vous pouvez utiliser la synchronisation horaire manuelle pour définir l'heure actuelle d'OpenDTU-OnBattery si aucun serveur NTP n'est disponible. Mais attention, en cas de mise sous tension, l'heure est perdue. Notez également que la précision de l'heure sera faussée, car elle ne peut pas être resynchronisée régulièrement et le microcontrôleur ESP32 ne dispose pas d'une horloge temps réel."
     },
     "networkadmin": {
         "NetworkSettings": "Paramètres réseau",
@@ -694,7 +694,7 @@
         "RestoreHeader": "Restaurer le fichier de configuration",
         "Back": "Retour",
         "UploadSuccess": "Succès du téléversement",
-        "RestoreHint": "<b>Note :</b> Cette opération remplace le fichier de configuration par la configuration restaurée et redémarre OpenDTU pour appliquer tous les paramètres.",
+        "RestoreHint": "<b>Note :</b> Cette opération remplace le fichier de configuration par la configuration restaurée et redémarre OpenDTU-OnBattery pour appliquer tous les paramètres.",
         "ResetHeader": "Effectuer une réinitialisation d'usine",
         "FactoryResetButton": "Restaurer les paramètres d'usine",
         "ResetHint": "<b>Note :</b> Cliquez sur \"Restaurer les paramètres d'usine\" pour restaurer et initialiser les paramètres d'usine par défaut et redémarrer.",
@@ -782,7 +782,7 @@
         "ProjectOriginBody1": "Ce projet a été démarré suite à cette discussion <a href=\"https://www.mikrocontroller.net/topic/525778\" target=\"_blank\">(Mikrocontroller.net)</a>.",
         "ProjectOriginBody2": "Le protocole Hoymiles a été décrypté grâce aux efforts volontaires de nombreux participants. OpenDTU, entre autres, a été développé sur la base de ce travail. Le projet est sous licence Open Source (<a href=\"https://www.gnu.de/documents/gpl-2.0.de.html\" target=\"_blank\">GNU General Public License version 2</a>).",
         "ProjectOriginBody3": "Le logiciel a été développé au mieux de nos connaissances et de nos convictions. Néanmoins, aucune responsabilité ne peut être acceptée en cas de dysfonctionnement ou de perte de garantie de l'onduleur.",
-        "ProjectOriginBody4": "OpenDTU est disponible gratuitement. Si vous avez payé pour le logiciel, vous avez probablement été arnaqué.",
+        "ProjectOriginBody4": "OpenDTU et OpenDTU-OnBattery sont disponible gratuitement. Si vous avez payé pour le logiciel, vous avez probablement été arnaqué.",
         "NewsUpdates": "Actualités et mises à jour",
         "NewsUpdatesBody": "Les nouvelles mises à jour peuvent être trouvées sur <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/releases\" target=\"_blank\">Github</a>.",
         "ErrorReporting": "Rapport d'erreurs",

From 0321d4b73bb3d8c29350433bb9e36f00e7392fac Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sun, 27 Oct 2024 19:57:25 +0100
Subject: [PATCH 23/33] webapp: optimize placement of device profile doc
 buttons

* remove empty container for device profile links. if a device profile
  has no links, no buttons are generated, but a row was still part of
  the DOM, adding spurious space between the select and the alert with
  the hint.
* "float" the buttons to the right, as we always place these kinds of
  buttons to the right.
---
 webapp/src/views/DeviceAdminView.vue | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/webapp/src/views/DeviceAdminView.vue b/webapp/src/views/DeviceAdminView.vue
index 258ec5b2c..1bcb8bff1 100644
--- a/webapp/src/views/DeviceAdminView.vue
+++ b/webapp/src/views/DeviceAdminView.vue
@@ -78,19 +78,15 @@
                                 </div>
                             </div>
 
-                            <div class="row mb-3">
-                                <div class="col-sm-2"></div>
-                                <div class="col-sm-10">
-                                    <div
-                                        class="btn-group mb-2 me-2"
-                                        v-for="(doc, index) in pinMappingList.find(
-                                            (i) => i.name === deviceConfigList.curPin.name
-                                        )?.links"
-                                        :key="index"
-                                    >
-                                        <a :href="doc.url" class="btn btn-primary" target="_blank">{{ doc.name }}</a>
-                                    </div>
-                                </div>
+                            <div class="mb-3 d-flex justify-content-end gap-3" v-if="docLinks.length">
+                                <a
+                                    v-for="(doc, index) in docLinks"
+                                    :key="index"
+                                    :href="doc.url"
+                                    class="btn btn-primary"
+                                    target="_blank"
+                                    >{{ doc.name }}</a
+                                >
                             </div>
 
                             <div
@@ -313,6 +309,12 @@ export default defineComponent({
             this.deviceConfigList.led.every((v) => (v.brightness = this.deviceConfigList.led[0].brightness));
         },
     },
+    computed: {
+        docLinks() {
+            const mapping = this.pinMappingList.find((i) => i.name === this.deviceConfigList.curPin.name);
+            return mapping?.links || [];
+        },
+    },
     methods: {
         getPinMappingList() {
             this.pinMappingLoading = true;

From 311ca985d667374d2f5fd1cde44d40898821adcd Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sun, 27 Oct 2024 20:15:03 +0100
Subject: [PATCH 24/33] webapp: show pin mapping categories as cards

on a desktop browser, this approach allows to display all categories at
once. we also increase readability as the values are much closer to
their label. previously, the values were far to the right of the screen
and it was unpleasent to read which value belonged to which setting. the
grouping of values per category was also not very well conceived.

by using cards, we also avoid some styling issues, namely the use of
rowspan, which caused a spurious table cell border at the end of the old
table layout.
---
 webapp/src/components/PinInfo.vue | 66 +++++++++++++++----------------
 webapp/src/locales/de.json        |  1 -
 webapp/src/locales/en.json        |  1 -
 webapp/src/locales/fr.json        |  1 -
 4 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/webapp/src/components/PinInfo.vue b/webapp/src/components/PinInfo.vue
index ee9359e3f..03dcfbbb3 100644
--- a/webapp/src/components/PinInfo.vue
+++ b/webapp/src/components/PinInfo.vue
@@ -1,40 +1,36 @@
 <template>
-    <CardElement :text="$t('pininfo.PinOverview')" textVariant="text-bg-primary" table>
-        <div class="table-responsive">
-            <table class="table table-hover table-condensed">
-                <thead>
-                    <tr>
-                        <th>{{ $t('pininfo.Category') }}</th>
-                        <th>{{ $t('pininfo.Name') }}</th>
-                        <th>{{ $t('pininfo.ValueSelected') }}</th>
-                        <th>{{ $t('pininfo.ValueActive') }}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <template v-for="category in categories" :key="category">
-                        <tr v-for="(prop, prop_idx) in properties(category)" :key="prop">
-                            <td v-if="prop_idx == 0" :rowspan="properties(category).length">
-                                {{ capitalizeFirstLetter(category) }}
-                            </td>
-                            <td :class="{ 'table-danger': !isEqual(category, prop) }">
-                                {{ prop }}
-                            </td>
-                            <td>
-                                <template v-if="selectedPinAssignment && category in selectedPinAssignment">
-                                    {{ (selectedPinAssignment as any)[category][prop] }}</template
-                                >
-                            </td>
-                            <td>
-                                <template v-if="currentPinAssignment && category in currentPinAssignment">
-                                    {{ (currentPinAssignment as any)[category][prop] }}</template
-                                >
-                            </td>
-                        </tr>
-                    </template>
-                </tbody>
-            </table>
+    <div class="row flex-row flex-wrap g-3">
+        <div class="col" v-for="category in categories" :key="category">
+            <CardElement :text="capitalizeFirstLetter(category)" textVariant="text-bg-primary" table>
+                <div class="table-responsive">
+                    <table class="table table-hover table-condensed">
+                        <tbody>
+                            <tr>
+                                <th>{{ $t('pininfo.Name') }}</th>
+                                <th class="text-center">{{ $t('pininfo.ValueSelected') }}</th>
+                                <th class="text-center">{{ $t('pininfo.ValueActive') }}</th>
+                            </tr>
+                            <tr v-for="(prop, prop_idx) in properties(category)" :key="prop_idx">
+                                <td :class="{ 'table-danger': !isEqual(category, prop) }">
+                                    {{ prop }}
+                                </td>
+                                <td class="text-center">
+                                    <template v-if="selectedPinAssignment && category in selectedPinAssignment">
+                                        {{ (selectedPinAssignment as any)[category][prop] }}</template
+                                    >
+                                </td>
+                                <td class="text-center">
+                                    <template v-if="currentPinAssignment && category in currentPinAssignment">
+                                        {{ (currentPinAssignment as any)[category][prop] }}</template
+                                    >
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </CardElement>
         </div>
-    </CardElement>
+    </div>
 </template>
 
 <script lang="ts">
diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
index 50c427bbc..e8a3e668c 100644
--- a/webapp/src/locales/de.json
+++ b/webapp/src/locales/de.json
@@ -881,7 +881,6 @@
         "LedBrightness": "LED {led} Helligkeit ({brightness})"
     },
     "pininfo": {
-        "PinOverview": "Anschlussübersicht",
         "Category": "Kategorie",
         "Name": "Name",
         "ValueSelected": "Ausgewählt",
diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index 4542d99ae..d5a6f5f38 100644
--- a/webapp/src/locales/en.json
+++ b/webapp/src/locales/en.json
@@ -884,7 +884,6 @@
         "LedBrightness": "LED {led} brightness ({brightness})"
     },
     "pininfo": {
-        "PinOverview": "Connection overview",
         "Category": "Category",
         "Name": "Name",
         "Number": "Number",
diff --git a/webapp/src/locales/fr.json b/webapp/src/locales/fr.json
index 31c756300..f66297a73 100644
--- a/webapp/src/locales/fr.json
+++ b/webapp/src/locales/fr.json
@@ -831,7 +831,6 @@
         "LedBrightness": "LED {led} luminosité ({brightness})"
     },
     "pininfo": {
-        "PinOverview": "Vue d'ensemble des connexions",
         "Category": "Catégorie",
         "Name": "Nom",
         "ValueSelected": "Sélectionné",

From ebfc1a8c4ae829ad85a229e1072d6d05f12121c4 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sun, 27 Oct 2024 20:30:51 +0100
Subject: [PATCH 25/33] webapp: device manager: optimize cards for tab nav

the top border of the card was breaking the design of the tabs, where
the active tab would be "visually connected" to the content. also, the
rounded border at the top did not blend in with the navbar's bottom
border.
---
 webapp/src/scss/styles.scss          | 7 +++++++
 webapp/src/views/DeviceAdminView.vue | 6 +++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/webapp/src/scss/styles.scss b/webapp/src/scss/styles.scss
index 4c468e54d..d654b41ac 100644
--- a/webapp/src/scss/styles.scss
+++ b/webapp/src/scss/styles.scss
@@ -57,3 +57,10 @@ div.card.card-table table .value {
     text-align: right;
     padding-right: 0;
 }
+
+// blend cards into tabbed navigation (device admin view)
+div.card-tabbed {
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
diff --git a/webapp/src/views/DeviceAdminView.vue b/webapp/src/views/DeviceAdminView.vue
index 1bcb8bff1..f49f0cec4 100644
--- a/webapp/src/views/DeviceAdminView.vue
+++ b/webapp/src/views/DeviceAdminView.vue
@@ -51,7 +51,7 @@
                     aria-labelledby="nav-pin-tab"
                     tabindex="0"
                 >
-                    <div class="card">
+                    <div class="card card-tabbed">
                         <div class="card-body">
                             <div class="row mb-3">
                                 <label for="inputPinProfile" class="col-sm-2 col-form-label">{{
@@ -112,7 +112,7 @@
                     aria-labelledby="nav-display-tab"
                     tabindex="0"
                 >
-                    <div class="card">
+                    <div class="card card-tabbed">
                         <div class="card-body">
                             <InputElement
                                 :label="$t('deviceadmin.PowerSafe')"
@@ -213,7 +213,7 @@
                     aria-labelledby="nav-leds-tab"
                     tabindex="0"
                 >
-                    <div class="card">
+                    <div class="card card-tabbed">
                         <div class="card-body">
                             <InputElement
                                 :label="$t('deviceadmin.EqualBrightness')"

From cd3176587287bcd60c24a675b7d8f9c67f6af538 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sun, 27 Oct 2024 20:41:28 +0100
Subject: [PATCH 26/33] webapp: properly space alert with hint for hostname

---
 webapp/src/views/NetworkAdminView.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/webapp/src/views/NetworkAdminView.vue b/webapp/src/views/NetworkAdminView.vue
index 43a636658..dab84c952 100644
--- a/webapp/src/views/NetworkAdminView.vue
+++ b/webapp/src/views/NetworkAdminView.vue
@@ -26,7 +26,11 @@
                     type="text"
                     maxlength="32"
                 >
-                    <div class="alert alert-secondary" role="alert" v-html="$t('networkadmin.HostnameHint')"></div>
+                    <div
+                        class="alert alert-secondary mb-0 mt-3"
+                        role="alert"
+                        v-html="$t('networkadmin.HostnameHint')"
+                    ></div>
                 </InputElement>
 
                 <InputElement :label="$t('networkadmin.EnableDhcp')" v-model="networkConfigList.dhcp" type="checkbox" />

From 728d8b8d91f4431e6e74ba4284035a30c2dcfaae Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sun, 27 Oct 2024 21:03:39 +0100
Subject: [PATCH 27/33] webapp: optimize look of firmware update cards

---
 webapp/src/views/FirmwareUpgradeView.vue | 30 ++++++++++--------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/webapp/src/views/FirmwareUpgradeView.vue b/webapp/src/views/FirmwareUpgradeView.vue
index df8e43046..338e001e8 100644
--- a/webapp/src/views/FirmwareUpgradeView.vue
+++ b/webapp/src/views/FirmwareUpgradeView.vue
@@ -17,16 +17,15 @@
             <p class="h1 mb-2">
                 <BIconExclamationCircleFill />
             </p>
-
-            <span style="vertical-align: middle" class="ml-2">
-                {{ OTAError }}
-            </span>
-            <br />
-            <br />
-            <button class="btn btn-light" @click="clear"><BIconArrowLeft /> {{ $t('firmwareupgrade.Back') }}</button>
-            <button class="btn btn-primary" @click="retryOTA">
-                <BIconArrowRepeat /> {{ $t('firmwareupgrade.Retry') }}
-            </button>
+            {{ OTAError }}
+            <div class="mt-3 d-flex gap-3 justify-content-center">
+                <button class="btn btn-light" @click="clear">
+                    <BIconArrowLeft /> {{ $t('firmwareupgrade.Back') }}
+                </button>
+                <button class="btn btn-primary" @click="retryOTA">
+                    <BIconArrowRepeat /> {{ $t('firmwareupgrade.Retry') }}
+                </button>
+            </div>
         </CardElement>
 
         <CardElement
@@ -35,13 +34,8 @@
             center-content
             v-else-if="!loading && !uploading && OTASuccess"
         >
-            <span class="h1 mb-2">
-                <BIconCheckCircle />
-            </span>
-            <span> {{ $t('firmwareupgrade.OtaSuccess') }} </span>
-            <br />
-            <br />
-            <div class="text-center">
+            <BIconCheckCircle class="fs-1" />&nbsp;{{ $t('firmwareupgrade.OtaSuccess') }}
+            <div>
                 <div class="spinner-border" role="status">
                     <span class="visually-hidden"></span>
                 </div>
@@ -62,7 +56,7 @@
             center-content
             v-else-if="!loading && !uploading"
         >
-            <div class="form-group pt-2 mt-3">
+            <div class="form-group">
                 <input class="form-control" type="file" ref="file" accept=".bin,.bin.gz" @change="uploadOTA" />
             </div>
         </CardElement>

From 4b5f7f19b2b359339ac82fe7d1cdd37f03086e3c Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sun, 27 Oct 2024 21:21:46 +0100
Subject: [PATCH 28/33] webapp: inverter advanced tab needs space at the top

this avoids the input text box from colliding with the tab navigation
bottom border.
---
 webapp/src/views/InverterAdminView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/views/InverterAdminView.vue b/webapp/src/views/InverterAdminView.vue
index 341279b3a..68b3f72ea 100644
--- a/webapp/src/views/InverterAdminView.vue
+++ b/webapp/src/views/InverterAdminView.vue
@@ -267,7 +267,7 @@
             </div>
 
             <div
-                class="tab-pane fade show"
+                class="tab-pane fade show pt-3"
                 id="nav-advanced"
                 role="tabpanel"
                 aria-labelledby="nav-advanced-tab"

From 8a95960f974c123c71f9e47a11b764ec925683e6 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sun, 27 Oct 2024 21:41:25 +0100
Subject: [PATCH 29/33] webapp: fix AC charger admin view

use InputElement where possible, which in particular fixes that the
inputs of the second card were all in the same row.
---
 webapp/src/locales/de.json              |   3 +-
 webapp/src/locales/en.json              |   3 +-
 webapp/src/locales/fr.json              |   3 +-
 webapp/src/views/AcChargerAdminView.vue | 228 +++++++++---------------
 4 files changed, 92 insertions(+), 145 deletions(-)

diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
index e8a3e668c..e2c3c7f57 100644
--- a/webapp/src/locales/de.json
+++ b/webapp/src/locales/de.json
@@ -941,7 +941,8 @@
         "StopBatterySoCThreshold": "Laden bei SoC beenden",
         "StopBatterySoCThresholdHint": "Zur Verlängerung der Akku-Lebensdauer kann der Ladevorgang bei einem bestimmten SoC gestoppt werden.\nHinweis: Manche LiFePO-Akkus müssen gelegentlich voll geladen werden, um die SoC-Anzeige akkurat zu halten.",
         "Seconds": "@:base.Seconds",
-        "EnableEmergencyCharge": "Notfallladen: Batterie wird mit maximaler Leistung geladen wenn durch das Batterie BMS angefordert",
+        "EnableEmergencyCharge": "Notfallladen",
+        "EnableEmergencyChargeHint": "Batterie wird mit maximaler Leistung geladen wenn durch das Batterie BMS angefordert",
         "targetPowerConsumption": "Angestrebter Netzbezug",
         "targetPowerConsumptionHint": "Bei postiven Werten wird die eingestellte Leistung aus dem Stromnetz bezogen. Bei negativen Werten wird das Netzteil vorzeitig abgeschaltet."
     },
diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index d5a6f5f38..fb76b2dfb 100644
--- a/webapp/src/locales/en.json
+++ b/webapp/src/locales/en.json
@@ -945,7 +945,8 @@
         "StopBatterySoCThreshold": "Stop charging at SoC",
         "StopBatterySoCThresholdHint": "To prolong the battery's lifespan, charging can be stopped at a certain SoC level.\nHint: In order to keep the SoC reading accurate, some LiFePO cells must be charged to full capacity regularly.",
         "Seconds": "@:base.Seconds",
-        "EnableEmergencyCharge": "Emergency charge. Battery charged with maximum power if requested by Battery BMS",
+        "EnableEmergencyCharge": "Emergency charge",
+        "EnableEmergencyChargeHint": "Battery charged with maximum power if requested by Battery BMS",
         "targetPowerConsumption": "Target power consumption",
         "targetPowerConsumptionHint": "Postitive values use grid power to charge the battery. Negative values result in early shutdown"
     },
diff --git a/webapp/src/locales/fr.json b/webapp/src/locales/fr.json
index f66297a73..4ff30aa39 100644
--- a/webapp/src/locales/fr.json
+++ b/webapp/src/locales/fr.json
@@ -891,7 +891,8 @@
         "StopBatterySoCThreshold": "Stop charging at SoC",
         "StopBatterySoCThresholdHint": "To prolong the battery's lifespan, charging can be stopped at a certain SoC level.\nHint: In order to keep the SoC reading accurate, some LiFePO cells must be charged to full capacity regularly.",
         "Seconds": "@:base.Seconds",
-        "EnableEmergencyCharge": "Emergency charge. Battery charged with maximum power if requested by Battery BMS",
+        "EnableEmergencyCharge": "Emergency charge",
+        "EnableEmergencyChargeHint": "Battery charged with maximum power if requested by Battery BMS",
         "targetPowerConsumption": "Target power consumption",
         "targetPowerConsumptionHint": "Postitive values use grid power to charge the battery. Negative values result in early shutdown"
     },
diff --git a/webapp/src/views/AcChargerAdminView.vue b/webapp/src/views/AcChargerAdminView.vue
index 8b2fa9116..44193bcf8 100644
--- a/webapp/src/views/AcChargerAdminView.vue
+++ b/webapp/src/views/AcChargerAdminView.vue
@@ -55,152 +55,98 @@
 
                     <InputElement
                         :label="$t('acchargeradmin.EnableEmergencyCharge')"
+                        :tooltip="$t('acchargeradmin.EnableEmergencyChargeHint')"
                         v-model="acChargerConfigList.emergency_charge_enabled"
                         type="checkbox"
                         wide
                     />
                 </template>
+            </CardElement>
 
-                <CardElement
-                    :text="$t('acchargeradmin.Limits')"
-                    textVariant="text-bg-primary"
-                    add-space
-                    v-if="acChargerConfigList.auto_power_enabled || acChargerConfigList.emergency_charge_enabled"
-                >
-                    <div class="row mb-3">
-                        <label for="voltageLimit" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.VoltageLimit') }}
-                            <BIconInfoCircle v-tooltip :title="$t('acchargeradmin.stopVoltageLimitHint')" />
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <input
-                                    type="number"
-                                    step="0.01"
-                                    class="form-control"
-                                    id="voltageLimit"
-                                    placeholder="42"
-                                    v-model="acChargerConfigList.voltage_limit"
-                                    aria-describedby="voltageLimitDescription"
-                                    min="42"
-                                    max="58.5"
-                                    required
-                                />
-                                <span class="input-group-text" id="voltageLimitDescription">V</span>
-                            </div>
-                        </div>
-                        <label for="enableVoltageLimit" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.enableVoltageLimit') }}
-                            <BIconInfoCircle v-tooltip :title="$t('acchargeradmin.enableVoltageLimitHint')" />
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <input
-                                    type="number"
-                                    step="0.01"
-                                    class="form-control"
-                                    id="enableVoltageLimit"
-                                    placeholder="42"
-                                    v-model="acChargerConfigList.enable_voltage_limit"
-                                    aria-describedby="enableVoltageLimitDescription"
-                                    min="42"
-                                    max="58.5"
-                                    required
-                                />
-                                <span class="input-group-text" id="enableVoltageLimitDescription">V</span>
-                            </div>
-                        </div>
-                        <label for="lowerPowerLimit" class="col-sm-2 col-form-label">{{
-                            $t('acchargeradmin.lowerPowerLimit')
-                        }}</label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <input
-                                    type="number"
-                                    class="form-control"
-                                    id="lowerPowerLimit"
-                                    placeholder="150"
-                                    v-model="acChargerConfigList.lower_power_limit"
-                                    aria-describedby="lowerPowerLimitDescription"
-                                    min="50"
-                                    max="3000"
-                                    required
-                                />
-                                <span class="input-group-text" id="lowerPowerLimitDescription">W</span>
-                            </div>
-                        </div>
-                        <label for="upperPowerLimit" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.upperPowerLimit') }}
-                            <BIconInfoCircle v-tooltip :title="$t('acchargeradmin.upperPowerLimitHint')" />
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <input
-                                    type="number"
-                                    class="form-control"
-                                    id="upperPowerLimit"
-                                    placeholder="2000"
-                                    v-model="acChargerConfigList.upper_power_limit"
-                                    aria-describedby="upperPowerLimitDescription"
-                                    min="100"
-                                    max="3000"
-                                    required
-                                />
-                                <span class="input-group-text" id="upperPowerLimitDescription">W</span>
-                            </div>
-                        </div>
-                        <label for="targetPowerConsumption" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.targetPowerConsumption') }}
-                            <BIconInfoCircle v-tooltip :title="$t('acchargeradmin.targetPowerConsumptionHint')" />
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <input
-                                    type="number"
-                                    class="form-control"
-                                    id="targetPowerConsumption"
-                                    placeholder="0"
-                                    v-model="acChargerConfigList.target_power_consumption"
-                                    aria-describedby="targetPowerConsumptionDescription"
-                                    required
-                                />
-                                <span class="input-group-text" id="targetPowerConsumptionDescription">W</span>
-                            </div>
-                        </div>
-                    </div>
-                </CardElement>
-                <CardElement
-                    :text="$t('acchargeradmin.BatterySoCLimits')"
-                    textVariant="text-bg-primary"
-                    add-space
-                    v-if="
-                        acChargerConfigList.auto_power_enabled &&
-                        acChargerConfigList.auto_power_batterysoc_limits_enabled
-                    "
-                >
-                    <div class="row mb-3">
-                        <label for="stopBatterySoCThreshold" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.StopBatterySoCThreshold') }}
-                            <BIconInfoCircle v-tooltip :title="$t('acchargeradmin.StopBatterySoCThresholdHint')" />
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <input
-                                    type="number"
-                                    class="form-control"
-                                    id="stopBatterySoCThreshold"
-                                    placeholder="95"
-                                    v-model="acChargerConfigList.stop_batterysoc_threshold"
-                                    aria-describedby="stopBatterySoCThresholdDescription"
-                                    min="2"
-                                    max="99"
-                                    required
-                                />
-                                <span class="input-group-text" id="stopBatterySoCThresholdDescription">%</span>
-                            </div>
-                        </div>
-                    </div>
-                </CardElement>
+            <CardElement
+                :text="$t('acchargeradmin.Limits')"
+                textVariant="text-bg-primary"
+                add-space
+                v-if="acChargerConfigList.auto_power_enabled || acChargerConfigList.emergency_charge_enabled"
+            >
+                <InputElement
+                    :label="$t('acchargeradmin.VoltageLimit')"
+                    :tooltip="$t('acchargeradmin.stopVoltageLimitHint')"
+                    v-model="acChargerConfigList.voltage_limit"
+                    postfix="V"
+                    type="number"
+                    wide
+                    required
+                    step="0.01"
+                    min="42"
+                    max="58.5"
+                />
+
+                <InputElement
+                    :label="$t('acchargeradmin.enableVoltageLimit')"
+                    :tooltip="$t('acchargeradmin.enableVoltageLimitHint')"
+                    v-model="acChargerConfigList.enable_voltage_limit"
+                    postfix="V"
+                    type="number"
+                    wide
+                    required
+                    step="0.01"
+                    min="42"
+                    max="58.5"
+                />
+
+                <InputElement
+                    :label="$t('acchargeradmin.lowerPowerLimit')"
+                    v-model="acChargerConfigList.lower_power_limit"
+                    postfix="W"
+                    type="number"
+                    wide
+                    required
+                    min="50"
+                    max="3000"
+                />
+
+                <InputElement
+                    :label="$t('acchargeradmin.upperPowerLimit')"
+                    :tooltip="$t('acchargeradmin.upperPowerLimitHint')"
+                    v-model="acChargerConfigList.upper_power_limit"
+                    postfix="W"
+                    type="number"
+                    wide
+                    required
+                    min="100"
+                    max="3000"
+                />
+
+                <InputElement
+                    :label="$t('acchargeradmin.targetPowerConsumption')"
+                    :tooltip="$t('acchargeradmin.targetPowerConsumptionHint')"
+                    v-model="acChargerConfigList.target_power_consumption"
+                    postfix="W"
+                    type="number"
+                    wide
+                    required
+                />
+            </CardElement>
+            <CardElement
+                :text="$t('acchargeradmin.BatterySoCLimits')"
+                textVariant="text-bg-primary"
+                add-space
+                v-if="
+                    acChargerConfigList.auto_power_enabled && acChargerConfigList.auto_power_batterysoc_limits_enabled
+                "
+            >
+                <InputElement
+                    :label="$t('acchargeradmin.StopBatterySoCThreshold')"
+                    :tooltip="$t('acchargeradmin.StopBatterySoCThresholdHint')"
+                    v-model="acChargerConfigList.stop_batterysoc_threshold"
+                    postfix="%"
+                    type="number"
+                    wide
+                    required
+                    min="2"
+                    max="99"
+                />
             </CardElement>
 
             <FormFooter @reload="getChargerConfig" />
@@ -214,7 +160,6 @@ import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import CardElement from '@/components/CardElement.vue';
 import FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
-import { BIconInfoCircle } from 'bootstrap-icons-vue';
 import type { AcChargerConfig } from '@/types/AcChargerConfig';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
@@ -226,7 +171,6 @@ export default defineComponent({
         CardElement,
         FormFooter,
         InputElement,
-        BIconInfoCircle,
     },
     data() {
         return {

From 6a63487aeebc6df7cb073160dcdd3bfa816f3d42 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sun, 27 Oct 2024 22:05:44 +0100
Subject: [PATCH 30/33] webapp: optimize look of login page

improve spacing and align login buton to the right, where all our
buttons are.
---
 webapp/src/views/LoginView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/views/LoginView.vue b/webapp/src/views/LoginView.vue
index f24a791f5..aaa11bfc1 100644
--- a/webapp/src/views/LoginView.vue
+++ b/webapp/src/views/LoginView.vue
@@ -20,7 +20,7 @@
                         {{ $t('login.UsernameRequired') }}
                     </div>
                 </div>
-                <div class="form-group">
+                <div class="form-group mt-3">
                     <label htmlFor="password">{{ $t('login.Password') }}</label>
                     <input
                         type="password"
@@ -33,7 +33,7 @@
                         {{ $t('login.PasswordRequired') }}
                     </div>
                 </div>
-                <div class="form-group">
+                <div class="d-flex justify-content-end mt-3">
                     <button class="btn btn-primary" :disabled="dataLoading">
                         {{ $t('login.LoginButton') }}
                     </button>

From 8d26836bac4e15c832b199e0e616da6f7921fe0c Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Mon, 28 Oct 2024 20:52:04 +0100
Subject: [PATCH 31/33] webapp: optimize spacing around power meter test
 buttons

---
 webapp/src/views/PowerMeterAdminView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/views/PowerMeterAdminView.vue b/webapp/src/views/PowerMeterAdminView.vue
index 82a7aaee9..554791567 100644
--- a/webapp/src/views/PowerMeterAdminView.vue
+++ b/webapp/src/views/PowerMeterAdminView.vue
@@ -226,7 +226,7 @@
                         textVariant="text-bg-primary"
                         add-space
                     >
-                        <div class="text-center mt-3 mb-3">
+                        <div class="text-center mb-3">
                             <button type="button" class="btn btn-primary" @click="testHttpJsonRequest()">
                                 {{ $t('powermeteradmin.testHttpJsonRequest') }}
                             </button>
@@ -262,7 +262,7 @@
                         textVariant="text-bg-primary"
                         add-space
                     >
-                        <div class="text-center mt-3 mb-3">
+                        <div class="text-center mb-3">
                             <button type="button" class="btn btn-primary" @click="testHttpSmlRequest()">
                                 {{ $t('powermeteradmin.testHttpSmlRequest') }}
                             </button>

From a9d8cf26214c5e116364910d85962a77296aef49 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Mon, 28 Oct 2024 21:11:07 +0100
Subject: [PATCH 32/33] webapp: always scroll up when navigating to another
 view

---
 webapp/src/router/index.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/webapp/src/router/index.ts b/webapp/src/router/index.ts
index c96ca25f8..f752804bc 100644
--- a/webapp/src/router/index.ts
+++ b/webapp/src/router/index.ts
@@ -28,6 +28,13 @@ import { createRouter, createWebHistory } from 'vue-router';
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
     linkActiveClass: 'active',
+    scrollBehavior() {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve({ top: 0 });
+            }, 100);
+        });
+    },
     routes: [
         {
             path: '/',

From af8bd9ffa5298e434d8d8fa623c90018c09e5000 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Mon, 28 Oct 2024 21:14:45 +0100
Subject: [PATCH 33/33] webapp: optimize body bottom padding and length

long forms, when scrolled to the bottom, would leave no space between
the bottom of the viewport and the buttons, which is unpleasent.

short views would still createa large (high) body, for apparently no
reason.
---
 webapp/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 200ce6695..8c5f2f98a 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -18,7 +18,7 @@ export default defineComponent({
 <style>
 /* Show it is fixed to the top */
 body {
-    min-height: 75rem;
+    padding-bottom: 1rem;
     padding-top: 4.5rem;
 }
 </style>