From 7b5103df44deda0e215c9805d7d706aa293a05d8 Mon Sep 17 00:00:00 2001 From: Michael Geers Date: Wed, 25 Mar 2026 20:22:31 +0100 Subject: [PATCH] UI: New Navigation, Battery & Forecast Page (#27753) --- assets/css/app.css | 13 +- assets/css/breakpoints.css | 7 + assets/js/components/AboutModal.stories.ts | 106 ++++ assets/js/components/AboutModal.vue | 249 +++++++++ .../Battery/BatterySettingsModal.vue | 500 +---------------- .../Battery/BatteryUsageSettings.vue | 511 ++++++++++++++++++ assets/js/components/BottomTabs/Bar.vue | 116 ++++ assets/js/components/BottomTabs/Item.vue | 130 +++++ assets/js/components/BottomTabs/MoreItem.vue | 86 +++ assets/js/components/BottomTabs/MoreMenu.vue | 226 ++++++++ assets/js/components/Footer/Footer.vue | 2 +- .../js/components/Footer/OfflineIndicator.vue | 35 +- .../js/components/Footer/Version.stories.ts | 30 +- assets/js/components/Footer/Version.vue | 115 +--- assets/js/components/Forecast/Co2Chart.vue | 128 +++++ assets/js/components/Forecast/PriceChart.vue | 174 ++++++ assets/js/components/Forecast/SolarChart.vue | 139 +++++ assets/js/components/Forecast/chartMixin.ts | 67 +++ assets/js/components/Forecast/echarts.ts | 202 +++++++ assets/js/components/Helper/GenericModal.vue | 4 +- .../js/components/Loadpoints/Loadpoints.vue | 6 +- .../components/MaterialIcon/ForecastGraph.vue | 18 + assets/js/components/MaterialIcon/More.vue | 18 + .../js/components/MaterialIcon/Sessions.vue | 18 + assets/js/components/Savings/Savings.vue | 309 +++++++---- assets/js/components/Savings/types.d.ts | 1 - assets/js/components/Site/Site.vue | 24 +- .../js/components/Tariff/SmartTariffBase.vue | 2 +- assets/js/components/Tariff/TariffChart.vue | 6 +- assets/js/components/Top/Header.vue | 34 +- .../js/components/Top/TopNavigationArea.vue | 27 +- assets/js/router.ts | 29 +- assets/js/settings.ts | 8 + assets/js/types/evcc.ts | 20 + assets/js/utils/haptic.ts | 3 + assets/js/utils/version.ts | 23 + assets/js/views/App.vue | 26 +- assets/js/views/Battery.vue | 80 +++ assets/js/views/Config.vue | 2 +- assets/js/views/Energy.vue | 106 ---- assets/js/views/Forecast.vue | 323 +++++++++++ i18n/de.json | 42 +- i18n/en.json | 51 +- package-lock.json | 32 ++ package.json | 3 +- server/updater/github.go | 2 +- tests/bottom-nav.spec.ts | 104 ++++ tests/statistics.spec.ts | 52 +- tests/utils.ts | 7 +- 49 files changed, 3327 insertions(+), 889 deletions(-) create mode 100644 assets/js/components/AboutModal.stories.ts create mode 100644 assets/js/components/AboutModal.vue create mode 100644 assets/js/components/Battery/BatteryUsageSettings.vue create mode 100644 assets/js/components/BottomTabs/Bar.vue create mode 100644 assets/js/components/BottomTabs/Item.vue create mode 100644 assets/js/components/BottomTabs/MoreItem.vue create mode 100644 assets/js/components/BottomTabs/MoreMenu.vue create mode 100644 assets/js/components/Forecast/Co2Chart.vue create mode 100644 assets/js/components/Forecast/PriceChart.vue create mode 100644 assets/js/components/Forecast/SolarChart.vue create mode 100644 assets/js/components/Forecast/chartMixin.ts create mode 100644 assets/js/components/Forecast/echarts.ts create mode 100644 assets/js/components/MaterialIcon/ForecastGraph.vue create mode 100644 assets/js/components/MaterialIcon/More.vue create mode 100644 assets/js/components/MaterialIcon/Sessions.vue create mode 100644 assets/js/utils/haptic.ts create mode 100644 assets/js/utils/version.ts create mode 100644 assets/js/views/Battery.vue delete mode 100644 assets/js/views/Energy.vue create mode 100644 assets/js/views/Forecast.vue create mode 100644 tests/bottom-nav.spec.ts diff --git a/assets/css/app.css b/assets/css/app.css index 1507ccb13..142a5ab4a 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -91,6 +91,9 @@ --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px); --safe-area-inset-left: env(safe-area-inset-left, 0px); --safe-area-inset-right: env(safe-area-inset-right, 0px); + + --tab-bar-height: 3rem; + --tab-bar-background: var(--evcc-background); } :root.dark { @@ -108,6 +111,7 @@ --bs-border-color-translucent: rgba(255, 255, 255, 0.175); --bs-code-color: var(--evcc-dark-green); --evcc-backdrop: #000000aa; /* black + transparent */ + --tab-bar-background: var(--evcc-box); color-scheme: dark; } @@ -362,7 +366,7 @@ a:hover { background-color: var(--bs-gray-dark) !important; } -@media screen and (min-width: 400px) and (max-width: 574px) { +@media screen and (--xs-to-sm) { .d-xs-none { display: none !important; } @@ -478,6 +482,13 @@ small { filter: invert(1); } +.circle-badge { + display: inline-block; + width: 12px; + height: 12px; + border-radius: 50%; +} + .dropdown-menu { border: none; border-radius: 10px; diff --git a/assets/css/breakpoints.css b/assets/css/breakpoints.css index 5081a9385..80ba53869 100644 --- a/assets/css/breakpoints.css +++ b/assets/css/breakpoints.css @@ -1,9 +1,16 @@ /* Bootstrap Breakpoints as Custom Media Queries */ +@custom-media --xs-and-up (min-width: 400px); @custom-media --sm-and-up (min-width: 576px); @custom-media --md-and-up (min-width: 768px); @custom-media --lg-and-up (min-width: 992px); @custom-media --xl-and-up (min-width: 1200px); @custom-media --xxl-and-up (min-width: 1400px); +/* Range Breakpoints */ +@custom-media --xs-to-sm (min-width: 400px) and (max-width: 575.98px); +@custom-media --sm-to-md (min-width: 576px) and (max-width: 767.98px); +@custom-media --sm-to-lg (min-width: 576px) and (max-width: 991.98px); +@custom-media --md-to-lg (min-width: 768px) and (max-width: 991.98px); + @custom-media --light-mode (prefers-color-scheme: light); @custom-media --dark-mode (prefers-color-scheme: dark); diff --git a/assets/js/components/AboutModal.stories.ts b/assets/js/components/AboutModal.stories.ts new file mode 100644 index 000000000..3a9eac6ee --- /dev/null +++ b/assets/js/components/AboutModal.stories.ts @@ -0,0 +1,106 @@ +import AboutModal from "./AboutModal.vue"; +import type { Meta, StoryFn } from "@storybook/vue3"; + +const releaseNotes = ` +

v0.303.1

+

Changelog

+

Other Changes ☀️

+ +

Bug Fixes 🐞

+ +

v0.303.0

+

Changelog

+

Breaking Changes 🚨

+ +

New Features 💫

+ +

Bug Fixes 🐞

+ +`; + +export default { + title: "AboutModal", + component: AboutModal, + argTypes: { + installed: { control: "text" }, + commit: { control: "text" }, + availableVersion: { control: "text" }, + releaseNotes: { control: "text" }, + hasUpdater: { control: "boolean" }, + uploadMessage: { control: "text" }, + uploadProgress: { control: "number" }, + }, +} as Meta; + +const Template: StoryFn = (args) => ({ + components: { AboutModal }, + setup() { + return { args }; + }, + template: '', + mounted() { + const el = document.getElementById("aboutModal"); + if (el) { + import("bootstrap/js/dist/modal").then(({ default: Modal }) => { + Modal.getOrCreateInstance(el).show(); + }); + } + }, +}); + +export const Stable = Template.bind({}); +Stable.args = { + installed: "0.303.1", + availableVersion: "0.303.1", +}; + +export const StableUpdateAvailable = Template.bind({}); +StableUpdateAvailable.args = { + installed: "0.303.0", + availableVersion: "0.303.1", + releaseNotes, +}; + +export const StableUpdateWithUpdater = Template.bind({}); +StableUpdateWithUpdater.args = { + installed: "0.303.0", + availableVersion: "0.303.1", + releaseNotes, + hasUpdater: true, +}; + +export const Nightly = Template.bind({}); +Nightly.args = { + installed: "0.303.1", + commit: "5ce7be4a9f3b2c1d", + availableVersion: "0.303.1", +}; + +export const DevBuild = Template.bind({}); +DevBuild.args = { + installed: "0.0.0", +}; diff --git a/assets/js/components/AboutModal.vue b/assets/js/components/AboutModal.vue new file mode 100644 index 000000000..f981aab49 --- /dev/null +++ b/assets/js/components/AboutModal.vue @@ -0,0 +1,249 @@ + + + + + diff --git a/assets/js/components/Battery/BatterySettingsModal.vue b/assets/js/components/Battery/BatterySettingsModal.vue index 181110c52..e62206fa5 100644 --- a/assets/js/components/Battery/BatterySettingsModal.vue +++ b/assets/js/components/Battery/BatterySettingsModal.vue @@ -30,217 +30,14 @@ -
-

- {{ $t("batterySettings.batteryLevel") }}: - {{ fmtSoc(batterySoc) }} - - {{ line }} - -

-
-
- - - {{ fmtSoc(selectedBufferSoc) }} - - - - - - {{ fmtSoc(selectedPrioritySoc) }} - - -
-
-
- -
-
- -
-
- -
-
-
-
-
-
-
-
-
-

- - - {{ $t("batterySettings.legendTopName") }} - - - - - - {{ $t("batterySettings.legendTopAutostart") }} - - - {{ selectedBufferStartName }} - - - - -

-

- - - {{ $t("batterySettings.legendMiddleName") }} - - - - -

-

- - - {{ $t("batterySettings.legendBottomName") }} - - - - -

-
- -
- -
-
-
-
+ - - diff --git a/assets/js/components/Battery/BatteryUsageSettings.vue b/assets/js/components/Battery/BatteryUsageSettings.vue new file mode 100644 index 000000000..234aed40e --- /dev/null +++ b/assets/js/components/Battery/BatteryUsageSettings.vue @@ -0,0 +1,511 @@ + + + + + diff --git a/assets/js/components/BottomTabs/Bar.vue b/assets/js/components/BottomTabs/Bar.vue new file mode 100644 index 000000000..b7aba7cb8 --- /dev/null +++ b/assets/js/components/BottomTabs/Bar.vue @@ -0,0 +1,116 @@ + + + + + diff --git a/assets/js/components/BottomTabs/Item.vue b/assets/js/components/BottomTabs/Item.vue new file mode 100644 index 000000000..71053ab1c --- /dev/null +++ b/assets/js/components/BottomTabs/Item.vue @@ -0,0 +1,130 @@ + + + + + diff --git a/assets/js/components/BottomTabs/MoreItem.vue b/assets/js/components/BottomTabs/MoreItem.vue new file mode 100644 index 000000000..2f93dac30 --- /dev/null +++ b/assets/js/components/BottomTabs/MoreItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/assets/js/components/BottomTabs/MoreMenu.vue b/assets/js/components/BottomTabs/MoreMenu.vue new file mode 100644 index 000000000..ecb26c80d --- /dev/null +++ b/assets/js/components/BottomTabs/MoreMenu.vue @@ -0,0 +1,226 @@ + + + + + diff --git a/assets/js/components/Footer/Footer.vue b/assets/js/components/Footer/Footer.vue index 4011e49c5..aecfd2f56 100644 --- a/assets/js/components/Footer/Footer.vue +++ b/assets/js/components/Footer/Footer.vue @@ -1,7 +1,7 @@ + + diff --git a/assets/js/components/Forecast/PriceChart.vue b/assets/js/components/Forecast/PriceChart.vue new file mode 100644 index 000000000..71e54fb0d --- /dev/null +++ b/assets/js/components/Forecast/PriceChart.vue @@ -0,0 +1,174 @@ + + + + + diff --git a/assets/js/components/Forecast/SolarChart.vue b/assets/js/components/Forecast/SolarChart.vue new file mode 100644 index 000000000..0248fe551 --- /dev/null +++ b/assets/js/components/Forecast/SolarChart.vue @@ -0,0 +1,139 @@ + + + + + diff --git a/assets/js/components/Forecast/chartMixin.ts b/assets/js/components/Forecast/chartMixin.ts new file mode 100644 index 000000000..4df452935 --- /dev/null +++ b/assets/js/components/Forecast/chartMixin.ts @@ -0,0 +1,67 @@ +import { defineComponent, markRaw } from "vue"; +import { echarts } from "./echarts"; + +// chartOption is provided by each consuming component's computed +type WithChartOption = { chartOption: Record }; + +export default defineComponent({ + props: { + chartWidth: { type: Number, required: true }, + endDate: { type: Date, required: true }, + scrollLeft: { type: Number, default: 0 }, + }, + emits: ["scroll"], + data(): { + chart: echarts.ECharts | null; + startDate: Date; + tooltipVisible: boolean; + } { + return { + chart: null, + tooltipVisible: false, + startDate: new Date(), + }; + }, + watch: { + chartOption: { + handler() { + this.chart?.setOption((this as unknown as WithChartOption).chartOption); + }, + deep: true, + }, + scrollLeft(val: number) { + const el = this.$refs["scrollEl"] as HTMLElement; + if (el && Math.abs(el.scrollLeft - val) > 1) { + el.scrollLeft = val; + } + }, + }, + mounted() { + this.updateStartDate(); + this.initChart(); + }, + beforeUnmount() { + this.chart?.dispose(); + }, + methods: { + updateStartDate() { + const now = new Date(); + now.setMinutes(0, 0, 0); + this.startDate = now; + }, + onScroll(e: Event) { + this.$emit("scroll", (e.target as HTMLElement).scrollLeft); + }, + initChart() { + const el = this.$refs["chartEl"] as HTMLElement; + this.chart = markRaw(echarts.init(el)); + this.chart.setOption((this as unknown as WithChartOption).chartOption); + this.chart.on("showTip", () => { + this.tooltipVisible = true; + }); + this.chart.on("hideTip", () => { + this.tooltipVisible = false; + }); + }, + }, +}); diff --git a/assets/js/components/Forecast/echarts.ts b/assets/js/components/Forecast/echarts.ts new file mode 100644 index 000000000..d8f61a122 --- /dev/null +++ b/assets/js/components/Forecast/echarts.ts @@ -0,0 +1,202 @@ +import * as echarts from "echarts/core"; +import colors from "@/colors"; +import type { ForecastSlot } from "./types"; +import { BarChart, LineChart } from "echarts/charts"; +import { + GridComponent, + TooltipComponent, + MarkPointComponent, + AxisPointerComponent, +} from "echarts/components"; +import { SVGRenderer } from "echarts/renderers"; + +echarts.use([ + BarChart, + LineChart, + GridComponent, + TooltipComponent, + AxisPointerComponent, + MarkPointComponent, + SVGRenderer, +]); + +export const FONT_FAMILY = "Montserrat, sans-serif"; + +export function markPointLabel( + color: string, + data: { coord: [string, number]; value: string; label?: { offset?: [number, number] } }[], + startDate?: Date, + endDate?: Date +) { + // threshold: points within the first 5% of the time range get shifted right + const threshold = + startDate && endDate + ? startDate.getTime() + (endDate.getTime() - startDate.getTime()) * 0.05 + : 0; + + const adjustedData = data.map((d) => { + const ts = new Date(d.coord[0]).getTime(); + if (threshold && ts < threshold) { + const baseOffset = d.label?.offset ?? [0, -2]; + return { + ...d, + label: { + ...d.label, + offset: [baseOffset[0] + 30, baseOffset[1]] as [number, number], + }, + }; + } + return d; + }); + + return { + animation: true, + clip: false, + symbol: "rect", + symbolSize: 1, + label: { + show: true, + position: "top", + fontFamily: FONT_FAMILY, + fontSize: 14, + fontWeight: "bold" as const, + color: colors.background, + backgroundColor: color, + borderRadius: 4, + padding: [5, 10], + offset: [0, -2], + formatter: (p: { data: { value: string } }) => p.data.value, + }, + data: adjustedData, + }; +} + +export function tooltipStyle( + color: string, + getChart?: () => { convertToPixel: echarts.ECharts["convertToPixel"] } | null +) { + return { + backgroundColor: color, + borderColor: color, + borderWidth: 0, + padding: [5, 10], + extraCssText: "box-shadow: none; border-radius: 4px; text-align: center;", + position( + point: [number, number], + params: { value: [string, number] }[] | { value: [string, number] }, + el: HTMLElement + ): [number, number] { + const w = el?.offsetWidth || 0; + const h = el?.offsetHeight || 0; + const margin = 8; + const arr = Array.isArray(params) ? params : [params]; + const p = arr[0]; + const chart = getChart?.(); + if (chart && p?.value) { + const pixelY = chart.convertToPixel({ seriesIndex: 0 }, p.value)?.[1]; + if (pixelY != null) { + return [point[0] - w / 2, pixelY - h - margin]; + } + } + return [point[0] - w / 2, point[1] - h - margin]; + }, + textStyle: { + fontFamily: FONT_FAMILY, + fontSize: 14, + fontWeight: "bold" as const, + color: colors.background, + }, + }; +} + +export function forecastGrid() { + return { top: 36, right: 16, bottom: 4, left: 48, borderWidth: 0 }; +} + +export function forecastXAxes(startDate: Date, endDate: Date, weekdayShort: (d: Date) => string) { + return [ + { + type: "time", + min: startDate, + max: endDate, + minInterval: 3600 * 1000, + maxInterval: 3600 * 1000, + axisLabel: { + color: colors.muted, + fontSize: 14, + lineHeight: Math.round(14 * 1.1), + margin: 4, + formatter: (value: number) => { + const date = new Date(value); + const h = date.getHours(); + if (h % 2 !== 0) return ""; + if (h === 0) return `${h}\n${weekdayShort(date)}`; + return `${h}`; + }, + }, + splitLine: { show: false }, + axisLine: { show: false }, + axisTick: { show: false }, + }, + { + type: "time", + position: "bottom", + min: startDate, + max: endDate, + minInterval: 24 * 3600 * 1000, + maxInterval: 24 * 3600 * 1000, + axisLabel: { show: false }, + axisLine: { show: false }, + axisTick: { show: false }, + splitLine: { + show: true, + showMinLine: false, + showMaxLine: false, + lineStyle: { color: colors.border || "", type: "dashed" }, + }, + }, + ]; +} + +export function forecastYAxis(overrides: Record = {}) { + const { axisLabel, ...rest } = overrides; + return { + type: "value", + min: 0, + axisLine: { show: false }, + axisTick: { show: false }, + splitLine: { + showMinLine: false, + showMaxLine: false, + lineStyle: { color: colors.border || "" }, + }, + axisLabel: { + fontSize: 14, + ...(axisLabel as Record), + }, + ...rest, + }; +} + +export function clampStart(ts: string, startDate: Date): string { + return new Date(ts) < startDate ? startDate.toISOString() : ts; +} + +export function filterForecastSlots( + slots: ForecastSlot[], + startDate: Date, + endDate: Date +): ForecastSlot[] { + if (!Array.isArray(slots)) return []; + return slots.filter((s) => new Date(s.end) >= startDate && new Date(s.start) <= endDate); +} + +export function minSlotIndex(slots: ForecastSlot[]): number { + return slots.reduce((min, s, i) => (s.value < (slots[min]?.value || Infinity) ? i : min), 0); +} + +export function maxSlotIndex(slots: ForecastSlot[]): number { + return slots.reduce((max, s, i) => (s.value > (slots[max]?.value || 0) ? i : max), 0); +} + +export { echarts }; diff --git a/assets/js/components/Helper/GenericModal.vue b/assets/js/components/Helper/GenericModal.vue index 2f55ecb32..381fc5319 100644 --- a/assets/js/components/Helper/GenericModal.vue +++ b/assets/js/components/Helper/GenericModal.vue @@ -13,9 +13,9 @@ >
-
+
- {{ title }} + {{ title }}
diff --git a/assets/js/components/Loadpoints/Loadpoints.vue b/assets/js/components/Loadpoints/Loadpoints.vue index d49e61b92..52153d4df 100644 --- a/assets/js/components/Loadpoints/Loadpoints.vue +++ b/assets/js/components/Loadpoints/Loadpoints.vue @@ -238,7 +238,7 @@ export default defineComponent({ } /* show truncated tiles on breakpoint sm,md */ -@media (min-width: 576px) and (max-width: 991.98px) { +@media (--sm-to-lg) { .container--loadpoint { max-width: none; } @@ -259,14 +259,14 @@ export default defineComponent({ } /* breakpoint sm */ -@media (min-width: 576px) and (max-width: 767.98px) { +@media (--sm-to-md) { .carousel { --slide-width: 540px; } } /* breakpoint md */ -@media (min-width: 768px) and (max-width: 991.98px) { +@media (--md-to-lg) { .carousel { --slide-width: 720px; } diff --git a/assets/js/components/MaterialIcon/ForecastGraph.vue b/assets/js/components/MaterialIcon/ForecastGraph.vue new file mode 100644 index 000000000..afc474643 --- /dev/null +++ b/assets/js/components/MaterialIcon/ForecastGraph.vue @@ -0,0 +1,18 @@ + + + diff --git a/assets/js/components/MaterialIcon/More.vue b/assets/js/components/MaterialIcon/More.vue new file mode 100644 index 000000000..2fed1dfce --- /dev/null +++ b/assets/js/components/MaterialIcon/More.vue @@ -0,0 +1,18 @@ + + + diff --git a/assets/js/components/MaterialIcon/Sessions.vue b/assets/js/components/MaterialIcon/Sessions.vue new file mode 100644 index 000000000..7007ad2e8 --- /dev/null +++ b/assets/js/components/MaterialIcon/Sessions.vue @@ -0,0 +1,18 @@ + + + diff --git a/assets/js/components/Savings/Savings.vue b/assets/js/components/Savings/Savings.vue index 852775701..ff8c4e0d1 100644 --- a/assets/js/components/Savings/Savings.vue +++ b/assets/js/components/Savings/Savings.vue @@ -1,17 +1,26 @@ - - - - diff --git a/assets/js/views/Forecast.vue b/assets/js/views/Forecast.vue new file mode 100644 index 000000000..4f1f82eec --- /dev/null +++ b/assets/js/views/Forecast.vue @@ -0,0 +1,323 @@ + + + + + diff --git a/i18n/de.json b/i18n/de.json index dea30cad9..84f51c04b 100644 --- a/i18n/de.json +++ b/i18n/de.json @@ -40,6 +40,7 @@ "legendTopName": "Batterieunterstütztes Fahrzeugladen", "legendTopSubline": "wenn Hausbatterie über {soc} ist.", "modalTitle": "Hausbatterie", + "noBattery": "Keine Batterien konfiguriert.", "usageTab": "Batterienutzung" }, "config": { @@ -846,6 +847,15 @@ "configurePriceCo2": "Lerne Preis und CO₂-Emissionen zu konfigurieren.", "footerLong": "{percent} Sonnenenergie", "footerShort": "{percent} Sonne", + "indicator": { + "co2": "CO₂-Emissionen", + "co2saved": "CO₂ eingespart", + "none": "keine", + "price": "Energiepreis", + "savings": "Ersparnis", + "solar": "Solarenergie" + }, + "indicatorLabel": "Header-Info", "modalTitle": "Auswertung Ladeenergie", "moneySaved": "{value} gespart", "percentGrid": "{grid} kWh Netz", @@ -857,10 +867,11 @@ "thisYear": "dieses Jahr", "total": "gesamt" }, - "periodLabel": "Zeitraum:", + "periodLabel": "Zeitraum", "priceTitle": "Energiepreis", "referenceGrid": "Netz", - "referenceLabel": "Referenzdaten:", + "referenceLabel": "Referenzdaten", + "sessionInfo": "Basierend auf abgeschlossenen Ladevorgängen.", "tabTitle": "Meine Daten" }, "sponsor": { @@ -886,15 +897,25 @@ }, "version": { "availableLong": "neue Version verfügbar", + "community": "evcc Community", + "labelRelease": "Release", + "labelVersion": "Version", + "labelWebsite": "Website", + "latestVersion": "aktuelle Version", + "madeByCommunity": "Entwickelt von der {0}.", "modalCancel": "Abbrechen", "modalDownload": "Download", "modalInstalledVersion": "Installierte Version", + "modalNextRelease": "Was ist neu im nächsten Release", "modalNoReleaseNotes": "Keine Versionshinweise verfügbar. Mehr Informationen zur neuen Version:", "modalTitle": "Neue Version verfügbar", "modalUpdate": "Installieren", "modalUpdateNow": "Jetzt installieren", "modalUpdateStarted": "Starte die neue Version von evcc…", - "modalUpdateStatusStart": "Installation gestartet:" + "modalUpdateStatusStart": "Installation gestartet:", + "modalViewOnGitHub": "Auf GitHub ansehen", + "openSource": "Open Source", + "poweredByOpenSource": "Powered by {0}." } }, "forecast": { @@ -904,6 +925,13 @@ "lowestHour": "Sauberste Stunde", "range": "Bereich" }, + "empty": { + "co2": "Erfahre, wann Netzstrom in deiner Region sauber ist. Ladepläne werden auf niedrige Emissionen optimiert und CO₂-Einsparungen berechnet.", + "price": "Dynamischen Stromtarif konfigurieren, um Ladepläne automatisch zu optimieren und Einsparungen zu berechnen.", + "setup": "Tarife und Vorhersagen einrichten", + "solar": "Erwartete Solarproduktion für heute und die nächsten Tage. Wird in Zukunft auch für die automatische Ladeoptimierung verwendet.", + "title": "Tarife & Vorhersagen" + }, "modalTitle": "Vorhersage", "price": { "average": "Durchschnitt", @@ -1476,5 +1504,13 @@ "lineErrorLink": "Zeile {0}", "restartButton": "Neu starten", "title": "Fehler beim Starten" + }, + "tabBar": { + "battery": "Batterie", + "charge": "Laden", + "comingSoon": "Diese Seite ist in Arbeit.", + "forecast": "Vorhersage", + "more": "Mehr", + "sessions": "Ladungen" } } diff --git a/i18n/en.json b/i18n/en.json index f0be3a337..c1086e9bf 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -40,6 +40,7 @@ "legendTopName": "Battery-supported vehicle charging", "legendTopSubline": "when home battery is above {soc}.", "modalTitle": "Home Battery", + "noBattery": "No batteries configured.", "usageTab": "Battery usage" }, "config": { @@ -846,6 +847,15 @@ "configurePriceCo2": "Learn how to configure price and CO₂ data.", "footerLong": "{percent} solar energy", "footerShort": "{percent} solar", + "indicator": { + "co2": "CO₂ emissions", + "co2saved": "CO₂ saved", + "none": "none", + "price": "energy price", + "savings": "savings", + "solar": "solar energy" + }, + "indicatorLabel": "Header info", "modalTitle": "Charge Energy Overview", "moneySaved": "{value} saved", "percentGrid": "{grid} kWh grid", @@ -857,10 +867,11 @@ "thisYear": "this year", "total": "all time" }, - "periodLabel": "Period:", + "periodLabel": "Period", "priceTitle": "Energy Price", "referenceGrid": "grid", - "referenceLabel": "Reference data:", + "referenceLabel": "Reference data", + "sessionInfo": "Based on completed charging sessions.", "tabTitle": "My data" }, "sponsor": { @@ -886,15 +897,26 @@ }, "version": { "availableLong": "new version available", + "community": "evcc community", + "labelRelease": "Release", + "labelVersion": "Version", + "labelWebsite": "Website", + "latestVersion": "latest version", + "madeByCommunity": "Made by the {0}.", "modalCancel": "Cancel", "modalDownload": "Download", "modalInstalledVersion": "Installed version", + "modalLatest": "You're running the latest version.", + "modalNextRelease": "What's in the next release", "modalNoReleaseNotes": "No release notes available. More info about the new version:", "modalTitle": "New version available", "modalUpdate": "Install", "modalUpdateNow": "Install now", "modalUpdateStarted": "Starting the new version of evcc…", - "modalUpdateStatusStart": "Installation started:" + "modalUpdateStatusStart": "Installation started:", + "modalViewOnGitHub": "View on GitHub", + "openSource": "open source", + "poweredByOpenSource": "Powered by {0}." } }, "forecast": { @@ -904,6 +926,13 @@ "lowestHour": "Cleanest hour", "range": "Range" }, + "empty": { + "co2": "See when grid energy in your region is clean. Charging plans will optimize for low emissions and calculate CO₂ savings.", + "price": "Configure your dynamic electricity tariff to automatically optimize charging plans and calculate savings.", + "setup": "Set up tariffs and forecasts", + "solar": "See expected solar production for today and the coming days. Will also be used for automatic charging optimization in the future.", + "title": "Tariffs & Forecasts" + }, "modalTitle": "Forecast", "price": { "average": "Average", @@ -911,6 +940,7 @@ "lowestHour": "Cheapest hour", "range": "Range" }, + "priceZoom": "zoom in", "solar": { "dayAfterTomorrow": "Day after tomorrow", "partly": "partly", @@ -919,10 +949,11 @@ "tomorrow": "Tomorrow" }, "solarAdjust": "Adjust solar forecast based on real production data{percent}.", + "solarAdjustShort": "real data adjust", "type": { - "co2": "CO₂", - "price": "Price", - "solar": "Solar" + "co2": "CO₂ Emissions", + "price": "Grid Price", + "solar": "Solar Production" } }, "general": { @@ -1476,5 +1507,13 @@ "lineErrorLink": "line {0}", "restartButton": "Restart", "title": "Startup Error" + }, + "tabBar": { + "battery": "Battery", + "charge": "Charge", + "comingSoon": "This page is under construction.", + "forecast": "Forecast", + "more": "More", + "sessions": "Sessions" } } diff --git a/package-lock.json b/package-lock.json index c68850173..a40c0b5d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "chartjs-plugin-datalabels": "^2.2.0", "countup.js": "^2.10.0", "dayjs": "^1.11.19", + "echarts": "^6.0.0", "monaco-editor": "0.52.2", "smoothscroll-polyfill": "^0.4.4", "snarkdown": "^2.0.0", @@ -5833,6 +5834,22 @@ "dev": true, "license": "MIT" }, + "node_modules/echarts": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz", + "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==", + "license": "Apache-2.0", + "dependencies": { + "tslib": "2.3.0", + "zrender": "6.0.0" + } + }, + "node_modules/echarts/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", + "license": "0BSD" + }, "node_modules/editorconfig": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.7.tgz", @@ -12830,6 +12847,21 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zrender": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz", + "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==", + "license": "BSD-3-Clause", + "dependencies": { + "tslib": "2.3.0" + } + }, + "node_modules/zrender/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", + "license": "0BSD" } } } diff --git a/package.json b/package.json index ae25327df..996c15819 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "playwright:ci": "cross-env CI=true playwright test", "simulator": "vite tests/simulator", "storybook": "storybook dev -p 6006", - "license": "license-compliance --production --report detailed --allow \"MIT;Apache-2.0;ISC;BSD-2-Clause;BSD-3-Clause\"" + "license": "license-compliance --production --report detailed --allow \"MIT;Apache-2.0;ISC;BSD-2-Clause;BSD-3-Clause;0BSD\"" }, "type": "module", "main": "index.js", @@ -33,6 +33,7 @@ "chartjs-plugin-datalabels": "^2.2.0", "countup.js": "^2.10.0", "dayjs": "^1.11.19", + "echarts": "^6.0.0", "monaco-editor": "0.52.2", "smoothscroll-polyfill": "^0.4.4", "snarkdown": "^2.0.0", diff --git a/server/updater/github.go b/server/updater/github.go index a35547a47..5c778cbdb 100644 --- a/server/updater/github.go +++ b/server/updater/github.go @@ -97,7 +97,7 @@ func (r *Repo) ReleaseNotes(from string) (rendered string, err error) { return } - history.WriteString(fmt.Sprintf("

%s

\n", tag)) + history.WriteString(fmt.Sprintf("

v%s

\n", tag)) history.WriteString(md) } } diff --git a/tests/bottom-nav.spec.ts b/tests/bottom-nav.spec.ts new file mode 100644 index 000000000..6e6441210 --- /dev/null +++ b/tests/bottom-nav.spec.ts @@ -0,0 +1,104 @@ +import { test, expect } from "@playwright/test"; +import { start, stop, restart, baseUrl } from "./evcc"; +import { enableExperimental, expectModalHidden, expectModalVisible } from "./utils"; + +test.use({ baseURL: baseUrl() }); + +test.describe("bottom navigation", async () => { + test.afterAll(async () => { + await stop(); + }); + + test("tabs, navigation, and forecast empty state", async ({ page }) => { + // start with blank install + await start(); + await page.goto("/"); + + const bottomNav = page.getByTestId("bottom-tab-bar"); + + // bottom nav not visible without experimental + await expect(bottomNav).not.toBeVisible(); + + // enable experimental feature + await enableExperimental(page); + await page.goto("/"); + await expect(bottomNav).toBeVisible(); + + const tabCharge = bottomNav.getByRole("link", { name: "Charge" }); + const tabBattery = bottomNav.getByRole("link", { name: "Battery" }); + const tabForecast = bottomNav.getByRole("link", { name: "Forecast" }); + const tabSessions = bottomNav.getByRole("link", { name: "Sessions" }); + const tabMore = bottomNav.getByTestId("tab-more"); + + // verify bottom nav tabs (no battery) + await expect(tabCharge).toBeVisible(); + await expect(tabForecast).toBeVisible(); + await expect(tabSessions).toBeVisible(); + await expect(tabMore).toBeVisible(); + await expect(tabBattery).toHaveCount(0); + + // navigate to config via More menu + await tabMore.click(); + await tabMore.getByRole("link", { name: "Configuration" }).click(); + await expect(page.getByRole("heading", { name: "Configuration" })).toBeVisible(); + + // create battery meter + await page.getByRole("button", { name: "Add solar or battery" }).click(); + const meterModal = page.getByTestId("meter-modal"); + await meterModal.getByRole("button", { name: "Add battery meter" }).click(); + await meterModal.getByLabel("Title").fill("Demo Battery"); + await meterModal.getByLabel("Manufacturer").selectOption("Demo battery"); + await meterModal.getByLabel("Power").fill("1000"); + await meterModal.getByLabel("Charge").fill("50"); + await meterModal.getByRole("button", { name: "Save" }).click(); + await expectModalHidden(meterModal); + await expect(page.getByTestId("battery")).toBeVisible(); + + // restart and verify battery tab appears + const restartButton = page + .getByTestId("bottom-banner") + .getByRole("button", { name: "Restart" }); + await expect(restartButton).toBeVisible(); + await restart(); + await expect(restartButton).not.toBeVisible(); + + await page.goto("/"); + await expect(tabBattery).toBeVisible(); + + // click all tabs, verify headlines + await tabCharge.click(); + await expect(page.getByRole("heading", { name: "evcc" })).toBeVisible(); + + await tabBattery.click(); + await expect(page.getByRole("heading", { name: "Home Battery" })).toBeVisible(); + + await tabForecast.click(); + await expect(page.getByRole("heading", { name: "Tariffs & Forecasts" })).toBeVisible(); + + await tabSessions.click(); + await expect(page.getByRole("heading", { name: "Sessions" })).toBeVisible(); + + // forecast empty state → create solar forecast + await tabForecast.click(); + await page.getByRole("link", { name: "Set up tariffs and forecasts" }).click(); + await expect(page.getByRole("heading", { name: "Configuration" })).toBeVisible(); + + const tariffModal = page.getByTestId("tariff-modal"); + await page.getByRole("button", { name: "Add forecast" }).click(); + await expectModalVisible(tariffModal); + await tariffModal.getByRole("button", { name: "Add solar forecast" }).click(); + await tariffModal.getByLabel("Title").fill("Demo Forecast"); + await tariffModal.getByLabel("Provider").selectOption("Demo PV Forecast"); + await tariffModal.getByRole("button", { name: "Validate & save" }).click(); + await expectModalHidden(tariffModal); + await expect(page.getByTestId("tariff-solar")).toBeVisible(); + + // restart, navigate to forecast, verify headline + await expect(restartButton).toBeVisible(); + await restart(); + await expect(restartButton).not.toBeVisible(); + + await tabForecast.click(); + await expect(page.getByRole("heading", { name: "Forecast" })).toBeVisible(); + }); +}); diff --git a/tests/statistics.spec.ts b/tests/statistics.spec.ts index 51ae23b08..671117c94 100644 --- a/tests/statistics.spec.ts +++ b/tests/statistics.spec.ts @@ -1,5 +1,6 @@ import { test, expect } from "@playwright/test"; import { start, stop, baseUrl } from "./evcc"; +import { enableExperimental } from "./utils"; test.use({ baseURL: baseUrl() }); @@ -15,11 +16,11 @@ test.describe("footer", async () => { await page.goto("/"); // last 30 days - await expect(page.getByTestId("savings-button")).toContainText("60% solar energy"); + await expect(page.getByTestId("savings-button")).toContainText("60%"); // last 365 days await page.getByTestId("savings-button").click(); - const savingsModal = await page.getByTestId("savings-modal"); + const savingsModal = page.getByTestId("savings-modal"); await expect(savingsModal).toBeVisible(); await page .getByTestId("savings-period-select") @@ -27,7 +28,7 @@ test.describe("footer", async () => { .selectOption("last 365 days"); await page.getByRole("button", { name: "Close" }).click(); await expect(savingsModal).not.toBeVisible(); - await expect(page.getByTestId("savings-button")).toContainText("30% solar energy"); + await expect(page.getByTestId("savings-button")).toContainText("30%"); // all time await page.getByTestId("savings-button").click(); @@ -35,14 +36,14 @@ test.describe("footer", async () => { await page.getByTestId("savings-period-select").getByRole("combobox").selectOption("all time"); await page.getByRole("button", { name: "Close" }).click(); await expect(savingsModal).not.toBeVisible(); - await expect(page.getByTestId("savings-button")).toContainText("50% solar energy"); + await expect(page.getByTestId("savings-button")).toContainText("50%"); }); }); test.describe("statistics values", async () => { test("last 30 days", async ({ page }) => { await page.goto("/"); - await page.getByRole("button", { name: "60% solar energy" }).click(); + await page.getByTestId("savings-button").click(); await expect(page.getByTestId("savings-modal")).toBeVisible(); await page @@ -63,7 +64,7 @@ test.describe("statistics values", async () => { test("last 365 days", async ({ page }) => { await page.goto("/"); - await page.getByRole("button", { name: "60% solar energy" }).click(); + await page.getByTestId("savings-button").click(); await expect(page.getByTestId("savings-modal")).toBeVisible(); await page .getByTestId("savings-period-select") @@ -83,11 +84,11 @@ test.describe("statistics values", async () => { test("reference data", async ({ page }) => { await page.goto("/"); - await page.getByRole("button", { name: "60% solar energy" }).click(); + await page.getByTestId("savings-button").click(); await expect(page.getByTestId("savings-modal")).toBeVisible(); - await expect(page.getByTestId("savings-reference")).toContainText("Reference data:"); - await expect(page.getByTestId("savings-reference")).toContainText("30.0 ct./kWh (grid)"); + await expect(page.getByTestId("savings-reference")).toContainText("Reference data"); + await expect(page.getByTestId("savings-reference")).toContainText("30.0 ct./kWh"); await expect(page.getByTestId("savings-reference")).toContainText("⌀ 344 g/kWh"); await expect(page.getByTestId("savings-reference")).toContainText("Germany"); @@ -104,3 +105,36 @@ test.describe("statistics values", async () => { await expect(page.getByTestId("savings-tile-co2")).toContainText("1 kg saved"); }); }); + +test.describe("header savings", async () => { + test("savings info in header and indicator persistence", async ({ page }) => { + await enableExperimental(page); + await page.goto("/"); + + // savings button visible in header + await expect(page.getByTestId("savings-button")).toBeVisible(); + // default indicator is solar + await expect(page.getByTestId("savings-button")).toContainText("60%"); + + // open modal, verify values still work + await page.getByTestId("savings-button").click(); + const savingsModal = page.getByTestId("savings-modal"); + await expect(savingsModal).toBeVisible(); + + await expect(page.getByTestId("savings-tile-solar")).toContainText("60.0%"); + await expect(page.getByTestId("savings-tile-price")).toContainText("18.0ct./kWh"); + await expect(page.getByTestId("savings-tile-co2")).toContainText("8g/kWh"); + + // switch indicator to "price" + await page.getByTestId("savings-indicator-select").getByRole("combobox").selectOption("price"); + await page.getByRole("button", { name: "Close" }).click(); + await expect(savingsModal).not.toBeVisible(); + + // verify button now shows price + await expect(page.getByTestId("savings-button")).toContainText("18.0"); + + // reload and verify persistence + await page.reload(); + await expect(page.getByTestId("savings-button")).toContainText("18.0"); + }); +}); diff --git a/tests/utils.ts b/tests/utils.ts index cc0866e5e..9fc97c80f 100644 --- a/tests/utils.ts +++ b/tests/utils.ts @@ -3,10 +3,13 @@ import { expect, type Page, type Locator } from "@playwright/test"; export async function enableExperimental(page: Page): Promise { await page.goto("/#/config"); - await page.getByTestId("generalconfig-experimental").click(); + await page + .getByTestId("generalconfig-experimental") + .getByRole("button", { name: "edit" }) + .click(); const modal = page.getByTestId("experimental-modal"); await expectModalVisible(modal); - await modal.getByLabel("Show experimental UI features.").click(); + await modal.getByLabel("Enable experimental features.").click(); await modal.getByRole("button", { name: "Close" }).click(); await expectModalHidden(modal); await expect(page.locator(".modal-backdrop")).not.toBeVisible();