webapp: avoid spurious DOM elements, avoid v-show, use v-if
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
Bernhard Kirchen
parent
8c46521d6e
commit
dc78a83b84
@ -1,70 +1,68 @@
|
||||
<template>
|
||||
<div>
|
||||
<InputElement
|
||||
:label="$t('httprequestsettings.url')"
|
||||
v-model="cfg.url"
|
||||
type="text"
|
||||
maxlength="1024"
|
||||
placeholder="http://admin:supersecret@mypowermeter.home/status"
|
||||
prefix="GET "
|
||||
:tooltip="$t('httprequestsettings.urlDescription')"
|
||||
wide
|
||||
/>
|
||||
<InputElement
|
||||
:label="$t('httprequestsettings.url')"
|
||||
v-model="cfg.url"
|
||||
type="text"
|
||||
maxlength="1024"
|
||||
placeholder="http://admin:supersecret@mypowermeter.home/status"
|
||||
prefix="GET "
|
||||
:tooltip="$t('httprequestsettings.urlDescription')"
|
||||
wide
|
||||
/>
|
||||
|
||||
<div class="row mb-3">
|
||||
<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) }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<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) }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<InputElement
|
||||
v-if="cfg.auth_type != 0"
|
||||
:label="$t('httprequestsettings.username')"
|
||||
v-model="cfg.username"
|
||||
type="text"
|
||||
maxlength="64"
|
||||
wide
|
||||
/>
|
||||
|
||||
<InputElement
|
||||
v-if="cfg.auth_type != 0"
|
||||
:label="$t('httprequestsettings.password')"
|
||||
v-model="cfg.password"
|
||||
type="password"
|
||||
maxlength="64"
|
||||
wide
|
||||
/>
|
||||
|
||||
<InputElement
|
||||
:label="$t('httprequestsettings.headerKey')"
|
||||
v-model="cfg.header_key"
|
||||
type="text"
|
||||
maxlength="64"
|
||||
:tooltip="$t('httprequestsettings.headerKeyDescription')"
|
||||
wide
|
||||
/>
|
||||
|
||||
<InputElement
|
||||
:label="$t('httprequestsettings.headerValue')"
|
||||
v-model="cfg.header_value"
|
||||
type="text"
|
||||
maxlength="256"
|
||||
wide
|
||||
/>
|
||||
|
||||
<InputElement
|
||||
:label="$t('httprequestsettings.timeout')"
|
||||
v-model="cfg.timeout"
|
||||
type="number"
|
||||
:postfix="$t('httprequestsettings.milliSeconds')"
|
||||
wide
|
||||
/>
|
||||
</div>
|
||||
|
||||
<InputElement
|
||||
v-if="cfg.auth_type != 0"
|
||||
:label="$t('httprequestsettings.username')"
|
||||
v-model="cfg.username"
|
||||
type="text"
|
||||
maxlength="64"
|
||||
wide
|
||||
/>
|
||||
|
||||
<InputElement
|
||||
v-if="cfg.auth_type != 0"
|
||||
:label="$t('httprequestsettings.password')"
|
||||
v-model="cfg.password"
|
||||
type="password"
|
||||
maxlength="64"
|
||||
wide
|
||||
/>
|
||||
|
||||
<InputElement
|
||||
:label="$t('httprequestsettings.headerKey')"
|
||||
v-model="cfg.header_key"
|
||||
type="text"
|
||||
maxlength="64"
|
||||
:tooltip="$t('httprequestsettings.headerKeyDescription')"
|
||||
wide
|
||||
/>
|
||||
|
||||
<InputElement
|
||||
:label="$t('httprequestsettings.headerValue')"
|
||||
v-model="cfg.header_value"
|
||||
type="text"
|
||||
maxlength="256"
|
||||
wide
|
||||
/>
|
||||
|
||||
<InputElement
|
||||
:label="$t('httprequestsettings.timeout')"
|
||||
v-model="cfg.timeout"
|
||||
type="number"
|
||||
:postfix="$t('httprequestsettings.milliSeconds')"
|
||||
wide
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -13,60 +13,59 @@
|
||||
wide
|
||||
/>
|
||||
|
||||
<div class="row mb-3" v-show="acChargerConfigList.enabled">
|
||||
<label class="col-sm-4 col-form-label">
|
||||
{{ $t('acchargeradmin.CanControllerFrequency') }}
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<select class="form-select" v-model="acChargerConfigList.can_controller_frequency">
|
||||
<option
|
||||
v-for="frequency in frequencyTypeList"
|
||||
:key="frequency.key"
|
||||
:value="frequency.value"
|
||||
>
|
||||
{{ frequency.key }} MHz
|
||||
</option>
|
||||
</select>
|
||||
<template v-if="acChargerConfigList.enabled">
|
||||
<div class="row mb-3">
|
||||
<label class="col-sm-4 col-form-label">
|
||||
{{ $t('acchargeradmin.CanControllerFrequency') }}
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<select class="form-select" v-model="acChargerConfigList.can_controller_frequency">
|
||||
<option
|
||||
v-for="frequency in frequencyTypeList"
|
||||
:key="frequency.key"
|
||||
:value="frequency.value"
|
||||
>
|
||||
{{ frequency.key }} MHz
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InputElement
|
||||
v-show="acChargerConfigList.enabled"
|
||||
:label="$t('acchargeradmin.VerboseLogging')"
|
||||
v-model="acChargerConfigList.verbose_logging"
|
||||
type="checkbox"
|
||||
wide
|
||||
/>
|
||||
<InputElement
|
||||
:label="$t('acchargeradmin.VerboseLogging')"
|
||||
v-model="acChargerConfigList.verbose_logging"
|
||||
type="checkbox"
|
||||
wide
|
||||
/>
|
||||
|
||||
<InputElement
|
||||
v-show="acChargerConfigList.enabled"
|
||||
:label="$t('acchargeradmin.EnableAutoPower')"
|
||||
v-model="acChargerConfigList.auto_power_enabled"
|
||||
type="checkbox"
|
||||
wide
|
||||
/>
|
||||
<InputElement
|
||||
:label="$t('acchargeradmin.EnableAutoPower')"
|
||||
v-model="acChargerConfigList.auto_power_enabled"
|
||||
type="checkbox"
|
||||
wide
|
||||
/>
|
||||
|
||||
<InputElement
|
||||
v-show="acChargerConfigList.enabled && acChargerConfigList.auto_power_enabled"
|
||||
:label="$t('acchargeradmin.EnableBatterySoCLimits')"
|
||||
v-model="acChargerConfigList.auto_power_batterysoc_limits_enabled"
|
||||
type="checkbox"
|
||||
wide
|
||||
/>
|
||||
<InputElement
|
||||
v-if="acChargerConfigList.auto_power_enabled"
|
||||
:label="$t('acchargeradmin.EnableBatterySoCLimits')"
|
||||
v-model="acChargerConfigList.auto_power_batterysoc_limits_enabled"
|
||||
type="checkbox"
|
||||
wide
|
||||
/>
|
||||
|
||||
<InputElement
|
||||
v-show="acChargerConfigList.enabled"
|
||||
:label="$t('acchargeradmin.EnableEmergencyCharge')"
|
||||
v-model="acChargerConfigList.emergency_charge_enabled"
|
||||
type="checkbox"
|
||||
wide
|
||||
/>
|
||||
<InputElement
|
||||
: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,30 +13,31 @@
|
||||
wide
|
||||
/>
|
||||
|
||||
<InputElement
|
||||
v-show="batteryConfigList.enabled"
|
||||
:label="$t('batteryadmin.VerboseLogging')"
|
||||
v-model="batteryConfigList.verbose_logging"
|
||||
type="checkbox"
|
||||
wide
|
||||
/>
|
||||
<template v-if="batteryConfigList.enabled">
|
||||
<InputElement
|
||||
: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-4 col-form-label">
|
||||
{{ $t('batteryadmin.Provider') }}
|
||||
</label>
|
||||
<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) }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="row mb-3">
|
||||
<label class="col-sm-4 col-form-label">
|
||||
{{ $t('batteryadmin.Provider') }}
|
||||
</label>
|
||||
<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) }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
|
||||
@ -13,30 +13,35 @@
|
||||
wide
|
||||
/>
|
||||
|
||||
<InputElement
|
||||
v-show="powerMeterConfigList.enabled"
|
||||
:label="$t('powermeteradmin.VerboseLogging')"
|
||||
v-model="powerMeterConfigList.verbose_logging"
|
||||
type="checkbox"
|
||||
wide
|
||||
/>
|
||||
<template v-if="powerMeterConfigList.enabled">
|
||||
<InputElement
|
||||
:label="$t('powermeteradmin.VerboseLogging')"
|
||||
v-model="powerMeterConfigList.verbose_logging"
|
||||
type="checkbox"
|
||||
wide
|
||||
/>
|
||||
|
||||
<div class="row mb-3" v-show="powerMeterConfigList.enabled">
|
||||
<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>
|
||||
</select>
|
||||
<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"
|
||||
>
|
||||
<option v-for="source in powerMeterSourceList" :key="source.key" :value="source.key">
|
||||
{{ source.value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</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> — <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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user