jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-03 14:37:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feedbacks

Browse Source
This commit is contained in:
Paul Bottein 2022-12-01 15:18:09 +01:00
parent 93e5a5966f
commit 9ccba6c9cd
No known key found for this signature in database
1 changed files with 37 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/dialogs/more-info/more-info-related-info.ts
View File

@ -5,6 +5,7 @@ import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import { computeStateDisplay } from "../../common/entity/compute_state_display"; import { computeStateDisplay } from "../../common/entity/compute_state_display";
import { stateActive } from "../../common/entity/state_active";
import { stateColor } from "../../common/entity/state_color"; import { stateColor } from "../../common/entity/state_color";
import { stateIconPath } from "../../common/entity/state_icon_path"; import { stateIconPath } from "../../common/entity/state_icon_path";
import "../../components/ha-chip"; import "../../components/ha-chip";
@ -24,17 +25,15 @@ class MoreInfoContent extends LitElement {
@property({ attribute: false }) public stateObj?: HassEntity; @property({ attribute: false }) public stateObj?: HassEntity;
private _relatedEntities = memoizeOne((entityId: string) => { private _deviceEntityEntries = memoizeOne((deviceId: string) => {
const deviceId = this.hass!.entities[entityId].device_id;
if (!deviceId) return []; if (!deviceId) return [];
return Object.values(this.hass!.entities).filter( return Object.values(this.hass!.entities).filter(
(entity) => (entity) =>
entity.device_id === deviceId && entity.device_id === deviceId &&
entity.entity_id !== entityId &&
!entity.hidden_by && !entity.hidden_by &&
!entity.disabled_by !entity.disabled_by &&
!entity.entity_category
); );
}); });
@ -47,22 +46,47 @@ class MoreInfoContent extends LitElement {
if (!this.hass || !this.stateObj) { if (!this.hass || !this.stateObj) {
return null; return null;
} }
const deviceId = this.hass!.entities[this.stateObj.entity_id].device_id;
const relatedEntities = this._relatedEntities(this.stateObj.entity_id); if (!deviceId) {
return null;
}
const deviceEntityEntries = this._deviceEntityEntries(deviceId);
const deviceEntities = deviceEntityEntries
.map((entry) => this.hass!.states[entry.entity_id])
.filter(Boolean);
const displayedEntities = deviceEntities.filter(
(entity) => entity.entity_id !== this.stateObj!.entity_id
);
// Do not display device entities if the current entity is not inside
if (displayedEntities.length === deviceEntities.length) {
return null;
}
return html` return html`
<div class="container"> <div class="container">
${relatedEntities.map((entry) => { ${displayedEntities.map((entity) => {
const entity = this.hass!.states[entry.entity_id];
const icon = entity.attributes.icon; const icon = entity.attributes.icon;
const iconPath = stateIconPath(entity); const iconPath = stateIconPath(entity);
const state = computeStateDisplay( const state = computeStateDisplay(
this.hass!.localize, this.hass!.localize,
entity, entity,
this.hass!.locale this.hass!.locale,
this.hass!.entities
); );
const color = stateColor(entity); const color = stateColor(entity);
const active = stateActive(entity);
const iconStyle = styleMap({
"--icon-color":
color && active
? `rgb(var(--rgb-state-${color}-color))`
: undefined,
});
return html` return html`
<button <button
@ -71,16 +95,12 @@ class MoreInfoContent extends LitElement {
@click=${this._handleChipClick} @click=${this._handleChipClick}
.entityId=${entity.entity_id} .entityId=${entity.entity_id}
.title=${entity.attributes.friendly_name} .title=${entity.attributes.friendly_name}
style=${styleMap({ style=${iconStyle}
"--icon-color": color
? `rgb(var(--rgb-state-${color}-color))`
: undefined,
})}
> >
${icon ${icon
? html`<ha-icon slot="icon" icon=${icon}></ha-icon>` ? html`<ha-icon slot="icon" .icon=${icon}></ha-icon>`
: html` : html`
<ha-svg-icon slot="icon" path=${iconPath}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${iconPath}></ha-svg-icon>
`} `}
${state} ${state}
</button> </button>