Entities Card UI Editor (#2072)

* Entity Card ui + extras

* Travis Fix

* Bram already has this in  another PR
This commit is contained in:
Zack Arnett 2018-11-21 03:29:06 -05:00 committed by Paulus Schoutsen
parent 86e501f0aa
commit 49542c49fa
4 changed files with 142 additions and 25 deletions

View File

@ -14,22 +14,22 @@ import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
import { HomeAssistant } from "../../../types";
import { EntityConfig, EntityRow } from "../entity-rows/types";
import { LovelaceCard, LovelaceConfig } from "../types";
import { LovelaceCard, LovelaceConfig, LovelaceCardEditor } from "../types";
import processConfigEntities from "../common/process-config-entities";
import createRowElement from "../common/create-row-element";
import computeDomain from "../../../common/entity/compute_domain";
import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
interface ConfigEntity extends EntityConfig {
export interface ConfigEntity extends EntityConfig {
type?: string;
secondary_info: "entity-id" | "last-changed";
secondary_info?: "entity-id" | "last-changed";
action_name?: string;
service?: string;
service_data?: object;
url?: string;
}
interface Config extends LovelaceConfig {
export interface Config extends LovelaceConfig {
show_header_toggle?: boolean;
title?: string;
entities: ConfigEntity[];
@ -38,6 +38,10 @@ interface Config extends LovelaceConfig {
class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
implements LovelaceCard {
public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import("../editor/config-elements/hui-entities-card-editor");
return document.createElement("hui-entities-card-editor");
}
protected _hass?: HomeAssistant;
protected _config?: Config;
protected _configEntities?: ConfigEntity[];

View File

@ -12,6 +12,7 @@ import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
import { HomeAssistant } from "../../../types";
import { LovelaceCard, LovelaceConfig, LovelaceCardEditor } from "../types";
import { longPress } from "../common/directives/long-press-directive";
import { EntityConfig } from "../entity-rows/types";
import computeStateDisplay from "../../../common/entity/compute_state_display";
import computeStateName from "../../../common/entity/compute_state_name";
@ -23,10 +24,7 @@ import "../../../components/entity/state-badge";
import "../../../components/ha-card";
import "../../../components/ha-icon";
export interface EntityConfig {
name?: string;
icon?: string;
entity: string;
export interface ConfigEntity extends EntityConfig {
tap_action?: "toggle" | "call-service" | "more-info";
hold_action?: "toggle" | "call-service" | "more-info";
service?: string;
@ -38,20 +36,20 @@ export interface Config extends LovelaceConfig {
show_state?: boolean;
title?: string;
theme?: string;
entities: EntityConfig[];
entities: ConfigEntity[];
columns?: number;
}
export class HuiGlanceCard extends hassLocalizeLitMixin(LitElement)
implements LovelaceCard {
public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import("../editor/hui-glance-card-editor");
await import("../editor/config-elements/hui-glance-card-editor");
return document.createElement("hui-glance-card-editor");
}
public hass?: HomeAssistant;
private _config?: Config;
private _configEntities?: EntityConfig[];
private _configEntities?: ConfigEntity[];
static get properties(): PropertyDeclarations {
return {
@ -242,7 +240,7 @@ export class HuiGlanceCard extends hassLocalizeLitMixin(LitElement)
}
private handleClick(ev: MouseEvent, hold: boolean): void {
const config = (ev.currentTarget as any).entityConf as EntityConfig;
const config = (ev.currentTarget as any).entityConf as ConfigEntity;
const entityId = config.entity;
const action = hold ? config.hold_action : config.tap_action || "more-info";
switch (action) {

View File

@ -0,0 +1,115 @@
import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
import { TemplateResult } from "lit-html";
import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import { processEditorEntities } from "../process-editor-entities";
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, ConfigEntity } from "../../cards/hui-entities-card";
import "../../../../components/entity/state-badge";
import "../../components/hui-theme-select-editor";
import "../../components/hui-entity-editor";
import "../../../../components/ha-card";
import "../../../../components/ha-icon";
export class HuiEntitiesCardEditor extends hassLocalizeLitMixin(LitElement)
implements LovelaceCardEditor {
public hass?: HomeAssistant;
private _config?: Config;
private _configEntities?: ConfigEntity[];
static get properties(): PropertyDeclarations {
return {
hass: {},
_config: {},
_configEntities: {},
};
}
public setConfig(config: Config): void {
this._config = { type: "entities", ...config };
this._configEntities = processEditorEntities(config.entities);
}
protected render(): TemplateResult {
if (!this.hass) {
return html``;
}
return html`
${this.renderStyle()}
<paper-input
label="Title"
value="${this._config!.title || ""}"
.configValue="${"title"}"
@value-changed="${this._valueChanged}"
></paper-input>
<hui-theme-select-editor
.hass="${this.hass}"
.value="${this._config!.theme}"
.configValue="${"theme"}"
@change="${this._valueChanged}"
></hui-theme-select-editor>
<hui-entity-editor
.hass="${this.hass}"
.entities="${this._configEntities}"
@change="${this._valueChanged}"
></hui-entity-editor>
<paper-checkbox
?checked="${this._config!.show_header_toggle !== false}"
.configValue="${"show_header_toggle"}"
@change="${this._valueChanged}"
>Show Header Toggle?</paper-checkbox
>
`;
}
private _valueChanged(ev: EntitiesEditorEvent): void {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
let newConfig = this._config;
if (ev.detail && ev.detail.entities) {
newConfig.entities = ev.detail.entities;
} else {
newConfig = {
...this._config,
[target.configValue!]:
target.checked !== undefined ? target.checked : target.value,
};
}
fireEvent(this, "config-changed", {
config: newConfig,
});
}
private renderStyle(): TemplateResult {
return html`
<style>
paper-checkbox {
display: block;
padding-top: 16px;
}
</style>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"hui-entities-card-editor": HuiEntitiesCardEditor;
}
}
customElements.define("hui-entities-card-editor", HuiEntitiesCardEditor);

View File

@ -5,25 +5,25 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import { processEditorEntities } from "./process-editor-entities";
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, EntityConfig } from "../cards/hui-glance-card";
import { processEditorEntities } from "../process-editor-entities";
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, ConfigEntity } from "../../cards/hui-glance-card";
import "../../../components/entity/state-badge";
import "../components/hui-theme-select-editor";
import "../components/hui-entity-editor";
import "../../../components/ha-card";
import "../../../components/ha-icon";
import "../../../../components/entity/state-badge";
import "../../components/hui-theme-select-editor";
import "../../components/hui-entity-editor";
import "../../../../components/ha-card";
import "../../../../components/ha-icon";
export class HuiGlanceCardEditor extends hassLocalizeLitMixin(LitElement)
implements LovelaceCardEditor {
public hass?: HomeAssistant;
private _config?: Config;
private _configEntities?: EntityConfig[];
private _configEntities?: ConfigEntity[];
static get properties(): PropertyDeclarations {
return {