Simplify date picker and put in sidebar (#9677)

* Simplify date picker and put in sidebar

* Convert picker to reusable component

* Put date picker in top bar on desktop

* Chefs

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

@@ -20,6 +20,7 @@ import "../lovelace/views/hui-view";
 import { HomeAssistant } from "../../types";
 import { Lovelace } from "../lovelace/types";
 import { LovelaceConfig } from "../../data/lovelace";
+import "../lovelace/components/hui-energy-period-selector";
 
 const LOVELACE_CONFIG: LovelaceConfig = {
   views: [
@@ -59,11 +60,21 @@ class PanelEnergy extends LitElement {
       <ha-app-layout>
         <app-header fixed slot="header">
           <app-toolbar>
-            <ha-menu-button
-              .hass=${this.hass}
-              .narrow=${this.narrow}
-            ></ha-menu-button>
-            <div main-title>${this.hass.localize("panel.energy")}</div>
+            <div class="nav-title">
+              <ha-menu-button
+                .hass=${this.hass}
+                .narrow=${this.narrow}
+              ></ha-menu-button>
+              <div main-title>${this.hass.localize("panel.energy")}</div>
+            </div>
+            ${this.narrow
+              ? ""
+              : html`
+                  <hui-energy-period-selector
+                    .hass=${this.hass}
+                    collectionKey="energy_dashboard"
+                  ></hui-energy-period-selector>
+                `}
             <a href="/config/energy?historyBack=1">
               <mwc-icon-button>
                 <ha-svg-icon .path=${mdiCog}></ha-svg-icon>
@@ -113,6 +124,17 @@ class PanelEnergy extends LitElement {
         mwc-icon-button {
           color: var(--text-primary-color);
         }
+        app-toolbar {
+          display: flex;
+          justify-content: space-between;
+        }
+        .nav-title {
+          display: flex;
+          align-items: center;
+        }
+        hui-energy-period-selector {
+          width: 300px;
+        }
       `,
     ];
   }

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

@@ -54,10 +54,13 @@ export class EnergyStrategy {
 
     getEnergyDataCollection(hass, { prefs, key: "energy_dashboard" });
 
-    view.cards!.push({
-      type: "energy-date-selection",
-      collection_key: "energy_dashboard",
-    });
+    if (info.narrow) {
+      view.cards!.push({
+        type: "energy-date-selection",
+        collection_key: "energy_dashboard",
+        view_layout: { position: "sidebar" },
+      });
+    }
 
     // Only include if we have a grid source.
     if (hasGrid) {

src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts

@@ -1,72 +1,19 @@
-import {
-  startOfWeek,
-  endOfWeek,
-  startOfToday,
-  endOfToday,
-  startOfYesterday,
-  endOfYesterday,
-  addDays,
-} from "date-fns";
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../../components/chart/ha-chart-base";
-import "../../../../components/ha-card";
-import "../../../../components/ha-date-range-picker";
-import type { DateRangePickerRanges } from "../../../../components/ha-date-range-picker";
-import { EnergyData, getEnergyDataCollection } from "../../../../data/energy";
-import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCard } from "../../types";
 import { EnergyDevicesGraphCardConfig } from "../types";
+import "../../components/hui-energy-period-selector";
 
 @customElement("hui-energy-date-selection-card")
 export class HuiEnergyDateSelectionCard
-  extends SubscribeMixin(LitElement)
+  extends LitElement
   implements LovelaceCard
 {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _config?: EnergyDevicesGraphCardConfig;
 
-  @state() private _ranges?: DateRangePickerRanges;
-
-  @state() _startDate?: Date;
-
-  @state() _endDate?: Date;
-
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      getEnergyDataCollection(this.hass, {
-        key: this._config?.collection_key,
-      }).subscribe((data) => this._updateDates(data)),
-    ];
-  }
-
-  public willUpdate() {
-    if (!this.hasUpdated) {
-      const today = new Date();
-      const weekStart = startOfWeek(today);
-      const weekEnd = endOfWeek(today);
-
-      this._ranges = {
-        [this.hass.localize("ui.components.date-range-picker.ranges.today")]: [
-          startOfToday(),
-          endOfToday(),
-        ],
-        [this.hass.localize(
-          "ui.components.date-range-picker.ranges.yesterday"
-        )]: [startOfYesterday(), endOfYesterday()],
-        [this.hass.localize(
-          "ui.components.date-range-picker.ranges.this_week"
-        )]: [weekStart, weekEnd],
-        [this.hass.localize(
-          "ui.components.date-range-picker.ranges.last_week"
-        )]: [addDays(weekStart, -7), addDays(weekEnd, -7)],
-      };
-    }
-  }
-
   public getCardSize(): Promise<number> | number {
     return 1;
   }
@@ -76,40 +23,18 @@ export class HuiEnergyDateSelectionCard
   }
 
   protected render(): TemplateResult {
-    if (!this.hass || !this._config || !this._startDate) {
+    if (!this.hass || !this._config) {
       return html``;
     }
 
     return html`
-      <ha-date-range-picker
+      <hui-energy-period-selector
         .hass=${this.hass}
-        .startDate=${this._startDate}
-        .endDate=${this._endDate!}
-        .ranges=${this._ranges}
-        @change=${this._dateRangeChanged}
-      ></ha-date-range-picker>
+        .collectionKey=${this._config.collection_key}
+      ></hui-energy-period-selector>
     `;
   }
 
-  private _updateDates(energyData: EnergyData): void {
-    this._startDate = energyData.start;
-    this._endDate = energyData.end || endOfToday();
-  }
-
-  private _dateRangeChanged(ev: CustomEvent): void {
-    if (
-      ev.detail.startDate.getTime() === this._startDate!.getTime() &&
-      ev.detail.endDate.getTime() === this._endDate!.getTime()
-    ) {
-      return;
-    }
-    const energyCollection = getEnergyDataCollection(this.hass, {
-      key: this._config?.collection_key,
-    });
-    energyCollection.setPeriod(ev.detail.startDate, ev.detail.endDate);
-    energyCollection.refresh();
-  }
-
   static get styles(): CSSResultGroup {
     return css``;
   }

src/panels/lovelace/components/hui-energy-period-selector.ts

@@ -0,0 +1,102 @@
+import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
+import { endOfToday, addDays, endOfDay, isToday, isYesterday } from "date-fns";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { formatDate } from "../../../common/datetime/format_date";
+import { EnergyData, getEnergyDataCollection } from "../../../data/energy";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import { HomeAssistant } from "../../../types";
+
+@customElement("hui-energy-period-selector")
+export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public collectionKey?: string;
+
+  @state() _startDate?: Date;
+
+  @state() _endDate?: Date;
+
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      getEnergyDataCollection(this.hass, {
+        key: this.collectionKey,
+      }).subscribe((data) => this._updateDates(data)),
+    ];
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this._startDate) {
+      return html``;
+    }
+
+    const isStartToday = isToday(this._startDate);
+    let label;
+    if (isStartToday) {
+      label = "Today";
+    } else if (isYesterday(this._startDate)) {
+      label = "Yesterday";
+    } else {
+      label = formatDate(this._startDate, this.hass.locale);
+    }
+
+    return html`
+      <div class="row">
+        <mwc-icon-button label="Previous Day" @click=${this._pickPreviousDay}>
+          <ha-svg-icon .path=${mdiChevronLeft}></ha-svg-icon>
+        </mwc-icon-button>
+        <div class="label">${label}</div>
+        <mwc-icon-button
+          .disabled=${isStartToday}
+          label="Next Day"
+          @click=${this._pickNextDay}
+        >
+          <ha-svg-icon .path=${mdiChevronRight}></ha-svg-icon>
+        </mwc-icon-button>
+      </div>
+    `;
+  }
+
+  private _pickPreviousDay() {
+    this._setDate(addDays(this._startDate!, -1));
+  }
+
+  private _pickNextDay() {
+    this._setDate(addDays(this._startDate!, +1));
+  }
+
+  private _setDate(startDate: Date) {
+    const endDate = endOfDay(startDate);
+    const energyCollection = getEnergyDataCollection(this.hass, {
+      key: this.collectionKey,
+    });
+    energyCollection.setPeriod(startDate, endDate);
+    energyCollection.refresh();
+  }
+
+  private _updateDates(energyData: EnergyData): void {
+    this._startDate = energyData.start;
+    this._endDate = energyData.end || endOfToday();
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .row {
+        display: flex;
+        align-items: center;
+      }
+      .label {
+        flex: 1;
+        text-align: center;
+        font-size: 20px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-energy-period-selector": HuiEnergyPeriodSelector;
+  }
+}