webdemo: use flexbox css

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

index d0af1ac9f940d067148ea5c940520fdcb56dbd96..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();
@@ -47,6 +48,8 @@
                 tstamp = document.getElementById("tstamp");
                 if (qimei) {
                         imei.value = qimei;
+               } else if (limei) {
+                       imei.value = limei;
                 }
                 open_ws();
         }
@@ -158,6 +161,7 @@
                 imei.disabled = false;
                 send.disabled = false;
                 clear.disabled = false;
+               locations.splice(0);
                 sendIMEI();
         }
         function ws_onmessage(event) {
@@ -215,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)">
@@ -225,18 +230,15 @@
                 <input type="button" id="clear" name="clear" value="Clear"
                  onclick="sendIMEI(true)" disabled>
                 <span id="subslist"></span>
-               <span style="float:right">
-                       | <span id="devstatus"></span>
-                       | <span id="tstamp"></span>
-               </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>