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

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

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

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

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

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

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