mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 18:26:35 +00:00
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:
parent
b4cd4975c1
commit
8073555bf9
@ -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",
|
||||||
});
|
});
|
@ -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")
|
||||||
|
@ -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,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user