Skip to content

Fix some lovelace editors #6911

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bramkragten merged 2 commits into from
Sep 10, 2020
Merged

Fix some lovelace editors #6911

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ebfe9aa
Fix some lovelace editors
bramkragten Sep 10, 2020
825ebe4
let -> const
bramkragten Sep 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 13 additions & 22 deletions src/panels/lovelace/components/hui-action-editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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,
Expand All @@ -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;
Expand All @@ -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 || "";
}

Expand Down Expand Up @@ -107,26 +97,27 @@ 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;
}
const target = ev.target! as EditorTarget;
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 });
}
}
}
Expand Down
77 changes: 41 additions & 36 deletions src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,27 @@ 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";
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(),
Expand Down Expand Up @@ -63,19 +59,19 @@ 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 {
return this._config!.icon || "";
}

get _show_icon(): boolean {
return this._config!.show_icon || true;
return this._config!.show_icon ?? true;
}

get _icon_height(): string {
Expand All @@ -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 {
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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(
Expand All @@ -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}`] === 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}`] === 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 {
Expand All @@ -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,
};
}
}
Expand Down
28 changes: 11 additions & 17 deletions src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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(),
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand All @@ -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,
};
}
}
Expand Down
Loading