diff --git a/src/data/script.ts b/src/data/script.ts index f0b5e7151b51..cf28dc919559 100644 --- a/src/data/script.ts +++ b/src/data/script.ts @@ -242,8 +242,12 @@ export interface StopAction extends BaseAction { error?: boolean; } +export interface SequenceAction extends BaseAction { + sequence: ManualScriptConfig | Action | (ManualScriptConfig | Action)[]; +} + export interface ParallelAction extends BaseAction { - parallel: ManualScriptConfig | Action | (ManualScriptConfig | Action)[]; + parallel: SequenceAction | SequenceAction[]; } interface UnknownAction extends BaseAction { diff --git a/src/panels/config/automation/action/types/ha-automation-action-parallel.ts b/src/panels/config/automation/action/types/ha-automation-action-parallel.ts index 39ee18ee26a7..1af44ed28157 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-parallel.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-parallel.ts @@ -1,5 +1,6 @@ -import { CSSResultGroup, html, LitElement } from "lit"; +import { css, CSSResultGroup, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; +import { mdiDelete, mdiPlus } from "@mdi/js"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/ha-textfield"; import { Action, ParallelAction } from "../../../../../data/script"; @@ -7,6 +8,7 @@ import { haStyle } from "../../../../../resources/styles"; import type { HomeAssistant } from "../../../../../types"; import "../ha-automation-action"; import type { ActionElement } from "../ha-automation-action-row"; +import { ensureArray } from "../../../../../common/array/ensure-array"; @customElement("ha-automation-action-parallel") export class HaParallelAction extends LitElement implements ActionElement { @@ -20,38 +22,122 @@ export class HaParallelAction extends LitElement implements ActionElement { public static get defaultConfig() { return { - parallel: [], + parallel: [{ sequence: [] }], }; } protected render() { const action = this.action; + action.parallel = (action.parallel ? ensureArray(action.parallel) : []).map( + (sequenceAction) => + sequenceAction.sequence + ? sequenceAction + : { sequence: [sequenceAction] } + ); + return html` - + html` + + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.type.parallel.sequence" + )}: + + + + ` + )} + + @click=${this._addSequence} + > + + `; } - private _actionsChanged(ev: CustomEvent) { + private _actionChanged(ev: CustomEvent) { ev.stopPropagation(); const value = ev.detail.value as Action[]; + const index = (ev.target as any).idx; + const parallel = this.action.parallel + ? [...ensureArray(this.action.parallel)] + : []; + parallel[index].sequence = value; + fireEvent(this, "value-changed", { + value: { ...this.action, parallel }, + }); + } + + private _addSequence() { + const parallel = this.action.parallel + ? [...ensureArray(this.action.parallel)] + : []; + parallel.push({ sequence: [] }); + fireEvent(this, "value-changed", { + value: { ...this.action, parallel }, + }); + } + + private _removeSequence(ev: CustomEvent) { + const index = (ev.currentTarget as any).idx; + const parallel = this.action.parallel + ? [...ensureArray(this.action.parallel)] + : []; + parallel.splice(index, 1); fireEvent(this, "value-changed", { - value: { - ...this.action, - parallel: value, - }, + value: { ...this.action, parallel }, }); } static get styles(): CSSResultGroup { - return haStyle; + return [ + haStyle, + css` + ha-card { + margin: 16px 0; + } + .add-card mwc-button { + display: block; + text-align: center; + } + ha-icon-button { + position: absolute; + right: 0; + padding: 4px; + } + ha-svg-icon { + height: 20px; + } + .link-button-row { + padding: 14px; + } + `, + ]; } } diff --git a/src/translations/en.json b/src/translations/en.json index e3047241c3d5..b1a78adb6708 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2879,6 +2879,9 @@ }, "parallel": { "label": "Run in parallel", + "add_sequence": "Add parallel actions", + "remove_sequence": "Remove actions", + "sequence": "Actions", "description": { "full": "Run {number} {number, plural,\n one {action}\n other {actions}\n} in parallel" }