improve track time display

[lantea.git] / js / ui.js

diff --git a/js/ui.js b/js/ui.js
index 5e4869c5d2862128f7a1cbd12bd4985d69e5333e..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").style.display == "block") {
-    // 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,25 +156,37 @@ 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.style.display != "block") {
-    fs.style.display = "block";
+  if (fs.classList.contains("hidden")) {
+    fs.classList.remove("hidden");
     showUI();
+    gTrackUpdateInterval = setInterval(updateTrackInfo, 1000);
   }
   else {
-    fs.style.display = "none";
+    clearInterval(gTrackUpdateInterval);
+    fs.classList.add("hidden");
   }
 }
 
 function toggleSettings() {
   var fs = document.getElementById("settingsArea");
-  if (fs.style.display != "block") {
-    fs.style.display = "block";
+  if (fs.classList.contains("hidden")) {
+    fs.classList.remove("hidden");
     showUI();
   }
   else {
-    fs.style.display = "none";
+    fs.classList.add("hidden");
   }
 }