thomas/hass-browser_mod
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Begun framework for frontend settings across devices

Browse Source
This commit is contained in:
Thomas Lovén
2022-07-20 22:45:03 +00:00
parent 77554aa86c
commit c7ce90883b
11 changed files with 593 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
js/config_panel/helpers.ts
View File

@@ -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");
};

27
js/config_panel/main.ts
View File

@@ -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>
`;

160
js/config_panel/settings-card.ts Normal file
View File

@@ -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);