improve track time display

diff --git a/index.html b/index.html
index f5509cd25d1d8312d59677211379d605ccf8424f..27d7457753e5e41ba41e4d350477ed5abc9b94bf 100644 (file)
--- a/index.html
+++ b/index.html
@@ -22,8 +22,9 @@
 <h2 onclick="toggleTrackArea();">
 <image src="style/track.svg" alt=""> Track
 </h2>
-<p id="trackData"><span id="trackLength">0</span> km,
-<span id="trackDuration">0</span> min
+<p id="trackData"><span id="trackLength"><span id="trackLengthNum">0</span> km</span>,
+<span id="trackDuration"><span id="trackDurationH"><span id="trackDurationHNum">0</span> h</span>
+<span id="trackDurationM"><span id="trackDurationMNum">0</span> min</span></span>
 </p>
 <p>
 <input type="button" id="saveTrackButton" value="Save"

diff --git a/js/ui.js b/js/ui.js
index fbc8f3d289c01cbdc6354bc89e16422bdaa4806b..e1f2a55631849ffa2629483ebae1d8ca817215a4 100644 (file)
--- a/js/ui.js
+++ b/js/ui.js
@@ -10,6 +10,7 @@ var mainDB;
 var gAppInitDone = false;
 var gUIHideCountdown = 0;
 var gWaitCounter = 0;
+var gTrackUpdateInterval;
 var gAction, gActionLabel;
 var gOSMAPIURL = "http://api.openstreetmap.org/";
 
@@ -144,11 +145,6 @@ function showUI() {
 
 function maybeHideUI() {
   gUIHideCountdown--;
-  if (!document.getElementById("trackArea").classList.contains("hidden")) {
-    // If track area is visible, update track data.
-    document.getElementById("trackLength").textContent = calcTrackLength().toFixed(1);
-    document.getElementById("trackDuration").textContent = Math.round(calcTrackDuration()/60);
-  }
   if (gUIHideCountdown <= 0) {
     var areas = document.getElementsByClassName('overlayArea');
     for (var i = 0; i <= areas.length - 1; i++) {
@@ -160,13 +156,25 @@ function maybeHideUI() {
   }
 }
 
+function updateTrackInfo() {
+  document.getElementById("trackLengthNum").textContent = calcTrackLength().toFixed(1);
+  var duration = calcTrackDuration();
+  var durationM = Math.round(duration/60);
+  var durationH = Math.floor(durationM/60); durationM = durationM - durationH * 60;
+  document.getElementById("trackDurationH").style.display = durationH ? "inline" : "none";
+  document.getElementById("trackDurationHNum").textContent = durationH;
+  document.getElementById("trackDurationMNum").textContent = durationM;
+}
+
 function toggleTrackArea() {
   var fs = document.getElementById("trackArea");
   if (fs.classList.contains("hidden")) {
     fs.classList.remove("hidden");
     showUI();
+    gTrackUpdateInterval = setInterval(updateTrackInfo, 1000);
   }
   else {
+    clearInterval(gTrackUpdateInterval);
     fs.classList.add("hidden");
   }
 }