commit bb6d3970bc3b1fa4d7666cd69600f188018436b8
parent fa14ce28daa297884371c213ae10e67e31d9a736
Author: Milan Pässler <me@pbb.lc>
Date: Sun, 28 Jul 2019 00:03:30 +0200
parent fa14ce28daa297884371c213ae10e67e31d9a736
Author: Milan Pässler <me@pbb.lc>
Date: Sun, 28 Jul 2019 00:03:30 +0200
login
7 files changed, 107 insertions(+), 27 deletions(-)
diff --git a/src/departures.js b/src/departures.js @@ -57,9 +57,9 @@ class Departures extends LitElement { <div class="table-column">${Number(departure.departure_in) ? departure.departure_in + " min" : "sofort"}</div> `)} </div> - ${d.length ? "" : html` - <div class="table-empty table-column">--- Momentan keine Abfahrten ---</div> - `} + ${d.length ? "" : html` + <div class="table-empty table-column">--- Momentan keine Abfahrten ---</div> + `} </div> </smarthome-card> `)} @@ -109,7 +109,7 @@ class Departures extends LitElement { width: 20%; } .table { - flex-wrap: wrap; + flex-wrap: wrap; padding: 20px; padding-top: 10px; background: #444; @@ -138,7 +138,7 @@ class Departures extends LitElement { } .table-empty { - flex-basis: 100%; + flex-basis: 100%; text-align: center; } `;
diff --git a/src/layout.js b/src/layout.js @@ -16,6 +16,7 @@ import "./departures.js"; import "./settings.js"; import "./spinner.js"; import "./row.js"; +import "./prompt.js"; const createRedirect = (id) => { const config = state.config.views.filter(view => view.url == id)[0] || state.config.views[0]; @@ -47,7 +48,7 @@ class SmartHomeLayout extends LitElement { this.activeView = state.config.views.filter(view => `#/${view.url}` == window.location.hash)[0] || state.config.views[0]; await this.requestUpdate(); const drawer = this.shadowRoot.querySelector("mwc-drawer"); - drawer.open = false; + if (drawer) drawer.open = false; } _handleNavEvent(evt) { @@ -57,10 +58,10 @@ class SmartHomeLayout extends LitElement { } render() { - if (this.activeView.type === "noconfig") { - window.location.hash = `#/${state.config.views[0].url}`; - } - return html` + if (this.activeView.type === "noconfig") { + window.location.hash = `#/${state.config.views[0].url}`; + } + return state.accessToken ? html` <mwc-drawer type="modal"> <div id="drawer-content"> ${state.config.views.map(view => html` @@ -80,6 +81,15 @@ class SmartHomeLayout extends LitElement { </mwc-top-app-bar> <div class="top-app-bar-adjust"></div> ${viewTypes[this.activeView.type](this.activeView.url)} + ` : html` + <mwc-top-app-bar type="fixed" @MDCTopAppBar:nav="${this._handleNavEvent}"> + <div id="title-container" slot="title"> + <span>Authorization</span> + </div> + <mwc-icon id="menu-button" slot="navigationIcon">lock</mwc-icon> + </mwc-top-app-bar> + <div class="top-app-bar-adjust"></div> + <smarthome-prompt></smarthome-prompt> `; } @@ -111,7 +121,7 @@ class SmartHomeLayout extends LitElement { width: 100vw; padding-left: calc((100% - 450px) / 2 + 20px); } - mwc-icon-button { + #menu-button { position: absolute; padding-left: calc(((100% - 450px) / 2) - 75px); z-index: 10;
diff --git a/src/power-meter/history.js b/src/power-meter/history.js @@ -118,7 +118,7 @@ class PowerMeterHistory extends LitElement { </div> </smarthome-card> ` : html` - <smarthome-spinner>Loading...</smarthome-spinner> + <smarthome-spinner>Loading...</smarthome-spinner> `} `; }
diff --git a/src/prompt.js b/src/prompt.js @@ -0,0 +1,52 @@ +"use strict"; + +import { LitElement, html, css } from "lit-element"; +import { state } from "./state.js"; +import "./card.js"; + +class Prompt extends LitElement { + render() { + return html` + <h4>Enter the passphrase:</h4> + <form @submit=${this.handleSubmit}> + <smarthome-card> + <input type="password" id="accessToken"> + </smarthome-card> + <mwc-icon-button icon="arrow_forward" @click=${this.handleSubmit}></mwc-icon-button> + </form> + `; + } + + handleSubmit(evt) { + evt.preventDefault(); + state.setAccessToken(this.shadowRoot.getElementById("accessToken").value); + return true; + } + + static get styles() { + return css` + :host { + display: flex; + flex-direction: column; + align-items: center; + } + input { + padding: 0; + border: none; + height: 3em; + color: black; + } + smarthome-card { + display: flex; + margin: 0; + margin-right: 20px; + } + form { + display: flex; + flex-direction: row; + } + `; + } +} + +customElements.define("smarthome-prompt", Prompt);
diff --git a/src/state.js b/src/state.js @@ -5,18 +5,19 @@ class State { this.connected = false; this.data = JSON.parse(localStorage.getItem("data") || "{}"); this.config = JSON.parse(localStorage.getItem("config") || JSON.stringify({ - views: [ - { - type: "noconfig", - url: "noconfig", - name: "Start", - icon: "settings" - } - ] - })); + views: [ + { + type: "noconfig", + url: "noconfig", + name: "Start", + icon: "settings" + } + ] + })); + this.accessToken = localStorage.getItem("accessToken"); this.data.lastUpdated = new Date(this.data.lastUpdated); this._subscribers = []; - this._initWS(); + if (this.accessToken) this._initWS(); } subscribe(callback) { @@ -34,6 +35,9 @@ class State { this.data.lastUpdated = new Date(); localStorage.setItem("data", JSON.stringify(this.data)); } else { + if (newData.data && newData.data.startsWith("invalid accessToken")) { + this.accessToken = null; + } console.log("received response: ", newData); return; } @@ -58,7 +62,13 @@ class State { this._updateSubscribers(); this.ws.send(JSON.stringify({ type: "GetClientConfigAction", - configName: "smarthome-pwa" + configName: "smarthome-pwa", + accessToken: this.accessToken + })); + this.ws.send(JSON.stringify({ + type: "SetSubscriptionStateAction", + subscribed: true, + accessToken: this.accessToken })); }; this.ws.onmessage = (msg) => { @@ -71,6 +81,13 @@ class State { this._setData(JSON.parse(msg.data)); }; } + + setAccessToken(newToken) { + this.accessToken = newToken; + localStorage.setItem("accessToken", this.accessToken); + this._updateSubscribers(); + this._initWS(); + } } export const state = new State();
diff --git a/src/switches.js b/src/switches.js @@ -26,7 +26,8 @@ class Switches extends LitElement { type: "SetRelayAction", setRelayBoard: sw.relayboard, setRelay: sw.relay, - setValue: sw.checked + setValue: sw.checked, + accessToken: state.accessToken })); if (evt.clientX !== 0 || evt.clientY !== 0) sw.blur(); return true; @@ -36,11 +37,11 @@ class Switches extends LitElement { const config = state.config.views.filter(view => view.url == this.viewid)[0]; return html` <smarthome-card> - ${config.switches.map(sw => html` + ${config.switches.map(sw => html` <smarthome-row @click="${this._clickHandler}" ?disabled="${!state.connected}"> <span slot="left">${sw.name}</span> <mwc-ripple slot="center"></mwc-ripple> - <mwc-switch slot="right" .relayboard="${sw.device}" .relay="${sw.relay}" ?disabled="${!state.connected}" ?checked="${state.data[sw.device].relays[sw.relay]}"></mwc-switch> + <mwc-switch slot="right" .relayboard="${sw.device}" .relay="${sw.relay}" ?disabled="${!state.connected}" ?checked="${state.data[sw.device].relays[sw.relay]}"></mwc-switch> </smarthome-row> `)} </smarthome-card>
diff --git a/src/temperature/history.js b/src/temperature/history.js @@ -118,7 +118,7 @@ class TemperatureHistory extends LitElement { </div> </smarthome-card> ` : html` - <smarthome-spinner>Loading...</smarthome-spinner> + <smarthome-spinner>Loading...</smarthome-spinner> `} `; }