diff --git a/src/panels/lovelace/components/hui-input-list-editor.ts b/src/panels/lovelace/components/hui-input-list-editor.ts new file mode 100644 index 0000000000..f0809b613b --- /dev/null +++ b/src/panels/lovelace/components/hui-input-list-editor.ts @@ -0,0 +1,115 @@ +import { + html, + css, + LitElement, + property, + TemplateResult, + CSSResult, + customElement, +} from "lit-element"; +import "@polymer/paper-input/paper-input"; + +import { HomeAssistant } from "../../../types"; +import { fireEvent } from "../../../common/dom/fire_event"; + +import { EditorTarget } from "../editor/types"; + +@customElement("hui-input-list-editor") +export class HuiInputListEditor extends LitElement { + @property() protected value?: string[]; + @property() protected hass?: HomeAssistant; + @property() protected inputLabel?: string; + + protected render(): TemplateResult | void { + if (!this.value) { + return html``; + } + + return html` + ${this.value.map((listEntry, index) => { + return html` + Clear + `; + })} + + `; + } + + private _addEntry(ev: Event): void { + const target = ev.target! as EditorTarget; + if (target.value === "") { + return; + } + const newEntries = this.value!.concat(target.value as string); + target.value = ""; + fireEvent(this, "value-changed", { + value: newEntries, + }); + (ev.target! as LitElement).blur(); + } + + private _valueChanged(ev: Event): void { + ev.stopPropagation(); + const target = ev.target! as EditorTarget; + const newEntries = this.value!.concat(); + newEntries[target.index!] = target.value!; + fireEvent(this, "value-changed", { + value: newEntries, + }); + } + + private _consolidateEntries(ev: Event): void { + const target = ev.target! as EditorTarget; + if (target.value === "") { + const newEntries = this.value!.concat(); + newEntries.splice(target.index!, 1); + fireEvent(this, "value-changed", { + value: newEntries, + }); + } + } + + private _removeEntry(ev: Event): void { + const parent = (ev.currentTarget as any).parentElement; + const newEntries = this.value!.concat(); + newEntries.splice(parent.index!, 1); + fireEvent(this, "value-changed", { + value: newEntries, + }); + } + + static get styles(): CSSResult { + return css` + paper-input > paper-icon-button { + width: 24px; + height: 24px; + padding: 2px; + color: var(--secondary-text-color); + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-input-list-editor": HuiInputListEditor; + } +} diff --git a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts index 045c7f94dc..bacda9c4d5 100644 --- a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts @@ -1,9 +1,11 @@ import { html, + css, LitElement, TemplateResult, customElement, property, + CSSResult, } from "lit-element"; import "@polymer/paper-input/paper-input"; @@ -16,8 +18,10 @@ import { MapCardConfig } from "../../cards/hui-map-card"; import { configElementStyle } from "./config-elements-style"; import { processEditorEntities } from "../process-editor-entities"; import { EntityConfig } from "../../entity-rows/types"; +import { PolymerChangedEvent } from "../../../../polymer-types"; import "../../components/hui-entity-editor"; +import "../../components/hui-input-list-editor"; const entitiesConfigStruct = struct.union([ { @@ -34,6 +38,7 @@ const cardConfigStruct = struct({ aspect_ratio: "string?", default_zoom: "number?", entities: [entitiesConfigStruct], + geo_location_sources: "array?", }); @customElement("hui-map-card-editor") @@ -62,6 +67,10 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor { return this._config!.default_zoom || NaN; } + get _geo_location_sources(): string[] { + return this._config!.geo_location_sources || []; + } + protected render(): TemplateResult | void { if (!this.hass) { return html``; @@ -94,31 +103,53 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor { +

Geolocation Sources

+
+ +
`; } - private _valueChanged(ev: EntitiesEditorEvent): void { + private _entitiesValueChanged(ev: EntitiesEditorEvent): void { if (!this._config || !this.hass) { return; } - const target = ev.target! as EditorTarget; - if (target.configValue && this[`_${target.configValue}`] === target.value) { - return; - } if (ev.detail && ev.detail.entities) { this._config.entities = ev.detail.entities; this._configEntities = processEditorEntities(this._config.entities); - } else if (target.configValue) { + fireEvent(this, "config-changed", { config: this._config }); + } + } + + private _valueChanged(ev: PolymerChangedEvent): void { + if (!this._config || !this.hass) { + return; + } + const target = ev.target! as EditorTarget; + if ( + target.configValue && + ev.detail && + this[`_${target.configValue}`] === ev.detail.value + ) { + return; + } + if (target.configValue && ev.detail) { if ( - target.value === "" || - (target.type === "number" && isNaN(Number(target.value))) + ev.detail.value === "" || + (target.type === "number" && isNaN(Number(ev.detail.value))) ) { delete this._config[target.configValue!]; } else { - let value: any = target.value; + let value: any = ev.detail.value; if (target.type === "number") { value = Number(value); } @@ -130,6 +161,14 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor { } fireEvent(this, "config-changed", { config: this._config }); } + + static get styles(): CSSResult { + return css` + .geo_location_sources { + padding-left: 20px; + } + `; + } } declare global {