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

Fix some lovelace editors (#6911)

Browse Source 
* Fix some lovelace editors

* let -> const
This commit is contained in:
Bram Kragten 2020-09-10 15:17:32 +02:00 committed by GitHub
parent c2e6d40382
commit 96c5fdcbeb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 131 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/panels/lovelace/components/hui-action-editor.ts
View File

@ -1,4 +1,5 @@
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-input/paper-textarea";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
@ -9,7 +10,7 @@ import {
property,
TemplateResult,
} from "lit-element";
import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-service-picker";
import {
ActionConfig,
@ -20,17 +21,6 @@ import {
import { HomeAssistant } from "../../../types";
import { EditorTarget } from "../editor/types";
declare global {
// for fire event
interface HASSDomEvents {
"action-changed": undefined;
}
// for add event listener
interface HTMLElementEventMap {
"action-changed": HASSDomEvent<undefined>;
}
}
@customElement("hui-action-editor")
export class HuiActionEditor extends LitElement {
@property() public config?: ActionConfig;
@ -42,21 +32,21 @@ export class HuiActionEditor extends LitElement {
@property() protected hass?: HomeAssistant;
get _action(): string {
return this.config!.action || "";
return this.config?.action || "";
}
get _navigation_path(): string {
const config = this.config! as NavigateActionConfig;
const config = this.config as NavigateActionConfig;
return config.navigation_path || "";
}
get _url_path(): string {
const config = this.config! as UrlActionConfig;
const config = this.config as UrlActionConfig;
return config.url_path || "";
}
get _service(): string {
const config = this.config! as CallServiceActionConfig;
const config = this.config as CallServiceActionConfig;
return config.service || "";
}
@ -107,13 +97,14 @@ export class HuiActionEditor extends LitElement {
.configValue="${"service"}"
@value-changed="${this._valueChanged}"
></ha-service-picker>
<h3>Toggle Editor to input Service Data</h3>
<b>Service data can only be entered in the code editor</b>
`
: ""}
`;
}
private _valueChanged(ev: Event): void {
ev.stopPropagation();
if (!this.hass) {
return;
}
@ -121,12 +112,12 @@ export class HuiActionEditor extends LitElement {
if (this[`_${target.configValue}`] === target.value) {
return;
}
if (target.configValue === "action") {
this.config = { action: "none" };
}
if (target.configValue) {
this.config = { ...this.config!, [target.configValue!]: target.value };
fireEvent(this, "action-changed");
const newConfig =
target.configValue === "action"
? { action: target.value }
: { ...this.config!, [target.configValue!]: target.value };
fireEvent(this, "value-changed", { value: newConfig });
}
}
}

77
src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
View File

@ -2,14 +2,18 @@ import "@polymer/paper-input/paper-input";
import {
customElement,
html,
internalProperty,
LitElement,
property,
internalProperty,
TemplateResult,
} from "lit-element";
import { assert, boolean, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stateIcon } from "../../../../common/entity/state_icon";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-input";
import "../../../../components/ha-switch";
import { ActionConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
import { ButtonCardConfig } from "../../cards/types";
@ -17,16 +21,8 @@ import "../../components/hui-action-editor";
import "../../components/hui-entity-editor";
import "../../components/hui-theme-select-editor";
import { LovelaceCardEditor } from "../../types";
import {
actionConfigStruct,
EditorTarget,
EntitiesEditorEvent,
} from "../types";
import "../../../../components/ha-switch";
import "../../../../components/ha-formfield";
import { actionConfigStruct, EditorTarget } from "../types";
import { configElementStyle } from "./config-elements-style";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import { assert, object, string, optional, boolean } from "superstruct";
const cardConfigStruct = object({
type: string(),
@ -63,11 +59,11 @@ export class HuiButtonCardEditor extends LitElement
}
get _show_name(): boolean {
return this._config!.show_name || true;
return this._config!.show_name ?? true;
}
get _show_state(): boolean {
return this._config!.show_state || false;
return this._config!.show_state ?? false;
}
get _icon(): string {
@ -75,7 +71,7 @@ export class HuiButtonCardEditor extends LitElement
}
get _show_icon(): boolean {
return this._config!.show_icon || true;
return this._config!.show_icon ?? true;
}
get _icon_height(): string {
@ -85,11 +81,11 @@ export class HuiButtonCardEditor extends LitElement
}
get _tap_action(): ActionConfig {
return this._config!.tap_action || { action: "more-info" };
return this._config!.tap_action || { action: "toggle" };
}
get _hold_action(): ActionConfig {
return this._config!.hold_action || { action: "none" };
return this._config!.hold_action || { action: "more-info" };
}
get _theme(): string {
@ -123,7 +119,7 @@ export class HuiButtonCardEditor extends LitElement
.hass=${this.hass}
.value="${this._entity}"
.configValue=${"entity"}
@change="${this._valueChanged}"
@value-changed="${this._valueChanged}"
allow-custom-entity
></ha-entity-picker>
<div class="side-by-side">
@ -161,7 +157,7 @@ export class HuiButtonCardEditor extends LitElement
<ha-switch
.checked="${this._show_name !== false}"
.configValue="${"show_name"}"
@change="${this._valueChanged}"
@change="${this._change}"
></ha-switch>
</ha-formfield>
</div>
@ -175,7 +171,7 @@ export class HuiButtonCardEditor extends LitElement
<ha-switch
.checked=${this._show_state !== false}
.configValue=${"show_state"}
@change=${this._valueChanged}
@change=${this._change}
></ha-switch>
</ha-formfield>
</div>
@ -189,7 +185,7 @@ export class HuiButtonCardEditor extends LitElement
<ha-switch
.checked="${this._show_icon !== false}"
.configValue="${"show_icon"}"
@change="${this._valueChanged}"
@change="${this._change}"
></ha-switch>
</ha-formfield>
</div>
@ -225,7 +221,7 @@ export class HuiButtonCardEditor extends LitElement
.config="${this._tap_action}"
.actions="${actions}"
.configValue="${"tap_action"}"
@action-changed="${this._valueChanged}"
@value-changed="${this._valueChanged}"
></hui-action-editor>
<hui-action-editor
.label="${this.hass.localize(
@ -237,27 +233,43 @@ export class HuiButtonCardEditor extends LitElement
.config="${this._hold_action}"
.actions="${actions}"
.configValue="${"hold_action"}"
@action-changed="${this._valueChanged}"
@value-changed="${this._valueChanged}"
></hui-action-editor>
</div>
</div>
`;
}
private _valueChanged(ev: EntitiesEditorEvent): void {
private _change(ev: Event) {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
const value = target.checked;
if (
this[`_${target.configValue}`] === target.value ||
this[`_${target.configValue}`] === target.config
) {
if (this[`_${target.configValue}`] === value) {
return;
}
this._config = {
...this._config,
[target.configValue!]: value,
};
fireEvent(this, "config-changed", { config: this._config });
}
private _valueChanged(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 (target.value === "") {
if (value !== false && !value) {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
@ -266,18 +278,11 @@ export class HuiButtonCardEditor extends LitElement
target.configValue === "icon_height" &&
!isNaN(Number(target.value))
) {
newValue = `${String(target.value)}px`;
newValue = `${String(value)}px`;
}
this._config = {
...this._config,
[target.configValue!]:
target.checked !== undefined
? target.checked
: newValue !== undefined
? newValue
: target.value
? target.value
: target.config,
[target.configValue!]: newValue !== undefined ? newValue : value,
};
}
}

28
src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
View File

@ -2,11 +2,12 @@ import "@polymer/paper-input/paper-input";
import {
customElement,
html,
internalProperty,
LitElement,
property,
internalProperty,
TemplateResult,
} from "lit-element";
import { assert, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stateIcon } from "../../../../common/entity/state_icon";
import "../../../../components/ha-icon-input";
@ -17,13 +18,8 @@ import "../../components/hui-action-editor";
import "../../components/hui-entity-editor";
import "../../components/hui-theme-select-editor";
import { LovelaceCardEditor } from "../../types";
import {
actionConfigStruct,
EditorTarget,
EntitiesEditorEvent,
} from "../types";
import { actionConfigStruct, EditorTarget } from "../types";
import { configElementStyle } from "./config-elements-style";
import { string, object, optional, assert } from "superstruct";
const cardConfigStruct = object({
type: string(),
@ -100,7 +96,7 @@ export class HuiLightCardEditor extends LitElement
.value=${this._entity}
.configValue=${"entity"}
.includeDomains=${includeDomains}
@change=${this._valueChanged}
@value-changed=${this._valueChanged}
allow-custom-entity
></ha-entity-picker>
<div class="side-by-side">
@ -145,7 +141,7 @@ export class HuiLightCardEditor extends LitElement
.config=${this._hold_action}
.actions=${actions}
.configValue=${"hold_action"}
@action-changed=${this._valueChanged}
@value-changed=${this._valueChanged}
></hui-action-editor>
<hui-action-editor
@ -158,32 +154,30 @@ export class HuiLightCardEditor extends LitElement
.config=${this._double_tap_action}
.actions=${actions}
.configValue=${"double_tap_action"}
@action-changed=${this._valueChanged}
@value-changed=${this._valueChanged}
></hui-action-editor>
</div>
`;
}
private _valueChanged(ev: EntitiesEditorEvent): void {
private _valueChanged(ev: CustomEvent): void {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
const value = ev.detail.value;
if (
this[`_${target.configValue}`] === target.value ||
this[`_${target.configValue}`] === target.config
) {
if (this[`_${target.configValue}`] === value) {
return;
}
if (target.configValue) {
if (target.value === "") {
if (value !== false && !value) {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
this._config = {
...this._config,
[target.configValue!]: target.value ? target.value : target.config,
[target.configValue!]: value,
};
}
}

26
src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
View File

@ -2,11 +2,12 @@ import "@polymer/paper-input/paper-input";
import {
customElement,
html,
internalProperty,
LitElement,
property,
internalProperty,
TemplateResult,
} from "lit-element";
import { assert, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { ActionConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
@ -14,13 +15,8 @@ import { PictureCardConfig } from "../../cards/types";
import "../../components/hui-action-editor";
import "../../components/hui-theme-select-editor";
import { LovelaceCardEditor } from "../../types";
import {
actionConfigStruct,
EditorTarget,
EntitiesEditorEvent,
} from "../types";
import { actionConfigStruct, EditorTarget } from "../types";
import { configElementStyle } from "./config-elements-style";
import { string, object, optional, assert } from "superstruct";
const cardConfigStruct = object({
type: string(),
@ -89,7 +85,7 @@ export class HuiPictureCardEditor extends LitElement
.config="${this._tap_action}"
.actions="${actions}"
.configValue="${"tap_action"}"
@action-changed="${this._valueChanged}"
@value-changed="${this._valueChanged}"
></hui-action-editor>
<hui-action-editor
.label="${this.hass.localize(
@ -101,7 +97,7 @@ export class HuiPictureCardEditor extends LitElement
.config="${this._hold_action}"
.actions="${actions}"
.configValue="${"hold_action"}"
@action-changed="${this._valueChanged}"
@value-changed="${this._valueChanged}"
></hui-action-editor>
<hui-theme-select-editor
.hass=${this.hass}
@ -114,26 +110,24 @@ export class HuiPictureCardEditor extends LitElement
`;
}
private _valueChanged(ev: EntitiesEditorEvent): void {
private _valueChanged(ev: CustomEvent): void {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
const value = ev.detail.value;
if (
this[`_${target.configValue}`] === target.value ||
this[`_${target.configValue}`] === target.config
) {
if (this[`_${target.configValue}`] === target.value) {
return;
}
if (target.configValue) {
if (target.value === "") {
if (value !== false && !value) {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
this._config = {
...this._config,
[target.configValue!]: target.value ? target.value : target.config,
[target.configValue!]: value,
};
}
}

76
src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
View File

@ -5,14 +5,16 @@ import "@polymer/paper-listbox/paper-listbox";
import {
customElement,
html,
internalProperty,
LitElement,
property,
internalProperty,
TemplateResult,
} from "lit-element";
import { assert, boolean, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-switch";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import "../../../../components/ha-formfield";
import "../../../../components/ha-switch";
import { ActionConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
import { PictureEntityCardConfig } from "../../cards/types";
@ -20,14 +22,8 @@ import "../../components/hui-action-editor";
import "../../components/hui-entity-editor";
import "../../components/hui-theme-select-editor";
import { LovelaceCardEditor } from "../../types";
import {
actionConfigStruct,
EditorTarget,
EntitiesEditorEvent,
} from "../types";
import { actionConfigStruct, EditorTarget } from "../types";
import { configElementStyle } from "./config-elements-style";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import { assert, object, string, optional, boolean } from "superstruct";
const cardConfigStruct = object({
type: string(),
@ -86,16 +82,16 @@ export class HuiPictureEntityCardEditor extends LitElement
return this._config!.tap_action || { action: "more-info" };
}
get _hold_action(): ActionConfig {
return this._config!.hold_action || { action: "more-info" };
get _hold_action(): ActionConfig | undefined {
return this._config!.hold_action;
}
get _show_name(): boolean {
return this._config!.show_name || true;
return this._config!.show_name ?? true;
}
get _show_state(): boolean {
return this._config!.show_state || true;
return this._config!.show_state ?? true;
}
get _theme(): string {
@ -123,7 +119,7 @@ export class HuiPictureEntityCardEditor extends LitElement
.hass=${this.hass}
.value="${this._entity}"
.configValue=${"entity"}
@change="${this._valueChanged}"
@value-changed="${this._valueChanged}"
allow-custom-entity
></ha-entity-picker>
<paper-input
@ -155,7 +151,7 @@ export class HuiPictureEntityCardEditor extends LitElement
.hass=${this.hass}
.value="${this._camera_image}"
.configValue=${"camera_image"}
@change="${this._valueChanged}"
@value-changed="${this._valueChanged}"
.includeDomains=${includeDomains}
allow-custom-entity
></ha-entity-picker>
@ -184,8 +180,7 @@ export class HuiPictureEntityCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
type="number"
.value="${Number(this._aspect_ratio.replace("%", ""))}"
.value="${this._aspect_ratio}"
.configValue="${"aspect_ratio"}"
@value-changed="${this._valueChanged}"
></paper-input>
@ -201,7 +196,7 @@ export class HuiPictureEntityCardEditor extends LitElement
<ha-switch
.checked="${this._config!.show_name !== false}"
.configValue="${"show_name"}"
@change="${this._valueChanged}"
@change="${this._change}"
></ha-switch
></ha-formfield>
</div>
@ -215,7 +210,7 @@ export class HuiPictureEntityCardEditor extends LitElement
<ha-switch
.checked="${this._config!.show_state !== false}"
.configValue="${"show_state"}"
@change="${this._valueChanged}"
@change="${this._change}"
></ha-switch
></ha-formfield>
</div>
@ -231,7 +226,7 @@ export class HuiPictureEntityCardEditor extends LitElement
.config="${this._tap_action}"
.actions="${actions}"
.configValue="${"tap_action"}"
@action-changed="${this._valueChanged}"
@value-changed="${this._valueChanged}"
></hui-action-editor>
<hui-action-editor
.label="${this.hass.localize(
@ -243,7 +238,7 @@ export class HuiPictureEntityCardEditor extends LitElement
.config="${this._hold_action}"
.actions="${actions}"
.configValue="${"hold_action"}"
@action-changed="${this._valueChanged}"
@value-changed="${this._valueChanged}"
></hui-action-editor>
<hui-theme-select-editor
.hass=${this.hass}
@ -256,34 +251,43 @@ export class HuiPictureEntityCardEditor extends LitElement
`;
}
private _valueChanged(ev: EntitiesEditorEvent): void {
private _change(ev: Event) {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
let value = target.value;
const value = target.checked;
if (target.configValue! === "aspect_ratio" && target.value) {
value += "%";
}
if (
this[`_${target.configValue}`] === value ||
this[`_${target.configValue}`] === target.config
) {
if (this[`_${target.configValue}`] === value) {
return;
}
this._config = {
...this._config,
[target.configValue!]: value,
};
fireEvent(this, "config-changed", { config: this._config });
}
private _valueChanged(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 === "") {
if (value !== false && !value) {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
this._config = {
...this._config,
[target.configValue!]:
target.checked !== undefined
? target.checked
: value || target.config,
[target.configValue!]: value,
};
}
}

49
src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
View File

@ -5,11 +5,12 @@ import "@polymer/paper-listbox/paper-listbox";
import {
customElement,
html,
internalProperty,
LitElement,
property,
internalProperty,
TemplateResult,
} from "lit-element";
import { array, assert, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/entity/ha-entity-picker";
import { ActionConfig } from "../../../../data/lovelace";
@ -25,10 +26,8 @@ import {
actionConfigStruct,
EditorTarget,
entitiesConfigStruct,
EntitiesEditorEvent,
} from "../types";
import { configElementStyle } from "./config-elements-style";
import { assert, string, object, optional, array } from "superstruct";
const cardConfigStruct = object({
type: string(),
@ -91,20 +90,12 @@ export class HuiPictureGlanceCardEditor extends LitElement
return this._config!.aspect_ratio || "";
}
get _tap_action(): ActionConfig {
return this._config!.tap_action || { action: "more-info" };
get _tap_action(): ActionConfig | undefined {
return this._config!.tap_action;
}
get _hold_action(): ActionConfig {
return this._config!.hold_action || { action: "more-info" };
}
get _show_name(): boolean {
return this._config!.show_name || false;
}
get _show_state(): boolean {
return this._config!.show_state || false;
get _hold_action(): ActionConfig | undefined {
return this._config!.hold_action;
}
get _theme(): string {
@ -151,7 +142,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
.hass=${this.hass}
.value="${this._camera_image}"
.configValue=${"camera_image"}
@change="${this._valueChanged}"
@value-changed="${this._valueChanged}"
allow-custom-entity
.includeDomains=${includeDomains}
></ha-entity-picker>
@ -180,8 +171,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
type="number"
.value="${Number(this._aspect_ratio.replace("%", ""))}"
.value="${this._aspect_ratio}"
.configValue="${"aspect_ratio"}"
@value-changed="${this._valueChanged}"
></paper-input>
@ -195,7 +185,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
.hass=${this.hass}
.value="${this._entity}"
.configValue=${"entity"}
@change="${this._valueChanged}"
@value-changed="${this._valueChanged}"
allow-custom-entity
></ha-entity-picker>
<div class="side-by-side">
@ -209,7 +199,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
.config="${this._tap_action}"
.actions="${actions}"
.configValue="${"tap_action"}"
@action-changed="${this._valueChanged}"
@value-changed="${this._valueChanged}"
></hui-action-editor>
<hui-action-editor
.label="${this.hass.localize(
@ -221,7 +211,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
.config="${this._hold_action}"
.actions="${actions}"
.configValue="${"hold_action"}"
@action-changed="${this._valueChanged}"
@value-changed="${this._valueChanged}"
></hui-action-editor>
</div>
<hui-entity-editor
@ -239,36 +229,29 @@ export class HuiPictureGlanceCardEditor extends LitElement
`;
}
private _valueChanged(ev: EntitiesEditorEvent): void {
private _valueChanged(ev: CustomEvent): void {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
let value = target.value;
if (target.configValue! === "aspect_ratio" && target.value) {
value += "%";
}
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 ||
this[`_${target.configValue}`] === target.config
) {
if (this[`_${target.configValue}`] === value) {
return;
}
if (value === "") {
if (value !== false && !value) {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
this._config = {
...this._config,
[target.configValue!]: value || target.config,
[target.configValue!]: value,
};
}
}