diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts
index 933852737af6..88f7d03136b3 100644
--- a/src/panels/energy/ha-panel-energy.ts
+++ b/src/panels/energy/ha-panel-energy.ts
@@ -1,4 +1,4 @@
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { mdiPencil, mdiDownload } from "@mdi/js";
import { customElement, property, state } from "lit/decorators";
@@ -6,6 +6,7 @@ import "../../components/ha-menu-button";
import "../../components/ha-icon-button-arrow-prev";
import "../../components/ha-list-item";
import "../../components/ha-top-app-bar-fixed";
+import "../../components/ha-alert";
import type { LovelaceConfig } from "../../data/lovelace/config/types";
import { haStyle } from "../../resources/styles";
import type { HomeAssistant } from "../../types";
@@ -21,6 +22,7 @@ import type {
GasSourceTypeEnergyPreference,
WaterSourceTypeEnergyPreference,
DeviceConsumptionEnergyPreference,
+ EnergyCollection,
} from "../../data/energy";
import {
computeConsumptionData,
@@ -30,12 +32,27 @@ import {
import { fileDownload } from "../../util/file_download";
import type { StatisticValue } from "../../data/recorder";
+export const DEFAULT_ENERGY_COLLECTION_KEY = "energy_dashboard";
+
const ENERGY_LOVELACE_CONFIG: LovelaceConfig = {
views: [
+ {
+ strategy: {
+ type: "energy-overview",
+ collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
+ },
+ },
{
strategy: {
type: "energy",
+ collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
},
+ path: "electricity",
+ },
+ {
+ type: "panel",
+ path: "setup",
+ cards: [{ type: "custom:energy-setup-wizard-card" }],
},
],
};
@@ -46,13 +63,30 @@ class PanelEnergy extends LitElement {
@property({ type: Boolean, reflect: true }) public narrow = false;
- @state() private _viewIndex = 0;
-
@state() private _lovelace?: Lovelace;
@state() private _searchParms = new URLSearchParams(window.location.search);
- public willUpdate(changedProps: PropertyValues) {
+ @state() private _error?: string;
+
+ @property({ attribute: false }) public route?: {
+ path: string;
+ prefix: string;
+ };
+
+ private _energyCollection?: EnergyCollection;
+
+ get _viewPath(): string | undefined {
+ const viewPath: string | undefined = this.route!.path.split("/")[1];
+ return viewPath ? decodeURI(viewPath) : undefined;
+ }
+
+ public connectedCallback() {
+ super.connectedCallback();
+ this._loadPrefs();
+ }
+
+ public async willUpdate(changedProps: PropertyValues) {
if (!this.hasUpdated) {
this.hass.loadFragmentTranslation("lovelace");
}
@@ -61,19 +95,67 @@ class PanelEnergy extends LitElement {
}
const oldHass = changedProps.get("hass") as this["hass"];
if (oldHass?.locale !== this.hass.locale) {
- this._setLovelace();
- }
- if (oldHass && oldHass.localize !== this.hass.localize) {
+ await this._setLovelace();
+ } else if (oldHass && oldHass.localize !== this.hass.localize) {
this._reloadView();
}
}
+ private async _loadPrefs() {
+ if (this._viewPath === "setup") {
+ await import("./cards/energy-setup-wizard-card");
+ } else {
+ this._energyCollection = getEnergyDataCollection(this.hass, {
+ key: DEFAULT_ENERGY_COLLECTION_KEY,
+ });
+ try {
+ // Have to manually refresh here as we don't want to subscribe yet
+ await this._energyCollection.refresh();
+ } catch (err: any) {
+ if (err.code === "not_found") {
+ navigate("/energy/setup");
+ }
+ this._error = err.message;
+ return;
+ }
+ const prefs = this._energyCollection.prefs!;
+ if (
+ prefs.device_consumption.length === 0 &&
+ prefs.energy_sources.length === 0
+ ) {
+ // No energy sources available, start from scratch
+ navigate("/energy/setup");
+ }
+ }
+ }
+
private _back(ev) {
ev.stopPropagation();
goBack();
}
- protected render(): TemplateResult {
+ protected render() {
+ if (!this._energyCollection?.prefs) {
+ // Still loading
+ return html`
+
+
`;
+ }
+ let viewPath = this._viewPath;
+ const { prefs } = this._energyCollection;
+ if (
+ prefs.energy_sources.every((source) =>
+ ["grid", "solar", "battery"].includes(source.type)
+ )
+ ) {
+ // if only electricity sources, show electricity view directly
+ viewPath = "electricity";
+ }
+ const viewIndex = Math.max(
+ ENERGY_LOVELACE_CONFIG.views.findIndex((view) => view.path === viewPath),
+ 0
+ );
+
return html`