Skip to content

Commit

Permalink
webapp: avoid spurious DOM elements, avoid v-show, use v-if
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@schlimmchen
schlimmchen committed Oct 29, 2024
1 parent 8c46521 commit dc78a83
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 156 deletions.
116 changes: 57 additions & 59 deletions webapp/src/components/HttpRequestSettings.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
</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.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
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.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.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
:label="$t('httprequestsettings.timeout')"
v-model="cfg.timeout"
type="number"
:postfix="$t('httprequestsettings.milliSeconds')"
wide
/>
</template>

<script lang="ts">
Expand Down
89 changes: 44 additions & 45 deletions webapp/src/views/AcChargerAdminView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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
"
Expand Down
45 changes: 23 additions & 22 deletions webapp/src/views/BatteryAdminView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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>

Expand Down
Loading

0 comments on commit dc78a83

Please sign in to comment.