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

webapp: avoid spurious DOM elements, avoid v-show, use v-if

Browse Source 
avoid hidden (but existing) or simply redundant DOM elements from
messing with the style sheet, which uses :last-child in particular to
fix up the margin on the bottom of cards.
This commit is contained in:
Bernhard Kirchen 2024-10-27 18:07:22 +01:00 committed by Bernhard Kirchen
parent 8c46521d6e
commit dc78a83b84
4 changed files with 163 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,4 @@
<template> <template>
<div>
<InputElement <InputElement
:label="$t('httprequestsettings.url')" :label="$t('httprequestsettings.url')"
v-model="cfg.url" v-model="cfg.url"
@ -64,7 +63,6 @@
:postfix="$t('httprequestsettings.milliSeconds')" :postfix="$t('httprequestsettings.milliSeconds')"
wide wide
/> />
</div>
</template> </template>
<script lang="ts"> <script lang="ts">

13
webapp/src/views/AcChargerAdminView.vue
View File

@ -13,7 +13,8 @@
wide wide
/> />
<div class="row mb-3" v-show="acChargerConfigList.enabled"> <template v-if="acChargerConfigList.enabled">
<div class="row mb-3">
<label class="col-sm-4 col-form-label"> <label class="col-sm-4 col-form-label">
{{ $t('acchargeradmin.CanControllerFrequency') }} {{ $t('acchargeradmin.CanControllerFrequency') }}
</label> </label>
@ -31,7 +32,6 @@
</div> </div>
<InputElement <InputElement
v-show="acChargerConfigList.enabled"
:label="$t('acchargeradmin.VerboseLogging')" :label="$t('acchargeradmin.VerboseLogging')"
v-model="acChargerConfigList.verbose_logging" v-model="acChargerConfigList.verbose_logging"
type="checkbox" type="checkbox"
@ -39,7 +39,6 @@
/> />
<InputElement <InputElement
v-show="acChargerConfigList.enabled"
:label="$t('acchargeradmin.EnableAutoPower')" :label="$t('acchargeradmin.EnableAutoPower')"
v-model="acChargerConfigList.auto_power_enabled" v-model="acChargerConfigList.auto_power_enabled"
type="checkbox" type="checkbox"
@ -47,7 +46,7 @@
/> />
<InputElement <InputElement
v-show="acChargerConfigList.enabled && acChargerConfigList.auto_power_enabled" v-if="acChargerConfigList.auto_power_enabled"
:label="$t('acchargeradmin.EnableBatterySoCLimits')" :label="$t('acchargeradmin.EnableBatterySoCLimits')"
v-model="acChargerConfigList.auto_power_batterysoc_limits_enabled" v-model="acChargerConfigList.auto_power_batterysoc_limits_enabled"
type="checkbox" type="checkbox"
@ -55,18 +54,18 @@
/> />
<InputElement <InputElement
v-show="acChargerConfigList.enabled"
:label="$t('acchargeradmin.EnableEmergencyCharge')" :label="$t('acchargeradmin.EnableEmergencyCharge')"
v-model="acChargerConfigList.emergency_charge_enabled" v-model="acChargerConfigList.emergency_charge_enabled"
type="checkbox" type="checkbox"
wide wide
/> />
</template>
<CardElement <CardElement
:text="$t('acchargeradmin.Limits')" :text="$t('acchargeradmin.Limits')"
textVariant="text-bg-primary" textVariant="text-bg-primary"
add-space add-space
v-show="acChargerConfigList.auto_power_enabled || acChargerConfigList.emergency_charge_enabled" v-if="acChargerConfigList.auto_power_enabled || acChargerConfigList.emergency_charge_enabled"
> >
<div class="row mb-3"> <div class="row mb-3">
<label for="voltageLimit" class="col-sm-2 col-form-label" <label for="voltageLimit" class="col-sm-2 col-form-label"
@ -174,7 +173,7 @@
:text="$t('acchargeradmin.BatterySoCLimits')" :text="$t('acchargeradmin.BatterySoCLimits')"
textVariant="text-bg-primary" textVariant="text-bg-primary"
add-space add-space
v-show=" v-if="
acChargerConfigList.auto_power_enabled && acChargerConfigList.auto_power_enabled &&
acChargerConfigList.auto_power_batterysoc_limits_enabled acChargerConfigList.auto_power_batterysoc_limits_enabled
" "

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

@ -13,15 +13,15 @@
wide wide
/> />
<template v-if="batteryConfigList.enabled">
<InputElement <InputElement
v-show="batteryConfigList.enabled"
:label="$t('batteryadmin.VerboseLogging')" :label="$t('batteryadmin.VerboseLogging')"
v-model="batteryConfigList.verbose_logging" v-model="batteryConfigList.verbose_logging"
type="checkbox" type="checkbox"
wide wide
/> />
<div class="row mb-3" v-show="batteryConfigList.enabled"> <div class="row mb-3">
<label class="col-sm-4 col-form-label"> <label class="col-sm-4 col-form-label">
{{ $t('batteryadmin.Provider') }} {{ $t('batteryadmin.Provider') }}
</label> </label>
@ -33,10 +33,11 @@
</select> </select>
</div> </div>
</div> </div>
</template>
</CardElement> </CardElement>
<CardElement <CardElement
v-show="batteryConfigList.enabled && batteryConfigList.provider == 1" v-if="batteryConfigList.enabled && batteryConfigList.provider == 1"
:text="$t('batteryadmin.JkBmsConfiguration')" :text="$t('batteryadmin.JkBmsConfiguration')"
textVariant="text-bg-primary" textVariant="text-bg-primary"
addSpace addSpace
@ -152,7 +153,7 @@
<InputElement <InputElement
:label="$t('batteryadmin.DischargeCurrentLimitBelowSoc')" :label="$t('batteryadmin.DischargeCurrentLimitBelowSoc')"
v-show="batteryConfigList.enabled" v-if="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"
@ -165,7 +166,7 @@
<InputElement <InputElement
:label="$t('batteryadmin.DischargeCurrentLimitBelowVoltage')" :label="$t('batteryadmin.DischargeCurrentLimitBelowVoltage')"
v-show="batteryConfigList.enabled" v-if="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"
@ -196,7 +197,7 @@
<div <div
class="alert alert-secondary" class="alert alert-secondary"
role="alert" role="alert"
v-show="batteryConfigList.enabled" v-if="batteryConfigList.enabled"
v-html="$t('batteryadmin.BatteryReportedDischargeCurrentLimitInfo')" v-html="$t('batteryadmin.BatteryReportedDischargeCurrentLimitInfo')"
></div> ></div>

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

@ -13,30 +13,35 @@
wide wide
/> />
<template v-if="powerMeterConfigList.enabled">
<InputElement <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 wide
/> />
<div class="row mb-3" v-show="powerMeterConfigList.enabled"> <div class="row mb-3">
<label for="inputPowerMeterSource" class="col-sm-4 col-form-label">{{ <label for="inputPowerMeterSource" class="col-sm-4 col-form-label">{{
$t('powermeteradmin.PowerMeterSource') $t('powermeteradmin.PowerMeterSource')
}}</label> }}</label>
<div class="col-sm-8"> <div class="col-sm-8">
<select id="inputPowerMeterSource" 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>
</select> </select>
</div> </div>
</div> </div>
</template>
</CardElement> </CardElement>
<div v-if="powerMeterConfigList.enabled"> <template v-if="powerMeterConfigList.enabled">
<div v-if="powerMeterConfigList.source === 0 || powerMeterConfigList.source === 3"> <template v-if="powerMeterConfigList.source === 0 || powerMeterConfigList.source === 3">
<div class="alert alert-secondary mt-5" role="alert"> <div class="alert alert-secondary mt-5" role="alert">
<h2>{{ $t('powermeteradmin.jsonPathExamplesHeading') }}:</h2> <h2>{{ $t('powermeteradmin.jsonPathExamplesHeading') }}:</h2>
{{ $t('powermeteradmin.jsonPathExamplesExplanation') }} {{ $t('powermeteradmin.jsonPathExamplesExplanation') }}
@ -58,10 +63,10 @@
<li><code>total</code> &mdash; <code>{ "othervalue": 66, "total": 123.4 }</code></li> <li><code>total</code> &mdash; <code>{ "othervalue": 66, "total": 123.4 }</code></li>
</ul> </ul>
</div> </div>
</div> </template>
<!-- yarn linter wants us to not combine v-if with v-for, so we need to wrap the CardElements //--> <!-- yarn linter wants us to not combine v-if with v-for, so we need to wrap the CardElements //-->
<div v-if="powerMeterConfigList.source === 0"> <template v-if="powerMeterConfigList.source === 0">
<CardElement <CardElement
v-for="(mqtt, index) in powerMeterConfigList.mqtt.values" v-for="(mqtt, index) in powerMeterConfigList.mqtt.values"
v-bind:key="index" v-bind:key="index"
@ -107,7 +112,7 @@
wide wide
/> />
</CardElement> </CardElement>
</div> </template>
<CardElement <CardElement
v-if="powerMeterConfigList.source === 1 || powerMeterConfigList.source === 2" v-if="powerMeterConfigList.source === 1 || powerMeterConfigList.source === 2"
@ -133,7 +138,7 @@
/> />
</CardElement> </CardElement>
<div v-if="powerMeterConfigList.source === 3"> <template v-if="powerMeterConfigList.source === 3">
<div class="alert alert-secondary mt-5" role="alert"> <div class="alert alert-secondary mt-5" role="alert">
<h2>{{ $t('powermeteradmin.urlExamplesHeading') }}:</h2> <h2>{{ $t('powermeteradmin.urlExamplesHeading') }}:</h2>
<ul> <ul>
@ -178,7 +183,7 @@
wide wide
/> />
<div v-if="httpJson.enabled || index == 0"> <template v-if="httpJson.enabled || index == 0">
<HttpRequestSettings <HttpRequestSettings
v-model="httpJson.http_request" v-model="httpJson.http_request"
v-if="index == 0 || powerMeterConfigList.http_json.individual_requests" v-if="index == 0 || powerMeterConfigList.http_json.individual_requests"
@ -213,7 +218,7 @@
type="checkbox" type="checkbox"
wide wide
/> />
</div> </template>
</CardElement> </CardElement>
<CardElement <CardElement
@ -235,9 +240,9 @@
{{ testHttpJsonRequestAlert.message }} {{ testHttpJsonRequestAlert.message }}
</BootstrapAlert> </BootstrapAlert>
</CardElement> </CardElement>
</div> </template>
<div v-if="powerMeterConfigList.source === 6"> <template v-if="powerMeterConfigList.source === 6">
<CardElement :text="$t('powermeteradmin.HTTP_SML')" textVariant="text-bg-primary" add-space> <CardElement :text="$t('powermeteradmin.HTTP_SML')" textVariant="text-bg-primary" add-space>
<InputElement <InputElement
:label="$t('powermeteradmin.pollingInterval')" :label="$t('powermeteradmin.pollingInterval')"
@ -271,8 +276,8 @@
{{ testHttpSmlRequestAlert.message }} {{ testHttpSmlRequestAlert.message }}
</BootstrapAlert> </BootstrapAlert>
</CardElement> </CardElement>
</div> </template>
</div> </template>
<FormFooter @reload="getPowerMeterConfig" /> <FormFooter @reload="getPowerMeterConfig" />
</form> </form>