Add dedicated more info for no state entity
This commit is contained in:
parent
f803bbadc9
commit
8805ddc76f
|
@ -13,6 +13,7 @@ import {
|
|||
import "./ha-more-info-history";
|
||||
import "./ha-more-info-logbook";
|
||||
import "./more-info-content";
|
||||
import "./more-info-no-state";
|
||||
|
||||
@customElement("ha-more-info-info")
|
||||
export class MoreInfoInfo extends LitElement {
|
||||
|
@ -23,29 +24,20 @@ export class MoreInfoInfo extends LitElement {
|
|||
protected render() {
|
||||
const entityId = this.entityId;
|
||||
const stateObj = this.hass.states[entityId] as HassEntity | undefined;
|
||||
const entityRegObj = this.hass.entities[entityId];
|
||||
const domain = computeDomain(entityId);
|
||||
const isNewMoreInfo = stateObj && computeShowNewMoreInfo(stateObj);
|
||||
|
||||
if (!stateObj) {
|
||||
return html`
|
||||
<more-info-no-state
|
||||
.entityId=${entityId}
|
||||
.hass=${this.hass}
|
||||
></more-info-no-state>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="container" data-domain=${domain}>
|
||||
${!stateObj
|
||||
? html`<ha-alert alert-type="warning">
|
||||
${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.unavailable"
|
||||
)}
|
||||
</ha-alert>`
|
||||
: ""}
|
||||
${stateObj?.attributes.restored && entityRegObj
|
||||
? html`<ha-alert alert-type="warning">
|
||||
${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.restored.no_longer_provided",
|
||||
{
|
||||
integration: entityRegObj.platform,
|
||||
}
|
||||
)}
|
||||
</ha-alert>`
|
||||
: ""}
|
||||
<div class="content">
|
||||
${DOMAINS_NO_INFO.includes(domain) || isNewMoreInfo
|
||||
? ""
|
||||
|
@ -75,7 +67,6 @@ export class MoreInfoInfo extends LitElement {
|
|||
.stateObj=${stateObj}
|
||||
.hass=${this.hass}
|
||||
></more-info-content>
|
||||
<div class="toto"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
@ -0,0 +1,194 @@
|
|||
import "@material/mwc-button/mwc-button";
|
||||
import { mdiExclamationThick } from "@mdi/js";
|
||||
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import { css, html, LitElement, nothing } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import memoizeOne from "memoize-one";
|
||||
import "../../components/ha-svg-icon";
|
||||
import {
|
||||
DeviceRegistryEntry,
|
||||
subscribeDeviceRegistry,
|
||||
updateDeviceRegistryEntry,
|
||||
} from "../../data/device_registry";
|
||||
import {
|
||||
EntityRegistryEntry,
|
||||
subscribeEntityRegistry,
|
||||
updateEntityRegistryEntry,
|
||||
} from "../../data/entity_registry";
|
||||
import { SubscribeMixin } from "../../mixins/subscribe-mixin";
|
||||
import { showDeviceRegistryDetailDialog } from "../../panels/config/devices/device-registry-detail/show-dialog-device-registry-detail";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import { showAlertDialog } from "../generic/show-dialog-box";
|
||||
|
||||
@customElement("more-info-no-state")
|
||||
export class MoreInfoNoState extends SubscribeMixin(LitElement) {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property() public entityId!: string;
|
||||
|
||||
@state() private _devices?: DeviceRegistryEntry[];
|
||||
|
||||
@state() private _entities?: EntityRegistryEntry[];
|
||||
|
||||
public hassSubscribe(): UnsubscribeFunc[] {
|
||||
return [
|
||||
subscribeDeviceRegistry(this.hass.connection, (devices) => {
|
||||
this._devices = devices;
|
||||
}),
|
||||
subscribeEntityRegistry(this.hass.connection!, (entities) => {
|
||||
this._entities = entities;
|
||||
}),
|
||||
];
|
||||
}
|
||||
|
||||
private getDeviceEntry = memoizeOne(
|
||||
(
|
||||
deviceId: string,
|
||||
devices?: DeviceRegistryEntry[]
|
||||
): DeviceRegistryEntry | undefined =>
|
||||
devices?.find((device) => device.id === deviceId)
|
||||
);
|
||||
|
||||
private getEntityEntry = memoizeOne(
|
||||
(
|
||||
entityId: string,
|
||||
entities?: EntityRegistryEntry[]
|
||||
): EntityRegistryEntry | undefined =>
|
||||
entities?.find((entity) => entity.entity_id === entityId)
|
||||
);
|
||||
|
||||
private _openDeviceSettings() {
|
||||
const entity = this.getEntityEntry(this.entityId, this._entities);
|
||||
|
||||
if (!entity?.device_id) return;
|
||||
const device = this.getDeviceEntry(entity.device_id, this._devices);
|
||||
|
||||
if (!device) return;
|
||||
|
||||
showDeviceRegistryDetailDialog(this, {
|
||||
device: device,
|
||||
updateEntry: async (updates) => {
|
||||
await updateDeviceRegistryEntry(this.hass, device.id, updates);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
private async _enableEntry() {
|
||||
const entity = this.getEntityEntry(this.entityId, this._entities);
|
||||
if (!entity) return;
|
||||
|
||||
const result = await updateEntityRegistryEntry(
|
||||
this.hass!,
|
||||
entity.entity_id,
|
||||
{ disabled_by: null }
|
||||
);
|
||||
|
||||
if (result.require_restart) {
|
||||
showAlertDialog(this, {
|
||||
text: this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.enabled_restart_confirm"
|
||||
),
|
||||
});
|
||||
}
|
||||
if (result.reload_delay) {
|
||||
showAlertDialog(this, {
|
||||
text: this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.enabled_delay_confirm",
|
||||
"delay",
|
||||
result.reload_delay
|
||||
),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
protected render() {
|
||||
const entityId = this.entityId;
|
||||
|
||||
const entity = this.getEntityEntry(entityId, this._entities);
|
||||
const device = entity?.device_id
|
||||
? this.getDeviceEntry(entity.device_id, this._devices)
|
||||
: undefined;
|
||||
|
||||
return html`
|
||||
${
|
||||
device?.disabled_by
|
||||
? html`
|
||||
<div class="content">
|
||||
<ha-svg-icon .path=${mdiExclamationThick}></ha-svg-icon>
|
||||
<p>
|
||||
${this.hass!.localize(
|
||||
"ui.dialogs.entity_registry.editor.device_disabled"
|
||||
)}
|
||||
</p>
|
||||
<mwc-button @click=${this._openDeviceSettings}>
|
||||
${this.hass!.localize(
|
||||
"ui.dialogs.entity_registry.editor.open_device_settings"
|
||||
)}
|
||||
</mwc-button>
|
||||
</div>
|
||||
`
|
||||
: entity?.disabled_by
|
||||
? html`
|
||||
<div class="content">
|
||||
<ha-svg-icon .path=${mdiExclamationThick}></ha-svg-icon>
|
||||
<p>
|
||||
${this.hass!.localize(
|
||||
"ui.dialogs.entity_registry.editor.entity_disabled"
|
||||
)}
|
||||
</p>
|
||||
${["user", "integration"].includes(entity.disabled_by!)
|
||||
? html`
|
||||
<mwc-button @click=${this._enableEntry}>
|
||||
${this.hass!.localize(
|
||||
"ui.dialogs.entity_registry.editor.enable_entity"
|
||||
)}</mwc-button
|
||||
>
|
||||
`
|
||||
: nothing}
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<div class="content">
|
||||
<ha-svg-icon .path=${mdiExclamationThick}></ha-svg-icon>
|
||||
<p>
|
||||
${this.hass!.localize(
|
||||
"ui.dialogs.entity_registry.editor.unavailable"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 8px 24px 24px 24px;
|
||||
}
|
||||
.content ha-svg-icon {
|
||||
background-color: var(--warning-color);
|
||||
color: white;
|
||||
padding: 16px;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.content p {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.25px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"more-info-no-state": MoreInfoNoState;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue