Lots of changes and modernization. WIP
This commit is contained in:
16
js/config_panel/helpers.ts
Normal file
16
js/config_panel/helpers.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
// Loads in ha-config-dashboard which is used to copy styling
|
||||
export 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?.(); // Load ha-config-dashboard
|
||||
await (configRouter as any)?.routerOptions?.routes?.cloud?.load?.(); // Load ha-settings-row
|
||||
await customElements.whenDefined("ha-config-dashboard");
|
||||
};
|
||||
@@ -1,124 +1,205 @@
|
||||
import { LitElement, html, css } from "lit";
|
||||
import { deviceID } from "card-tools/src/deviceID";
|
||||
import { property } from "lit/decorators.js";
|
||||
import { loadDevTools } from "./helpers";
|
||||
|
||||
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="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.
|
||||
<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>
|
||||
<mwc-button>Update</mwc-button>
|
||||
</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">
|
||||
<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");
|
||||
};
|
||||
const bmWindow = window as any;
|
||||
|
||||
loadDevTools().then(() => {
|
||||
class BrowserModPanel extends LitElement {
|
||||
@property() hass;
|
||||
@property() narrow;
|
||||
@property() connection;
|
||||
|
||||
toggleRegister() {
|
||||
if (!window.browser_mod?.connected) return;
|
||||
window.browser_mod.registered = !window.browser_mod.registered;
|
||||
}
|
||||
changeDeviceID(ev) {
|
||||
window.browser_mod.deviceID = ev.target.value;
|
||||
}
|
||||
|
||||
unregister_device(ev) {
|
||||
const deviceID = ev.currentTarget.deviceID;
|
||||
if (deviceID === window.browser_mod.deviceID)
|
||||
window.browser_mod.registered = false;
|
||||
else
|
||||
window.browser_mod.connection.sendMessage({
|
||||
type: "browser_mod/unregister",
|
||||
deviceID,
|
||||
});
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
window.browser_mod.addEventListener("browser-mod-config-update", () =>
|
||||
this.requestUpdate()
|
||||
);
|
||||
}
|
||||
|
||||
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 Settings</div>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<ha-config-section .narrow=${this.narrow} full-width>
|
||||
<ha-card outlined>
|
||||
<h1 class="card-header">
|
||||
<div class="name">This Browser</div>
|
||||
${bmWindow.browser_mod?.connected
|
||||
? html`
|
||||
<ha-icon
|
||||
class="icon"
|
||||
.icon=${"mdi:check-circle-outline"}
|
||||
style="color: var(--success-color, green);"
|
||||
></ha-icon>
|
||||
`
|
||||
: html`
|
||||
<ha-icon
|
||||
class="icon"
|
||||
.icon=${"mdi:circle-outline"}
|
||||
style="color: var(--error-color, red);"
|
||||
></ha-icon>
|
||||
`}
|
||||
</h1>
|
||||
<div class="card-content">Browser-mod not connected.</div>
|
||||
<div class="card-content">
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Enable</span>
|
||||
<span slot="description"
|
||||
>Enable this browser as a Device in Home Assistant</span
|
||||
>
|
||||
<ha-switch
|
||||
.checked=${window.browser_mod?.registered}
|
||||
@change=${this.toggleRegister}
|
||||
></ha-switch>
|
||||
</ha-settings-row>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading">DeviceID</span>
|
||||
<span slot="description"
|
||||
>A unique identifier for this browser-device
|
||||
combination.</span
|
||||
>
|
||||
<ha-textfield
|
||||
.value=${window.browser_mod?.deviceID}
|
||||
@change=${this.changeDeviceID}
|
||||
></ha-textfield>
|
||||
</ha-settings-row>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Enable camera</span>
|
||||
<span slot="description"
|
||||
>Get camera input from this device (hardware
|
||||
dependent)</span
|
||||
>
|
||||
<ha-switch> </ha-switch>
|
||||
</ha-settings-row>
|
||||
</div>
|
||||
</ha-card>
|
||||
|
||||
<ha-card header="Registered devices" outlined>
|
||||
<div class="card-content">
|
||||
${Object.keys(window.browser_mod.devices).map(
|
||||
(d) => html` <ha-settings-row>
|
||||
<span slot="heading"> ${d} </span>
|
||||
<span slot="description">
|
||||
Last connected:
|
||||
<ha-relative-time
|
||||
.hass=${this.hass}
|
||||
.datetime=${window.browser_mod.devices[d].last_seen}
|
||||
></ha-relative-time>
|
||||
</span>
|
||||
<ha-icon-button .deviceID=${d} @click=${this.unregister_device}>
|
||||
<ha-icon .icon=${"mdi:delete"}></ha-icon>
|
||||
</ha-icon-button>
|
||||
<ha-icon-button>
|
||||
<ha-icon .icon=${"mdi:wrench"}></ha-icon>
|
||||
</ha-icon-button>
|
||||
</ha-settings-row>`
|
||||
)}
|
||||
</div>
|
||||
</ha-card>
|
||||
|
||||
<ha-card outlined header="Tweaks">
|
||||
<div class="card-content">
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Auto enable devices</span>
|
||||
<ha-switch></ha-switch>
|
||||
</ha-settings-row>
|
||||
<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>
|
||||
</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);
|
||||
--ha-card-border-radius: var(--ha-config-card-border-radius, 8px);
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
ha-icon-button > * {
|
||||
display: flex;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("browser-mod-panel", BrowserModPanel);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user