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

powermeter refactor: polish web UI

Browse Source
This commit is contained in:
Bernhard Kirchen 2024-05-23 20:48:19 +02:00
parent a2a9debd02
commit 9520d8d394
4 changed files with 52 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,11 +7,12 @@
maxlength="1024" maxlength="1024"
placeholder="http://admin:supersecret@mypowermeter.home/status" placeholder="http://admin:supersecret@mypowermeter.home/status"
prefix="GET " prefix="GET "
:tooltip="$t('httprequestsettings.urlDescription')" /> :tooltip="$t('httprequestsettings.urlDescription')"
wide />
<div class="row mb-3"> <div class="row mb-3">
<label for="auth_type" class="col-sm-2 col-form-label">{{ $t('httprequestsettings.authorization') }}</label> <label for="auth_type" class="col-sm-4 col-form-label">{{ $t('httprequestsettings.authorization') }}</label>
<div class="col-sm-10"> <div class="col-sm-8">
<select id="auth_type" class="form-select" v-model="cfg.auth_type"> <select id="auth_type" class="form-select" v-model="cfg.auth_type">
<option v-for="a in authTypeList" :key="a.key" :value="a.key"> <option v-for="a in authTypeList" :key="a.key" :value="a.key">
{{ $t('httprequestsettings.authType' + a.value) }} {{ $t('httprequestsettings.authType' + a.value) }}
@ -24,32 +25,39 @@
v-if="cfg.auth_type != 0" v-if="cfg.auth_type != 0"
:label="$t('httprequestsettings.username')" :label="$t('httprequestsettings.username')"
v-model="cfg.username" v-model="cfg.username"
type="text" maxlength="64"/> type="text"
maxlength="64"
wide />
<InputElement <InputElement
v-if="cfg.auth_type != 0" v-if="cfg.auth_type != 0"
:label="$t('httprequestsettings.password')" :label="$t('httprequestsettings.password')"
v-model="cfg.password" v-model="cfg.password"
type="password" maxlength="64"/> type="password"
maxlength="64"
wide />
<InputElement <InputElement
:label="$t('httprequestsettings.headerKey')" :label="$t('httprequestsettings.headerKey')"
v-model="cfg.header_key" v-model="cfg.header_key"
type="text" type="text"
maxlength="64" maxlength="64"
:tooltip="$t('httprequestsettings.headerKeyDescription')" /> :tooltip="$t('httprequestsettings.headerKeyDescription')"
wide />
<InputElement <InputElement
:label="$t('httprequestsettings.headerValue')" :label="$t('httprequestsettings.headerValue')"
v-model="cfg.header_value" v-model="cfg.header_value"
type="text" type="text"
maxlength="256" /> maxlength="256"
wide />
<InputElement <InputElement
:label="$t('httprequestsettings.timeout')" :label="$t('httprequestsettings.timeout')"
v-model="cfg.timeout" v-model="cfg.timeout"
type="number" type="number"
:postfix="$t('httprequestsettings.milliSeconds')" /> :postfix="$t('httprequestsettings.milliSeconds')"
wide />
</div> </div>
</template> </template>

10
webapp/src/locales/de.json
View File

@ -564,18 +564,18 @@
"typeSML": "SML/OBIS via serieller Verbindung (z.B. Hichi TTL)", "typeSML": "SML/OBIS via serieller Verbindung (z.B. Hichi TTL)",
"typeSMAHM2": "SMA Homemanager 2.0", "typeSMAHM2": "SMA Homemanager 2.0",
"typeHTTP_SML": "HTTP(S) + SML (z.B. Tibber Pulse via Tibber Bridge)", "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", "MqttTopic": "MQTT Topic",
"SDM": "SDM-Stromzähler Konfiguration", "SDM": "SDM-Stromzähler Konfiguration",
"sdmaddress": "Modbus Adresse", "sdmaddress": "Modbus Adresse",
"HTTP_JSON": "HTTP(S) + JSON - Allgemeine Konfiguration", "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", "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.", "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", "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'.", "httpJsonPathDescription": "Anwendungsspezifischer JSON-Pfad um den Leistungswert in the HTTP(S) Antwort zu finden, z.B. 'power/total/watts' oder nur 'total'.",
"httpUnit": "Einheit", "httpUnit": "Einheit",
"httpSignInverted": "Vorzeichen umkehren", "httpSignInverted": "Vorzeichen umkehren",

14
webapp/src/locales/en.json
View File

@ -556,7 +556,7 @@
"PowerMeterConfiguration": "Power Meter Configuration", "PowerMeterConfiguration": "Power Meter Configuration",
"PowerMeterEnable": "Enable Power Meter", "PowerMeterEnable": "Enable Power Meter",
"VerboseLogging": "@:base.VerboseLogging", "VerboseLogging": "@:base.VerboseLogging",
"PowerMeterSource": "Power Meter type", "PowerMeterSource": "Power Meter Type",
"pollingInterval": "Polling Interval", "pollingInterval": "Polling Interval",
"seconds": "@:base.Seconds", "seconds": "@:base.Seconds",
"typeMQTT": "MQTT", "typeMQTT": "MQTT",
@ -566,18 +566,18 @@
"typeSML": "SML/OBIS via serial connection (e.g. Hichi TTL)", "typeSML": "SML/OBIS via serial connection (e.g. Hichi TTL)",
"typeSMAHM2": "SMA Homemanager 2.0", "typeSMAHM2": "SMA Homemanager 2.0",
"typeHTTP_SML": "HTTP(S) + SML (e.g. Tibber Pulse via Tibber Bridge)", "typeHTTP_SML": "HTTP(S) + SML (e.g. Tibber Pulse via Tibber Bridge)",
"MqttValue": "Configuration for value {valueNumber}", "MqttValue": "Value {valueNumber} Configuration",
"MqttTopic": "MQTT topic", "MqttTopic": "MQTT Topic",
"SDM": "SDM-Power Meter Parameter", "SDM": "SDM-Power Meter Parameter",
"sdmaddress": "Modbus Address", "sdmaddress": "Modbus Address",
"HTTP": "HTTP(S) + JSON - General configuration", "HTTP": "HTTP(S) + JSON - General configuration",
"httpIndividualRequests": "Individual HTTP requests per value", "httpIndividualRequests": "Individual HTTP(S) requests per value",
"urlExamplesHeading": "URL Examples", "urlExamplesHeading": "URL Examples",
"jsonPathExamplesHeading": "JSON Path Examples", "jsonPathExamplesHeading": "JSON Path Examples",
"jsonPathExamplesExplanation": "The following paths each find the value '123.4' in the respective example JSON.", "jsonPathExamplesExplanation": "The following paths each find the value '123.4' in the respective example JSON.",
"httpValue": "Configuration for value {valueNumber}", "httpValue": "Value {valueNumber} Configuration",
"httpEnabled": "Value enabled", "httpEnabled": "Value Enabled",
"httpJsonPath": "JSON path", "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'.", "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", "httpUnit": "Unit",
"httpSignInverted": "Change Sign", "httpSignInverted": "Change Sign",

53
webapp/src/views/PowerMeterAdminView.vue
View File

@ -7,25 +7,20 @@
<form @submit="savePowerMeterConfig"> <form @submit="savePowerMeterConfig">
<CardElement :text="$t('powermeteradmin.PowerMeterConfiguration')" <CardElement :text="$t('powermeteradmin.PowerMeterConfiguration')"
textVariant="text-bg-primary"> textVariant="text-bg-primary">
<div class="row mb-3">
<label class="col-sm-2 form-check-label" for="inputPowerMeterEnable">{{ $t('powermeteradmin.PowerMeterEnable') }}</label> <InputElement :label="$t('powermeteradmin.PowerMeterEnable')"
<div class="col-sm-10"> v-model="powerMeterConfigList.enabled"
<div class="form-check form-switch"> type="checkbox" wide />
<input class="form-check-input" type="checkbox" id="inputPowerMeterEnable"
v-model="powerMeterConfigList.enabled" />
</div>
</div>
</div>
<InputElement v-show="powerMeterConfigList.enabled" <InputElement v-show="powerMeterConfigList.enabled"
:label="$t('powermeteradmin.VerboseLogging')" :label="$t('powermeteradmin.VerboseLogging')"
v-model="powerMeterConfigList.verbose_logging" v-model="powerMeterConfigList.verbose_logging"
type="checkbox"/> type="checkbox" wide />
<div class="row mb-3" v-show="powerMeterConfigList.enabled"> <div class="row mb-3" v-show="powerMeterConfigList.enabled">
<label for="inputTimezone" class="col-sm-2 col-form-label">{{ $t('powermeteradmin.PowerMeterSource') }}</label> <label for="inputPowerMeterSource" class="col-sm-4 col-form-label">{{ $t('powermeteradmin.PowerMeterSource') }}</label>
<div class="col-sm-10"> <div class="col-sm-8">
<select class="form-select" v-model="powerMeterConfigList.source"> <select id="inputPowerMeterSource" class="form-select" v-model="powerMeterConfigList.source">
<option v-for="source in powerMeterSourceList" :key="source.key" :value="source.key"> <option v-for="source in powerMeterSourceList" :key="source.key" :value="source.key">
{{ source.value }} {{ source.value }}
</option> </option>
@ -44,7 +39,8 @@
<InputElement :label="$t('powermeteradmin.MqttTopic')" <InputElement :label="$t('powermeteradmin.MqttTopic')"
v-model="mqtt.topic" v-model="mqtt.topic"
type="text" type="text"
maxlength="256" /> maxlength="256"
wide />
</CardElement> </CardElement>
<CardElement v-if="(powerMeterConfigList.source === 1 || powerMeterConfigList.source === 2)" <CardElement v-if="(powerMeterConfigList.source === 1 || powerMeterConfigList.source === 2)"
@ -57,17 +53,13 @@
type="number" type="number"
min=1 min=1
max=15 max=15
:postfix="$t('powermeteradmin.seconds')" /> :postfix="$t('powermeteradmin.seconds')"
wide />
<div class="row mb-3"> <InputElement :label="$t('powermeteradmin.sdmaddress')"
<label for="sdmaddress" class="col-sm-2 col-form-label">{{ $t('powermeteradmin.sdmaddress') }}:</label> v-model="powerMeterConfigList.serial_sdm.address"
<div class="col-sm-10"> type="number"
<div class="input-group"> wide />
<input type="text" class="form-control" id="sdmaddress"
placeholder="1" v-model="powerMeterConfigList.serial_sdm.address" />
</div>
</div>
</div>
</CardElement> </CardElement>
<div v-if="powerMeterConfigList.source === 3"> <div v-if="powerMeterConfigList.source === 3">
@ -127,13 +119,14 @@
type="text" type="text"
maxlength="256" maxlength="256"
placeholder="total_power" placeholder="total_power"
:tooltip="$t('powermeteradmin.httpJsonPathDescription')" /> :tooltip="$t('powermeteradmin.httpJsonPathDescription')"
wide />
<div class="row mb-3"> <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') }} {{ $t('powermeteradmin.httpUnit') }}
</label> </label>
<div class="col-sm-10"> <div class="col-sm-8">
<select id="power_unit" class="form-select" v-model="httpJson.unit"> <select id="power_unit" class="form-select" v-model="httpJson.unit">
<option v-for="u in unitTypeList" :key="u.key" :value="u.key"> <option v-for="u in unitTypeList" :key="u.key" :value="u.key">
{{ u.value }} {{ u.value }}
@ -146,7 +139,8 @@
:label="$t('powermeteradmin.httpSignInverted')" :label="$t('powermeteradmin.httpSignInverted')"
v-model="httpJson.sign_inverted" v-model="httpJson.sign_inverted"
:tooltip="$t('powermeteradmin.httpSignInvertedHint')" :tooltip="$t('powermeteradmin.httpSignInvertedHint')"
type="checkbox" /> type="checkbox"
wide />
</div> </div>
</CardElement> </CardElement>
@ -177,7 +171,8 @@
type="number" type="number"
min=1 min=1
max=15 max=15
:postfix="$t('powermeteradmin.seconds')" /> :postfix="$t('powermeteradmin.seconds')"
wide />
<HttpRequestSettings :cfg="powerMeterConfigList.http_sml.http_request" /> <HttpRequestSettings :cfg="powerMeterConfigList.http_sml.http_request" />
</CardElement> </CardElement>