Add animated loader

css/main.css

@@ -306,3 +306,13 @@ button {
 .show { display: block; }
 
 .icon { height: 1.4em; }
+
+.u { text-decoration: underline; }
+
+.loader {
+  animation: blink 1s linear infinite;
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}

index.php

@@ -125,7 +125,7 @@
 
         <div id="user">
           <?php if (!empty($usersArr)): ?>
-            <br><?= $lang["user"] ?><br>
+            <div class="menutitle" style="padding-top: 1em"><?= $lang["user"] ?></div>
             <form>
               <select name="user" onchange="selectUser(this);">
                 <option value="0"><?= $lang["suser"] ?></option>
@@ -138,7 +138,7 @@
         </div>
 
         <div id="track">
-          <?= $lang["track"] ?><br>
+          <div class="menutitle"><?= $lang["track"] ?></div>
           <form>
             <select name="track" onchange="selectTrack(this)">
               <?php foreach ($tracksArr as $aTrack): ?>
@@ -158,7 +158,7 @@
         </div>
 
         <div id="api">
-          <?= $lang["api"] ?><br>
+          <div class="menutitle"><?= $lang["api"] ?></div>
           <form>
             <select name="api" onchange="loadMapAPI(this.options[this.selectedIndex].value);">
               <option value="gmaps"<?= (uConfig::$mapapi == "gmaps") ? " selected" : "" ?>>Google Maps</option>
@@ -168,7 +168,7 @@
         </div>
 
         <div id="lang">
-          <?= $lang["language"] ?><br>
+          <div class="menutitle"><?= $lang["language"] ?></div>
           <form>
             <select name="units" onchange="setLang(this.options[this.selectedIndex].value);">
               <?php asort($langsArr); ?>
@@ -180,7 +180,7 @@
         </div>
 
         <div id="units">
-          <?= $lang["units"] ?><br>
+          <div class="menutitle"><?= $lang["units"] ?></div>
           <form>
             <select name="units" onchange="setUnits(this.options[this.selectedIndex].value);">
               <option value="metric"<?= (uConfig::$units == "metric") ? " selected" : "" ?>><?= $lang["metric"] ?></option>
@@ -190,14 +190,14 @@
         </div>
 
         <div id="export">
-          <u><?= $lang["export"] ?></u><br>
+          <div class="menutitle u"><?= $lang["export"] ?></div>
           <a class="menulink" href="javascript:void(0);" onclick="exportFile('kml', userid, trackid);">kml</a>
           <a class="menulink" href="javascript:void(0);" onclick="exportFile('gpx', userid, trackid);">gpx</a>
         </div>
 
         <?php if ($user->isValid): ?>
           <div id="import">
-            <u><?= $lang["import"] ?></u><br>
+            <div class="menutitle u"><?= $lang["import"] ?></div>
             <form id="importForm" enctype="multipart/form-data" method="post">
               <input type="hidden" name="MAX_FILE_SIZE" value="<?= uUtils::getUploadMaxSize() ?>" />
               <input type="file" id="inputFile" name="gpx" style="display:none" onchange="importFile(this)" />
@@ -206,7 +206,7 @@
           </div>
 
           <div id="admin_menu">
-            <u><?= $lang["adminmenu"] ?></u><br>
+            <div class="menutitle u"><?= $lang["adminmenu"] ?></div>
             <?php if ($user->isAdmin): ?>
               <a class="menulink" href="javascript:void(0);" onclick="addUser()"><?= $lang["adduser"] ?></a>
               <a class="menulink" href="javascript:void(0);" onclick="editUser()"><?= $lang["edituser"] ?></a>

js/main.js

@@ -24,8 +24,7 @@ if (units == 'imperial') {
   unit_m = 'ft';
   factor_km = 0.62; // to miles
   unit_km = 'mi';
-}
+} else {
-else {
   factor_kmh = 1;
   unit_kmh = 'km/h';
   factor_m = 1;
@@ -115,22 +114,27 @@ function getXHR() {
 }
 
 function loadTrack(userid, trackid, update) {
+  var title = document.getElementById("track").getElementsByClassName("menutitle")[0];
   if (trackid < 0) { return; }
   if (latest == 1) { trackid = 0; }
   var xhr = getXHR();
   xhr.onreadystatechange = function () {
-    if (xhr.readyState == 4 && xhr.status == 200) {
+    if (xhr.readyState == 4) {
-      var xml = xhr.responseXML;
+      if (xhr.status == 200) {
-      var positions = xml.getElementsByTagName('position');
+        var xml = xhr.responseXML;
-      if (positions.length > 0) {
+        var positions = xml.getElementsByTagName('position');
-        clearMap();
+        if (positions.length > 0) {
-        displayTrack(xml, update);
+          clearMap();
+          displayTrack(xml, update);
+        }
       }
       xhr = null;
+      removeLoader(title);
     }
   }
   xhr.open('GET', 'utils/getpositions.php?trackid=' + trackid + '&userid=' + userid, true);
   xhr.send();
+  setLoader(title);
 }
 
 function parsePosition(p) {
@@ -224,6 +228,7 @@ function exportFile(type, userid, trackid) {
 
 function importFile(input) {
   var form = input.parentElement;
+  var title = form.parentElement.getElementsByClassName("menutitle")[0];
   var sizeMax = form.elements['MAX_FILE_SIZE'].value;
   if (input.files && input.files.length == 1 && input.files[0].size > sizeMax) {
     alert(sprintf(lang['isizefailure'], sizeMax));
@@ -231,43 +236,62 @@ function importFile(input) {
   }
   var xhr = getXHR();
   xhr.onreadystatechange = function() {
-    if (xhr.readyState == 4 && xhr.status == 200) {
+    if (xhr.readyState == 4) {
-      var xml = xhr.responseXML;
+      var error = true;
       var message = "";
-      if (xml) {
+      if (xhr.status == 200) {
-        var root = xml.getElementsByTagName('root');
+        var xml = xhr.responseXML;
-        if (root.length && getNode(root[0], 'error') == 0) {
+        if (xml) {
-          trackId = getNode(root[0], 'trackid');
+          var root = xml.getElementsByTagName('root');
-          trackCnt = getNode(root[0], 'trackcnt');
+          if (root.length && getNode(root[0], 'error') == 0) {
-          getTracks(userid);
+            trackId = getNode(root[0], 'trackid');
-          loadTrack(userid, trackId, 1);
+            trackCnt = getNode(root[0], 'trackcnt');
-          if (trackCnt > 1) {
+            getTracks(userid, trackId);
-            alert(sprintf(lang['imultiple'], trackCnt));
+            if (trackCnt > 1) {
+              alert(sprintf(lang['imultiple'], trackCnt));
+            }
+            error = false;
+          } else if (root.length) {
+            errorMsg = getNode(root[0], 'message');
+            if (errorMsg) { message = errorMsg; }
           }
-          return;
         }
-        errorMsg = getNode(root[0], 'message');
-        if (errorMsg) { message = errorMsg; }
       }
-      alert(lang['actionfailure'] + '\n' + message);
+      if (error) {
+        alert(lang['actionfailure'] + '\n' + message);
+      }
+      removeLoader(title);
       xhr = null;
     }
   }
-  // FIXME: show progress
   xhr.open("POST", "utils/import.php", true);
   xhr.send(new FormData(form));
   input.value = "";
+  setLoader(title);
+}
+
+function setLoader(el) {
+  var s = el.textContent || el.innerText;
+  var newHTML = '';
+  for (var i = 0, len = s.length; i < len; i++) {
+    newHTML += '<span class="loader">' + s.charAt(i) + '</span>';
+  }
+  el.innerHTML = newHTML;
+}
+
+function removeLoader(el) {
+  el.innerHTML = el.textContent || el.innerText;
 }
 
 function updateSummary(l, d, s) {
   var t = document.getElementById('summary');
   if (latest == 0) {
-    t.innerHTML = '<u>' + lang['summary'] + '</u><br>' +
+    t.innerHTML = '<div class="menutitle u">' + lang['summary'] + '</div>' +
       '<span><img class="icon" alt="' + lang['tdistance'] + '" title="' + lang['tdistance'] + '" src="images/distance.svg"> ' + (d.toKm() * factor_km).toFixed(2) + ' ' + unit_km + '</span>' +
       '<span><img class="icon" alt="' + lang['ttime'] + '" title="' + lang['ttime'] + '" src="images/time.svg"> ' + s.toHMS() + '</span>';
   }
   else {
-    t.innerHTML = '<u>' + lang['latest'] + ':</u><br>' + l;
+    t.innerHTML = '<div class="menutitle u">' + lang['latest'] + ':</div>' + l;
   }
 }
 
@@ -333,27 +357,32 @@ function selectUser(f) {
   getTracks(userid);
 }
 
-function getTracks(userid) {
+function getTracks(userid, trackid) {
+  var title = document.getElementById("track").getElementsByClassName("menutitle")[0];
   var xhr = getXHR();
   xhr.onreadystatechange = function () {
-    if (xhr.readyState == 4 && xhr.status == 200) {
+    if (xhr.readyState == 4) {
-      var xml = xhr.responseXML;
+      if (xhr.status == 200) {
-      var trackSelect = document.getElementsByName('track')[0];
+        var xml = xhr.responseXML;
-      clearOptions(trackSelect);
+        var trackSelect = document.getElementsByName('track')[0];
-      var tracks = xml.getElementsByTagName('track');
+        clearOptions(trackSelect);
-      if (tracks.length > 0) {
+        var tracks = xml.getElementsByTagName('track');
-        fillOptions(xml);
+        if (tracks.length > 0) {
-      } else {
+          fillOptions(xml, userid, trackid);
-        clearMap();
+        } else {
+          clearMap();
+        }
       }
+      removeLoader(title);
       xhr = null;
     }
   }
   xhr.open('GET', 'utils/gettracks.php?userid=' + userid, true);
   xhr.send();
+  setLoader(title);
 }
 
-function fillOptions(xml) {
+function fillOptions(xml, uid, tid) {
   var trackSelect = document.getElementsByName('track')[0];
   var tracks = xml.getElementsByTagName('track');
   var trackLen = tracks.length;
@@ -365,8 +394,9 @@ function fillOptions(xml) {
     option.innerHTML = htmlEncode(trackname);
     trackSelect.appendChild(option);
   }
-  var defaultTrack = getNode(tracks[0], 'trackid');
+  var defaultTrack = tid || getNode(tracks[0], 'trackid');
-  loadTrack(userid, defaultTrack, 1);
+  var defaultUser = uid || userid;
+  loadTrack(defaultUser, defaultTrack, 1);
 }
 
 function clearOptions(el) {