evcc-io/assets/js/components/Config/LoadpointModal.vue

<template>
	<GenericModal
		id="loadpointModal"
		ref="modal"
		config-modal-name="loadpoint"
		:title="modalTitle"
		data-testid="loadpoint-modal"
		@open="onOpen"
		@close="onClose"
		@dismiss="onDismiss"
	>
		<CreateFlowStatus
			v-if="autoCreate"
			:in-progress="autoCreateInProgress"
			:creating-text="$t(`config.loadpoint.creating.${loadpointType}`)"
			:success-text="$t('config.loadpoint.created', { name: values.title })"
		>
			<template #actions>
				<a href="#" @click.prevent="autoCreate = false">
					{{ $t("config.loadpoint.advancedConfig") }}
				</a>
				<button type="button" class="btn btn-primary" @click="finish">
					{{ $t("config.general.close") }}
				</button>
			</template>
		</CreateFlowStatus>
		<div v-else-if="!loadpointType" class="d-flex flex-column gap-4">
			<NewDeviceButton
				v-for="t in typeChoices"
				:key="t"
				:title="$t(`config.loadpoint.option.${t}`)"
				class="addButton"
				@click="selectType(t)"
			/>
		</div>
		<form
			v-else
			ref="form"
			class="container mx-0 px-0"
			@submit.prevent="isNew ? create() : update()"
		>
			<FormRow
				id="loadpointParamTitle"
				:label="$t('config.loadpoint.titleLabel')"
				:example="
					loadpointType ? $t(`config.loadpoint.titleExample.${loadpointType}`) : undefined
				"
			>
				<PropertyField
					id="loadpointParamTitle"
					v-model="values.title"
					type="String"
					required
				/>
			</FormRow>
			<FormRow
				v-if="charger || !isNew"
				id="loadpointParamCharger"
				:label="$t(`config.loadpoint.chargerLabel.${loadpointType}`)"
				:error="!charger ? $t(`config.loadpoint.chargerError.${loadpointType}`) : undefined"
			>
				<DeviceRefBox
					compact
					:title="chargerTitle"
					:error="!charger || hasDeviceError('charger', values.charger)"
					@edit="editCharger"
				/>
			</FormRow>
			<div v-else class="d-flex justify-content-end">
				<button
					class="btn btn-outline-primary"
					type="submit"
					:disabled="values.title?.length === 0"
					@click.prevent="editCharger"
				>
					{{ addChargerLabel }}
				</button>
			</div>
			<div v-if="charger || !isNew">
				<FormRow
					v-if="values.meter"
					id="loadpointParamMeter"
					class="mb-6"
					:label="$t('config.loadpoint.energyMeterLabel')"
					:help="$t('config.loadpoint.energyMeterHelp')"
				>
					<DeviceRefBox
						compact
						:title="meterTitle"
						:error="hasDeviceError('meter', values.meter)"
						@edit="editMeter"
					/>
				</FormRow>
				<p v-else>
					<button
						class="btn btn-link btn-sm text-gray px-0"
						style="margin-top: -1rem"
						type="button"
						tabindex="0"
						@click="editMeter"
					>
						{{ $t(`config.loadpoint.addMeter`) }}
					</button>
				</p>
			</div>

			<div v-if="values.charger || !isNew">
				<div class="collapsible-wrapper" :class="{ open: !isNew }">
					<div class="collapsible-content">
						<h6 class="mt-4">{{ $t("config.loadpoint.chargingTitle") }}</h6>

						<FormRow
							id="loadpointMode"
							:label="$t('config.loadpoint.defaultModeLabel')"
							:help="
								values.defaultMode === ''
									? $t(`config.loadpoint.defaultModeHelpKeep`)
									: $t(`config.loadpoint.defaultModeHelp.${loadpointType}`)
							"
						>
							<PropertyField
								id="loadpointMode"
								v-model="values.defaultMode"
								type="Choice"
								class="w-100"
								:choice="defaultModeOptions"
							/>
						</FormRow>

						<FormRow
							id="loadpointSolarMode"
							:label="$t('config.loadpoint.solarBehaviorLabel')"
							:help="
								solarMode === 'default'
									? $t('config.loadpoint.solarBehaviorDefaultHelp', {
											enableDelay: fmtDurationNs(
												values.thresholds.enable.delay,
												true,
												'm'
											),
											disableDelay: fmtDurationNs(
												values.thresholds.disable.delay,
												true,
												'm'
											),
										})
									: $t('config.loadpoint.solarBehaviorCustomHelp')
							"
						>
							<SelectGroup
								id="loadpointSolarMode"
								v-model="solarMode"
								class="w-100"
								:options="[
									{
										name: $t('config.loadpoint.solarModeMaximum'),
										value: 'default',
									},
									{
										name: $t('config.loadpoint.solarModeCustom'),
										value: 'custom',
									},
								]"
								transparent
								equal-width
							/>
						</FormRow>

						<div v-show="solarMode === 'custom'" class="ms-3 mb-5">
							<div class="mb-4">
								<div class="d-flex flex-wrap flex-sm-nowrap gap-4">
									<FormRow
										id="loadpointEnableThreshold"
										:label="$t('config.loadpoint.thresholdEnableLabel')"
										style="margin-bottom: 0 !important"
									>
										<PropertyField
											id="loadpointEnableThreshold"
											v-model="values.thresholds.enable.threshold"
											type="Float"
											unit="W"
											size="w-25 w-min-200"
											required
										/>
									</FormRow>
									<FormRow
										id="loadpointEnableDelay"
										:label="$t('config.loadpoint.thresholdEnableDelayLabel')"
										style="margin-bottom: 0 !important"
									>
										<PropertyField
											id="loadpointEnableDelay"
											v-model="values.thresholds.enable.delay"
											type="Duration"
											legacy-duration
											unit="minute"
											size="w-25 w-min-200"
											required
										/>
									</FormRow>
								</div>
								<div class="form-text evcc-gray">
									{{
										values.thresholds.enable.threshold === 0
											? $t("config.loadpoint.thresholdEnableHelpZero", {
													delay: fmtDurationNs(
														values.thresholds.enable.delay,
														true,
														"m"
													),
												})
											: values.thresholds.enable.threshold < 0
												? $t(
														"config.loadpoint.thresholdEnableHelpNegative",
														{
															surplus: fmtW(
																-1 *
																	values.thresholds.enable
																		.threshold,
																powerUnit.AUTO
															),
															delay: fmtDurationNs(
																values.thresholds.enable.delay,
																true,
																"m"
															),
														}
													)
												: $t("config.loadpoint.thresholdEnableHelpInvalid")
									}}
								</div>
							</div>

							<div>
								<div class="d-flex flex-wrap flex-sm-nowrap gap-4">
									<FormRow
										id="loadpointDisableThreshold"
										:label="$t('config.loadpoint.thresholdDisableLabel')"
										style="margin-bottom: 0 !important"
									>
										<PropertyField
											id="loadpointDisableThreshold"
											v-model="values.thresholds.disable.threshold"
											type="Float"
											unit="W"
											size="w-25 w-min-200"
											required
										/>
									</FormRow>
									<FormRow
										id="loadpointDisableDelay"
										:label="$t('config.loadpoint.thresholdDisableDelayLabel')"
										style="margin-bottom: 0 !important"
									>
										<PropertyField
											id="loadpointDisableDelay"
											v-model="values.thresholds.disable.delay"
											type="Duration"
											legacy-duration
											unit="minute"
											size="w-25 w-min-200"
											required
										/>
									</FormRow>
								</div>
								<div class="form-text evcc-gray">
									{{
										values.thresholds.disable.threshold === 0
											? $t("config.loadpoint.thresholdDisableHelpZero", {
													delay: fmtDurationNs(
														values.thresholds.disable.delay,
														true,
														"m"
													),
												})
											: values.thresholds.disable.threshold > 0
												? $t(
														"config.loadpoint.thresholdDisableHelpPositive",
														{
															power: fmtW(
																values.thresholds.disable.threshold,
																powerUnit.AUTO
															),
															delay: fmtDurationNs(
																values.thresholds.disable.delay,
																true,
																"m"
															),
														}
													)
												: $t("config.loadpoint.thresholdDisableHelpInvalid")
									}}
								</div>
							</div>
						</div>

						<FormRow
							v-if="showPriority"
							id="loadpointParamPriority"
							:label="$t('config.loadpoint.priorityLabel')"
							:help="$t('config.loadpoint.priorityHelp')"
						>
							<PropertyField
								id="loadpointParamPriority"
								v-model="values.priority"
								type="Choice"
								size="w-100"
								class="me-2"
								required
								:choice="priorityOptions"
							/>
						</FormRow>

						<h6 v-if="!chargerIsSwitchDevice">
							{{ $t("config.loadpoint.electricalTitle") }}
							<small class="text-muted">{{
								$t("config.loadpoint.electricalSubtitle")
							}}</small>
						</h6>

						<FormRow
							v-if="!chargerIsSwitchDevice"
							id="chargerPower"
							:label="$t('config.loadpoint.chargerTypeLabel')"
							:help="
								chargerPower === '11kw'
									? $t('config.loadpoint.chargerPower11kwHelp')
									: chargerPower === '22kw'
										? $t('config.loadpoint.chargerPower22kwHelp')
										: $t('config.loadpoint.chargerPowerCustomHelp')
							"
						>
							<SelectGroup
								id="chargerPower"
								v-model="chargerPower"
								class="w-100"
								:options="[
									{
										name: $t('config.loadpoint.chargerPower11kw'),
										value: '11kw',
									},
									{
										name: $t('config.loadpoint.chargerPower22kw'),
										value: '22kw',
									},
									{
										name: $t('config.loadpoint.chargerPowerCustom'),
										value: 'other',
									},
								]"
								transparent
							/>
						</FormRow>

						<div
							v-if="!chargerIsSwitchDevice && chargerPower === 'other'"
							class="row ms-3 mb-5"
						>
							<FormRow
								id="loadpointMinCurrent"
								:label="$t('config.loadpoint.minCurrentLabel')"
								class="col-sm-6 mb-sm-0"
								:help="
									values.minCurrent < 6
										? $t('config.loadpoint.minCurrentHelp')
										: undefined
								"
							>
								<PropertyField
									id="loadpointMinCurrent"
									v-model="values.minCurrent"
									type="Float"
									unit="A"
									size="w-25 w-min-200"
									class="me-2"
									required
								/>
							</FormRow>

							<FormRow
								id="loadpointMaxCurrent"
								:label="$t('config.loadpoint.maxCurrentLabel')"
								class="col-sm-6 mb-sm-0"
								:help="
									values.maxCurrent < values.minCurrent
										? $t('config.loadpoint.maxCurrentHelp')
										: undefined
								"
							>
								<PropertyField
									id="loadpointMaxCurrent"
									v-model="values.maxCurrent"
									type="Float"
									unit="A"
									size="w-25 w-min-200"
									class="me-2"
									required
								/>
							</FormRow>
						</div>

						<template v-if="!chargerIsSinglePhase">
							<FormRow
								v-if="chargerSupports1p3p"
								id="loadpointParamPhases"
								:label="$t('config.loadpoint.phasesAutomatic')"
								:help="$t('config.loadpoint.phasesAutomaticHelp')"
							>
							</FormRow>
							<FormRow
								v-else
								id="loadpointParamPhases"
								:label="$t('config.loadpoint.phasesLabel')"
								:help="$t('config.loadpoint.phasesHelp')"
							>
								<SelectGroup
									id="loadpointParamPhases"
									v-model="values.phasesConfigured"
									class="w-100"
									:options="phasesOptions"
									transparent
									equal-width
								/>
							</FormRow>
						</template>

						<div v-if="showCircuit">
							<FormRow
								id="loadpointParamCircuit"
								:label="$t('config.loadpoint.circuitLabel')"
								:help="$t('config.loadpoint.circuitHelp')"
							>
								<InvalidReferenceAlert
									v-if="invalidCircuit"
									:message="$t('config.loadpoint.circuitInvalid')"
									:value="values.circuit"
									@remove="values.circuit = ''"
								/>
								<PropertyField
									v-else
									id="loadpointParamCircuit"
									v-model="values.circuit"
									type="Choice"
									class="me-2"
									:choice="circuitOptions"
								/>
							</FormRow>
						</div>

						<div v-if="!chargerIsIntegratedDevice">
							<h6>{{ $t("config.loadpoint.vehiclesTitle") }}</h6>

							<InvalidReferenceAlert
								v-if="invalidVehicle"
								:message="$t('config.loadpoint.vehicleInvalid')"
								:value="values.vehicle"
								@remove="values.vehicle = ''"
							/>
							<div v-else-if="vehicleOptions.length">
								<FormRow
									id="loadpointParamVehicle"
									:label="$t('config.loadpoint.vehicleLabel')"
									:help="
										values.vehicle
											? $t('config.loadpoint.vehicleHelpDefault')
											: $t('config.loadpoint.vehicleHelpAutoDetection')
									"
								>
									<PropertyField
										id="loadpointParamVehicle"
										v-model="values.vehicle"
										type="Choice"
										class="me-2"
										:choice="allVehicleOptions"
									/>
								</FormRow>

								<FormRow
									id="loadpointPollMode"
									:label="$t('config.loadpoint.pollModeLabel')"
									:help="
										values.soc.poll.mode === 'charging'
											? $t('config.loadpoint.pollModeChargingHelp')
											: values.soc.poll.mode === 'connected'
												? $t('config.loadpoint.pollModeConnectedHelp')
												: values.soc.poll.mode === 'always'
													? $t('config.loadpoint.pollModeAlwaysHelp')
													: undefined
									"
								>
									<SelectGroup
										id="loadpointPollMode"
										v-model="values.soc.poll.mode"
										class="w-100"
										:options="[
											{
												value: 'charging',
												name: $t('config.loadpoint.pollModeCharging'),
											},
											{
												value: 'connected',
												name: $t('config.loadpoint.pollModeConnected'),
											},
											{
												value: 'always',
												name: $t('config.loadpoint.pollModeAlways'),
											},
										]"
										transparent
									/>
								</FormRow>
								<FormRow
									v-if="values.soc.poll.mode !== 'charging'"
									id="loadpointPollInterval"
									class="ms-3 mb-5"
									:label="$t('config.loadpoint.pollIntervalLabel')"
									:help="$t('config.loadpoint.pollIntervalHelp')"
									:danger="$t('config.loadpoint.pollIntervalDanger')"
								>
									<PropertyField
										id="loadpointPollInterval"
										v-model="values.soc.poll.interval"
										type="Duration"
										legacy-duration
										unit="minute"
										size="w-25 w-min-200"
										class="me-2"
										required
									/>
								</FormRow>

								<div>
									<div class="d-flex mb-4">
										<input
											id="loadpointEstimate"
											v-model="values.soc.estimate"
											class="form-check-input"
											type="checkbox"
										/>
										<label
											class="form-check-label ms-2"
											for="loadpointEstimate"
										>
											{{ $t("config.loadpoint.estimateLabel") }}
										</label>
									</div>
								</div>
							</div>
							<div v-else>
								<p class="text-muted">{{ $t("config.loadpoint.noVehicles") }}</p>
							</div>
						</div>

						<div v-if="chargerIsHeating">
							<h6>{{ $t("config.loadpoint.temperatureRangeTitle") }}</h6>
							<p class="text-muted">
								{{ $t("config.loadpoint.temperatureRangeHelp") }}
							</p>
							<div class="row">
								<FormRow
									id="loadpointMinTemp"
									:label="$t('config.loadpoint.minTempLabel')"
									class="col-sm-6 mb-sm-0"
								>
									<PropertyField
										id="loadpointMinTemp"
										v-model="values.ui.minTemp"
										type="Float"
										unit="°C"
										size="w-25 w-min-200"
										class="me-2"
									/>
								</FormRow>

								<FormRow
									id="loadpointMaxTemp"
									:label="$t('config.loadpoint.maxTempLabel')"
									class="col-sm-6 mb-sm-0"
									:help="
										values.ui.maxTemp <= values.ui.minTemp
											? $t('config.loadpoint.maxTempHelp')
											: undefined
									"
								>
									<PropertyField
										id="loadpointMaxTemp"
										v-model="values.ui.maxTemp"
										type="Float"
										unit="°C"
										size="w-25 w-min-200"
										class="me-2"
									/>
								</FormRow>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div
				v-if="values.charger"
				class="mt-5 mb-4 d-flex flex-wrap justify-content-between align-items-center gap-2"
			>
				<div class="d-flex flex-wrap align-items-center gap-1">
					<button
						v-if="isDeletable"
						type="button"
						class="btn btn-link text-danger"
						@click.prevent="remove"
					>
						{{ $t("config.meter.delete") }}
					</button>
					<button
						v-else
						type="button"
						class="btn btn-link text-muted btn-cancel"
						data-bs-dismiss="modal"
					>
						{{ $t("config.loadpoint.cancel") }}
					</button>
					<button
						v-if="isDeletable"
						type="button"
						class="btn btn-link text-muted"
						@click.prevent="handleDisable(!isDisabled)"
					>
						{{
							isDisabled ? $t("config.general.enable") : $t("config.general.disable")
						}}
					</button>
				</div>
				<button type="submit" class="btn btn-primary" :disabled="saving">
					<span
						v-if="saving"
						class="spinner-border spinner-border-sm"
						role="status"
						aria-hidden="true"
					></span>
					{{ $t("config.loadpoint.save") }}
				</button>
			</div>
		</form>
	</GenericModal>
</template>

<script lang="ts">
import type { PropType } from "vue";
import FormRow from "./FormRow.vue";
import PropertyField from "./PropertyField.vue";
import SelectGroup from "../Helper/SelectGroup.vue";
import api from "@/api";
import GenericModal from "../Helper/GenericModal.vue";
import deepClone from "@/utils/deepClone";
import deepEqual from "@/utils/deepEqual";
import sleep from "@/utils/sleep";
import formatter, { POWER_UNIT } from "@/mixins/formatter";
import DeviceRefBox from "./DeviceRefBox.vue";
import NewDeviceButton from "./NewDeviceButton.vue";
import InvalidReferenceAlert from "./InvalidReferenceAlert.vue";
import CreateFlowStatus from "./CreateFlowStatus.vue";
import { handleError, customChargerName, createDeviceUtils } from "./DeviceModal";
import { getModal, openModal, replaceModal, closeModal } from "@/configModal";
import {
	CHARGE_MODE,
	LOADPOINT_TYPE,
	type DeviceType,
	type LoadpointType,
	type ConfigCharger,
	type ConfigMeter,
	type VehicleOption,
	type ConfigCircuit,
	type ConfigLoadpoint,
} from "@/types/evcc";

const nsPerMin = 60 * 1e9;

const { OFF, PV, MINPV, NOW } = CHARGE_MODE;

const defaultValues = {
	id: undefined,
	title: "",
	phasesConfigured: 3,
	minCurrent: 6,
	maxCurrent: 16,
	priority: 0,
	defaultMode: "",
	thresholds: {
		enable: { delay: 1 * nsPerMin, threshold: 0 },
		disable: { delay: 3 * nsPerMin, threshold: 0 },
	},
	soc: {
		poll: { mode: "charging", interval: 60 * nsPerMin },
		estimate: true,
	},
	ui: {
		minTemp: 0,
		maxTemp: 100,
	},
	vehicle: "",
	charger: "",
	circuit: "",
	meter: "",
} as ConfigLoadpoint;

const defaultThresholds = {
	enable: { delay: 1 * nsPerMin, threshold: 0 },
	disable: { delay: 3 * nsPerMin, threshold: 0 },
};

export default {
	name: "LoadpointModal",
	components: {
		FormRow,
		PropertyField,
		GenericModal,
		SelectGroup,
		DeviceRefBox,
		NewDeviceButton,
		InvalidReferenceAlert,
		CreateFlowStatus,
	},
	mixins: [formatter],
	props: {
		vehicleOptions: { type: Array as PropType<VehicleOption[]>, default: () => [] },
		loadpointCount: { type: Number, default: 0 },
		chargers: { type: Array as PropType<ConfigCharger[]>, default: () => [] },
		chargerValues: { type: Object, default: () => {} },
		meters: { type: Array as PropType<ConfigMeter[]>, default: () => [] },
		circuits: { type: Array as PropType<ConfigCircuit[]>, default: () => [] },
		hasDeviceError: {
			type: Function as PropType<(type: DeviceType, name: string) => boolean>,
			default: () => false,
		},
	},
	emits: ["changed", "dismissed", "disable"],
	data() {
		return {
			isModalVisible: false,
			saving: false,
			values: deepClone(defaultValues) as ConfigLoadpoint,
			chargerPower: "11kw",
			solarMode: "default",
			autoCreate: false,
			autoCreateInProgress: false,
			tab: "solar",
			powerUnit: POWER_UNIT,
		};
	},
	computed: {
		id(): number | undefined {
			return getModal("loadpoint")?.id;
		},
		selectedType(): LoadpointType | undefined {
			return getModal("loadpoint")?.type as LoadpointType | undefined;
		},
		modalTitle() {
			if (this.autoCreate && !this.autoCreateInProgress) {
				return this.$t(`config.loadpoint.createdTitle.${this.loadpointType}`);
			}
			if (this.isNew || this.autoCreate) {
				return this.$t(`config.loadpoint.titleAdd.${this.loadpointType || "unknown"}`);
			}
			return this.$t(`config.loadpoint.titleEdit.${this.loadpointType || "unknown"}`);
		},
		isNew() {
			return this.id === undefined;
		},
		charger() {
			return this.chargers.find((c) => c.name === this.values.charger);
		},
		chargerType() {
			if (!this.charger) {
				return null;
			}
			return this.chargerIsHeating ? LOADPOINT_TYPE.HEATING : LOADPOINT_TYPE.CHARGING;
		},
		chargerTitle() {
			if (!this.charger) return "";
			const title =
				this.charger.deviceProduct ||
				this.charger.config?.template ||
				this.$t(customChargerName(this.charger.type, this.chargerIsHeating));
			return title;
		},
		chargerStatus() {
			if (!this.chargerValues || !this.values.charger) {
				return null;
			}
			return this.chargerValues[this.values.charger] || null;
		},
		chargerSupports1p3p() {
			return this.chargerStatus?.phases1p3p?.value || false;
		},
		chargerIsSinglePhase() {
			return this.chargerStatus?.singlePhase?.value || false;
		},
		chargerIsIntegratedDevice() {
			return this.chargerStatus?.integratedDevice?.value || false;
		},
		chargerIsSwitchDevice() {
			return this.chargerStatus?.switchDevice?.value || false;
		},
		chargerIsHeating() {
			return this.chargerStatus?.heating?.value === true;
		},
		meterTitle() {
			const name = this.values.meter;
			if (!name) return "";
			const meter = this.meters.find((m) => m.name === name);
			const title =
				meter?.deviceProduct ||
				meter?.config?.template ||
				this.$t("config.general.customOption");
			return title;
		},
		isDeletable() {
			return !this.isNew;
		},
		isDisabled() {
			return Boolean(this.values.disable);
		},
		showPriority() {
			return this.isNew ? this.loadpointCount > 0 : this.loadpointCount > 1;
		},
		priorityOptions() {
			const result = Array.from({ length: 11 }, (_, i) => ({ key: i, name: `${i}` })) as {
				key?: number;
				name: string;
			}[];
			result[0]!.name = "0 (default)";
			result[10]!.name = "10 (highest)";
			return result;
		},
		phasesOptions() {
			return [
				{ value: 1, name: this.$t("config.loadpoint.phases1p") },
				{ value: 3, name: this.$t("config.loadpoint.phases3p") },
			];
		},
		defaultModeOptions(): { key: CHARGE_MODE; name: string }[] {
			// empty option is provided by PropertyField placeholder
			// switch devices have no current control, so minpv does not apply
			const modes = this.chargerIsSwitchDevice ? [OFF, PV, NOW] : [OFF, PV, MINPV, NOW];
			return modes.map((key) => ({ key, name: this.$t(`main.mode.${key}`) }));
		},
		showCircuit() {
			return this.circuits.length > 0 || !!this.values.circuit;
		},
		invalidCircuit() {
			const { circuit } = this.values;
			return circuit && !this.circuitOptions.some((c) => c.key === circuit);
		},
		circuitOptions() {
			// empty option is provided by PropertyField placeholder
			return this.circuits.map((c) => ({
				key: c.name,
				name: `${c.config?.title || ""} [${c.name}]`.trim(),
			}));
		},
		invalidVehicle() {
			const { vehicle } = this.values;
			return vehicle && !this.vehicleOptions.some(({ key }) => key === vehicle);
		},
		allVehicleOptions() {
			return [
				{ key: "", name: this.$t("config.loadpoint.vehicleAutoDetection") },
				{ key: null, name: null },
				...this.vehicleOptions,
			];
		},
		typeChoices(): LoadpointType[] {
			return Object.values(LOADPOINT_TYPE);
		},
		loadpointType(): LoadpointType | null {
			return this.selectedType ?? this.chargerType;
		},
		addChargerLabel() {
			if (this.loadpointType) {
				return this.$t(`config.loadpoint.addCharger.${this.loadpointType}`);
			}
			return "";
		},
	},
	watch: {
		isModalVisible(visible) {
			if (visible) {
				if (this.values?.id !== this.id) {
					// loadpoint changed
					this.reset();
					if (this.id) {
						this.loadConfiguration();
					}
				}
			}
		},
		id(newId) {
			// replaceModal swaps the id in place (after create) without a remount
			if (this.isModalVisible && newId !== undefined && this.values?.id !== newId) {
				this.loadConfiguration();
			}
		},
		chargerPower(value) {
			if (value === "11kw") {
				this.values.minCurrent = 6;
				this.values.maxCurrent = 16;
			} else if (value === "22kw") {
				this.values.minCurrent = 6;
				this.values.maxCurrent = 32;
			}
		},
		solarMode(value) {
			if (value === "default") {
				this.values.thresholds = deepClone(defaultThresholds);
			}
		},
		chargerSupports1p3p() {
			this.updatePhases();
		},
		chargerIsSinglePhase() {
			this.updatePhases();
		},
	},
	methods: {
		reset() {
			this.values = deepClone(defaultValues);
			this.autoCreate = false;
			this.autoCreateInProgress = false;
			this.updatePhases();
		},
		async loadConfiguration() {
			try {
				const res = await api.get(`config/loadpoints/${this.id}`);
				this.values = deepClone(res.data);
				this.updateChargerPower();
				this.updateSolarMode();
				this.updatePhases();
			} catch (e) {
				console.error(e);
			}
		},
		async emitChanged(action: "added" | "updated" | "removed") {
			const result = { action };
			await closeModal(result);
			this.$emit("changed", result);
		},
		async update() {
			this.saving = true;
			try {
				const values = deepClone(this.values);
				await api.put(`config/loadpoints/${this.id}`, values);
				this.emitChanged("updated");
			} catch (e) {
				handleError(e, "update failed");
			}
			this.saving = false;
		},
		async remove() {
			try {
				await api.delete(`config/loadpoints/${this.id}`);
				this.emitChanged("removed");
			} catch (e) {
				console.error(e);
				alert("delete failed");
			}
		},
		async handleDisable(disable: boolean) {
			if (this.id === undefined) return;
			this.$emit("disable", { id: this.id, disable });
			await closeModal();
		},
		async create() {
			this.autoCreate = true;
			this.autoCreateInProgress = true;
			await sleep(1000); // ux pause
			try {
				for (let i = 0; !this.chargerStatus && i < 100; i++) {
					await sleep(50);
				}
				const res = await api.post("config/loadpoints", this.values);
				this.$emit("changed", { action: "added" });
				// edit mode of the newly loadpoint
				replaceModal("loadpoint", {
					id: res.data?.id,
					type: this.loadpointType || undefined,
				});
				this.autoCreateInProgress = false;
			} catch (e) {
				this.autoCreate = false;
				this.autoCreateInProgress = false;
				handleError(e, "create failed");
			}
		},
		async finish() {
			await closeModal({ action: "added" });
			this.reset();
		},
		onOpen() {
			this.isModalVisible = true;
		},
		onClose() {
			this.isModalVisible = false;
		},
		async onDismiss() {
			// closeModal already cleared the route id, so check values.id, not isNew
			if (!this.values.id && !this.autoCreate) {
				await this.cleanupDevice("charger", this.values.charger, this.chargers);
				await this.cleanupDevice("meter", this.values.meter, this.meters);
				this.$emit("dismissed");
				this.reset();
				return;
			}
			// keep values so reopening the same loadpoint stays populated
			this.autoCreate = false;
			this.autoCreateInProgress = false;
		},
		async cleanupDevice(type: DeviceType, name: string, list: { name: string; id: number }[]) {
			const id = list.find((d) => d.name === name)?.id;
			if (id === undefined) return;
			try {
				await createDeviceUtils(type).remove(id);
			} catch (e) {
				console.error(e);
			}
		},
		async editCharger() {
			const charger = this.chargers.find((c) => c.name === this.values.charger);
			const result = await openModal("charger", {
				id: charger?.id,
				type: this.loadpointType || undefined,
			});
			if (result.action === "added" && result.name) {
				const instantCreate = this.isNew && !this.values.charger;
				this.values.charger = result.name;
				if (instantCreate) {
					await this.create();
				}
			} else if (result.action === "removed") {
				this.values.charger = "";
			}
		},
		async editMeter() {
			const meter = this.meters.find((m) => m.name === this.values.meter);
			const result = await openModal("meter", {
				id: meter?.id,
				type: "charge",
			});
			if (result.action === "added" && result.name) {
				this.values.meter = result.name;
			} else if (result.action === "removed") {
				this.values.meter = "";
			}
		},
		updateChargerPower() {
			const { minCurrent, maxCurrent } = this.values;
			if (minCurrent === 6 && maxCurrent === 16) {
				this.chargerPower = "11kw";
			} else if (minCurrent === 6 && maxCurrent === 32) {
				this.chargerPower = "22kw";
			} else {
				this.chargerPower = "other";
			}
		},
		updateSolarMode() {
			const { thresholds } = this.values;
			if (deepEqual(thresholds, defaultThresholds)) {
				this.solarMode = "default";
			} else {
				this.solarMode = "custom";
			}
		},
		updatePhases() {
			const { phasesConfigured } = this.values;
			if (this.chargerIsSinglePhase) {
				this.values.phasesConfigured = 1;
				return;
			}
			if (this.chargerSupports1p3p && this.isNew) {
				this.values.phasesConfigured = 0; // automatic
				return;
			}
			if (!this.chargerSupports1p3p && phasesConfigured === 0) {
				this.values.phasesConfigured = 3; // no automatic switching, default to 3-phase
				return;
			}
		},
		selectType(type: LoadpointType) {
			replaceModal("loadpoint", { id: this.id, type });
		},
	},
};
</script>
<style scoped>
.container {
	margin-left: calc(var(--bs-gutter-x) * -0.5);
	margin-right: calc(var(--bs-gutter-x) * -0.5);
	padding-right: 0;
}
.addButton {
	min-height: auto;
}
h6 {
	margin-top: 4rem;
}
</style>