-
-
-
-
-
-
-
- {{ $t("main.loadpointSettings.currents") }}
-
-
-
-
-
-
- {{
- $t(
- "main.loadpointSettings.phasesConfigured.no1p3pSupport"
- )
- }}
-
-
-
-
-
-
-
-
-
-
-
-
- ~ {{ maxPower }}
-
-
-
-
-
-
-
- ~ {{ minPower }}
-
-
-
+
+
+
+
+
+
+ {{ $t("main.loadpointSettings.currents") }}
+
+
+
+
+
+
+ {{ $t("main.loadpointSettings.phasesConfigured.no1p3pSupport") }}
+
+
+
+
+
+
+
+
+
+ ~ {{ maxPower }}
+
+
+
+
+
+
+
+ ~ {{ minPower }}
+
+
diff --git a/assets/js/components/Site/Site.vue b/assets/js/components/Site/Site.vue
index e7d2dd686..7b90e3f7e 100644
--- a/assets/js/components/Site/Site.vue
+++ b/assets/js/components/Site/Site.vue
@@ -50,8 +50,11 @@
:loadpoints="loadpoints"
:vehicles="vehicleList"
:smartCostType="smartCostType"
+ :smartCostAvailable="smartCostAvailable"
+ :smartFeedInPriorityAvailable="smartFeedInPriorityAvailable"
:tariffGrid="tariffGrid"
:tariffCo2="tariffCo2"
+ :tariffFeedIn="tariffFeedIn"
:currency="currency"
:gridConfigured="gridConfigured"
:pvConfigured="pvConfigured"
@@ -146,6 +149,8 @@ export default defineComponent({
uploadProgress: Number,
sponsor: { type: Object as PropType
, default: () => ({}) },
smartCostType: String as PropType,
+ smartCostAvailable: Boolean,
+ smartFeedInPriorityAvailable: Boolean,
fatal: Object,
forecast: Object as PropType,
},
diff --git a/assets/js/components/Tariff/SmartCostLimit.vue b/assets/js/components/Tariff/SmartCostLimit.vue
index 8f86d386e..1ee997f75 100644
--- a/assets/js/components/Tariff/SmartCostLimit.vue
+++ b/assets/js/components/Tariff/SmartCostLimit.vue
@@ -1,382 +1,99 @@
-
-
{{ title }}
-
- {{ description }}
-
-
-
-
-
-
-
-
{{ $t("smartCost.saved") }}
-
-
-
-
-
-
- {{ $t("smartCost.activeHoursLabel") }}
-
-
- {{
- $t("smartCost.activeHours", {
- total: totalSlots.length,
- charging: chargingSlots.length,
- })
- }}
-
-
-
-
- {{ activeSlotName }}
- {{ $t("smartCost.co2Label") }}
- {{ $t("smartCost.priceLabel") }}
-
-
- {{ activeSlotCost }}
-
-
- {{ chargingCostRange }}
-
-
- {{ totalCostRange }}
-
-
-
-
-
+
{{ title }}
+
+ {{ description }}
+
+
+
+
+
+
+
+
{{ $t("smartCost.saved") }}
+
+
+
+
+
+
+ {{ activeHoursLabel }}
+
+
+ {{ activeHoursText }}
+
+
+
+
+ {{ activeSlotName }}
+ {{ currentPriceLabel }}
+
+
+ {{ activeSlotCost }}
+
+
+ {{ fmtActiveCostRange }}
+
+
+ {{ fmtTotalCostRange }}
+
+
+
+
+
-
-
-
-
-
{{ fmtDuration(pvRemainingInterpolated) }}
-
-
-
-
{{ fmtDuration(phaseRemainingInterpolated) }}
-
-
-
-
-
- {{ fmtTemperature(vehicleLimitSoc) }}
-
-
-
-
-
-
-
- {{ fmtPercentage(vehicleLimitSoc) }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ {{ smartCostNow }}
+ ≤ {{ smartCostLimitFmt }}
+
+ ({{ fmtAbsoluteDate(new Date(smartCostNextStart)) }})
+
+
+
+
+
+ {{ feedInNow }}
+ ≥
+ {{
+ smartFeedInPriorityLimitFmt
+ }}
+
+ ({{ fmtAbsoluteDate(new Date(smartFeedInPriorityNextStart)) }})
+
+
+
+
@@ -182,10 +52,13 @@ import "@h2d2/shopicons/es/regular/sun";
import "@h2d2/shopicons/es/regular/eco1";
import "@h2d2/shopicons/es/regular/angledoublerightsmall";
import "@h2d2/shopicons/es/regular/clock";
-import DynamicPriceIcon from "../MaterialIcon/DynamicPrice.vue";
import { DEFAULT_LOCALE } from "@/i18n.ts";
import formatter from "@/mixins/formatter";
+import { defineComponent, type PropType } from "vue";
+import { SMART_COST_TYPE, type CURRENCY, type Timeout } from "@/types/evcc";
+
import ClimaterIcon from "../MaterialIcon/Climater.vue";
+import DynamicPriceIcon from "../MaterialIcon/DynamicPrice.vue";
import PlanEndIcon from "../MaterialIcon/PlanEnd.vue";
import PlanStartIcon from "../MaterialIcon/PlanStart.vue";
import ReconnectIcon from "../MaterialIcon/Reconnect.vue";
@@ -193,34 +66,23 @@ import RfidWaitIcon from "../MaterialIcon/RfidWait.vue";
import SunDownIcon from "../MaterialIcon/SunDown.vue";
import SunUpIcon from "../MaterialIcon/SunUp.vue";
import TempLimitIcon from "../MaterialIcon/TempLimit.vue";
-import Tooltip from "bootstrap/js/dist/tooltip";
import VehicleLimitIcon from "../MaterialIcon/VehicleLimit.vue";
import VehicleLimitReachedIcon from "../MaterialIcon/VehicleLimitReached.vue";
import VehicleLimitWarningIcon from "../MaterialIcon/VehicleLimitWarning.vue";
import VehicleMinSocIcon from "../MaterialIcon/VehicleMinSoc.vue";
import WelcomeIcon from "../MaterialIcon/Welcome.vue";
import BatteryBoostIcon from "../MaterialIcon/BatteryBoost.vue";
-import { defineComponent, type PropType } from "vue";
-import { SMART_COST_TYPE, type CURRENCY, type Timeout } from "@/types/evcc";
+import SunPauseIcon from "../MaterialIcon/SunPause.vue";
+
+import StatusItem from "./StatusItem.vue";
+
const REASON_AUTH = "waitingforauthorization";
const REASON_DISCONNECT = "disconnectrequired";
export default defineComponent({
name: "VehicleStatus",
components: {
- ClimaterIcon,
- DynamicPriceIcon,
- PlanEndIcon,
- PlanStartIcon,
- ReconnectIcon,
- RfidWaitIcon,
- SunDownIcon,
- SunUpIcon,
- VehicleLimitIcon,
- VehicleMinSocIcon,
- WelcomeIcon,
- TempLimitIcon,
- BatteryBoostIcon,
+ StatusItem,
},
mixins: [formatter],
props: {
@@ -251,8 +113,13 @@ export default defineComponent({
smartCostLimit: { type: Number, default: null },
smartCostNextStart: String,
smartCostType: String,
+ smartFeedInPriorityActive: Boolean,
+ smartFeedInPriorityDisabled: Boolean,
+ smartFeedInPriorityLimit: { type: Number, default: null },
+ smartFeedInPriorityNextStart: String,
tariffCo2: { type: Number, default: 0 },
tariffGrid: { type: Number, default: 0 },
+ tariffFeedIn: { type: Number, default: 0 },
vehicleClimaterActive: Boolean,
vehicleWelcomeActive: Boolean,
vehicleLimitSoc: { type: Number, default: 0 },
@@ -260,33 +127,10 @@ export default defineComponent({
emits: ["open-loadpoint-settings", "open-minsoc-settings", "open-plan-modal"],
data() {
return {
- pvTooltip: null as Tooltip | null,
- phaseTooltip: null as Tooltip | null,
- planStartTooltip: null as Tooltip | null,
- planActiveTooltip: null as Tooltip | null,
- minSocTooltip: null as Tooltip | null,
- vehicleClimaterTooltip: null as Tooltip | null,
- vehicleWelcomeTooltip: null as Tooltip | null,
- smartCostTooltip: null as Tooltip | null,
- vehicleLimitTooltip: null as Tooltip | null,
- tempLimitTooltip: null as Tooltip | null,
- awaitingAuthorizationTooltip: null as Tooltip | null,
- disconnectRequiredTooltip: null as Tooltip | null,
- batteryBoostTooltip: null as Tooltip | null,
interval: null as Timeout,
- planProjectedEndDuration: null as string | null,
- smartCostNextStartDuration: null as string | null,
- planProjectedStartDuration: null as string | null,
};
},
computed: {
- phaseTimerActive() {
- return (
- this.phaseRemainingInterpolated &&
- this.phaseRemainingInterpolated > 0 &&
- ["scale1p", "scale3p"].includes(this.phaseAction)
- );
- },
pvTimerActive() {
return (
this.pvRemainingInterpolated &&
@@ -294,78 +138,12 @@ export default defineComponent({
["enable", "disable"].includes(this.pvAction)
);
},
- pvTimerVisible() {
- return this.pvTimerActive;
- },
- pvTimerContent() {
- if (!this.pvTimerVisible) {
- return "";
- }
- const key = this.pvAction === "enable" ? "pvEnable" : "pvDisable";
- return this.$t(`main.vehicleStatus.${key}`);
- },
- phaseTimerVisible() {
- return !this.pvTimerActive && this.charging && this.phaseTimerActive;
- },
- phaseIconClass() {
- return this.phaseAction === "scale1p" ? "phaseUp" : "phaseDown";
- },
- phaseTimerContent() {
- if (!this.phaseTimerVisible) {
- return "";
- }
- return this.$t(`main.vehicleStatus.${this.phaseAction}`);
- },
- vehicleLimitVisible() {
- const limit = this.effectiveLimitSoc || 100;
- return this.connected && this.vehicleLimitSoc > 0 && this.vehicleLimitSoc < limit;
- },
- awaitingAuthorizationVisible() {
- return this.chargerStatusReason === REASON_AUTH;
- },
- awaitingAuthorizationTooltipContent() {
- if (!this.awaitingAuthorizationVisible) {
- return "";
- }
- return this.$t("main.vehicleStatus.awaitingAuthorization");
- },
- disconnectRequiredVisible() {
- return this.chargerStatusReason === REASON_DISCONNECT;
- },
- disconnectRequiredTooltipContent() {
- if (!this.disconnectRequiredVisible) {
- return "";
- }
- return this.$t("main.vehicleStatus.disconnectRequired");
- },
- vehicleLimitTooltipContent() {
- if (!this.vehicleLimitVisible) {
- return "";
- }
- if (this.vehicleLimitReached) {
- return this.$t("main.vehicleStatus.vehicleLimitReached");
- }
- if (this.vehicleLimitWarning) {
- return this.$t("main.targetCharge.targetIsAboveVehicleLimit");
- }
- return this.$t("main.vehicleStatus.vehicleLimit");
- },
- tempLimitTooltipContent() {
- if (!this.tempLimitVisible) {
- return "";
- }
- return this.$t("main.heatingStatus.vehicleLimit");
- },
- minSocVisible() {
- return this.connected && this.minSoc > 0 && this.vehicleSoc < this.minSoc;
- },
- minSocTooltipContent() {
- if (!this.minSocVisible) {
- return "";
- }
- return this.$t("main.vehicleStatus.minCharge", {
- soc: this.fmtPercentage(this.minSoc),
- });
+ phaseTimerActive() {
+ return (
+ this.phaseRemainingInterpolated &&
+ this.phaseRemainingInterpolated > 0 &&
+ ["scale1p", "scale3p"].includes(this.phaseAction)
+ );
},
vehicleLimitReached() {
return (
@@ -378,81 +156,6 @@ export default defineComponent({
vehicleLimitWarning() {
return this.effectivePlanSoc > this.vehicleLimitSoc;
},
- vehicleLimitClass() {
- if (this.vehicleLimitWarning) {
- return "text-warning";
- }
- return "";
- },
- tempLimitVisible() {
- return this.heating && this.vehicleLimitSoc > 0;
- },
- vehicleLimitIconComponent() {
- if (this.vehicleLimitReached) {
- return VehicleLimitReachedIcon;
- }
- if (this.vehicleLimitWarning) {
- return VehicleLimitWarningIcon;
- }
- return VehicleLimitIcon;
- },
- planStartVisible() {
- return this.planProjectedStart && !this.planActive && !this.chargingPlanDisabled;
- },
- batteryBoostVisible() {
- return this.batteryBoostActive;
- },
- batteryBoostTooltipContent() {
- if (!this.batteryBoostVisible) {
- return "";
- }
- return this.$t("main.vehicleStatus.batteryBoost");
- },
- planStartTooltipContent() {
- if (!this.planStartVisible) {
- return "";
- }
- return this.$t("main.vehicleStatus.targetChargePlanned", {
- duration: this.planProjectedStartDuration,
- });
- },
- planActiveVisible() {
- return this.planProjectedEnd && this.planActive && !this.chargingPlanDisabled;
- },
- planActiveClass() {
- return this.planTimeUnreachable ? "text-warning" : "text-primary";
- },
- planActiveTooltipContent() {
- if (!this.planActiveVisible) {
- return "";
- }
- if (this.planTimeUnreachable) {
- return this.$t("main.targetCharge.notReachableInTime", {
- overrun: this.fmtDuration(this.planOverrun, true, "h"),
- });
- }
- return this.$t("main.vehicleStatus.targetChargeActive", {
- duration: this.planProjectedEndDuration,
- });
- },
- smartCostVisible() {
- return this.smartCostLimit !== null;
- },
- smartCostTooltipContent() {
- if (!this.smartCostVisible) {
- return "";
- }
- const prefix = `main.vehicleStatus.${this.smartCostPrice ? "cheap" : "clean"}`;
- if (this.smartCostNowVisible) {
- return this.$t(`${prefix}EnergyCharging`);
- }
- if (this.smartCostNextStart) {
- return this.$t(`${prefix}EnergyNextStart`, {
- duration: this.smartCostNextStartDuration,
- });
- }
- return this.$t(`${prefix}EnergySet`);
- },
smartCostPrice() {
return this.smartCostType !== SMART_COST_TYPE.CO2;
},
@@ -474,26 +177,11 @@ export default defineComponent({
}
return this.fmtCo2Short(this.smartCostLimit);
},
- smartCostClass() {
- if (this.smartCostDisabled) {
- return "opacity-25";
- }
- if (this.smartCostActive) {
- return "text-primary";
- }
- return "";
+ feedInNow() {
+ return this.fmtPricePerKWh(this.tariffFeedIn, this.currency, true);
},
- vehicleClimaterTooltipContent() {
- if (!this.vehicleClimaterActive) {
- return "";
- }
- return this.$t("main.vehicleStatus.climating");
- },
- vehicleWelcomeTooltipContent() {
- if (!this.vehicleWelcomeActive) {
- return "";
- }
- return this.$t("main.vehicleStatus.welcome");
+ smartFeedInPriorityLimitFmt() {
+ return this.fmtPricePerKWh(this.smartFeedInPriorityLimit, this.currency, true);
},
chargerStatus() {
const t = (key: string) => {
@@ -524,74 +212,190 @@ export default defineComponent({
return t("connected");
},
- },
- watch: {
- planActiveTooltipContent() {
- this.$nextTick(this.updatePlanActiveTooltip);
- },
- planStartTooltipContent() {
- this.$nextTick(this.updatePlanStartTooltip);
- },
- minSocTooltipContent() {
- this.$nextTick(this.updateMinSocTooltip);
- },
- phaseTimerContent() {
- this.$nextTick(this.updatePhaseTooltip);
- },
- pvTimerContent() {
- this.$nextTick(this.updatePvTooltip);
- },
- vehicleClimaterTooltipContent() {
- this.$nextTick(this.updateVehicleClimaterTooltip);
- },
- vehicleWelcomeTooltipContent() {
- this.$nextTick(this.updateVehicleWelcomeTooltip);
- },
- smartCostTooltipContent() {
- this.$nextTick(this.updateSmartCostTooltip);
- },
- vehicleLimitTooltipContent() {
- this.$nextTick(this.updateVehicleLimitTooltip);
- },
- tempLimitTooltipContent() {
- this.$nextTick(this.updateTempLimitTooltip);
- },
- awaitingAuthorizationTooltipContent() {
- this.$nextTick(this.updateAwaitingAuthorizationTooltip);
- },
- disconnectRequiredTooltipContent() {
- this.$nextTick(this.updateDisconnectRequiredTooltip);
- },
- batteryBoostTooltipContent() {
- this.$nextTick(this.updateBatteryBoostTooltip);
- },
- planProjectedStart() {
- this.updateDurations();
- },
- planProjectedEnd() {
- this.updateDurations();
- },
- smartCostNextStart() {
- this.updateDurations();
+ statusItems() {
+ const t = (key: string, params?: Record
) =>
+ this.$t(`main.vehicleStatus.${key}`, params ?? {});
+
+ const items = [
+ {
+ id: "pvTimer",
+ visible: Boolean(this.pvTimerActive),
+ content: this.fmtDuration(this.pvRemainingInterpolated),
+ tooltipContent: this.pvAction === "enable" ? t("pvEnable") : t("pvDisable"),
+ iconComponent: this.pvAction === "enable" ? SunUpIcon : SunDownIcon,
+ testId: "vehicle-status-pvtimer",
+ },
+ {
+ id: "phaseTimer",
+ visible: !this.pvTimerActive && this.charging && this.phaseTimerActive,
+ content: this.fmtDuration(this.phaseRemainingInterpolated),
+ tooltipContent: t(this.phaseAction),
+ iconComponent: "shopicon-regular-angledoublerightsmall",
+ iconClass: this.phaseAction === "scale1p" ? "phaseUp" : "phaseDown",
+ testId: "vehicle-status-phasetimer",
+ },
+ {
+ id: "tempLimit",
+ visible: this.heating && this.vehicleLimitSoc > 0,
+ content: this.fmtTemperature(this.vehicleLimitSoc),
+ tooltipContent: t("vehicleLimit"),
+ iconComponent: TempLimitIcon,
+ testId: "vehicle-status-limit",
+ },
+ {
+ id: "minSoc",
+ visible:
+ !this.heating &&
+ this.connected &&
+ this.minSoc > 0 &&
+ this.vehicleSoc < this.minSoc,
+ content: this.fmtPercentage(this.minSoc),
+ tooltipContent: t("minCharge", {
+ soc: this.fmtPercentage(this.minSoc),
+ }),
+ iconComponent: VehicleMinSocIcon,
+ itemClass: "text-danger text-decoration-underline",
+ testId: "vehicle-status-minsoc",
+ clickable: true,
+ clickHandler: () => this.openMinSocSettings(),
+ },
+ {
+ id: "vehicleLimit",
+ visible:
+ !this.heating &&
+ this.connected &&
+ this.vehicleLimitSoc > 0 &&
+ this.vehicleLimitSoc < (this.effectiveLimitSoc || 100),
+ content: this.fmtPercentage(this.vehicleLimitSoc),
+ tooltipContent: this.vehicleLimitReached
+ ? t("vehicleLimitReached")
+ : this.vehicleLimitWarning
+ ? t("targetIsAboveVehicleLimit")
+ : t("vehicleLimit"),
+ iconComponent: this.vehicleLimitReached
+ ? VehicleLimitReachedIcon
+ : this.vehicleLimitWarning
+ ? VehicleLimitWarningIcon
+ : VehicleLimitIcon,
+ itemClass: this.vehicleLimitWarning ? "text-warning" : "",
+ testId: "vehicle-status-limit",
+ clickable: Boolean(this.vehicleLimitWarning),
+ clickHandler: this.vehicleLimitWarning ? () => this.openPlanModal() : undefined,
+ },
+ {
+ id: "vehicleClimater",
+ visible: !this.heating && this.vehicleClimaterActive,
+ tooltipContent: t("climating"),
+ iconComponent: ClimaterIcon,
+ testId: "vehicle-status-climater",
+ },
+ {
+ id: "vehicleWelcome",
+ visible: !this.heating && this.vehicleWelcomeActive,
+ tooltipContent: t("welcome"),
+ iconComponent: WelcomeIcon,
+ testId: "vehicle-status-welcome",
+ },
+ {
+ id: "awaitingAuthorization",
+ visible: !this.heating && this.chargerStatusReason === REASON_AUTH,
+ tooltipContent: t("awaitingAuthorization"),
+ iconComponent: RfidWaitIcon,
+ testId: "vehicle-status-awaiting-authorization",
+ },
+ {
+ id: "disconnectRequired",
+ visible: !this.heating && this.chargerStatusReason === REASON_DISCONNECT,
+ tooltipContent: t("disconnectRequired"),
+ iconComponent: ReconnectIcon,
+ itemClass: "text-warning",
+ testId: "vehicle-status-disconnect-required",
+ },
+ {
+ id: "smartCost",
+ visible: this.smartCostLimit !== null,
+ tooltipContent: this.getSmartCostTooltip(),
+ iconComponent: this.smartCostPrice ? DynamicPriceIcon : "shopicon-regular-eco1",
+ itemClass: this.smartCostDisabled
+ ? "opacity-25"
+ : this.smartCostActive
+ ? "text-primary"
+ : "",
+ testId: "vehicle-status-smartcost",
+ clickable: true,
+ clickHandler: () => this.openLoadpointSettings(),
+ },
+ {
+ id: "smartFeedInPriority",
+ visible: this.smartFeedInPriorityActive || this.smartFeedInPriorityNextStart,
+ tooltipContent: this.getSmartFeedInPriorityTooltip(),
+ iconComponent: SunPauseIcon,
+ itemClass: this.smartFeedInPriorityDisabled
+ ? "opacity-25"
+ : this.smartFeedInPriorityActive
+ ? "text-warning"
+ : "",
+ testId: "vehicle-status-smartfeedinpriority",
+ clickable: true,
+ clickHandler: () => this.openLoadpointSettings(),
+ },
+ {
+ id: "batteryBoost",
+ visible: this.batteryBoostActive,
+ tooltipContent: t("batteryBoost"),
+ iconComponent: BatteryBoostIcon,
+ testId: "vehicle-status-batteryboost",
+ clickable: true,
+ clickHandler: () => this.openLoadpointSettings(),
+ },
+ {
+ id: "planActive",
+ visible: this.planProjectedEnd && this.planActive && !this.chargingPlanDisabled,
+ content: this.planProjectedEnd
+ ? this.fmtAbsoluteDate(new Date(this.planProjectedEnd))
+ : "",
+ tooltipContent: this.planTimeUnreachable
+ ? this.$t("main.targetCharge.notReachableInTime", {
+ overrun: this.fmtDuration(this.planOverrun, true, "h"),
+ })
+ : t("targetChargeActive", {
+ duration: this.planProjectedEnd
+ ? this.fmtDurationToTime(new Date(this.planProjectedEnd))
+ : "",
+ }),
+ iconComponent: PlanEndIcon,
+ itemClass: this.planTimeUnreachable ? "text-warning" : "text-primary",
+ testId: "vehicle-status-planactive",
+ clickable: true,
+ clickHandler: () => this.openPlanModal(),
+ },
+ {
+ id: "planStart",
+ visible:
+ this.planProjectedStart && !this.planActive && !this.chargingPlanDisabled,
+ content: this.planProjectedStart
+ ? this.fmtAbsoluteDate(new Date(this.planProjectedStart))
+ : "",
+ tooltipContent: t("targetChargePlanned", {
+ duration: this.planProjectedStart
+ ? this.fmtDurationToTime(new Date(this.planProjectedStart))
+ : "",
+ }),
+ iconComponent: PlanStartIcon,
+ testId: "vehicle-status-planstart",
+ clickable: true,
+ clickHandler: () => this.openPlanModal(),
+ },
+ ];
+
+ return items.filter((item) => item.visible);
},
},
mounted() {
- this.updatePlanStartTooltip();
- this.updatePlanActiveTooltip();
- this.updateMinSocTooltip();
- this.updatePhaseTooltip();
- this.updatePvTooltip();
- this.updateVehicleClimaterTooltip();
- this.updateVehicleWelcomeTooltip();
- this.updateSmartCostTooltip();
- this.updateVehicleLimitTooltip();
- this.updateTempLimitTooltip();
- this.updateAwaitingAuthorizationTooltip();
- this.updateDisconnectRequiredTooltip();
- this.updateDurations();
-
- this.interval = setInterval(this.updateDurations, 1000 * 60);
- this.updateBatteryBoostTooltip();
+ this.interval = setInterval(() => {
+ // Force reactivity update for time-dependent content
+ this.$forceUpdate();
+ }, 1000 * 60);
},
beforeUnmount() {
if (this.interval) {
@@ -599,167 +403,38 @@ export default defineComponent({
}
},
methods: {
- updateDurations() {
- if (this.planProjectedStart) {
- this.planProjectedStartDuration = this.fmtDurationToTime(
- new Date(this.planProjectedStart)
- );
- }
- if (this.planProjectedEnd) {
- this.planProjectedEndDuration = this.fmtDurationToTime(
- new Date(this.planProjectedEnd)
- );
- }
- if (this.smartCostNextStart) {
- this.smartCostNextStartDuration = this.fmtDurationToTime(
- new Date(this.smartCostNextStart)
- );
- }
- },
openLoadpointSettings() {
this.$emit("open-loadpoint-settings");
},
openMinSocSettings() {
- this.minSocTooltip?.hide();
this.$emit("open-minsoc-settings");
},
- planStartClicked() {
- this.planStartTooltip?.hide();
+ openPlanModal() {
this.$emit("open-plan-modal");
},
- planActiveClicked() {
- this.planActiveTooltip?.hide();
- this.$emit("open-plan-modal");
- },
- vehicleLimitClicked() {
- if (this.vehicleLimitWarning) {
- this.vehicleLimitTooltip?.hide();
- this.$emit("open-plan-modal");
+ getSmartCostTooltip() {
+ const prefix = `main.vehicleStatus.${this.smartCostPrice ? "cheap" : "clean"}`;
+ if (this.smartCostNowVisible) {
+ return this.$t(`${prefix}EnergyCharging`);
}
- },
- smartCostClicked() {
- this.openLoadpointSettings();
- this.smartCostTooltip?.hide();
- },
- batteryBoostClicked() {
- this.batteryBoostTooltip?.hide();
- this.openLoadpointSettings();
- },
- updatePvTooltip() {
- this.pvTooltip = this.updateTooltip(
- this.pvTooltip,
- this.pvTimerContent,
- this.$refs["pvTimer"]
- );
- },
- updatePhaseTooltip() {
- this.phaseTooltip = this.updateTooltip(
- this.phaseTooltip,
- this.phaseTimerContent,
- this.$refs["phaseTimer"]
- );
- },
- updatePlanStartTooltip() {
- this.planStartTooltip = this.updateTooltip(
- this.planStartTooltip,
- this.planStartTooltipContent,
- this.$refs["planStart"],
- true
- );
- },
- updatePlanActiveTooltip() {
- this.planActiveTooltip = this.updateTooltip(
- this.planActiveTooltip,
- this.planActiveTooltipContent,
- this.$refs["planActive"],
- true
- );
- },
- updateMinSocTooltip() {
- this.minSocTooltip = this.updateTooltip(
- this.minSocTooltip,
- this.minSocTooltipContent,
- this.$refs["minSoc"],
- true
- );
- },
- updateVehicleClimaterTooltip() {
- this.vehicleClimaterTooltip = this.updateTooltip(
- this.vehicleClimaterTooltip,
- this.vehicleClimaterTooltipContent,
- this.$refs["vehicleClimater"]
- );
- },
- updateBatteryBoostTooltip() {
- this.batteryBoostTooltip = this.updateTooltip(
- this.batteryBoostTooltip,
- this.batteryBoostTooltipContent,
- this.$refs["batteryBoost"]
- );
- },
- updateVehicleWelcomeTooltip() {
- this.vehicleWelcomeTooltip = this.updateTooltip(
- this.vehicleWelcomeTooltip,
- this.vehicleWelcomeTooltipContent,
- this.$refs["vehicleWelcome"]
- );
- },
- updateSmartCostTooltip() {
- this.smartCostTooltip = this.updateTooltip(
- this.smartCostTooltip,
- this.smartCostTooltipContent,
- this.$refs["smartCost"],
- true
- );
- },
- updateVehicleLimitTooltip() {
- this.vehicleLimitTooltip = this.updateTooltip(
- this.vehicleLimitTooltip,
- this.vehicleLimitTooltipContent,
- this.$refs["vehicleLimit"],
- true
- );
- },
- updateTempLimitTooltip() {
- this.tempLimitTooltip = this.updateTooltip(
- this.tempLimitTooltip,
- this.tempLimitTooltipContent,
- this.$refs["tempLimit"]
- );
- },
- updateAwaitingAuthorizationTooltip() {
- this.awaitingAuthorizationTooltip = this.updateTooltip(
- this.awaitingAuthorizationTooltip,
- this.awaitingAuthorizationTooltipContent,
- this.$refs["awaitingAuthorization"]
- );
- },
- updateDisconnectRequiredTooltip() {
- this.disconnectRequiredTooltip = this.updateTooltip(
- this.disconnectRequiredTooltip,
- this.disconnectRequiredTooltipContent,
- this.$refs["disconnectRequired"]
- );
- },
- updateTooltip(
- instance: Tooltip | null,
- content: string,
- ref: HTMLElement | undefined,
- hoverOnly = false
- ): Tooltip | null {
- if (!content || !ref) {
- if (instance) {
- instance.dispose();
- }
- return null;
+ if (this.smartCostNextStart) {
+ return this.$t(`${prefix}EnergyNextStart`, {
+ duration: this.fmtDurationToTime(new Date(this.smartCostNextStart)),
+ });
}
- let newInstance = instance;
- if (!newInstance) {
- const trigger = hoverOnly ? "hover" : "hover focus";
- newInstance = new Tooltip(ref, { title: " ", trigger });
+ return this.$t(`${prefix}EnergySet`);
+ },
+ getSmartFeedInPriorityTooltip() {
+ const prefix = "main.vehicleStatus.feedinPriority";
+ if (this.smartFeedInPriorityActive) {
+ return this.$t(`${prefix}Pausing`);
}
- newInstance.setContent({ ".tooltip-inner": content });
- return newInstance;
+ if (this.smartFeedInPriorityNextStart) {
+ return this.$t(`${prefix}NextStart`, {
+ duration: this.fmtDurationToTime(new Date(this.smartFeedInPriorityNextStart)),
+ });
+ }
+ return "";
},
},
});
@@ -769,26 +444,7 @@ export default defineComponent({
.charger-status {
padding-top: 2px;
}
-.entry {
- display: flex;
- align-items: center;
- flex-wrap: nowrap;
- text-wrap: nowrap;
- border: none;
- color: inherit;
- background: none;
- padding: 0;
- gap: 0.5rem;
- transition:
- color var(--evcc-transition-medium) linear,
- opacity var(--evcc-transition-medium) linear;
-}
-.phaseUp {
- transform: rotate(90deg);
-}
-.phaseDown {
- transform: rotate(-90deg);
-}
+
.tabular {
font-variant-numeric: tabular-nums;
}
diff --git a/assets/js/components/Vehicles/StatusItem.vue b/assets/js/components/Vehicles/StatusItem.vue
new file mode 100644
index 000000000..bd059dbd2
--- /dev/null
+++ b/assets/js/components/Vehicles/StatusItem.vue
@@ -0,0 +1,107 @@
+
+
+
+
+
+
+ {{ content }}
+
+
+