Add vue components

volkszaehler · May 31, 2020 · c140bde · c140bde
1 parent 0544eb4
commit c140bde
Show file tree

Hide file tree

Showing 4 changed files with 231 additions and 215 deletions.
diff --git a/assets/index.html b/assets/index.html
@@ -37,6 +37,20 @@
 		</div>
 	</nav>
 
+	<template id="measurement">
+		<tr class="d-flex" v-if="this.display">
+			<td class="col-3">${title}</td>
+			<td class="col-2" v-if="this.l1">${val1}</td>
+			<td class="col-2" v-else>&mdash;</td>
+			<td class="col-2" v-if="this.l2">${val2}</td>
+			<td class="col-2" v-else>&mdash;</td>
+			<td class="col-2" v-if="this.l3">${val3}</td>
+			<td class="col-2" v-else>&mdash;</td>
+			<td class="col-3" v-if="this.sum">${valsum}</td>
+			<td class="col-3" v-else>&mdash;</td>
+		</tr>
+	</template>
+
 	<div class="container">
 		<div id="realtime">
 			<h1>Measurements</h1>
@@ -395,6 +409,63 @@ <h1>Measurements</h1>
 					</tr>
 				</tbody>
 			</table>
+
+			<table class="metertable table table-striped" v-for="(m, idx) in sortedMeters">
+				<thead class="thead-dark">
+					<tr class="d-flex">
+						<th class="col-3">${ idx }</th>
+						<th class="col-2">L1</th>
+						<th class="col-2">L2</th>
+						<th class="col-2">L3</th>
+						<th class="col-3">Total</th>
+					</tr>
+				</thead>
+				<tbody>
+					<!-- strings -->
+					<tr is="row" v-bind:data="m" val="DCVoltage" title="DC Voltage (V)"></tr>
+					<tr is="row" v-bind:data="m" val="DCCurrent" title="DC Current (A)"></tr>
+					<tr is="row" v-bind:data="m" val="DCPower" title="DC Power (W)"></tr>
+					<tr is="row" v-bind:data="m" val="HeatsinkTemp" title="Heatsink Temperature (°C)"></tr>
+
+					<!-- battery -->
+					<tr is="row" v-bind:data="m" val="ChargeState" title="Charge State (%)"></tr>
+					<tr is="row" v-bind:data="m" val="BatteryVoltage" title="Battery Voltage (V)"></tr>
+
+					<!-- meter actuals -->
+					<tr is="row" v-bind:data="m" val="Voltage" title="Voltage (V)"></tr>
+					<tr is="row" v-bind:data="m" val="Current" title="Current (A)"></tr>
+					<tr is="row" v-bind:data="m" val="Power" title="Power (W)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ReactivePower" title="Reactive Power (var)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ApparentPower" title="Apparent Power (VA)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ImportPower" title="Import Power (W)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ExportPower" title="Export Power (W)" sum></tr>
+
+					<!-- meter energy -->
+					<tr is="row" v-bind:data="m" val="Sum" title="Sum (kWh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="SumT1" title="Tariff 1 Sum (kWh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="SumT2" title="Tariff 2 Sum (kWh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="Import" title="Import (kWh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ImportT1" title="Tariff 1 Import (kWh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ImportT2" title="Tariff 2 Import (kWh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="Export" title="Export (kWh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ExportT1" title="Tariff 1 Export (kWh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ExportT2" title="Tariff 2 Export (kWh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ReactiveSum" title="Reactive Sum (kvarh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ReactiveSumT1" title="Tariff 1 Reactive Sum (kvarh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ReactiveSumT2" title="Tariff 2 Reactive Sum (kvarh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ReactiveImport" title="Reactive Import (kvarh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ReactiveImportT1" title="Tariff 1 Reactive Import (kvarh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ReactiveImportT2" title="Tariff 2 Reactive Import (kvarh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ReactiveExport" title="Reactive Export (kvarh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ReactiveExportT1" title="Tariff 1 Reactive Export (kvarh)" sum></tr>
+					<tr is="row" v-bind:data="m" val="ReactiveExportT2" title="Tariff 2 Reactive Export (kvarh)" sum></tr>
+
+					<!-- quality -->
+					<tr is="row" v-bind:data="m" val="Cosphi" title="Power Factor (cos 𝜑)"></tr>
+					<tr is="row" v-bind:data="m" val="THD" title="THD Voltage ("></tr>
+					<tr is="row" v-bind:data="m" val="Frequency" title="Frequency (Hz)"></tr>
+				</tbody>
+			</table>
 		</div>
 
 		<div id="status">

diff --git a/assets/js/app.js b/assets/js/app.js
@@ -1,3 +1,56 @@
+Vue.component('row', {
+	template: '#measurement',
+	delimiters: ["${", "}"],
+	props: {
+		data: Object,
+		title: String,
+		val: String,
+		sum: Boolean,
+	},
+	data: function () {
+		self = this;
+
+		// p determines if the argumnt is non-null
+		let p = function (i) {
+			return self.data[i] !== undefined && self.data[i] !== null && self.data[i] !== "";
+		}
+
+		// val returns addable value: null, NaN and empty are converted to 0
+		let v = function (i) {
+			let v = parseFloat(self.data[i]);
+			return isNaN(v) ? 0 : v;
+		}
+
+		// total sum, phase or string definition
+		let l123 = p(this.val);
+		let l1 = p(this.val+"L1") || p(this.val+"S1");
+		let l2 = p(this.val+"L2") || p(this.val+"S2");
+		let l3 = p(this.val+"L3") || p(this.val+"S3");
+
+		let valsum;
+		if (this.sum) {
+			if (l123) {
+				valsum = v(this.val);
+			} else if (p(this.val+"L1") || p(this.val+"L2") || p(this.val+"L3")) {
+				valsum = v(this.val+"L1") + v(this.val+"L2") + v(this.val+"L3");
+			} else {
+				valsum = v(this.val+"S1") + v(this.val+"S2") + v(this.val+"S3");
+			}
+		}
+
+		return {
+			display: l123 || l1 || l2 || l3,
+			l1: l1,
+			l2: l2,
+			l3: l3,
+			val1: (p(this.val+"L1") ? v(this.val+"L1") : v(this.val+"S1")).toFixed(2),
+			val2: (p(this.val+"L2") ? v(this.val+"L2") : v(this.val+"S2")).toFixed(2),
+			val3: (p(this.val+"L3") ? v(this.val+"L3") : v(this.val+"S3")).toFixed(2),
+			valsum: valsum.toFixed(2),
+		};
+	},
+});
+
 var dataapp = new Vue({
 	el: '#realtime',
 	delimiters: ['${', '}'],
@@ -128,15 +181,16 @@ function connectSocket() {
 	var ws, loc = window.location;
 	var protocol = loc.protocol == "https:" ? "wss:" : "ws:"
 
-	ws = new WebSocket(protocol + "//" + loc.hostname + (loc.port ? ":" + loc.port : "") + "/ws");
+	// ws = new WebSocket(protocol + "//" + loc.hostname + (loc.port ? ":" + loc.port : "") + "/ws");
+	ws = new WebSocket("ws://localhost:8081/ws");
 
 	ws.onerror = function(evt) {
 		// console.warn("Connection error");
 		ws.close();
 	}
 	ws.onclose = function (evt) {
 		// console.warn("Connection closed");
-		window.setTimeout(connectSocket, 100);
+		window.setTimeout(connectSocket, 1000);
 	};
 	ws.onmessage = function (evt) {
 		var json = JSON.parse(evt.data);