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

201
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,41 +407,45 @@ 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) => { ? html`
const entityState = this.hass.states[automation]; <div class="items">
return entityState ${this._related.automation.map((automation) => {
? html` const entityState =
<div> this.hass.states[automation];
<a return entityState
href=${ifDefined( ? html`<div>
entityState.attributes.id <a
? `/config/automation/edit/${entityState.attributes.id}` href=${ifDefined(
: undefined entityState.attributes.id
)} ? `/config/automation/edit/${entityState.attributes.id}`
> : undefined
<paper-item )}
.automation=${entityState}
.disabled=${!entityState.attributes.id}
> >
<paper-item-body> <paper-item
${computeStateName(entityState)} .automation=${entityState}
</paper-item-body> .disabled=${!entityState.attributes
<ha-icon-next></ha-icon-next> .id}
</paper-item> >
</a> <paper-item-body>
${!entityState.attributes.id ${computeStateName(entityState)}
? html` </paper-item-body>
<paper-tooltip animation-delay="0"> <ha-icon-next></ha-icon-next>
${this.hass.localize( </paper-item>
"ui.panel.config.devices.cant_edit" </a>
)} ${!entityState.attributes.id
</paper-tooltip> ? html`
` <paper-tooltip animation-delay="0">
: ""} ${this.hass.localize(
</div> "ui.panel.config.devices.cant_edit"
` )}
: ""; </paper-tooltip>
}) `
: ""}
</div> `
: "";
})}
</div>
`
: html` : html`
<div class="card-content"> <div class="card-content">
${this.hass.localize( ${this.hass.localize(
@ -479,43 +483,49 @@ 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`
const entityState = this.hass.states[scene]; <div class="items">
return entityState ${this._related.scene.map((scene) => {
? html` const entityState = this.hass.states[scene];
<div> return entityState
<a ? html`
href=${ifDefined( <div>
entityState.attributes.id <a
? `/config/scene/edit/${entityState.attributes.id}` href=${ifDefined(
: undefined entityState.attributes.id
)} ? `/config/scene/edit/${entityState.attributes.id}`
> : undefined
<paper-item )}
.scene=${entityState} >
.disabled=${!entityState.attributes.id} <paper-item
> .scene=${entityState}
<paper-item-body> .disabled=${!entityState.attributes
${computeStateName(entityState)} .id}
</paper-item-body> >
<ha-icon-next></ha-icon-next> <paper-item-body>
</paper-item> ${computeStateName(entityState)}
</a> </paper-item-body>
${!entityState.attributes.id <ha-icon-next></ha-icon-next>
? html` </paper-item>
<paper-tooltip animation-delay="0"> </a>
${this.hass.localize( ${!entityState.attributes.id
"ui.panel.config.devices.cant_edit" ? html`
)} <paper-tooltip
</paper-tooltip> animation-delay="0"
` >
: ""} ${this.hass.localize(
</div> "ui.panel.config.devices.cant_edit"
` )}
: ""; </paper-tooltip>
}) `
: ""}
</div>
`
: "";
})}
</div>
`
: html` : html`
<div class="card-content"> <div class="card-content">
${this.hass.localize( ${this.hass.localize(
@ -553,23 +563,27 @@ 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`
const entityState = this.hass.states[script]; <div class="items">
return entityState ${this._related.script.map((script) => {
? html` const entityState = this.hass.states[script];
<a return entityState
href=${`/config/script/edit/${entityState.entity_id}`} ? html`
> <a
<paper-item .script=${script}> href=${`/config/script/edit/${entityState.entity_id}`}
<paper-item-body> >
${computeStateName(entityState)} <paper-item .script=${script}>
</paper-item-body> <paper-item-body>
<ha-icon-next></ha-icon-next> ${computeStateName(entityState)}
</paper-item> </paper-item-body>
</a> <ha-icon-next></ha-icon-next>
` </paper-item>
: ""; </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;
}
`, `,
]; ];
} }