webdemo: use flexbox css

[loctrkd.git] / webdemo / index.html
diff --git a/webdemo/index.html b/webdemo/index.html

index b857360c160b6866aa7f23757f3ed0a5f6fec7a9..20beb34c86f0c9a1239ecf993252b0b0ea7ec080 100644 (file)
--- 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();
@@ -43,9 +44,12 @@
                 send = document.getElementById("send");
                 clear = document.getElementById("clear");
                 subslist = document.getElementById("subslist");
+               devstatus = document.getElementById("devstatus");
                 tstamp = document.getElementById("tstamp");
                 if (qimei) {
                         imei.value = qimei;
+               } else if (limei) {
+                       imei.value = limei;
                 }
                 open_ws();
         }
@@ -134,6 +138,10 @@
                 markers.addMarker(new OpenLayers.Marker(lonLat, icon));
                 map.setCenter(lonLat, 14);
         }
+       function display_status(msg) {
+               console.log("status " + JSON.stringify(msg));
+               devstatus.innerHTML = "BAT: " + msg.battery;
+       }
  
         function open_ws() {
                 wsurl = new URL("ws://localhost/");
@@ -153,11 +161,18 @@
                 imei.disabled = false;
                 send.disabled = false;
                 clear.disabled = false;
+               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);
+               } else if (msg.type === "status") {
+                       display_status(msg);
+               }
+
         }
         function ws_onerror(event) {
                 console.log("error " + event);
@@ -204,8 +219,9 @@
  </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: 2.0vh;">
+       <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)">
@@ -214,15 +230,15 @@
                 <input type="button" id="clear" name="clear" value="Clear"
                  onclick="sendIMEI(true)" disabled>
                 <span id="subslist"></span>
-               <span id="tstamp" style="float:right"></span>
         </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: 2.0vmin;">
+                       <a href="http://www.average.org/loctrkd/">
+                               http://www.average.org/loctrkd/</a></div>
         </div>
  </body>
  </html>