diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index b7e3d289c7..fcd317f207 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/src/dialogs/more-info/ha-more-info-dialog.ts @@ -62,6 +62,11 @@ export class MoreInfoDialog extends LitElement { fireEvent(this, "dialog-closed", { dialog: this.localName }); } + private _relatedEntityClicked(ev: CustomEvent) { + ev.stopPropagation(); + this._entityId = ev.detail.entityId; + } + protected shouldShowEditIcon( domain: string, stateObj: HassEntity | undefined @@ -160,6 +165,7 @@ export class MoreInfoDialog extends LitElement { ` : this._currTab === "history" diff --git a/src/dialogs/more-info/ha-more-info-history.ts b/src/dialogs/more-info/ha-more-info-history.ts index 73061a09b9..8bbb3905aa 100644 --- a/src/dialogs/more-info/ha-more-info-history.ts +++ b/src/dialogs/more-info/ha-more-info-history.ts @@ -94,7 +94,7 @@ export class MoreInfoHistory extends LitElement { this.entityId }&start_date=${startOfYesterday().toISOString()}`; - this._throttleGetStateHistory(); + this._getStateHistory(); return; } diff --git a/src/dialogs/more-info/ha-more-info-info.ts b/src/dialogs/more-info/ha-more-info-info.ts index 005cf6278b..0c2e248019 100644 --- a/src/dialogs/more-info/ha-more-info-info.ts +++ b/src/dialogs/more-info/ha-more-info-info.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { computeDomain } from "../../common/entity/compute_domain"; import { subscribeOne } from "../../common/util/subscribe-one"; @@ -15,6 +15,7 @@ import { } from "./const"; import "./ha-more-info-history"; import "./ha-more-info-logbook"; +import "./more-info-related-info"; @customElement("ha-more-info-info") export class MoreInfoInfo extends LitElement { @@ -74,6 +75,8 @@ export class MoreInfoInfo extends LitElement { .stateObj=${stateObj} .hass=${this.hass} > + + `; } diff --git a/src/dialogs/more-info/more-info-related-info.ts b/src/dialogs/more-info/more-info-related-info.ts new file mode 100644 index 0000000000..97f5a76b51 --- /dev/null +++ b/src/dialogs/more-info/more-info-related-info.ts @@ -0,0 +1,122 @@ +import { HassEntity } from "home-assistant-js-websocket"; +import { css, html, LitElement, TemplateResult } from "lit"; +import { customElement, property } from "lit/decorators"; +import memoizeOne from "memoize-one"; +import { fireEvent } from "../../common/dom/fire_event"; +import { computeStateDisplay } from "../../common/entity/compute_state_display"; +import { stateIconPath } from "../../common/entity/state_icon_path"; +import "../../components/ha-chip"; +import "../../components/ha-chip-set"; +import "../../components/ha-icon"; +import { HomeAssistant } from "../../types"; + +declare global { + interface HASSDomEvents { + "related-entity": { entityId: string }; + } +} + +@customElement("more-info-related-info") +class MoreInfoContent extends LitElement { + @property({ attribute: false }) public hass?: HomeAssistant; + + @property({ attribute: false }) public stateObj?: HassEntity; + + private _relatedEntities = memoizeOne((entityId: string) => { + const deviceId = this.hass!.entities[entityId].device_id; + + if (!deviceId) return []; + + return Object.values(this.hass!.entities).filter( + (entity) => + entity.device_id === deviceId && + entity.entity_id !== entityId && + !entity.hidden_by && + !entity.disabled_by + ); + }); + + private _handleChipClick(ev: Event) { + const entityId = (ev.target as any).entityId as string; + fireEvent(this, "related-entity", { entityId }); + } + + protected render(): TemplateResult | null { + if (!this.hass || !this.stateObj) { + return null; + } + + const relatedEntities = this._relatedEntities(this.stateObj.entity_id); + + return html` +
+ ${relatedEntities.map((entry) => { + const entity = this.hass!.states[entry.entity_id]; + + const icon = entity.attributes.icon; + const iconPath = stateIconPath(entity); + const state = computeStateDisplay( + this.hass!.localize, + entity, + this.hass!.locale + ); + + return html` + + `; + })} +
+ `; + } + + static get styles() { + return css` + .container { + margin-bottom: 8px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: row; + flex-wrap: wrap; + } + .container > * { + margin: 4px; + } + .chip { + border: 1px solid var(--secondary-text-color); + border-radius: 8px; + cursor: pointer; + background: none; + color: var(--primary-text-color); + padding: 6px 16px 6px 8px; + font-weight: 500; + font-size: 14px; + line-height: 20px; + } + .chip ha-icon, + .chip ha-svg-icon { + pointer-events: none; + --mdc-icon-size: 18px; + color: rgb(var(--rgb-primary-color)); + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "more-info-related-info": MoreInfoContent; + } +}