mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-22 16:56:35 +00:00
Entities Card UI Editor (#2072)
* Entity Card ui + extras * Travis Fix * Bram already has this in another PR
This commit is contained in:
parent
86e501f0aa
commit
49542c49fa
@ -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[];
|
||||
|
@ -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) {
|
||||
|
@ -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);
|
@ -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 {
|
Loading…
x
Reference in New Issue
Block a user