mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-18 23:06:40 +00:00
Clean up device card (#4108)
This commit is contained in:
Bram Kragten
Paulus Schoutsen
parent
0792278927
commit
e435b9153b
@ -1,157 +0,0 @@
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
|
||||
import "../../../../components/ha-card";
|
||||
|
||||
import { EventsMixin } from "../../../../mixins/events-mixin";
|
||||
import LocalizeMixin from "../../../../mixins/localize-mixin";
|
||||
import { compare } from "../../../../common/string/compare";
|
||||
import { updateDeviceRegistryEntry } from "../../../../data/device_registry";
|
||||
import {
|
||||
loadDeviceRegistryDetailDialog,
|
||||
showDeviceRegistryDetailDialog,
|
||||
} from "../../../../dialogs/device-registry-detail/show-dialog-device-registry-detail";
|
||||
|
||||
/*
|
||||
* @appliesMixin EventsMixin
|
||||
*/
|
||||
class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
||||
static get template() {
|
||||
return html`
|
||||
<style>
|
||||
ha-card {
|
||||
flex: 1 0 100%;
|
||||
padding-bottom: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.card-header .name {
|
||||
width: 90%;
|
||||
}
|
||||
.device {
|
||||
width: 30%;
|
||||
}
|
||||
.device .name {
|
||||
font-weight: bold;
|
||||
}
|
||||
.device .model,
|
||||
.device .manuf,
|
||||
.device .area {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
.area .extra-info .name {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
.extra-info {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.manuf,
|
||||
.entity-id,
|
||||
.area {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
</style>
|
||||
<ha-card>
|
||||
<div class="card-content">
|
||||
<div class="info">
|
||||
<div class="model">[[device.model]]</div>
|
||||
<div class="manuf">
|
||||
[[localize('ui.panel.config.integrations.config_entry.manuf',
|
||||
'manufacturer', device.manufacturer)]]
|
||||
</div>
|
||||
<template is="dom-if" if="[[device.area_id]]">
|
||||
<div class="area">
|
||||
<div class="extra-info">
|
||||
[[localize('ui.panel.config.integrations.device_registry.area')]]
|
||||
<span class="name">{{_computeArea(areas, device)}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<template is="dom-if" if="[[device.via_device_id]]">
|
||||
<div class="extra-info">
|
||||
[[localize('ui.panel.config.integrations.config_entry.via')]]
|
||||
<span class="hub"
|
||||
>[[_computeDeviceName(devices, device.via_device_id)]]</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<template is="dom-if" if="[[device.sw_version]]">
|
||||
<div class="extra-info">
|
||||
[[localize('ui.panel.config.integrations.config_entry.firmware',
|
||||
'version', device.sw_version)]]
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
device: Object,
|
||||
devices: Array,
|
||||
areas: Array,
|
||||
hass: Object,
|
||||
narrow: {
|
||||
type: Boolean,
|
||||
reflectToAttribute: true,
|
||||
},
|
||||
_childDevices: {
|
||||
type: Array,
|
||||
computed: "_computeChildDevices(device, devices)",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
firstUpdated(changedProps) {
|
||||
super.firstUpdated(changedProps);
|
||||
loadDeviceRegistryDetailDialog();
|
||||
}
|
||||
|
||||
_computeArea(areas, device) {
|
||||
if (!areas || !device || !device.area_id) {
|
||||
return "No Area";
|
||||
}
|
||||
// +1 because of "No Area" entry
|
||||
return areas.find((area) => area.area_id === device.area_id).name;
|
||||
}
|
||||
|
||||
_computeChildDevices(device, devices) {
|
||||
return devices
|
||||
.filter((dev) => dev.via_device_id === device.id)
|
||||
.sort((dev1, dev2) => compare(dev1.name, dev2.name));
|
||||
}
|
||||
|
||||
_deviceName(device) {
|
||||
return device.name_by_user || device.name;
|
||||
}
|
||||
|
||||
_computeDeviceName(devices, deviceId) {
|
||||
const device = devices.find((dev) => dev.id === deviceId);
|
||||
return device
|
||||
? this._deviceName(device)
|
||||
: `(${this.localize(
|
||||
"ui.panel.config.integrations.config_entry.device_unavailable"
|
||||
)})`;
|
||||
}
|
||||
|
||||
_gotoSettings() {
|
||||
const device = this.device;
|
||||
showDeviceRegistryDetailDialog(this, {
|
||||
device,
|
||||
updateEntry: async (updates) => {
|
||||
await updateDeviceRegistryEntry(this.hass, device.id, updates);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
_openMoreInfo(ev) {
|
||||
this.fire("hass-more-info", { entityId: ev.model.entity.entity_id });
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-device-card", HaDeviceCard);
|
||||
132
src/panels/config/devices/device-detail/ha-device-card.ts
Normal file
132
src/panels/config/devices/device-detail/ha-device-card.ts
Normal file
@ -0,0 +1,132 @@
|
||||
import "../../../../components/ha-card";
|
||||
|
||||
import { DeviceRegistryEntry } from "../../../../data/device_registry";
|
||||
import { loadDeviceRegistryDetailDialog } from "../../../../dialogs/device-registry-detail/show-dialog-device-registry-detail";
|
||||
import {
|
||||
LitElement,
|
||||
html,
|
||||
customElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
CSSResult,
|
||||
css,
|
||||
} from "lit-element";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { AreaRegistryEntry } from "../../../../data/area_registry";
|
||||
|
||||
@customElement("ha-device-card")
|
||||
export class HaDeviceCard extends LitElement {
|
||||
@property() public hass!: HomeAssistant;
|
||||
@property() public device!: DeviceRegistryEntry;
|
||||
@property() public devices!: DeviceRegistryEntry[];
|
||||
@property() public areas!: AreaRegistryEntry[];
|
||||
@property() public narrow!: boolean;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<ha-card>
|
||||
<div class="card-content">
|
||||
<div class="info">
|
||||
<div class="model">${this.device.model}</div>
|
||||
<div class="manuf">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.integrations.config_entry.manuf",
|
||||
"manufacturer",
|
||||
this.device.manufacturer
|
||||
)}
|
||||
</div>
|
||||
${this.device.area_id
|
||||
? html`
|
||||
<div class="area">
|
||||
<div class="extra-info">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.integrations.config_entry.area",
|
||||
"area",
|
||||
this._computeArea(this.areas, this.device)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
${this.device.via_device_id
|
||||
? html`
|
||||
<div class="extra-info">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.integrations.config_entry.via"
|
||||
)}
|
||||
<span class="hub"
|
||||
>${this._computeDeviceName(
|
||||
this.devices,
|
||||
this.device.via_device_id
|
||||
)}</span
|
||||
>
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
${this.device.sw_version
|
||||
? html`
|
||||
<div class="extra-info">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.integrations.config_entry.firmware",
|
||||
"version",
|
||||
this.device.sw_version
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
protected firstUpdated(changedProps) {
|
||||
super.firstUpdated(changedProps);
|
||||
loadDeviceRegistryDetailDialog();
|
||||
}
|
||||
|
||||
private _computeArea(areas, device) {
|
||||
if (!areas || !device || !device.area_id) {
|
||||
return "No Area";
|
||||
}
|
||||
// +1 because of "No Area" entry
|
||||
return areas.find((area) => area.area_id === device.area_id).name;
|
||||
}
|
||||
|
||||
private _deviceName(device) {
|
||||
return device.name_by_user || device.name;
|
||||
}
|
||||
|
||||
private _computeDeviceName(devices, deviceId) {
|
||||
const device = devices.find((dev) => dev.id === deviceId);
|
||||
return device
|
||||
? this._deviceName(device)
|
||||
: `(${this.hass.localize(
|
||||
"ui.panel.config.integrations.config_entry.device_unavailable"
|
||||
)})`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
ha-card {
|
||||
flex: 1 0 100%;
|
||||
padding-bottom: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
.device {
|
||||
width: 30%;
|
||||
}
|
||||
.area {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
.extra-info {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.manuf,
|
||||
.entity-id,
|
||||
.model {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -62,6 +62,7 @@ export class HaDeviceEntitiesCard extends LitElement {
|
||||
${stateObj
|
||||
? html`
|
||||
<state-badge
|
||||
@click=${this._openMoreInfo}
|
||||
.stateObj=${stateObj}
|
||||
slot="item-icon"
|
||||
></state-badge>
|
||||
@ -72,7 +73,7 @@ export class HaDeviceEntitiesCard extends LitElement {
|
||||
.icon=${domainIcon(computeDomain(entry.entity_id))}
|
||||
></ha-icon>
|
||||
`}
|
||||
<paper-item-body two-line>
|
||||
<paper-item-body two-line @click=${this._openMoreInfo}>
|
||||
<div class="name">${entry.stateName}</div>
|
||||
<div class="secondary entity-id">${entry.entity_id}</div>
|
||||
</paper-item-body>
|
||||
@ -139,6 +140,12 @@ export class HaDeviceEntitiesCard extends LitElement {
|
||||
.disabled-entry {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
state-badge {
|
||||
cursor: pointer;
|
||||
}
|
||||
paper-icon-item:not(.disabled-entry) paper-item-body {
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1204,6 +1204,7 @@
|
||||
"firmware": "Firmware: {version}",
|
||||
"device_unavailable": "device unavailable",
|
||||
"entity_unavailable": "entity unavailable",
|
||||
"area": "In {area}",
|
||||
"no_area": "No Area"
|
||||
},
|
||||
"config_flow": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user