From 7ca379e0a1a4a4ae9a1dffc60dcfe8875d4d005e Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Thu, 28 Apr 2022 15:53:56 +0200 Subject: [PATCH] Hide and sort secondary device automations (#12496) --- .../device/ha-device-automation-picker.ts | 10 ++-- src/data/device_automation.ts | 14 ++++++ .../ha-device-automation-card.ts | 47 +++++++++++++++---- .../ha-device-automation-dialog.ts | 7 +-- 4 files changed, 63 insertions(+), 15 deletions(-) diff --git a/src/components/device/ha-device-automation-picker.ts b/src/components/device/ha-device-automation-picker.ts index 57b46e5b5b..9e12fe6e8e 100644 --- a/src/components/device/ha-device-automation-picker.ts +++ b/src/components/device/ha-device-automation-picker.ts @@ -5,6 +5,7 @@ import { fireEvent } from "../../common/dom/fire_event"; import { DeviceAutomation, deviceAutomationsEqual, + sortDeviceAutomations, } from "../../data/device_automation"; import { HomeAssistant } from "../../types"; import "../ha-select"; @@ -127,7 +128,9 @@ export abstract class HaDeviceAutomationPicker< private async _updateDeviceInfo() { this._automations = this.deviceId - ? await this._fetchDeviceAutomations(this.hass, this.deviceId) + ? (await this._fetchDeviceAutomations(this.hass, this.deviceId)).sort( + sortDeviceAutomations + ) : // No device, clear the list of automations []; @@ -161,8 +164,9 @@ export abstract class HaDeviceAutomationPicker< if (this.value && deviceAutomationsEqual(automation, this.value)) { return; } - fireEvent(this, "change"); - fireEvent(this, "value-changed", { value: automation }); + const value = { ...automation }; + delete value.metadata; + fireEvent(this, "value-changed", { value }); } static get styles(): CSSResultGroup { diff --git a/src/data/device_automation.ts b/src/data/device_automation.ts index b047f87f1e..9a6685e8bd 100644 --- a/src/data/device_automation.ts +++ b/src/data/device_automation.ts @@ -11,6 +11,7 @@ export interface DeviceAutomation { type?: string; subtype?: string; event?: string; + metadata?: { secondary: boolean }; } export interface DeviceAction extends DeviceAutomation { @@ -179,3 +180,16 @@ export const localizeDeviceAutomationTrigger = ( (trigger.subtype ? `"${trigger.subtype}" ${trigger.type}` : trigger.type!) ); }; + +export const sortDeviceAutomations = ( + automationA: DeviceAutomation, + automationB: DeviceAutomation +) => { + if (automationA.metadata?.secondary && !automationB.metadata?.secondary) { + return 1; + } + if (!automationA.metadata?.secondary && automationB.metadata?.secondary) { + return -1; + } + return 0; +}; diff --git a/src/panels/config/devices/device-detail/ha-device-automation-card.ts b/src/panels/config/devices/device-detail/ha-device-automation-card.ts index 47577805c3..59ba9aa5d2 100644 --- a/src/panels/config/devices/device-detail/ha-device-automation-card.ts +++ b/src/panels/config/devices/device-detail/ha-device-automation-card.ts @@ -1,5 +1,5 @@ -import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; -import { property } from "lit/decorators"; +import { css, html, LitElement, TemplateResult } from "lit"; +import { property, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-card"; import "../../../../components/ha-chip"; @@ -10,6 +10,7 @@ import { DeviceAutomation, } from "../../../../data/device_automation"; import { showScriptEditor } from "../../../../data/script"; +import { buttonLinkStyle } from "../../../../resources/styles"; import { HomeAssistant } from "../../../../types"; declare global { @@ -29,6 +30,8 @@ export abstract class HaDeviceAutomationCard< @property() public automations: T[] = []; + @state() public _showSecondary = false; + protected headerKey = ""; protected type = ""; @@ -60,28 +63,47 @@ export abstract class HaDeviceAutomationCard< if (this.automations.length === 0) { return html``; } + const automations = this._showSecondary + ? this.automations + : this.automations.filter( + (automation) => automation.metadata?.secondary === false + ); return html`

${this.hass.localize(this.headerKey)}

- ${this.automations.map( + ${automations.map( (automation, idx) => html` - + ${this._localizeDeviceAutomation(this.hass, automation)} ` )} + ${!this._showSecondary && automations.length < this.automations.length + ? html`` + : ""}
`; } + private _toggleSecondary() { + this._showSecondary = !this._showSecondary; + } + private _handleAutomationClicked(ev: CustomEvent) { - const automation = this.automations[(ev.currentTarget as any).index]; + const automation = { ...this.automations[(ev.currentTarget as any).index] }; if (!automation) { return; } + delete automation.metadata; if (this.script) { showScriptEditor({ sequence: [automation as DeviceAction] }); fireEvent(this, "entry-selected"); @@ -93,11 +115,18 @@ export abstract class HaDeviceAutomationCard< fireEvent(this, "entry-selected"); } - static get styles(): CSSResultGroup { - return css` + static styles = [ + buttonLinkStyle, + css` h3 { color: var(--primary-text-color); } - `; - } + .secondary { + --ha-chip-background-color: rgba(var(--rgb-primary-text-color), 0.07); + } + button.link { + color: var(--primary-color); + } + `, + ]; } diff --git a/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts b/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts index cef11fc0fe..de0c862a0c 100644 --- a/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts +++ b/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts @@ -10,6 +10,7 @@ import { fetchDeviceActions, fetchDeviceConditions, fetchDeviceTriggers, + sortDeviceAutomations, } from "../../../../data/device_automation"; import { haStyleDialog } from "../../../../resources/styles"; import { HomeAssistant } from "../../../../types"; @@ -63,16 +64,16 @@ export class DialogDeviceAutomation extends LitElement { const { device, script } = this._params; fetchDeviceActions(this.hass, device.id).then((actions) => { - this._actions = actions; + this._actions = actions.sort(sortDeviceAutomations); }); if (script) { return; } fetchDeviceTriggers(this.hass, device.id).then((triggers) => { - this._triggers = triggers; + this._triggers = triggers.sort(sortDeviceAutomations); }); fetchDeviceConditions(this.hass, device.id).then((conditions) => { - this._conditions = conditions; + this._conditions = conditions.sort(sortDeviceAutomations); }); }