ctucx.git: smartie-pwa

[js] smarthome web-gui

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
"use strict";

import { LitElement, html, css } from "lit-element";

import "@authentic/mwc-ripple";
import "./card.js";
import "./row.js";

const sw = navigator.serviceWorker;
let registration;
if (sw) {
	sw.register('sw.js', {
		scope: './'
	}).then((reg) => {
		registration = reg;
	});
}

class Settings extends LitElement {
	_forceUpdate(evt) {
		registration.update();
		location.reload();
	}

	render() {
		return html`
			<smarthome-card>
				<a href="https://www.gnu.org/licenses/agpl-3.0-standalone.html">
					<smarthome-row>
						<span slot="left">License</span>
						<mwc-ripple slot="center"></mwc-ripple>
					</smarthome-row>
				</a>
				<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>
		`;
	}

	static get styles() {
		return css`
			:host {
				display: flex;
				flex-direction: column;
				--mdc-theme-on-primary: white;
				--mdc-theme-primary: #43a047;
				--mdc-theme-on-secondary: white;
				--mdc-theme-secondary: #616161;
				user-select: none;
			}
			a {
				text-decoration: none;
				color: black;
			}
		`;
	}
}

customElements.define("smarthome-settings", Settings);