ctucx.git: smartie-pwa

[js] smarthome web-gui

commit a40b17e87ed1955bf5107a059a9bdcb56285823b
parent e8092ebc597dfc2298913e9f11d5dc9c029a1930
Author: Milan Pässler <me@pbb.lc>
Date: Wed, 22 May 2019 00:39:56 +0200

cleanup
7 files changed, 96 insertions(+), 51 deletions(-)
M
index.html
|
5
+++--
M
src/index.js
|
6
++++++
M
src/lights.js
|
36
++++++++++--------------------------
M
src/power-meter.js
|
11
++---------
A
src/row.js
|
35
+++++++++++++++++++++++++++++++++++
M
src/settings.js
|
30
++++++++++++++++--------------
A
src/spinner.js
|
24
++++++++++++++++++++++++
diff --git a/index.html b/index.html
@@ -14,7 +14,8 @@ body {
 	</head>
 	<body>
 		<smarthome-layout></smarthome-layout>
-		<noscript>JavaScript is required to use Valetudo</noscript>
+		<noscript>JavaScript is required to use Smart Home</noscript>
+		<script nomodule src="main.min.js"></script>
+		<script type="module" src="main.es.js"></script>
 	</body>
-	<script type="module" src="main.js"></script>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -9,10 +9,16 @@ import "@authentic/mwc-drawer";
 import "./lights.js";
 import "./power-meter.js";
 import "./settings.js";
+import "./spinner.js";
+import "./row.js";
+
+const luciRedirect = document.createElement("script");
+luciRedirect.innerHTML = "window.location = `http://${window.location.host}/cgi-bin/luci/`;";
 
 const pages = {
 	"#/lights": { name: "Lights", content: html`<smarthome-lights></smarthome-lights>`, icon: "lightbulb" },
 	"#/powermeter": { name: "Power Meter", content: html`<smarthome-power-meter></smarthome-power-meter>`, icon: "power" },
+	"#/luci": { name: "LuCI", content: html`<smarthome-spinner></smarthome-spinner> ${luciRedirect}`, icon: "router" },
 	"#/settings": { name: "Settings", content: html`<smarthome-settings></smarthome-settings>`, icon: "settings" },
 };
 
diff --git a/src/lights.js b/src/lights.js
@@ -4,6 +4,8 @@ import { Switch } from "@authentic/mwc-switch";
 import "@authentic/mwc-circular-progress";
 import "@authentic/mwc-ripple";
 import "./card.js";
+import "./spinner.js";
+import { Row } from "./row.js";
 
 class Lights extends LitElement {
 	constructor() {

@@ -31,15 +33,14 @@ class Lights extends LitElement {
 			}, 4000);
 			if (!msg.data.length) return; // keepalive
 			this.switches = JSON.parse(msg.data);
-			console.log(this.switches);
 			this.requestUpdate();
 		};
 	}
 
 	_clickHandler(evt) {
 		evt.preventDefault();
-		const p = evt.composedPath().filter(el => el instanceof HTMLParagraphElement)[0];
-		const sw = p.querySelector("mwc-switch");
+		const row = evt.composedPath().filter(el => el instanceof Row)[0];
+		const sw = row.querySelector("mwc-switch");
 		sw.checked = !sw.checked;
 		this.ws.send(`set ${Number(sw.id)} ${sw.checked ? "on" : "off"}`);
 		return true;

@@ -50,18 +51,15 @@ class Lights extends LitElement {
 			${this.connected ? html`
 				<smarthome-card>
 					${this.switches.map(sw => html`
-						<p @click="${this._clickHandler}">
-							<span>${sw.name}</span>
-							<mwc-ripple></mwc-ripple>
-							<mwc-switch .id="${sw.id}" ?disabled="${!this.connected}" ?checked="${sw.value}"></mwc-switch>
-						</p>
+						<smarthome-row @click="${this._clickHandler}">
+							<span slot="left">${sw.name}</span>
+							<mwc-ripple slot="center"></mwc-ripple>
+							<mwc-switch slot="right" .id="${sw.id}" ?disabled="${!this.connected}" ?checked="${sw.value}"></mwc-switch>
+						</smarthome-row>
 					`)}
 				</smarthome-card>
 			` : html`
-				<div id="loading">
-					<h3>Trying to connect...</h3>
-					<mwc-circular-progress></mwc-circular-progress>
-				</div>
+				<smarthome-spinner></smarthome-spinner>
 			`}
 		`;
 	}

@@ -77,20 +75,6 @@ class Lights extends LitElement {
 				--mdc-theme-secondary: #616161;
 				user-select: none;
 			}
-			p {
-				display: flex;
-				flex-direction: row;
-				justify-content: space-between;
-				padding: 1em;
-				margin: 0;
-				height: 14px;
-				border-bottom: 1px solid #ccc;
-			}
-			#loading {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-			}
 		`;
 	}
 }
diff --git a/src/power-meter.js b/src/power-meter.js
@@ -3,6 +3,7 @@ import { LitElement, html, css } from "lit-element";
 import "@authentic/mwc-circular-progress";
 import "@authentic/mwc-icon";
 import "./card.js";
+import "./spinner.js";
 
 const counters = [
 	{ id: 60, name: "Kueche" },

@@ -111,10 +112,7 @@ class PowerMeter extends LitElement {
 					</div>
 				</smarthome-card>
 			` : html`
-				<div id="loading">
-					<h3>Trying to connect...</h3>
-					<mwc-circular-progress></mwc-circular-progress>
-				</div>
+				<smarthome-spinner></smarthome-spinner>
 			`}
 		`;
 	}

@@ -129,11 +127,6 @@ class PowerMeter extends LitElement {
 				--mdc-theme-on-secondary: white;
 				--mdc-theme-secondary: #616161;
 			}
-			#loading {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-			}
 			#connection-status mwc-icon {
 				padding: .5em;
 			}
diff --git a/src/row.js b/src/row.js
@@ -0,0 +1,35 @@
+import { LitElement, html, css } from "lit-element";
+
+import "@authentic/mwc-ripple";
+import "./card.js";
+
+export class Row extends LitElement {
+	render() {
+		return html`
+			<slot name="left"></slot>
+			<slot name="center"></slot>
+			<slot name="right"></slot>
+		`;
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				--mdc-theme-on-primary: white;
+				--mdc-theme-primary: #43a047;
+				--mdc-theme-on-secondary: white;
+				--mdc-theme-secondary: #616161;
+				user-select: none;
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				padding: 1em;
+				margin: 0;
+				height: 14px;
+				border-bottom: 1px solid #ccc;
+			}
+		`;
+	}
+}
+
+customElements.define("smarthome-row", Row);
diff --git a/src/settings.js b/src/settings.js
@@ -2,6 +2,7 @@ import { LitElement, html, css } from "lit-element";
 
 import "@authentic/mwc-ripple";
 import "./card.js";
+import "./row.js";
 
 class Settings extends LitElement {
 	_forceUpdate(evt) {

@@ -11,13 +12,21 @@ class Settings extends LitElement {
 		return html`
 			<smarthome-card>
 				<a href="https://www.gnu.org/licenses/agpl-3.0-standalone.html">
-					<span>License</span>
-					<mwc-ripple></mwc-ripple>
+					<smarthome-row>
+						<span slot="left">License</span>
+						<mwc-ripple slot="center"></mwc-ripple>
+					</smarthome-row>
 				</a>
-				<p @click="${this._forceUpdate}">
-					<span>Force update</span>
-					<mwc-ripple></mwc-ripple>
-				</p>
+				<a href="https://git.pbb.lc/petabyteboy/smarthome-pwa/">
+					<smarthome-row>
+						<span slot="left">Source Code</span>
+						<mwc-ripple slot="center"></mwc-ripple>
+					</smarthome-row>
+				</a>
+				<smarthome-row @click="${this._forceUpdate}">
+					<span slot="left">Force update</span>
+					<mwc-ripple slot="center"></mwc-ripple>
+				</smarthome-row>
 			</smarthome-card>
 		`;
 	}

@@ -33,16 +42,9 @@ class Settings extends LitElement {
 				--mdc-theme-secondary: #616161;
 				user-select: none;
 			}
-			p, a {
+			a {
 				text-decoration: none;
 				color: black;
-				display: flex;
-				flex-direction: row;
-				justify-content: space-between;
-				padding: 1em;
-				margin: 0;
-				height: 14px;
-				border-bottom: 1px solid #ccc;
 			}
 		`;
 	}
diff --git a/src/spinner.js b/src/spinner.js
@@ -0,0 +1,24 @@
+import { LitElement, html, css } from "lit-element";
+
+import "@authentic/mwc-circular-progress";
+
+class Spinner extends LitElement {
+	render() {
+		return html`
+			<h3>Trying to connect...</h3>
+			<mwc-circular-progress></mwc-circular-progress>
+		`;
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+			}
+		`;
+	}
+}
+
+customElements.define("smarthome-spinner", Spinner);