ctucx.git: smartie-pwa

move card to seperate component

diff --git a/src/card.js b/src/card.js
@@ -0,0 +1,39 @@
+import { LitElement, html, css } from "lit-element";
+
+class Card extends LitElement {
+	render() {
+		return html`
+			<slot></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;
+				background-color: #fff;
+				margin-left: auto;
+				margin-right: auto;
+				width: 100%;
+				overflow: hidden;
+				border-top: 1px solid #ccc;
+				border-bottom: 1px solid #ccc;
+			}
+			@media (min-width: 600px) {
+				:host {
+					max-width: 450px;
+					margin-top: 20px;
+					border: none;
+					border-radius: 4px;
+					box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
+				}
+			}
+		`;
+	}
+}
+
+customElements.define("smarthome-card", Card);

diff --git a/src/lights.js b/src/lights.js
@@ -3,6 +3,7 @@ import { LitElement, html, css } from "lit-element";
 import { Switch } from "@authentic/mwc-switch";
 import "@authentic/mwc-circular-progress";
 import "@authentic/mwc-ripple";
+import "./card.js";
 
 class Lights extends LitElement {
 	constructor() {

@@ -30,6 +31,7 @@ class Lights extends LitElement {
 			}, 4000);
 			if (!msg.data.length) return; // keepalive
 			this.switches = JSON.parse(msg.data);
+			console.log(this.switches);
 			this.requestUpdate();
 		};
 	}

@@ -46,7 +48,7 @@ class Lights extends LitElement {
 	render() {
 		return html`
 			${this.connected ? html`
-				<div class="card">
+				<smarthome-card>
 					${this.switches.map(sw => html`
 						<p @click="${this._clickHandler}">
 							<span>${sw.name}</span>

@@ -54,7 +56,7 @@ class Lights extends LitElement {
 							<mwc-switch .id="${sw.id}" ?disabled="${!this.connected}" ?checked="${sw.value}"></mwc-switch>
 						</p>
 					`)}
-				</div>
+				</smarthome-card>
 			` : html`
 				<div id="loading">
 					<h3>Trying to connect...</h3>

@@ -89,24 +91,6 @@ class Lights extends LitElement {
 				flex-direction: column;
 				align-items: center;
 			}
-			.card {
-				background-color: #fff;
-				margin-left: auto;
-				margin-right: auto;
-				width: 100%;
-				overflow: hidden;
-				border-top: 1px solid #ccc;
-				border-bottom: 1px solid #ccc;
-			}
-			@media (min-width: 600px) {
-				.card {
-					max-width: 450px;
-					margin-top: 20px;
-					border: none;
-					border-radius: 4px;
-					box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
-				}
-			}
 		`;
 	}
 }

diff --git a/src/power-meter.js b/src/power-meter.js
@@ -2,6 +2,7 @@ import { LitElement, html, css } from "lit-element";
 
 import "@authentic/mwc-circular-progress";
 import "@authentic/mwc-icon";
+import "./card.js";
 
 const counters = [
 	{ id: 60, name: "Kueche" },

@@ -63,7 +64,7 @@ class PowerMeter extends LitElement {
 	async _loadData() {
 		const newData = {};
 		await Promise.all(counters.map(async (counter) => {
-			const d = await fetch(`http://192.168.1.1:8070/last/${counter.id}`)
+			const d = await fetch(`http://${window.location.host}/gosdm/last/${counter.id}`)
 				.then(resp => resp.json());
 
 			newData[d.ModbusDeviceId] = {

@@ -87,26 +88,28 @@ class PowerMeter extends LitElement {
 						<mwc-icon>cloud_off</mwc-icon> Disconnected
 					`}
 				</div>
-				<div class="card table">
-					<div class="table-row table-head">
-						<div class="table-column">Name</div>
-						<div class="table-column">Voltage</div>
-						<div class="table-column">Power</div>
-						<div class="table-column">Power Factor</div>
-						<div class="table-column">Frequency</div>
-						<div class="table-column">Import</div>
-					</div>
-					${Object.entries(this.data).map(([_, d]) => html`
-						<div class="table-row">
-							<div class="table-column">${d.name}</div>
-							<div class="table-column">${round(d.Voltage.L1, 2)} V</div>
-							<div class="table-column">${round(d.Power.L1, 2)} W</div>
-							<div class="table-column">${round(d.Cosphi.L1, 2)}</div>
-							<div class="table-column">${round(d.Frequency, 2)}</div>
-							<div class="table-column">${round(d.TotalImport, 2)} kWh</div>
+				<smarthome-card>
+					<div class="table">
+						<div class="table-row table-head">
+							<div class="table-column">Name</div>
+							<div class="table-column">Voltage</div>
+							<div class="table-column">Power</div>
+							<div class="table-column">Power Factor</div>
+							<div class="table-column">Frequency</div>
+							<div class="table-column">Import</div>
 						</div>
-					`)}
-				</div>
+						${Object.entries(this.data).map(([_, d]) => html`
+							<div class="table-row">
+								<div class="table-column">${d.name}</div>
+								<div class="table-column">${round(d.Voltage.L1, 2)} V</div>
+								<div class="table-column">${round(d.Power.L1, 2)} W</div>
+								<div class="table-column">${round(d.Cosphi.L1, 2)}</div>
+								<div class="table-column">${round(d.Frequency, 2)}</div>
+								<div class="table-column">${round(d.TotalImport, 2)} kWh</div>
+							</div>
+						`)}
+					</div>
+				</smarthome-card>
 			` : html`
 				<div id="loading">
 					<h3>Trying to connect...</h3>

@@ -140,15 +143,6 @@ class PowerMeter extends LitElement {
 				justify-content: center;
 				align-items: center;
 			}
-			.card {
-				background-color: #fff;
-				margin-left: auto;
-				margin-right: auto;
-				width: 100%;
-				overflow: hidden;
-				border-top: 1px solid #ccc;
-				border-bottom: 1px solid #ccc;
-			}
 			.table {
 				display: flex;
 				flex-direction: row;

@@ -173,13 +167,6 @@ class PowerMeter extends LitElement {
 				background-color: #fff;
 			}
 			@media (min-width: 600px) {
-				.card {
-					max-width: 450px;
-					margin-top: 20px;
-					box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
-					border: none;
-					border-radius: 4px;
-				}
 				#connection-status {
 					margin-top: 20px;
 				}

diff --git a/src/settings.js b/src/settings.js
@@ -1,6 +1,7 @@
 import { LitElement, html, css } from "lit-element";
 
 import "@authentic/mwc-ripple";
+import "./card.js";
 
 class Settings extends LitElement {
 	_forceUpdate(evt) {

@@ -8,7 +9,7 @@ class Settings extends LitElement {
 
 	render() {
 		return html`
-			<div class="card">
+			<smarthome-card>
 				<a href="https://www.gnu.org/licenses/agpl-3.0-standalone.html">
 					<span>License</span>
 					<mwc-ripple></mwc-ripple>

@@ -17,7 +18,7 @@ class Settings extends LitElement {
 					<span>Force update</span>
 					<mwc-ripple></mwc-ripple>
 				</p>
-			</div>
+			</smarthome-card>
 		`;
 	}
 

@@ -43,21 +44,6 @@ class Settings extends LitElement {
 				height: 14px;
 				border-bottom: 1px solid #ccc;
 			}
-			.card {
-				background-color: #fff;
-				box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
-				border-radius: 4px;
-				margin-left: auto;
-				margin-right: auto;
-				width: 100%;
-				overflow: hidden;
-			}
-			@media (min-width: 600px) {
-				.card {
-					max-width: 450px;
-					margin-top: 20px;
-				}
-			}
 		`;
 	}
 }