PlansSettings.vue

<template>
	<div class="mt-4">
		<div class="form-group d-lg-flex align-items-baseline justify-content-between">
			<div class="container px-0">
				<ChargingPlanStaticSettings
					:id="`lp${id}-1`"
					class="mb-2"
					v-bind="staticPlan || {}"
					:capacity="capacity"
					:range-per-soc="rangePerSoc"
					:soc-per-kwh="socPerKwh"
					:soc-based-planning="socBasedPlanning"
					:multiple-plans="multiplePlans"
					@static-plan-updated="updateStaticPlan"
					@static-plan-removed="removeStaticPlan"
					@plan-preview="previewStaticPlan"
				/>
				<div v-if="socBasedPlanning">
					<div v-if="multiplePlans" class="d-none d-lg-block">
						<hr class="mt-5" />
						<h5>
							<div class="inner mb-3" data-testid="repeating-plan-title">
								{{ $t("main.chargingPlan.repeatingPlans") }}
							</div>
						</h5>
					</div>

					<ChargingPlansRepeatingSettings
						:id="id"
						:rangePerSoc="rangePerSoc"
						:plans="repeatingPlans"
						@updated="updateRepeatingPlans"
					/>
				</div>
			</div>
		</div>
		<hr />
		<h5>
			<div class="inner d-flex align-items-center gap-1" data-testid="plan-preview-title">
				<span v-if="!multiplePlans">
					{{ $t(`main.targetCharge.${noActivePlan ? "preview" : "currentPlan"}`) }}
				</span>
				<span v-else-if="noActivePlan">{{ $t("main.targetCharge.preview") }} #1</span>
				<span v-else-if="alreadyReached">{{ $t("main.targetCharge.goalReached") }}</span>
				<span v-else>{{ nextPlanTitle }}</span>
				<button
					type="button"
					class="btn btn-sm"
					:class="strategyOpen ? 'btn-secondary' : 'evcc-gray'"
					:aria-label="$t('main.chargingPlan.strategySettings')"
					tabindex="0"
					@click="strategyOpen = !strategyOpen"
				>
					<shopicon-regular-adjust size="s"></shopicon-regular-adjust>
				</button>
			</div>
		</h5>
		<ChargingPlanStrategy
			:id="id"
			:precondition="effectivePlanStrategy?.precondition"
			:continuous="effectivePlanStrategy?.continuous"
			:disabled="strategyDisabled"
			:show="strategyOpen"
			@update="updatePlanStrategy"
		/>
		<ChargingPlanPreview v-bind="chargingPlanPreviewProps" />
		<ChargingPlanWarnings v-bind="chargingPlanWarningsProps" />
	</div>
</template>

<script lang="ts">
import "@h2d2/shopicons/es/regular/plus";
import Preview from "./Preview.vue";
import PlanStaticSettings from "./PlanStaticSettings.vue";
import ChargingPlanStrategy from "./PlanStrategy.vue";
import RepeatingSettings from "./PlansRepeatingSettings.vue";
import Warnings from "./Warnings.vue";
import formatter from "@/mixins/formatter";
import collector from "@/mixins/collector";
import api from "@/api";
import deepEqual from "@/utils/deepEqual";
import convertRates from "@/utils/convertRates";
import { defineComponent, type PropType } from "vue";
import type { Vehicle, Timeout, CURRENCY, Forecast } from "@/types/evcc";
import type {
	StaticPlan,
	RepeatingPlan,
	PlanWrapper,
	StaticSocPlan,
	StaticEnergyPlan,
	PlanResponse,
	PlanStrategy,
} from "./types";

export default defineComponent({
	name: "ChargingPlansSettings",
	components: {
		ChargingPlanPreview: Preview,
		ChargingPlanStaticSettings: PlanStaticSettings,
		ChargingPlanStrategy,
		ChargingPlansRepeatingSettings: RepeatingSettings,
		ChargingPlanWarnings: Warnings,
	},
	mixins: [formatter, collector],
	props: {
		id: [String, Number],
		staticPlan: Object as PropType<StaticPlan>,
		repeatingPlans: { type: Array as PropType<RepeatingPlan[]>, default: () => [] },
		effectiveLimitSoc: Number,
		effectivePlanTime: String,
		effectivePlanSoc: Number,
		effectivePlanStrategy: Object as PropType<PlanStrategy>,
		planEnergy: Number,
		limitEnergy: Number,
		socBasedPlanning: Boolean,
		socPerKwh: Number,
		rangePerSoc: Number,
		smartCostType: String,
		currency: String as PropType<CURRENCY>,
		mode: String,
		capacity: Number,
		vehicle: Object as PropType<Vehicle>,
		vehicleLimitSoc: Number,
		planOverrun: Number,
		forecast: Object as PropType<Forecast>,
	},
	emits: [
		"static-plan-removed",
		"static-plan-updated",
		"repeating-plans-updated",
		"plan-strategy-updated",
	],
	data() {
		return {
			staticPlanPreview: {} as StaticPlan,
			plan: {} as PlanWrapper,
			activeTab: "time",
			debounceTimer: null as Timeout,
			nextPlanId: 0,
			strategyOpen: false,
		};
	},
	computed: {
		noActivePlan(): boolean {
			return !this.staticPlan && this.repeatingPlans.every((plan) => !plan.active);
		},
		multiplePlans(): boolean {
			return this.repeatingPlans.length !== 0;
		},
		chargingPlanWarningsProps(): any {
			return this.collectProps(Warnings);
		},
		chargingPlanPreviewProps(): any {
			const forecastSlots = this.forecast?.planner || [];
			const rates = convertRates(forecastSlots);
			const { duration, plan, power, planTime } = this.plan;
			const targetTime = planTime ? new Date(planTime) : null;
			const { currency, smartCostType } = this;
			return rates
				? { duration, plan, power, rates, targetTime, currency, smartCostType }
				: null;
		},
		alreadyReached(): boolean {
			return this.plan.duration === 0;
		},
		nextPlanTitle(): string {
			return `${this.$t("main.targetCharge.nextPlan")} #${this.nextPlanId}`;
		},
		strategyDisabled(): boolean {
			// options only make sense if there are variable prices
			// TODO: make this logic more robust (api fails, missing data)
			const slots = this.forecast?.planner || [];
			const values = new Set(slots.map(({ value }) => value));
			return values.size <= 1;
		},
	},
	watch: {
		effectivePlanTime(newValue: string) {
			if (null !== newValue) {
				this.updatePlanDebounced();
			}
		},
		effectivePlanStrategy: {
			deep: true,
			handler() {
				this.updatePlanDebounced();
			},
		},
		staticPlan: {
			deep: true,
			handler(vNew: StaticPlan, vOld: StaticPlan) {
				if (!deepEqual(vNew, vOld)) {
					this.updatePlanDebounced();
				}
			},
		},
		repeatingPlans: {
			deep: true,
			handler(vNew: RepeatingPlan[], vOld: RepeatingPlan[]) {
				if (!deepEqual(vNew, vOld)) {
					this.updatePlanDebounced();
				}
			},
		},
	},
	mounted(): void {
		this.updatePlanDebounced();
	},
	methods: {
		async updatePlanDebounced() {
			if (this.noActivePlan) {
				await this.updatePlanPreviewDebounced();
			} else {
				await this.updateActivePlanDebounced();
			}
		},
		async updateActivePlan(): Promise<void> {
			try {
				const res = await this.apiFetchPlan(`loadpoints/${this.id}/plan`);
				this.plan = res?.data ?? ({} as PlanWrapper);
				this.nextPlanId = this.plan.planId;
			} catch (e) {
				console.error(e);
			}
		},
		async fetchStaticPreviewSoc(plan: StaticSocPlan): Promise<PlanResponse | undefined> {
			const timeISO = plan.time.toISOString();
			const params: Record<string, unknown> = {};
			return await this.apiFetchPlan(
				`loadpoints/${this.id}/plan/static/preview/soc/${plan.soc}/${timeISO}`,
				params
			);
		},
		async fetchStaticPreviewEnergy(plan: StaticEnergyPlan): Promise<PlanResponse | undefined> {
			const timeISO = plan.time.toISOString();
			const params: Record<string, unknown> = {};
			return await this.apiFetchPlan(
				`loadpoints/${this.id}/plan/static/preview/energy/${plan.energy}/${timeISO}`,
				params
			);
		},
		async apiFetchPlan(
			url: string,
			params?: Record<string, unknown>
		): Promise<PlanResponse | undefined> {
			try {
				const res = (await api.get(url, {
					validateStatus: (code) => [200, 404].includes(code),
					params,
				})) as PlanResponse;
				if (res.status === 404) {
					return { data: {} } as PlanResponse;
				}
				return res;
			} catch (e) {
				console.error(e);
				return;
			}
		},
		async updatePreviewPlan(): Promise<void> {
			// only show preview if no plan is active
			if (!this.noActivePlan) return;

			try {
				let planRes: PlanResponse | undefined = undefined;
				if (this.staticPlanPreview) {
					// static plan
					let plan = this.staticPlanPreview;
					if (this.socBasedPlanning) {
						plan = plan as StaticSocPlan;
						planRes = await this.fetchStaticPreviewSoc({
							soc: plan.soc,
							time: plan.time,
						});
					} else {
						plan = plan as StaticEnergyPlan;
						planRes = await this.fetchStaticPreviewEnergy({
							energy: plan.energy,
							time: plan.time,
						});
					}
				}
				this.plan = planRes?.data ?? ({} as PlanWrapper);
			} catch (e) {
				console.error(e);
			}
		},
		async updatePlanPreviewDebounced(): Promise<void> {
			if (!this.debounceTimer) {
				await this.updatePreviewPlan();
				return;
			}
			clearTimeout(this.debounceTimer);
			this.debounceTimer = setTimeout(async () => await this.updatePreviewPlan(), 1000);
		},
		async updateActivePlanDebounced(): Promise<void> {
			if (!this.debounceTimer) {
				await this.updateActivePlan();
				return;
			}
			clearTimeout(this.debounceTimer);
			this.debounceTimer = setTimeout(async () => await this.updateActivePlan(), 1000);
		},
		removeStaticPlan(): void {
			this.$emit("static-plan-removed");
		},
		updateStaticPlan(plan: StaticPlan): void {
			this.$emit("static-plan-updated", plan);
		},
		updateRepeatingPlans(plans: RepeatingPlan[]): void {
			this.$emit("repeating-plans-updated", plans);
		},
		previewStaticPlan(plan: StaticPlan): void {
			this.staticPlanPreview = plan;
			this.updatePlanPreviewDebounced();
		},
		updatePlanStrategy(strategy: PlanStrategy): void {
			this.$emit("plan-strategy-updated", strategy);
		},
	},
});
</script>

<style scoped>
h5 {
	position: relative;
	display: flex;
	top: -33px;
	margin-bottom: -0.5rem;
	padding: 0 0.5rem;
	justify-content: center;
}
h5 .inner {
	padding: 0 1rem;
	background-color: var(--evcc-box);
	font-weight: normal;
	color: var(--evcc-gray);
	text-transform: uppercase;
	text-align: center;
}
</style>