mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
20220902.0 (#13571)
This commit is contained in:
Paulus Schoutsen
GitHub
commit
8ec2c38f72
@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
|
||||
|
||||
[project]
|
||||
name = "home-assistant-frontend"
|
||||
version = "20220901.0"
|
||||
version = "20220902.0"
|
||||
license = {text = "Apache-2.0"}
|
||||
description = "The Home Assistant frontend"
|
||||
readme = "README.md"
|
||||
|
||||
@ -3,6 +3,8 @@ import { mdiDotsVertical } from "@mdi/js";
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
import { css, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { haStyle } from "../resources/styles";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-button-menu";
|
||||
import "./ha-icon-button";
|
||||
@ -16,6 +18,7 @@ export interface IconOverflowMenuItem {
|
||||
disabled?: boolean;
|
||||
tooltip?: string;
|
||||
onClick: CallableFunction;
|
||||
warning?: boolean;
|
||||
}
|
||||
|
||||
@customElement("ha-icon-overflow-menu")
|
||||
@ -49,9 +52,13 @@ export class HaIconOverflowMenu extends LitElement {
|
||||
graphic="icon"
|
||||
.disabled=${item.disabled}
|
||||
@click=${item.action}
|
||||
class=${classMap({ warning: Boolean(item.warning) })}
|
||||
>
|
||||
<div slot="graphic">
|
||||
<ha-svg-icon .path=${item.path}></ha-svg-icon>
|
||||
<ha-svg-icon
|
||||
class=${classMap({ warning: Boolean(item.warning) })}
|
||||
.path=${item.path}
|
||||
></ha-svg-icon>
|
||||
</div>
|
||||
${item.label}
|
||||
</mwc-list-item>
|
||||
@ -81,7 +88,8 @@ export class HaIconOverflowMenu extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
protected _handleIconOverflowMenuOpened() {
|
||||
protected _handleIconOverflowMenuOpened(e) {
|
||||
e.stopPropagation();
|
||||
// If this component is used inside a data table, the z-index of the row
|
||||
// needs to be increased. Otherwise the ha-button-menu would be displayed
|
||||
// underneath the next row in the table.
|
||||
@ -99,12 +107,15 @@ export class HaIconOverflowMenu extends LitElement {
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
`;
|
||||
return [
|
||||
haStyle,
|
||||
css`
|
||||
:host {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import secondsToDuration from "../common/datetime/seconds_to_duration";
|
||||
import { ensureArray } from "../common/ensure-array";
|
||||
import { computeStateName } from "../common/entity/compute_state_name";
|
||||
import type { HomeAssistant } from "../types";
|
||||
import { Condition, Trigger } from "./automation";
|
||||
@ -74,7 +75,7 @@ export const describeTrigger = (
|
||||
}
|
||||
|
||||
// State Trigger
|
||||
if (trigger.platform === "state" && trigger.entity_id) {
|
||||
if (trigger.platform === "state") {
|
||||
let base = "When";
|
||||
let entities = "";
|
||||
|
||||
@ -95,12 +96,17 @@ export const describeTrigger = (
|
||||
} ${computeStateName(states[entity]) || entity}`;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
} else if (trigger.entity_id) {
|
||||
entities = states[trigger.entity_id]
|
||||
? computeStateName(states[trigger.entity_id])
|
||||
: trigger.entity_id;
|
||||
}
|
||||
|
||||
if (!entities) {
|
||||
// no entity_id or empty array
|
||||
entities = "something";
|
||||
}
|
||||
|
||||
base += ` ${entities} changes`;
|
||||
|
||||
if (trigger.from) {
|
||||
@ -286,7 +292,7 @@ export const describeTrigger = (
|
||||
}
|
||||
// MQTT Trigger
|
||||
if (trigger.platform === "mqtt") {
|
||||
return "When a MQTT payload has been received";
|
||||
return "When an MQTT message has been received";
|
||||
}
|
||||
|
||||
// Template Trigger
|
||||
@ -300,6 +306,9 @@ export const describeTrigger = (
|
||||
}
|
||||
|
||||
if (trigger.platform === "device") {
|
||||
if (!trigger.device_id) {
|
||||
return "Device trigger";
|
||||
}
|
||||
const config = trigger as DeviceTrigger;
|
||||
const localized = localizeDeviceAutomationTrigger(hass, config);
|
||||
if (localized) {
|
||||
@ -311,7 +320,9 @@ export const describeTrigger = (
|
||||
}`;
|
||||
}
|
||||
|
||||
return `${trigger.platform || "Unknown"} trigger`;
|
||||
return `${
|
||||
trigger.platform ? trigger.platform.replace(/_/g, " ") : "Unknown"
|
||||
} trigger`;
|
||||
};
|
||||
|
||||
export const describeCondition = (
|
||||
@ -323,15 +334,64 @@ export const describeCondition = (
|
||||
return condition.alias;
|
||||
}
|
||||
|
||||
if (["or", "and", "not"].includes(condition.condition)) {
|
||||
return `multiple conditions using "${condition.condition}"`;
|
||||
if (!condition.condition) {
|
||||
const shorthands: Array<"and" | "or" | "not"> = ["and", "or", "not"];
|
||||
for (const key of shorthands) {
|
||||
if (!(key in condition)) {
|
||||
continue;
|
||||
}
|
||||
if (ensureArray(condition[key])) {
|
||||
condition = {
|
||||
condition: key,
|
||||
conditions: condition[key],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (condition.condition === "or") {
|
||||
const conditions = ensureArray(condition.conditions);
|
||||
|
||||
let count = "condition";
|
||||
|
||||
if (conditions && conditions.length > 0) {
|
||||
count = `of ${conditions.length} conditions`;
|
||||
}
|
||||
|
||||
return `Test if any ${count} matches`;
|
||||
}
|
||||
|
||||
if (condition.condition === "and") {
|
||||
const conditions = ensureArray(condition.conditions);
|
||||
|
||||
const count =
|
||||
conditions && conditions.length > 0
|
||||
? `${conditions.length} `
|
||||
: "multiple";
|
||||
|
||||
return `Test if ${count} conditions match`;
|
||||
}
|
||||
|
||||
if (condition.condition === "not") {
|
||||
const conditions = ensureArray(condition.conditions);
|
||||
|
||||
const what =
|
||||
conditions && conditions.length > 0
|
||||
? `none of ${conditions.length} conditions match`
|
||||
: "no condition matches";
|
||||
|
||||
return `Test if ${what}`;
|
||||
}
|
||||
|
||||
// State Condition
|
||||
if (condition.condition === "state" && condition.entity_id) {
|
||||
if (condition.condition === "state") {
|
||||
let base = "Confirm";
|
||||
const stateObj = hass.states[condition.entity_id];
|
||||
const entity = stateObj ? computeStateName(stateObj) : condition.entity_id;
|
||||
const entity = stateObj
|
||||
? computeStateName(stateObj)
|
||||
: condition.entity_id
|
||||
? condition.entity_id
|
||||
: "an entity";
|
||||
|
||||
if ("attribute" in condition) {
|
||||
base += ` ${condition.attribute} from`;
|
||||
@ -347,10 +407,14 @@ export const describeCondition = (
|
||||
: ""
|
||||
} ${state}`;
|
||||
}
|
||||
} else {
|
||||
} else if (condition.state) {
|
||||
states = condition.state.toString();
|
||||
}
|
||||
|
||||
if (!states) {
|
||||
states = "a state";
|
||||
}
|
||||
|
||||
base += ` ${entity} is ${states}`;
|
||||
|
||||
if ("for" in condition) {
|
||||
@ -487,6 +551,9 @@ export const describeCondition = (
|
||||
}
|
||||
|
||||
if (condition.condition === "device") {
|
||||
if (!condition.device_id) {
|
||||
return "Device condition";
|
||||
}
|
||||
const config = condition as DeviceCondition;
|
||||
const localized = localizeDeviceAutomationCondition(hass, config);
|
||||
if (localized) {
|
||||
@ -498,5 +565,7 @@ export const describeCondition = (
|
||||
}`;
|
||||
}
|
||||
|
||||
return `${condition.condition} condition`;
|
||||
return `${
|
||||
condition.condition ? condition.condition.replace(/_/g, " ") : "Unknown"
|
||||
} condition`;
|
||||
};
|
||||
|
||||
@ -61,7 +61,7 @@ export const describeAction = <T extends ActionType>(
|
||||
? `${domainToName(hass.localize, domain)}: ${service.name}`
|
||||
: `Call service: ${config.service}`;
|
||||
} else {
|
||||
return actionType;
|
||||
return "Call a service";
|
||||
}
|
||||
if (config.target) {
|
||||
const targets: string[] = [];
|
||||
@ -137,9 +137,11 @@ export const describeAction = <T extends ActionType>(
|
||||
} else if (typeof config.delay === "string") {
|
||||
duration = isTemplate(config.delay)
|
||||
? "based on a template"
|
||||
: `for ${config.delay}`;
|
||||
} else {
|
||||
: `for ${config.delay || "a duration"}`;
|
||||
} else if (config.delay) {
|
||||
duration = `for ${formatDuration(config.delay)}`;
|
||||
} else {
|
||||
duration = "for a duration";
|
||||
}
|
||||
|
||||
return `Delay ${duration}`;
|
||||
@ -153,13 +155,12 @@ export const describeAction = <T extends ActionType>(
|
||||
} else {
|
||||
entityId = config.target?.entity_id || config.entity_id;
|
||||
}
|
||||
if (!entityId) {
|
||||
return "Activate a scene";
|
||||
}
|
||||
const sceneStateObj = entityId ? hass.states[entityId] : undefined;
|
||||
return `Scene ${
|
||||
sceneStateObj
|
||||
? computeStateName(sceneStateObj)
|
||||
: "scene" in config
|
||||
? config.scene
|
||||
: config.target?.entity_id || config.entity_id || ""
|
||||
return `Active scene ${
|
||||
sceneStateObj ? computeStateName(sceneStateObj) : entityId
|
||||
}`;
|
||||
}
|
||||
|
||||
@ -167,16 +168,22 @@ export const describeAction = <T extends ActionType>(
|
||||
const config = action as PlayMediaAction;
|
||||
const entityId = config.target?.entity_id || config.entity_id;
|
||||
const mediaStateObj = entityId ? hass.states[entityId] : undefined;
|
||||
return `Play ${config.metadata.title || config.data.media_content_id} on ${
|
||||
return `Play ${
|
||||
config.metadata.title || config.data.media_content_id || "media"
|
||||
} on ${
|
||||
mediaStateObj
|
||||
? computeStateName(mediaStateObj)
|
||||
: config.target?.entity_id || config.entity_id
|
||||
: entityId || "a media player"
|
||||
}`;
|
||||
}
|
||||
|
||||
if (actionType === "wait_for_trigger") {
|
||||
const config = action as WaitForTriggerAction;
|
||||
return `Wait for ${ensureArray(config.wait_for_trigger)
|
||||
const triggers = ensureArray(config.wait_for_trigger);
|
||||
if (!triggers || triggers.length === 0) {
|
||||
return "Wait for a trigger";
|
||||
}
|
||||
return `Wait for ${triggers
|
||||
.map((trigger) => describeTrigger(trigger, hass))
|
||||
.join(", ")}`;
|
||||
}
|
||||
@ -199,12 +206,12 @@ export const describeAction = <T extends ActionType>(
|
||||
}
|
||||
|
||||
if (actionType === "check_condition") {
|
||||
return `Test ${describeCondition(action as Condition, hass)}`;
|
||||
return describeCondition(action as Condition, hass);
|
||||
}
|
||||
|
||||
if (actionType === "stop") {
|
||||
const config = action as StopAction;
|
||||
return `Stopped${config.stop ? ` because: ${config.stop}` : ""}`;
|
||||
return `Stop${config.stop ? ` because: ${config.stop}` : ""}`;
|
||||
}
|
||||
|
||||
if (actionType === "if") {
|
||||
@ -258,6 +265,9 @@ export const describeAction = <T extends ActionType>(
|
||||
|
||||
if (actionType === "device_action") {
|
||||
const config = action as DeviceAction;
|
||||
if (!config.device_id) {
|
||||
return "Device action";
|
||||
}
|
||||
const localized = localizeDeviceAutomationAction(hass, config);
|
||||
if (localized) {
|
||||
return localized;
|
||||
|
||||
@ -15,6 +15,8 @@ class HassSubpage extends LitElement {
|
||||
|
||||
@property({ type: String, attribute: "back-path" }) public backPath?: string;
|
||||
|
||||
@property() public backCallback?: () => void;
|
||||
|
||||
@property({ type: Boolean, reflect: true }) public narrow = false;
|
||||
|
||||
@property({ type: Boolean }) public supervisor = false;
|
||||
@ -52,6 +54,9 @@ class HassSubpage extends LitElement {
|
||||
<slot name="toolbar-icon"></slot>
|
||||
</div>
|
||||
<div class="content" @scroll=${this._saveScrollPos}><slot></slot></div>
|
||||
<div id="fab">
|
||||
<slot name="fab"></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -61,6 +66,10 @@ class HassSubpage extends LitElement {
|
||||
}
|
||||
|
||||
private _backTapped(): void {
|
||||
if (this.backCallback) {
|
||||
this.backCallback();
|
||||
return;
|
||||
}
|
||||
history.back();
|
||||
}
|
||||
|
||||
@ -116,6 +125,29 @@ class HassSubpage extends LitElement {
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#fab {
|
||||
position: fixed;
|
||||
right: calc(16px + env(safe-area-inset-right));
|
||||
bottom: calc(16px + env(safe-area-inset-bottom));
|
||||
z-index: 1;
|
||||
}
|
||||
:host([narrow]) #fab.tabs {
|
||||
bottom: calc(84px + env(safe-area-inset-bottom));
|
||||
}
|
||||
#fab[is-wide] {
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
}
|
||||
:host([rtl]) #fab {
|
||||
right: auto;
|
||||
left: calc(16px + env(safe-area-inset-left));
|
||||
}
|
||||
:host([rtl][is-wide]) #fab {
|
||||
bottom: 24px;
|
||||
left: 24px;
|
||||
right: auto;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -230,6 +230,7 @@ export default class HaAutomationActionRow extends LitElement {
|
||||
${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
|
||||
${!yamlMode
|
||||
? html`<ha-svg-icon
|
||||
class="selected_menu_item"
|
||||
slot="graphic"
|
||||
.path=${mdiCheck}
|
||||
></ha-svg-icon>`
|
||||
@ -242,6 +243,7 @@ export default class HaAutomationActionRow extends LitElement {
|
||||
)}
|
||||
${yamlMode
|
||||
? html`<ha-svg-icon
|
||||
class="selected_menu_item"
|
||||
slot="graphic"
|
||||
.path=${mdiCheck}
|
||||
></ha-svg-icon>`
|
||||
@ -539,6 +541,12 @@ export default class HaAutomationActionRow extends LitElement {
|
||||
.warning ul {
|
||||
margin: 4px 0;
|
||||
}
|
||||
.selected_menu_item {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
li[role="separator"] {
|
||||
border-bottom-color: var(--divider-color);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
|
||||
import { css, CSSResultGroup, html, LitElement } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import "../../../components/ha-blueprint-picker";
|
||||
@ -34,8 +34,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
|
||||
|
||||
@state() private _blueprints?: Blueprints;
|
||||
|
||||
@state() private _showDescription = false;
|
||||
|
||||
protected firstUpdated(changedProps) {
|
||||
super.firstUpdated(changedProps);
|
||||
this._getBlueprints();
|
||||
@ -48,55 +46,28 @@ export class HaBlueprintAutomationEditor extends LitElement {
|
||||
return this._blueprints[this.config.use_blueprint.path];
|
||||
}
|
||||
|
||||
protected willUpdate(changedProps: PropertyValues): void {
|
||||
super.willUpdate(changedProps);
|
||||
if (
|
||||
!this._showDescription &&
|
||||
changedProps.has("config") &&
|
||||
this.config.description
|
||||
) {
|
||||
this._showDescription = true;
|
||||
}
|
||||
}
|
||||
|
||||
protected render() {
|
||||
const blueprint = this._blueprint;
|
||||
return html`
|
||||
<ha-config-section vertical .isWide=${this.isWide}>
|
||||
<span slot="introduction">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.introduction"
|
||||
)}
|
||||
</span>
|
||||
<ha-card outlined>
|
||||
<div class="card-content">
|
||||
${this._showDescription
|
||||
? html`
|
||||
<ha-textarea
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.description.label"
|
||||
)}
|
||||
.placeholder=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.description.placeholder"
|
||||
)}
|
||||
name="description"
|
||||
autogrow
|
||||
.value=${this.config.description || ""}
|
||||
@change=${this._valueChanged}
|
||||
></ha-textarea>
|
||||
`
|
||||
: html`
|
||||
<div class="link-button-row">
|
||||
<button class="link" @click=${this._addDescription}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.description.add"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
</ha-card>
|
||||
</ha-config-section>
|
||||
<p class="introduction">
|
||||
${this.hass.localize("ui.panel.config.automation.editor.introduction")}
|
||||
</p>
|
||||
<ha-card outlined>
|
||||
<div class="card-content">
|
||||
<ha-textarea
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.description.label"
|
||||
)}
|
||||
.placeholder=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.description.placeholder"
|
||||
)}
|
||||
name="description"
|
||||
autogrow
|
||||
.value=${this.config.description || ""}
|
||||
@change=${this._valueChanged}
|
||||
></ha-textarea>
|
||||
</div>
|
||||
</ha-card>
|
||||
|
||||
<ha-card
|
||||
outlined
|
||||
@ -243,16 +214,14 @@ export class HaBlueprintAutomationEditor extends LitElement {
|
||||
});
|
||||
}
|
||||
|
||||
private _addDescription() {
|
||||
this._showDescription = true;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
haStyle,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
ha-card.blueprint {
|
||||
max-width: 1040px;
|
||||
margin: 24px auto;
|
||||
}
|
||||
.padding {
|
||||
@ -272,7 +241,11 @@ export class HaBlueprintAutomationEditor extends LitElement {
|
||||
h3 {
|
||||
margin: 16px;
|
||||
}
|
||||
span[slot="introduction"] a {
|
||||
.introduction {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.introduction a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
p {
|
||||
|
||||
@ -145,6 +145,7 @@ export default class HaAutomationConditionRow extends LitElement {
|
||||
${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
|
||||
${!this._yamlMode
|
||||
? html`<ha-svg-icon
|
||||
class="selected_menu_item"
|
||||
slot="graphic"
|
||||
.path=${mdiCheck}
|
||||
></ha-svg-icon>`
|
||||
@ -157,6 +158,7 @@ export default class HaAutomationConditionRow extends LitElement {
|
||||
)}
|
||||
${this._yamlMode
|
||||
? html`<ha-svg-icon
|
||||
class="selected_menu_item"
|
||||
slot="graphic"
|
||||
.path=${mdiCheck}
|
||||
></ha-svg-icon>`
|
||||
@ -477,6 +479,12 @@ export default class HaAutomationConditionRow extends LitElement {
|
||||
.testing.pass {
|
||||
background-color: var(--success-color);
|
||||
}
|
||||
.selected_menu_item {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
li[role="separator"] {
|
||||
border-bottom-color: var(--divider-color);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
@ -5,6 +5,7 @@ import {
|
||||
mdiContentSave,
|
||||
mdiDelete,
|
||||
mdiDotsVertical,
|
||||
mdiInformationOutline,
|
||||
mdiPencil,
|
||||
mdiPlay,
|
||||
mdiPlayCircleOutline,
|
||||
@ -25,6 +26,7 @@ import {
|
||||
} from "lit";
|
||||
import { property, state, query } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { navigate } from "../../../common/navigate";
|
||||
import { copyToClipboard } from "../../../common/util/copy-clipboard";
|
||||
import "../../../components/ha-button-menu";
|
||||
@ -49,7 +51,7 @@ import {
|
||||
showPromptDialog,
|
||||
} from "../../../dialogs/generic/show-dialog-box";
|
||||
import "../../../layouts/ha-app-layout";
|
||||
import "../../../layouts/hass-tabs-subpage";
|
||||
import "../../../layouts/hass-subpage";
|
||||
import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import { HomeAssistant, Route } from "../../../types";
|
||||
@ -111,7 +113,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
? this.hass.states[this._entityId]
|
||||
: undefined;
|
||||
return html`
|
||||
<hass-tabs-subpage
|
||||
<hass-subpage
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.route=${this.route}
|
||||
@ -125,6 +127,14 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
.path=${mdiDotsVertical}
|
||||
></ha-icon-button>
|
||||
|
||||
<mwc-list-item graphic="icon" @click=${this._showInfo}>
|
||||
${this.hass.localize("ui.panel.config.automation.editor.show_info")}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiInformationOutline}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
|
||||
<mwc-list-item
|
||||
graphic="icon"
|
||||
.disabled=${!stateObj}
|
||||
@ -134,15 +144,9 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
<ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
|
||||
${stateObj
|
||||
? html`<a
|
||||
href="/config/automation/trace/${this._config
|
||||
? this._config.id
|
||||
: ""}"
|
||||
target="_blank"
|
||||
.disabled=${!stateObj}
|
||||
>
|
||||
<mwc-list-item graphic="icon" .disabled=${!stateObj}>
|
||||
${stateObj && this._config
|
||||
? html`<a href="/config/automation/trace/${this._config.id}">
|
||||
<mwc-list-item graphic="icon">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.show_trace"
|
||||
)}
|
||||
@ -332,7 +336,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
>
|
||||
<ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
|
||||
</ha-fab>
|
||||
</hass-tabs-subpage>
|
||||
</hass-subpage>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -433,6 +437,13 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
this._errors = undefined;
|
||||
}
|
||||
|
||||
private _showInfo() {
|
||||
if (!this.hass || !this._entityId) {
|
||||
return;
|
||||
}
|
||||
fireEvent(this, "hass-more-info", { entityId: this._entityId });
|
||||
}
|
||||
|
||||
private _runActions() {
|
||||
if (!this.hass || !this._entityId) {
|
||||
return;
|
||||
@ -640,7 +651,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
flex-direction: column;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
manual-automation-editor {
|
||||
manual-automation-editor,
|
||||
blueprint-automation-editor {
|
||||
margin: 0 auto;
|
||||
max-width: 1040px;
|
||||
padding: 28px 20px 0;
|
||||
|
||||
@ -1,4 +1,16 @@
|
||||
import { mdiHelpCircle, mdiInformationOutline, mdiPlus } from "@mdi/js";
|
||||
import {
|
||||
mdiCancel,
|
||||
mdiContentDuplicate,
|
||||
mdiDelete,
|
||||
mdiHelpCircle,
|
||||
mdiInformationOutline,
|
||||
mdiPlay,
|
||||
mdiPlayCircleOutline,
|
||||
mdiPlus,
|
||||
mdiStopCircleOutline,
|
||||
mdiTransitConnection,
|
||||
} from "@mdi/js";
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import memoizeOne from "memoize-one";
|
||||
@ -13,11 +25,22 @@ import type {
|
||||
RowClickedEvent,
|
||||
} from "../../../components/data-table/ha-data-table";
|
||||
import "../../../components/ha-button-related-filter-menu";
|
||||
import "../../../components/ha-chip";
|
||||
import "../../../components/ha-fab";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-icon-overflow-menu";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import type { AutomationEntity } from "../../../data/automation";
|
||||
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||
import {
|
||||
AutomationEntity,
|
||||
deleteAutomation,
|
||||
getAutomationConfig,
|
||||
showAutomationEditor,
|
||||
triggerAutomationActions,
|
||||
} from "../../../data/automation";
|
||||
import {
|
||||
showAlertDialog,
|
||||
showConfirmationDialog,
|
||||
} from "../../../dialogs/generic/show-dialog-box";
|
||||
import "../../../layouts/hass-tabs-subpage-data-table";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import { HomeAssistant, Route } from "../../../types";
|
||||
@ -63,6 +86,7 @@ class HaAutomationPicker extends LitElement {
|
||||
...automation,
|
||||
name: computeStateName(automation),
|
||||
last_triggered: automation.attributes.last_triggered || undefined,
|
||||
disabled: automation.state === "off",
|
||||
}));
|
||||
}
|
||||
);
|
||||
@ -123,22 +147,105 @@ class HaAutomationPicker extends LitElement {
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
columns.disabled = this.narrow
|
||||
? {
|
||||
title: "",
|
||||
template: (disabled: boolean) =>
|
||||
disabled
|
||||
? html`
|
||||
<paper-tooltip animation-delay="0" position="left">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.disabled"
|
||||
)}
|
||||
</paper-tooltip>
|
||||
<ha-svg-icon
|
||||
.path=${mdiCancel}
|
||||
style="color: var(--secondary-text-color)"
|
||||
></ha-svg-icon>
|
||||
`
|
||||
: "",
|
||||
}
|
||||
: {
|
||||
width: "20%",
|
||||
title: "",
|
||||
template: (disabled: boolean) =>
|
||||
disabled
|
||||
? html`
|
||||
<ha-chip>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.disabled"
|
||||
)}
|
||||
</ha-chip>
|
||||
`
|
||||
: "",
|
||||
};
|
||||
|
||||
columns.actions = {
|
||||
title: "",
|
||||
label: this.hass.localize(
|
||||
"ui.panel.config.automation.picker.headers.actions"
|
||||
),
|
||||
type: "icon-button",
|
||||
template: (_info, automation: any) => html`
|
||||
<ha-icon-button
|
||||
.automation=${automation}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.headers.actions"
|
||||
)}
|
||||
.path=${mdiInformationOutline}
|
||||
@click=${this._showInfo}
|
||||
></ha-icon-button>
|
||||
`,
|
||||
width: this.narrow ? undefined : "10%",
|
||||
type: "overflow-menu",
|
||||
template: (_: string, automation: any) =>
|
||||
html`
|
||||
<ha-icon-overflow-menu
|
||||
.hass=${this.hass}
|
||||
narrow
|
||||
.items=${[
|
||||
{
|
||||
path: mdiInformationOutline,
|
||||
label: this.hass.localize(
|
||||
"ui.panel.config.automation.editor.show_info"
|
||||
),
|
||||
action: () => this._showInfo(automation),
|
||||
},
|
||||
{
|
||||
path: mdiPlay,
|
||||
label: this.hass.localize(
|
||||
"ui.panel.config.automation.editor.run"
|
||||
),
|
||||
action: () => this._runActions(automation),
|
||||
},
|
||||
{
|
||||
path: mdiTransitConnection,
|
||||
label: this.hass.localize(
|
||||
"ui.panel.config.automation.editor.show_trace"
|
||||
),
|
||||
action: () => this._showTrace(automation),
|
||||
},
|
||||
{
|
||||
path: mdiContentDuplicate,
|
||||
label: this.hass.localize(
|
||||
"ui.panel.config.automation.picker.duplicate"
|
||||
),
|
||||
action: () => this.duplicate(automation),
|
||||
},
|
||||
{
|
||||
path:
|
||||
automation.state === "off"
|
||||
? mdiPlayCircleOutline
|
||||
: mdiStopCircleOutline,
|
||||
label:
|
||||
automation.state === "off"
|
||||
? this.hass.localize(
|
||||
"ui.panel.config.automation.editor.enable"
|
||||
)
|
||||
: this.hass.localize(
|
||||
"ui.panel.config.automation.editor.disable"
|
||||
),
|
||||
action: () => this._toggle(automation),
|
||||
},
|
||||
{
|
||||
label: this.hass.localize(
|
||||
"ui.panel.config.automation.picker.delete"
|
||||
),
|
||||
path: mdiDelete,
|
||||
action: () => this._deleteConfirm(automation),
|
||||
warning: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
</ha-icon-overflow-menu>
|
||||
`,
|
||||
};
|
||||
return columns;
|
||||
}
|
||||
@ -210,12 +317,52 @@ class HaAutomationPicker extends LitElement {
|
||||
this._filterValue = undefined;
|
||||
}
|
||||
|
||||
private _showInfo(ev) {
|
||||
ev.stopPropagation();
|
||||
const automation = ev.currentTarget.automation;
|
||||
private _showInfo(automation: any) {
|
||||
fireEvent(this, "hass-more-info", { entityId: automation.entity_id });
|
||||
}
|
||||
|
||||
private _runActions(automation: any) {
|
||||
triggerAutomationActions(this.hass, automation.entity_id);
|
||||
}
|
||||
|
||||
private _showTrace(automation: any) {
|
||||
navigate(`/config/automation/trace/${automation.attributes.id}`);
|
||||
}
|
||||
|
||||
private async _toggle(automation): Promise<void> {
|
||||
const service = automation.state === "off" ? "turn_on" : "turn_off";
|
||||
await this.hass.callService("automation", service, {
|
||||
entity_id: automation.entity_id,
|
||||
});
|
||||
}
|
||||
|
||||
private async _deleteConfirm(automation) {
|
||||
showConfirmationDialog(this, {
|
||||
text: this.hass.localize(
|
||||
"ui.panel.config.automation.picker.delete_confirm"
|
||||
),
|
||||
confirmText: this.hass!.localize("ui.common.delete"),
|
||||
dismissText: this.hass!.localize("ui.common.cancel"),
|
||||
confirm: () => this._delete(automation),
|
||||
});
|
||||
}
|
||||
|
||||
private async _delete(automation) {
|
||||
await deleteAutomation(this.hass, automation.attributes.id);
|
||||
}
|
||||
|
||||
private async duplicate(automation) {
|
||||
const config = await getAutomationConfig(
|
||||
this.hass,
|
||||
automation.attributes.id
|
||||
);
|
||||
showAutomationEditor({
|
||||
...config,
|
||||
id: undefined,
|
||||
alias: undefined,
|
||||
});
|
||||
}
|
||||
|
||||
private _showHelp() {
|
||||
showAlertDialog(this, {
|
||||
title: this.hass.localize("ui.panel.config.automation.caption"),
|
||||
|
||||
@ -170,6 +170,7 @@ export default class HaAutomationTriggerRow extends LitElement {
|
||||
${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
|
||||
${!yamlMode
|
||||
? html`<ha-svg-icon
|
||||
class="selected_menu_item"
|
||||
slot="graphic"
|
||||
.path=${mdiCheck}
|
||||
></ha-svg-icon>`
|
||||
@ -182,6 +183,7 @@ export default class HaAutomationTriggerRow extends LitElement {
|
||||
)}
|
||||
${yamlMode
|
||||
? html`<ha-svg-icon
|
||||
class="selected_menu_item"
|
||||
slot="graphic"
|
||||
.path=${mdiCheck}
|
||||
></ha-svg-icon>`
|
||||
@ -592,6 +594,12 @@ export default class HaAutomationTriggerRow extends LitElement {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.selected_menu_item {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
li[role="separator"] {
|
||||
border-bottom-color: var(--divider-color);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
@ -210,7 +210,6 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
"ui.panel.config.automation.editor.edit_yaml"
|
||||
)}
|
||||
graphic="icon"
|
||||
?activated=${this._mode === "yaml"}
|
||||
>
|
||||
${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
|
||||
${this._mode === "yaml"
|
||||
@ -833,6 +832,9 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
font-weight: 400;
|
||||
flex: 1;
|
||||
}
|
||||
.header a {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
@ -1793,6 +1793,7 @@
|
||||
"delete": "Delete",
|
||||
"delete_confirm": "Are you sure you want to delete this automation?",
|
||||
"duplicate": "Duplicate",
|
||||
"disabled": "Disabled",
|
||||
"headers": {
|
||||
"toggle": "Enable/disable",
|
||||
"name": "Name",
|
||||
@ -1822,6 +1823,7 @@
|
||||
"run": "[%key:ui::panel::config::automation::editor::actions::run%]",
|
||||
"rename": "[%key:ui::panel::config::automation::editor::triggers::rename%]",
|
||||
"show_trace": "Traces",
|
||||
"show_info": "Information",
|
||||
"introduction": "Use automations to bring your home to life.",
|
||||
"default_name": "New Automation",
|
||||
"missing_name": "Cannot save automation without a name",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user