diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts index 5539a24895..c1e1227a1f 100644 --- a/src/panels/energy/ha-panel-energy.ts +++ b/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 { - -
${this.hass.localize("panel.energy")}
+ + ${this.narrow + ? "" + : html` + + `} @@ -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; + } `, ]; } diff --git a/src/panels/energy/strategies/energy-strategy.ts b/src/panels/energy/strategies/energy-strategy.ts index c303c2bdbb..aabed8728d 100644 --- a/src/panels/energy/strategies/energy-strategy.ts +++ b/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) { diff --git a/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts b/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts index b58506988d..5a2fdedbfd 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts +++ b/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 { 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` - + .collectionKey=${this._config.collection_key} + > `; } - 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``; } diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts new file mode 100644 index 0000000000..68fd4c3a99 --- /dev/null +++ b/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` +
+ + + +
${label}
+ + + +
+ `; + } + + 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; + } +}