Begun framework for frontend settings across devices

js/config_panel/helpers.ts

@@ -1,20 +0,0 @@
-// Loads in ha-config-dashboard which is used to copy styling
-// Also provides ha-settings-row
-export const loadDevTools = async () => {
-  if (customElements.get("ha-config-dashboard")) return;
-
-  await customElements.whenDefined("partial-panel-resolver");
-  const ppResolver = document.createElement("partial-panel-resolver");
-  const routes = (ppResolver as any).getRoutes([
-    {
-      component_name: "config",
-      url_path: "a",
-    },
-  ]);
-  await routes?.routes?.a?.load?.();
-  await customElements.whenDefined("ha-panel-config");
-  const configRouter = document.createElement("ha-panel-config");
-  await (configRouter as any)?.routerOptions?.routes?.dashboard?.load?.(); // Load ha-config-dashboard
-  await (configRouter as any)?.routerOptions?.routes?.cloud?.load?.(); // Load ha-settings-row
-  await customElements.whenDefined("ha-config-dashboard");
-};

js/config_panel/main.ts

@@ -1,6 +1,9 @@
 import { LitElement, html, css } from "lit";
 import { property } from "lit/decorators.js";
-import { loadDevTools } from "./helpers";
+import { loadDevTools } from "../helpers";
+import { loadHaForm } from "../helpers";
+
+import "./settings-card";
 
 const bmWindow = window as any;
 
@@ -292,25 +295,9 @@ loadDevTools().then(() => {
               </div>
             </ha-card>
 
-            <ha-card outlined header="Tweaks">
-              <div class="card-content">
-                <ha-settings-row>
-                  <span slot="heading">User sidebar</span>
-                  <span slot="description"
-                    >Save sidebar as default for current user
-                    (${this.hass.user.name})</span
-                  >
-                  <mwc-button>Save</mwc-button>
-                </ha-settings-row>
-                <ha-settings-row>
-                  <span slot="heading">Global sidebar</span>
-                  <span slot="description"
-                    >Save sidebar as default for all users</span
-                  >
-                  <mwc-button>Save</mwc-button>
-                </ha-settings-row>
-              </div>
-            </ha-card>
+            <browser-mod-settings-card
+              .hass=${this.hass}
+            ></browser-mod-settings-card>
           </ha-config-section>
         </ha-app-layout>
       `;

js/config_panel/settings-card.ts

@@ -0,0 +1,160 @@
+import { LitElement, html, css } from "lit";
+import { property, state } from "lit/decorators.js";
+
+class BrowserModSettingsCard extends LitElement {
+  @property() hass;
+
+  @state() _selectedTab = 0;
+
+  firstUpdated() {
+    window.browser_mod.addEventListener("browser-mod-config-update", () =>
+      this.requestUpdate()
+    );
+  }
+
+  _handleSwitchTab(ev: CustomEvent) {
+    this._selectedTab = parseInt(ev.detail.index, 10);
+  }
+
+  render() {
+    const level = ["browser", "user", "global"][this._selectedTab];
+    return html`
+      <ha-card header="Auto settings" outlined>
+        <div class="card-content">
+          <mwc-tab-bar
+            .activeIndex=${this._selectedTab}
+            @MDCTabBar:activated=${this._handleSwitchTab}
+          >
+            <mwc-tab .label=${"Browser"}></mwc-tab>
+            <mwc-tab .label=${"User (" + this.hass.user.name + ")"}></mwc-tab>
+            <mwc-tab .label=${"Global"}></mwc-tab>
+          </mwc-tab-bar>
+
+          ${this._render_settings(level)}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  _render_settings(level) {
+    const global = window.browser_mod.global_settings;
+    const user = window.browser_mod.user_settings;
+    const browser = window.browser_mod.browser_settings;
+    const current = { global, user, browser }[level];
+
+    const DESC_BOOLEAN = (val) =>
+      ({ true: "Enabled", false: "Disabled", undefined: "unset" }[String(val)]);
+    const DESC_SET_UNSET = (val) => (val === undefined ? "Unset" : "Set");
+    const OVERRIDDEN = (key) => {
+      if (level !== "browser" && browser[key] !== undefined)
+        return html`<br />Overridden by browser setting`;
+      if (level === "global" && user[key] !== undefined)
+        return html`<br />Overridden by user setting`;
+    };
+
+    return html`
+      <ha-settings-row>
+        <span slot="heading">Kiosk mode</span>
+        <span slot="description"> Hide sidebar and header </span>
+        Currenty: ${DESC_BOOLEAN(current.kiosk)} ${OVERRIDDEN("kiosk")}
+      </ha-settings-row>
+      <ha-settings-row>
+        <mwc-button
+          @click=${() => window.browser_mod.set_setting("kiosk", true, level)}
+        >
+          Enable
+        </mwc-button>
+        <mwc-button
+          @click=${() => window.browser_mod.set_setting("kiosk", false, level)}
+        >
+          Disable
+        </mwc-button>
+        <mwc-button
+          @click=${() =>
+            window.browser_mod.set_setting("kiosk", undefined, level)}
+        >
+          Clear
+        </mwc-button>
+      </ha-settings-row>
+
+      <ha-settings-row>
+        <span slot="heading">Sidebar order</span>
+        <span slot="description">Order and visibility of sidebar buttons</span>
+        Currenty: ${DESC_SET_UNSET(current.sidebarPanelOrder)}
+        ${OVERRIDDEN("sidebarPanelOrder")}
+      </ha-settings-row>
+      <ha-settings-row>
+        <mwc-button
+          @click=${() => {
+            window.browser_mod.set_setting(
+              "sidebarPanelOrder",
+              localStorage.getItem("sidebarPanelOrder"),
+              level
+            );
+            window.browser_mod.set_setting(
+              "sidebarHiddenPanels",
+              localStorage.getItem("sidebarHiddenPanels"),
+              level
+            );
+          }}
+        >
+          Set
+        </mwc-button>
+        <mwc-button
+          @click=${() => {
+            window.browser_mod.set_setting(
+              "sidebarPanelOrder",
+              undefined,
+              level
+            );
+            window.browser_mod.set_setting(
+              "sidebarHiddenPanels",
+              undefined,
+              level
+            );
+          }}
+        >
+          Clear
+        </mwc-button>
+      </ha-settings-row>
+    `;
+  }
+
+  _render_user() {
+    return html`
+      User
+      <ha-settings-row>
+        <span slot="heading">Kiosk mode</span>
+        <span slot="description"> Hide sidebar and header </span>
+        Currenty: Overridden
+      </ha-settings-row>
+      <ha-settings-row>
+        <span slot="heading">Set screensaver</span>
+        <span slot="description"> Set screensaver card </span>
+        <mwc-button>Enable</mwc-button>
+        <mwc-button>Disable</mwc-button>
+        <mwc-button>Clear</mwc-button>
+      </ha-settings-row>
+    `;
+  }
+
+  _render_browser() {
+    return html`
+      Browser
+      <ha-settings-row>
+        <span slot="heading">Kiosk mode</span>
+        <span slot="description"> Hide sidebar and header </span>
+        Currenty: Overridden
+      </ha-settings-row>
+      <ha-settings-row>
+        <span slot="heading">Set screensaver</span>
+        <span slot="description"> Set screensaver card </span>
+        <mwc-button>Enable</mwc-button>
+        <mwc-button>Disable</mwc-button>
+        <mwc-button>Clear</mwc-button>
+      </ha-settings-row>
+    `;
+  }
+}
+
+customElements.define("browser-mod-settings-card", BrowserModSettingsCard);

js/helpers.ts

@@ -85,3 +85,24 @@ export const loadHaForm = async () => {
   if (!card) return;
   await card.getConfigElement();
 };
+
+// Loads in ha-config-dashboard which is used to copy styling
+// Also provides ha-settings-row
+export const loadDevTools = async () => {
+  if (customElements.get("ha-config-dashboard")) return;
+
+  await customElements.whenDefined("partial-panel-resolver");
+  const ppResolver = document.createElement("partial-panel-resolver");
+  const routes = (ppResolver as any).getRoutes([
+    {
+      component_name: "config",
+      url_path: "a",
+    },
+  ]);
+  await routes?.routes?.a?.load?.();
+  await customElements.whenDefined("ha-panel-config");
+  const configRouter = document.createElement("ha-panel-config");
+  await (configRouter as any)?.routerOptions?.routes?.dashboard?.load?.(); // Load ha-config-dashboard
+  await (configRouter as any)?.routerOptions?.routes?.cloud?.load?.(); // Load ha-settings-row
+  await customElements.whenDefined("ha-config-dashboard");
+};

js/plugin/auto-settings.ts

@@ -0,0 +1,25 @@
+export const AutoSettingsMixin = (SuperClass) => {
+  return class AutoSettingsMixinClass extends SuperClass {
+    constructor() {
+      super();
+
+      this._auto_settings_setup();
+    }
+
+    async _auto_settings_setup() {
+      await this.connectionPromise;
+
+      const settings = this.settings;
+
+      if (settings.sidebarPanelOrder) {
+        localStorage.setItem("sidebarPanelOrder", settings.sidebarPanelOrder);
+      }
+      if (settings.sidebarHiddenPanels) {
+        localStorage.setItem(
+          "sidebarHiddenPanels",
+          settings.sidebarHiddenPanels
+        );
+      }
+    }
+  };
+};

js/plugin/connection.ts

@@ -119,12 +119,66 @@ export const ConnectionMixin = (SuperClass) => {
       });
     }
 
-    get meta() {
-      if (!this.registered) return null;
-      return this.browsers[this.browserID].meta;
+    get global_settings() {
+      const settings = {};
+      const global = this._data.settings ?? {};
+      for (const [k, v] of Object.entries(global)) {
+        if (v !== null) settings[k] = v;
+      }
+      return settings;
     }
-    set meta(value) {
-      this._reregister({ meta: value });
+    get user_settings() {
+      const settings = {};
+      const user = this._data.user_settings[this.hass.user.id] ?? {};
+      for (const [k, v] of Object.entries(user)) {
+        if (v !== null) settings[k] = v;
+      }
+      return settings;
+    }
+    get browser_settings() {
+      const settings = {};
+      const browser = this.browsers[this.browserID]?.settings ?? {};
+      for (const [k, v] of Object.entries(browser)) {
+        if (v !== null) settings[k] = v;
+      }
+      return settings;
+    }
+
+    get settings() {
+      return {
+        ...this.global_settings,
+        ...this.user_settings,
+        ...this.browser_settings,
+      };
+    }
+
+    set_setting(key, value, level) {
+      switch (level) {
+        case "global": {
+          this.connection.sendMessage({
+            type: "browser_mod/settings",
+            key,
+            value,
+          });
+          break;
+        }
+        case "user": {
+          const user = this.hass.user.id;
+          this.connection.sendMessage({
+            type: "browser_mod/settings",
+            user,
+            key,
+            value,
+          });
+          break;
+        }
+        case "browser": {
+          const settings = this.browsers[this.browserID]?.settings;
+          settings[key] = value;
+          this._reregister({ settings });
+          break;
+        }
+      }
     }
 
     get cameraEnabled() {

js/plugin/main.ts

@@ -14,6 +14,7 @@ import "./popups";
 import { PopupMixin } from "./popups";
 import pjson from "../../package.json";
 import "./popup-card";
+import { AutoSettingsMixin } from "./auto-settings";
 
 /*
   TODO:
@@ -48,11 +49,13 @@ import "./popup-card";
     x Redesign services to target devices
   - frontend editor for popup cards
     - also screensavers
-  - Tweaks
-    - Save sidebar
-    - Save sidebar per user
+  - Saved frontend settings
+    X Framework
+    x Save sidebar
     - Kiosk mode
-    - Kiosk mode per user
+    - Default panel?
+    - Screensaver?
+  - Tweaks
     - Favicon templates
     - Title templates
     - Quickbar tweaks (ctrl+enter)?
@@ -67,7 +70,9 @@ export class BrowserMod extends ServicesMixin(
         CameraMixin(
           MediaPlayerMixin(
             ScreenSaverMixin(
-              FullyMixin(RequireInteractMixin(ConnectionMixin(EventTarget)))
+              AutoSettingsMixin(
+                FullyMixin(RequireInteractMixin(ConnectionMixin(EventTarget)))
+              )
             )
           )
         )