evcc-io/assets/js/components/LoadpointSettingsBatteryBoost.vue
2024-10-16 14:24:26 +02:00

72 lines
1.7 KiB
Vue

<template>
<div>
<h6>
{{ $t("main.loadpointSettings.batteryUsage") }}
</h6>
<div class="mb-3 row" data-testid="battery-boost">
<label :for="formId('batteryBoost')" class="col-sm-4 col-form-label pt-0 pt-sm-2">
{{ $t("main.loadpointSettings.batteryBoost.label") }}&nbsp;🧪
</label>
<div class="col-sm-8 pe-0">
<div class="form-check form-switch my-1">
<input
:id="formId('batteryBoost')"
v-model="selectedEnabled"
class="form-check-input"
type="checkbox"
role="switch"
:disabled="disabled"
data-testid="battery-boost-checkbox"
@change="handleEnabledChange"
/>
<label :for="formId('batteryBoost')" class="form-check-label">
<div>
{{ $t("main.loadpointSettings.batteryBoost.description") }}
</div>
<span v-if="selectedEnabled && !disabled" class="d-block text-primary">
{{ $t("main.loadpointSettings.batteryBoost.once") }}
</span>
<small v-if="disabled" class="d-block">
{{ $t("main.loadpointSettings.batteryBoost.mode") }}
</small>
</label>
</div>
</div>
</div>
</div>
</template>
<script>
import formatter from "../mixins/formatter";
export default {
mixins: [formatter],
props: {
formId: Function,
mode: String,
batteryBoost: Boolean,
},
data() {
return {
selectedEnabled: this.batteryBoost,
};
},
watch: {
batteryBoost(newVal) {
this.selectedEnabled = newVal;
},
},
computed: {
disabled() {
return ["off", "now"].includes(this.mode);
},
},
methods: {
handleEnabledChange() {
this.$emit("batteryboost-updated", this.selectedEnabled);
},
},
emits: ["batteryboost-updated"],
};
</script>