Pass entity_id as URL parameter to panel (#7)

* Host as URL-param

* Update translations

* Fix formatting and linting issues

src/lcn-config-dashboard.ts

@@ -4,7 +4,6 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@ha/components/ha-fab";
 import "@ha/components/ha-list-item";
 import "@ha/components/ha-select";
-import type { HaSelect } from "@ha/components/ha-select";
 import { css, html, LitElement, PropertyValues, TemplateResult, CSSResultGroup } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { mdiPlus } from "@mdi/js";
@@ -35,8 +34,6 @@ export class LCNConfigDashboard extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @property({ attribute: false }) public hosts!: LcnHost[];
-
   @property({ type: Array, reflect: false }) public tabs: PageNavigation[] = [];
 
   @state() private _deviceConfigs: LcnDeviceConfig[] = [];
@@ -49,10 +46,11 @@ export class LCNConfigDashboard extends LitElement {
     this.addEventListener("lcn-config-changed", async () => {
       this._fetchDevices(this.lcn.host);
     });
+    await this._fetchDevices(this.lcn.host);
   }
 
   protected render(): TemplateResult {
-    if (!(this.hass && this.lcn && this.hosts)) {
+    if (!(this.hass && this.lcn)) {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
     return html`
@@ -68,18 +66,6 @@ export class LCNConfigDashboard extends LitElement {
           <span slot="introduction"> ${this.renderIntro()} </span>
 
           <div id="box">
-            <ha-select
-              id="host-select"
-              .label=${this.lcn.localize("dashboard-devices-hosts")}
-              .value=${this.lcn.host.id}
-              fixedMenuPosition
-              @selected=${this._hostChanged}
-            >
-              ${this.hosts.map(
-                (host) => html` <ha-list-item .value=${host.id}> ${host.name} </ha-list-item> `,
-              )}
-            </ha-select>
-
             <mwc-button id="scan_devices" raised @click=${this._scanDevices}>
               ${this.lcn.localize("dashboard-devices-scan")}
             </mwc-button>
@@ -124,13 +110,6 @@ export class LCNConfigDashboard extends LitElement {
     `;
   }
 
-  private async _hostChanged(ev: CustomEvent) {
-    const target = ev.target as HaSelect;
-    const host: LcnHost = this.hosts.find((el) => el.id === target.value)!;
-    this.lcn.host = host;
-    await this._fetchDevices(this.lcn.host);
-  }
-
   private async _fetchDevices(host: LcnHost) {
     this._deviceConfigs = await fetchDevices(this.hass!, host.id);
   }

src/lcn-router.ts

@@ -2,7 +2,8 @@ import { customElement, property, state } from "lit/decorators";
 import { HassRouterPage, RouterOptions } from "@ha/layouts/hass-router-page";
 import type { HomeAssistant, Route } from "@ha/types";
 import { LCNLogger } from "lcn-logger";
-import { LCN, fetchHosts, LcnHost } from "./types/lcn";
+import { getConfigEntry } from "@ha/data/config_entries";
+import { LCN } from "./types/lcn";
 
 const logger = new LCNLogger("router");
 
@@ -16,7 +17,7 @@ class LCNRouter extends HassRouterPage {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @state() private hosts!: LcnHost[];
+  @state() private _searchParms = new URLSearchParams(window.location.search);
 
   protected routerOptions: RouterOptions = {
     defaultPage: "devices",
@@ -37,7 +38,7 @@ class LCNRouter extends HassRouterPage {
         },
       },
     },
-    initialLoad: () => this._fetchHosts(),
+    initialLoad: () => this._fetchHost(this._searchParms.get("config_entry")!),
   };
 
   protected updatePageEl(el): void {
@@ -46,15 +47,15 @@ class LCNRouter extends HassRouterPage {
     el.route = this.routeTail;
     el.narrow = this.narrow;
 
-    if (this._currentPage === "devices") {
-      el.hosts = this.hosts;
-    }
-
     logger.debug(`Current Page: ${this._currentPage} Route: ${this.route.path}`);
   }
 
-  private async _fetchHosts() {
-    this.hosts = await fetchHosts(this.hass!);
+  private async _fetchHost(entry_id: string) {
+    const res = await getConfigEntry(this.hass!, entry_id);
+    this.lcn.host = {
+      name: res.config_entry.title,
+      id: res.config_entry.entry_id,
+    };
   }
 }
 

src/localize/languages/de.json

@@ -62,7 +62,7 @@
   "dashboard-devices-title": "LCN Konfiguration",
   "dashboard-devices-introduction": "Willkommen auf dem LCN Konfigurations-Dashboard!",
   "dashboard-devices-introduction-help-1": "Hier kannst du die Module und Gruppen deines LCN Systems konfigurieren.",
-  "dashboard-devices-introduction-help-2": "Um zu beginnen, selektiere deinen Host und starte eine automatische Suche nach LCN Modulen. Die gefundenen Module werden in der Liste angezeigt.",
+  "dashboard-devices-introduction-help-2": "Um zu beginnen, starte eine automatische Suche nach LCN Modulen. Die gefundenen Module werden in der Liste angezeigt.",
   "dashboard-devices-introduction-help-3": "Wird ein Modul nicht automatisch erkannt, kannst du das Modul auch manuell hinzufügen.",
   "dashboard-devices-introduction-help-4": "Klicke auf einen Eintrag in der Liste, um die zugehörigen Entitäten anzuzeigen und zu editieren.",
   "dashboard-devices-introduction-help-5": "Wenn du einen Eintrag löschen möchtest, klicke auf das Mülleimersymbol neben dem Eintrag.",

src/localize/languages/en.json

@@ -63,7 +63,7 @@
   "dashboard-devices-title": "LCN Configuration Dashboard",
   "dashboard-devices-introduction": "Welcome to the LCN configuration dashboard!",
   "dashboard-devices-introduction-help-1": "Here you can configure the modules and groups of your LCN system.",
-  "dashboard-devices-introduction-help-2": "To get started, select your host and start an automatic search for LCN modules. The modules found are displayed in the list.",
+  "dashboard-devices-introduction-help-2": "To get started, run an automatic search for LCN modules. The modules found are displayed in the list.",
   "dashboard-devices-introduction-help-3": "If a module is not recognized automatically, you can add the module manually.",
   "dashboard-devices-introduction-help-4": "Click on an entry in the list to display and edit the associated entities.",
   "dashboard-devices-introduction-help-5": "If you want to delete an entry, click on the trash can icon next to the entry.",

src/types/lcn.ts

@@ -82,11 +82,6 @@ export interface LcnDeviceConfig {
   hardware_type: number;
 }
 
-export const fetchHosts = (hass: HomeAssistant): Promise<LcnHost[]> =>
-  hass.callWS({
-    type: "lcn/hosts",
-  });
-
 export const fetchDevices = (hass: HomeAssistant, hostId: string): Promise<LcnDeviceConfig[]> =>
   hass.callWS({
     type: "lcn/devices",