commit a40b17e87ed1955bf5107a059a9bdcb56285823b
parent e8092ebc597dfc2298913e9f11d5dc9c029a1930
Author: Milan Pässler <me@pbb.lc>
Date: Wed, 22 May 2019 00:39:56 +0200
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(-)
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);