Mercurial > lbo > hg > geohub

changeset 86:d2ff3a9d066d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Livemap: Animate time field on update
author Lewin Bormann <lbo@spheniscida.de>
date Mon, 07 Dec 2020 11:23:30 +0100
parents b929614334be
children a4be115b5463
files assets/livemap.html assets/style.css
diffstat 2 files changed, 22 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/assets/livemap.html	Mon Dec 07 11:07:28 2020 +0100
+++ b/assets/livemap.html	Mon Dec 07 11:23:30 2020 +0100
@@ -14,7 +14,7 @@
         Secret: <input type="text" value="" id="inputSecret" />
         <input type="button" value="Go!" id="inputGoButton" onclick="buttonGoClicked()" />
     </span>
-    <span id="infoFields">
+    <span id="infoFields" class="timeChanged">
         Last Update: <span id="outputLastUpdate"> </span>
     </span>
 
@@ -70,8 +70,11 @@
                 console.log("Received outdated client update.");
                 return;
             }
-            if (response.client == getClient() && response['geo']) {
+            if (response.client == getClient() && response.geo) {
                 const features = response['geo']['features'];
+                if (features.length == 0) {
+                    return;
+                }
                 const lastfeature = features[0];
                 console.log(`xhrcallback: ${features.length} elements received.`);
                 // Backfill old circles. This happens when called from a
@@ -142,7 +145,13 @@
     }
 
     function updateUI(time) {
-        document.getElementById('outputLastUpdate').textContent = Date(time).toLocaleString();
+        var timefield = document.getElementById('outputLastUpdate');
+        var infofields = document.getElementById('infoFields');
+        // This dance restarts the green "update" animation.
+        infofields.style.animation = 'none';
+        infofields.offsetHeight;
+        timefield.textContent = Date(time).toLocaleString().replace(/\([\w\s]+\)/,'');
+        infofields.style.animation = null;
     }
     // "Go!" was clicked - clear markers and fetch data for new source.
     function buttonGoClicked() {
--- a/assets/style.css	Mon Dec 07 11:07:28 2020 +0100
+++ b/assets/style.css	Mon Dec 07 11:23:30 2020 +0100
@@ -12,3 +12,13 @@
     border-color: green;
     padding: 5px;
 }
+
+@keyframes blinkonupdate {
+    from {background-color: greenyellow;}
+    to {background-color: white;}
+}
+.timeChanged {
+    animation-name: blinkonupdate;
+    animation-duration: 2s;
+    animation-iteration-count: 1;
+}