Show Thread panel on thread config entry (#15150)

* Show Thread panel on thread config entry

* Rename data file to use right domain

* Make panel a bit more pleasant
This commit is contained in:
Paulus Schoutsen 2023-01-23 13:55:31 -05:00 committed by GitHub
parent b4cd4975c1
commit 8073555bf9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 25 deletions

View File

@ -1,11 +1,11 @@
import { HomeAssistant } from "../types";
export interface ThreadInfo {
export interface OTBRInfo {
url: string;
active_dataset_tlvs: string;
}
export const threadGetInfo = (hass: HomeAssistant): Promise<ThreadInfo> =>
export const getOTBRInfo = (hass: HomeAssistant): Promise<OTBRInfo> =>
hass.callWS({
type: "otbr/info",
});

View File

@ -75,11 +75,11 @@ import type { ConfigEntryExtended } from "./ha-config-integrations";
import "./ha-integration-header";
const integrationsWithPanel = {
matter: "/config/matter",
mqtt: "/config/mqtt",
thread: "/config/thread",
zha: "/config/zha/dashboard",
zwave_js: "/config/zwave_js/dashboard",
matter: "/config/matter",
otbr: "/config/thread",
};
@customElement("ha-integration-card")

View File

@ -5,7 +5,9 @@ import "../../../../../components/ha-card";
import "../../../../../layouts/hass-subpage";
import { haStyle } from "../../../../../resources/styles";
import { HomeAssistant } from "../../../../../types";
import { threadGetInfo, ThreadInfo } from "../../../../../data/thread";
import { getOTBRInfo, OTBRInfo } from "../../../../../data/otbr";
import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
import { showConfigFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-config-flow";
@customElement("thread-config-panel")
export class ThreadConfigPanel extends LitElement {
@ -13,29 +15,43 @@ export class ThreadConfigPanel extends LitElement {
@property({ type: Boolean }) public narrow!: boolean;
@state() private _info?: ThreadInfo;
@state() private _info?: OTBRInfo;
protected render(): TemplateResult {
return html`
<hass-subpage .narrow=${this.narrow} .hass=${this.hass} header="Thread">
<div class="content">
<ha-card header="Thread Border Router">
<div class="card-content">
${!this._info
? html`<ha-circular-progress active></ha-circular-progress>`
: html`
<table>
<tr>
<td>URL</td>
<td>${this._info.url}</td>
</tr>
<tr>
<td>Active Dataset TLVs</td>
<td>${this._info.active_dataset_tlvs || "-"}</td>
</tr>
</table>
`}
</div>
<ha-card header="Open Thread Border Router">
${isComponentLoaded(this.hass, "otbr")
? html`
<div class="card-content">
${!this._info
? html`<ha-circular-progress
active
></ha-circular-progress>`
: html`
<table>
<tr>
<td>URL</td>
<td>${this._info.url}</td>
</tr>
<tr>
<td>Active Dataset TLVs</td>
<td>${this._info.active_dataset_tlvs || "-"}</td>
</tr>
</table>
`}
</div>
`
: html`
<div class="card-content">No border routers found.</div>
<div class="card-actions">
<mwc-button
@click=${this._addOTBR}
label="Add border router"
></mwc-button>
</div>
`}
</ha-card>
</div>
</hass-subpage>
@ -45,8 +61,24 @@ export class ThreadConfigPanel extends LitElement {
protected override firstUpdated(changedProps: PropertyValues) {
super.firstUpdated(changedProps);
threadGetInfo(this.hass).then((info) => {
this._info = info;
this._refresh();
}
private _refresh() {
if (isComponentLoaded(this.hass, "otbr")) {
getOTBRInfo(this.hass).then((info) => {
this._info = info;
});
}
}
private _addOTBR() {
showConfigFlowDialog(this, {
dialogClosedCallback: () => {
this._refresh();
},
startFlowHandler: "otbr",
showAdvanced: this.hass.userData?.showAdvanced,
});
}