Add animated loader
This commit is contained in:
Bartek Fabiszewski
parent
cef5cc1244
commit
637111bbd3
12
css/main.css
12
css/main.css
@ -305,4 +305,14 @@ button {
|
||||
|
||||
.show { display: block; }
|
||||
|
||||
.icon { height: 1.4em; }
|
||||
.icon { height: 1.4em; }
|
||||
|
||||
.u { text-decoration: underline; }
|
||||
|
||||
.loader {
|
||||
animation: blink 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
16
index.php
16
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>
|
||||
|
||||
108
js/main.js
108
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) {
|
||||
var xml = xhr.responseXML;
|
||||
var positions = xml.getElementsByTagName('position');
|
||||
if (positions.length > 0) {
|
||||
clearMap();
|
||||
displayTrack(xml, update);
|
||||
if (xhr.readyState == 4) {
|
||||
if (xhr.status == 200) {
|
||||
var xml = xhr.responseXML;
|
||||
var positions = xml.getElementsByTagName('position');
|
||||
if (positions.length > 0) {
|
||||
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) {
|
||||
var xml = xhr.responseXML;
|
||||
if (xhr.readyState == 4) {
|
||||
var error = true;
|
||||
var message = "";
|
||||
if (xml) {
|
||||
var root = xml.getElementsByTagName('root');
|
||||
if (root.length && getNode(root[0], 'error') == 0) {
|
||||
trackId = getNode(root[0], 'trackid');
|
||||
trackCnt = getNode(root[0], 'trackcnt');
|
||||
getTracks(userid);
|
||||
loadTrack(userid, trackId, 1);
|
||||
if (trackCnt > 1) {
|
||||
alert(sprintf(lang['imultiple'], trackCnt));
|
||||
if (xhr.status == 200) {
|
||||
var xml = xhr.responseXML;
|
||||
if (xml) {
|
||||
var root = xml.getElementsByTagName('root');
|
||||
if (root.length && getNode(root[0], 'error') == 0) {
|
||||
trackId = getNode(root[0], 'trackid');
|
||||
trackCnt = getNode(root[0], 'trackcnt');
|
||||
getTracks(userid, trackId);
|
||||
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) {
|
||||
var xml = xhr.responseXML;
|
||||
var trackSelect = document.getElementsByName('track')[0];
|
||||
clearOptions(trackSelect);
|
||||
var tracks = xml.getElementsByTagName('track');
|
||||
if (tracks.length > 0) {
|
||||
fillOptions(xml);
|
||||
} else {
|
||||
clearMap();
|
||||
if (xhr.readyState == 4) {
|
||||
if (xhr.status == 200) {
|
||||
var xml = xhr.responseXML;
|
||||
var trackSelect = document.getElementsByName('track')[0];
|
||||
clearOptions(trackSelect);
|
||||
var tracks = xml.getElementsByTagName('track');
|
||||
if (tracks.length > 0) {
|
||||
fillOptions(xml, userid, trackid);
|
||||
} 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');
|
||||
loadTrack(userid, defaultTrack, 1);
|
||||
var defaultTrack = tid || getNode(tracks[0], 'trackid');
|
||||
var defaultUser = uid || userid;
|
||||
loadTrack(defaultUser, defaultTrack, 1);
|
||||
}
|
||||
|
||||
function clearOptions(el) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user