Split js parts

custom_components/browser_mod/browser_mod_panel.js

@@ -70,11 +70,24 @@ class BrowserModPanel extends s {
         </app-header>
 
         <ha-config-section .narrow=${this.narrow} full-width>
-          <ha-card header="Device ID">
+          <ha-card header="This Browser">
             <div class="card-content">
+              <div class="option">
+                <h3>Enable</h3>
+                <ha-switch></ha-switch>
+              </div>
+              Enable this browser as a Device in Home Assistant
+              <div class="option">
+                <h3>DeviceID</h3>
+              </div>
+              <ha-textfield .value=${deviceID}> </ha-textfield>
               The device ID is a unique identifier for your browser/device
               combination.
-              <ha-textfield .value=${deviceID}> </ha-textfield>
+              <div class="option">
+                <h3>Enable Camera</h3>
+                <ha-switch> </ha-switch>
+              </div>
+              Get Camera input from this device (hardware dependent)
             </div>
             <div class="card-actions">
               <div class="spacer"></div>
@@ -82,6 +95,10 @@ class BrowserModPanel extends s {
             </div>
           </ha-card>
 
+          <ha-card header="Current User">
+            <div class="card-content"></div>
+          </ha-card>
+
           <ha-card header="Tweaks">
             <div class="card-content">
               <div class="option">

js/config_panel/main.ts

@@ -18,11 +18,24 @@ class BrowserModPanel extends LitElement {
         </app-header>
 
         <ha-config-section .narrow=${this.narrow} full-width>
-          <ha-card header="Device ID">
+          <ha-card header="This Browser">
             <div class="card-content">
+              <div class="option">
+                <h3>Enable</h3>
+                <ha-switch></ha-switch>
+              </div>
+              Enable this browser as a Device in Home Assistant
+              <div class="option">
+                <h3>DeviceID</h3>
+              </div>
+              <ha-textfield .value=${deviceID}> </ha-textfield>
               The device ID is a unique identifier for your browser/device
               combination.
-              <ha-textfield .value=${deviceID}> </ha-textfield>
+              <div class="option">
+                <h3>Enable Camera</h3>
+                <ha-switch> </ha-switch>
+              </div>
+              Get Camera input from this device (hardware dependent)
             </div>
             <div class="card-actions">
               <div class="spacer"></div>
@@ -30,6 +43,10 @@ class BrowserModPanel extends LitElement {
             </div>
           </ha-card>
 
+          <ha-card header="Current User">
+            <div class="card-content"></div>
+          </ha-card>
+
           <ha-card header="Tweaks">
             <div class="card-content">
               <div class="option">

js/plugin/main.ts

@@ -12,7 +12,7 @@ import { BrowserModCameraMixin } from "./camera";
 import { BrowserModScreensaverMixin } from "./screensaver";
 import { BrowserModPopupsMixin } from "./popups";
 import { BrowserModBrowserMixin } from "./browser";
-import pjson from "../package.json";
+import pjson from "../../package.json";
 
 const ext = (baseClass, mixins) =>
   mixins.reduceRight((base, mixin) => mixin(base), baseClass);

js/plugin/types.ts

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

rollup.config.js

@@ -8,7 +8,7 @@ const dev = process.env.ROLLUP_WATCH;
 
 module.exports = [
   {
-    input: "js/browser_mod.ts",
+    input: "js/plugin/main.ts",
     output: {
       file: "custom_components/browser_mod/browser_mod.js",
       format: "es",
@@ -24,7 +24,7 @@ module.exports = [
     ],
   },
   {
-    input: "js/browser_mod_panel.ts",
+    input: "js/config_panel/main.ts",
     output: {
       file: "custom_components/browser_mod/browser_mod_panel.js",
       format: "es",