mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-11 11:26:35 +00:00
Merge pull request #1792 from zsarnett/entities-card-lit
Updating Entities Card to TS+lit
This commit is contained in:
Zack Arnett
GitHub
commit
39dd0524f8
@ -1,150 +0,0 @@
|
||||
import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag.js";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element.js";
|
||||
|
||||
import "../../../components/ha-card.js";
|
||||
import "../components/hui-entities-toggle.js";
|
||||
|
||||
import createRowElement from "../common/create-row-element.js";
|
||||
import computeDomain from "../../../common/entity/compute_domain.js";
|
||||
import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const.js";
|
||||
|
||||
import EventsMixin from "../../../mixins/events-mixin.js";
|
||||
|
||||
/*
|
||||
* @appliesMixin EventsMixin
|
||||
*/
|
||||
class HuiEntitiesCard extends EventsMixin(PolymerElement) {
|
||||
static get template() {
|
||||
return html`
|
||||
<style>
|
||||
ha-card {
|
||||
padding: 16px;
|
||||
}
|
||||
#states {
|
||||
margin: -4px 0;
|
||||
}
|
||||
#states > div {
|
||||
margin: 4px 0;
|
||||
}
|
||||
#states > div > * {
|
||||
overflow: hidden;
|
||||
}
|
||||
.header {
|
||||
@apply --paper-font-headline;
|
||||
/* overwriting line-height +8 because entity-toggle can be 40px height,
|
||||
compensating this with reduced padding */
|
||||
line-height: 40px;
|
||||
color: var(--primary-text-color);
|
||||
padding: 4px 0 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header .name {
|
||||
@apply --paper-font-common-nowrap;
|
||||
}
|
||||
.state-card-dialog {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ha-card>
|
||||
<template is='dom-if' if='[[_showHeader(_config)]]'>
|
||||
<div class='header'>
|
||||
<div class="name">[[_config.title]]</div>
|
||||
<template is="dom-if" if="[[_showHeaderToggle(_config.show_header_toggle)]]">
|
||||
<hui-entities-toggle hass="[[hass]]" entities="[[_filterEntities(_config.entities)]]"></hui-entities-toggle>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<div id="states"></div>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: {
|
||||
type: Object,
|
||||
observer: "_hassChanged",
|
||||
},
|
||||
_config: Object,
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._elements = [];
|
||||
}
|
||||
|
||||
ready() {
|
||||
super.ready();
|
||||
if (this._config) this._buildConfig();
|
||||
}
|
||||
|
||||
getCardSize() {
|
||||
// +1 for the header
|
||||
return 1 + (this._config ? this._config.entities.length : 0);
|
||||
}
|
||||
|
||||
_showHeaderToggle(show) {
|
||||
// If show is undefined, we treat it as true
|
||||
return show !== false;
|
||||
}
|
||||
|
||||
_showHeader(config) {
|
||||
// Show header if either title or toggle configured to show in it
|
||||
return config.title || config.show_header_toggle;
|
||||
}
|
||||
|
||||
setConfig(config) {
|
||||
this._config = config;
|
||||
this._rows = config.entities.map(
|
||||
(item) => (typeof item === "string" ? { entity: item } : item)
|
||||
);
|
||||
if (this.$) this._buildConfig();
|
||||
}
|
||||
|
||||
_buildConfig() {
|
||||
const root = this.$.states;
|
||||
|
||||
while (root.lastChild) {
|
||||
root.removeChild(root.lastChild);
|
||||
}
|
||||
|
||||
this._elements = [];
|
||||
|
||||
for (const row of this._rows) {
|
||||
const entityId = row.entity;
|
||||
const element = createRowElement(row);
|
||||
if (
|
||||
entityId &&
|
||||
!DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityId))
|
||||
) {
|
||||
element.classList.add("state-card-dialog");
|
||||
element.addEventListener("click", () =>
|
||||
this.fire("hass-more-info", { entityId })
|
||||
);
|
||||
}
|
||||
element.hass = this.hass;
|
||||
this._elements.push(element);
|
||||
const container = document.createElement("div");
|
||||
container.appendChild(element);
|
||||
root.appendChild(container);
|
||||
}
|
||||
}
|
||||
|
||||
_hassChanged(hass) {
|
||||
this._elements.forEach((element) => {
|
||||
element.hass = hass;
|
||||
});
|
||||
}
|
||||
|
||||
_filterEntities(items) {
|
||||
return items
|
||||
.filter((item) => typeof item === "string" || item.entity)
|
||||
.map((item) => (typeof item === "string" ? item : item.entity));
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-entities-card", HuiEntitiesCard);
|
||||
184
src/panels/lovelace/cards/hui-entities-card.ts
Normal file
184
src/panels/lovelace/cards/hui-entities-card.ts
Normal file
@ -0,0 +1,184 @@
|
||||
import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
|
||||
|
||||
import "../../../components/ha-card.js";
|
||||
import "../components/hui-entities-toggle.js";
|
||||
|
||||
import { fireEvent } from "../../../common/dom/fire_event.js";
|
||||
import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const.js";
|
||||
import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
|
||||
import { LovelaceCard, LovelaceConfig } from "../types.js";
|
||||
import createRowElement from "../common/create-row-element.js";
|
||||
import computeDomain from "../../../common/entity/compute_domain.js";
|
||||
import processConfigEntities from "../common/process-config-entities";
|
||||
import { HomeAssistant } from "../../../types.js";
|
||||
import { EntityConfig, EntityRow } from "../entity-rows/types.js";
|
||||
|
||||
interface ConfigEntity extends EntityConfig {
|
||||
type?: string;
|
||||
secondary_info: "entity-id" | "last-changed";
|
||||
action_name?: string;
|
||||
service?: string;
|
||||
service_data?: object;
|
||||
url?: string;
|
||||
}
|
||||
|
||||
interface Config extends LovelaceConfig {
|
||||
show_header_toggle?: boolean;
|
||||
title?: string;
|
||||
entities: ConfigEntity[];
|
||||
}
|
||||
|
||||
class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
|
||||
implements LovelaceCard {
|
||||
protected _hass?: HomeAssistant;
|
||||
protected config?: Config;
|
||||
protected configEntities?: ConfigEntity[];
|
||||
|
||||
set hass(hass) {
|
||||
this._hass = hass;
|
||||
this.shadowRoot!.querySelectorAll("#states > *").forEach(
|
||||
(element: unknown) => {
|
||||
(element as EntityRow).hass = hass;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
config: {},
|
||||
};
|
||||
}
|
||||
|
||||
public getCardSize() {
|
||||
if (!this.config) {
|
||||
return 0;
|
||||
}
|
||||
// +1 for the header
|
||||
return (this.config.title ? 1 : 0) + this.config.entities.length;
|
||||
}
|
||||
|
||||
public setConfig(config: Config) {
|
||||
const entities = processConfigEntities(config.entities);
|
||||
for (const entity of entities) {
|
||||
if (
|
||||
entity.type === "call-service" &&
|
||||
(!entity.service ||
|
||||
!entity.name ||
|
||||
!entity.icon ||
|
||||
!entity.service_data ||
|
||||
!entity.action_name)
|
||||
) {
|
||||
throw new Error("Missing required property when type is call-service");
|
||||
} else if (
|
||||
entity.type === "weblink" &&
|
||||
(!entity.name || !entity.icon || !entity.url)
|
||||
) {
|
||||
throw new Error("Missing required property when type is weblink");
|
||||
}
|
||||
}
|
||||
|
||||
this.config = config;
|
||||
this.configEntities = entities;
|
||||
}
|
||||
|
||||
protected render() {
|
||||
if (!this.config || !this._hass) {
|
||||
return html``;
|
||||
}
|
||||
const { show_header_toggle, title } = this.config;
|
||||
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<ha-card>
|
||||
${
|
||||
!title && !show_header_toggle
|
||||
? html``
|
||||
: html`
|
||||
<div class='header'>
|
||||
<div class="name">${title}</div>
|
||||
${
|
||||
show_header_toggle === false
|
||||
? html``
|
||||
: html`
|
||||
<hui-entities-toggle
|
||||
.hass="${this._hass}"
|
||||
.entities="${this.configEntities!.map(
|
||||
(conf) => conf.entity
|
||||
)}"
|
||||
>
|
||||
</hui-entities-toggle>`
|
||||
}
|
||||
</div>`
|
||||
}
|
||||
<div id="states">
|
||||
${this.configEntities!.map((entityConf) =>
|
||||
this.renderEntity(entityConf)
|
||||
)}
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderStyle() {
|
||||
return html`
|
||||
<style>
|
||||
ha-card {
|
||||
padding: 16px;
|
||||
}
|
||||
#states {
|
||||
margin: -4px 0;
|
||||
}
|
||||
#states > * {
|
||||
margin: 4px 0;
|
||||
}
|
||||
#states > * {
|
||||
overflow: hidden;
|
||||
}
|
||||
.header {
|
||||
@apply --paper-font-headline;
|
||||
/* overwriting line-height +8 because entity-toggle can be 40px height,
|
||||
compensating this with reduced padding */
|
||||
line-height: 40px;
|
||||
color: var(--primary-text-color);
|
||||
padding: 4px 0 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header .name {
|
||||
@apply --paper-font-common-nowrap;
|
||||
}
|
||||
.state-card-dialog {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderEntity(entityConf) {
|
||||
const element = createRowElement(entityConf);
|
||||
element.hass = this._hass;
|
||||
if (
|
||||
entityConf.entity &&
|
||||
!DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityConf.entity))
|
||||
) {
|
||||
element.classList.add("state-card-dialog");
|
||||
element.addEventListener("click", () => this._handleClick(entityConf));
|
||||
}
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
private _handleClick(entityConf: ConfigEntity) {
|
||||
const entityId = entityConf.entity;
|
||||
|
||||
fireEvent(this, "hass-more-info", { entityId });
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"hui-entities-card": HuiEntitiesCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-entities-card", HuiEntitiesCard);
|
||||
@ -2,7 +2,7 @@ import { fireEvent } from "../../../common/dom/fire_event.js";
|
||||
|
||||
import "../cards/hui-alarm-panel-card.js";
|
||||
import "../cards/hui-conditional-card.ts";
|
||||
import "../cards/hui-entities-card.js";
|
||||
import "../cards/hui-entities-card.ts";
|
||||
import "../cards/hui-entity-button-card.ts";
|
||||
import "../cards/hui-entity-filter-card.js";
|
||||
import "../cards/hui-error-card.js";
|
||||
|
||||
28
src/panels/lovelace/entity-rows/types.ts
Normal file
28
src/panels/lovelace/entity-rows/types.ts
Normal file
@ -0,0 +1,28 @@
|
||||
import { HomeAssistant } from "../../../types";
|
||||
|
||||
export interface EntityConfig {
|
||||
entity: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
}
|
||||
export interface DividerConfig {
|
||||
style: string;
|
||||
}
|
||||
export interface SectionConfig {
|
||||
label: string;
|
||||
}
|
||||
export interface WeblinkConfig {
|
||||
name: string;
|
||||
icon: string;
|
||||
url: string;
|
||||
}
|
||||
export type EntityRowConfig =
|
||||
| EntityConfig
|
||||
| DividerConfig
|
||||
| SectionConfig
|
||||
| WeblinkConfig;
|
||||
|
||||
export interface EntityRow {
|
||||
hass: HomeAssistant;
|
||||
setConfig(config: EntityRowConfig);
|
||||
}
|
||||
@ -4,7 +4,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element.js";
|
||||
import computeUnusedEntities from "./common/compute-unused-entities.js";
|
||||
import createCardElement from "./common/create-card-element.js";
|
||||
|
||||
import "./cards/hui-entities-card.js";
|
||||
import "./cards/hui-entities-card.ts";
|
||||
|
||||
class HuiUnusedEntities extends PolymerElement {
|
||||
static get template() {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { HomeAssistant } from "../../types.js";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
export interface LovelaceConfig {
|
||||
type: string;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user