Star working on a config panel

custom_components/browser_mod/const.py

@@ -1,6 +1,7 @@
 DOMAIN = "browser_mod"
 
 FRONTEND_SCRIPT_URL = "/browser_mod.js"
+SETTINGS_PANEL_URL = "/browser_mod_panel.js"
 
 DATA_EXTRA_MODULE_URL = "frontend_extra_module_url"
 

custom_components/browser_mod/manifest.json

@@ -2,7 +2,7 @@
   "domain": "browser_mod",
   "name": "Browser mod",
   "documentation": "https://github.com/thomasloven/hass-browser_mod/blob/master/README.md",
-  "dependencies": ["websocket_api", "http", "frontend"],
+  "dependencies": ["panel_custom", "websocket_api", "http", "frontend"],
   "codeowners": [],
   "requirements": [],
   "version": "1.5.3",

custom_components/browser_mod/mod_view.py

@@ -1,37 +1,29 @@
-from aiohttp import web
+from .const import FRONTEND_SCRIPT_URL, DATA_EXTRA_MODULE_URL, SETTINGS_PANEL_URL
-from homeassistant.components.http import HomeAssistantView
-
-from .const import FRONTEND_SCRIPT_URL, DATA_EXTRA_MODULE_URL
 
 
 def setup_view(hass):
     url_set = hass.data[DATA_EXTRA_MODULE_URL]
     url_set.add(FRONTEND_SCRIPT_URL)
 
-    hass.http.register_view(ModView(hass, FRONTEND_SCRIPT_URL))
+    hass.components.frontend.async_register_built_in_panel(
-
+        component_name="custom",
-
+        sidebar_title="Browser Mod",
-class ModView(HomeAssistantView):
+        sidebar_icon="mdi:server",
-
+        frontend_url_path="browser-mod",
-    name = "browser_mod_script"
+        require_admin=True,
-    requires_auth = False
+        config={
-
+            "_panel_custom": {
-    def __init__(self, hass, url):
+                "name": "browser-mod-panel",
-        self.url = url
+                "js_url": SETTINGS_PANEL_URL,
-        self.config_dir = hass.config.path()
+            }
-
+        },
-    async def get(self, request):
+    )
-        path = "{}/custom_components/browser_mod/browser_mod.js".format(self.config_dir)
+
-
+    hass.http.register_static_path(
-        filecontent = ""
+        FRONTEND_SCRIPT_URL,
-
+        hass.config.path("custom_components/browser_mod/browser_mod.js"),
-        try:
+    )
-            with open(path, mode="r", encoding="utf-8", errors="ignore") as localfile:
+    hass.http.register_static_path(
-                filecontent = localfile.read()
+        SETTINGS_PANEL_URL,
-                localfile.close()
+        hass.config.path("custom_components/browser_mod/browser_mod_panel.js"),
-        except Exception:
-            pass
-
-        return web.Response(
-            body=filecontent, content_type="text/javascript", charset="utf-8"
     )

js/browser_mod_panel.ts

@@ -0,0 +1,107 @@
+import { LitElement, html, css } from "lit";
+import { deviceID } from "card-tools/src/deviceID";
+
+class BrowserModPanel extends LitElement {
+  hass;
+  narrow;
+  render() {
+    return html`
+      <ha-app-layout>
+        <app-header slot="header" fixed>
+          <app-toolbar>
+            <ha-menu-button
+              .hass=${this.hass}
+              .narrow=${this.narrow}
+            ></ha-menu-button>
+            <div main-title>Browser Mod Settingss</div>
+          </app-toolbar>
+        </app-header>
+
+        <ha-config-section .narrow=${this.narrow} full-width>
+          <ha-card header="Device ID">
+            <div class="card-content">
+              The device ID is a unique identifier for your browser/device
+              combination.
+              <ha-textfield .value=${deviceID}> </ha-textfield>
+            </div>
+            <div class="card-actions">
+              <div class="spacer"></div>
+              <mwc-button>Update</mwc-button>
+            </div>
+          </ha-card>
+
+          <ha-card header="Tweaks">
+            <div class="card-content">
+              <div class="option">
+                <h3>Cool function</h3>
+                <ha-switch> </ha-switch>
+              </div>
+              Enabling this will cause cool stuff to happen.
+              <div class="option">
+                <h3>Another function</h3>
+                <ha-switch> </ha-switch>
+              </div>
+              Enabling this will cause less cool stuff to happen.
+            </div>
+          </ha-card>
+        </ha-config-section>
+      </ha-app-layout>
+    `;
+  }
+
+  static get styles() {
+    return [
+      ...(customElements.get("ha-config-dashboard") as any).styles,
+      css`
+        :host {
+          --app-header-background-color: var(--sidebar-background-color);
+          --app-header-text-color: var(--sidebar-text-color);
+          --app-header-border-bottom: 1px solid var(--divider-color);
+        }
+        .card-actions {
+          display: flex;
+        }
+        .spacer {
+          flex-grow: 1;
+        }
+        ha-textfield {
+          width: 250px;
+          display: block;
+          margin-top: 8px;
+        }
+        .option {
+          display: flex;
+          margin-top: 16px;
+        }
+        .option h3 {
+          flex-grow: 1;
+          margin: 0;
+        }
+        .option ha-switch {
+          margin-top: 0.25em;
+          margin-right: 7px;
+          margin-left: 0.5em;
+        }
+      `,
+    ];
+  }
+}
+
+const loadDevTools = async () => {
+  if (customElements.get("ha-config-dashboard")) return;
+  const ppResolver = document.createElement("partial-panel-resolver");
+  const routes = (ppResolver as any).getRoutes([
+    {
+      component_name: "config",
+      url_path: "a",
+    },
+  ]);
+  await routes?.routes?.a?.load?.();
+  const configRouter = document.createElement("ha-panel-config");
+  await (configRouter as any)?.routerOptions?.routes?.dashboard?.load?.();
+  await customElements.whenDefined("ha-config-dashboard");
+};
+
+loadDevTools().then(() => {
+  customElements.define("browser-mod-panel", BrowserModPanel);
+});

js/types.ts

@@ -1,6 +1,6 @@
 const a = {};
 
-import { BrowserMod } from "./main";
+import { BrowserMod } from "./browser_mod";
 
 interface FullyKiosk {
   // Get device info

rollup.config.js

@@ -6,8 +6,9 @@ import babel from "@rollup/plugin-babel";
 
 const dev = process.env.ROLLUP_WATCH;
 
-export default {
+module.exports = [
-  input: "js/main.ts",
+  {
+    input: "js/browser_mod.ts",
     output: {
       file: "custom_components/browser_mod/browser_mod.js",
       format: "es",
@@ -21,4 +22,21 @@ export default {
       }),
       !dev && terser({ format: { comments: false } }),
     ],
-};
+  },
+  {
+    input: "js/browser_mod_panel.ts",
+    output: {
+      file: "custom_components/browser_mod/browser_mod_panel.js",
+      format: "es",
+    },
+    plugins: [
+      nodeResolve(),
+      json(),
+      typescript(),
+      babel({
+        exclude: "node_modules/**",
+      }),
+      !dev && terser({ format: { comments: false } }),
+    ],
+  },
+];