From 5270ca4db674a746f0cba48042cffadcfe89844e Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 27 Sep 2023 18:10:01 +0200 Subject: [PATCH] Use responsive condition in energy dashboard --- cast/src/receiver/layout/hc-main.ts | 3 +- src/common/util/media_query.ts | 1 + src/layouts/home-assistant-main.ts | 3 +- .../energy/strategies/energy-view-strategy.ts | 26 +++++++++++----- .../lovelace/editor/hui-dialog-save-config.ts | 4 +-- src/panels/lovelace/ha-panel-lovelace.ts | 15 +++------ .../lovelace/strategies/get-strategy.ts | 31 +++++++------------ .../original-states-dashboard-strategy.ts | 4 +-- .../original-states-view-strategy.ts | 4 +-- src/panels/lovelace/strategies/types.ts | 10 +----- src/panels/lovelace/views/hui-view.ts | 3 +- 11 files changed, 44 insertions(+), 60 deletions(-) create mode 100644 src/common/util/media_query.ts diff --git a/cast/src/receiver/layout/hc-main.ts b/cast/src/receiver/layout/hc-main.ts index 7287b02466..e348fe9b99 100644 --- a/cast/src/receiver/layout/hc-main.ts +++ b/cast/src/receiver/layout/hc-main.ts @@ -324,8 +324,7 @@ export class HcMain extends HassElement { { type: DEFAULT_STRATEGY, }, - this.hass!, - { narrow: false } + this.hass! ) ); } diff --git a/src/common/util/media_query.ts b/src/common/util/media_query.ts new file mode 100644 index 0000000000..7d21d8b44d --- /dev/null +++ b/src/common/util/media_query.ts @@ -0,0 +1 @@ +export const NARROW_MEDIA_QUERY = `(max-width: 870px)`; diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts index dcaa2b460f..1c12a52512 100644 --- a/src/layouts/home-assistant-main.ts +++ b/src/layouts/home-assistant-main.ts @@ -16,6 +16,7 @@ import "../components/ha-drawer"; import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer"; import type { HomeAssistant, Route } from "../types"; import "./partial-panel-resolver"; +import { NARROW_MEDIA_QUERY } from "../common/util/media_query"; declare global { // for fire event @@ -50,7 +51,7 @@ export class HomeAssistantMain extends LitElement { constructor() { super(); - listenMediaQuery("(max-width: 870px)", (matches) => { + listenMediaQuery(NARROW_MEDIA_QUERY, (matches) => { this.narrow = matches; }); } diff --git a/src/panels/energy/strategies/energy-view-strategy.ts b/src/panels/energy/strategies/energy-view-strategy.ts index ff10a985f9..43807667fc 100644 --- a/src/panels/energy/strategies/energy-view-strategy.ts +++ b/src/panels/energy/strategies/energy-view-strategy.ts @@ -1,5 +1,6 @@ import { ReactiveElement } from "lit"; import { customElement } from "lit/decorators"; +import { NARROW_MEDIA_QUERY } from "../../../common/util/media_query"; import { EnergyPreferences, getEnergyPreferences, @@ -10,7 +11,6 @@ import { LovelaceViewConfig, } from "../../../data/lovelace"; import { HomeAssistant } from "../../../types"; -import { LovelaceStrategyParams } from "../../lovelace/strategies/types"; const setupWizard = async (): Promise => { await import("../cards/energy-setup-wizard-card"); @@ -32,8 +32,7 @@ export interface EnergeryViewStrategyConfig extends LovelaceStrategyConfig { export class EnergyViewStrategy extends ReactiveElement { static async generate( config: EnergeryViewStrategyConfig, - hass: HomeAssistant, - params: LovelaceStrategyParams + hass: HomeAssistant ): Promise { const view: LovelaceViewConfig = { cards: [] }; @@ -67,11 +66,24 @@ export class EnergyViewStrategy extends ReactiveElement { (source) => source.type === "water" ); - if (params.narrow || config.show_date_selection) { + const dateSelectionCard = { + type: "energy-date-selection", + collection_key: "energy_dashboard", + view_layout: { position: "sidebar" }, + }; + + if (config.show_date_selection) { + view.cards!.push(dateSelectionCard); + } else { view.cards!.push({ - type: "energy-date-selection", - collection_key: "energy_dashboard", - view_layout: { position: "sidebar" }, + type: "conditional", + conditions: [ + { + condition: "responsive", + media_query: NARROW_MEDIA_QUERY, + }, + ], + card: dateSelectionCard, }); } diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts index 008014e502..cbad03f59a 100644 --- a/src/panels/lovelace/editor/hui-dialog-save-config.ts +++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts @@ -174,9 +174,7 @@ export class HuiSaveConfig extends LitElement implements HassDialog { await lovelace.saveConfig( this._emptyConfig ? EMPTY_CONFIG - : await expandLovelaceConfigStrategies(lovelace.config, this.hass, { - narrow: this._params.narrow, - }) + : await expandLovelaceConfigStrategies(lovelace.config, this.hass) ); lovelace.setEditMode(true); this._saving = false; diff --git a/src/panels/lovelace/ha-panel-lovelace.ts b/src/panels/lovelace/ha-panel-lovelace.ts index 587a9746c4..c1dbe2ed3e 100644 --- a/src/panels/lovelace/ha-panel-lovelace.ts +++ b/src/panels/lovelace/ha-panel-lovelace.ts @@ -167,8 +167,7 @@ export class LovelacePanel extends LitElement { { type: DEFAULT_STRATEGY, }, - this.hass!, - { narrow: this.narrow } + this.hass! ); this._setLovelaceConfig(conf, undefined, "generated"); this._panelState = "loaded"; @@ -258,8 +257,7 @@ export class LovelacePanel extends LitElement { if (rawConf.strategy) { conf = await generateLovelaceDashboardStrategy( rawConf.strategy, - this.hass!, - { narrow: this.narrow } + this.hass! ); } else { conf = rawConf; @@ -276,8 +274,7 @@ export class LovelacePanel extends LitElement { { type: DEFAULT_STRATEGY, }, - this.hass!, - { narrow: this.narrow } + this.hass! ); confMode = "generated"; } finally { @@ -365,8 +362,7 @@ export class LovelacePanel extends LitElement { if (newConfig.strategy) { conf = await generateLovelaceDashboardStrategy( newConfig.strategy, - this.hass!, - { narrow: this.narrow } + this.hass! ); } else { conf = newConfig; @@ -404,8 +400,7 @@ export class LovelacePanel extends LitElement { { type: DEFAULT_STRATEGY, }, - this.hass!, - { narrow: this.narrow } + this.hass! ); this._updateLovelace({ config: generatedConf, diff --git a/src/panels/lovelace/strategies/get-strategy.ts b/src/panels/lovelace/strategies/get-strategy.ts index 4f30b7c175..906138c983 100644 --- a/src/panels/lovelace/strategies/get-strategy.ts +++ b/src/panels/lovelace/strategies/get-strategy.ts @@ -8,7 +8,6 @@ import { isLegacyStrategy } from "./legacy-strategy"; import { LovelaceDashboardStrategy, LovelaceStrategy, - LovelaceStrategyParams, LovelaceViewStrategy, } from "./types"; @@ -77,8 +76,7 @@ const generateStrategy = async ( configType: T, renderError: (err: string | Error) => StrategyConfig, strategyConfig: LovelaceStrategyConfig, - hass: HomeAssistant, - params: LovelaceStrategyParams + hass: HomeAssistant ): Promise> => { const strategyType = strategyConfig.type; if (!strategyType) { @@ -95,7 +93,7 @@ const generateStrategy = async ( return (await strategy.generateDashboard({ config: { strategy: strategyConfig, views: [] }, hass, - narrow: params.narrow, + narrow: undefined, })) as StrategyConfig; } if (configType === "view" && "generateView" in strategy) { @@ -103,7 +101,7 @@ const generateStrategy = async ( config: { views: [] }, view: { strategy: strategyConfig }, hass, - narrow: params.narrow, + narrow: undefined, })) as StrategyConfig; } } @@ -115,7 +113,7 @@ const generateStrategy = async ( delete config.options; - return await strategy.generate(config, hass, params); + return await strategy.generate(config, hass); } catch (err: any) { if (err.message !== "timeout") { // eslint-disable-next-line @@ -128,8 +126,7 @@ const generateStrategy = async ( export const generateLovelaceDashboardStrategy = async ( strategyConfig: LovelaceStrategyConfig, - hass: HomeAssistant, - params: LovelaceStrategyParams + hass: HomeAssistant ): Promise => generateStrategy( "dashboard", @@ -147,14 +144,12 @@ export const generateLovelaceDashboardStrategy = async ( ], }), strategyConfig, - hass, - params + hass ); export const generateLovelaceViewStrategy = async ( strategyConfig: LovelaceStrategyConfig, - hass: HomeAssistant, - params: LovelaceStrategyParams + hass: HomeAssistant ): Promise => generateStrategy( "view", @@ -167,8 +162,7 @@ export const generateLovelaceViewStrategy = async ( ], }), strategyConfig, - hass, - params + hass ); /** @@ -176,18 +170,15 @@ export const generateLovelaceViewStrategy = async ( */ export const expandLovelaceConfigStrategies = async ( config: LovelaceConfig, - hass: HomeAssistant, - params: LovelaceStrategyParams + hass: HomeAssistant ): Promise => { const newConfig = config.strategy - ? await generateLovelaceDashboardStrategy(config.strategy, hass, params) + ? await generateLovelaceDashboardStrategy(config.strategy, hass) : { ...config }; newConfig.views = await Promise.all( newConfig.views.map((view) => - view.strategy - ? generateLovelaceViewStrategy(view.strategy, hass, params) - : view + view.strategy ? generateLovelaceViewStrategy(view.strategy, hass) : view ) ); diff --git a/src/panels/lovelace/strategies/original-states-dashboard-strategy.ts b/src/panels/lovelace/strategies/original-states-dashboard-strategy.ts index 99b5366ac1..b5144549f0 100644 --- a/src/panels/lovelace/strategies/original-states-dashboard-strategy.ts +++ b/src/panels/lovelace/strategies/original-states-dashboard-strategy.ts @@ -2,14 +2,12 @@ import { ReactiveElement } from "lit"; import { customElement } from "lit/decorators"; import { LovelaceConfig, LovelaceStrategyConfig } from "../../../data/lovelace"; import { HomeAssistant } from "../../../types"; -import { LovelaceStrategyParams } from "./types"; @customElement("original-states-dashboard-strategy") export class OriginalStatesDashboardStrategy extends ReactiveElement { static async generate( _config: LovelaceStrategyConfig, - hass: HomeAssistant, - _params?: LovelaceStrategyParams + hass: HomeAssistant ): Promise { return { title: hass.config.location_name, diff --git a/src/panels/lovelace/strategies/original-states-view-strategy.ts b/src/panels/lovelace/strategies/original-states-view-strategy.ts index a6e163f758..dc46dbaa42 100644 --- a/src/panels/lovelace/strategies/original-states-view-strategy.ts +++ b/src/panels/lovelace/strategies/original-states-view-strategy.ts @@ -9,14 +9,12 @@ import { } from "../../../data/lovelace"; import { HomeAssistant } from "../../../types"; import { generateDefaultViewConfig } from "../common/generate-lovelace-config"; -import { LovelaceStrategyParams } from "./types"; @customElement("original-states-view-strategy") export class OriginalStatesViewStrategy extends ReactiveElement { static async generate( _config: LovelaceStrategyConfig, - hass: HomeAssistant, - _params?: LovelaceStrategyParams + hass: HomeAssistant ): Promise { if (hass.config.state === STATE_NOT_RUNNING) { return { diff --git a/src/panels/lovelace/strategies/types.ts b/src/panels/lovelace/strategies/types.ts index 8b807a61e2..42220ffa15 100644 --- a/src/panels/lovelace/strategies/types.ts +++ b/src/panels/lovelace/strategies/types.ts @@ -5,16 +5,8 @@ import { } from "../../../data/lovelace"; import { HomeAssistant } from "../../../types"; -export type LovelaceStrategyParams = { - narrow?: boolean; -}; - export type LovelaceStrategy = { - generate( - config: LovelaceStrategyConfig, - hass: HomeAssistant, - params?: LovelaceStrategyParams - ): Promise; + generate(config: LovelaceStrategyConfig, hass: HomeAssistant): Promise; }; export interface LovelaceDashboardStrategy diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts index e00e5af00e..407688e107 100644 --- a/src/panels/lovelace/views/hui-view.ts +++ b/src/panels/lovelace/views/hui-view.ts @@ -192,8 +192,7 @@ export class HUIView extends ReactiveElement { isStrategy = true; viewConfig = await generateLovelaceViewStrategy( viewConfig.strategy, - this.hass!, - { narrow: this.narrow } + this.hass! ); }