UI Editor for map card (#2287)

*  UI Editor for `map` card

* Address review comments

* Revert change properly

* Address review comments

* Note to change to interface after LL conversion

* Remove config options if empty

Should apply to other editors

* entitites is required

* cleanup

* cleanup

* Fix for number values

* Name chunk

* Remove zoom default
This commit is contained in:
Ian Richardson 2018-12-21 06:53:26 -06:00 committed by Paulus Schoutsen
parent 3c5fb6d1ad
commit 2e750dc1e2
2 changed files with 160 additions and 0 deletions

View File

@ -11,7 +11,24 @@ import computeStateName from "../../../common/entity/compute_state_name";
import debounce from "../../../common/util/debounce";
import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
// should be interface when converted to TS
export const Config = {
title: "",
aspect_ratio: "",
default_zoom: 14,
entities: [],
};
class HuiMapCard extends PolymerElement {
static async getConfigElement() {
await import(/* webpackChunkName: "hui-map-card-editor" */ "../editor/config-elements/hui-map-card-editor");
return document.createElement("hui-map-card-editor");
}
static getStubConfig() {
return { entities: [] };
}
static get template() {
return html`
<style>

View File

@ -0,0 +1,143 @@
import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
import { TemplateResult } from "lit-html";
import "@polymer/paper-input/paper-input";
import { struct } from "../../common/structs/struct";
import { EntitiesEditorEvent, EditorTarget } from "../types";
import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
import { HomeAssistant } from "../../../../types";
import { LovelaceCardEditor } from "../../types";
import { fireEvent } from "../../../../common/dom/fire_event";
import { Config } from "../../cards/hui-alarm-panel-card";
import { configElementStyle } from "./config-elements-style";
import { processEditorEntities } from "../process-editor-entities";
import { EntityConfig } from "../../entity-rows/types";
import "../../components/hui-entity-editor";
const entitiesConfigStruct = struct.union([
{
entity: "entity-id",
name: "string?",
icon: "icon?",
},
"entity-id",
]);
const cardConfigStruct = struct({
type: "string",
title: "string?",
aspect_ratio: "string?",
default_zoom: "number?",
entities: [entitiesConfigStruct],
});
export class HuiMapCardEditor extends hassLocalizeLitMixin(LitElement)
implements LovelaceCardEditor {
public hass?: HomeAssistant;
private _config?: Config;
private _configEntities?: EntityConfig[];
public setConfig(config: Config): void {
config = cardConfigStruct(config);
this._config = config;
this._configEntities = processEditorEntities(config.entities);
}
static get properties(): PropertyDeclarations {
return { hass: {}, _config: {}, _configEntities: {} };
}
get _title(): string {
return this._config!.title || "";
}
get _aspect_ratio(): string {
return this._config!.aspect_ratio || "";
}
get _default_zoom(): number {
return this._config!.default_zoom || NaN;
}
get _entities(): string[] {
return this._config!.entities || [];
}
protected render(): TemplateResult {
if (!this.hass) {
return html``;
}
return html`
${configElementStyle}
<div class="card-config">
<paper-input
label="Title"
.value="${this._title}"
.configValue="${"title"}"
@value-changed="${this._valueChanged}"
></paper-input>
<div class="side-by-side">
<paper-input
label="Aspect Ratio"
.value="${this._aspect_ratio}"
.configValue="${"aspect_ratio"}"
@value-changed="${this._valueChanged}"
></paper-input>
<paper-input
label="Default Zoom"
type="number"
.value="${this._default_zoom}"
.configValue="${"default_zoom"}"
@value-changed="${this._valueChanged}"
></paper-input>
</div>
<hui-entity-editor
.hass="${this.hass}"
.entities="${this._configEntities}"
@entities-changed="${this._valueChanged}"
></hui-entity-editor>
</div>
`;
}
private _valueChanged(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) {
if (
target.value === "" ||
(target.type === "number" && isNaN(Number(target.value)))
) {
delete this._config[target.configValue!];
} else {
let value: any = target.value;
if (target.type === "number") {
value = Number(value);
}
this._config = {
...this._config,
[target.configValue!]: value,
};
}
}
fireEvent(this, "config-changed", { config: this._config });
}
}
declare global {
interface HTMLElementTagNameMap {
"hui-map-card-editor": HuiMapCardEditor;
}
}
customElements.define("hui-map-card-editor", HuiMapCardEditor);