Default to old energy view if no water and gas

Author: MindFreeze

src/panels/energy/ha-panel-energy.ts

@@ -1,11 +1,12 @@
-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";
 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,
@@ -47,6 +49,11 @@ const ENERGY_LOVELACE_CONFIG: LovelaceConfig = {
       },
       path: "electricity",
     },
+    {
+      type: "panel",
+      path: "setup",
+      cards: [{ type: "custom:energy-setup-wizard-card" }],
+    },
   ],
 };
 
@@ -60,12 +67,26 @@ class PanelEnergy extends LitElement {
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
+  @state() private _error?: string;
+
   @property({ attribute: false }) public route?: {
     path: string;
     prefix: string;
   };
 
-  public willUpdate(changedProps: PropertyValues) {
+  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");
     }
@@ -74,22 +95,66 @@ 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 {
-    let viewPath: string | undefined = this.route!.path.split("/")[1];
-    viewPath = viewPath ? decodeURI(viewPath) : undefined;
-    const viewIndex = Math.max(ENERGY_LOVELACE_CONFIG.views.findIndex((view) => view.path === viewPath), 0);
+  protected render() {
+    if (!this._energyCollection?.prefs) {
+      // Still loading
+      return html`<div class="centered">
+        <ha-spinner size="large"></ha-spinner>
+      </div>`;
+    }
+    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`
       <div class="header">
@@ -144,12 +209,21 @@ class PanelEnergy extends LitElement {
         .hass=${this.hass}
         @reload-energy-panel=${this._reloadView}
       >
-        <hui-view
-          .hass=${this.hass}
-          .narrow=${this.narrow}
-          .lovelace=${this._lovelace}
-          .index=${viewIndex}
-        ></hui-view>
+        ${this._error
+          ? html`<div class="centered">
+              <ha-alert alert-type="error">
+                An error occurred while fetching your energy preferences:
+                ${this._error}
+              </ha-alert>
+            </div>`
+          : this._lovelace
+            ? html`<hui-view
+                .hass=${this.hass}
+                .narrow=${this.narrow}
+                .lovelace=${this._lovelace}
+                .index=${viewIndex}
+              ></hui-view>`
+            : nothing}
       </hui-view-container>
     `;
   }
@@ -177,9 +251,7 @@ class PanelEnergy extends LitElement {
 
   private async _dumpCSV(ev) {
     ev.stopPropagation();
-    const energyData = getEnergyDataCollection(this.hass, {
-      key: DEFAULT_ENERGY_COLLECTION_KEY,
-    });
+    const energyData = this._energyCollection!;
 
     if (!energyData.prefs || !energyData.state.stats) {
       return;
@@ -476,7 +548,7 @@ class PanelEnergy extends LitElement {
   }
 
   private _reloadView() {
-    // Force strategy to be re-run by make a copy of the view
+    // Force strategy to be re-run by making a copy of the view
     const config = this._lovelace!.config;
     this._lovelace = {
       ...this._lovelace!,
@@ -582,6 +654,13 @@ class PanelEnergy extends LitElement {
           flex: 1 1 100%;
           max-width: 100%;
         }
+        .centered {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
       `,
     ];
   }

src/panels/energy/strategies/energy-overview-view-strategy.ts

@@ -1,31 +1,14 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
-import type {
-  EnergyPreferences,
-  GridSourceTypeEnergyPreference,
-} from "../../../data/energy";
-import { getEnergyPreferences } from "../../../data/energy";
+import type { GridSourceTypeEnergyPreference } from "../../../data/energy";
+import { getEnergyDataCollection } from "../../../data/energy";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
 import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import { DEFAULT_ENERGY_COLLECTION_KEY } from "../ha-panel-energy";
 
-const setupWizard = async (): Promise<LovelaceViewConfig> => {
-  await import("../cards/energy-setup-wizard-card");
-  return {
-    type: "panel",
-    cards: [
-      {
-        type: "custom:energy-setup-wizard-card",
-      },
-    ],
-  };
-};
-
-const COLUMNS = 2;
-
 @customElement("energy-overview-view-strategy")
 export class EnergyViewStrategy extends ReactiveElement {
   static async generate(
@@ -34,34 +17,21 @@ export class EnergyViewStrategy extends ReactiveElement {
   ): Promise<LovelaceViewConfig> {
     const view: LovelaceViewConfig = { type: "sections", sections: [] };
 
-    let prefs: EnergyPreferences;
     const collectionKey =
       _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
 
-    try {
-      prefs = await getEnergyPreferences(hass);
-    } catch (err: any) {
-      if (err.code === "not_found") {
-        return setupWizard();
-      }
-      view.sections!.push({
-        column_span: COLUMNS,
-        cards: [
-          {
-            type: "markdown",
-            content: `An error occurred while fetching your energy preferences: ${err.message}.`,
-          },
-        ],
-      });
-      return view;
-    }
+    const energyCollection = getEnergyDataCollection(hass, {
+      key: collectionKey,
+    });
+    const prefs = energyCollection.prefs;
 
     // No energy sources available, start from scratch
     if (
-      prefs!.device_consumption.length === 0 &&
-      prefs!.energy_sources.length === 0
+      !prefs ||
+      (prefs.device_consumption.length === 0 &&
+        prefs.energy_sources.length === 0)
     ) {
-      return setupWizard();
+      return view;
     }
 
     const hasGrid = prefs.energy_sources.find(
@@ -156,56 +126,56 @@ export class EnergyViewStrategy extends ReactiveElement {
 
     view.sections!.push(energySection);
 
-    if (hasGas) {
+    if (hasGrid || hasSolar || hasBattery || hasGas || hasWater) {
       view.sections!.push({
         type: "grid",
         cards: [
           {
             type: "heading",
-            heading: hass.localize("ui.panel.energy.summary_list.gas"),
+            heading: hass.localize(
+              "ui.panel.energy.cards.energy_sources_table_title"
+            ),
           },
           {
-            title: hass.localize(
-              "ui.panel.energy.cards.energy_gas_graph_title"
-            ),
-            type: "energy-gas-graph",
+            type: "energy-sources-table",
             collection_key: collectionKey,
           },
         ],
       });
     }
 
-    if (hasWater) {
+    if (hasGas) {
       view.sections!.push({
         type: "grid",
         cards: [
           {
             type: "heading",
-            heading: hass.localize("ui.panel.energy.summary_list.water"),
+            heading: hass.localize("ui.panel.energy.summary_list.gas"),
           },
           {
             title: hass.localize(
-              "ui.panel.energy.cards.energy_water_graph_title"
+              "ui.panel.energy.cards.energy_gas_graph_title"
             ),
-            type: "energy-water-graph",
+            type: "energy-gas-graph",
             collection_key: collectionKey,
           },
         ],
       });
     }
 
-    if (hasGrid || hasSolar || hasBattery || hasGas || hasWater) {
+    if (hasWater) {
       view.sections!.push({
         type: "grid",
         cards: [
           {
             type: "heading",
-            heading: hass.localize(
-              "ui.panel.energy.cards.energy_sources_table_title"
-            ),
+            heading: hass.localize("ui.panel.energy.summary_list.water"),
           },
           {
-            type: "energy-sources-table",
+            title: hass.localize(
+              "ui.panel.energy.cards.energy_water_graph_title"
+            ),
+            type: "energy-water-graph",
             collection_key: collectionKey,
           },
         ],