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

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

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

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

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

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

@ -13,30 +13,35 @@
wide
/>
<template v-if="powerMeterConfigList.enabled">
<InputElement
v-show="powerMeterConfigList.enabled"
:label="$t('powermeteradmin.VerboseLogging')"
v-model="powerMeterConfigList.verbose_logging"
type="checkbox"
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">{{
$t('powermeteradmin.PowerMeterSource')
}}</label>
<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">
{{ source.value }}
</option>
</select>
</div>
</div>
</template>
</CardElement>
<div v-if="powerMeterConfigList.enabled">
<div v-if="powerMeterConfigList.source === 0 || powerMeterConfigList.source === 3">
<template v-if="powerMeterConfigList.enabled">
<template v-if="powerMeterConfigList.source === 0 || powerMeterConfigList.source === 3">
<div class="alert alert-secondary mt-5" role="alert">
<h2>{{ $t('powermeteradmin.jsonPathExamplesHeading') }}:</h2>
{{ $t('powermeteradmin.jsonPathExamplesExplanation') }}
@ -58,10 +63,10 @@
<li><code>total</code> &mdash; <code>{ "othervalue": 66, "total": 123.4 }</code></li>
</ul>
</div>
</div>
</template>
<!-- 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
v-for="(mqtt, index) in powerMeterConfigList.mqtt.values"
v-bind:key="index"
@ -107,7 +112,7 @@
wide
/>
</CardElement>
</div>
</template>
<CardElement
v-if="powerMeterConfigList.source === 1 || powerMeterConfigList.source === 2"
@ -133,7 +138,7 @@
/>
</CardElement>
<div v-if="powerMeterConfigList.source === 3">
<template v-if="powerMeterConfigList.source === 3">
<div class="alert alert-secondary mt-5" role="alert">
<h2>{{ $t('powermeteradmin.urlExamplesHeading') }}:</h2>
<ul>
@ -178,7 +183,7 @@
wide
/>
<div v-if="httpJson.enabled || index == 0">
<template v-if="httpJson.enabled || index == 0">
<HttpRequestSettings
v-model="httpJson.http_request"
v-if="index == 0 || powerMeterConfigList.http_json.individual_requests"
@ -213,7 +218,7 @@
type="checkbox"
wide
/>
</div>
</template>
</CardElement>
<CardElement
@ -235,9 +240,9 @@
{{ testHttpJsonRequestAlert.message }}
</BootstrapAlert>
</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>
<InputElement
:label="$t('powermeteradmin.pollingInterval')"
@ -271,8 +276,8 @@
{{ testHttpSmlRequestAlert.message }}
</BootstrapAlert>
</CardElement>
</div>
</div>
</template>
</template>
<FormFooter @reload="getPowerMeterConfig" />
</form>