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"; import { HomeAssistant } from "../types";
export interface ThreadInfo { export interface OTBRInfo {
url: string; url: string;
active_dataset_tlvs: string; active_dataset_tlvs: string;
} }
export const threadGetInfo = (hass: HomeAssistant): Promise<ThreadInfo> => export const getOTBRInfo = (hass: HomeAssistant): Promise<OTBRInfo> =>
hass.callWS({ hass.callWS({
type: "otbr/info", type: "otbr/info",
}); });

View File

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

View File

@ -5,7 +5,9 @@ import "../../../../../components/ha-card";
import "../../../../../layouts/hass-subpage"; import "../../../../../layouts/hass-subpage";
import { haStyle } from "../../../../../resources/styles"; import { haStyle } from "../../../../../resources/styles";
import { HomeAssistant } from "../../../../../types"; 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") @customElement("thread-config-panel")
export class ThreadConfigPanel extends LitElement { export class ThreadConfigPanel extends LitElement {
@ -13,29 +15,43 @@ export class ThreadConfigPanel extends LitElement {
@property({ type: Boolean }) public narrow!: boolean; @property({ type: Boolean }) public narrow!: boolean;
@state() private _info?: ThreadInfo; @state() private _info?: OTBRInfo;
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<hass-subpage .narrow=${this.narrow} .hass=${this.hass} header="Thread"> <hass-subpage .narrow=${this.narrow} .hass=${this.hass} header="Thread">
<div class="content"> <div class="content">
<ha-card header="Thread Border Router"> <ha-card header="Open Thread Border Router">
<div class="card-content"> ${isComponentLoaded(this.hass, "otbr")
${!this._info ? html`
? html`<ha-circular-progress active></ha-circular-progress>` <div class="card-content">
: html` ${!this._info
<table> ? html`<ha-circular-progress
<tr> active
<td>URL</td> ></ha-circular-progress>`
<td>${this._info.url}</td> : html`
</tr> <table>
<tr> <tr>
<td>Active Dataset TLVs</td> <td>URL</td>
<td>${this._info.active_dataset_tlvs || "-"}</td> <td>${this._info.url}</td>
</tr> </tr>
</table> <tr>
`} <td>Active Dataset TLVs</td>
</div> <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> </ha-card>
</div> </div>
</hass-subpage> </hass-subpage>
@ -45,8 +61,24 @@ export class ThreadConfigPanel extends LitElement {
protected override firstUpdated(changedProps: PropertyValues) { protected override firstUpdated(changedProps: PropertyValues) {
super.firstUpdated(changedProps); super.firstUpdated(changedProps);
threadGetInfo(this.hass).then((info) => { this._refresh();
this._info = info; }
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,
}); });
} }