ctucx.git: smartie-pwa

[js] smarthome web-gui

commit 097408bccd45cd920dc8c3dd65eb67796e6a5ff4
parent 7632535bb63c67a092f065eeb52ea83d7fd93ce0
Author: Milan Pässler <me@pbb.lc>
Date: Sun, 9 Jun 2019 16:29:36 +0200

wip
4 files changed, 281 insertions(+), 8 deletions(-)
M
package.json
|
3
+++
M
src/layout.js
|
3
++-
M
src/power-meter.js
|
33
+++++++++++++++++++++++++++------
M
yarn.lock
|
250
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
diff --git a/package.json b/package.json
@@ -12,7 +12,10 @@
     "@authentic/mwc-drawer": "^0.5.0",
     "@authentic/mwc-icon": "^0.5.0",
     "@authentic/mwc-icon-button": "^0.5.0",
+    "@authentic/mwc-list": "^0.5.6",
+    "@authentic/mwc-menu": "^0.5.6",
     "@authentic/mwc-ripple": "^0.5.0",
+    "@authentic/mwc-select": "^0.5.6",
     "@authentic/mwc-switch": "^0.5.0",
     "@authentic/mwc-top-app-bar": "^0.5.0",
     "lit-element": "^2.1.0"
diff --git a/src/layout.js b/src/layout.js
@@ -10,6 +10,7 @@ import "@authentic/mwc-drawer";
 
 import "./lights.js";
 import "./power-meter.js";
+import "./power-meter-history.js";
 import "./settings.js";
 import "./spinner.js";
 import "./row.js";

@@ -19,7 +20,7 @@ luciRedirect.innerHTML = "window.location = `http://${window.location.host}/cgi-
 
 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" },
+	"#/powermeter": { name: "Power Meter", content: html`<smarthome-power-meter></smarthome-power-meter><smarthome-power-meter-history></smarthome-power-meter-history>`, 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/power-meter.js b/src/power-meter.js
@@ -28,13 +28,32 @@ const formatDate = (date) => (
 	pad(date.getMinutes(), 2)
 );
 
+const archive = {};
+const loading = {};
+
 class PowerMeter extends LitElement {
 	constructor() {
 		super(...arguments);
 		state.subscribe(this.requestUpdate.bind(this));
 	}
 
+	load(file, key, key2) {
+		if (!archive[file] && !loading[file]) {
+			loading[file] = true;
+			fetch(`archive/${file}.json`)
+				.then(resp => resp.json())
+				.then(data => {
+					archive[file] = data;
+					loading[file] = undefined;
+					this.requestUpdate();
+				});
+		} else {
+			return archive[file][key][key2];
+		}
+	}
+
 	render() {
+		const now = new Date();
 		return html`
 			${state.data.powermeter ? html`
 				<div id="connection-status">

@@ -53,16 +72,18 @@ class PowerMeter extends LitElement {
 							<div class="table-column">Power</div>
 							<div class="table-column">Power Factor</div>
 							<div class="table-column">Frequency</div>
+							<div class="table-column">Total Import</div>
 							<div class="table-column">Import</div>
 						</div>
-						${Object.entries(state.data.powermeter).map(([_, d]) => html`
+						${Object.entries(state.data.powermeter).map(([id, d]) => html`
 							<div class="table-row">
 								<div class="table-column">${d.name}</div>
-								<div class="table-column">${round(d.values.voltage, 2)} V</div>
-								<div class="table-column">${round(d.values.power, 2)} W</div>
-								<div class="table-column">${round(d.values.cosphi, 2)}</div>
-								<div class="table-column">${round(d.values.frequency, 2)}</div>
-								<div class="table-column">${round(d.values.import, 2)} kWh</div>
+								<div class="table-column">${d.values.voltage} V</div>
+								<div class="table-column">${d.values.power} W</div>
+								<div class="table-column">${d.values.cosphi}</div>
+								<div class="table-column">${d.values.frequency}</div>
+								<div class="table-column">${d.values.import} kWh</div>
+								<div class="table-column">${round(this.load(`day/${id}_${now.getFullYear()}_${pad(now.getMonth() + 1, 2)}`, `${now.getFullYear()}${pad(now.getMonth() + 1, 2)}${pad(now.getDate(), 2)}`, "imported"), 2)} kWh</div>
 							</div>
 						`)}
 					</div>
diff --git a/yarn.lock b/yarn.lock
@@ -11,6 +11,15 @@
     lit-element "^2.1.0"
     lit-html "^1.0.0"
 
+"@authentic/mwc-base@^0.5.6":
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/@authentic/mwc-base/-/mwc-base-0.5.6.tgz#5730200cdd9f84ebdf8b0b15fb5a2598f8337900"
+  integrity sha512-PlHtjDvb9Y1x1gcJOPowLrvpbUlbVQf7e42XXRLzjt+Y/jVNcqmRwRdiKLmE4vc1ctGWELjtWm5aHcVjIy9Rfw==
+  dependencies:
+    "@material/base" "^1.0.0"
+    lit-element "^2.1.0"
+    lit-html "^1.0.0"
+
 "@authentic/mwc-card@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@authentic/mwc-card/-/mwc-card-0.5.0.tgz#64efc356c0261fac33027d94862bb6fa5e3ff9e1"

@@ -62,6 +71,44 @@
   dependencies:
     "@authentic/mwc-base" "^0.5.0"
 
+"@authentic/mwc-icon@^0.5.6":
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/@authentic/mwc-icon/-/mwc-icon-0.5.6.tgz#21b9e84ad81380f3b5fe4ed1f662bec29c1322ae"
+  integrity sha512-qNNjz59cGidohaAayRoXWcucvPg1oyEGXU2z07mbSelN2Pl3GOWxEIEfL6xUxz3mcxIODeTZ7uzTDejT5n+9ng==
+  dependencies:
+    "@authentic/mwc-base" "^0.5.6"
+
+"@authentic/mwc-list@^0.5.6":
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/@authentic/mwc-list/-/mwc-list-0.5.6.tgz#bdf6272ead2df5d5edf19fe357d87ba021003bff"
+  integrity sha512-NbgTGLi+9hm1OCRRbcViZsd6dfJ9mDnV49ADjdAJhay1U9th83mmx2IV0JBg9FZl8ct6BJwRWZUIKRzbq0GU+w==
+  dependencies:
+    "@authentic/mwc-base" "^0.5.6"
+    "@authentic/mwc-icon" "^0.5.6"
+    "@authentic/mwc-ripple" "^0.5.6"
+    "@material/base" "^1.0.0"
+    "@material/dom" "^1.1.0"
+    "@material/feature-targeting" "^0.44.1"
+    "@material/list" "^2.0.0"
+    "@material/ripple" "^2.0.0"
+    "@material/rtl" "^0.42.0"
+    "@material/shape" "^1.1.1"
+    "@material/theme" "^1.1.0"
+    "@material/typography" "^1.0.0"
+    lit-element "^2.0.1"
+
+"@authentic/mwc-menu@^0.5.6":
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/@authentic/mwc-menu/-/mwc-menu-0.5.6.tgz#bc10dc1be00821e47750d431be9b73f257a95105"
+  integrity sha512-L7rrwOQWQgNGxuOROg2KBmPmKJIqFpHK8Y+Al7xwT5kXHucIDeSzVARMZ1c211fQl2pc+E6MHQA3liKcNCBNyQ==
+  dependencies:
+    "@authentic/mwc-base" "^0.5.6"
+    "@material/list" "^2.0.0"
+    "@material/menu" "^2.0.0"
+    "@material/menu-surface" "^1.1.1"
+    "@material/typography" "^1.0.0"
+    lit-element "^2.0.1"
+
 "@authentic/mwc-ripple@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@authentic/mwc-ripple/-/mwc-ripple-0.5.0.tgz#0e4c764ee3d6fa5c2a9cffeffe6434f4775a0838"

@@ -72,6 +119,38 @@
     lit-element "^2.0.1"
     lit-html "^1.0.0"
 
+"@authentic/mwc-ripple@^0.5.6":
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/@authentic/mwc-ripple/-/mwc-ripple-0.5.6.tgz#487aaac7abe9cb9a4021194fca8886d65f347c35"
+  integrity sha512-eSeS+IXFDsbE7dvSJaZtnkWLnrU1yHMI5U6I9s07lE6+23gATnFI0Vwis70gcfbi0Vcq0IQrWwxT9xR9cvEY5w==
+  dependencies:
+    "@authentic/mwc-base" "^0.5.6"
+    "@material/ripple" "^2.0.0"
+    lit-element "^2.0.1"
+    lit-html "^1.0.0"
+
+"@authentic/mwc-select@^0.5.6":
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/@authentic/mwc-select/-/mwc-select-0.5.6.tgz#250ff30f647f3be2920ae1baec5a615a1ab09265"
+  integrity sha512-9Y2aokOetwrugGWz0qwL0fNhEAAYkNJSvtngTejpwO7PaXU6zsTaORnciUe5o42GEldeuQB+jHqhX42/arU21w==
+  dependencies:
+    "@authentic/mwc-base" "^0.5.6"
+    "@authentic/mwc-list" "^0.5.6"
+    "@authentic/mwc-menu" "^0.5.6"
+    "@authentic/mwc-ripple" "^0.5.6"
+    "@material/animation" "^1.0.0"
+    "@material/floating-label" "^1.1.0"
+    "@material/line-ripple" "^1.1.0"
+    "@material/menu" "^2.0.0"
+    "@material/menu-surface" "^1.1.1"
+    "@material/notched-outline" "^1.1.0"
+    "@material/ripple" "^1.1.0"
+    "@material/rtl" "^0.42.0"
+    "@material/select" "^1.1.0"
+    "@material/shape" "^1.0.0"
+    "@material/theme" "^1.1.0"
+    "@material/typography" "^1.0.0"
+
 "@authentic/mwc-switch@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@authentic/mwc-switch/-/mwc-switch-0.5.0.tgz#82ae4027326e447ba926b30c5afa816886217115"

@@ -176,6 +255,18 @@
   resolved "https://registry.yarnpkg.com/@material/feature-targeting/-/feature-targeting-0.44.1.tgz#afafc80294e5efab94bee31a187273d43d34979a"
   integrity sha512-90cc7njn4aHbH9UxY8qgZth1W5JgOgcEdWdubH1t7sFkwqFxS5g3zgxSBt46TygFBVIXNZNq35Xmg80wgqO7Pg==
 
+"@material/floating-label@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@material/floating-label/-/floating-label-1.1.0.tgz#505b9f8c7628d0498a18b165c387d4c34840ca60"
+  integrity sha512-7q7V+9o9XesgMnK11up9z+BcRFwtLIAIqVTCL3liKRARNHuzw9FGrGMKhTJUKvLZ3z0bM1+FmmVlA3q9FJWehQ==
+  dependencies:
+    "@material/animation" "^1.0.0"
+    "@material/base" "^1.0.0"
+    "@material/rtl" "^0.42.0"
+    "@material/theme" "^1.1.0"
+    "@material/typography" "^1.0.0"
+    tslib "^1.9.3"
+
 "@material/icon-button@^2.0.0":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@material/icon-button/-/icon-button-2.1.1.tgz#574842abc808da774e77c097dfca2d7e74ec23f5"

@@ -187,6 +278,46 @@
     "@material/theme" "^1.1.0"
     tslib "^1.9.3"
 
+"@material/line-ripple@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@material/line-ripple/-/line-ripple-1.1.0.tgz#0fef69c14ddf42877f10eed05c1a2489808f1cf4"
+  integrity sha512-XqCxDNfgkh9zq0IVlTEFVjmQV8hx8m4vxLFM5qwHDDqcKPlX/Lfc8M43fmm9uE1CaJBC6whMGPvOt/dIla+RUg==
+  dependencies:
+    "@material/animation" "^1.0.0"
+    "@material/base" "^1.0.0"
+    "@material/theme" "^1.1.0"
+    tslib "^1.9.3"
+
+"@material/list@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@material/list/-/list-1.1.1.tgz#296ed85ae3585af1749462e5bafd617d5675e85e"
+  integrity sha512-YqX2A5qagoBolla6WHzP2BIUid/ufot5rVP2yrTz3DFvmswJMXU3HV2XU9NbiVOiefCjkra9ljtimiTlHUrAEg==
+  dependencies:
+    "@material/base" "^1.0.0"
+    "@material/dom" "^1.1.0"
+    "@material/feature-targeting" "^0.44.1"
+    "@material/ripple" "^1.1.0"
+    "@material/rtl" "^0.42.0"
+    "@material/shape" "^1.1.1"
+    "@material/theme" "^1.1.0"
+    "@material/typography" "^1.0.0"
+    tslib "^1.9.3"
+
+"@material/list@^2.0.0", "@material/list@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@material/list/-/list-2.3.0.tgz#07f8d7194495f487d440bbe9fd09a2d3a68cee06"
+  integrity sha512-uuHWXpaXvPuOaQtQXwrgNc+WTTwBSwU/es65KJJcGrpc/o8Q3mYwMepotMN7E7/L75Wxz2w6uejnoM3zGZfvqg==
+  dependencies:
+    "@material/base" "^1.0.0"
+    "@material/dom" "^1.1.0"
+    "@material/feature-targeting" "^0.44.1"
+    "@material/ripple" "^2.3.0"
+    "@material/rtl" "^0.42.0"
+    "@material/shape" "^1.1.1"
+    "@material/theme" "^1.1.0"
+    "@material/typography" "^2.3.0"
+    tslib "^1.9.3"
+
 "@material/list@^2.1.1":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@material/list/-/list-2.1.1.tgz#fac8fc886d72c33ffb0f91abbc2483570cda4674"

@@ -202,6 +333,85 @@
     "@material/typography" "^1.0.0"
     tslib "^1.9.3"
 
+"@material/menu-surface@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@material/menu-surface/-/menu-surface-1.1.1.tgz#d930f940e31a1bc32a2c9e3f15d5e60d43871cde"
+  integrity sha512-bOY3LsVamovl/yb4hMBDi3gh8UFEYyP3GHNpTt+X5KBPDehoFhXG9s21aNvGbHZbwURhhWiRzy/OUC3MLE/hKA==
+  dependencies:
+    "@material/animation" "^1.0.0"
+    "@material/base" "^1.0.0"
+    "@material/elevation" "^1.1.0"
+    "@material/feature-targeting" "^0.44.1"
+    "@material/rtl" "^0.42.0"
+    "@material/shape" "^1.1.1"
+    "@material/theme" "^1.1.0"
+    tslib "^1.9.3"
+
+"@material/menu-surface@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@material/menu-surface/-/menu-surface-2.3.0.tgz#5d82b4ed7b7124000a2e1fe76034e94f0a433b83"
+  integrity sha512-jJ1MyeJnEJUO0Z7kNxvqN0xruWbTT2XKHCiApQcJHHkeibWfbWJdhXcx5aO4FMf/TVcy3ADSxDTdvc6AYrBX0g==
+  dependencies:
+    "@material/animation" "^1.0.0"
+    "@material/base" "^1.0.0"
+    "@material/elevation" "^1.1.0"
+    "@material/feature-targeting" "^0.44.1"
+    "@material/rtl" "^0.42.0"
+    "@material/shape" "^1.1.1"
+    "@material/theme" "^1.1.0"
+    tslib "^1.9.3"
+
+"@material/menu@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@material/menu/-/menu-1.1.1.tgz#1a9ca4d0e88e6a2ead9793c0377e0ceb73802241"
+  integrity sha512-bfsZ4Uexm02ey665SukjMK+3HtQVu7Bbc/q5chvPmLoMbSQ4PYE19C/p8cXKeNxkhd3S0h/gJDPw/cTbB9mrhg==
+  dependencies:
+    "@material/base" "^1.0.0"
+    "@material/feature-targeting" "^0.44.1"
+    "@material/list" "^1.1.1"
+    "@material/menu-surface" "^1.1.1"
+    "@material/ripple" "^1.1.0"
+    "@material/rtl" "^0.42.0"
+    tslib "^1.9.3"
+
+"@material/menu@^2.0.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@material/menu/-/menu-2.3.0.tgz#29d7b3557efcf627796cfaf532754f5c6f2d120b"
+  integrity sha512-XPI6w4x5c9ACwKBdujcTskBlisWlEgrb09Sa+s0vjhqBJVZVAUJT1j0OpG8tArNUqQiFssXBa/JuJIe6sMAK1A==
+  dependencies:
+    "@material/base" "^1.0.0"
+    "@material/feature-targeting" "^0.44.1"
+    "@material/list" "^2.3.0"
+    "@material/menu-surface" "^2.3.0"
+    "@material/ripple" "^2.3.0"
+    "@material/rtl" "^0.42.0"
+    tslib "^1.9.3"
+
+"@material/notched-outline@^1.1.0", "@material/notched-outline@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@material/notched-outline/-/notched-outline-1.1.1.tgz#a79c8aa3c5662b676bb46741658f434afa38f0da"
+  integrity sha512-HekxMWgIEGlmmdiCATfEJPjAWz2jlyXnfGUiBOkAzI25/OyOgcCd3rLzcMT5DUqItbKoNk1M/9kOmzTSNSt/CA==
+  dependencies:
+    "@material/animation" "^1.0.0"
+    "@material/base" "^1.0.0"
+    "@material/floating-label" "^1.1.0"
+    "@material/rtl" "^0.42.0"
+    "@material/shape" "^1.1.1"
+    "@material/theme" "^1.1.0"
+    tslib "^1.9.3"
+
+"@material/ripple@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-1.1.0.tgz#236016fb30c8366faf143297df2c38166d84ffbc"
+  integrity sha512-mkfDBZAmxjpRG7V9TrfOmLxt1g/wvGHCXtYPgvH7W8ozjf53edqxLOFENEdvHbie27y9nyixzXn0gzU0HnxSeA==
+  dependencies:
+    "@material/animation" "^1.0.0"
+    "@material/base" "^1.0.0"
+    "@material/dom" "^1.1.0"
+    "@material/feature-targeting" "^0.44.1"
+    "@material/theme" "^1.1.0"
+    tslib "^1.9.3"
+
 "@material/ripple@^2.0.0", "@material/ripple@^2.1.1":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-2.1.1.tgz#850e44bafe9db962f400c7e067eb28c1cb11010b"

@@ -214,12 +424,43 @@
     "@material/theme" "^1.1.0"
     tslib "^1.9.3"
 
+"@material/ripple@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-2.3.0.tgz#4701b2cfecddc4c83ae62c777ae2bf9607988705"
+  integrity sha512-ejXR0nstERofFhssRyFlwOLgebwm2uGbarHtWZ2/+7QY2Th/Z1wOqNb2h/WRoShsJXK11RUsochb6BJrg30u7w==
+  dependencies:
+    "@material/animation" "^1.0.0"
+    "@material/base" "^1.0.0"
+    "@material/dom" "^1.1.0"
+    "@material/feature-targeting" "^0.44.1"
+    "@material/theme" "^1.1.0"
+    tslib "^1.9.3"
+
 "@material/rtl@^0.42.0":
   version "0.42.0"
   resolved "https://registry.yarnpkg.com/@material/rtl/-/rtl-0.42.0.tgz#1836e78186c2d8b996f6fbf97adab203535335bc"
   integrity sha512-VrnrKJzhmspsN8WXHuxxBZ69yM5IwhCUqWr1t1eNfw3ZEvEj7i1g3P31HGowKThIN1dc1Wh4LE14rCISWCtv5w==
 
-"@material/shape@^1.1.1":
+"@material/select@^1.1.0":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@material/select/-/select-1.1.1.tgz#c4a646de35590407d5effeb25b1d08fad012aa70"
+  integrity sha512-si/RGmqRcLflBmA4EXeiR4gVuOIM0YAqIwVN7WOwrx+AhfBDuvI9sPMDz2UXZ2VoFpll73TTRMdah2MPTpmCxQ==
+  dependencies:
+    "@material/animation" "^1.0.0"
+    "@material/base" "^1.0.0"
+    "@material/floating-label" "^1.1.0"
+    "@material/line-ripple" "^1.1.0"
+    "@material/menu" "^1.1.1"
+    "@material/menu-surface" "^1.1.1"
+    "@material/notched-outline" "^1.1.1"
+    "@material/ripple" "^1.1.0"
+    "@material/rtl" "^0.42.0"
+    "@material/shape" "^1.1.1"
+    "@material/theme" "^1.1.0"
+    "@material/typography" "^1.0.0"
+    tslib "^1.9.3"
+
+"@material/shape@^1.0.0", "@material/shape@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@material/shape/-/shape-1.1.1.tgz#7a5368694bc3555e69ea547950904b46fa1024bf"
   integrity sha512-Jge/h1XBLjdLlam4QMSzVgM99e/N8+elQROPkltqVP7eyLc17BwM3aP5cLVfZDgrJgvsjUxbgAP1H1j8sqmUyg==

@@ -270,6 +511,13 @@
   dependencies:
     "@material/feature-targeting" "^0.44.1"
 
+"@material/typography@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@material/typography/-/typography-2.3.0.tgz#fe2180c697172227f0745cda684ecafdaba3f8dd"
+  integrity sha512-NtWVVvwG9Te6/kuIl4fEwDcXGCS7mfPgo5CKPyxcK6y0hJHv6yRHpipJT9D4ZlXw0sQx9B33doOK7iYJtwBBZw==
+  dependencies:
+    "@material/feature-targeting" "^0.44.1"
+
 "@types/estree@0.0.39":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"