mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Ha selector UI action (#14082)
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Paul Bottein
GitHub
parent
19887fbd54
commit
0a3fa3e218
43
src/components/ha-selector/ha-selector-ui-action.ts
Normal file
43
src/components/ha-selector/ha-selector-ui-action.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import { html, LitElement } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import { UiActionSelector } from "../../data/selector";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import "../../panels/lovelace/components/hui-action-editor";
|
||||
import { ActionConfig } from "../../data/lovelace";
|
||||
|
||||
@customElement("ha-selector-ui-action")
|
||||
export class HaSelectorUiAction extends LitElement {
|
||||
@property() public hass!: HomeAssistant;
|
||||
|
||||
@property() public selector!: UiActionSelector;
|
||||
|
||||
@property() public value?: ActionConfig;
|
||||
|
||||
@property() public label?: string;
|
||||
|
||||
@property() public helper?: string;
|
||||
|
||||
protected render() {
|
||||
return html`
|
||||
<hui-action-editor
|
||||
.label=${this.label}
|
||||
.hass=${this.hass}
|
||||
.config=${this.value}
|
||||
.actions=${this.selector["ui-action"].actions}
|
||||
.tooltipText=${this.helper}
|
||||
@value-changed=${this._valueChanged}
|
||||
></hui-action-editor>
|
||||
`;
|
||||
}
|
||||
|
||||
private _valueChanged(ev: CustomEvent) {
|
||||
fireEvent(this, "value-changed", { value: ev.detail.value });
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-selector-ui-action": HaSelectorUiAction;
|
||||
}
|
||||
}
|
||||
@ -32,6 +32,7 @@ const LOAD_ELEMENTS = {
|
||||
theme: () => import("./ha-selector-theme"),
|
||||
location: () => import("./ha-selector-location"),
|
||||
"color-temp": () => import("./ha-selector-color-temp"),
|
||||
"ui-action": () => import("./ha-selector-ui-action"),
|
||||
};
|
||||
|
||||
@customElement("ha-selector")
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import type { HassEntity } from "home-assistant-js-websocket";
|
||||
import { computeStateDomain } from "../common/entity/compute_state_domain";
|
||||
import { UiAction } from "../panels/lovelace/components/hui-action-editor";
|
||||
import type { DeviceRegistryEntry } from "./device_registry";
|
||||
import type { EntitySources } from "./entity_sources";
|
||||
|
||||
@ -30,7 +31,8 @@ export type Selector =
|
||||
| TargetSelector
|
||||
| TemplateSelector
|
||||
| ThemeSelector
|
||||
| TimeSelector;
|
||||
| TimeSelector
|
||||
| UiActionSelector;
|
||||
|
||||
export interface ActionSelector {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
@ -257,6 +259,12 @@ export interface TimeSelector {
|
||||
time: {};
|
||||
}
|
||||
|
||||
export interface UiActionSelector {
|
||||
"ui-action": {
|
||||
actions?: UiAction[];
|
||||
};
|
||||
}
|
||||
|
||||
export const filterSelectorDevices = (
|
||||
filterDevice: SelectorDevice,
|
||||
device: DeviceRegistryEntry,
|
||||
|
||||
@ -16,13 +16,24 @@ import { HomeAssistant } from "../../../types";
|
||||
import { EditorTarget } from "../editor/types";
|
||||
import "../../../components/ha-navigation-picker";
|
||||
|
||||
export type UiAction = Exclude<ActionConfig["action"], "fire-dom-event">;
|
||||
|
||||
const DEFAULT_ACTIONS: UiAction[] = [
|
||||
"more-info",
|
||||
"toggle",
|
||||
"navigate",
|
||||
"url",
|
||||
"call-service",
|
||||
"none",
|
||||
];
|
||||
|
||||
@customElement("hui-action-editor")
|
||||
export class HuiActionEditor extends LitElement {
|
||||
@property() public config?: ActionConfig;
|
||||
|
||||
@property() public label?: string;
|
||||
|
||||
@property() public actions?: string[];
|
||||
@property() public actions?: UiAction[];
|
||||
|
||||
@property() public tooltipText?: string;
|
||||
|
||||
@ -52,10 +63,12 @@ export class HuiActionEditor extends LitElement {
|
||||
);
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this.hass || !this.actions) {
|
||||
if (!this.hass) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
const actions = this.actions ?? DEFAULT_ACTIONS;
|
||||
|
||||
return html`
|
||||
<div class="dropdown">
|
||||
<ha-select
|
||||
@ -72,7 +85,7 @@ export class HuiActionEditor extends LitElement {
|
||||
"ui.panel.lovelace.editor.action-editor.actions.default_action"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
${this.actions.map(
|
||||
${actions.map(
|
||||
(action) => html`
|
||||
<mwc-list-item .value=${action}>
|
||||
${this.hass!.localize(
|
||||
@ -221,7 +234,13 @@ export class HuiActionEditor extends LitElement {
|
||||
ha-textfield {
|
||||
width: 100%;
|
||||
}
|
||||
ha-textfield {
|
||||
ha-service-control,
|
||||
ha-navigation-picker {
|
||||
display: block;
|
||||
}
|
||||
ha-textfield,
|
||||
ha-service-control,
|
||||
ha-navigation-picker {
|
||||
margin-top: 8px;
|
||||
}
|
||||
ha-service-control {
|
||||
|
||||
@ -8,14 +8,11 @@ import { computeDomain } from "../../../../common/entity/compute_domain";
|
||||
import { domainIcon } from "../../../../common/entity/domain_icon";
|
||||
import "../../../../components/ha-form/ha-form";
|
||||
import type { SchemaUnion } from "../../../../components/ha-form/types";
|
||||
import { ActionConfig } from "../../../../data/lovelace";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import type { ButtonCardConfig } from "../../cards/types";
|
||||
import "../../components/hui-action-editor";
|
||||
import type { LovelaceCardEditor } from "../../types";
|
||||
import { actionConfigStruct } from "../structs/action-struct";
|
||||
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
|
||||
import type { EditorTarget } from "../types";
|
||||
import { configElementStyle } from "./config-elements-style";
|
||||
|
||||
const cardConfigStruct = assign(
|
||||
@ -34,15 +31,6 @@ const cardConfigStruct = assign(
|
||||
})
|
||||
);
|
||||
|
||||
const actions = [
|
||||
"more-info",
|
||||
"toggle",
|
||||
"navigate",
|
||||
"url",
|
||||
"call-service",
|
||||
"none",
|
||||
];
|
||||
|
||||
@customElement("hui-button-card-editor")
|
||||
export class HuiButtonCardEditor
|
||||
extends LitElement
|
||||
@ -101,17 +89,17 @@ export class HuiButtonCardEditor
|
||||
{ name: "theme", selector: { theme: {} } },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "tap_action",
|
||||
selector: { "ui-action": {} },
|
||||
},
|
||||
{
|
||||
name: "hold_action",
|
||||
selector: { "ui-action": {} },
|
||||
},
|
||||
] as const
|
||||
);
|
||||
|
||||
get _tap_action(): ActionConfig | undefined {
|
||||
return this._config!.tap_action;
|
||||
}
|
||||
|
||||
get _hold_action(): ActionConfig {
|
||||
return this._config!.hold_action || { action: "more-info" };
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this.hass || !this._config) {
|
||||
return html``;
|
||||
@ -143,40 +131,9 @@ export class HuiButtonCardEditor
|
||||
.data=${data}
|
||||
.schema=${schema}
|
||||
.computeLabel=${this._computeLabelCallback}
|
||||
.computeHelper=${this._computeHelperCallback}
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-form>
|
||||
<div class="card-config">
|
||||
<hui-action-editor
|
||||
.label="${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.tap_action"
|
||||
)} (${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.config.optional"
|
||||
)})"
|
||||
.hass=${this.hass}
|
||||
.config=${this._tap_action}
|
||||
.actions=${actions}
|
||||
.configValue=${"tap_action"}
|
||||
.tooltipText=${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.button.default_action_help"
|
||||
)}
|
||||
@value-changed=${this._actionChanged}
|
||||
></hui-action-editor>
|
||||
<hui-action-editor
|
||||
.label="${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.hold_action"
|
||||
)} (${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.config.optional"
|
||||
)})"
|
||||
.hass=${this.hass}
|
||||
.config=${this._hold_action}
|
||||
.actions=${actions}
|
||||
.configValue=${"hold_action"}
|
||||
.tooltipText=${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.button.default_action_help"
|
||||
)}
|
||||
@value-changed=${this._actionChanged}
|
||||
></hui-action-editor>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -190,56 +147,40 @@ export class HuiButtonCardEditor
|
||||
fireEvent(this, "config-changed", { config });
|
||||
}
|
||||
|
||||
private _computeHelperCallback = (
|
||||
schema: SchemaUnion<ReturnType<typeof this._schema>>
|
||||
) => {
|
||||
switch (schema.name) {
|
||||
case "tap_action":
|
||||
case "hold_action":
|
||||
return this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.button.default_action_help"
|
||||
);
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
private _computeLabelCallback = (
|
||||
schema: SchemaUnion<ReturnType<typeof this._schema>>
|
||||
) => {
|
||||
if (schema.name === "entity") {
|
||||
return `${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.entity"
|
||||
)}`;
|
||||
switch (schema.name) {
|
||||
case "theme":
|
||||
case "tap_action":
|
||||
case "hold_action":
|
||||
return `${this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.card.generic.${schema.name}`
|
||||
)} (${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.config.optional"
|
||||
)})`;
|
||||
default:
|
||||
return this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.card.generic.${schema.name}`
|
||||
);
|
||||
}
|
||||
|
||||
if (schema.name === "theme") {
|
||||
return `${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.theme"
|
||||
)} (${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.config.optional"
|
||||
)})`;
|
||||
}
|
||||
|
||||
return this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.card.generic.${schema.name}`
|
||||
);
|
||||
};
|
||||
|
||||
private _actionChanged(ev: CustomEvent): void {
|
||||
if (!this._config || !this.hass) {
|
||||
return;
|
||||
}
|
||||
const target = ev.target! as EditorTarget;
|
||||
const value = ev.detail.value;
|
||||
|
||||
if (this[`_${target.configValue}`] === value) {
|
||||
return;
|
||||
}
|
||||
let newConfig;
|
||||
if (target.configValue) {
|
||||
if (value !== false && !value) {
|
||||
newConfig = { ...this._config };
|
||||
delete newConfig[target.configValue!];
|
||||
} else {
|
||||
newConfig = {
|
||||
...this._config,
|
||||
[target.configValue!]: value,
|
||||
};
|
||||
}
|
||||
}
|
||||
fireEvent(this, "config-changed", { config: newConfig });
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return configElementStyle;
|
||||
}
|
||||
static styles: CSSResultGroup = configElementStyle;
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
||||
@ -1,21 +1,19 @@
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { assert, object, optional, string, assign } from "superstruct";
|
||||
import type { HassEntity } from "home-assistant-js-websocket";
|
||||
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { assert, assign, object, optional, string } from "superstruct";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import type { ActionConfig } from "../../../../data/lovelace";
|
||||
import { computeDomain } from "../../../../common/entity/compute_domain";
|
||||
import { domainIcon } from "../../../../common/entity/domain_icon";
|
||||
import "../../../../components/ha-form/ha-form";
|
||||
import type { SchemaUnion } from "../../../../components/ha-form/types";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import type { LightCardConfig } from "../../cards/types";
|
||||
import "../../components/hui-action-editor";
|
||||
import type { LovelaceCardEditor } from "../../types";
|
||||
import { actionConfigStruct } from "../structs/action-struct";
|
||||
import type { EditorTarget } from "../types";
|
||||
import { configElementStyle } from "./config-elements-style";
|
||||
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
|
||||
import { domainIcon } from "../../../../common/entity/domain_icon";
|
||||
import { computeDomain } from "../../../../common/entity/compute_domain";
|
||||
import type { SchemaUnion } from "../../../../components/ha-form/types";
|
||||
import { configElementStyle } from "./config-elements-style";
|
||||
|
||||
const cardConfigStruct = assign(
|
||||
baseLovelaceCardConfig,
|
||||
@ -71,31 +69,22 @@ export class HuiLightCardEditor
|
||||
],
|
||||
},
|
||||
{ name: "theme", selector: { theme: {} } },
|
||||
{
|
||||
name: "hold_action",
|
||||
selector: { "ui-action": {} },
|
||||
},
|
||||
{
|
||||
name: "double_tap_action",
|
||||
selector: { "ui-action": {} },
|
||||
},
|
||||
] as const
|
||||
);
|
||||
|
||||
get _hold_action(): ActionConfig {
|
||||
return this._config!.hold_action || { action: "more-info" };
|
||||
}
|
||||
|
||||
get _double_tap_action(): ActionConfig | undefined {
|
||||
return this._config!.double_tap_action;
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this.hass || !this._config) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
const actions = [
|
||||
"more-info",
|
||||
"toggle",
|
||||
"navigate",
|
||||
"url",
|
||||
"call-service",
|
||||
"none",
|
||||
];
|
||||
|
||||
const entityState = this.hass.states[this._config.entity];
|
||||
const schema = this._schema(
|
||||
this._config.entity,
|
||||
@ -111,60 +100,9 @@ export class HuiLightCardEditor
|
||||
.computeLabel=${this._computeLabelCallback}
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-form>
|
||||
<div class="card-config">
|
||||
<hui-action-editor
|
||||
.label="${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.hold_action"
|
||||
)} (${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.config.optional"
|
||||
)})"
|
||||
.hass=${this.hass}
|
||||
.config=${this._hold_action}
|
||||
.actions=${actions}
|
||||
.configValue=${"hold_action"}
|
||||
@value-changed=${this._actionChanged}
|
||||
></hui-action-editor>
|
||||
|
||||
<hui-action-editor
|
||||
.label="${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.double_tap_action"
|
||||
)} (${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.config.optional"
|
||||
)})"
|
||||
.hass=${this.hass}
|
||||
.config=${this._double_tap_action}
|
||||
.actions=${actions}
|
||||
.configValue=${"double_tap_action"}
|
||||
@value-changed=${this._actionChanged}
|
||||
></hui-action-editor>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private _actionChanged(ev: CustomEvent): void {
|
||||
if (!this._config || !this.hass) {
|
||||
return;
|
||||
}
|
||||
const target = ev.target! as EditorTarget;
|
||||
const value = ev.detail.value;
|
||||
|
||||
if (this[`_${target.configValue}`] === value) {
|
||||
return;
|
||||
}
|
||||
if (target.configValue) {
|
||||
if (value !== false && !value) {
|
||||
this._config = { ...this._config };
|
||||
delete this._config[target.configValue!];
|
||||
} else {
|
||||
this._config = {
|
||||
...this._config,
|
||||
[target.configValue!]: value,
|
||||
};
|
||||
}
|
||||
}
|
||||
fireEvent(this, "config-changed", { config: this._config });
|
||||
}
|
||||
|
||||
private _valueChanged(ev: CustomEvent): void {
|
||||
fireEvent(this, "config-changed", { config: ev.detail.value });
|
||||
}
|
||||
@ -172,36 +110,23 @@ export class HuiLightCardEditor
|
||||
private _computeLabelCallback = (
|
||||
schema: SchemaUnion<ReturnType<typeof this._schema>>
|
||||
) => {
|
||||
if (schema.name === "entity") {
|
||||
return this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.entity"
|
||||
);
|
||||
switch (schema.name) {
|
||||
case "theme":
|
||||
case "hold_action":
|
||||
case "double_tap_action":
|
||||
return `${this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.card.generic.${schema.name}`
|
||||
)} (${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.config.optional"
|
||||
)})`;
|
||||
default:
|
||||
return this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.card.generic.${schema.name}`
|
||||
);
|
||||
}
|
||||
|
||||
if (schema.name === "theme") {
|
||||
return `${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.theme"
|
||||
)} (${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.config.optional"
|
||||
)})`;
|
||||
}
|
||||
|
||||
return this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.card.generic.${schema.name}`
|
||||
);
|
||||
};
|
||||
|
||||
static styles: CSSResultGroup = [
|
||||
configElementStyle,
|
||||
css`
|
||||
ha-form,
|
||||
hui-action-editor {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
overflow: auto;
|
||||
}
|
||||
`,
|
||||
];
|
||||
static styles: CSSResultGroup = configElementStyle;
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
||||
@ -3,15 +3,13 @@ import { customElement, property, state } from "lit/decorators";
|
||||
import { assert, assign, boolean, object, optional, string } from "superstruct";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import type { SchemaUnion } from "../../../../components/ha-form/types";
|
||||
import type { ActionConfig } from "../../../../data/lovelace";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import type { PictureEntityCardConfig } from "../../cards/types";
|
||||
import "../../components/hui-action-editor";
|
||||
import type { LovelaceCardEditor } from "../../types";
|
||||
import { actionConfigStruct } from "../structs/action-struct";
|
||||
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
|
||||
import type { EditorTarget } from "../types";
|
||||
import { configElementStyle } from "./config-elements-style";
|
||||
import "../../../../components/ha-form/ha-form";
|
||||
|
||||
const cardConfigStruct = assign(
|
||||
baseLovelaceCardConfig,
|
||||
@ -61,6 +59,14 @@ const SCHEMA = [
|
||||
],
|
||||
},
|
||||
{ name: "theme", selector: { theme: {} } },
|
||||
{
|
||||
name: "tap_action",
|
||||
selector: { "ui-action": {} },
|
||||
},
|
||||
{
|
||||
name: "hold_action",
|
||||
selector: { "ui-action": {} },
|
||||
},
|
||||
] as const;
|
||||
|
||||
@customElement("hui-picture-entity-card-editor")
|
||||
@ -77,21 +83,11 @@ export class HuiPictureEntityCardEditor
|
||||
this._config = config;
|
||||
}
|
||||
|
||||
get _tap_action(): ActionConfig {
|
||||
return this._config!.tap_action || { action: "more-info" };
|
||||
}
|
||||
|
||||
get _hold_action(): ActionConfig | undefined {
|
||||
return this._config!.hold_action;
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this.hass || !this._config) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
const actions = ["more-info", "toggle", "navigate", "call-service", "none"];
|
||||
|
||||
const data = {
|
||||
show_state: true,
|
||||
show_name: true,
|
||||
@ -107,31 +103,6 @@ export class HuiPictureEntityCardEditor
|
||||
.computeLabel=${this._computeLabelCallback}
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-form>
|
||||
<div class="card-config">
|
||||
<hui-action-editor
|
||||
.label="${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.tap_action"
|
||||
)} (${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.config.optional"
|
||||
)})"
|
||||
.hass=${this.hass}
|
||||
.config=${this._tap_action}
|
||||
.actions=${actions}
|
||||
.configValue=${"tap_action"}
|
||||
@value-changed=${this._changed}
|
||||
></hui-action-editor>
|
||||
<hui-action-editor
|
||||
.label="${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.hold_action"
|
||||
)} (${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.config.optional"
|
||||
)})"
|
||||
.hass=${this.hass}
|
||||
.config=${this._hold_action}
|
||||
.actions=${actions}
|
||||
.configValue=${"hold_action"}
|
||||
@value-changed=${this._changed}
|
||||
></hui-action-editor>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@ -140,34 +111,13 @@ export class HuiPictureEntityCardEditor
|
||||
fireEvent(this, "config-changed", { config: ev.detail.value });
|
||||
}
|
||||
|
||||
private _changed(ev: CustomEvent): void {
|
||||
if (!this._config || !this.hass) {
|
||||
return;
|
||||
}
|
||||
const target = ev.target! as EditorTarget;
|
||||
const value = ev.detail.value;
|
||||
|
||||
if (this[`_${target.configValue}`] === value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (value !== false && !value) {
|
||||
this._config = { ...this._config };
|
||||
delete this._config[target.configValue!];
|
||||
} else {
|
||||
this._config = {
|
||||
...this._config,
|
||||
[target.configValue!]: value,
|
||||
};
|
||||
}
|
||||
fireEvent(this, "config-changed", { config: this._config });
|
||||
}
|
||||
|
||||
private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
|
||||
switch (schema.name) {
|
||||
case "theme":
|
||||
case "tap_action":
|
||||
case "hold_action":
|
||||
return `${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.theme"
|
||||
`ui.panel.lovelace.editor.card.generic.${schema.name}`
|
||||
)} (${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.config.optional"
|
||||
)})`;
|
||||
|
||||
@ -7,7 +7,6 @@ import type { SchemaUnion } from "../../../../components/ha-form/types";
|
||||
import type { ActionConfig } from "../../../../data/lovelace";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import type { PictureGlanceCardConfig } from "../../cards/types";
|
||||
import "../../components/hui-action-editor";
|
||||
import "../../components/hui-entity-editor";
|
||||
import type { EntityConfig } from "../../entity-rows/types";
|
||||
import type { LovelaceCardEditor } from "../../types";
|
||||
@ -15,7 +14,6 @@ import { processEditorEntities } from "../process-editor-entities";
|
||||
import { actionConfigStruct } from "../structs/action-struct";
|
||||
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
|
||||
import { entitiesConfigStruct } from "../structs/entities-struct";
|
||||
import type { EditorTarget } from "../types";
|
||||
import { configElementStyle } from "./config-elements-style";
|
||||
|
||||
const cardConfigStruct = assign(
|
||||
@ -34,8 +32,6 @@ const cardConfigStruct = assign(
|
||||
})
|
||||
);
|
||||
|
||||
const actions = ["more-info", "toggle", "navigate", "call-service", "none"];
|
||||
|
||||
const SCHEMA = [
|
||||
{ name: "title", selector: { text: {} } },
|
||||
{ name: "image", selector: { text: {} } },
|
||||
@ -53,6 +49,14 @@ const SCHEMA = [
|
||||
},
|
||||
{ name: "entity", selector: { entity: {} } },
|
||||
{ name: "theme", selector: { theme: {} } },
|
||||
{
|
||||
name: "tap_action",
|
||||
selector: { "ui-action": {} },
|
||||
},
|
||||
{
|
||||
name: "hold_action",
|
||||
selector: { "ui-action": {} },
|
||||
},
|
||||
] as const;
|
||||
|
||||
@customElement("hui-picture-glance-card-editor")
|
||||
@ -96,26 +100,6 @@ export class HuiPictureGlanceCardEditor
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-form>
|
||||
<div class="card-config">
|
||||
<hui-action-editor
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.tap_action"
|
||||
)}
|
||||
.hass=${this.hass}
|
||||
.config=${this._tap_action}
|
||||
.actions=${actions}
|
||||
.configValue=${"tap_action"}
|
||||
@value-changed=${this._valueChanged}
|
||||
></hui-action-editor>
|
||||
<hui-action-editor
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.hold_action"
|
||||
)}
|
||||
.hass=${this.hass}
|
||||
.config=${this._hold_action}
|
||||
.actions=${actions}
|
||||
.configValue=${"hold_action"}
|
||||
@value-changed=${this._valueChanged}
|
||||
></hui-action-editor>
|
||||
<hui-entity-editor
|
||||
.hass=${this.hass}
|
||||
.entities=${this._configEntities}
|
||||
@ -133,27 +117,10 @@ export class HuiPictureGlanceCardEditor
|
||||
if (!this._config || !this.hass) {
|
||||
return;
|
||||
}
|
||||
const target = ev.target! as EditorTarget;
|
||||
const value = ev.detail.value;
|
||||
|
||||
if (ev.detail && ev.detail.entities) {
|
||||
this._config = { ...this._config, entities: ev.detail.entities };
|
||||
|
||||
this._configEntities = processEditorEntities(this._config.entities);
|
||||
} else if (target.configValue) {
|
||||
if (this[`_${target.configValue}`] === value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (value !== false && !value) {
|
||||
this._config = { ...this._config };
|
||||
delete this._config[target.configValue!];
|
||||
} else {
|
||||
this._config = {
|
||||
...this._config,
|
||||
[target.configValue!]: value,
|
||||
};
|
||||
}
|
||||
}
|
||||
fireEvent(this, "config-changed", { config: this._config });
|
||||
}
|
||||
@ -161,8 +128,10 @@ export class HuiPictureGlanceCardEditor
|
||||
private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
|
||||
switch (schema.name) {
|
||||
case "theme":
|
||||
case "tap_action":
|
||||
case "hold_action":
|
||||
return `${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.theme"
|
||||
`ui.panel.lovelace.editor.card.generic.${schema.name}`
|
||||
)} (${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.config.optional"
|
||||
)})`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user