X-Git-Url: http://average.org/gitweb/?a=blobdiff_plain;f=webdemo%2Findex.html;h=0454d35040ffbec069e67ab4cb4f98bac3ae7a35;hb=a4a6606a30e8ba743c269083f1922222b0e1e81a;hp=b857360c160b6866aa7f23757f3ed0a5f6fec7a9;hpb=80feca2b9c331cab9a8657de8a587695c7aaac8d;p=loctrkd.git

diff --git a/webdemo/index.html b/webdemo/index.html
index b857360..0454d35 100644
--- a/webdemo/index.html
+++ b/webdemo/index.html
@@ -10,10 +10,11 @@
 	const urlParams = new URLSearchParams(window.location.search);
 	const qimei = urlParams.get("imei");
 
-	const ourl = new URL(window.location);
-	const wsproto = ourl.protocol === "https" ? "wss" : "ws";
-	const wshost = ourl.hostname ? ourl.hostname : "localhost";
-	const wsport = ourl.port ? ourl.port : 5049;
+	const wsproto = window.location.protocol === "https" ? "wss" : "ws";
+	const wshost = window.location.hostname ? window.location.hostname
+						: "localhost";
+	const wsport = window.location.port ? window.location.port : 5049;
+	const limei = window.location.pathname.substring(1)
 
 	const imeis = new Set();
 	const locations = new Array();
@@ -27,8 +28,9 @@
 	var sts;
 	var ws;
 	var imei;
-	var send;
-	var subslist;
+	var imeilst;
+	var clear;
+	var subunsub;
 	var tstamp;
 	var map;
 	var line;
@@ -40,13 +42,22 @@
 		sts = document.getElementById("sts");
 		sts.innerHTML = "uninitialized";
 		imei = document.getElementById("imei");
-		send = document.getElementById("send");
+		imeilst = document.getElementById("imeilst");
 		clear = document.getElementById("clear");
-		subslist = document.getElementById("subslist");
+		subunsub = document.getElementById("subunsub");
+		refresh = document.getElementById("refresh");
+		msgtxt = document.getElementById("msgtxt");
+		message = document.getElementById("message");
+		poweroff = document.getElementById("poweroff");
+		devstatus = document.getElementById("devstatus");
 		tstamp = document.getElementById("tstamp");
 		if (qimei) {
-			imei.value = qimei;
+			imeis.add(qimei);
+		} else if (limei) {
+			imeis.add(limei);
 		}
+		update_imeilst(imeis);
+		change(imei)
 		open_ws();
 	}
 
@@ -134,6 +145,14 @@
 		markers.addMarker(new OpenLayers.Marker(lonLat, icon));
 		map.setCenter(lonLat, 14);
 	}
+	function display_status(battery) {
+		console.log("status " + battery);
+		devstatus.innerHTML = "BAT: " + battery;
+	}
+	function display_cmdresult(result) {
+		console.log("cmdresult " + result);
+		devstatus.innerHTML = result;
+	}
 
 	function open_ws() {
 		wsurl = new URL("ws://localhost/");
@@ -151,13 +170,25 @@
 		console.log("ws opened " + event);
 		sts.innerHTML = "online";
 		imei.disabled = false;
-		send.disabled = false;
 		clear.disabled = false;
+		change(imei);
+		locations.splice(0);
 		sendIMEI();
 	}
 	function ws_onmessage(event) {
 		console.log("message " + event.data);
-		set_marker(JSON.parse(event.data));
+		msg = JSON.parse(event.data);
+		if (msg.type === "location") {
+			set_marker(msg);
+			if (msg.battery_percentage) {
+				display_status(msg.battery_percentage);
+			}
+		} else if (msg.type === "status") {
+			display_status(msg.battery);
+		} else if (msg.type === "cmdresult") {
+			display_cmdresult(msg.result);
+		}
+
 	}
 	function ws_onerror(event) {
 		console.log("error " + event);
@@ -167,22 +198,14 @@
 		console.log("close " + event);
 		sts.innerHTML = "offline";
 		imei.disabled = true;
-		send.disabled = true;
+		disablebtns(true);
 		clear.disabled = true;
 		setTimeout(open_ws, 5000);
 	}
 
-	function sendIMEI(do_clear) {
-		if (do_clear) {
-			imeis.clear();
-		} else {
-			if (imei.value) {
-				imeis.add(imei.value);
-			}
-		}
+	function sendIMEI() {
 		const imstr = Array.from(imeis).join(",");
 		document.title = imstr;
-		subslist.innerHTML = imstr;
 		var msg = {
 			imei: Array.from(imeis),
 			type: "subscribe",
@@ -191,7 +214,17 @@
 		};
 		console.log("sending" + JSON.stringify(msg));
 		ws.send(JSON.stringify(msg));
-		imei.value = "";
+	}
+
+	function sendCMD(cmd, imei, txt) {
+		var msg = {
+			imei: imei,
+			type: cmd,
+			timestamp: Date.now(),
+			txt: txt
+		};
+		console.log("sending" + JSON.stringify(msg));
+		ws.send(JSON.stringify(msg));
 	}
 
 	function handleKey(evt) {
@@ -201,28 +234,114 @@
 			}
 		}
 	}
+
+	function change(obj) {
+		if (obj.value) {
+			disablebtns(false);
+			if (imeis.has(obj.value)) {
+				subunsub.value = "-";
+				subunsub.title =
+				"Unsubscribe from notifications from "
+					+ obj.value;
+			} else {
+				subunsub.value = "+";
+				subunsub.title =
+				"Subscribe to notifications from "
+					+ obj.value;
+			}
+		} else {
+			disablebtns(true);
+			subunsub.value = "o";
+			subunsub.title = "";
+		}
+	}
+
+	function erase(obj) {
+		imei.value = "";
+		change(imei);
+	}
+
+	function disablebtns(yesorno) {
+		[subunsub, refresh, msgtxt, message,
+		 poweroff].forEach(function(obj) {
+			obj.disabled = yesorno;
+		})
+	}
+	function update_imeilst(imeis) {
+		while (imeilst.firstChild) {
+			imeilst.removeChild(imeilst.lastChild)
+		}
+		imeis.forEach(function(item) {
+			var entry = document.createElement('option');
+			entry.value = item;
+			imeilst.appendChild(entry);
+		})
+		if (imeis.size == 1) {
+			imei.value = imeis.values().next().value;
+		} else {
+			imei.value = "";
+		}
+	}
+
+	function buttonpress(obj) {
+		console.log("button value " + obj.value);
+		console.log("button id " + obj.id);
+		console.log("input value " + imei.value);
+		if (obj.id === "subunsub") {
+			if (obj.value === "+") {
+				imeis.add(imei.value);
+			} else if (obj.value === "-") {
+				imeis.delete(imei.value);
+				imei.value = "";
+			}
+			update_imeilst(imeis);
+			change(imei);
+			sendIMEI();
+		} else {
+			sendCMD(obj.id, imei.value, msgtxt.value);
+			msgtxt.value = "";
+		}
+	}
 </script>
 
 </head>
-<body onload="init();">
-	<div style="width:100%; height:2%" id="hdr">
+<body onload="init();" style="height: 100%; margin: 0; display: flex;
+				flex-direction: column; font-size: 1.5vh;">
+	<div style="margin: 0;" id="hdr">
 		<input id="imei" type="text" name="imei"
-		 size="16" maxlength="16" placeholder="Enter IMEI"
-		 autocomplete="off" onkeyup="handleKey(event)">
-		<input type="button" id="send" name="send" value="Send"
-		 onclick="sendIMEI(false)" disabled>
-		<input type="button" id="clear" name="clear" value="Clear"
-		 onclick="sendIMEI(true)" disabled>
-		<span id="subslist"></span>
-		<span id="tstamp" style="float:right"></span>
+		 size="16" maxlength="16" placeholder="Enter or click to choose"
+		 list="imeilst"
+		 oninput ="change(this)" onkeyup="handleKey(event)" />
+		<datalist id="imeilst"></datalist>
+		<input type="button" id="clear" name="clear" value="x"
+		 title="Clear input (Click on empty input shows avaliable choices)"
+		 onclick="erase(this)" />
+		<input type="button" id="subunsub" name="subunsub" value="+"
+		 title="Unsubscribe from events from IMEI"
+		 onclick="buttonpress(this)" />
+		<input type="button" id="refresh" name="refresh" value="Refresh"
+		 title="Send request to refresh location"
+		 onclick="buttonpress(this)" />
+		<input id="msgtxt" type="text" name="msgtxt"
+		 size="80" maxlength="80" placeholder="Input message text"
+		 onkeyup="handleKey(event)" />
+		<input type="button" id="message" name="message" value="Send"
+		 title="Send message"
+		 onclick="buttonpress(this)" />
+		<input type="button" id="poweroff" name="poweroff" value="Off"
+		 title="Send request to power off"
+		 style="background: red;"
+		 onclick="buttonpress(this)" />
+		<br />
 	</div>
-	<div style="width:100%; height:97%" id="map"></div>
-	<div style="width:100%; height:1%">
-		<span id="sts"></span>
-		<span id="about" style="float:right">
-			<a href="http://www.average.org/gps303/">
-				http://www.average.org/gps303/</a>
-		</span>
+	<div style="flex-grow: 1;" id="map"></div>
+	<div style="display: flex; flex-direction: row; width: 100%;">
+		<div id="sts" style="flex: none;"></div>
+		| <div id="devstatus" style="flex: auto;"></div>
+		| <div id="tstamp" style="flex: auto;"></div>
+		| <div id="about" style="flex: none; font-size: 1.5vmin;">
+			<a href="http://www.average.org/loctrkd/">
+				http://www.average.org/loctrkd/</a></div>
 	</div>
 </body>
 </html>