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

webapp: fix AC charger admin view

Browse Source 
use InputElement where possible, which in particular fixes that the
inputs of the second card were all in the same row.
This commit is contained in:
Bernhard Kirchen 2024-10-27 21:41:25 +01:00 committed by Bernhard Kirchen
parent a425be5a03
commit c0cfdf04a8
4 changed files with 92 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
webapp/src/locales/de.json
View File

@ -941,7 +941,8 @@
"StopBatterySoCThreshold": "Laden bei SoC beenden", "StopBatterySoCThreshold": "Laden bei SoC beenden",
"StopBatterySoCThresholdHint": "Zur Verlängerung der Akku-Lebensdauer kann der Ladevorgang bei einem bestimmten SoC gestoppt werden.\nHinweis: Manche LiFePO-Akkus müssen gelegentlich voll geladen werden, um die SoC-Anzeige akkurat zu halten.", "StopBatterySoCThresholdHint": "Zur Verlängerung der Akku-Lebensdauer kann der Ladevorgang bei einem bestimmten SoC gestoppt werden.\nHinweis: Manche LiFePO-Akkus müssen gelegentlich voll geladen werden, um die SoC-Anzeige akkurat zu halten.",
"Seconds": "@:base.Seconds", "Seconds": "@:base.Seconds",
"EnableEmergencyCharge": "Notfallladen: Batterie wird mit maximaler Leistung geladen wenn durch das Batterie BMS angefordert", "EnableEmergencyCharge": "Notfallladen",
"EnableEmergencyChargeHint": "Batterie wird mit maximaler Leistung geladen wenn durch das Batterie BMS angefordert",
"targetPowerConsumption": "Angestrebter Netzbezug", "targetPowerConsumption": "Angestrebter Netzbezug",
"targetPowerConsumptionHint": "Bei postiven Werten wird die eingestellte Leistung aus dem Stromnetz bezogen. Bei negativen Werten wird das Netzteil vorzeitig abgeschaltet." "targetPowerConsumptionHint": "Bei postiven Werten wird die eingestellte Leistung aus dem Stromnetz bezogen. Bei negativen Werten wird das Netzteil vorzeitig abgeschaltet."
}, },

3
webapp/src/locales/en.json
View File

@ -945,7 +945,8 @@
"StopBatterySoCThreshold": "Stop charging at SoC", "StopBatterySoCThreshold": "Stop charging at SoC",
"StopBatterySoCThresholdHint": "To prolong the battery's lifespan, charging can be stopped at a certain SoC level.\nHint: In order to keep the SoC reading accurate, some LiFePO cells must be charged to full capacity regularly.", "StopBatterySoCThresholdHint": "To prolong the battery's lifespan, charging can be stopped at a certain SoC level.\nHint: In order to keep the SoC reading accurate, some LiFePO cells must be charged to full capacity regularly.",
"Seconds": "@:base.Seconds", "Seconds": "@:base.Seconds",
"EnableEmergencyCharge": "Emergency charge. Battery charged with maximum power if requested by Battery BMS", "EnableEmergencyCharge": "Emergency charge",
"EnableEmergencyChargeHint": "Battery charged with maximum power if requested by Battery BMS",
"targetPowerConsumption": "Target power consumption", "targetPowerConsumption": "Target power consumption",
"targetPowerConsumptionHint": "Postitive values use grid power to charge the battery. Negative values result in early shutdown" "targetPowerConsumptionHint": "Postitive values use grid power to charge the battery. Negative values result in early shutdown"
}, },

3
webapp/src/locales/fr.json
View File

@ -891,7 +891,8 @@
"StopBatterySoCThreshold": "Stop charging at SoC", "StopBatterySoCThreshold": "Stop charging at SoC",
"StopBatterySoCThresholdHint": "To prolong the battery's lifespan, charging can be stopped at a certain SoC level.\nHint: In order to keep the SoC reading accurate, some LiFePO cells must be charged to full capacity regularly.", "StopBatterySoCThresholdHint": "To prolong the battery's lifespan, charging can be stopped at a certain SoC level.\nHint: In order to keep the SoC reading accurate, some LiFePO cells must be charged to full capacity regularly.",
"Seconds": "@:base.Seconds", "Seconds": "@:base.Seconds",
"EnableEmergencyCharge": "Emergency charge. Battery charged with maximum power if requested by Battery BMS", "EnableEmergencyCharge": "Emergency charge",
"EnableEmergencyChargeHint": "Battery charged with maximum power if requested by Battery BMS",
"targetPowerConsumption": "Target power consumption", "targetPowerConsumption": "Target power consumption",
"targetPowerConsumptionHint": "Postitive values use grid power to charge the battery. Negative values result in early shutdown" "targetPowerConsumptionHint": "Postitive values use grid power to charge the battery. Negative values result in early shutdown"
}, },

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

@ -55,11 +55,13 @@
<InputElement <InputElement
:label="$t('acchargeradmin.EnableEmergencyCharge')" :label="$t('acchargeradmin.EnableEmergencyCharge')"
:tooltip="$t('acchargeradmin.EnableEmergencyChargeHint')"
v-model="acChargerConfigList.emergency_charge_enabled" v-model="acChargerConfigList.emergency_charge_enabled"
type="checkbox" type="checkbox"
wide wide
/> />
</template> </template>
</CardElement>
<CardElement <CardElement
:text="$t('acchargeradmin.Limits')" :text="$t('acchargeradmin.Limits')"
@ -67,140 +69,84 @@
add-space add-space
v-if="acChargerConfigList.auto_power_enabled || acChargerConfigList.emergency_charge_enabled" v-if="acChargerConfigList.auto_power_enabled || acChargerConfigList.emergency_charge_enabled"
> >
<div class="row mb-3"> <InputElement
<label for="voltageLimit" class="col-sm-2 col-form-label" :label="$t('acchargeradmin.VoltageLimit')"
>{{ $t('acchargeradmin.VoltageLimit') }} :tooltip="$t('acchargeradmin.stopVoltageLimitHint')"
<BIconInfoCircle v-tooltip :title="$t('acchargeradmin.stopVoltageLimitHint')" />
</label>
<div class="col-sm-10">
<div class="input-group">
<input
type="number"
step="0.01"
class="form-control"
id="voltageLimit"
placeholder="42"
v-model="acChargerConfigList.voltage_limit" v-model="acChargerConfigList.voltage_limit"
aria-describedby="voltageLimitDescription" postfix="V"
min="42"
max="58.5"
required
/>
<span class="input-group-text" id="voltageLimitDescription">V</span>
</div>
</div>
<label for="enableVoltageLimit" class="col-sm-2 col-form-label"
>{{ $t('acchargeradmin.enableVoltageLimit') }}
<BIconInfoCircle v-tooltip :title="$t('acchargeradmin.enableVoltageLimitHint')" />
</label>
<div class="col-sm-10">
<div class="input-group">
<input
type="number" type="number"
wide
required
step="0.01" step="0.01"
class="form-control"
id="enableVoltageLimit"
placeholder="42"
v-model="acChargerConfigList.enable_voltage_limit"
aria-describedby="enableVoltageLimitDescription"
min="42" min="42"
max="58.5" max="58.5"
required
/> />
<span class="input-group-text" id="enableVoltageLimitDescription">V</span>
</div> <InputElement
</div> :label="$t('acchargeradmin.enableVoltageLimit')"
<label for="lowerPowerLimit" class="col-sm-2 col-form-label">{{ :tooltip="$t('acchargeradmin.enableVoltageLimitHint')"
$t('acchargeradmin.lowerPowerLimit') v-model="acChargerConfigList.enable_voltage_limit"
}}</label> postfix="V"
<div class="col-sm-10">
<div class="input-group">
<input
type="number" type="number"
class="form-control" wide
id="lowerPowerLimit" required
placeholder="150" step="0.01"
min="42"
max="58.5"
/>
<InputElement
:label="$t('acchargeradmin.lowerPowerLimit')"
v-model="acChargerConfigList.lower_power_limit" v-model="acChargerConfigList.lower_power_limit"
aria-describedby="lowerPowerLimitDescription" postfix="W"
type="number"
wide
required
min="50" min="50"
max="3000" max="3000"
required
/> />
<span class="input-group-text" id="lowerPowerLimitDescription">W</span>
</div> <InputElement
</div> :label="$t('acchargeradmin.upperPowerLimit')"
<label for="upperPowerLimit" class="col-sm-2 col-form-label" :tooltip="$t('acchargeradmin.upperPowerLimitHint')"
>{{ $t('acchargeradmin.upperPowerLimit') }}
<BIconInfoCircle v-tooltip :title="$t('acchargeradmin.upperPowerLimitHint')" />
</label>
<div class="col-sm-10">
<div class="input-group">
<input
type="number"
class="form-control"
id="upperPowerLimit"
placeholder="2000"
v-model="acChargerConfigList.upper_power_limit" v-model="acChargerConfigList.upper_power_limit"
aria-describedby="upperPowerLimitDescription" postfix="W"
type="number"
wide
required
min="100" min="100"
max="3000" max="3000"
required
/> />
<span class="input-group-text" id="upperPowerLimitDescription">W</span>
</div> <InputElement
</div> :label="$t('acchargeradmin.targetPowerConsumption')"
<label for="targetPowerConsumption" class="col-sm-2 col-form-label" :tooltip="$t('acchargeradmin.targetPowerConsumptionHint')"
>{{ $t('acchargeradmin.targetPowerConsumption') }}
<BIconInfoCircle v-tooltip :title="$t('acchargeradmin.targetPowerConsumptionHint')" />
</label>
<div class="col-sm-10">
<div class="input-group">
<input
type="number"
class="form-control"
id="targetPowerConsumption"
placeholder="0"
v-model="acChargerConfigList.target_power_consumption" v-model="acChargerConfigList.target_power_consumption"
aria-describedby="targetPowerConsumptionDescription" postfix="W"
type="number"
wide
required required
/> />
<span class="input-group-text" id="targetPowerConsumptionDescription">W</span>
</div>
</div>
</div>
</CardElement> </CardElement>
<CardElement <CardElement
:text="$t('acchargeradmin.BatterySoCLimits')" :text="$t('acchargeradmin.BatterySoCLimits')"
textVariant="text-bg-primary" textVariant="text-bg-primary"
add-space add-space
v-if=" v-if="
acChargerConfigList.auto_power_enabled && acChargerConfigList.auto_power_enabled && acChargerConfigList.auto_power_batterysoc_limits_enabled
acChargerConfigList.auto_power_batterysoc_limits_enabled
" "
> >
<div class="row mb-3"> <InputElement
<label for="stopBatterySoCThreshold" class="col-sm-2 col-form-label" :label="$t('acchargeradmin.StopBatterySoCThreshold')"
>{{ $t('acchargeradmin.StopBatterySoCThreshold') }} :tooltip="$t('acchargeradmin.StopBatterySoCThresholdHint')"
<BIconInfoCircle v-tooltip :title="$t('acchargeradmin.StopBatterySoCThresholdHint')" />
</label>
<div class="col-sm-10">
<div class="input-group">
<input
type="number"
class="form-control"
id="stopBatterySoCThreshold"
placeholder="95"
v-model="acChargerConfigList.stop_batterysoc_threshold" v-model="acChargerConfigList.stop_batterysoc_threshold"
aria-describedby="stopBatterySoCThresholdDescription" postfix="%"
type="number"
wide
required
min="2" min="2"
max="99" max="99"
required
/> />
<span class="input-group-text" id="stopBatterySoCThresholdDescription">%</span>
</div>
</div>
</div>
</CardElement>
</CardElement> </CardElement>
<FormFooter @reload="getChargerConfig" /> <FormFooter @reload="getChargerConfig" />
@ -214,7 +160,6 @@ import BootstrapAlert from '@/components/BootstrapAlert.vue';
import CardElement from '@/components/CardElement.vue'; import CardElement from '@/components/CardElement.vue';
import FormFooter from '@/components/FormFooter.vue'; import FormFooter from '@/components/FormFooter.vue';
import InputElement from '@/components/InputElement.vue'; import InputElement from '@/components/InputElement.vue';
import { BIconInfoCircle } from 'bootstrap-icons-vue';
import type { AcChargerConfig } from '@/types/AcChargerConfig'; import type { AcChargerConfig } from '@/types/AcChargerConfig';
import { authHeader, handleResponse } from '@/utils/authentication'; import { authHeader, handleResponse } from '@/utils/authentication';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
@ -226,7 +171,6 @@ export default defineComponent({
CardElement, CardElement,
FormFooter, FormFooter,
InputElement, InputElement,
BIconInfoCircle,
}, },
data() { data() {
return { return {