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

webapp: prettify battery settings UI

Browse Source 
* use wide labels for all battery settings
* dynamically show and hide valid battery discharge limit settings
This commit is contained in:
Andreas Böhm 2024-10-23 21:00:52 +02:00 committed by Bernhard Kirchen
parent 2e85b420d5
commit cfb5c3f550
3 changed files with 79 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -725,9 +725,9 @@
"LimitDischargeCurrent": "Entladestrom limitieren", "LimitDischargeCurrent": "Entladestrom limitieren",
"DischargeCurrentLimit": "max. Entladestrom", "DischargeCurrentLimit": "max. Entladestrom",
"DischargeCurrentLimitBelowSoc": "Limitieren unter SoC", "DischargeCurrentLimitBelowSoc": "Limitieren unter SoC",
"DischargeCurrentLimitBelowSocInfo": "Das Entladestromlimit wird nur unter dieser SoC-Schwelle angewendet (nicht verwendet falls 'Batterie SoC ignorieren' aktiviert ist).", "DischargeCurrentLimitBelowSocInfo": "Das Entladestromlimit wird nur unter dieser SoC-Schwelle angewendet (wird nicht verwendet, falls 'Batterie SoC ignorieren' in den DPL-Einstellungen aktiviert ist).",
"DischargeCurrentLimitBelowVoltage": "Limitieren unter Spannung", "DischargeCurrentLimitBelowVoltage": "Limitieren unter Spannung",
"DischargeCurrentLimitBelowVoltageInfo": "Das Entladestromlimit wird nur unter dieser Spannungs-Schwelle angewendet (wenn SoC ignoriert oder nicht verfügbar).", "DischargeCurrentLimitBelowVoltageInfo": "Das Entladestromlimit wird nur unter dieser Spannungs-Schwelle angewendet (wenn 'Batterie SoC ignorieren' in den DPL-Einstellungen aktiviert ist oder SoC nicht verfügbar ist).",
"UseBatteryReportedDischargeCurrentLimit": "Von der Batterie übermitteltes Limit verwenden", "UseBatteryReportedDischargeCurrentLimit": "Von der Batterie übermitteltes Limit verwenden",
"BatteryReportedDischargeCurrentLimitInfo": "<b>Hinweis:</b> Das niedrigste Limit wird angewendet, wobei das von der Batterie übermittelte Entladestromlimit nur verwendet wird, wenn in der letzten Minute ein Update eingegangen ist; andernfalls dient das zuvor festgelegte Limit als Fallback.", "BatteryReportedDischargeCurrentLimitInfo": "<b>Hinweis:</b> Das niedrigste Limit wird angewendet, wobei das von der Batterie übermittelte Entladestromlimit nur verwendet wird, wenn in der letzten Minute ein Update eingegangen ist; andernfalls dient das zuvor festgelegte Limit als Fallback.",
"MqttDischargeCurrentTopic": "Topic für Entladestromlimit", "MqttDischargeCurrentTopic": "Topic für Entladestromlimit",

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

@ -728,9 +728,9 @@
"LimitDischargeCurrent": "Limit Discharge Current", "LimitDischargeCurrent": "Limit Discharge Current",
"DischargeCurrentLimit": "max. Discharge Current", "DischargeCurrentLimit": "max. Discharge Current",
"DischargeCurrentLimitBelowSoc": "Apply limit below SoC", "DischargeCurrentLimitBelowSoc": "Apply limit below SoC",
"DischargeCurrentLimitBelowSocInfo": "The discharge current limit is not applied above this SoC (not used if 'Ignore Battery SoC' is enabled).", "DischargeCurrentLimitBelowSocInfo": "The discharge current limit is only applied below this SoC (not used if 'Ignore Battery SoC' is enabled in the DPL settings).",
"DischargeCurrentLimitBelowVoltage": "Apply limit below voltage", "DischargeCurrentLimitBelowVoltage": "Apply limit below voltage",
"DischargeCurrentLimitBelowVoltageInfo": "The discharge current limit is not applied above this voltage (used if SoC ignored or unavailable).", "DischargeCurrentLimitBelowVoltageInfo": "The discharge current limit is only applied below this voltage (used if 'Ignore Battery SoC' is enabled in the DPL settings or when SoC is unavailable).",
"UseBatteryReportedDischargeCurrentLimit": "Use Battery-Reported limit", "UseBatteryReportedDischargeCurrentLimit": "Use Battery-Reported limit",
"BatteryReportedDischargeCurrentLimitInfo": "<b>Hint:</b> The lowest limit will be applied, with the battery-reported discharge current limit used only if an update was received in the last minute; otherwise, the previously specified limit will act as a fallback.", "BatteryReportedDischargeCurrentLimitInfo": "<b>Hint:</b> The lowest limit will be applied, with the battery-reported discharge current limit used only if an update was received in the last minute; otherwise, the previously specified limit will act as a fallback.",
"MqttDischargeCurrentTopic": "Discharge Current Limit Value Topic", "MqttDischargeCurrentTopic": "Discharge Current Limit Value Topic",

128
webapp/src/views/BatteryAdminView.vue
View File

@ -10,6 +10,7 @@
:label="$t('batteryadmin.EnableBattery')" :label="$t('batteryadmin.EnableBattery')"
v-model="batteryConfigList.enabled" v-model="batteryConfigList.enabled"
type="checkbox" type="checkbox"
wide
/> />
<InputElement <InputElement
@ -17,13 +18,14 @@
:label="$t('batteryadmin.VerboseLogging')" :label="$t('batteryadmin.VerboseLogging')"
v-model="batteryConfigList.verbose_logging" v-model="batteryConfigList.verbose_logging"
type="checkbox" type="checkbox"
wide
/> />
<div class="row mb-3" v-show="batteryConfigList.enabled"> <div class="row mb-3" v-show="batteryConfigList.enabled">
<label class="col-sm-2 col-form-label"> <label class="col-sm-4 col-form-label">
{{ $t('batteryadmin.Provider') }} {{ $t('batteryadmin.Provider') }}
</label> </label>
<div class="col-sm-10"> <div class="col-sm-8">
<select class="form-select" v-model="batteryConfigList.provider"> <select class="form-select" v-model="batteryConfigList.provider">
<option v-for="provider in providerTypeList" :key="provider.key" :value="provider.key"> <option v-for="provider in providerTypeList" :key="provider.key" :value="provider.key">
{{ $t(`batteryadmin.Provider` + provider.value) }} {{ $t(`batteryadmin.Provider` + provider.value) }}
@ -40,10 +42,10 @@
addSpace addSpace
> >
<div class="row mb-3"> <div class="row mb-3">
<label class="col-sm-2 col-form-label"> <label class="col-sm-4 col-form-label">
{{ $t('batteryadmin.JkBmsInterface') }} {{ $t('batteryadmin.JkBmsInterface') }}
</label> </label>
<div class="col-sm-10"> <div class="col-sm-8">
<select class="form-select" v-model="batteryConfigList.jkbms_interface"> <select class="form-select" v-model="batteryConfigList.jkbms_interface">
<option <option
v-for="jkBmsInterface in jkBmsInterfaceTypeList" v-for="jkBmsInterface in jkBmsInterfaceTypeList"
@ -64,6 +66,7 @@
max="90" max="90"
step="1" step="1"
:postfix="$t('batteryadmin.Seconds')" :postfix="$t('batteryadmin.Seconds')"
wide
/> />
</CardElement> </CardElement>
@ -74,6 +77,7 @@
v-model="batteryConfigList.mqtt_soc_topic" v-model="batteryConfigList.mqtt_soc_topic"
type="text" type="text"
maxlength="256" maxlength="256"
wide
/> />
<InputElement <InputElement
@ -82,6 +86,7 @@
type="text" type="text"
maxlength="128" maxlength="128"
:tooltip="$t('batteryadmin.MqttJsonPathDescription')" :tooltip="$t('batteryadmin.MqttJsonPathDescription')"
wide
/> />
</CardElement> </CardElement>
@ -91,6 +96,7 @@
v-model="batteryConfigList.mqtt_voltage_topic" v-model="batteryConfigList.mqtt_voltage_topic"
type="text" type="text"
maxlength="256" maxlength="256"
wide
/> />
<InputElement <InputElement
@ -99,13 +105,14 @@
type="text" type="text"
maxlength="128" maxlength="128"
:tooltip="$t('batteryadmin.MqttJsonPathDescription')" :tooltip="$t('batteryadmin.MqttJsonPathDescription')"
wide
/> />
<div class="row mb-3"> <div class="row mb-3">
<label for="mqtt_voltage_unit" class="col-sm-2 col-form-label"> <label for="mqtt_voltage_unit" class="col-sm-4 col-form-label">
{{ $t('batteryadmin.MqttVoltageUnit') }} {{ $t('batteryadmin.MqttVoltageUnit') }}
</label> </label>
<div class="col-sm-10"> <div class="col-sm-8">
<select <select
id="mqtt_voltage_unit" id="mqtt_voltage_unit"
class="form-select" class="form-select"
@ -129,6 +136,7 @@
:label="$t('batteryadmin.LimitDischargeCurrent')" :label="$t('batteryadmin.LimitDischargeCurrent')"
v-model="batteryConfigList.enable_discharge_current_limit" v-model="batteryConfigList.enable_discharge_current_limit"
type="checkbox" type="checkbox"
wide
/> />
<template v-if="batteryConfigList.enable_discharge_current_limit"> <template v-if="batteryConfigList.enable_discharge_current_limit">
@ -139,10 +147,12 @@
min="0" min="0"
step="0.1" step="0.1"
postfix="A" postfix="A"
wide
/> />
<InputElement <InputElement
:label="$t('batteryadmin.DischargeCurrentLimitBelowSoc')" :label="$t('batteryadmin.DischargeCurrentLimitBelowSoc')"
v-show="batteryConfigList.enabled"
v-model="batteryConfigList.discharge_current_limit_below_soc" v-model="batteryConfigList.discharge_current_limit_below_soc"
type="number" type="number"
min="0" min="0"
@ -150,10 +160,12 @@
step="0.1" step="0.1"
postfix="%" postfix="%"
:tooltip="$t('batteryadmin.DischargeCurrentLimitBelowSocInfo')" :tooltip="$t('batteryadmin.DischargeCurrentLimitBelowSocInfo')"
wide
/> />
<InputElement <InputElement
:label="$t('batteryadmin.DischargeCurrentLimitBelowVoltage')" :label="$t('batteryadmin.DischargeCurrentLimitBelowVoltage')"
v-show="batteryConfigList.enabled"
v-model="batteryConfigList.discharge_current_limit_below_voltage" v-model="batteryConfigList.discharge_current_limit_below_voltage"
type="number" type="number"
min="0" min="0"
@ -161,60 +173,70 @@
step="0.01" step="0.01"
postfix="V" postfix="V"
:tooltip="$t('batteryadmin.DischargeCurrentLimitBelowVoltageInfo')" :tooltip="$t('batteryadmin.DischargeCurrentLimitBelowVoltageInfo')"
wide
/> />
<InputElement <template
:label="$t('batteryadmin.UseBatteryReportedDischargeCurrentLimit')" v-if="
v-model="batteryConfigList.use_battery_reported_discharge_current_limit" batteryConfigList.enabled &&
type="checkbox" (batteryConfigList.provider == 0 ||
/> batteryConfigList.provider == 2 ||
</template> batteryConfigList.provider == 4 ||
batteryConfigList.provider == 5)
<template "
v-if=" >
batteryConfigList.enable_discharge_current_limit &&
batteryConfigList.use_battery_reported_discharge_current_limit
"
>
<div
class="alert alert-secondary"
role="alert"
v-html="$t('batteryadmin.BatteryReportedDischargeCurrentLimitInfo')"
></div>
<template v-if="batteryConfigList.provider == 2">
<InputElement <InputElement
:label="$t('batteryadmin.MqttDischargeCurrentTopic')" :label="$t('batteryadmin.UseBatteryReportedDischargeCurrentLimit')"
v-model="batteryConfigList.mqtt_discharge_current_topic" v-model="batteryConfigList.use_battery_reported_discharge_current_limit"
type="text" type="checkbox"
maxlength="256" wide
/> />
<InputElement <template v-if="batteryConfigList.use_battery_reported_discharge_current_limit">
:label="$t('batteryadmin.MqttJsonPath')" <div
v-model="batteryConfigList.mqtt_discharge_current_json_path" class="alert alert-secondary"
type="text" role="alert"
maxlength="128" v-show="batteryConfigList.enabled"
:tooltip="$t('batteryadmin.MqttJsonPathDescription')" v-html="$t('batteryadmin.BatteryReportedDischargeCurrentLimitInfo')"
/> ></div>
<div class="row mb-3"> <template v-if="batteryConfigList.provider == 2">
<label for="mqtt_amperage_unit" class="col-sm-2 col-form-label"> <InputElement
{{ $t('batteryadmin.MqttAmperageUnit') }} :label="$t('batteryadmin.MqttDischargeCurrentTopic')"
</label> v-model="batteryConfigList.mqtt_discharge_current_topic"
wide
type="text"
maxlength="256"
/>
<div class="col-sm-10"> <InputElement
<select :label="$t('batteryadmin.MqttJsonPath')"
id="mqtt_amperage_unit" v-model="batteryConfigList.mqtt_discharge_current_json_path"
class="form-select" wide
v-model="batteryConfigList.mqtt_amperage_unit" type="text"
> maxlength="128"
<option v-for="u in amperageUnitTypeList" :key="u.key" :value="u.key"> :tooltip="$t('batteryadmin.MqttJsonPathDescription')"
{{ u.value }} />
</option>
</select> <div class="row mb-3">
</div> <label for="mqtt_amperage_unit" class="col-sm-4 col-form-label">
</div> {{ $t('batteryadmin.MqttAmperageUnit') }}
</label>
<div class="col-sm-8">
<select
id="mqtt_amperage_unit"
class="form-select"
v-model="batteryConfigList.mqtt_amperage_unit"
>
<option v-for="u in amperageUnitTypeList" :key="u.key" :value="u.key">
{{ u.value }}
</option>
</select>
</div>
</div>
</template>
</template>
</template> </template>
</template> </template>
</CardElement> </CardElement>