Star working on a config panel
This commit is contained in:
parent
565c4a6eb1
commit
edd03225d2
158
custom_components/browser_mod/browser_mod_panel.js
Normal file
158
custom_components/browser_mod/browser_mod_panel.js
Normal file
File diff suppressed because one or more lines are too long
@ -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"
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -1,37 +1,29 @@
|
||||
from aiohttp import web
|
||||
from homeassistant.components.http import HomeAssistantView
|
||||
|
||||
from .const import FRONTEND_SCRIPT_URL, DATA_EXTRA_MODULE_URL
|
||||
from .const import FRONTEND_SCRIPT_URL, DATA_EXTRA_MODULE_URL, SETTINGS_PANEL_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",
|
||||
sidebar_icon="mdi:server",
|
||||
frontend_url_path="browser-mod",
|
||||
require_admin=True,
|
||||
config={
|
||||
"_panel_custom": {
|
||||
"name": "browser-mod-panel",
|
||||
"js_url": SETTINGS_PANEL_URL,
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
class ModView(HomeAssistantView):
|
||||
|
||||
name = "browser_mod_script"
|
||||
requires_auth = False
|
||||
|
||||
def __init__(self, hass, url):
|
||||
self.url = url
|
||||
self.config_dir = hass.config.path()
|
||||
|
||||
async def get(self, request):
|
||||
path = "{}/custom_components/browser_mod/browser_mod.js".format(self.config_dir)
|
||||
|
||||
filecontent = ""
|
||||
|
||||
try:
|
||||
with open(path, mode="r", encoding="utf-8", errors="ignore") as localfile:
|
||||
filecontent = localfile.read()
|
||||
localfile.close()
|
||||
except Exception:
|
||||
pass
|
||||
|
||||
return web.Response(
|
||||
body=filecontent, content_type="text/javascript", charset="utf-8"
|
||||
)
|
||||
hass.http.register_static_path(
|
||||
FRONTEND_SCRIPT_URL,
|
||||
hass.config.path("custom_components/browser_mod/browser_mod.js"),
|
||||
)
|
||||
hass.http.register_static_path(
|
||||
SETTINGS_PANEL_URL,
|
||||
hass.config.path("custom_components/browser_mod/browser_mod_panel.js"),
|
||||
)
|
||||
|
||||
107
js/browser_mod_panel.ts
Normal file
107
js/browser_mod_panel.ts
Normal file
@ -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);
|
||||
});
|
||||
@ -1,6 +1,6 @@
|
||||
const a = {};
|
||||
|
||||
import { BrowserMod } from "./main";
|
||||
import { BrowserMod } from "./browser_mod";
|
||||
|
||||
interface FullyKiosk {
|
||||
// Get device info
|
||||
|
||||
@ -6,19 +6,37 @@ import babel from "@rollup/plugin-babel";
|
||||
|
||||
const dev = process.env.ROLLUP_WATCH;
|
||||
|
||||
export default {
|
||||
input: "js/main.ts",
|
||||
output: {
|
||||
file: "custom_components/browser_mod/browser_mod.js",
|
||||
format: "es",
|
||||
module.exports = [
|
||||
{
|
||||
input: "js/browser_mod.ts",
|
||||
output: {
|
||||
file: "custom_components/browser_mod/browser_mod.js",
|
||||
format: "es",
|
||||
},
|
||||
plugins: [
|
||||
nodeResolve(),
|
||||
json(),
|
||||
typescript(),
|
||||
babel({
|
||||
exclude: "node_modules/**",
|
||||
}),
|
||||
!dev && terser({ format: { comments: false } }),
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
nodeResolve(),
|
||||
json(),
|
||||
typescript(),
|
||||
babel({
|
||||
exclude: "node_modules/**",
|
||||
}),
|
||||
!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 } }),
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user