From 9520d8d394451ee523cea78bffbfeed172108d59 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Thu, 23 May 2024 20:48:19 +0200
Subject: [PATCH] powermeter refactor: polish web UI

---
 webapp/src/components/HttpRequestSettings.vue | 24 ++++++---
 webapp/src/locales/de.json                    | 10 ++--
 webapp/src/locales/en.json                    | 14 ++---
 webapp/src/views/PowerMeterAdminView.vue      | 53 +++++++++----------
 4 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/webapp/src/components/HttpRequestSettings.vue b/webapp/src/components/HttpRequestSettings.vue
index 7c922c1c..fccb14a4 100644
--- a/webapp/src/components/HttpRequestSettings.vue
+++ b/webapp/src/components/HttpRequestSettings.vue
@@ -7,11 +7,12 @@
                 maxlength="1024"
                 placeholder="http://admin:supersecret@mypowermeter.home/status"
                 prefix="GET "
-                :tooltip="$t('httprequestsettings.urlDescription')" />
+                :tooltip="$t('httprequestsettings.urlDescription')"
+                wide />
 
         <div class="row mb-3">
-            <label for="auth_type" class="col-sm-2 col-form-label">{{ $t('httprequestsettings.authorization') }}</label>
-            <div class="col-sm-10">
+            <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) }}
@@ -24,32 +25,39 @@
                 v-if="cfg.auth_type != 0"
                 :label="$t('httprequestsettings.username')"
                 v-model="cfg.username"
-                type="text" maxlength="64"/>
+                type="text"
+                maxlength="64"
+                wide />
 
         <InputElement
                 v-if="cfg.auth_type != 0"
                 :label="$t('httprequestsettings.password')"
                 v-model="cfg.password"
-                type="password" maxlength="64"/>
+                type="password"
+                maxlength="64"
+                wide />
 
         <InputElement
                 :label="$t('httprequestsettings.headerKey')"
                 v-model="cfg.header_key"
                 type="text"
                 maxlength="64"
-                :tooltip="$t('httprequestsettings.headerKeyDescription')" />
+                :tooltip="$t('httprequestsettings.headerKeyDescription')"
+                wide />
 
         <InputElement
                 :label="$t('httprequestsettings.headerValue')"
                 v-model="cfg.header_value"
                 type="text"
-                maxlength="256" />
+                maxlength="256"
+                wide />
 
         <InputElement
                 :label="$t('httprequestsettings.timeout')"
                 v-model="cfg.timeout"
                 type="number"
-                :postfix="$t('httprequestsettings.milliSeconds')" />
+                :postfix="$t('httprequestsettings.milliSeconds')"
+                wide />
     </div>
 </template>
 
diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
index 2d668aa0..72a53e75 100644
--- a/webapp/src/locales/de.json
+++ b/webapp/src/locales/de.json
@@ -564,18 +564,18 @@
         "typeSML": "SML/OBIS via serieller Verbindung (z.B. Hichi TTL)",
         "typeSMAHM2": "SMA Homemanager 2.0",
         "typeHTTP_SML": "HTTP(S) + SML (z.B. Tibber Pulse via Tibber Bridge)",
-        "MqttValue": "Konfiguration für Wert {valueNumber}",
+        "MqttValue": "Konfiguration Wert {valueNumber}",
         "MqttTopic": "MQTT Topic",
         "SDM": "SDM-Stromzähler Konfiguration",
         "sdmaddress": "Modbus Adresse",
         "HTTP_JSON": "HTTP(S) + JSON - Allgemeine Konfiguration",
-        "httpIndividualRequests": "Individuelle HTTP Anfragen pro Wert",
+        "httpIndividualRequests": "Individuelle HTTP(S) Anfragen pro Wert",
         "urlExamplesHeading": "Beispiele für URLs",
-        "jsonPathExamplesHeading": "Beispiele für JSON Pfade",
+        "jsonPathExamplesHeading": "Beispiele für JSON-Pfade",
         "jsonPathExamplesExplanation": "Die folgenden Pfade finden jeweils den Wert '123.4' im jeweiligen Beispiel-JSON.",
-        "httpValue": "Konfiguration für Wert {valueNumber}",
+        "httpValue": "Konfiguration Wert {valueNumber}",
         "httpEnabled": "Wert aktiviert",
-        "httpJsonPath": "JSON Pfad",
+        "httpJsonPath": "JSON-Pfad",
         "httpJsonPathDescription": "Anwendungsspezifischer JSON-Pfad um den Leistungswert in the HTTP(S) Antwort zu finden, z.B. 'power/total/watts' oder nur 'total'.",
         "httpUnit": "Einheit",
         "httpSignInverted": "Vorzeichen umkehren",
diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index 66328d82..20f0655f 100644
--- a/webapp/src/locales/en.json
+++ b/webapp/src/locales/en.json
@@ -556,7 +556,7 @@
         "PowerMeterConfiguration": "Power Meter Configuration",
         "PowerMeterEnable": "Enable Power Meter",
         "VerboseLogging": "@:base.VerboseLogging",
-        "PowerMeterSource": "Power Meter type",
+        "PowerMeterSource": "Power Meter Type",
         "pollingInterval": "Polling Interval",
         "seconds": "@:base.Seconds",
         "typeMQTT": "MQTT",
@@ -566,18 +566,18 @@
         "typeSML": "SML/OBIS via serial connection (e.g. Hichi TTL)",
         "typeSMAHM2": "SMA Homemanager 2.0",
         "typeHTTP_SML": "HTTP(S) + SML (e.g. Tibber Pulse via Tibber Bridge)",
-        "MqttValue": "Configuration for value {valueNumber}",
-        "MqttTopic": "MQTT topic",
+        "MqttValue": "Value {valueNumber} Configuration",
+        "MqttTopic": "MQTT Topic",
         "SDM": "SDM-Power Meter Parameter",
         "sdmaddress": "Modbus Address",
         "HTTP": "HTTP(S) + JSON - General configuration",
-        "httpIndividualRequests": "Individual HTTP requests per value",
+        "httpIndividualRequests": "Individual HTTP(S) requests per value",
         "urlExamplesHeading": "URL Examples",
         "jsonPathExamplesHeading": "JSON Path Examples",
         "jsonPathExamplesExplanation": "The following paths each find the value '123.4' in the respective example JSON.",
-        "httpValue": "Configuration for value {valueNumber}",
-        "httpEnabled": "Value enabled",
-        "httpJsonPath": "JSON path",
+        "httpValue": "Value {valueNumber} Configuration",
+        "httpEnabled": "Value Enabled",
+        "httpJsonPath": "JSON Path",
         "httpJsonPathDescription": "Application specific JSON path to find the power value in the HTTP(S) response, e.g., 'power/total/watts' or simply 'total'.",
         "httpUnit": "Unit",
         "httpSignInverted": "Change Sign",
diff --git a/webapp/src/views/PowerMeterAdminView.vue b/webapp/src/views/PowerMeterAdminView.vue
index 63535285..a680b64e 100644
--- a/webapp/src/views/PowerMeterAdminView.vue
+++ b/webapp/src/views/PowerMeterAdminView.vue
@@ -7,25 +7,20 @@
         <form @submit="savePowerMeterConfig">
             <CardElement :text="$t('powermeteradmin.PowerMeterConfiguration')"
                     textVariant="text-bg-primary">
-                <div class="row mb-3">
-                    <label class="col-sm-2 form-check-label" for="inputPowerMeterEnable">{{ $t('powermeteradmin.PowerMeterEnable') }}</label>
-                    <div class="col-sm-10">
-                        <div class="form-check form-switch">
-                            <input class="form-check-input" type="checkbox" id="inputPowerMeterEnable"
-                                v-model="powerMeterConfigList.enabled" />
-                        </div>
-                    </div>
-                </div>
+
+                <InputElement :label="$t('powermeteradmin.PowerMeterEnable')"
+                              v-model="powerMeterConfigList.enabled"
+                              type="checkbox" wide />
 
                 <InputElement v-show="powerMeterConfigList.enabled"
                               :label="$t('powermeteradmin.VerboseLogging')"
                               v-model="powerMeterConfigList.verbose_logging"
-                              type="checkbox"/>
+                              type="checkbox" wide />
 
                 <div class="row mb-3" v-show="powerMeterConfigList.enabled">
-                    <label for="inputTimezone" class="col-sm-2 col-form-label">{{ $t('powermeteradmin.PowerMeterSource') }}</label>
-                    <div class="col-sm-10">
-                        <select class="form-select" v-model="powerMeterConfigList.source">
+                    <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>
@@ -44,7 +39,8 @@
                     <InputElement :label="$t('powermeteradmin.MqttTopic')"
                         v-model="mqtt.topic"
                         type="text"
-                        maxlength="256" />
+                        maxlength="256"
+                        wide />
                 </CardElement>
 
                 <CardElement v-if="(powerMeterConfigList.source === 1 || powerMeterConfigList.source === 2)"
@@ -57,17 +53,13 @@
                         type="number"
                         min=1
                         max=15
-                        :postfix="$t('powermeteradmin.seconds')" />
+                        :postfix="$t('powermeteradmin.seconds')"
+                        wide />
 
-                    <div class="row mb-3">
-                        <label for="sdmaddress" class="col-sm-2 col-form-label">{{ $t('powermeteradmin.sdmaddress') }}:</label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <input type="text" class="form-control" id="sdmaddress"
-                                    placeholder="1" v-model="powerMeterConfigList.serial_sdm.address" />
-                            </div>
-                        </div>
-                    </div>
+                    <InputElement :label="$t('powermeteradmin.sdmaddress')"
+                        v-model="powerMeterConfigList.serial_sdm.address"
+                        type="number"
+                        wide />
                 </CardElement>
 
                 <div v-if="powerMeterConfigList.source === 3">
@@ -127,13 +119,14 @@
                                 type="text"
                                 maxlength="256"
                                 placeholder="total_power"
-                                :tooltip="$t('powermeteradmin.httpJsonPathDescription')" />
+                                :tooltip="$t('powermeteradmin.httpJsonPathDescription')"
+                                wide />
 
                             <div class="row mb-3">
-                                <label for="power_unit" class="col-sm-2 col-form-label">
+                                <label for="power_unit" class="col-sm-4 col-form-label">
                                     {{ $t('powermeteradmin.httpUnit') }}
                                 </label>
-                                <div class="col-sm-10">
+                                <div class="col-sm-8">
                                     <select id="power_unit" class="form-select" v-model="httpJson.unit">
                                         <option v-for="u in unitTypeList" :key="u.key" :value="u.key">
                                             {{ u.value }}
@@ -146,7 +139,8 @@
                                 :label="$t('powermeteradmin.httpSignInverted')"
                                 v-model="httpJson.sign_inverted"
                                 :tooltip="$t('powermeteradmin.httpSignInvertedHint')"
-                                type="checkbox" />
+                                type="checkbox"
+                                wide />
                         </div>
                     </CardElement>
 
@@ -177,7 +171,8 @@
                             type="number"
                             min=1
                             max=15
-                            :postfix="$t('powermeteradmin.seconds')" />
+                            :postfix="$t('powermeteradmin.seconds')"
+                            wide />
 
                         <HttpRequestSettings :cfg="powerMeterConfigList.http_sml.http_request" />
                     </CardElement>