jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-14 04:46:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Device Page (#10513)

Browse Source
This commit is contained in:
Zack Barett 2021-11-04 04:41:30 -05:00 committed by GitHub
parent c8804160bf
commit 1c35571ef0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 110 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/panels/config/devices/ha-config-device-page.ts
View File

@ -1,19 +1,20 @@
import { mdiPencil, mdiPlusCircle, mdiOpenInNew } from "@mdi/js"; import { mdiOpenInNew, mdiPencil, mdiPlusCircle } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip"; import "@polymer/paper-tooltip/paper-tooltip";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { computeDomain } from "../../../common/entity/compute_domain";
import { computeStateDomain } from "../../../common/entity/compute_state_domain"; import { computeStateDomain } from "../../../common/entity/compute_state_domain";
import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeStateName } from "../../../common/entity/compute_state_name";
import { stringCompare } from "../../../common/string/compare"; import { stringCompare } from "../../../common/string/compare";
import { groupBy } from "../../../common/util/group-by";
import { slugify } from "../../../common/string/slugify"; import { slugify } from "../../../common/string/slugify";
import { groupBy } from "../../../common/util/group-by";
import "../../../components/entity/ha-battery-icon"; import "../../../components/entity/ha-battery-icon";
import "../../../components/ha-alert";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-icon-next"; import "../../../components/ha-icon-next";
import "../../../components/ha-alert";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import { AreaRegistryEntry } from "../../../data/area_registry"; import { AreaRegistryEntry } from "../../../data/area_registry";
import { import {
@ -52,7 +53,6 @@ import {
loadDeviceRegistryDetailDialog, loadDeviceRegistryDetailDialog,
showDeviceRegistryDetailDialog, showDeviceRegistryDetailDialog,
} from "./device-registry-detail/show-dialog-device-registry-detail"; } from "./device-registry-detail/show-dialog-device-registry-detail";
import { computeDomain } from "../../../common/entity/compute_domain";
export interface EntityRegistryStateEntry extends EntityRegistryEntry { export interface EntityRegistryStateEntry extends EntityRegistryEntry {
stateName?: string | null; stateName?: string | null;
@ -407,11 +407,13 @@ export class HaConfigDevicePage extends LitElement {
></ha-icon-button> ></ha-icon-button>
</h1> </h1>
${this._related?.automation?.length ${this._related?.automation?.length
? this._related.automation.map((automation) => {
const entityState = this.hass.states[automation];
return entityState
? html` ? html`
<div> <div class="items">
${this._related.automation.map((automation) => {
const entityState =
this.hass.states[automation];
return entityState
? html`<div>
<a <a
href=${ifDefined( href=${ifDefined(
entityState.attributes.id entityState.attributes.id
@ -421,7 +423,8 @@ export class HaConfigDevicePage extends LitElement {
> >
<paper-item <paper-item
.automation=${entityState} .automation=${entityState}
.disabled=${!entityState.attributes.id} .disabled=${!entityState.attributes
.id}
> >
<paper-item-body> <paper-item-body>
${computeStateName(entityState)} ${computeStateName(entityState)}
@ -438,10 +441,11 @@ export class HaConfigDevicePage extends LitElement {
</paper-tooltip> </paper-tooltip>
` `
: ""} : ""}
</div> `
: "";
})}
</div> </div>
` `
: "";
})
: html` : html`
<div class="card-content"> <div class="card-content">
${this.hass.localize( ${this.hass.localize(
@ -479,9 +483,10 @@ export class HaConfigDevicePage extends LitElement {
.path=${mdiPlusCircle} .path=${mdiPlusCircle}
></ha-icon-button> ></ha-icon-button>
</h1> </h1>
${this._related?.scene?.length ${this._related?.scene?.length
? this._related.scene.map((scene) => { ? html`
<div class="items">
${this._related.scene.map((scene) => {
const entityState = this.hass.states[scene]; const entityState = this.hass.states[scene];
return entityState return entityState
? html` ? html`
@ -495,7 +500,8 @@ export class HaConfigDevicePage extends LitElement {
> >
<paper-item <paper-item
.scene=${entityState} .scene=${entityState}
.disabled=${!entityState.attributes.id} .disabled=${!entityState.attributes
.id}
> >
<paper-item-body> <paper-item-body>
${computeStateName(entityState)} ${computeStateName(entityState)}
@ -505,7 +511,9 @@ export class HaConfigDevicePage extends LitElement {
</a> </a>
${!entityState.attributes.id ${!entityState.attributes.id
? html` ? html`
<paper-tooltip animation-delay="0"> <paper-tooltip
animation-delay="0"
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.cant_edit" "ui.panel.config.devices.cant_edit"
)} )}
@ -515,7 +523,9 @@ export class HaConfigDevicePage extends LitElement {
</div> </div>
` `
: ""; : "";
}) })}
</div>
`
: html` : html`
<div class="card-content"> <div class="card-content">
${this.hass.localize( ${this.hass.localize(
@ -553,7 +563,9 @@ export class HaConfigDevicePage extends LitElement {
></ha-icon-button> ></ha-icon-button>
</h1> </h1>
${this._related?.script?.length ${this._related?.script?.length
? this._related.script.map((script) => { ? html`
<div class="items">
${this._related.script.map((script) => {
const entityState = this.hass.states[script]; const entityState = this.hass.states[script];
return entityState return entityState
? html` ? html`
@ -569,7 +581,9 @@ export class HaConfigDevicePage extends LitElement {
</a> </a>
` `
: ""; : "";
}) })}
</div>
`
: html` : html`
<div class="card-content"> <div class="card-content">
${this.hass.localize( ${this.hass.localize(
@ -869,6 +883,7 @@ export class HaConfigDevicePage extends LitElement {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-bottom: 12px;
} }
.card-header ha-icon-button { .card-header ha-icon-button {
@ -978,6 +993,10 @@ export class HaConfigDevicePage extends LitElement {
ha-svg-icon[slot="trailingIcon"] { ha-svg-icon[slot="trailingIcon"] {
display: block; display: block;
} }
.items {
padding-bottom: 16px;
}
`, `,
]; ];
} }