diff --git a/assets/js/components/Loadpoints/SessionInfo.vue b/assets/js/components/Loadpoints/SessionInfo.vue index 4320ed45d..4d06d806a 100644 --- a/assets/js/components/Loadpoints/SessionInfo.vue +++ b/assets/js/components/Loadpoints/SessionInfo.vue @@ -50,6 +50,7 @@ export default defineComponent({ sessionSolarPercentage: { type: Number, default: 0 }, chargeRemainingDurationInterpolated: { type: Number, default: 0 }, chargeDurationInterpolated: Number, + sessionEnergy: { type: Number, default: 0 }, tariffCo2: Number, tariffGrid: Number, }, @@ -101,6 +102,11 @@ export default defineComponent({ valueSm: this.fmtCo2Short(this.sessionCo2PerKWh), available: this.tariffCo2 !== undefined, }, + { + key: "emission" as const, + value: this.emissionFormatted, + available: this.tariffCo2 !== undefined, + }, ]; // only show options that are available return result.filter(({ available }) => available === undefined || available); @@ -142,6 +148,10 @@ export default defineComponent({ solarFormatted() { return this.fmtPercentage(this.sessionSolarPercentage, 1); }, + emissionFormatted() { + const kWh = this.sessionEnergy / 1000; + return this.fmtGrams(this.sessionCo2PerKWh * kWh); + }, priceFormatted() { return `${this.fmtMoney(this.sessionPrice, this.currency)} ${this.fmtCurrencySymbol( this.currency diff --git a/assets/js/components/Sessions/SessionDetailsModal.vue b/assets/js/components/Sessions/SessionDetailsModal.vue index 343f424b9..59b99efad 100644 --- a/assets/js/components/Sessions/SessionDetailsModal.vue +++ b/assets/js/components/Sessions/SessionDetailsModal.vue @@ -105,10 +105,11 @@ - + {{ $t("session.co2") }} + {{ totalCo2Formatted }}
{{ fmtCo2Medium(session.co2PerKWh) }} @@ -193,6 +194,10 @@ export default defineComponent({ chargedEnergy() { return this.session.chargedEnergy * 1e3; }, + totalCo2Formatted(): string { + const grams = (this.session.co2PerKWh ?? 0) * (this.session.chargedEnergy ?? 0); + return this.fmtGrams(grams); + }, avgPower() { const hours = this.session.chargeDuration / 1e9 / 3600; return this.chargedEnergy / hours; diff --git a/assets/js/types/evcc.ts b/assets/js/types/evcc.ts index 7963caea8..d43c484e8 100644 --- a/assets/js/types/evcc.ts +++ b/assets/js/types/evcc.ts @@ -390,6 +390,7 @@ export type SessionInfoKey = | "solar" | "avgPrice" | "price" + | "emission" | "co2"; export interface SponsorStatus { diff --git a/i18n/de.json b/i18n/de.json index 8b10452eb..6481b621f 100644 --- a/i18n/de.json +++ b/i18n/de.json @@ -1022,6 +1022,7 @@ "charged": "Geladen", "co2": "⌀ CO₂", "duration": "Ladedauer", + "emission": "Emission", "fallbackName": "Ladepunkt", "finished": "Ladeende", "power": "Leistung", diff --git a/i18n/en.json b/i18n/en.json index 9fb797246..748dcfd04 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -1022,6 +1022,7 @@ "charged": "Charged", "co2": "⌀ CO₂", "duration": "Duration", + "emission": "Emission", "fallbackName": "Charging point", "finished": "Finish time", "power": "Power", diff --git a/tests/sessions.spec.ts b/tests/sessions.spec.ts index fd31f481c..0206e268d 100644 --- a/tests/sessions.spec.ts +++ b/tests/sessions.spec.ts @@ -343,6 +343,7 @@ test.describe("session details", async () => { await expect(modal.getByTestId("session-details-energy")).toContainText("1:00"); await expect(modal.getByTestId("session-details-solar")).toContainText("100.0% (10.0 kWh)"); await expect(modal.getByTestId("session-details-price")).toContainText("2.00 € 20.0 ct/kWh"); + await expect(modal.getByTestId("session-details-co2")).toContainText("3 kg"); await expect(modal.getByTestId("session-details-co2")).toContainText("300 g/kWh"); });