jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 09:16:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move entities to center column on device page (#10412)

Browse Source
This commit is contained in:
Paulus Schoutsen 2021-10-26 12:48:05 -07:00 committed by GitHub
parent 06b1718ade
commit 6c5e15e707
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 93 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/panels/config/devices/device-detail/ha-device-entities-card.ts
View File

@ -105,14 +105,8 @@ export class HaDeviceEntitiesCard extends LitElement {
</div> </div>
` `
: html` : html`
<div class="config-entry-row"> <div class="empty card-content">
<paper-item-body two-line> ${this.hass.localize("ui.panel.config.devices.entities.none")}
<div>
${this.hass.localize(
"ui.panel.config.devices.entities.none"
)}
</div>
</paper-item-body>
</div> </div>
`} `}
</ha-card> </ha-card>
@ -228,6 +222,9 @@ export class HaDeviceEntitiesCard extends LitElement {
.name { .name {
font-size: 14px; font-size: 14px;
} }
.empty {
text-align: center;
}
button.show-more { button.show-more {
color: var(--primary-color); color: var(--primary-color);
text-align: left; text-align: left;

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

@ -52,6 +52,7 @@ 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;
@ -117,14 +118,19 @@ export class HaConfigDevicePage extends LitElement {
private _entitiesByCategory = memoizeOne( private _entitiesByCategory = memoizeOne(
(entities: EntityRegistryEntry[]) => { (entities: EntityRegistryEntry[]) => {
const result = groupBy( const result = groupBy(entities, (entry) =>
entities, entry.entity_category
(entry) => entry.entity_category || "state" ? entry.entity_category
: ["sensor", "binary_sensor"].includes(computeDomain(entry.entity_id))
? "sensor"
: "control"
) as Record< ) as Record<
"state" | NonNullable<EntityRegistryEntry["entity_category"]>, | "control"
| "sensor"
| NonNullable<EntityRegistryEntry["entity_category"]>,
EntityRegistryStateEntry[] EntityRegistryStateEntry[]
>; >;
for (const key of ["state", "diagnostic", "config"]) { for (const key of ["control", "sensor", "diagnostic", "config"]) {
if (!(key in result)) { if (!(key in result)) {
result[key] = []; result[key] = [];
} }
@ -351,11 +357,13 @@ export class HaConfigDevicePage extends LitElement {
} }
${this._renderIntegrationInfo(device, integrations)} ${this._renderIntegrationInfo(device, integrations)}
</ha-device-info-card> </ha-device-info-card>
</div>
${["state", "config", "diagnostic"].map((category) => <div class="column">
!entitiesByCategory[category].length ${["control", "sensor", "config", "diagnostic"].map((category) =>
? "" // Make sure we render controls if no other cards will be rendered
: html` entitiesByCategory[category].length > 0 ||
(entities.length === 0 && category === "control")
? html`
<ha-device-entities-card <ha-device-entities-card
.hass=${this.hass} .hass=${this.hass}
.header=${this.hass.localize( .header=${this.hass.localize(
@ -367,10 +375,10 @@ export class HaConfigDevicePage extends LitElement {
> >
</ha-device-entities-card> </ha-device-entities-card>
` `
: ""
)} )}
</div> </div>
<div class="column"> <div class="column">
${ ${
isComponentLoaded(this.hass, "automation") isComponentLoaded(this.hass, "automation")
? html` ? html`
@ -443,86 +451,76 @@ export class HaConfigDevicePage extends LitElement {
` `
: "" : ""
} }
</div>
<div class="column">
${ ${
isComponentLoaded(this.hass, "scene") && entities.length isComponentLoaded(this.hass, "scene") && entities.length
? html` ? html`
<ha-card> <ha-card>
<h1 class="card-header"> <h1 class="card-header">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.scene.scenes" "ui.panel.config.devices.scene.scenes"
)} )}
<ha-icon-button @click=${ <ha-icon-button
this._createScene @click=${this._createScene}
} .disabled=${device.disabled_by} .disabled=${device.disabled_by}
.label=${ .label=${device.disabled_by
device.disabled_by ? this.hass.localize(
? this.hass.localize( "ui.panel.config.devices.scene.create_disabled"
"ui.panel.config.devices.scene.create_disabled" )
) : this.hass.localize(
: this.hass.localize( "ui.panel.config.devices.scene.create"
"ui.panel.config.devices.scene.create" )}
) .path=${mdiPlusCircle}
} ></ha-icon-button>
.path=${mdiPlusCircle} </h1>
></ha-icon-button>
</h1>
${ ${this._related?.scene?.length
this._related?.scene?.length ? this._related.scene.map((scene) => {
? this._related.scene.map((scene) => { const entityState = this.hass.states[scene];
const entityState = this.hass.states[scene]; return entityState
return entityState ? html`
? html` <div>
<div> <a
<a href=${ifDefined(
href=${ifDefined( entityState.attributes.id
entityState.attributes.id ? `/config/scene/edit/${entityState.attributes.id}`
? `/config/scene/edit/${entityState.attributes.id}` : undefined
: undefined )}
)} >
> <paper-item
<paper-item .scene=${entityState}
.scene=${entityState} .disabled=${!entityState.attributes.id}
.disabled=${!entityState.attributes >
.id} <paper-item-body>
> ${computeStateName(entityState)}
<paper-item-body> </paper-item-body>
${computeStateName(entityState)} <ha-icon-next></ha-icon-next>
</paper-item-body> </paper-item>
<ha-icon-next></ha-icon-next> </a>
</paper-item> ${!entityState.attributes.id
</a> ? html`
${!entityState.attributes.id <paper-tooltip animation-delay="0">
? html` ${this.hass.localize(
<paper-tooltip "ui.panel.config.devices.cant_edit"
animation-delay="0" )}
> </paper-tooltip>
${this.hass.localize( `
"ui.panel.config.devices.cant_edit" : ""}
)} </div>
</paper-tooltip> `
` : "";
: ""} })
</div> : html`
` <div class="card-content">
: ""; ${this.hass.localize(
}) "ui.panel.config.devices.add_prompt",
: html` "name",
<div class="card-content"> this.hass.localize(
${this.hass.localize( "ui.panel.config.devices.scene.scenes"
"ui.panel.config.devices.add_prompt", )
"name", )}
this.hass.localize( </div>
"ui.panel.config.devices.scene.scenes" `}
)
)}
</div>
`
}
</ha-card>
</ha-card> </ha-card>
` `
: "" : ""
@ -582,7 +580,7 @@ export class HaConfigDevicePage extends LitElement {
: "" : ""
} }
</div> </div>
</div> </div>
</ha-config-section> </ha-config-section>
</hass-tabs-subpage> `; </hass-tabs-subpage> `;
} }

5
src/translations/en.json
View File

@ -2175,9 +2175,10 @@
"device_not_found": "Device not found.", "device_not_found": "Device not found.",
"entities": { "entities": {
"entities": "Entities", "entities": "Entities",
"state": "State", "control": "Controls",
"sensor": "Sensors",
"diagnostic": "Diagnostic", "diagnostic": "Diagnostic",
"config": "Config", "config": "Configuration",
"add_entities_lovelace": "Add to Lovelace", "add_entities_lovelace": "Add to Lovelace",
"none": "This device has no entities", "none": "This device has no entities",
"hide_disabled": "Hide disabled", "hide_disabled": "Hide disabled",