mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 10:16:46 +00:00
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
This commit is contained in:
parent
884e323288
commit
4b592d81bd
@ -20,6 +20,7 @@ import "../lovelace/views/hui-view";
|
|||||||
import { HomeAssistant } from "../../types";
|
import { HomeAssistant } from "../../types";
|
||||||
import { Lovelace } from "../lovelace/types";
|
import { Lovelace } from "../lovelace/types";
|
||||||
import { LovelaceConfig } from "../../data/lovelace";
|
import { LovelaceConfig } from "../../data/lovelace";
|
||||||
|
import "../lovelace/components/hui-energy-period-selector";
|
||||||
|
|
||||||
const LOVELACE_CONFIG: LovelaceConfig = {
|
const LOVELACE_CONFIG: LovelaceConfig = {
|
||||||
views: [
|
views: [
|
||||||
@ -59,11 +60,21 @@ class PanelEnergy extends LitElement {
|
|||||||
<ha-app-layout>
|
<ha-app-layout>
|
||||||
<app-header fixed slot="header">
|
<app-header fixed slot="header">
|
||||||
<app-toolbar>
|
<app-toolbar>
|
||||||
<ha-menu-button
|
<div class="nav-title">
|
||||||
.hass=${this.hass}
|
<ha-menu-button
|
||||||
.narrow=${this.narrow}
|
.hass=${this.hass}
|
||||||
></ha-menu-button>
|
.narrow=${this.narrow}
|
||||||
<div main-title>${this.hass.localize("panel.energy")}</div>
|
></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">
|
<a href="/config/energy?historyBack=1">
|
||||||
<mwc-icon-button>
|
<mwc-icon-button>
|
||||||
<ha-svg-icon .path=${mdiCog}></ha-svg-icon>
|
<ha-svg-icon .path=${mdiCog}></ha-svg-icon>
|
||||||
@ -113,6 +124,17 @@ class PanelEnergy extends LitElement {
|
|||||||
mwc-icon-button {
|
mwc-icon-button {
|
||||||
color: var(--text-primary-color);
|
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;
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
@ -54,10 +54,13 @@ export class EnergyStrategy {
|
|||||||
|
|
||||||
getEnergyDataCollection(hass, { prefs, key: "energy_dashboard" });
|
getEnergyDataCollection(hass, { prefs, key: "energy_dashboard" });
|
||||||
|
|
||||||
view.cards!.push({
|
if (info.narrow) {
|
||||||
type: "energy-date-selection",
|
view.cards!.push({
|
||||||
collection_key: "energy_dashboard",
|
type: "energy-date-selection",
|
||||||
});
|
collection_key: "energy_dashboard",
|
||||||
|
view_layout: { position: "sidebar" },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Only include if we have a grid source.
|
// Only include if we have a grid source.
|
||||||
if (hasGrid) {
|
if (hasGrid) {
|
||||||
|
@ -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 { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
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 { HomeAssistant } from "../../../../types";
|
||||||
import { LovelaceCard } from "../../types";
|
import { LovelaceCard } from "../../types";
|
||||||
import { EnergyDevicesGraphCardConfig } from "../types";
|
import { EnergyDevicesGraphCardConfig } from "../types";
|
||||||
|
import "../../components/hui-energy-period-selector";
|
||||||
|
|
||||||
@customElement("hui-energy-date-selection-card")
|
@customElement("hui-energy-date-selection-card")
|
||||||
export class HuiEnergyDateSelectionCard
|
export class HuiEnergyDateSelectionCard
|
||||||
extends SubscribeMixin(LitElement)
|
extends LitElement
|
||||||
implements LovelaceCard
|
implements LovelaceCard
|
||||||
{
|
{
|
||||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||||
|
|
||||||
@state() private _config?: EnergyDevicesGraphCardConfig;
|
@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 {
|
public getCardSize(): Promise<number> | number {
|
||||||
return 1;
|
return 1;
|
||||||
}
|
}
|
||||||
@ -76,40 +23,18 @@ export class HuiEnergyDateSelectionCard
|
|||||||
}
|
}
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
if (!this.hass || !this._config || !this._startDate) {
|
if (!this.hass || !this._config) {
|
||||||
return html``;
|
return html``;
|
||||||
}
|
}
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<ha-date-range-picker
|
<hui-energy-period-selector
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.startDate=${this._startDate}
|
.collectionKey=${this._config.collection_key}
|
||||||
.endDate=${this._endDate!}
|
></hui-energy-period-selector>
|
||||||
.ranges=${this._ranges}
|
|
||||||
@change=${this._dateRangeChanged}
|
|
||||||
></ha-date-range-picker>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
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 {
|
static get styles(): CSSResultGroup {
|
||||||
return css``;
|
return css``;
|
||||||
}
|
}
|
||||||
|
102
src/panels/lovelace/components/hui-energy-period-selector.ts
Normal file
102
src/panels/lovelace/components/hui-energy-period-selector.ts
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user