ctucx.git: smartie-pwa

[js] smarthome web-gui

commit e2c8b96c06e3757757f83494352935ca7def4e1f
parent b858973727982e30aa5c7505ff1930a70bd1435c
Author: Milan Pässler <me@pbb.lc>
Date: Sat, 6 Jul 2019 23:05:56 +0200

adapt for rust  smarthome-server
3 files changed, 37 insertions(+), 25 deletions(-)
M
src/lights.js
|
30
+++++++++++++++++++-----------
M
src/power-meter/live.js
|
28
+++++++++++++++-------------
M
src/state.js
|
4
+++-
diff --git a/src/lights.js b/src/lights.js
@@ -22,23 +22,31 @@ class Lights extends LitElement {
 		if (row.attributes.disabled) return;
 		const sw = row.querySelector("mwc-switch");
 		sw.checked = !sw.checked;
-		state.ws.send(`set ${Number(sw.id)} ${sw.checked ? "on" : "off"}`);
+		state.ws.send(JSON.stringify({
+			type: "SetRelayAction",
+			relay_board: sw.relayboard,
+			relay: sw.relay,
+			value: sw.checked
+		}));
 		if (evt.clientX !== 0 || evt.clientY !== 0) sw.blur();
 		return true;
 	}
 
 	render() {
+		console.log(state);
 		return html`
-			${state.data.lights ? html`
-				<smarthome-card>
-					${state.data.lights.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" .id="${sw.id}" ?disabled="${!state.connected}" ?checked="${sw.value}"></mwc-switch>
-						</smarthome-row>
-					`)}
-				</smarthome-card>
+			${state.data.devices ? html`
+				${state.data.devices.filter(d => d.type == "RelayBoard").map((device, relayboard) => html`
+					<smarthome-card>
+						${device.state.relays.map((value, relay) => html`
+							<smarthome-row @click="${this._clickHandler}" ?disabled="${!state.connected}">
+								<span slot="left">${device.config.names[relay]}</span>
+								<mwc-ripple slot="center"></mwc-ripple>
+								<mwc-switch slot="right" .relayboard="${relayboard}" .relay="${relay}" ?disabled="${!state.connected}" ?checked="${value}"></mwc-switch>
+							</smarthome-row>
+						`)}
+					</smarthome-card>
+				`)}
 			` : html`
 				<smarthome-spinner>Trying to connect...</smarthome-spinner>
 			`}
diff --git a/src/power-meter/live.js b/src/power-meter/live.js
@@ -17,12 +17,14 @@ class PowerMeterLive extends LitElement {
 		archive.subscribe(this.requestUpdate.bind(this));
 	}
 
-	getImport(id) {
-		const currentValue = state.data.powermeter[id].values.import;
+	getImport(d) {
+		const currentValue = d.state.import;
+		const modbusid = d.config.address;
 		const now = new Date();
-		const filename = `day/${id}_${now.getFullYear()}_${pad(now.getMonth() + 1, 2)}`;
+		console.log(d);
+		const filename = `day/${modbusid}_${now.getFullYear()}_${pad(now.getMonth() + 1, 2)}`;
 		if (this._cachedDayArchive[filename] !== now.getDate()) delete archive.data[filename];
-		archive.load(`day/${id}_${now.getFullYear()}_${pad(now.getMonth() + 1, 2)}`);
+		archive.load(`day/${modbusid}_${now.getFullYear()}_${pad(now.getMonth() + 1, 2)}`);
 		this._cachedDayArchive[filename] = now.getDate();
 		const lastValue = get(archive.data, [filename, `${now.getFullYear()}${pad(now.getMonth() + 1, 2)}${pad(now.getDate() - 1, 2)}`, "totalImported" ]);
 		return currentValue && lastValue ? round(currentValue - lastValue, 2) + " kWh" : "-";

@@ -30,7 +32,7 @@ class PowerMeterLive extends LitElement {
 
 	render() {
 		return html`
-			${state.data.powermeter ? html`
+			${state.data.devices ? html`
 				<div id="connection-status">
 					${state.connected ? html`
 						<p><mwc-icon>cloud_queue</mwc-icon> Connected</p>

@@ -50,15 +52,15 @@ class PowerMeterLive extends LitElement {
 							<div class="table-column">Total Import</div>
 							<div class="table-column">Import</div>
 						</div>
-						${Object.entries(state.data.powermeter).map(([id, d]) => html`
+			      ${state.data.devices.filter(d => d.type == "PowerMeter").map(d => html`
 							<div class="table-row">
-								<div class="table-column">${d.name}</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">${this.getImport(id)}</div>
+								<div class="table-column">${d.config.name}</div>
+								<div class="table-column">${round(d.state.voltage, 2)} V</div>
+								<div class="table-column">${round(d.state.power, 2)} W</div>
+								<div class="table-column">${round(d.state.cosphi, 2)}</div>
+								<div class="table-column">${round(d.state.frequency, 2)}</div>
+								<div class="table-column">${round(d.state.import, 2)} kWh</div>
+								<div class="table-column">${this.getImport(d)}</div>
 							</div>
 						`)}
 					</div>
diff --git a/src/state.js b/src/state.js
@@ -15,6 +15,8 @@ class State {
 	}
 
 	_setData(newData) {
+		if (newData.Ok) newData = newData.Ok;
+		if (!newData.devices) return;
 		this.data = newData;
 		this.data.lastUpdated = new Date();
 		localStorage.setItem("data", JSON.stringify(this.data));

@@ -28,7 +30,7 @@ class State {
 	}
 
 	_initWS() {
-		this.ws = new WebSocket(`${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.hostname}/${window.location.pathname.split("/").slice(0, -1).join("/")}/ws`);
+		this.ws = new WebSocket("ws://192.168.1.1:3002/");
 		this.ws.onclose = () => {
 			this.connected = false;
 			this._initWS();