changeset 85:b929614334be

Livemap: Display last update time.
author Lewin Bormann <lbo@spheniscida.de>
date Mon, 07 Dec 2020 11:07:28 +0100
parents 900d688cd1b9
children d2ff3a9d066d
files TODO assets/livemap.html assets/style.css
diffstat 3 files changed, 23 insertions(+), 4 deletions(-) [+]
line wrap: on
line diff
--- a/TODO	Sun Dec 06 21:52:47 2020 +0100
+++ b/TODO	Mon Dec 07 11:07:28 2020 +0100
@@ -1,9 +1,8 @@
 GENERAL
 
 * UI
- * trackme: Tell user to fill secret/client
-  * Show link to livemap
- * show circle radius by accuracy
+ * livemap: show circle radius by accuracy
+ * livemap: show time of last update
 * API
 
 FEATURES
--- a/assets/livemap.html	Sun Dec 06 21:52:47 2020 +0100
+++ b/assets/livemap.html	Mon Dec 07 11:07:28 2020 +0100
@@ -8,12 +8,16 @@
     <script src="thirdparty/leaflet.js"></script>
     <script src="shared.js"></script>
 
-    <span style="color: blue; font-weight: bold; margin-right: 3em;">GeoHub LiveMap</span>
+    <span id="livemapTitle">GeoHub LiveMap</span>
     <span id="inputFields">
         Client: <input type="text" value="" id="inputClient" />
         Secret: <input type="text" value="" id="inputSecret" />
         <input type="button" value="Go!" id="inputGoButton" onclick="buttonGoClicked()" />
     </span>
+    <span id="infoFields">
+        Last Update: <span id="outputLastUpdate"> </span>
+    </span>
+
     <div id="mapid"> </div>
 
     <script>
@@ -89,6 +93,8 @@
                 // 13 is a good default zoom for an updated point.
                 mymap.setView([coords[1], coords[0]], mapZoomed ? mymap.getZoom() : 13);
                 mapZoomed = true;
+
+                updateUI(lastfeature.properties.time);
             }
 
             // Install next XHR.
@@ -135,6 +141,9 @@
         lastXHR = xhr;
     }
 
+    function updateUI(time) {
+        document.getElementById('outputLastUpdate').textContent = Date(time).toLocaleString();
+    }
     // "Go!" was clicked - clear markers and fetch data for new source.
     function buttonGoClicked() {
         clearAllMarkers();
--- a/assets/style.css	Sun Dec 06 21:52:47 2020 +0100
+++ b/assets/style.css	Mon Dec 07 11:07:28 2020 +0100
@@ -1,3 +1,14 @@
 #mapid {
     height: 100%;
+    margin: 5px;
 }
+#livemapTitle {
+    color: blue;
+    font-weight: bold;
+    margin-right: 3em;
+}
+#infoFields {
+    border-style: solid;
+    border-color: green;
+    padding: 5px;
+}