mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 16:26:43 +00:00
Automation change mode dialog (#13591)
This commit is contained in:
parent
37f6b4f6be
commit
3ef567dcd5
@ -9,6 +9,7 @@ import { DeviceCondition, DeviceTrigger } from "./device_automation";
|
||||
import { Action, MODES } from "./script";
|
||||
|
||||
export const AUTOMATION_DEFAULT_MODE: typeof MODES[number] = "single";
|
||||
export const AUTOMATION_DEFAULT_MAX = 10;
|
||||
|
||||
export interface AutomationEntity extends HassEntityBase {
|
||||
attributes: HassEntityAttributeBase & {
|
||||
|
@ -0,0 +1,166 @@
|
||||
import "@material/mwc-button";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import { createCloseHeading } from "../../../../components/ha-dialog";
|
||||
import "../../../../components/ha-textfield";
|
||||
import "../../../../components/ha-select";
|
||||
import { HassDialog } from "../../../../dialogs/make-dialog-manager";
|
||||
import { haStyle, haStyleDialog } from "../../../../resources/styles";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import type { AutomationModeDialog } from "./show-dialog-automation-mode";
|
||||
import {
|
||||
AUTOMATION_DEFAULT_MAX,
|
||||
AUTOMATION_DEFAULT_MODE,
|
||||
} from "../../../../data/automation";
|
||||
import { documentationUrl } from "../../../../util/documentation-url";
|
||||
import { isMaxMode, MODES } from "../../../../data/script";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import { stopPropagation } from "../../../../common/dom/stop_propagation";
|
||||
|
||||
@customElement("ha-dialog-automation-mode")
|
||||
class DialogAutomationMode extends LitElement implements HassDialog {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@state() private _opened = false;
|
||||
|
||||
private _params!: AutomationModeDialog;
|
||||
|
||||
@state() private _newMode: typeof MODES[number] = AUTOMATION_DEFAULT_MODE;
|
||||
|
||||
@state() private _newMax?: number;
|
||||
|
||||
public showDialog(params: AutomationModeDialog): void {
|
||||
this._opened = true;
|
||||
this._params = params;
|
||||
this._newMode = params.config.mode || AUTOMATION_DEFAULT_MODE;
|
||||
this._newMax = isMaxMode(this._newMode)
|
||||
? params.config.max || AUTOMATION_DEFAULT_MAX
|
||||
: undefined;
|
||||
}
|
||||
|
||||
public closeDialog(): void {
|
||||
this._params.onClose();
|
||||
|
||||
if (this._opened) {
|
||||
fireEvent(this, "dialog-closed", { dialog: this.localName });
|
||||
}
|
||||
this._opened = false;
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this._opened) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
return html`
|
||||
<ha-dialog
|
||||
open
|
||||
@closed=${this.closeDialog}
|
||||
.heading=${createCloseHeading(
|
||||
this.hass,
|
||||
this.hass.localize("ui.panel.config.automation.editor.change_mode")
|
||||
)}
|
||||
>
|
||||
<ha-select
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.modes.label"
|
||||
)}
|
||||
.value=${this._newMode}
|
||||
@selected=${this._modeChanged}
|
||||
@closed=${stopPropagation}
|
||||
fixedMenuPosition
|
||||
.helper=${html`
|
||||
<a
|
||||
style="color: var(--secondary-text-color)"
|
||||
href=${documentationUrl(this.hass, "/docs/automation/modes/")}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.modes.learn_more"
|
||||
)}</a
|
||||
>
|
||||
`}
|
||||
>
|
||||
${MODES.map(
|
||||
(mode) => html`
|
||||
<mwc-list-item .value=${mode}>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.automation.editor.modes.${mode}`
|
||||
) || mode}
|
||||
</mwc-list-item>
|
||||
`
|
||||
)}
|
||||
</ha-select>
|
||||
${isMaxMode(this._newMode)
|
||||
? html`
|
||||
<br /><ha-textfield
|
||||
.label=${this.hass.localize(
|
||||
`ui.panel.config.automation.editor.max.${this._newMode}`
|
||||
)}
|
||||
type="number"
|
||||
name="max"
|
||||
.value=${this._newMax?.toString() ?? ""}
|
||||
@change=${this._valueChanged}
|
||||
class="max"
|
||||
>
|
||||
</ha-textfield>
|
||||
`
|
||||
: html``}
|
||||
|
||||
<mwc-button @click=${this.closeDialog} slot="secondaryAction">
|
||||
${this.hass.localize("ui.dialogs.generic.cancel")}
|
||||
</mwc-button>
|
||||
<mwc-button @click=${this._save} slot="primaryAction">
|
||||
${this.hass.localize("ui.panel.config.automation.editor.change_mode")}
|
||||
</mwc-button>
|
||||
</ha-dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
private _modeChanged(ev) {
|
||||
const mode = ev.target.value;
|
||||
this._newMode = mode;
|
||||
if (!isMaxMode(mode)) {
|
||||
this._newMax = undefined;
|
||||
} else if (!this._newMax) {
|
||||
this._newMax = AUTOMATION_DEFAULT_MAX;
|
||||
}
|
||||
}
|
||||
|
||||
private _valueChanged(ev: CustomEvent) {
|
||||
ev.stopPropagation();
|
||||
const target = ev.target as any;
|
||||
if (target.name === "max") {
|
||||
this._newMax = Number(target.value);
|
||||
}
|
||||
}
|
||||
|
||||
private _save(): void {
|
||||
this._params.updateAutomation({
|
||||
...this._params.config,
|
||||
mode: this._newMode,
|
||||
max: this._newMax,
|
||||
});
|
||||
this.closeDialog();
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
haStyle,
|
||||
haStyleDialog,
|
||||
css`
|
||||
ha-select,
|
||||
ha-textfield {
|
||||
display: block;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-dialog-automation-mode": DialogAutomationMode;
|
||||
}
|
||||
}
|
@ -0,0 +1,22 @@
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import type { AutomationConfig } from "../../../../data/automation";
|
||||
|
||||
export const loadAutomationModeDialog = () =>
|
||||
import("./dialog-automation-mode");
|
||||
|
||||
export interface AutomationModeDialog {
|
||||
config: AutomationConfig;
|
||||
updateAutomation: (config: AutomationConfig) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const showAutomationModeDialog = (
|
||||
element: HTMLElement,
|
||||
dialogParams: AutomationModeDialog
|
||||
): void => {
|
||||
fireEvent(element, "show-dialog", {
|
||||
dialogTag: "ha-dialog-automation-mode",
|
||||
dialogImport: loadAutomationModeDialog,
|
||||
dialogParams,
|
||||
});
|
||||
};
|
@ -7,6 +7,8 @@ import { HassDialog } from "../../../../dialogs/make-dialog-manager";
|
||||
import { haStyle, haStyleDialog } from "../../../../resources/styles";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import type { AutomationRenameDialog } from "./show-dialog-automation-rename";
|
||||
import "../../../../components/ha-textarea";
|
||||
import "../../../../components/ha-textfield";
|
||||
|
||||
@customElement("ha-dialog-automation-rename")
|
||||
class DialogAutomationRename extends LitElement implements HassDialog {
|
||||
@ -51,7 +53,7 @@ class DialogAutomationRename extends LitElement implements HassDialog {
|
||||
>
|
||||
<ha-textfield
|
||||
dialogInitialFocus
|
||||
value=${this._newName}
|
||||
.value=${this._newName}
|
||||
.placeholder=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.default_name"
|
||||
)}
|
||||
|
@ -10,6 +10,7 @@ import "../../../components/ha-markdown";
|
||||
import "../../../components/ha-selector/ha-selector";
|
||||
import "../../../components/ha-settings-row";
|
||||
import "../../../components/ha-textfield";
|
||||
import "../../../components/ha-alert";
|
||||
import { BlueprintAutomationConfig } from "../../../data/automation";
|
||||
import {
|
||||
BlueprintOrError,
|
||||
@ -49,6 +50,20 @@ export class HaBlueprintAutomationEditor extends LitElement {
|
||||
protected render() {
|
||||
const blueprint = this._blueprint;
|
||||
return html`
|
||||
${this.stateObj?.state === "off"
|
||||
? html`
|
||||
<ha-alert alert-type="info">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.disabled"
|
||||
)}
|
||||
<mwc-button slot="action" @click=${this._enable}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.enable"
|
||||
)}
|
||||
</mwc-button>
|
||||
</ha-alert>
|
||||
`
|
||||
: ""}
|
||||
<ha-card
|
||||
outlined
|
||||
class="blueprint"
|
||||
@ -178,6 +193,15 @@ export class HaBlueprintAutomationEditor extends LitElement {
|
||||
});
|
||||
}
|
||||
|
||||
private async _enable(): Promise<void> {
|
||||
if (!this.hass || !this.stateObj) {
|
||||
return;
|
||||
}
|
||||
await this.hass.callService("automation", "turn_on", {
|
||||
entity_id: this.stateObj.entity_id,
|
||||
});
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
haStyle,
|
||||
@ -220,6 +244,10 @@ export class HaBlueprintAutomationEditor extends LitElement {
|
||||
--settings-row-prefix-display: contents;
|
||||
border-top: 1px solid var(--divider-color);
|
||||
}
|
||||
ha-alert {
|
||||
margin-bottom: 16px;
|
||||
display: block;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
@ -3,6 +3,7 @@ import {
|
||||
mdiCheck,
|
||||
mdiContentDuplicate,
|
||||
mdiContentSave,
|
||||
mdiDebugStepOver,
|
||||
mdiDelete,
|
||||
mdiDotsVertical,
|
||||
mdiInformationOutline,
|
||||
@ -55,6 +56,7 @@ import { haStyle } from "../../../resources/styles";
|
||||
import { HomeAssistant, Route } from "../../../types";
|
||||
import { showToast } from "../../../util/toast";
|
||||
import "../ha-config-section";
|
||||
import { showAutomationModeDialog } from "./automation-mode-dialog/show-dialog-automation-mode";
|
||||
import { showAutomationRenameDialog } from "./automation-rename-dialog/show-dialog-automation-rename";
|
||||
import "./blueprint-automation-editor";
|
||||
import "./manual-automation-editor";
|
||||
@ -161,11 +163,33 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
</a>`
|
||||
: ""}
|
||||
|
||||
<mwc-list-item graphic="icon" @click=${this._promptAutomationAlias}>
|
||||
<mwc-list-item
|
||||
graphic="icon"
|
||||
@click=${this._promptAutomationAlias}
|
||||
.disabled=${!this.automationId || this._mode === "yaml"}
|
||||
>
|
||||
${this.hass.localize("ui.panel.config.automation.editor.rename")}
|
||||
<ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
|
||||
${this._config && !("use_blueprint" in this._config)
|
||||
? html`
|
||||
<mwc-list-item
|
||||
graphic="icon"
|
||||
@click=${this._promptAutomationMode}
|
||||
.disabled=${!this.automationId || this._mode === "yaml"}
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.change_mode"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiDebugStepOver}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
`
|
||||
: ""}
|
||||
|
||||
<mwc-list-item
|
||||
.disabled=${!this.automationId}
|
||||
graphic="icon"
|
||||
@ -208,12 +232,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
.disabled=${!stateObj}
|
||||
@click=${this._toggle}
|
||||
>
|
||||
${!stateObj || stateObj.state === "off"
|
||||
${stateObj?.state === "off"
|
||||
? this.hass.localize("ui.panel.config.automation.editor.enable")
|
||||
: this.hass.localize("ui.panel.config.automation.editor.disable")}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${!stateObj || stateObj.state === "off"
|
||||
.path=${stateObj?.state === "off"
|
||||
? mdiPlayCircleOutline
|
||||
: mdiStopCircleOutline}
|
||||
></ha-svg-icon>
|
||||
@ -270,18 +294,20 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
`
|
||||
: this._mode === "yaml"
|
||||
? html`
|
||||
${!this.narrow
|
||||
${stateObj?.state === "off"
|
||||
? html`
|
||||
<ha-card outlined>
|
||||
<div class="card-header">
|
||||
${this._config.alias ||
|
||||
this.hass.localize(
|
||||
"ui.panel.config.automation.editor.default_name"
|
||||
<ha-alert alert-type="info">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.disabled"
|
||||
)}
|
||||
<mwc-button slot="action" @click=${this._toggle}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.enable"
|
||||
)}
|
||||
</div>
|
||||
</ha-card>
|
||||
</mwc-button>
|
||||
</ha-alert>
|
||||
`
|
||||
: ``}
|
||||
: ""}
|
||||
<ha-yaml-editor
|
||||
.hass=${this.hass}
|
||||
.defaultValue=${this._preprocessYaml()}
|
||||
@ -548,6 +574,21 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
});
|
||||
}
|
||||
|
||||
private async _promptAutomationMode(): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
showAutomationModeDialog(this, {
|
||||
config: this._config!,
|
||||
updateAutomation: (config) => {
|
||||
this._config = config;
|
||||
this._dirty = true;
|
||||
this.requestUpdate();
|
||||
resolve();
|
||||
},
|
||||
onClose: () => resolve(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private async _saveAutomation(): Promise<void> {
|
||||
const id = this.automationId || String(Date.now());
|
||||
if (!this._config!.alias) {
|
||||
|
@ -1,21 +1,19 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import { mdiHelpCircle, mdiRobot, mdiSort, mdiTextBoxEdit } from "@mdi/js";
|
||||
import { mdiHelpCircle, mdiSort, mdiTextBoxEdit } from "@mdi/js";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { css, CSSResultGroup, html, LitElement } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import "../../../components/entity/ha-entity-toggle";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-textarea";
|
||||
import "../../../components/ha-textfield";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-alert";
|
||||
import {
|
||||
AUTOMATION_DEFAULT_MODE,
|
||||
Condition,
|
||||
ManualAutomationConfig,
|
||||
Trigger,
|
||||
} from "../../../data/automation";
|
||||
import { Action, isMaxMode, MODES } from "../../../data/script";
|
||||
import { Action } from "../../../data/script";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import { documentationUrl } from "../../../util/documentation-url";
|
||||
@ -43,71 +41,20 @@ export class HaManualAutomationEditor extends LitElement {
|
||||
|
||||
protected render() {
|
||||
return html`
|
||||
<ha-card outlined>
|
||||
${this.stateObj && this.stateObj.state === "off"
|
||||
? html`<div class="disabled-bar">
|
||||
${this.stateObj?.state === "off"
|
||||
? html`
|
||||
<ha-alert alert-type="info">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.disabled"
|
||||
)}
|
||||
</div>`
|
||||
: ""}
|
||||
|
||||
<ha-expansion-panel leftChevron>
|
||||
<h3 slot="header">
|
||||
<ha-svg-icon class="settings-icon" .path=${mdiRobot}></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.automation_settings"
|
||||
)}
|
||||
</h3>
|
||||
<div class="card-content">
|
||||
<ha-select
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.modes.label"
|
||||
)}
|
||||
.value=${this.config.mode || AUTOMATION_DEFAULT_MODE}
|
||||
@selected=${this._modeChanged}
|
||||
fixedMenuPosition
|
||||
.helper=${html`
|
||||
<a
|
||||
style="color: var(--secondary-text-color)"
|
||||
href=${documentationUrl(this.hass, "/docs/automation/modes/")}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.modes.learn_more"
|
||||
)}</a
|
||||
>
|
||||
`}
|
||||
>
|
||||
${MODES.map(
|
||||
(mode) => html`
|
||||
<mwc-list-item .value=${mode}>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.automation.editor.modes.${mode}`
|
||||
) || mode}
|
||||
</mwc-list-item>
|
||||
`
|
||||
)}
|
||||
</ha-select>
|
||||
${this.config.mode && isMaxMode(this.config.mode)
|
||||
? html`
|
||||
<br /><ha-textfield
|
||||
.label=${this.hass.localize(
|
||||
`ui.panel.config.automation.editor.max.${this.config.mode}`
|
||||
)}
|
||||
type="number"
|
||||
name="max"
|
||||
.value=${this.config.max || "10"}
|
||||
@change=${this._valueChanged}
|
||||
class="max"
|
||||
>
|
||||
</ha-textfield>
|
||||
`
|
||||
: html``}
|
||||
</div>
|
||||
</ha-expansion-panel>
|
||||
</ha-card>
|
||||
|
||||
<mwc-button slot="action" @click=${this._enable}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.enable"
|
||||
)}
|
||||
</mwc-button>
|
||||
</ha-alert>
|
||||
`
|
||||
: ""}
|
||||
<div class="header">
|
||||
<h2 id="triggers-heading" class="name">
|
||||
${this.hass.localize(
|
||||
@ -221,48 +168,6 @@ export class HaManualAutomationEditor extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private _valueChanged(ev: CustomEvent) {
|
||||
ev.stopPropagation();
|
||||
const target = ev.target as any;
|
||||
const name = target.name;
|
||||
if (!name) {
|
||||
return;
|
||||
}
|
||||
let newVal = target.value;
|
||||
if (target.type === "number") {
|
||||
newVal = Number(newVal);
|
||||
}
|
||||
if ((this.config![name] || "") === newVal) {
|
||||
return;
|
||||
}
|
||||
fireEvent(this, "value-changed", {
|
||||
value: { ...this.config!, [name]: newVal },
|
||||
});
|
||||
}
|
||||
|
||||
private _modeChanged(ev) {
|
||||
const mode = ev.target.value;
|
||||
|
||||
if (
|
||||
mode === this.config!.mode ||
|
||||
(!this.config!.mode && mode === MODES[0])
|
||||
) {
|
||||
return;
|
||||
}
|
||||
const value = {
|
||||
...this.config!,
|
||||
mode,
|
||||
};
|
||||
|
||||
if (!isMaxMode(mode)) {
|
||||
delete value.max;
|
||||
}
|
||||
|
||||
fireEvent(this, "value-changed", {
|
||||
value,
|
||||
});
|
||||
}
|
||||
|
||||
private _triggerChanged(ev: CustomEvent): void {
|
||||
ev.stopPropagation();
|
||||
fireEvent(this, "value-changed", {
|
||||
@ -287,6 +192,15 @@ export class HaManualAutomationEditor extends LitElement {
|
||||
});
|
||||
}
|
||||
|
||||
private async _enable(): Promise<void> {
|
||||
if (!this.hass || !this.stateObj) {
|
||||
return;
|
||||
}
|
||||
await this.hass.callService("automation", "turn_on", {
|
||||
entity_id: this.stateObj.entity_id,
|
||||
});
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
haStyle,
|
||||
@ -300,10 +214,6 @@ export class HaManualAutomationEditor extends LitElement {
|
||||
.link-button-row {
|
||||
padding: 14px;
|
||||
}
|
||||
ha-textarea,
|
||||
ha-textfield {
|
||||
display: block;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
@ -320,6 +230,9 @@ export class HaManualAutomationEditor extends LitElement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header:first-child {
|
||||
margin-top: -16px;
|
||||
}
|
||||
.header .name {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
@ -340,9 +253,6 @@ export class HaManualAutomationEditor extends LitElement {
|
||||
.card-content {
|
||||
padding: 16px;
|
||||
}
|
||||
.card-content ha-textarea:first-child {
|
||||
margin-top: -16px;
|
||||
}
|
||||
.settings-icon {
|
||||
display: none;
|
||||
}
|
||||
|
@ -1847,6 +1847,7 @@
|
||||
"no_blueprints": "You don't have any blueprints",
|
||||
"no_inputs": "This blueprint doesn't have any inputs."
|
||||
},
|
||||
"change_mode": "Change mode",
|
||||
"modes": {
|
||||
"label": "Mode",
|
||||
"learn_more": "Learn about modes",
|
||||
|
Loading…
x
Reference in New Issue
Block a user