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>
|
<template>
|
||||||
<div>
|
<InputElement
|
||||||
<InputElement
|
:label="$t('httprequestsettings.url')"
|
||||||
:label="$t('httprequestsettings.url')"
|
v-model="cfg.url"
|
||||||
v-model="cfg.url"
|
type="text"
|
||||||
type="text"
|
maxlength="1024"
|
||||||
maxlength="1024"
|
placeholder="http://admin:supersecret@mypowermeter.home/status"
|
||||||
placeholder="http://admin:supersecret@mypowermeter.home/status"
|
prefix="GET "
|
||||||
prefix="GET "
|
:tooltip="$t('httprequestsettings.urlDescription')"
|
||||||
:tooltip="$t('httprequestsettings.urlDescription')"
|
wide
|
||||||
wide
|
/>
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<div class="row mb-3">
|
||||||
<label for="auth_type" class="col-sm-4 col-form-label">{{ $t('httprequestsettings.authorization') }}</label>
|
<label for="auth_type" class="col-sm-4 col-form-label">{{ $t('httprequestsettings.authorization') }}</label>
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-8">
|
||||||
<select id="auth_type" class="form-select" v-model="cfg.auth_type">
|
<select id="auth_type" class="form-select" v-model="cfg.auth_type">
|
||||||
<option v-for="a in authTypeList" :key="a.key" :value="a.key">
|
<option v-for="a in authTypeList" :key="a.key" :value="a.key">
|
||||||
{{ $t('httprequestsettings.authType' + a.value) }}
|
{{ $t('httprequestsettings.authType' + a.value) }}
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
|
||||||
</div>
|
</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>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|||||||
@ -13,60 +13,59 @@
|
|||||||
wide
|
wide
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="row mb-3" v-show="acChargerConfigList.enabled">
|
<template v-if="acChargerConfigList.enabled">
|
||||||
<label class="col-sm-4 col-form-label">
|
<div class="row mb-3">
|
||||||
{{ $t('acchargeradmin.CanControllerFrequency') }}
|
<label class="col-sm-4 col-form-label">
|
||||||
</label>
|
{{ $t('acchargeradmin.CanControllerFrequency') }}
|
||||||
<div class="col-sm-8">
|
</label>
|
||||||
<select class="form-select" v-model="acChargerConfigList.can_controller_frequency">
|
<div class="col-sm-8">
|
||||||
<option
|
<select class="form-select" v-model="acChargerConfigList.can_controller_frequency">
|
||||||
v-for="frequency in frequencyTypeList"
|
<option
|
||||||
:key="frequency.key"
|
v-for="frequency in frequencyTypeList"
|
||||||
:value="frequency.value"
|
:key="frequency.key"
|
||||||
>
|
:value="frequency.value"
|
||||||
{{ frequency.key }} MHz
|
>
|
||||||
</option>
|
{{ frequency.key }} MHz
|
||||||
</select>
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</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"
|
wide
|
||||||
wide
|
/>
|
||||||
/>
|
|
||||||
|
|
||||||
<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"
|
wide
|
||||||
wide
|
/>
|
||||||
/>
|
|
||||||
|
|
||||||
<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"
|
||||||
wide
|
wide
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<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,30 +13,31 @@
|
|||||||
wide
|
wide
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<InputElement
|
<template v-if="batteryConfigList.enabled">
|
||||||
v-show="batteryConfigList.enabled"
|
<InputElement
|
||||||
: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>
|
||||||
<div class="col-sm-8">
|
<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) }}
|
||||||
</option>
|
</option>
|
||||||
</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>
|
||||||
|
|
||||||
|
|||||||
@ -13,30 +13,35 @@
|
|||||||
wide
|
wide
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<InputElement
|
<template v-if="powerMeterConfigList.enabled">
|
||||||
v-show="powerMeterConfigList.enabled"
|
<InputElement
|
||||||
: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
|
||||||
<option v-for="source in powerMeterSourceList" :key="source.key" :value="source.key">
|
id="inputPowerMeterSource"
|
||||||
{{ source.value }}
|
class="form-select"
|
||||||
</option>
|
v-model="powerMeterConfigList.source"
|
||||||
</select>
|
>
|
||||||
|
<option v-for="source in powerMeterSourceList" :key="source.key" :value="source.key">
|
||||||
|
{{ source.value }}
|
||||||
|
</option>
|
||||||
|
</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> — <code>{ "othervalue": 66, "total": 123.4 }</code></li>
|
<li><code>total</code> — <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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user