jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Convert automation trigger to litelement (#4315)

Browse Source 
* Convert automation trigger to Lit

* Update ha-automation-trigger-row.ts

* dynamicContentDirective

* update

* Lint

* Implement other types
This commit is contained in:
Bram Kragten 2019-12-04 18:57:47 +01:00 committed by Paulus Schoutsen
parent 239438ee5d
commit ff3087c39c
37 changed files with 1503 additions and 1159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/common/dom/dynamic-content-directive.ts Normal file
View File

@ -0,0 +1,29 @@
import { directive, Part, NodePart } from "lit-html";
export const dynamicContentDirective = directive(
(tag: string, properties: { [key: string]: any }) => (part: Part): void => {
if (!(part instanceof NodePart)) {
throw new Error(
"dynamicContentDirective can only be used in content bindings"
);
}
let element = part.value as HTMLElement | undefined;
if (
element !== undefined &&
tag.toUpperCase() === (element as HTMLElement).tagName
) {
Object.entries(properties).forEach(([key, value]) => {
element![key] = value;
});
return;
}
element = document.createElement(tag);
Object.entries(properties).forEach(([key, value]) => {
element![key] = value;
});
part.setValue(element);
}
);

1
src/components/device/ha-device-automation-picker.ts
View File

@ -176,6 +176,7 @@ export abstract class HaDeviceAutomationPicker<
this.value = automation;
setTimeout(() => {
fireEvent(this, "change");
fireEvent(this, "value-changed", { value: automation });
}, 0);
}

81
src/components/ha-yaml-editor.ts Normal file
View File

@ -0,0 +1,81 @@
import { safeDump, safeLoad } from "js-yaml";
import "./ha-code-editor";
import { LitElement, property, customElement, html } from "lit-element";
import { fireEvent } from "../common/dom/fire_event";
const isEmpty = (obj: object) => {
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
return false;
}
}
return true;
};
@customElement("ha-yaml-editor")
export class HaYamlEditor extends LitElement {
@property() public value?: any;
@property() public isValid = true;
@property() public label?: string;
@property() private _yaml?: string;
protected firstUpdated() {
try {
this._yaml =
this.value && !isEmpty(this.value) ? safeDump(this.value) : "";
} catch (err) {
alert(`There was an error converting to YAML: ${err}`);
}
}
protected render() {
if (this._yaml === undefined) {
return;
}
return html`
${this.label
? html`
<p>${this.label}</p>
`
: ""}
<ha-code-editor
.value=${this._yaml}
mode="yaml"
.error=${this.isValid === false}
@value-changed=${this._onChange}
></ha-code-editor>
`;
}
private _onChange(ev: CustomEvent) {
ev.stopPropagation();
const value = ev.detail.value;
let parsed;
let isValid = true;
if (value) {
try {
parsed = safeLoad(value);
isValid = true;
} catch (err) {
// Invalid YAML
isValid = false;
}
} else {
parsed = {};
}
this.value = parsed;
this.isValid = isValid;
if (isValid) {
fireEvent(this, "value-changed", { value: parsed });
}
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-yaml-editor": HaYamlEditor;
}
}

2
src/data/device_automation.ts
View File

@ -18,7 +18,7 @@ export interface DeviceCondition extends DeviceAutomation {
}
export interface DeviceTrigger extends DeviceAutomation {
platform: string;
platform: "device";
}
export const fetchDeviceActions = (hass: HomeAssistant, deviceId: string) =>

345
src/panels/config/automation/trigger/ha-automation-trigger-row.ts Normal file
View File

@ -0,0 +1,345 @@
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
// tslint:disable-next-line
import { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-menu-button/paper-menu-button";
import {
css,
CSSResult,
customElement,
html,
LitElement,
property,
} from "lit-element";
import { dynamicContentDirective } from "../../../../common/dom/dynamic-content-directive";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-card";
import { HomeAssistant } from "../../../../types";
import "./types/ha-automation-trigger-device";
import "./types/ha-automation-trigger-event";
import "./types/ha-automation-trigger-state";
import "./types/ha-automation-trigger-geo_location";
import "./types/ha-automation-trigger-homeassistant";
import "./types/ha-automation-trigger-mqtt";
import "./types/ha-automation-trigger-numeric_state";
import "./types/ha-automation-trigger-sun";
import "./types/ha-automation-trigger-template";
import "./types/ha-automation-trigger-time";
import "./types/ha-automation-trigger-time_pattern";
import "./types/ha-automation-trigger-webhook";
import "./types/ha-automation-trigger-zone";
import { DeviceTrigger } from "../../../../data/device_automation";
const OPTIONS = [
"device",
"event",
"state",
"geo_location",
"homeassistant",
"mqtt",
"numeric_state",
"sun",
"template",
"time",
"time_pattern",
"webhook",
"zone",
];
export interface ForDict {
hours?: number | string;
minutes?: number | string;
seconds?: number | string;
}
export interface StateTrigger {
platform: "state";
entity_id: string;
from?: string | number;
to?: string | number;
for?: string | number | ForDict;
}
export interface MqttTrigger {
platform: "mqtt";
topic: string;
payload?: string;
}
export interface GeoLocationTrigger {
platform: "geo_location";
source: "string";
zone: "string";
event: "enter" | "leave";
}
export interface HassTrigger {
platform: "homeassistant";
event: "start" | "shutdown";
}
export interface NumericStateTrigger {
platform: "numeric_state";
entity_id: string;
above?: number;
below?: number;
value_template?: string;
for?: string | number | ForDict;
}
export interface SunTrigger {
platform: "sun";
offset: number;
event: "sunrise" | "sunset";
}
export interface TimePatternTrigger {
platform: "time_pattern";
hours?: number | string;
minutes?: number | string;
seconds?: number | string;
}
export interface WebhookTrigger {
platform: "webhook";
webhook_id: string;
}
export interface ZoneTrigger {
platform: "zone";
entity_id: string;
zone: string;
event: "enter" | "leave";
}
export interface TimeTrigger {
platform: "time";
at: string;
}
export interface TemplateTrigger {
platform: "template";
value_template: string;
}
export interface EventTrigger {
platform: "event";
event_type: string;
event_data: any;
}
export type Trigger =
| StateTrigger
| MqttTrigger
| GeoLocationTrigger
| HassTrigger
| NumericStateTrigger
| SunTrigger
| TimePatternTrigger
| WebhookTrigger
| ZoneTrigger
| TimeTrigger
| TemplateTrigger
| EventTrigger
| DeviceTrigger;
export interface TriggerElement extends LitElement {
trigger: Trigger;
}
export const handleChangeEvent = (element: TriggerElement, ev: CustomEvent) => {
ev.stopPropagation();
const name = (ev.target as any)?.name;
if (!name) {
return;
}
const newVal = ev.detail.value;
if ((element.trigger[name] || "") === newVal) {
return;
}
let newTrigger: Trigger;
if (!newVal) {
newTrigger = { ...element.trigger };
delete newTrigger[name];
} else {
newTrigger = { ...element.trigger, [name]: newVal };
}
fireEvent(element, "value-changed", { value: newTrigger });
};
@customElement("ha-automation-trigger-row")
export default class HaAutomationTriggerRow extends LitElement {
@property() public hass!: HomeAssistant;
@property() public trigger!: Trigger;
@property() private _yamlMode = false;
protected render() {
if (!this.trigger) {
return html``;
}
const hasEditor = OPTIONS.includes(this.trigger.platform);
if (!hasEditor) {
this._yamlMode = true;
}
const selected = OPTIONS.indexOf(this.trigger.platform);
return html`
<ha-card>
<div class="card-content">
<div class="card-menu">
<paper-menu-button
no-animations
horizontal-align="right"
horizontal-offset="-5"
vertical-offset="-5"
close-on-activate
>
<paper-icon-button
icon="hass:dots-vertical"
slot="dropdown-trigger"
></paper-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item @click=${this._switchYamlMode}>
${this._yamlMode
? this.hass.localize(
"ui.panel.config.automation.editor.edit_ui"
)
: this.hass.localize(
"ui.panel.config.automation.editor.edit_yaml"
)}
</paper-item>
<paper-item disabled>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.duplicate"
)}
</paper-item>
<paper-item @click=${this._onDelete}>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.delete"
)}
</paper-item>
</paper-listbox>
</paper-menu-button>
</div>
${this._yamlMode
? html`
<div style="margin-right: 24px;">
${!hasEditor
? html`
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.unsupported_platform",
"platform",
this.trigger.platform
)}
`
: ""}
<ha-yaml-editor
.value=${this.trigger}
@value-changed=${this._onYamlChange}
></ha-yaml-editor>
</div>
`
: html`
<paper-dropdown-menu-light
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type_select"
)}
no-animations
>
<paper-listbox
slot="dropdown-content"
.selected=${selected}
@iron-select=${this._typeChanged}
>
${OPTIONS.map(
(opt) => html`
<paper-item .platform=${opt}>
${this.hass.localize(
`ui.panel.config.automation.editor.triggers.type.${opt}.label`
)}
</paper-item>
`
)}
</paper-listbox>
</paper-dropdown-menu-light>
<div>
${dynamicContentDirective(
`ha-automation-trigger-${this.trigger.platform}`,
{ hass: this.hass, trigger: this.trigger }
)}
</div>
`}
</div>
</ha-card>
`;
}
private _onDelete() {
if (
confirm(
this.hass.localize(
"ui.panel.config.automation.editor.triggers.delete_confirm"
)
)
) {
fireEvent(this, "value-changed", { value: null });
}
}
private _typeChanged(ev: CustomEvent) {
const type = ((ev.target as PaperListboxElement)?.selectedItem as any)
?.platform;
if (!type) {
return;
}
const elClass = customElements.get(`ha-automation-trigger-${type}`);
if (type !== this.trigger.platform) {
fireEvent(this, "value-changed", {
value: {
platform: type,
...elClass.defaultConfig,
},
});
}
}
private _onYamlChange(ev: CustomEvent) {
ev.stopPropagation();
fireEvent(this, "value-changed", { value: ev.detail.value });
}
private _switchYamlMode() {
this._yamlMode = !this._yamlMode;
}
static get styles(): CSSResult {
return css`
.card-menu {
position: absolute;
top: 0;
right: 0;
z-index: 3;
color: var(--primary-text-color);
}
.rtl .card-menu {
right: auto;
left: 0;
}
.card-menu paper-item {
cursor: pointer;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-trigger-row": HaAutomationTriggerRow;
}
}

93
src/panels/config/automation/trigger/ha-automation-trigger.ts Normal file
View File

@ -0,0 +1,93 @@
import {
LitElement,
customElement,
html,
property,
CSSResult,
css,
} from "lit-element";
import "@material/mwc-button";
import "../../../../components/ha-card";
import { fireEvent } from "../../../../common/dom/fire_event";
import { HomeAssistant } from "../../../../types";
import "./ha-automation-trigger-row";
@customElement("ha-automation-trigger")
export default class HaAutomationTrigger extends LitElement {
@property() public hass!: HomeAssistant;
@property() public triggers;
protected render() {
return html`
<div class="triggers">
${this.triggers.map(
(trg, idx) => html`
<ha-automation-trigger-row
.index=${idx}
.trigger=${trg}
@value-changed=${this._triggerChanged}
.hass=${this.hass}
></ha-automation-trigger-row>
`
)}
<ha-card>
<div class="card-actions add-card">
<mwc-button @click=${this._addTrigger}>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.add"
)}
</mwc-button>
</div>
</ha-card>
</div>
`;
}
private _addTrigger() {
const triggers = this.triggers.concat({
platform: "state",
});
fireEvent(this, "value-changed", { value: triggers });
}
private _triggerChanged(ev: CustomEvent) {
ev.stopPropagation();
const triggers = [...this.triggers];
const newValue = ev.detail.value;
const index = (ev.target as any).index;
if (newValue === null) {
triggers.splice(index, 1);
} else {
triggers[index] = newValue;
}
fireEvent(this, "value-changed", { value: triggers });
}
static get styles(): CSSResult {
return css`
.triggers,
.script {
margin-top: -16px;
}
.triggers ha-card,
.script ha-card {
margin-top: 16px;
}
.add-card mwc-button {
display: block;
text-align: center;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-trigger": HaAutomationTrigger;
}
}

128
src/panels/config/automation/trigger/types/ha-automation-trigger-device.ts Normal file
View File

@ -0,0 +1,128 @@
import "../../../../../components/device/ha-device-picker";
import "../../../../../components/device/ha-device-trigger-picker";
import "../../../../../components/ha-form/ha-form";
import {
fetchDeviceTriggerCapabilities,
deviceAutomationsEqual,
DeviceTrigger,
} from "../../../../../data/device_automation";
import { LitElement, customElement, property, html } from "lit-element";
import { fireEvent } from "../../../../../common/dom/fire_event";
import { HomeAssistant } from "../../../../../types";
@customElement("ha-automation-trigger-device")
export class HaDeviceTrigger extends LitElement {
@property() public hass!: HomeAssistant;
@property() public trigger!: DeviceTrigger;
@property() private _deviceId?: string;
@property() private _capabilities?;
private _origTrigger?: DeviceTrigger;
public static get defaultConfig() {
return {
device_id: "",
domain: "",
entity_id: "",
};
}
protected render() {
if (this._deviceId === undefined) {
this._deviceId = this.trigger.device_id;
}
const extraFieldsData =
this._capabilities && this._capabilities.extra_fields
? this._capabilities.extra_fields.map((item) => {
return { [item.name]: this.trigger[item.name] };
})
: undefined;
return html`
<ha-device-picker
.value=${this._deviceId}
@value-changed=${this._devicePicked}
.hass=${this.hass}
label="Device"
></ha-device-picker>
<ha-device-trigger-picker
.value=${this.trigger}
.deviceId=${this._deviceId}
@value-changed=${this._deviceTriggerPicked}
.hass=${this.hass}
label="Trigger"
></ha-device-trigger-picker>
${extraFieldsData
? html`
<ha-form
.data=${Object.assign({}, ...extraFieldsData)}
.schema=${this._capabilities.extra_fields}
.computeLabel=${this._extraFieldsComputeLabelCallback(
this.hass.localize
)}
@value-changed=${this._extraFieldsChanged}
></ha-form>
`
: ""}
`;
}
protected firstUpdated() {
if (!this._capabilities) {
this._getCapabilities();
}
if (this.trigger) {
this._origTrigger = this.trigger;
}
}
protected updated(changedPros) {
const prevTrigger = changedPros.get("trigger");
if (prevTrigger && !deviceAutomationsEqual(prevTrigger, this.trigger)) {
this._getCapabilities();
}
}
private async _getCapabilities() {
const trigger = this.trigger;
this._capabilities = trigger.domain
? await fetchDeviceTriggerCapabilities(this.hass, trigger)
: null;
}
private _devicePicked(ev) {
ev.stopPropagation();
this._deviceId = ev.target.value;
}
private _deviceTriggerPicked(ev) {
ev.stopPropagation();
let trigger = ev.detail.value;
if (
this._origTrigger &&
deviceAutomationsEqual(this._origTrigger, trigger)
) {
trigger = this._origTrigger;
}
fireEvent(this, "value-changed", { value: trigger });
}
private _extraFieldsChanged(ev) {
ev.stopPropagation();
fireEvent(this, "value-changed", {
value: {
...this.trigger,
...ev.detail.value,
},
});
}
private _extraFieldsComputeLabelCallback(localize) {
// Returns a callback for ha-form to calculate labels per schema object
return (schema) =>
localize(
`ui.panel.config.automation.editor.triggers.type.device.extra_fields.${schema.name}`
) || schema.name;
}
}

53
src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts Normal file
View File

@ -0,0 +1,53 @@
import "@polymer/paper-input/paper-input";
import "../../../../../components/ha-yaml-editor";
import { LitElement, property, customElement } from "lit-element";
import {
TriggerElement,
EventTrigger,
handleChangeEvent,
} from "../ha-automation-trigger-row";
import { HomeAssistant } from "../../../../../types";
import { html } from "lit-html";
@customElement("ha-automation-trigger-event")
export class HaEventTrigger extends LitElement implements TriggerElement {
@property() public hass!: HomeAssistant;
@property() public trigger!: EventTrigger;
public static get defaultConfig() {
return { event_type: "", event_data: {} };
}
public render() {
const { event_type, event_data } = this.trigger;
return html`
<paper-input
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.event.event_type"
)}
name="event_type"
.value="${event_type}"
@value-changed="${this._valueChanged}"
></paper-input>
<ha-yaml-editor
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.event.event_data"
)}
.name=${"event_data"}
.value=${event_data}
@value-changed=${this._valueChanged}
></ha-yaml-editor>
`;
}
private _valueChanged(ev: CustomEvent): void {
handleChangeEvent(this, ev);
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-trigger-event": HaEventTrigger;
}
}

99
src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts Normal file
View File

@ -0,0 +1,99 @@
import "@polymer/paper-radio-button/paper-radio-button";
import "@polymer/paper-radio-group/paper-radio-group";
// tslint:disable-next-line
import { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
import "../../../../../components/entity/ha-entity-picker";
import { LitElement, customElement, property, html } from "lit-element";
import { HomeAssistant } from "../../../../../types";
import {
GeoLocationTrigger,
handleChangeEvent,
} from "../ha-automation-trigger-row";
import { fireEvent } from "../../../../../common/dom/fire_event";
@customElement("ha-automation-trigger-geo_location")
export default class HaGeolocationTrigger extends LitElement {
@property() public hass!: HomeAssistant;
@property() public trigger!: GeoLocationTrigger;
public static get defaultConfig() {
return {
source: "",
zone: "",
event: "enter",
};
}
protected render() {
const { source, zone, event } = this.trigger;
return html`
<paper-input
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.geo_location.source"
)}
name="source"
.value=${source}
@value-changed="${this._valueChanged}"
></paper-input>
<ha-entity-picker
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.geo_location.zone"
)}
.value=${zone}
@value-changed=${this._zonePicked}
.hass=${this.hass}
allow-custom-entity
.includeDomains=${["zone"]}
></ha-entity-picker>
<label id="eventlabel">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.geo_location.event"
)}
</label>
<paper-radio-group
.selected=${event}
aria-labelledby="eventlabel"
@paper-radio-group-changed=${this._radioGroupPicked}
>
<paper-radio-button name="enter">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.geo_location.enter"
)}
</paper-radio-button>
<paper-radio-button name="leave">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.geo_location.leave"
)}
</paper-radio-button>
</paper-radio-group>
`;
}
private _valueChanged(ev: CustomEvent): void {
handleChangeEvent(this, ev);
}
private _zonePicked(ev: CustomEvent) {
ev.stopPropagation();
fireEvent(this, "value-changed", {
value: { ...this.trigger, zone: ev.detail.value },
});
}
private _radioGroupPicked(ev: CustomEvent) {
ev.stopPropagation();
fireEvent(this, "value-changed", {
value: {
...this.trigger,
event: (ev.target as PaperRadioGroupElement).selected,
},
});
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-trigger-geo_location": HaGeolocationTrigger;
}
}

63
src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts Normal file
View File

@ -0,0 +1,63 @@
import "@polymer/paper-radio-button/paper-radio-button";
import "@polymer/paper-radio-group/paper-radio-group";
// tslint:disable-next-line
import { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
import { LitElement, html, property, customElement } from "lit-element";
import { fireEvent } from "../../../../../common/dom/fire_event";
import { HomeAssistant } from "../../../../../types";
import { HassTrigger } from "../ha-automation-trigger-row";
@customElement("ha-automation-trigger-homeassistant")
export default class HaHassTrigger extends LitElement {
@property() public hass!: HomeAssistant;
@property() public trigger!: HassTrigger;
public static get defaultConfig() {
return {
event: "start",
};
}
public render() {
const { event } = this.trigger;
return html`
<label id="eventlabel">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.homeassistant.event"
)}
</label>
<paper-radio-group
.selected=${event}
aria-labelledby="eventlabel"
@paper-radio-group-changed="${this._radioGroupPicked}"
>
<paper-radio-button name="start">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.homeassistant.start"
)}
</paper-radio-button>
<paper-radio-button name="shutdown">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.homeassistant.shutdown"
)}
</paper-radio-button>
</paper-radio-group>
`;
}
private _radioGroupPicked(ev) {
ev.stopPropagation();
fireEvent(this, "value-changed", {
value: {
...this.trigger,
event: (ev.target as PaperRadioGroupElement).selected,
},
});
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-trigger-homeassistant": HaHassTrigger;
}
}

50
src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts Normal file
View File

@ -0,0 +1,50 @@
import "@polymer/paper-input/paper-input";
import { LitElement, customElement, property, html } from "lit-element";
import { HomeAssistant } from "../../../../../types";
import {
handleChangeEvent,
TriggerElement,
MqttTrigger,
} from "../ha-automation-trigger-row";
@customElement("ha-automation-trigger-mqtt")
export class HaMQTTTrigger extends LitElement implements TriggerElement {
@property() public hass!: HomeAssistant;
@property() public trigger!: MqttTrigger;
public static get defaultConfig() {
return { topic: "" };
}
protected render() {
const { topic, payload } = this.trigger;
return html`
<paper-input
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.mqtt.topic"
)}
name="topic"
.value=${topic}
@value-changed=${this._valueChanged}
></paper-input>
<paper-input
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.mqtt.payload"
)}
name="payload"
.value=${payload}
@value-changed=${this._valueChanged}
></paper-input>
`;
}
private _valueChanged(ev: CustomEvent): void {
handleChangeEvent(this, ev);
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-trigger-mqtt": HaMQTTTrigger;
}
}

103
src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts Normal file
View File

@ -0,0 +1,103 @@
import "@polymer/paper-input/paper-input";
import "../../../../../components/ha-textarea";
import "../../../../../components/entity/ha-entity-picker";
import { LitElement, html, customElement, property } from "lit-element";
import { HomeAssistant } from "../../../../../types";
import { fireEvent } from "../../../../../common/dom/fire_event";
import {
NumericStateTrigger,
ForDict,
handleChangeEvent,
} from "../ha-automation-trigger-row";
@customElement("ha-automation-trigger-numeric_state")
export default class HaNumericStateTrigger extends LitElement {
@property() public hass!: HomeAssistant;
@property() public trigger!: NumericStateTrigger;
public static get defaultConfig() {
return {
entity_id: "",
};
}
public render() {
const { value_template, entity_id, below, above } = this.trigger;
let trgFor = this.trigger.for;
if (
trgFor &&
((trgFor as ForDict).hours ||
(trgFor as ForDict).minutes ||
(trgFor as ForDict).seconds)
) {
// If the trigger was defined using the yaml dict syntax, convert it to
// the equivalent string format
let { hours = 0, minutes = 0, seconds = 0 } = trgFor as ForDict;
hours = hours.toString();
minutes = minutes.toString().padStart(2, "0");
seconds = seconds.toString().padStart(2, "0");
trgFor = `${hours}:${minutes}:${seconds}`;
}
return html`
<ha-entity-picker
.value="${entity_id}"
@value-changed="${this._entityPicked}"
.hass="${this.hass}"
allow-custom-entity
></ha-entity-picker>
<paper-input
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.numeric_state.above"
)}
name="above"
.value=${above}
@value-changed=${this._valueChanged}
></paper-input>
<paper-input
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.numeric_state.below"
)}
name="below"
.value=${below}
@value-changed=${this._valueChanged}
></paper-input>
<ha-textarea
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.numeric_state.value_template"
)}
name="value_template"
.value=${value_template}
@value-changed=${this._valueChanged}
dir="ltr"
></ha-textarea>
<paper-input
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.state.for"
)}
name="for"
.value=${trgFor}
@value-changed=${this._valueChanged}
></paper-input>
`;
}
private _valueChanged(ev: CustomEvent): void {
handleChangeEvent(this, ev);
}
private _entityPicked(ev) {
ev.stopPropagation();
fireEvent(this, "value-changed", {
value: { ...this.trigger, entity_id: ev.detail.value },
});
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-trigger-numeric_state": HaNumericStateTrigger;
}
}

93
src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts Normal file
View File

@ -0,0 +1,93 @@
import "@polymer/paper-input/paper-input";
import { customElement, html, LitElement, property } from "lit-element";
import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/entity/ha-entity-picker";
import { HomeAssistant } from "../../../../../types";
import {
handleChangeEvent,
TriggerElement,
StateTrigger,
ForDict,
} from "../ha-automation-trigger-row";
import { PolymerChangedEvent } from "../../../../../polymer-types";
@customElement("ha-automation-trigger-state")
export class HaStateTrigger extends LitElement implements TriggerElement {
@property() public hass!: HomeAssistant;
@property() public trigger!: StateTrigger;
public static get defaultConfig() {
return { entity_id: "" };
}
protected render() {
const { entity_id, to, from } = this.trigger;
let trgFor = this.trigger.for;
if (
trgFor &&
((trgFor as ForDict).hours ||
(trgFor as ForDict).minutes ||
(trgFor as ForDict).seconds)
) {
// If the trigger was defined using the yaml dict syntax, convert it to
// the equivalent string format
let { hours = 0, minutes = 0, seconds = 0 } = trgFor as ForDict;
hours = hours.toString();
minutes = minutes.toString().padStart(2, "0");
seconds = seconds.toString().padStart(2, "0");
trgFor = `${hours}:${minutes}:${seconds}`;
}
return html`
<ha-entity-picker
.value=${entity_id}
@value-changed=${this._entityPicked}
.hass=${this.hass}
allow-custom-entity
></ha-entity-picker>
<paper-input
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.state.from"
)}
.name=${"from"}
.value=${from}
@value-changed=${this._valueChanged}
></paper-input>
<paper-input
label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.state.to"
)}
.name=${"to"}
.value=${to}
@value-changed=${this._valueChanged}
></paper-input>
<paper-input
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.state.for"
)}
.name=${"for"}
.value=${trgFor}
@value-changed=${this._valueChanged}
></paper-input>
`;
}
private _valueChanged(ev: CustomEvent): void {
handleChangeEvent(this, ev);
}
private _entityPicked(ev: PolymerChangedEvent<string>) {
ev.stopPropagation();
fireEvent(this, "value-changed", {
value: { ...this.trigger, entity_id: ev.detail.value },
});
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-trigger-state": HaStateTrigger;
}
}

75
src/panels/config/automation/trigger/types/ha-automation-trigger-sun.ts Normal file
View File

@ -0,0 +1,75 @@
import "@polymer/paper-input/paper-input";
import "@polymer/paper-radio-button/paper-radio-button";
import "@polymer/paper-radio-group/paper-radio-group";
// tslint:disable-next-line
import { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
import { LitElement, customElement, property, html } from "lit-element";
import { HomeAssistant } from "../../../../../types";
import {
SunTrigger,
handleChangeEvent,
TriggerElement,
} from "../ha-automation-trigger-row";
import { fireEvent } from "../../../../../common/dom/fire_event";
@customElement("ha-automation-trigger-sun")
export class HaSunTrigger extends LitElement implements TriggerElement {
@property() public hass!: HomeAssistant;
@property() public trigger!: SunTrigger;
public static get defaultConfig() {
return {
event: "sunrise",
};
}
protected render() {
const { offset, event } = this.trigger;
return html`
<label id="eventlabel">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.sun.event"
)}
</label>
<paper-radio-group
.selected=${event}
aria-labelledby="eventlabel"
@paper-radio-group-changed=${this._radioGroupPicked}
>
<paper-radio-button name="sunrise">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.sun.sunrise"
)}
</paper-radio-button>
<paper-radio-button name="sunset">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.sun.sunset"
)}
</paper-radio-button>
</paper-radio-group>
<paper-input
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.sun.offset"
)}
name="offset"
.value=${offset}
@value-changed=${this._valueChanged}
></paper-input>
`;
}
private _valueChanged(ev: CustomEvent): void {
handleChangeEvent(this, ev);
}
private _radioGroupPicked(ev) {
ev.stopPropagation();
fireEvent(this, "value-changed", {
value: {
...this.trigger,
event: (ev.target as PaperRadioGroupElement).selected,
},
});
}
}

36
src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts Normal file
View File

@ -0,0 +1,36 @@
import "../../../../../components/ha-textarea";
import { LitElement, property, html, customElement } from "lit-element";
import { HomeAssistant } from "../../../../../types";
import {
TemplateTrigger,
handleChangeEvent,
} from "../ha-automation-trigger-row";
@customElement("ha-automation-trigger-template")
export class HaTemplateTrigger extends LitElement {
@property() public hass!: HomeAssistant;
@property() public trigger!: TemplateTrigger;
public static get defaultConfig() {
return { value_template: "" };
}
protected render() {
const { value_template } = this.trigger;
return html`
<ha-textarea
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.template.value_template"
)}
name="value_template"
.value=${value_template}
@value-changed=${this._valueChanged}
dir="ltr"
></ha-textarea>
`;
}
private _valueChanged(ev: CustomEvent): void {
handleChangeEvent(this, ev);
}
}

36
src/panels/config/automation/trigger/types/ha-automation-trigger-time.ts Normal file
View File

@ -0,0 +1,36 @@
import "@polymer/paper-input/paper-input";
import { LitElement, html, property, customElement } from "lit-element";
import { HomeAssistant } from "../../../../../types";
import {
TimeTrigger,
handleChangeEvent,
TriggerElement,
} from "../ha-automation-trigger-row";
@customElement("ha-automation-trigger-time")
export class HaTimeTrigger extends LitElement implements TriggerElement {
@property() public hass!: HomeAssistant;
@property() public trigger!: TimeTrigger;
public static get defaultConfig() {
return { at: "" };
}
protected render() {
const { at } = this.trigger;
return html`
<paper-input
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.time.at"
)}
name="at"
.value=${at}
@value-changed=${this._valueChanged}
></paper-input>
`;
}
private _valueChanged(ev: CustomEvent): void {
handleChangeEvent(this, ev);
}
}

58
src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern.ts Normal file
View File

@ -0,0 +1,58 @@
import "@polymer/paper-input/paper-input";
import { LitElement, property, html, customElement } from "lit-element";
import {
TriggerElement,
handleChangeEvent,
TimePatternTrigger,
} from "../ha-automation-trigger-row";
import { HomeAssistant } from "../../../../../types";
@customElement("ha-automation-trigger-time_pattern")
export class HaTimePatternTrigger extends LitElement implements TriggerElement {
@property() public hass!: HomeAssistant;
@property() public trigger!: TimePatternTrigger;
public static get defaultConfig() {
return {};
}
protected render() {
const { hours, minutes, seconds } = this.trigger;
return html`
<paper-input
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.time_pattern.hours"
)}
name="hours"
.value=${hours}
@value-changed=${this._valueChanged}
></paper-input>
<paper-input
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.time_pattern.minutes"
)}
name="minutes"
.value=${minutes}
@value-changed=${this._valueChanged}
></paper-input>
<paper-input
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.time_pattern.seconds"
)}
name="seconds"
.value=${seconds}
@value-changed=${this._valueChanged}
></paper-input>
`;
}
private _valueChanged(ev: CustomEvent): void {
handleChangeEvent(this, ev);
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-trigger-time_pattern": HaTimePatternTrigger;
}
}

43
src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts Normal file
View File

@ -0,0 +1,43 @@
import "@polymer/paper-input/paper-input";
import { LitElement, customElement, property, html } from "lit-element";
import { HomeAssistant } from "../../../../../types";
import {
WebhookTrigger,
handleChangeEvent,
} from "../ha-automation-trigger-row";
@customElement("ha-automation-trigger-webhook")
export class HaWebhookTrigger extends LitElement {
@property() public hass!: HomeAssistant;
@property() public trigger!: WebhookTrigger;
public static get defaultConfig() {
return {
webhook_id: "",
};
}
protected render() {
const { webhook_id: webhookId } = this.trigger;
return html`
<paper-input
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.webhook.webhook_id"
)}
name="webhook_id"
.value=${webhookId}
@value-changed=${this._valueChanged}
></paper-input>
`;
}
private _valueChanged(ev: CustomEvent): void {
handleChangeEvent(this, ev);
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-trigger-webhook": HaWebhookTrigger;
}
}

108
src/panels/config/automation/trigger/types/ha-automation-trigger-zone.ts Normal file
View File

@ -0,0 +1,108 @@
import "@polymer/paper-radio-button/paper-radio-button";
import "@polymer/paper-radio-group/paper-radio-group";
// tslint:disable-next-line
import { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
import "../../../../../components/entity/ha-entity-picker";
import { hasLocation } from "../../../../../common/entity/has_location";
import { computeStateDomain } from "../../../../../common/entity/compute_state_domain";
import { LitElement, property, html, customElement } from "lit-element";
import { HomeAssistant } from "../../../../../types";
import { ZoneTrigger } from "../ha-automation-trigger-row";
import { PolymerChangedEvent } from "../../../../../polymer-types";
import { fireEvent } from "../../../../../common/dom/fire_event";
function zoneAndLocationFilter(stateObj) {
return hasLocation(stateObj) && computeStateDomain(stateObj) !== "zone";
}
@customElement("ha-automation-trigger-zone")
export class HaZoneTrigger extends LitElement {
@property() public hass!: HomeAssistant;
@property() public trigger!: ZoneTrigger;
public static get defaultConfig() {
return {
entity_id: "",
zone: "",
event: "enter",
};
}
protected render() {
const { entity_id, zone, event } = this.trigger;
return html`
<ha-entity-picker
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.zone.entity"
)}
.value=${entity_id}
@value-changed=${this._entityPicked}
.hass=${this.hass}
allow-custom-entity
.entityFilter=${zoneAndLocationFilter}
></ha-entity-picker>
<ha-entity-picker
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.zone.zone"
)}
.value=${zone}
@value-changed=${this._zonePicked}
.hass=${this.hass}
allow-custom-entity
.includeDomains=${["zone"]}
></ha-entity-picker>
<label id="eventlabel">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.zone.event"
)}
</label>
<paper-radio-group
.selected=${event}
aria-labelledby="eventlabel"
@paper-radio-group-changed=${this._radioGroupPicked}
>
<paper-radio-button name="enter">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.zone.enter"
)}
</paper-radio-button>
<paper-radio-button name="leave">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.zone.leave"
)}
</paper-radio-button>
</paper-radio-group>
`;
}
private _entityPicked(ev: PolymerChangedEvent<string>) {
ev.stopPropagation();
fireEvent(this, "value-changed", {
value: { ...this.trigger, entity_id: ev.detail.value },
});
}
private _zonePicked(ev: PolymerChangedEvent<string>) {
ev.stopPropagation();
fireEvent(this, "value-changed", {
value: { ...this.trigger, zone: ev.detail.value },
});
}
private _radioGroupPicked(ev: CustomEvent) {
ev.stopPropagation();
fireEvent(this, "value-changed", {
value: {
...this.trigger,
event: (ev.target as PaperRadioGroupElement).selected,
},
});
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-trigger-zone": HaZoneTrigger;
}
}

14
src/panels/config/js/automation.tsx
View File

@ -5,7 +5,8 @@ import "../ha-config-section";
import "../../../components/ha-card";
import "../../../components/ha-textarea";
import Trigger from "./trigger/index";
import "../automation/trigger/ha-automation-trigger";
import Condition from "./condition/index";
import Script from "./script/index";
@ -26,8 +27,8 @@ export default class Automation extends Component<any> {
});
}
public triggerChanged(trigger) {
this.props.onChange({ ...this.props.automation, trigger });
public triggerChanged(ev: CustomEvent) {
this.props.onChange({ ...this.props.automation, trigger: ev.detail.value });
}
public conditionChanged(condition) {
@ -90,11 +91,10 @@ export default class Automation extends Component<any> {
)}
</a>
</span>
<Trigger
trigger={trigger}
onChange={this.triggerChanged}
<ha-automation-trigger
triggers={trigger}
onvalue-changed={this.triggerChanged}
hass={hass}
localize={localize}
/>
</ha-config-section>

1
src/panels/config/js/preact-types.ts
View File

@ -23,6 +23,7 @@ declare global {
"ha-code-editor": any;
"ha-service-picker": any;
"mwc-button": any;
"ha-automation-trigger": any;
"ha-device-trigger-picker": any;
"ha-device-action-picker": any;
"ha-form": any;

133
src/panels/config/js/trigger/device.tsx
View File

@ -1,133 +0,0 @@
import { h } from "preact";
import "../../../../components/device/ha-device-picker";
import "../../../../components/device/ha-device-trigger-picker";
import "../../../../components/ha-form/ha-form";
import {
fetchDeviceTriggerCapabilities,
deviceAutomationsEqual,
} from "../../../../data/device_automation";
import { AutomationComponent } from "../automation-component";
export default class DeviceTrigger extends AutomationComponent<any, any> {
private _origTrigger;
constructor() {
super();
this.devicePicked = this.devicePicked.bind(this);
this.deviceTriggerPicked = this.deviceTriggerPicked.bind(this);
this._extraFieldsChanged = this._extraFieldsChanged.bind(this);
this.state = { device_id: undefined, capabilities: undefined };
}
public devicePicked(ev) {
if (!this.initialized) {
return;
}
this.setState({ ...this.state, device_id: ev.target.value });
}
public deviceTriggerPicked(ev) {
if (!this.initialized) {
return;
}
let trigger = ev.target.value;
if (
this._origTrigger &&
deviceAutomationsEqual(this._origTrigger, trigger)
) {
trigger = this._origTrigger;
}
this.props.onChange(this.props.index, trigger);
}
/* eslint-disable camelcase */
public render({ trigger, hass }, { device_id, capabilities }) {
if (device_id === undefined) {
device_id = trigger.device_id;
}
const extraFieldsData =
capabilities && capabilities.extra_fields
? capabilities.extra_fields.map((item) => {
return { [item.name]: this.props.trigger[item.name] };
})
: undefined;
return (
<div>
<ha-device-picker
value={device_id}
onChange={this.devicePicked}
hass={hass}
label="Device"
/>
<ha-device-trigger-picker
value={trigger}
deviceId={device_id}
onChange={this.deviceTriggerPicked}
hass={hass}
label="Trigger"
/>
{extraFieldsData && (
<ha-form
data={Object.assign({}, ...extraFieldsData)}
schema={this.state.capabilities.extra_fields}
computeLabel={this._extraFieldsComputeLabelCallback(hass.localize)}
onvalue-changed={this._extraFieldsChanged}
/>
)}
</div>
);
}
public componentDidMount() {
this.initialized = true;
if (!this.state.capabilities) {
this._getCapabilities();
}
if (this.props.trigger) {
this._origTrigger = this.props.trigger;
}
}
public componentDidUpdate(prevProps) {
if (!deviceAutomationsEqual(prevProps.trigger, this.props.trigger)) {
this._getCapabilities();
}
}
private async _getCapabilities() {
const trigger = this.props.trigger;
const capabilities = trigger.domain
? await fetchDeviceTriggerCapabilities(this.props.hass, trigger)
: null;
this.setState({ ...this.state, capabilities });
}
private _extraFieldsChanged(ev) {
if (!this.initialized) {
return;
}
this.props.onChange(this.props.index, {
...this.props.trigger,
...ev.detail.value,
});
}
private _extraFieldsComputeLabelCallback(localize) {
// Returns a callback for ha-form to calculate labels per schema object
return (schema) =>
localize(
`ui.panel.config.automation.editor.triggers.type.device.extra_fields.${schema.name}`
) || schema.name;
}
}
(DeviceTrigger as any).defaultConfig = {
device_id: "",
domain: "",
entity_id: "",
};

54
src/panels/config/js/trigger/event.tsx
View File

@ -1,54 +0,0 @@
import { h } from "preact";
import "@polymer/paper-input/paper-input";
import YAMLTextArea from "../yaml_textarea";
import { onChangeEvent } from "../../../../common/preact/event";
import { AutomationComponent } from "../automation-component";
export default class EventTrigger extends AutomationComponent<any> {
private onChange: (obj: any) => void;
constructor() {
super();
this.onChange = onChangeEvent.bind(this, "trigger");
this.eventDataChanged = this.eventDataChanged.bind(this);
}
/* eslint-disable camelcase */
// tslint:disable-next-line: variable-name
public eventDataChanged(event_data) {
this.props.onChange(this.props.index, {
...this.props.trigger,
event_data,
});
}
public render({ trigger, localize }) {
const { event_type, event_data } = trigger;
return (
<div>
<paper-input
label={localize(
"ui.panel.config.automation.editor.triggers.type.event.event_type"
)}
name="event_type"
value={event_type}
onvalue-changed={this.onChange}
/>
<YAMLTextArea
label={localize(
"ui.panel.config.automation.editor.triggers.type.event.event_data"
)}
value={event_data}
onChange={this.eventDataChanged}
/>
</div>
);
}
}
(EventTrigger as any).defaultConfig = {
event_type: "",
event_data: {},
};

88
src/panels/config/js/trigger/geo_location.tsx
View File

@ -1,88 +0,0 @@
import { h } from "preact";
import "@polymer/paper-radio-button/paper-radio-button";
import "@polymer/paper-radio-group/paper-radio-group";
import "../../../../components/entity/ha-entity-picker";
import { onChangeEvent } from "../../../../common/preact/event";
import { AutomationComponent } from "../automation-component";
export default class GeolocationTrigger extends AutomationComponent<any> {
private onChange: (obj: any) => void;
constructor() {
super();
this.onChange = onChangeEvent.bind(this, "trigger");
this.zonePicked = this.zonePicked.bind(this);
this.radioGroupPicked = this.radioGroupPicked.bind(this);
}
public zonePicked(ev) {
this.props.onChange(this.props.index, {
...this.props.trigger,
zone: ev.target.value,
});
}
public radioGroupPicked(ev) {
this.props.onChange(this.props.index, {
...this.props.trigger,
event: ev.target.selected,
});
}
/* eslint-disable camelcase */
public render({ trigger, hass, localize }) {
const { source, zone, event } = trigger;
return (
<div>
<paper-input
label={localize(
"ui.panel.config.automation.editor.triggers.type.geo_location.source"
)}
name="source"
value={source}
onvalue-changed={this.onChange}
/>
<ha-entity-picker
label={localize(
"ui.panel.config.automation.editor.triggers.type.geo_location.zone"
)}
value={zone}
onChange={this.zonePicked}
hass={hass}
allowCustomEntity
includeDomains={["zone"]}
/>
<label id="eventlabel">
{localize(
"ui.panel.config.automation.editor.triggers.type.geo_location.event"
)}
</label>
<paper-radio-group
selected={event}
aria-labelledby="eventlabel"
onpaper-radio-group-changed={this.radioGroupPicked}
>
<paper-radio-button name="enter">
{localize(
"ui.panel.config.automation.editor.triggers.type.geo_location.enter"
)}
</paper-radio-button>
<paper-radio-button name="leave">
{localize(
"ui.panel.config.automation.editor.triggers.type.geo_location.leave"
)}
</paper-radio-button>
</paper-radio-group>
</div>
);
}
}
(GeolocationTrigger as any).defaultConfig = {
source: "",
zone: "",
event: "enter",
};

58
src/panels/config/js/trigger/homeassistant.tsx
View File

@ -1,58 +0,0 @@
import { h } from "preact";
import "@polymer/paper-radio-button/paper-radio-button";
import "@polymer/paper-radio-group/paper-radio-group";
import { AutomationComponent } from "../automation-component";
export default class HassTrigger extends AutomationComponent<any> {
constructor() {
super();
this.radioGroupPicked = this.radioGroupPicked.bind(this);
}
public radioGroupPicked(ev) {
if (!this.initialized) {
return;
}
this.props.onChange(this.props.index, {
...this.props.trigger,
event: ev.target.selected,
});
}
/* eslint-disable camelcase */
public render({ trigger, localize }) {
const { event } = trigger;
return (
<div>
<label id="eventlabel">
{localize(
"ui.panel.config.automation.editor.triggers.type.homeassistant.event"
)}
</label>
<paper-radio-group
selected={event}
aria-labelledby="eventlabel"
onpaper-radio-group-changed={this.radioGroupPicked}
>
<paper-radio-button name="start">
{localize(
"ui.panel.config.automation.editor.triggers.type.homeassistant.start"
)}
</paper-radio-button>
<paper-radio-button name="shutdown">
{localize(
"ui.panel.config.automation.editor.triggers.type.homeassistant.shutdown"
)}
</paper-radio-button>
</paper-radio-group>
</div>
);
}
}
(HassTrigger as any).defaultConfig = {
event: "start",
};

59
src/panels/config/js/trigger/index.tsx
View File

@ -1,59 +0,0 @@
import { h, Component } from "preact";
import "@material/mwc-button";
import "../../../../components/ha-card";
import TriggerRow from "./trigger_row";
import StateTrigger from "./state";
export default class Trigger extends Component<any> {
constructor() {
super();
this.addTrigger = this.addTrigger.bind(this);
this.triggerChanged = this.triggerChanged.bind(this);
}
public addTrigger() {
const trigger = this.props.trigger.concat({
platform: "state",
...(StateTrigger as any).defaultConfig,
});
this.props.onChange(trigger);
}
public triggerChanged(index, newValue) {
const trigger = this.props.trigger.concat();
if (newValue === null) {
trigger.splice(index, 1);
} else {
trigger[index] = newValue;
}
this.props.onChange(trigger);
}
public render({ trigger, hass, localize }) {
return (
<div class="triggers">
{trigger.map((trg, idx) => (
<TriggerRow
index={idx}
trigger={trg}
onChange={this.triggerChanged}
hass={hass}
localize={localize}
/>
))}
<ha-card>
<div class="card-actions add-card">
<mwc-button onTap={this.addTrigger}>
{localize("ui.panel.config.automation.editor.triggers.add")}
</mwc-button>
</div>
</ha-card>
</div>
);
}
}

44
src/panels/config/js/trigger/mqtt.tsx
View File

@ -1,44 +0,0 @@
import { h } from "preact";
import "@polymer/paper-input/paper-input";
import { onChangeEvent } from "../../../../common/preact/event";
import { AutomationComponent } from "../automation-component";
export default class MQTTTrigger extends AutomationComponent<any> {
private onChange: (obj: any) => void;
constructor(props) {
super(props);
this.onChange = onChangeEvent.bind(this, "trigger");
}
/* eslint-disable camelcase */
public render({ trigger, localize }) {
const { topic, payload } = trigger;
return (
<div>
<paper-input
label={localize(
"ui.panel.config.automation.editor.triggers.type.mqtt.topic"
)}
name="topic"
value={topic}
onvalue-changed={this.onChange}
/>
<paper-input
label={localize(
"ui.panel.config.automation.editor.triggers.type.mqtt.payload"
)}
name="payload"
value={payload}
onvalue-changed={this.onChange}
/>
</div>
);
}
}
(MQTTTrigger as any).defaultConfig = {
topic: "",
};

90
src/panels/config/js/trigger/numeric_state.tsx
View File

@ -1,90 +0,0 @@
import { h } from "preact";
import "@polymer/paper-input/paper-input";
import "../../../../components/ha-textarea";
import "../../../../components/entity/ha-entity-picker";
import { onChangeEvent } from "../../../../common/preact/event";
import { AutomationComponent } from "../automation-component";
export default class NumericStateTrigger extends AutomationComponent<any> {
private onChange: (obj: any) => void;
constructor(props) {
super(props);
this.onChange = onChangeEvent.bind(this, "trigger");
this.entityPicked = this.entityPicked.bind(this);
}
public entityPicked(ev) {
this.props.onChange(this.props.index, {
...this.props.trigger,
entity_id: ev.target.value,
});
}
/* eslint-disable camelcase */
public render({ trigger, hass, localize }) {
const { value_template, entity_id, below, above } = trigger;
let trgFor = trigger.for;
if (trgFor && (trgFor.hours || trgFor.minutes || trgFor.seconds)) {
// If the trigger was defined using the yaml dict syntax, convert it to
// the equivalent string format
let { hours = 0, minutes = 0, seconds = 0 } = trgFor;
hours = hours.toString();
minutes = minutes.toString().padStart(2, "0");
seconds = seconds.toString().padStart(2, "0");
trgFor = `${hours}:${minutes}:${seconds}`;
}
return (
<div>
<ha-entity-picker
value={entity_id}
onChange={this.entityPicked}
hass={hass}
allowCustomEntity
/>
<paper-input
label={localize(
"ui.panel.config.automation.editor.triggers.type.numeric_state.above"
)}
name="above"
value={above}
onvalue-changed={this.onChange}
/>
<paper-input
label={localize(
"ui.panel.config.automation.editor.triggers.type.numeric_state.below"
)}
name="below"
value={below}
onvalue-changed={this.onChange}
/>
<ha-textarea
label={localize(
"ui.panel.config.automation.editor.triggers.type.numeric_state.value_template"
)}
name="value_template"
value={value_template}
onvalue-changed={this.onChange}
dir="ltr"
/>
<paper-input
label={localize(
"ui.panel.config.automation.editor.triggers.type.state.for"
)}
name="for"
value={trgFor}
onvalue-changed={this.onChange}
/>
</div>
);
}
}
(NumericStateTrigger as any).defaultConfig = {
entity_id: "",
};

81
src/panels/config/js/trigger/state.tsx
View File

@ -1,81 +0,0 @@
import { h } from "preact";
import "@polymer/paper-input/paper-input";
import "../../../../components/entity/ha-entity-picker";
import { onChangeEvent } from "../../../../common/preact/event";
import { AutomationComponent } from "../automation-component";
export default class StateTrigger extends AutomationComponent<any> {
private onChange: (obj: any) => void;
constructor(props) {
super(props);
this.onChange = onChangeEvent.bind(this, "trigger");
this.entityPicked = this.entityPicked.bind(this);
}
public entityPicked(ev) {
if (!this.initialized) {
return;
}
this.props.onChange(this.props.index, {
...this.props.trigger,
entity_id: ev.target.value,
});
}
/* eslint-disable camelcase */
public render({ trigger, hass, localize }) {
const { entity_id, to, from } = trigger;
let trgFor = trigger.for;
if (trgFor && (trgFor.hours || trgFor.minutes || trgFor.seconds)) {
// If the trigger was defined using the yaml dict syntax, convert it to
// the equivalent string format
let { hours = 0, minutes = 0, seconds = 0 } = trgFor;
hours = hours.toString();
minutes = minutes.toString().padStart(2, "0");
seconds = seconds.toString().padStart(2, "0");
trgFor = `${hours}:${minutes}:${seconds}`;
}
return (
<div>
<ha-entity-picker
value={entity_id}
onChange={this.entityPicked}
hass={hass}
allowCustomEntity
/>
<paper-input
label={localize(
"ui.panel.config.automation.editor.triggers.type.state.from"
)}
name="from"
value={from}
onvalue-changed={this.onChange}
/>
<paper-input
label={localize(
"ui.panel.config.automation.editor.triggers.type.state.to"
)}
name="to"
value={to}
onvalue-changed={this.onChange}
/>
<paper-input
label={localize(
"ui.panel.config.automation.editor.triggers.type.state.for"
)}
name="for"
value={trgFor}
onvalue-changed={this.onChange}
/>
</div>
);
}
}
(StateTrigger as any).defaultConfig = {
entity_id: "",
};

71
src/panels/config/js/trigger/sun.tsx
View File

@ -1,71 +0,0 @@
import { h } from "preact";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-radio-button/paper-radio-button";
import "@polymer/paper-radio-group/paper-radio-group";
import { onChangeEvent } from "../../../../common/preact/event";
import { AutomationComponent } from "../automation-component";
export default class SunTrigger extends AutomationComponent<any> {
private onChange: (obj: any) => void;
constructor() {
super();
this.onChange = onChangeEvent.bind(this, "trigger");
this.radioGroupPicked = this.radioGroupPicked.bind(this);
}
public radioGroupPicked(ev) {
if (!this.initialized) {
return;
}
this.props.onChange(this.props.index, {
...this.props.trigger,
event: ev.target.selected,
});
}
/* eslint-disable camelcase */
public render({ trigger, localize }) {
const { offset, event } = trigger;
return (
<div>
<label id="eventlabel">
{localize(
"ui.panel.config.automation.editor.triggers.type.sun.event"
)}
</label>
<paper-radio-group
selected={event}
aria-labelledby="eventlabel"
onpaper-radio-group-changed={this.radioGroupPicked}
>
<paper-radio-button name="sunrise">
{localize(
"ui.panel.config.automation.editor.triggers.type.sun.sunrise"
)}
</paper-radio-button>
<paper-radio-button name="sunset">
{localize(
"ui.panel.config.automation.editor.triggers.type.sun.sunset"
)}
</paper-radio-button>
</paper-radio-group>
<paper-input
label={localize(
"ui.panel.config.automation.editor.triggers.type.sun.offset"
)}
name="offset"
value={offset}
onvalue-changed={this.onChange}
/>
</div>
);
}
}
(SunTrigger as any).defaultConfig = {
event: "sunrise",
};

37
src/panels/config/js/trigger/template.tsx
View File

@ -1,37 +0,0 @@
import { h } from "preact";
import "../../../../components/ha-textarea";
import { onChangeEvent } from "../../../../common/preact/event";
import { AutomationComponent } from "../automation-component";
export default class TemplateTrigger extends AutomationComponent<any> {
private onChange: (obj: any) => void;
constructor() {
super();
this.onChange = onChangeEvent.bind(this, "trigger");
}
public render({ trigger, localize }) {
/* eslint-disable camelcase */
const { value_template } = trigger;
return (
<div>
<ha-textarea
label={localize(
"ui.panel.config.automation.editor.triggers.type.template.value_template"
)}
name="value_template"
value={value_template}
onvalue-changed={this.onChange}
dir="ltr"
/>
</div>
);
}
}
(TemplateTrigger as any).defaultConfig = {
value_template: "",
};

36
src/panels/config/js/trigger/time.tsx
View File

@ -1,36 +0,0 @@
import { h } from "preact";
import "@polymer/paper-input/paper-input";
import { onChangeEvent } from "../../../../common/preact/event";
import { AutomationComponent } from "../automation-component";
export default class TimeTrigger extends AutomationComponent<any> {
private onChange: (obj: any) => void;
constructor() {
super();
this.onChange = onChangeEvent.bind(this, "trigger");
}
/* eslint-disable camelcase */
public render({ trigger, localize }) {
const { at } = trigger;
return (
<div>
<paper-input
label={localize(
"ui.panel.config.automation.editor.triggers.type.time.at"
)}
name="at"
value={at}
onvalue-changed={this.onChange}
/>
</div>
);
}
}
(TimeTrigger as any).defaultConfig = {
at: "",
};

50
src/panels/config/js/trigger/time_pattern.tsx
View File

@ -1,50 +0,0 @@
import { h } from "preact";
import "@polymer/paper-input/paper-input";
import { onChangeEvent } from "../../../../common/preact/event";
import { AutomationComponent } from "../automation-component";
export default class TimePatternTrigger extends AutomationComponent<any> {
private onChange: (obj: any) => void;
constructor() {
super();
this.onChange = onChangeEvent.bind(this, "trigger");
}
/* eslint-disable camelcase */
public render({ trigger, localize }) {
const { hours, minutes, seconds } = trigger;
return (
<div>
<paper-input
label={localize(
"ui.panel.config.automation.editor.triggers.type.time_pattern.hours"
)}
name="hours"
value={hours}
onvalue-changed={this.onChange}
/>
<paper-input
label={localize(
"ui.panel.config.automation.editor.triggers.type.time_pattern.minutes"
)}
name="minutes"
value={minutes}
onvalue-changed={this.onChange}
/>
<paper-input
label={localize(
"ui.panel.config.automation.editor.triggers.type.time_pattern.seconds"
)}
name="seconds"
value={seconds}
onvalue-changed={this.onChange}
/>
</div>
);
}
}
(TimePatternTrigger as any).defaultConfig = {};

120
src/panels/config/js/trigger/trigger_edit.tsx
View File

@ -1,120 +0,0 @@
import { h, Component } from "preact";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "../../../../components/ha-code-editor";
import YAMLTextArea from "../yaml_textarea";
import DeviceTrigger from "./device";
import EventTrigger from "./event";
import GeolocationTrigger from "./geo_location";
import HassTrigger from "./homeassistant";
import MQTTTrigger from "./mqtt";
import NumericStateTrigger from "./numeric_state";
import TimePatternTrigger from "./time_pattern";
import StateTrigger from "./state";
import SunTrigger from "./sun";
import TemplateTrigger from "./template";
import TimeTrigger from "./time";
import WebhookTrigger from "./webhook";
import ZoneTrigger from "./zone";
const TYPES = {
device: DeviceTrigger,
event: EventTrigger,
state: StateTrigger,
geo_location: GeolocationTrigger,
homeassistant: HassTrigger,
mqtt: MQTTTrigger,
numeric_state: NumericStateTrigger,
sun: SunTrigger,
template: TemplateTrigger,
time: TimeTrigger,
time_pattern: TimePatternTrigger,
webhook: WebhookTrigger,
zone: ZoneTrigger,
};
const OPTIONS = Object.keys(TYPES).sort();
export default class TriggerEdit extends Component<any> {
constructor() {
super();
this.typeChanged = this.typeChanged.bind(this);
this.onYamlChange = this.onYamlChange.bind(this);
}
public render({ index, trigger, onChange, hass, localize, yamlMode }) {
// tslint:disable-next-line: variable-name
const Comp = TYPES[trigger.platform];
const selected = OPTIONS.indexOf(trigger.platform);
if (yamlMode || !Comp) {
return (
<div style="margin-right: 24px;">
{!Comp && (
<div>
{localize(
"ui.panel.config.automation.editor.triggers.unsupported_platform",
"platform",
trigger.platform
)}
</div>
)}
<YAMLTextArea value={trigger} onChange={this.onYamlChange} />
</div>
);
}
return (
<div>
<paper-dropdown-menu-light
label={localize(
"ui.panel.config.automation.editor.triggers.type_select"
)}
no-animations
>
<paper-listbox
slot="dropdown-content"
selected={selected}
oniron-select={this.typeChanged}
>
{OPTIONS.map((opt) => (
<paper-item platform={opt}>
{localize(
`ui.panel.config.automation.editor.triggers.type.${opt}.label`
)}
</paper-item>
))}
</paper-listbox>
</paper-dropdown-menu-light>
<Comp
index={index}
trigger={trigger}
onChange={onChange}
hass={hass}
localize={localize}
/>
</div>
);
}
private typeChanged(ev) {
const type = ev.target.selectedItem.attributes.platform.value;
if (type !== this.props.trigger.platform) {
this.props.onChange(this.props.index, {
platform: type,
...TYPES[type].defaultConfig,
});
}
}
private onYamlChange(trigger) {
this.props.onChange(this.props.index, trigger);
}
}

86
src/panels/config/js/trigger/trigger_row.tsx
View File

@ -1,86 +0,0 @@
import { h, Component } from "preact";
import "@polymer/paper-menu-button/paper-menu-button";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "../../../../components/ha-card";
import TriggerEdit from "./trigger_edit";
export default class TriggerRow extends Component<any> {
public state: { yamlMode: boolean };
constructor() {
super();
this.state = {
yamlMode: false,
};
this.onDelete = this.onDelete.bind(this);
this.switchYamlMode = this.switchYamlMode.bind(this);
}
public render(props, { yamlMode }) {
return (
<ha-card>
<div class="card-content">
<div class="card-menu" style="z-index: 3">
<paper-menu-button
no-animations
horizontal-align="right"
horizontal-offset="-5"
vertical-offset="-5"
close-on-activate
>
<paper-icon-button
icon="hass:dots-vertical"
slot="dropdown-trigger"
/>
<paper-listbox slot="dropdown-content">
<paper-item onTap={this.switchYamlMode}>
{yamlMode
? props.localize(
"ui.panel.config.automation.editor.edit_ui"
)
: props.localize(
"ui.panel.config.automation.editor.edit_yaml"
)}
</paper-item>
<paper-item disabled>
{props.localize(
"ui.panel.config.automation.editor.triggers.duplicate"
)}
</paper-item>
<paper-item onTap={this.onDelete}>
{props.localize(
"ui.panel.config.automation.editor.triggers.delete"
)}
</paper-item>
</paper-listbox>
</paper-menu-button>
</div>
<TriggerEdit {...props} yamlMode={yamlMode} />
</div>
</ha-card>
);
}
private onDelete() {
// eslint-disable-next-line
if (
confirm(
this.props.localize(
"ui.panel.config.automation.editor.triggers.delete_confirm"
)
)
) {
this.props.onChange(this.props.index, null);
}
}
private switchYamlMode() {
this.setState({
yamlMode: !this.state.yamlMode,
});
}
}

35
src/panels/config/js/trigger/webhook.tsx
View File

@ -1,35 +0,0 @@
import { h } from "preact";
import "@polymer/paper-input/paper-input";
import { onChangeEvent } from "../../../../common/preact/event";
import { AutomationComponent } from "../automation-component";
export default class WebhookTrigger extends AutomationComponent<any> {
private onChange: (obj: any) => void;
constructor() {
super();
this.onChange = onChangeEvent.bind(this, "trigger");
}
public render({ trigger, localize }) {
const { webhook_id: webhookId } = trigger;
return (
<div>
<paper-input
label={localize(
"ui.panel.config.automation.editor.triggers.type.webhook.webhook_id"
)}
name="webhook_id"
value={webhookId}
onvalue-changed={this.onChange}
/>
</div>
);
}
}
(WebhookTrigger as any).defaultConfig = {
webhook_id: "",
};

109
src/panels/config/js/trigger/zone.tsx
View File

@ -1,109 +0,0 @@
import { h } from "preact";
import "@polymer/paper-radio-button/paper-radio-button";
import "@polymer/paper-radio-group/paper-radio-group";
import "../../../../components/entity/ha-entity-picker";
import { hasLocation } from "../../../../common/entity/has_location";
import { computeStateDomain } from "../../../../common/entity/compute_state_domain";
import { AutomationComponent } from "../automation-component";
function zoneAndLocationFilter(stateObj) {
return hasLocation(stateObj) && computeStateDomain(stateObj) !== "zone";
}
export default class ZoneTrigger extends AutomationComponent<any> {
constructor() {
super();
this.radioGroupPicked = this.radioGroupPicked.bind(this);
this.entityPicked = this.entityPicked.bind(this);
this.zonePicked = this.zonePicked.bind(this);
}
/* eslint-disable camelcase */
public render({ trigger, hass, localize }) {
const { entity_id, zone, event } = trigger;
return (
<div>
<ha-entity-picker
label={localize(
"ui.panel.config.automation.editor.triggers.type.zone.entity"
)}
value={entity_id}
onChange={this.entityPicked}
hass={hass}
allowCustomEntity
entityFilter={zoneAndLocationFilter}
/>
<ha-entity-picker
label={localize(
"ui.panel.config.automation.editor.triggers.type.zone.zone"
)}
value={zone}
onChange={this.zonePicked}
hass={hass}
allowCustomEntity
includeDomains={["zone"]}
/>
<label id="eventlabel">
{localize(
"ui.panel.config.automation.editor.triggers.type.zone.event"
)}
</label>
<paper-radio-group
selected={event}
aria-labelledby="eventlabel"
onpaper-radio-group-changed={this.radioGroupPicked}
>
<paper-radio-button name="enter">
{localize(
"ui.panel.config.automation.editor.triggers.type.zone.enter"
)}
</paper-radio-button>
<paper-radio-button name="leave">
{localize(
"ui.panel.config.automation.editor.triggers.type.zone.leave"
)}
</paper-radio-button>
</paper-radio-group>
</div>
);
}
private entityPicked(ev) {
if (!this.initialized) {
return;
}
this.props.onChange(this.props.index, {
...this.props.trigger,
entity_id: ev.target.value,
});
}
private zonePicked(ev) {
if (!this.initialized) {
return;
}
this.props.onChange(this.props.index, {
...this.props.trigger,
zone: ev.target.value,
});
}
private radioGroupPicked(ev) {
if (!this.initialized) {
return;
}
this.props.onChange(this.props.index, {
...this.props.trigger,
event: ev.target.selected,
});
}
}
(ZoneTrigger as any).defaultConfig = {
entity_id: "",
zone: "",
event: "enter",
};