diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts
index 1f6772cdb6..3c7b84a741 100644
--- a/src/panels/energy/ha-panel-energy.ts
+++ b/src/panels/energy/ha-panel-energy.ts
@@ -26,16 +26,24 @@ import type { LovelaceConfig } from "../../data/lovelace/config/types";
import type { LovelaceViewConfig } from "../../data/lovelace/config/view";
import type { StatisticValue } from "../../data/recorder";
import { haStyle } from "../../resources/styles";
-import type { HomeAssistant } from "../../types";
+import type { HomeAssistant, PanelInfo } from "../../types";
import { fileDownload } from "../../util/file_download";
import "../lovelace/components/hui-energy-period-selector";
+import "../lovelace/hui-root";
import type { Lovelace } from "../lovelace/types";
import "../lovelace/views/hui-view";
import "../lovelace/views/hui-view-container";
export const DEFAULT_ENERGY_COLLECTION_KEY = "energy_dashboard";
+const EMPTY_PREFERENCES: EnergyPreferences = {
+ energy_sources: [],
+ device_consumption: [],
+ device_consumption_water: [],
+};
+
const OVERVIEW_VIEW = {
+ path: "overview",
strategy: {
type: "energy-overview",
collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
@@ -43,8 +51,8 @@ const OVERVIEW_VIEW = {
} as LovelaceViewConfig;
const ELECTRICITY_VIEW = {
- back_path: "/energy",
path: "electricity",
+ back_path: "/energy",
strategy: {
type: "energy-electricity",
collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
@@ -72,54 +80,96 @@ class PanelEnergy extends LitElement {
@property({ type: Boolean, reflect: true }) public narrow = false;
+ @property({ attribute: false }) public panel?: PanelInfo;
+
@state() private _lovelace?: Lovelace;
@state() private _searchParms = new URLSearchParams(window.location.search);
- @state() private _error?: string;
-
@property({ attribute: false }) public route?: {
path: string;
prefix: string;
};
@state()
- private _config?: LovelaceConfig;
+ private _prefs?: EnergyPreferences;
- get _viewPath(): string | undefined {
- const viewPath: string | undefined = this.route!.path.split("/")[1];
- return viewPath ? decodeURI(viewPath) : undefined;
- }
+ @state()
+ private _error?: string;
- public connectedCallback() {
- super.connectedCallback();
- this._loadLovelaceConfig();
- }
-
- public async willUpdate(changedProps: PropertyValues) {
+ public willUpdate(changedProps: PropertyValues) {
+ super.willUpdate(changedProps);
+ // Initial setup
if (!this.hasUpdated) {
this.hass.loadFragmentTranslation("lovelace");
+ this._loadConfig();
+ return;
}
+
if (!changedProps.has("hass")) {
return;
}
+
const oldHass = changedProps.get("hass") as this["hass"];
- if (oldHass?.locale !== this.hass.locale) {
+ if (oldHass && oldHass.localize !== this.hass.localize) {
this._setLovelace();
- } else if (oldHass && oldHass.localize !== this.hass.localize) {
- this._reloadView();
}
}
- private async _loadLovelaceConfig() {
+ private _fetchEnergyPrefs = async (): Promise<
+ EnergyPreferences | undefined
+ > => {
+ const collection = getEnergyDataCollection(this.hass, {
+ key: DEFAULT_ENERGY_COLLECTION_KEY,
+ });
try {
- this._config = undefined;
- this._config = await this._generateLovelaceConfig();
- } catch (err) {
- this._error = (err as Error).message;
+ await collection.refresh();
+ } catch (err: any) {
+ if (err.code === "not_found") {
+ return undefined;
+ }
+ throw err;
}
+ return collection.prefs;
+ };
- this._setLovelace();
+ private async _loadConfig() {
+ try {
+ this._error = undefined;
+ const prefs = await this._fetchEnergyPrefs();
+ this._prefs = prefs || EMPTY_PREFERENCES;
+ } catch (err) {
+ // eslint-disable-next-line no-console
+ console.error("Failed to load prefs:", err);
+ this._prefs = EMPTY_PREFERENCES;
+ this._error = (err as Error).message || "Unknown error";
+ }
+ await this._setLovelace();
+
+ // Navigate to first view if not there yet
+ const firstPath = this._lovelace!.config?.views?.[0]?.path;
+ const viewPath: string | undefined = this.route!.path.split("/")[1];
+ if (viewPath !== firstPath) {
+ navigate(`${this.route!.prefix}/${firstPath}`);
+ }
+ }
+
+ private async _setLovelace() {
+ const config = await this._generateLovelaceConfig();
+
+ this._lovelace = {
+ config: config,
+ rawConfig: config,
+ editMode: false,
+ urlPath: "energy",
+ mode: "generated",
+ locale: this.hass.locale,
+ enableFullEditMode: () => undefined,
+ saveConfig: async () => undefined,
+ deleteConfig: async () => undefined,
+ setEditMode: () => undefined,
+ showToast: () => undefined,
+ };
}
private _back(ev) {
@@ -128,7 +178,17 @@ class PanelEnergy extends LitElement {
}
protected render() {
- if (!this._config && !this._error) {
+ if (this._error) {
+ return html`
+
+
+ An error occurred loading energy preferences: ${this._error}
+
+
+ `;
+ }
+
+ if (!this._prefs) {
// Still loading
return html`
@@ -136,20 +196,31 @@ class PanelEnergy extends LitElement {
`;
}
- const isSingleView = this._config?.views.length === 1;
- const viewPath = this._viewPath;
- const viewIndex = this._config
- ? Math.max(
- this._config.views.findIndex((view) => view.path === viewPath),
- 0
- )
- : 0;
- const showBack =
- this._searchParms.has("historyBack") || (!isSingleView && viewIndex > 0);
+
+ if (!this._lovelace) {
+ return nothing;
+ }
+
+ const viewPath: string | undefined = this.route!.path.split("/")[1];
+
+ const views = this._lovelace.config?.views || [];
+ const viewIndex = Math.max(
+ views.findIndex((view) => view.path === viewPath),
+ 0
+ );
+
+ const showBack = this._searchParms.has("historyBack") || viewIndex > 0;
return html`
-