mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 07:16:39 +00:00
Add support for target to automation call service action (#8372)
This commit is contained in:
Bram Kragten
GitHub
parent
acefa39796
commit
99eff73b0d
@ -101,7 +101,7 @@
|
||||
"fuse.js": "^6.0.0",
|
||||
"google-timezones-json": "^1.0.2",
|
||||
"hls.js": "^0.13.2",
|
||||
"home-assistant-js-websocket": "^5.4.1",
|
||||
"home-assistant-js-websocket": "^5.8.1",
|
||||
"idb-keyval": "^3.2.0",
|
||||
"intl-messageformat": "^8.3.9",
|
||||
"js-yaml": "^3.13.1",
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
|
||||
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import {
|
||||
css,
|
||||
@ -38,7 +33,7 @@ import {
|
||||
import { SubscribeMixin } from "../../mixins/subscribe-mixin";
|
||||
import { PolymerChangedEvent } from "../../polymer-types";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import "../ha-svg-icon";
|
||||
import { HaComboBox } from "../ha-combo-box";
|
||||
|
||||
interface Device {
|
||||
name: string;
|
||||
@ -115,7 +110,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
|
||||
@property({ type: Boolean })
|
||||
private _opened?: boolean;
|
||||
|
||||
@query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
|
||||
@query("ha-combo-box", true) private _comboBox!: HaComboBox;
|
||||
|
||||
private _init = false;
|
||||
|
||||
@ -244,15 +239,11 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
|
||||
);
|
||||
|
||||
public open() {
|
||||
this.updateComplete.then(() => {
|
||||
(this.shadowRoot?.querySelector("vaadin-combo-box-light") as any)?.open();
|
||||
});
|
||||
this._comboBox?.open();
|
||||
}
|
||||
|
||||
public focus() {
|
||||
this.updateComplete.then(() => {
|
||||
this.shadowRoot?.querySelector("paper-input")?.focus();
|
||||
});
|
||||
this._comboBox?.focus();
|
||||
}
|
||||
|
||||
public hassSubscribe(): UnsubscribeFunc[] {
|
||||
@ -292,70 +283,28 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
|
||||
return html``;
|
||||
}
|
||||
return html`
|
||||
<vaadin-combo-box-light
|
||||
<ha-combo-box
|
||||
.hass=${this.hass}
|
||||
.label=${this.label === undefined && this.hass
|
||||
? this.hass.localize("ui.components.device-picker.device")
|
||||
: this.label}
|
||||
.value=${this._value}
|
||||
.renderer=${rowRenderer}
|
||||
item-value-path="id"
|
||||
item-id-path="id"
|
||||
item-label-path="name"
|
||||
.value=${this._value}
|
||||
.renderer=${rowRenderer}
|
||||
@opened-changed=${this._openedChanged}
|
||||
@value-changed=${this._deviceChanged}
|
||||
>
|
||||
<paper-input
|
||||
.label=${this.label === undefined && this.hass
|
||||
? this.hass.localize("ui.components.device-picker.device")
|
||||
: this.label}
|
||||
class="input"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
>
|
||||
${this.value
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.components.device-picker.clear"
|
||||
)}
|
||||
slot="suffix"
|
||||
class="clear-button"
|
||||
@click=${this._clearValue}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
`
|
||||
: ""}
|
||||
|
||||
<mwc-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.components.device-picker.show_devices"
|
||||
)}
|
||||
slot="suffix"
|
||||
class="toggle-button"
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
</paper-input>
|
||||
</vaadin-combo-box-light>
|
||||
></ha-combo-box>
|
||||
`;
|
||||
}
|
||||
|
||||
private _clearValue(ev: Event) {
|
||||
ev.stopPropagation();
|
||||
this._setValue("");
|
||||
}
|
||||
|
||||
private get _value() {
|
||||
return this.value || "";
|
||||
}
|
||||
|
||||
private _openedChanged(ev: PolymerChangedEvent<boolean>) {
|
||||
this._opened = ev.detail.value;
|
||||
}
|
||||
|
||||
private _deviceChanged(ev: PolymerChangedEvent<string>) {
|
||||
ev.stopPropagation();
|
||||
const newValue = ev.detail.value;
|
||||
|
||||
if (newValue !== this._value) {
|
||||
@ -363,6 +312,10 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
|
||||
}
|
||||
}
|
||||
|
||||
private _openedChanged(ev: PolymerChangedEvent<boolean>) {
|
||||
this._opened = ev.detail.value;
|
||||
}
|
||||
|
||||
private _setValue(value: string) {
|
||||
this.value = value;
|
||||
setTimeout(() => {
|
||||
|
||||
@ -1,116 +0,0 @@
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
|
||||
import { EventsMixin } from "../mixins/events-mixin";
|
||||
import "./ha-icon-button";
|
||||
|
||||
class HaComboBox extends EventsMixin(PolymerElement) {
|
||||
static get template() {
|
||||
return html`
|
||||
<style>
|
||||
paper-input > ha-icon-button {
|
||||
--mdc-icon-button-size: 24px;
|
||||
padding: 2px;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<vaadin-combo-box-light
|
||||
items="[[_items]]"
|
||||
item-value-path="[[itemValuePath]]"
|
||||
item-label-path="[[itemLabelPath]]"
|
||||
value="{{value}}"
|
||||
opened="{{opened}}"
|
||||
allow-custom-value="[[allowCustomValue]]"
|
||||
on-change="_fireChanged"
|
||||
>
|
||||
<paper-input
|
||||
autofocus="[[autofocus]]"
|
||||
label="[[label]]"
|
||||
class="input"
|
||||
value="[[value]]"
|
||||
>
|
||||
<ha-icon-button
|
||||
slot="suffix"
|
||||
class="clear-button"
|
||||
icon="hass:close"
|
||||
hidden$="[[!value]]"
|
||||
>Clear</ha-icon-button
|
||||
>
|
||||
<ha-icon-button
|
||||
slot="suffix"
|
||||
class="toggle-button"
|
||||
icon="[[_computeToggleIcon(opened)]]"
|
||||
hidden$="[[!items.length]]"
|
||||
>Toggle</ha-icon-button
|
||||
>
|
||||
</paper-input>
|
||||
<template>
|
||||
<style>
|
||||
paper-item {
|
||||
margin: -5px -10px;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<paper-item>[[_computeItemLabel(item, itemLabelPath)]]</paper-item>
|
||||
</template>
|
||||
</vaadin-combo-box-light>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
allowCustomValue: Boolean,
|
||||
items: {
|
||||
type: Object,
|
||||
observer: "_itemsChanged",
|
||||
},
|
||||
_items: Object,
|
||||
itemLabelPath: String,
|
||||
itemValuePath: String,
|
||||
autofocus: Boolean,
|
||||
label: String,
|
||||
opened: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer: "_openedChanged",
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
notify: true,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
_openedChanged(newVal) {
|
||||
if (!newVal) {
|
||||
this._items = this.items;
|
||||
}
|
||||
}
|
||||
|
||||
_itemsChanged(newVal) {
|
||||
if (!this.opened) {
|
||||
this._items = newVal;
|
||||
}
|
||||
}
|
||||
|
||||
_computeToggleIcon(opened) {
|
||||
return opened ? "hass:menu-up" : "hass:menu-down";
|
||||
}
|
||||
|
||||
_computeItemLabel(item, itemLabelPath) {
|
||||
return itemLabelPath ? item[itemLabelPath] : item;
|
||||
}
|
||||
|
||||
_fireChanged(ev) {
|
||||
ev.stopPropagation();
|
||||
this.fire("change");
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-combo-box", HaComboBox);
|
||||
177
src/components/ha-combo-box.ts
Normal file
177
src/components/ha-combo-box.ts
Normal file
@ -0,0 +1,177 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
customElement,
|
||||
html,
|
||||
LitElement,
|
||||
property,
|
||||
query,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import { PolymerChangedEvent } from "../polymer-types";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-svg-icon";
|
||||
|
||||
const defaultRowRenderer = (
|
||||
root: HTMLElement,
|
||||
_owner,
|
||||
model: { item: any }
|
||||
) => {
|
||||
if (!root.firstElementChild) {
|
||||
root.innerHTML = `
|
||||
<style>
|
||||
paper-item {
|
||||
margin: -5px -10px;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<paper-item></paper-item>
|
||||
`;
|
||||
}
|
||||
|
||||
root.querySelector("paper-item")!.textContent = model.item;
|
||||
};
|
||||
|
||||
@customElement("ha-combo-box")
|
||||
export class HaComboBox extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property() public label?: string;
|
||||
|
||||
@property() public value?: string;
|
||||
|
||||
@property() public items?: [];
|
||||
|
||||
@property() public filteredItems?: [];
|
||||
|
||||
@property({ attribute: "allow-custom-value", type: Boolean })
|
||||
public allowCustomValue?: boolean;
|
||||
|
||||
@property({ attribute: "item-value-path" }) public itemValuePath?: string;
|
||||
|
||||
@property({ attribute: "item-label-path" }) public itemLabelPath?: string;
|
||||
|
||||
@property({ attribute: "item-id-path" }) public itemIdPath?: string;
|
||||
|
||||
@property() public renderer?: (
|
||||
root: HTMLElement,
|
||||
owner: HTMLElement,
|
||||
model: { item: any }
|
||||
) => void;
|
||||
|
||||
@property({ type: Boolean })
|
||||
private _opened?: boolean;
|
||||
|
||||
@query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
|
||||
|
||||
public open() {
|
||||
this.updateComplete.then(() => {
|
||||
(this._comboBox as any)?.open();
|
||||
});
|
||||
}
|
||||
|
||||
public focus() {
|
||||
this.updateComplete.then(() => {
|
||||
this.shadowRoot?.querySelector("paper-input")?.focus();
|
||||
});
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<vaadin-combo-box-light
|
||||
.itemValuePath=${this.itemValuePath}
|
||||
.itemIdPath=${this.itemIdPath}
|
||||
.itemLabelPath=${this.itemLabelPath}
|
||||
.value=${this.value}
|
||||
.items=${this.items}
|
||||
.filteredItems=${this.filteredItems}
|
||||
.renderer=${this.renderer || defaultRowRenderer}
|
||||
.allowCustomValue=${this.allowCustomValue}
|
||||
@opened-changed=${this._openedChanged}
|
||||
@filter-changed=${this._filterChanged}
|
||||
@value-changed=${this._valueChanged}
|
||||
>
|
||||
<paper-input
|
||||
.label=${this.label}
|
||||
class="input"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
>
|
||||
${this.value
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
.label=${this.hass.localize("ui.components.combo-box.clear")}
|
||||
slot="suffix"
|
||||
class="clear-button"
|
||||
@click=${this._clearValue}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
`
|
||||
: ""}
|
||||
|
||||
<mwc-icon-button
|
||||
.label=${this.hass.localize("ui.components.combo-box.show")}
|
||||
slot="suffix"
|
||||
class="toggle-button"
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
</paper-input>
|
||||
</vaadin-combo-box-light>
|
||||
`;
|
||||
}
|
||||
|
||||
private _clearValue(ev: Event) {
|
||||
ev.stopPropagation();
|
||||
fireEvent(this, "value-changed", { value: undefined });
|
||||
}
|
||||
|
||||
private _openedChanged(ev: PolymerChangedEvent<boolean>) {
|
||||
this._opened = ev.detail.value;
|
||||
// @ts-ignore
|
||||
fireEvent(this, ev.type, ev.detail);
|
||||
}
|
||||
|
||||
private _filterChanged(ev: PolymerChangedEvent<boolean>) {
|
||||
// @ts-ignore
|
||||
fireEvent(this, ev.type, ev.detail);
|
||||
}
|
||||
|
||||
private _valueChanged(ev: PolymerChangedEvent<string>) {
|
||||
ev.stopPropagation();
|
||||
const newValue = ev.detail.value;
|
||||
|
||||
if (newValue !== this.value) {
|
||||
fireEvent(this, "value-changed", { value: newValue });
|
||||
}
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
paper-input > mwc-icon-button {
|
||||
--mdc-icon-button-size: 24px;
|
||||
padding: 2px;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-combo-box": HaComboBox;
|
||||
}
|
||||
}
|
||||
@ -46,7 +46,7 @@ export class HaNumberSelector extends LitElement {
|
||||
class=${classMap({ single: this.selector.number.mode === "box" })}
|
||||
.min=${this.selector.number.min}
|
||||
.max=${this.selector.number.max}
|
||||
.value=${this._value}
|
||||
.value=${this.value}
|
||||
.step=${this.selector.number.step}
|
||||
type="number"
|
||||
auto-validate
|
||||
@ -65,16 +65,21 @@ export class HaNumberSelector extends LitElement {
|
||||
}
|
||||
|
||||
private _handleInputChange(ev) {
|
||||
const value = ev.detail.value;
|
||||
if (this._value === value) {
|
||||
ev.stopPropagation();
|
||||
const value =
|
||||
ev.detail.value === "" || isNaN(ev.detail.value)
|
||||
? undefined
|
||||
: Number(ev.detail.value);
|
||||
if (this.value === value) {
|
||||
return;
|
||||
}
|
||||
fireEvent(this, "value-changed", { value });
|
||||
}
|
||||
|
||||
private _handleSliderChange(ev) {
|
||||
const value = ev.target.value;
|
||||
if (this._value === value) {
|
||||
ev.stopPropagation();
|
||||
const value = Number(ev.target.value);
|
||||
if (this.value === value) {
|
||||
return;
|
||||
}
|
||||
fireEvent(this, "value-changed", { value });
|
||||
|
||||
@ -3,7 +3,11 @@ import "@material/mwc-list/mwc-list-item";
|
||||
import "@material/mwc-tab-bar/mwc-tab-bar";
|
||||
import "@material/mwc-tab/mwc-tab";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import {
|
||||
HassEntity,
|
||||
HassServiceTarget,
|
||||
UnsubscribeFunc,
|
||||
} from "home-assistant-js-websocket";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
@ -20,7 +24,6 @@ import {
|
||||
subscribeEntityRegistry,
|
||||
} from "../../data/entity_registry";
|
||||
import { TargetSelector } from "../../data/selector";
|
||||
import { Target } from "../../data/target";
|
||||
import { SubscribeMixin } from "../../mixins/subscribe-mixin";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import "../ha-target-picker";
|
||||
@ -31,7 +34,7 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
|
||||
|
||||
@property() public selector!: TargetSelector;
|
||||
|
||||
@property() public value?: Target;
|
||||
@property() public value?: HassServiceTarget;
|
||||
|
||||
@property() public label?: string;
|
||||
|
||||
@ -59,7 +62,8 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
|
||||
const oldSelector = changedProperties.get("selector");
|
||||
if (
|
||||
oldSelector !== this.selector &&
|
||||
this.selector.target.device?.integration
|
||||
(this.selector.target.device?.integration ||
|
||||
this.selector.target.entity?.integration)
|
||||
) {
|
||||
this._loadConfigEntries();
|
||||
}
|
||||
@ -84,11 +88,15 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
|
||||
}
|
||||
|
||||
private _filterEntities(entity: HassEntity): boolean {
|
||||
if (this.selector.target.entity?.integration) {
|
||||
if (
|
||||
this.selector.target.entity?.integration ||
|
||||
this.selector.target.device?.integration
|
||||
) {
|
||||
if (
|
||||
!this._entityPlaformLookup ||
|
||||
this._entityPlaformLookup[entity.entity_id] !==
|
||||
this.selector.target.entity.integration
|
||||
(this.selector.target.entity?.integration ||
|
||||
this.selector.target.device?.integration)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
@ -118,7 +126,10 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
if (this.selector.target.device?.integration) {
|
||||
if (
|
||||
this.selector.target.device?.integration ||
|
||||
this.selector.target.entity?.integration
|
||||
) {
|
||||
if (
|
||||
!this._configEntries?.some((entry) =>
|
||||
device.config_entries.includes(entry.entry_id)
|
||||
@ -132,14 +143,16 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
|
||||
|
||||
private async _loadConfigEntries() {
|
||||
this._configEntries = (await getConfigEntries(this.hass)).filter(
|
||||
(entry) => entry.domain === this.selector.target.device?.integration
|
||||
(entry) =>
|
||||
entry.domain ===
|
||||
(this.selector.target.device?.integration ||
|
||||
this.selector.target.entity?.integration)
|
||||
);
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
ha-target-picker {
|
||||
margin: 0 -8px;
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
290
src/components/ha-service-control.ts
Normal file
290
src/components/ha-service-control.ts
Normal file
@ -0,0 +1,290 @@
|
||||
import { HassService, HassServiceTarget } from "home-assistant-js-websocket";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
customElement,
|
||||
html,
|
||||
internalProperty,
|
||||
LitElement,
|
||||
property,
|
||||
PropertyValues,
|
||||
query,
|
||||
} from "lit-element";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import { computeDomain } from "../common/entity/compute_domain";
|
||||
import { computeObjectId } from "../common/entity/compute_object_id";
|
||||
import { ENTITY_COMPONENT_DOMAINS } from "../data/entity";
|
||||
import { Selector } from "../data/selector";
|
||||
import { PolymerChangedEvent } from "../polymer-types";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-selector/ha-selector";
|
||||
import "./ha-service-picker";
|
||||
import "./ha-settings-row";
|
||||
import "./ha-yaml-editor";
|
||||
import type { HaYamlEditor } from "./ha-yaml-editor";
|
||||
|
||||
interface ExtHassService extends Omit<HassService, "fields"> {
|
||||
fields: {
|
||||
key: string;
|
||||
name?: string;
|
||||
description: string;
|
||||
required?: boolean;
|
||||
default?: any;
|
||||
example?: any;
|
||||
selector?: Selector;
|
||||
}[];
|
||||
}
|
||||
|
||||
@customElement("ha-service-control")
|
||||
export class HaServiceControl extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public value?: {
|
||||
service: string;
|
||||
target?: HassServiceTarget;
|
||||
data?: Record<string, any>;
|
||||
};
|
||||
|
||||
@property({ reflect: true, type: Boolean }) public narrow!: boolean;
|
||||
|
||||
@internalProperty() private _serviceData?: ExtHassService;
|
||||
|
||||
@query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
|
||||
|
||||
protected updated(changedProperties: PropertyValues) {
|
||||
if (!changedProperties.has("value")) {
|
||||
return;
|
||||
}
|
||||
this._serviceData = this.value?.service
|
||||
? this._getServiceInfo(this.value.service)
|
||||
: undefined;
|
||||
|
||||
if (
|
||||
this._serviceData &&
|
||||
"target" in this._serviceData &&
|
||||
this.value?.data?.entity_id
|
||||
) {
|
||||
this.value = {
|
||||
...this.value,
|
||||
target: { ...this.value.target, entity_id: this.value.data.entity_id },
|
||||
};
|
||||
delete this.value.data!.entity_id;
|
||||
}
|
||||
|
||||
if (this.value?.data) {
|
||||
const yamlEditor = this._yamlEditor;
|
||||
if (yamlEditor && yamlEditor.value !== this.value.data) {
|
||||
yamlEditor.setValue(this.value.data);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private _domainFilter = memoizeOne((service: string) => {
|
||||
const domain = computeDomain(service);
|
||||
return ENTITY_COMPONENT_DOMAINS.includes(domain) ? [domain] : null;
|
||||
});
|
||||
|
||||
private _getServiceInfo = memoizeOne((service: string):
|
||||
| ExtHassService
|
||||
| undefined => {
|
||||
if (!service) {
|
||||
return undefined;
|
||||
}
|
||||
const domain = computeDomain(service);
|
||||
const serviceName = computeObjectId(service);
|
||||
const serviceDomains = this.hass.services;
|
||||
if (!(domain in serviceDomains)) {
|
||||
return undefined;
|
||||
}
|
||||
if (!(serviceName in serviceDomains[domain])) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const fields = Object.entries(
|
||||
serviceDomains[domain][serviceName].fields
|
||||
).map(([key, value]) => {
|
||||
return {
|
||||
key,
|
||||
...value,
|
||||
selector: value.selector as Selector | undefined,
|
||||
};
|
||||
});
|
||||
return {
|
||||
...serviceDomains[domain][serviceName],
|
||||
fields,
|
||||
};
|
||||
});
|
||||
|
||||
protected render() {
|
||||
const legacy =
|
||||
this._serviceData?.fields.length &&
|
||||
!this._serviceData.fields.some((field) => field.selector);
|
||||
|
||||
const entityId =
|
||||
legacy &&
|
||||
this._serviceData?.fields.find((field) => field.key === "entity_id");
|
||||
|
||||
return html`<ha-service-picker
|
||||
.hass=${this.hass}
|
||||
.value=${this.value?.service}
|
||||
@value-changed=${this._serviceChanged}
|
||||
></ha-service-picker>
|
||||
${this._serviceData && "target" in this._serviceData
|
||||
? html`<ha-selector
|
||||
.hass=${this.hass}
|
||||
.selector=${this._serviceData.target
|
||||
? { target: this._serviceData.target }
|
||||
: {
|
||||
target: {
|
||||
entity: { domain: computeDomain(this.value!.service) },
|
||||
},
|
||||
}}
|
||||
@value-changed=${this._targetChanged}
|
||||
.value=${this.value?.target}
|
||||
></ha-selector>`
|
||||
: entityId
|
||||
? html`<ha-entity-picker
|
||||
.hass=${this.hass}
|
||||
.value=${this.value?.data?.entity_id}
|
||||
.label=${entityId.description}
|
||||
.includeDomains=${this._domainFilter(this.value!.service)}
|
||||
@value-changed=${this._entityPicked}
|
||||
allow-custom-entity
|
||||
></ha-entity-picker>`
|
||||
: ""}
|
||||
${legacy
|
||||
? html`<ha-yaml-editor
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.type.service.service_data"
|
||||
)}
|
||||
.name=${"data"}
|
||||
.defaultValue=${this.value?.data}
|
||||
@value-changed=${this._dataChanged}
|
||||
></ha-yaml-editor>`
|
||||
: this._serviceData?.fields.map((dataField) =>
|
||||
dataField.selector
|
||||
? html`<ha-settings-row .narrow=${this.narrow}>
|
||||
<span slot="heading">${dataField.name || dataField.key}</span>
|
||||
<span slot="description">${dataField?.description}</span
|
||||
><ha-selector
|
||||
.hass=${this.hass}
|
||||
.selector=${dataField.selector}
|
||||
.key=${dataField.key}
|
||||
@value-changed=${this._serviceDataChanged}
|
||||
.value=${(this.value?.data &&
|
||||
this.value.data[dataField.key]) ||
|
||||
dataField.default}
|
||||
></ha-selector
|
||||
></ha-settings-row>`
|
||||
: ""
|
||||
)} `;
|
||||
}
|
||||
|
||||
private _serviceChanged(ev: PolymerChangedEvent<string>) {
|
||||
ev.stopPropagation();
|
||||
if (ev.detail.value === this.value?.service) {
|
||||
return;
|
||||
}
|
||||
fireEvent(this, "value-changed", {
|
||||
value: { service: ev.detail.value || "", data: {} },
|
||||
});
|
||||
}
|
||||
|
||||
private _entityPicked(ev: CustomEvent) {
|
||||
ev.stopPropagation();
|
||||
const newValue = ev.detail.value;
|
||||
if (this.value?.data?.entity_id === newValue) {
|
||||
return;
|
||||
}
|
||||
let value;
|
||||
if (!newValue && this.value?.data) {
|
||||
value = { ...this.value };
|
||||
delete value.data.entity_id;
|
||||
} else {
|
||||
value = {
|
||||
...this.value,
|
||||
data: { ...this.value?.data, entity_id: ev.detail.value },
|
||||
};
|
||||
}
|
||||
fireEvent(this, "value-changed", {
|
||||
value,
|
||||
});
|
||||
}
|
||||
|
||||
private _targetChanged(ev: CustomEvent) {
|
||||
ev.stopPropagation();
|
||||
const newValue = ev.detail.value;
|
||||
if (this.value?.target === newValue) {
|
||||
return;
|
||||
}
|
||||
let value;
|
||||
if (!newValue) {
|
||||
value = { ...this.value };
|
||||
delete value.target;
|
||||
} else {
|
||||
value = { ...this.value, target: ev.detail.value };
|
||||
}
|
||||
fireEvent(this, "value-changed", {
|
||||
value,
|
||||
});
|
||||
}
|
||||
|
||||
private _serviceDataChanged(ev: CustomEvent) {
|
||||
ev.stopPropagation();
|
||||
const key = (ev.currentTarget as any).key;
|
||||
const value = ev.detail.value;
|
||||
if (this.value?.data && this.value.data[key] === value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const data = { ...this.value?.data, [key]: value };
|
||||
|
||||
if (value === "" || value === undefined) {
|
||||
delete data[key];
|
||||
}
|
||||
|
||||
fireEvent(this, "value-changed", {
|
||||
value: {
|
||||
...this.value,
|
||||
data,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
private _dataChanged(ev: CustomEvent) {
|
||||
ev.stopPropagation();
|
||||
if (!ev.detail.isValid) {
|
||||
return;
|
||||
}
|
||||
fireEvent(this, "value-changed", {
|
||||
value: {
|
||||
...this.value,
|
||||
data: ev.detail.value,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
ha-settings-row {
|
||||
padding: 0;
|
||||
}
|
||||
ha-settings-row {
|
||||
--paper-time-input-justify-content: flex-end;
|
||||
}
|
||||
:host(:not([narrow])) ha-settings-row paper-input {
|
||||
width: 60%;
|
||||
}
|
||||
:host(:not([narrow])) ha-settings-row ha-selector {
|
||||
width: 60%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-service-control": HaServiceControl;
|
||||
}
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import LocalizeMixin from "../mixins/localize-mixin";
|
||||
import "./ha-combo-box";
|
||||
|
||||
/*
|
||||
* @appliesMixin LocalizeMixin
|
||||
*/
|
||||
class HaServicePicker extends LocalizeMixin(PolymerElement) {
|
||||
static get template() {
|
||||
return html`
|
||||
<ha-combo-box
|
||||
label="[[localize('ui.components.service-picker.service')]]"
|
||||
items="[[_services]]"
|
||||
value="{{value}}"
|
||||
allow-custom-value=""
|
||||
></ha-combo-box>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: {
|
||||
type: Object,
|
||||
observer: "_hassChanged",
|
||||
},
|
||||
_services: Array,
|
||||
value: {
|
||||
type: String,
|
||||
notify: true,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
_hassChanged(hass, oldHass) {
|
||||
if (!hass) {
|
||||
this._services = [];
|
||||
return;
|
||||
}
|
||||
if (oldHass && hass.services === oldHass.services) {
|
||||
return;
|
||||
}
|
||||
const result = [];
|
||||
|
||||
Object.keys(hass.services)
|
||||
.sort()
|
||||
.forEach((domain) => {
|
||||
const services = Object.keys(hass.services[domain]).sort();
|
||||
|
||||
for (let i = 0; i < services.length; i++) {
|
||||
result.push(`${domain}.${services[i]}`);
|
||||
}
|
||||
});
|
||||
|
||||
this._services = result;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-service-picker", HaServicePicker);
|
||||
121
src/components/ha-service-picker.ts
Normal file
121
src/components/ha-service-picker.ts
Normal file
@ -0,0 +1,121 @@
|
||||
import { html, internalProperty, LitElement, property } from "lit-element";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-combo-box";
|
||||
|
||||
const rowRenderer = (
|
||||
root: HTMLElement,
|
||||
_owner,
|
||||
model: { item: { service: string; description: string } }
|
||||
) => {
|
||||
if (!root.firstElementChild) {
|
||||
root.innerHTML = `
|
||||
<style>
|
||||
paper-item {
|
||||
margin: -10px 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<paper-item>
|
||||
<paper-item-body two-line="">
|
||||
<div class='name'>[[item.description]]</div>
|
||||
<div secondary>[[item.service]]</div>
|
||||
</paper-item-body>
|
||||
</paper-item>
|
||||
`;
|
||||
}
|
||||
|
||||
root.querySelector(".name")!.textContent = model.item.description;
|
||||
root.querySelector("[secondary]")!.textContent = model.item.service;
|
||||
};
|
||||
|
||||
class HaServicePicker extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property() public value?: string;
|
||||
|
||||
@internalProperty() private _filter?: string;
|
||||
|
||||
protected render() {
|
||||
return html`
|
||||
<ha-combo-box
|
||||
.hass=${this.hass}
|
||||
.label=${this.hass.localize("ui.components.service-picker.service")}
|
||||
.filteredItems=${this._filteredServices(
|
||||
this.hass.services,
|
||||
this._filter
|
||||
)}
|
||||
.value=${this.value}
|
||||
.renderer=${rowRenderer}
|
||||
item-value-path="service"
|
||||
item-label-path="description"
|
||||
allow-custom-value
|
||||
@filter-changed=${this._filterChanged}
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-combo-box>
|
||||
`;
|
||||
}
|
||||
|
||||
private _services = memoizeOne((services: HomeAssistant["services"]): {
|
||||
service: string;
|
||||
description: string;
|
||||
}[] => {
|
||||
if (!services) {
|
||||
return [];
|
||||
}
|
||||
const result: { service: string; description: string }[] = [];
|
||||
|
||||
Object.keys(services)
|
||||
.sort()
|
||||
.forEach((domain) => {
|
||||
const services_keys = Object.keys(services[domain]).sort();
|
||||
|
||||
for (const service of services_keys) {
|
||||
result.push({
|
||||
service: `${domain}.${service}`,
|
||||
description:
|
||||
services[domain][service].description || `${domain}.${service}`,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
});
|
||||
|
||||
private _filteredServices = memoizeOne(
|
||||
(services: HomeAssistant["services"], filter?: string) => {
|
||||
if (!services) {
|
||||
return [];
|
||||
}
|
||||
const processedServices = this._services(services);
|
||||
|
||||
if (!filter) {
|
||||
return processedServices;
|
||||
}
|
||||
return processedServices.filter(
|
||||
(service) =>
|
||||
service.service.toLowerCase().includes(filter) ||
|
||||
service.description.toLowerCase().includes(filter)
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
private _filterChanged(ev: CustomEvent): void {
|
||||
this._filter = ev.detail.value.toLowerCase();
|
||||
}
|
||||
|
||||
private _valueChanged(ev) {
|
||||
this.value = ev.detail.value;
|
||||
fireEvent(this, "change");
|
||||
fireEvent(this, "value-changed", { value: this.value });
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-service-picker", HaServicePicker);
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-service-picker": HaServicePicker;
|
||||
}
|
||||
}
|
||||
@ -45,6 +45,7 @@ export class HaSettingsRow extends LitElement {
|
||||
min-height: calc(
|
||||
var(--paper-item-body-two-line-min-height, 72px) - 16px
|
||||
);
|
||||
flex: 1;
|
||||
}
|
||||
:host([narrow]) {
|
||||
align-items: normal;
|
||||
|
||||
@ -10,7 +10,10 @@ import {
|
||||
mdiUnfoldMoreVertical,
|
||||
} from "@mdi/js";
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import {
|
||||
HassServiceTarget,
|
||||
UnsubscribeFunc,
|
||||
} from "home-assistant-js-websocket";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
@ -41,7 +44,6 @@ import {
|
||||
EntityRegistryEntry,
|
||||
subscribeEntityRegistry,
|
||||
} from "../data/entity_registry";
|
||||
import { Target } from "../data/target";
|
||||
import { SubscribeMixin } from "../mixins/subscribe-mixin";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./device/ha-device-picker";
|
||||
@ -56,7 +58,7 @@ import "./ha-svg-icon";
|
||||
export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
@property() public hass!: HomeAssistant;
|
||||
|
||||
@property() public value?: Target;
|
||||
@property() public value?: HassServiceTarget;
|
||||
|
||||
@property() public label?: string;
|
||||
|
||||
@ -530,6 +532,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
.items {
|
||||
z-index: 2;
|
||||
}
|
||||
.mdc-chip-set {
|
||||
padding: 4px 0;
|
||||
}
|
||||
.mdc-chip.add {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import {
|
||||
HassEntityAttributeBase,
|
||||
HassEntityBase,
|
||||
HassServiceTarget,
|
||||
} from "home-assistant-js-websocket";
|
||||
import { computeObjectId } from "../common/entity/compute_object_id";
|
||||
import { navigate } from "../common/navigate";
|
||||
@ -36,6 +37,7 @@ export interface EventAction {
|
||||
export interface ServiceAction {
|
||||
service: string;
|
||||
entity_id?: string;
|
||||
target?: HassServiceTarget;
|
||||
data?: Record<string, any>;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
export interface Target {
|
||||
entity_id?: string[];
|
||||
device_id?: string[];
|
||||
area_id?: string[];
|
||||
}
|
||||
@ -15,7 +15,8 @@ export const demoConfig: HassConfig = {
|
||||
time_zone: "America/Los_Angeles",
|
||||
config_dir: "/config",
|
||||
version: "DEMO",
|
||||
whitelist_external_dirs: [],
|
||||
allowlist_external_dirs: [],
|
||||
allowlist_external_urls: [],
|
||||
config_source: "storage",
|
||||
safe_mode: false,
|
||||
state: STATE_RUNNING,
|
||||
|
||||
@ -42,7 +42,6 @@ import "./types/ha-automation-action-wait_template";
|
||||
const OPTIONS = [
|
||||
"condition",
|
||||
"delay",
|
||||
"device_id",
|
||||
"event",
|
||||
"scene",
|
||||
"service",
|
||||
@ -50,6 +49,7 @@ const OPTIONS = [
|
||||
"wait_for_trigger",
|
||||
"repeat",
|
||||
"choose",
|
||||
"device_id",
|
||||
];
|
||||
|
||||
const getType = (action: Action) => {
|
||||
@ -99,6 +99,8 @@ export default class HaAutomationActionRow extends LitElement {
|
||||
|
||||
@property() public totalActions!: number;
|
||||
|
||||
@property({ type: Boolean }) public narrow = false;
|
||||
|
||||
@internalProperty() private _warnings?: string[];
|
||||
|
||||
@internalProperty() private _uiModeAvailable = true;
|
||||
@ -116,8 +118,9 @@ export default class HaAutomationActionRow extends LitElement {
|
||||
this._yamlMode = true;
|
||||
}
|
||||
|
||||
if (this._yamlMode && this._yamlEditor) {
|
||||
this._yamlEditor.setValue(this.action);
|
||||
const yamlEditor = this._yamlEditor;
|
||||
if (this._yamlMode && yamlEditor && yamlEditor.value !== this.action) {
|
||||
yamlEditor.setValue(this.action);
|
||||
}
|
||||
}
|
||||
|
||||
@ -242,6 +245,7 @@ export default class HaAutomationActionRow extends LitElement {
|
||||
${dynamicElement(`ha-automation-action-${type}`, {
|
||||
hass: this.hass,
|
||||
action: this.action,
|
||||
narrow: this.narrow,
|
||||
})}
|
||||
</div>
|
||||
`}
|
||||
|
||||
@ -18,6 +18,8 @@ import { HaDeviceAction } from "./types/ha-automation-action-device_id";
|
||||
export default class HaAutomationAction extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ type: Boolean }) public narrow = false;
|
||||
|
||||
@property() public actions!: Action[];
|
||||
|
||||
protected render() {
|
||||
@ -28,6 +30,7 @@ export default class HaAutomationAction extends LitElement {
|
||||
.index=${idx}
|
||||
.totalActions=${this.actions.length}
|
||||
.action=${action}
|
||||
.narrow=${this.narrow}
|
||||
@duplicate=${this._duplicateAction}
|
||||
@move-action=${this._move}
|
||||
@value-changed=${this._actionChanged}
|
||||
|
||||
@ -1,30 +1,24 @@
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import {
|
||||
customElement,
|
||||
internalProperty,
|
||||
LitElement,
|
||||
property,
|
||||
PropertyValues,
|
||||
query,
|
||||
} from "lit-element";
|
||||
import { html } from "lit-html";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { any, assert, object, optional, string } from "superstruct";
|
||||
import { fireEvent } from "../../../../../common/dom/fire_event";
|
||||
import { computeDomain } from "../../../../../common/entity/compute_domain";
|
||||
import { computeObjectId } from "../../../../../common/entity/compute_object_id";
|
||||
import "../../../../../components/entity/ha-entity-picker";
|
||||
import "../../../../../components/ha-service-picker";
|
||||
import "../../../../../components/ha-yaml-editor";
|
||||
import type { HaYamlEditor } from "../../../../../components/ha-yaml-editor";
|
||||
import { ServiceAction } from "../../../../../data/script";
|
||||
import type { PolymerChangedEvent } from "../../../../../polymer-types";
|
||||
import type { HomeAssistant } from "../../../../../types";
|
||||
import { EntityIdOrAll } from "../../../../../common/structs/is-entity-id";
|
||||
import { ActionElement, handleChangeEvent } from "../ha-automation-action-row";
|
||||
import { ActionElement } from "../ha-automation-action-row";
|
||||
import "../../../../../components/ha-service-control";
|
||||
|
||||
const actionStruct = object({
|
||||
service: optional(string()),
|
||||
entity_id: optional(EntityIdOrAll),
|
||||
target: optional(any()),
|
||||
data: optional(any()),
|
||||
});
|
||||
|
||||
@ -34,36 +28,14 @@ export class HaServiceAction extends LitElement implements ActionElement {
|
||||
|
||||
@property({ attribute: false }) public action!: ServiceAction;
|
||||
|
||||
@query("ha-yaml-editor", true) private _yamlEditor?: HaYamlEditor;
|
||||
@property({ type: Boolean }) public narrow = false;
|
||||
|
||||
private _actionData?: ServiceAction["data"];
|
||||
@internalProperty() private _action!: ServiceAction;
|
||||
|
||||
public static get defaultConfig() {
|
||||
return { service: "", data: {} };
|
||||
}
|
||||
|
||||
private _domain = memoizeOne((service: string) => [computeDomain(service)]);
|
||||
|
||||
private _getServiceData = memoizeOne((service: string) => {
|
||||
if (!service) {
|
||||
return [];
|
||||
}
|
||||
const domain = computeDomain(service);
|
||||
const serviceName = computeObjectId(service);
|
||||
const serviceDomains = this.hass.services;
|
||||
if (!(domain in serviceDomains)) {
|
||||
return [];
|
||||
}
|
||||
if (!(serviceName in serviceDomains[domain])) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const fields = serviceDomains[domain][serviceName].fields;
|
||||
return Object.keys(fields).map((field) => {
|
||||
return { key: field, ...fields[field] };
|
||||
});
|
||||
});
|
||||
|
||||
protected updated(changedProperties: PropertyValues) {
|
||||
if (!changedProperties.has("action")) {
|
||||
return;
|
||||
@ -73,73 +45,32 @@ export class HaServiceAction extends LitElement implements ActionElement {
|
||||
} catch (error) {
|
||||
fireEvent(this, "ui-mode-not-available", error);
|
||||
}
|
||||
if (this._actionData && this._actionData !== this.action.data) {
|
||||
if (this._yamlEditor) {
|
||||
this._yamlEditor.setValue(this.action.data);
|
||||
}
|
||||
if (this.action.entity_id) {
|
||||
this._action = {
|
||||
...this.action,
|
||||
data: { ...this.action.data, entity_id: this.action.entity_id },
|
||||
};
|
||||
delete this._action.entity_id;
|
||||
} else {
|
||||
this._action = this.action;
|
||||
}
|
||||
this._actionData = this.action.data;
|
||||
}
|
||||
|
||||
protected render() {
|
||||
const { service, data, entity_id } = this.action;
|
||||
|
||||
const serviceData = this._getServiceData(service);
|
||||
const entity = serviceData.find((attr) => attr.key === "entity_id");
|
||||
|
||||
return html`
|
||||
<ha-service-picker
|
||||
<ha-service-control
|
||||
.narrow=${this.narrow}
|
||||
.hass=${this.hass}
|
||||
.value=${service}
|
||||
@value-changed=${this._serviceChanged}
|
||||
></ha-service-picker>
|
||||
${entity
|
||||
? html`
|
||||
<ha-entity-picker
|
||||
.hass=${this.hass}
|
||||
.value=${entity_id}
|
||||
.label=${entity.description}
|
||||
@value-changed=${this._entityPicked}
|
||||
.includeDomains=${this._domain(service)}
|
||||
allow-custom-entity
|
||||
></ha-entity-picker>
|
||||
`
|
||||
: ""}
|
||||
<ha-yaml-editor
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.type.service.service_data"
|
||||
)}
|
||||
.name=${"data"}
|
||||
.defaultValue=${data}
|
||||
@value-changed=${this._dataChanged}
|
||||
></ha-yaml-editor>
|
||||
.value=${this._action}
|
||||
@value-changed=${this._actionChanged}
|
||||
></ha-service-control>
|
||||
`;
|
||||
}
|
||||
|
||||
private _dataChanged(ev: CustomEvent): void {
|
||||
ev.stopPropagation();
|
||||
if (!ev.detail.isValid) {
|
||||
return;
|
||||
private _actionChanged(ev) {
|
||||
if (ev.detail.value === this._action) {
|
||||
ev.stopPropagation();
|
||||
}
|
||||
this._actionData = ev.detail.value;
|
||||
handleChangeEvent(this, ev);
|
||||
}
|
||||
|
||||
private _serviceChanged(ev: PolymerChangedEvent<string>) {
|
||||
ev.stopPropagation();
|
||||
if (ev.detail.value === this.action.service) {
|
||||
return;
|
||||
}
|
||||
fireEvent(this, "value-changed", {
|
||||
value: { ...this.action, service: ev.detail.value },
|
||||
});
|
||||
}
|
||||
|
||||
private _entityPicked(ev: PolymerChangedEvent<string>) {
|
||||
ev.stopPropagation();
|
||||
fireEvent(this, "value-changed", {
|
||||
value: { ...this.action, entity_id: ev.detail.value },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -252,10 +252,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
|
||||
if (!name) {
|
||||
return;
|
||||
}
|
||||
let newVal = ev.detail.value;
|
||||
if (target.type === "number") {
|
||||
newVal = Number(newVal);
|
||||
}
|
||||
const newVal = ev.detail.value;
|
||||
if ((this.config![name] || "") === newVal) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@ export class HaManualAutomationEditor extends LitElement {
|
||||
@property() public stateObj?: HassEntity;
|
||||
|
||||
protected render() {
|
||||
return html`<ha-config-section .isWide=${this.isWide}>
|
||||
return html`<ha-config-section vertical .isWide=${this.isWide}>
|
||||
${!this.narrow
|
||||
? html` <span slot="header">${this.config.alias}</span> `
|
||||
: ""}
|
||||
@ -151,7 +151,7 @@ export class HaManualAutomationEditor extends LitElement {
|
||||
</ha-card>
|
||||
</ha-config-section>
|
||||
|
||||
<ha-config-section .isWide=${this.isWide}>
|
||||
<ha-config-section vertical .isWide=${this.isWide}>
|
||||
<span slot="header">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.triggers.header"
|
||||
@ -180,7 +180,7 @@ export class HaManualAutomationEditor extends LitElement {
|
||||
></ha-automation-trigger>
|
||||
</ha-config-section>
|
||||
|
||||
<ha-config-section .isWide=${this.isWide}>
|
||||
<ha-config-section vertical .isWide=${this.isWide}>
|
||||
<span slot="header">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.conditions.header"
|
||||
@ -209,7 +209,7 @@ export class HaManualAutomationEditor extends LitElement {
|
||||
></ha-automation-condition>
|
||||
</ha-config-section>
|
||||
|
||||
<ha-config-section .isWide=${this.isWide}>
|
||||
<ha-config-section vertical .isWide=${this.isWide}>
|
||||
<span slot="header">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.header"
|
||||
@ -235,6 +235,7 @@ export class HaManualAutomationEditor extends LitElement {
|
||||
.actions=${this.config.action}
|
||||
@value-changed=${this._actionChanged}
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-automation-action>
|
||||
</ha-config-section>`;
|
||||
}
|
||||
|
||||
@ -80,13 +80,16 @@ export class HaConfigSection extends LitElement {
|
||||
font-weight: var(--paper-font-subhead_-_font-weight);
|
||||
line-height: var(--paper-font-subhead_-_line-height);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-right: 40px;
|
||||
opacity: var(--dark-primary-opacity);
|
||||
font-size: 14px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.horizontal .intro {
|
||||
max-width: 400px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-top: -24px;
|
||||
}
|
||||
|
||||
@ -221,7 +221,7 @@ export class HaSceneEditor extends SubscribeMixin(
|
||||
>
|
||||
${this._config
|
||||
? html`
|
||||
<ha-config-section .isWide=${this.isWide}>
|
||||
<ha-config-section vertical .isWide=${this.isWide}>
|
||||
${!this.narrow
|
||||
? html` <span slot="header">${name}</span> `
|
||||
: ""}
|
||||
@ -253,7 +253,7 @@ export class HaSceneEditor extends SubscribeMixin(
|
||||
</ha-card>
|
||||
</ha-config-section>
|
||||
|
||||
<ha-config-section .isWide=${this.isWide}>
|
||||
<ha-config-section vertical .isWide=${this.isWide}>
|
||||
<div slot="header">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.scene.editor.devices.header"
|
||||
@ -324,7 +324,7 @@ export class HaSceneEditor extends SubscribeMixin(
|
||||
|
||||
${this.showAdvanced
|
||||
? html`
|
||||
<ha-config-section .isWide=${this.isWide}>
|
||||
<ha-config-section vertical .isWide=${this.isWide}>
|
||||
<div slot="header">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.scene.editor.entities.header"
|
||||
|
||||
@ -189,7 +189,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
>
|
||||
${this._config
|
||||
? html`
|
||||
<ha-config-section .isWide=${this.isWide}>
|
||||
<ha-config-section vertical .isWide=${this.isWide}>
|
||||
${!this.narrow
|
||||
? html`
|
||||
<span slot="header">${this._config.alias}</span>
|
||||
@ -313,7 +313,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
</ha-card>
|
||||
</ha-config-section>
|
||||
|
||||
<ha-config-section .isWide=${this.isWide}>
|
||||
<ha-config-section vertical .isWide=${this.isWide}>
|
||||
<span slot="header">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.script.editor.sequence"
|
||||
@ -350,7 +350,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
`
|
||||
: this._mode === "yaml"
|
||||
? html`
|
||||
<ha-config-section .isWide=${false}>
|
||||
<ha-config-section vertical .isWide=${false}>
|
||||
${!this.narrow
|
||||
? html`<span slot="header">${this._config?.alias}</span>`
|
||||
: ``}
|
||||
|
||||
@ -51,17 +51,24 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
|
||||
enableShortcuts: true,
|
||||
moreInfoEntityId: null,
|
||||
hassUrl: (path = "") => new URL(path, auth.data.hassUrl).toString(),
|
||||
callService: async (domain, service, serviceData = {}) => {
|
||||
callService: async (domain, service, serviceData = {}, target) => {
|
||||
if (__DEV__) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log("Calling service", domain, service, serviceData);
|
||||
console.log(
|
||||
"Calling service",
|
||||
domain,
|
||||
service,
|
||||
serviceData,
|
||||
target
|
||||
);
|
||||
}
|
||||
try {
|
||||
return (await callService(
|
||||
conn,
|
||||
domain,
|
||||
service,
|
||||
serviceData
|
||||
serviceData,
|
||||
target
|
||||
)) as Promise<ServiceCallResponse>;
|
||||
} catch (err) {
|
||||
if (__DEV__) {
|
||||
@ -71,6 +78,7 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
|
||||
domain,
|
||||
service,
|
||||
serviceData,
|
||||
target,
|
||||
err
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ import {
|
||||
Connection,
|
||||
HassConfig,
|
||||
HassEntities,
|
||||
HassServiceTarget,
|
||||
HassServices,
|
||||
MessageBase,
|
||||
} from "home-assistant-js-websocket";
|
||||
@ -178,6 +179,7 @@ export interface ServiceCallRequest {
|
||||
domain: string;
|
||||
service: string;
|
||||
serviceData?: Record<string, any>;
|
||||
target?: HassServiceTarget;
|
||||
}
|
||||
|
||||
export interface HomeAssistant {
|
||||
@ -216,7 +218,8 @@ export interface HomeAssistant {
|
||||
callService(
|
||||
domain: ServiceCallRequest["domain"],
|
||||
service: ServiceCallRequest["service"],
|
||||
serviceData?: ServiceCallRequest["serviceData"]
|
||||
serviceData?: ServiceCallRequest["serviceData"],
|
||||
target?: ServiceCallRequest["target"]
|
||||
): Promise<ServiceCallResponse>;
|
||||
callApi<T>(
|
||||
method: "GET" | "POST" | "PUT" | "DELETE",
|
||||
|
||||
@ -8174,10 +8174,10 @@ hmac-drbg@^1.0.0:
|
||||
minimalistic-assert "^1.0.0"
|
||||
minimalistic-crypto-utils "^1.0.1"
|
||||
|
||||
home-assistant-js-websocket@^5.4.1:
|
||||
version "5.4.1"
|
||||
resolved "https://registry.yarnpkg.com/home-assistant-js-websocket/-/home-assistant-js-websocket-5.4.1.tgz#3f677391b38e4feb24f1670e3a9b695767332a51"
|
||||
integrity sha512-FTVoO5yMSa2dy1ffZDvJy/r79VTjwFOzyP/bPld5lDHKbNyXC8wgqpn8Kdf5ZQISYJf1T1dfH+v2NYEngn5NgQ==
|
||||
home-assistant-js-websocket@^5.8.1:
|
||||
version "5.8.1"
|
||||
resolved "https://registry.yarnpkg.com/home-assistant-js-websocket/-/home-assistant-js-websocket-5.8.1.tgz#4c5930aa47e7089f5806bb3d190ebe53697d2edc"
|
||||
integrity sha512-2H3q8NK3WrT50iYODv95iz0E2E+nAUOD452V6lhBxhUTQlVFBsuxNMRTTbIZp+6Xab7ad84uF0z+hHFmBMq/Sw==
|
||||
|
||||
homedir-polyfill@^1.0.1:
|
||||
version "1.0.3"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user