Skip to content

Commit

Permalink
webapp: prettify battery settings UI
Browse files Browse the repository at this point in the history 
* use wide labels for all battery settings
* dynamically show and hide valid battery discharge limit settings
  • Loading branch information
@AndreasBoehm @schlimmchen
AndreasBoehm authored and schlimmchen committed Oct 24, 2024
1 parent 2e85b42 commit cfb5c3f
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 57 deletions.
4 changes: 2 additions & 2 deletions webapp/src/locales/de.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -725,9 +725,9 @@
"LimitDischargeCurrent": "Entladestrom limitieren",
"DischargeCurrentLimit": "max. Entladestrom",
"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",
"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",
"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",
Expand Down
4 changes: 2 additions & 2 deletions webapp/src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -728,9 +728,9 @@
"LimitDischargeCurrent": "Limit Discharge Current",
"DischargeCurrentLimit": "max. Discharge Current",
"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",
"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",
"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",
Expand Down
128 changes: 75 additions & 53 deletions webapp/src/views/BatteryAdminView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,22 @@
:label="$t('batteryadmin.EnableBattery')"
v-model="batteryConfigList.enabled"
type="checkbox"
wide
/>

<InputElement
v-show="batteryConfigList.enabled"
: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-2 col-form-label">
<label class="col-sm-4 col-form-label">
{{ $t('batteryadmin.Provider') }}
</label>
<div class="col-sm-10">
<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) }}
Expand All @@ -40,10 +42,10 @@
addSpace
>
<div class="row mb-3">
<label class="col-sm-2 col-form-label">
<label class="col-sm-4 col-form-label">
{{ $t('batteryadmin.JkBmsInterface') }}
</label>
<div class="col-sm-10">
<div class="col-sm-8">
<select class="form-select" v-model="batteryConfigList.jkbms_interface">
<option
v-for="jkBmsInterface in jkBmsInterfaceTypeList"
Expand All @@ -64,6 +66,7 @@
max="90"
step="1"
:postfix="$t('batteryadmin.Seconds')"
wide
/>
</CardElement>

Expand All @@ -74,6 +77,7 @@
v-model="batteryConfigList.mqtt_soc_topic"
type="text"
maxlength="256"
wide
/>

<InputElement
Expand All @@ -82,6 +86,7 @@
type="text"
maxlength="128"
:tooltip="$t('batteryadmin.MqttJsonPathDescription')"
wide
/>
</CardElement>

Expand All @@ -91,6 +96,7 @@
v-model="batteryConfigList.mqtt_voltage_topic"
type="text"
maxlength="256"
wide
/>

<InputElement
Expand All @@ -99,13 +105,14 @@
type="text"
maxlength="128"
:tooltip="$t('batteryadmin.MqttJsonPathDescription')"
wide
/>

<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') }}
</label>
<div class="col-sm-10">
<div class="col-sm-8">
<select
id="mqtt_voltage_unit"
class="form-select"
Expand All @@ -129,6 +136,7 @@
:label="$t('batteryadmin.LimitDischargeCurrent')"
v-model="batteryConfigList.enable_discharge_current_limit"
type="checkbox"
wide
/>

<template v-if="batteryConfigList.enable_discharge_current_limit">
Expand All @@ -139,82 +147,96 @@
min="0"
step="0.1"
postfix="A"
wide
/>

<InputElement
:label="$t('batteryadmin.DischargeCurrentLimitBelowSoc')"
v-show="batteryConfigList.enabled"
v-model="batteryConfigList.discharge_current_limit_below_soc"
type="number"
min="0"
max="100"
step="0.1"
postfix="%"
:tooltip="$t('batteryadmin.DischargeCurrentLimitBelowSocInfo')"
wide
/>

<InputElement
:label="$t('batteryadmin.DischargeCurrentLimitBelowVoltage')"
v-show="batteryConfigList.enabled"
v-model="batteryConfigList.discharge_current_limit_below_voltage"
type="number"
min="0"
max="60"
step="0.01"
postfix="V"
:tooltip="$t('batteryadmin.DischargeCurrentLimitBelowVoltageInfo')"
wide
/>

<InputElement
:label="$t('batteryadmin.UseBatteryReportedDischargeCurrentLimit')"
v-model="batteryConfigList.use_battery_reported_discharge_current_limit"
type="checkbox"
/>
</template>

<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">
<template
v-if="
batteryConfigList.enabled &&
(batteryConfigList.provider == 0 ||
batteryConfigList.provider == 2 ||
batteryConfigList.provider == 4 ||
batteryConfigList.provider == 5)
"
>
<InputElement
:label="$t('batteryadmin.MqttDischargeCurrentTopic')"
v-model="batteryConfigList.mqtt_discharge_current_topic"
type="text"
maxlength="256"
:label="$t('batteryadmin.UseBatteryReportedDischargeCurrentLimit')"
v-model="batteryConfigList.use_battery_reported_discharge_current_limit"
type="checkbox"
wide
/>

<InputElement
:label="$t('batteryadmin.MqttJsonPath')"
v-model="batteryConfigList.mqtt_discharge_current_json_path"
type="text"
maxlength="128"
:tooltip="$t('batteryadmin.MqttJsonPathDescription')"
/>
<template v-if="batteryConfigList.use_battery_reported_discharge_current_limit">
<div
class="alert alert-secondary"
role="alert"
v-show="batteryConfigList.enabled"
v-html="$t('batteryadmin.BatteryReportedDischargeCurrentLimitInfo')"
></div>

<div class="row mb-3">
<label for="mqtt_amperage_unit" class="col-sm-2 col-form-label">
{{ $t('batteryadmin.MqttAmperageUnit') }}
</label>
<template v-if="batteryConfigList.provider == 2">
<InputElement
:label="$t('batteryadmin.MqttDischargeCurrentTopic')"
v-model="batteryConfigList.mqtt_discharge_current_topic"
wide
type="text"
maxlength="256"
/>

<div class="col-sm-10">
<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>
<InputElement
:label="$t('batteryadmin.MqttJsonPath')"
v-model="batteryConfigList.mqtt_discharge_current_json_path"
wide
type="text"
maxlength="128"
:tooltip="$t('batteryadmin.MqttJsonPathDescription')"
/>

<div class="row mb-3">
<label for="mqtt_amperage_unit" class="col-sm-4 col-form-label">
{{ $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>
</CardElement>
Expand Down

0 comments on commit cfb5c3f

Please sign in to comment.