Code cleanup

This commit is contained in:
Bartek Fabiszewski 2017-04-10 22:46:56 +02:00
parent c46486396c
commit 50e066e269
6 changed files with 210 additions and 234 deletions

View File

@ -1,6 +1,6 @@
# μlogger
This is a web application for real-time collection of geolocation data, tracks viewing and management.
This is a web application for real-time collection of geolocation data, tracks viewing and management.
Together with a dedicated [μlogger mobile client](https://github.com/bfabiszewski/ulogger-android) it may be used as a complete self hosted serverclient solution for logging and monitoring users' geolocation.
## Live demo:
@ -8,7 +8,7 @@ Together with a dedicated [μlogger mobile client](https://github.com/bfabiszews
## Requirements:
- PHP 5.5
- MYSQL 4.1
- MySQL 4.1
- browser with javascript enabled, cookies for authentication and saving preferences
## Features:
@ -20,20 +20,20 @@ Together with a dedicated [μlogger mobile client](https://github.com/bfabiszews
- user authentication
- Google Maps API v3
- OpenLayers v2 (OpenStreet and other layers)
- ajax
- ajax
- user preferences stored in cookies
- simple admin menu
## Install
1. Download the zip or clone the repository on your computer
2. Move it to your web server directory
3. Import the script/ulogger.sql file into a mysql database (you can use a msql interface such as [PhpMyAdmin](https://www.phpmyadmin.net).)
4. Create a copy of config.default.php and rename it config.php. Add database credentials in it.
5. Make sure your server is running (web server, eg. Apache, PHP and MySQL)
6. Go to http://your_local_server/ulogger-server/)
7. Connect with admin/admin
8. Change admin password
9. Create other user if needed
- Download the zip or clone the repository on your computer
- Move it to your web server directory
- Use script/ulogger.sql file to create database and tables (you can use a MySQL interface such as [PhpMyAdmin](https://www.phpmyadmin.net))
- Create a copy of config.default.php and rename it config.php. Add database credentials in it
- Make sure you have a web server running, e.g. Apache, also PHP and MySQL
- Open a browser and go to http://your_local_server/ulogger-server/
- Connect with admin/admin
- **Change admin password**
- Create other user if needed
## Todo
- install script
@ -44,4 +44,4 @@ Together with a dedicated [μlogger mobile client](https://github.com/bfabiszews
## License
- GPL
- μlogger is a fork of phpTrackme - tracks viewer I wrote for TrackMe app
- most icons come from iconmonstr
- most icons come from [iconmonstr](https://iconmonstr.com)

View File

@ -44,7 +44,7 @@ if (!$user->isValid && ($config::$require_authentication || defined('headless'))
$ssl = ((!isset($_SERVER['HTTPS']) || $_SERVER['HTTPS'] == "" || $_SERVER['HTTPS'] == "off") ? "http" : "https");
$auth_error = (isset($_REQUEST['auth_error']) ? $_REQUEST['auth_error'] : 0);
if (!$login){
if (!$login) {
// not authenticated and username not submited
// load form
if (defined('headless')) {
@ -54,9 +54,9 @@ if (!$user->isValid && ($config::$require_authentication || defined('headless'))
'<!DOCTYPE html>
<html>
<head>
<title>'.$lang["title"].'</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>' . $lang["title"] . '</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript">
function focus() {
@ -66,18 +66,18 @@ if (!$user->isValid && ($config::$require_authentication || defined('headless'))
</head>
<body onload="focus()">
<div id="login">
<div id="title">'.$lang["title"].'</div>
<div id="subtitle">'.$lang["private"].'</div>
<div id="title">' . $lang["title"] . '</div>
<div id="subtitle">' . $lang["private"] . '</div>
<form action="index.php" method="post">
'.$lang["username"].':<br />
<input type="text" name="user"><br />
'.$lang["password"].':<br />
<input type="password" name="pass"><br />
<br />
<input type="submit" value="'.$lang["login"].'">
'.(($force_login==1) ? "<input type=\"hidden\" name=\"force_login\" value=\"1\">" : "").'
' . $lang["username"] . ':<br>
<input type="text" name="user"><br>
' . $lang["password"] . ':<br>
<input type="password" name="pass"><br>
<br>
<input type="submit" value="' . $lang["login"] . '">
' . (($force_login == 1) ? "<input type=\"hidden\" name=\"force_login\" value=\"1\">" : "") . '
</form>
<div id="error">'.(($auth_error==1) ? $lang["authfail"] : "").'</div>
<div id="error">' . (($auth_error == 1) ? $lang["authfail"] : "") . '</div>
</div>
</body>
</html>';
@ -98,7 +98,7 @@ if (!$user->isValid && ($config::$require_authentication || defined('headless'))
session_name('ulogger');
session_start();
$user->storeInSession();
$url = str_replace("//", "/", $_SERVER['HTTP_HOST'].dirname($_SERVER['SCRIPT_NAME'])."/index.php");
$url = str_replace("//", "/", $_SERVER['HTTP_HOST'] . dirname($_SERVER['SCRIPT_NAME']) . "/index.php");
header("Location: $ssl://$url");
} else {
// unsuccessful
@ -106,13 +106,13 @@ if (!$user->isValid && ($config::$require_authentication || defined('headless'))
// destroy session
$_SESSION = NULL;
if (isset($_COOKIE[session_name('ulogger')])) {
setcookie(session_name('ulogger'),'',time()-42000,'/');
setcookie(session_name('ulogger'), '', time() - 42000, '/');
}
session_destroy();
if (defined('headless')) {
header('HTTP/1.1 401 Unauthorized', true, 401);
} else {
$url = str_replace("//", "/", $_SERVER['HTTP_HOST'].dirname($_SERVER['SCRIPT_NAME'])."/index.php");
$url = str_replace("//", "/", $_SERVER['HTTP_HOST'] . dirname($_SERVER['SCRIPT_NAME']) . "/index.php");
header("Location: $ssl://$url$error");
}
}

View File

@ -125,15 +125,15 @@ if ($trackId && $userId) {
$xml->writeAttribute("id", "point_" . $position->id);
$description =
"<div style=\"font-weight: bolder;padding-bottom: 10px;border-bottom: 1px solid gray;\">".
$lang["user"].": ".strtoupper($position->userLogin)."<br />".$lang["track"].": ".strtoupper($position->trackName).
$lang["user"].": ".strtoupper($position->userLogin)."<br>".$lang["track"].": ".strtoupper($position->trackName).
"</div>".
"<div>".
"<div style=\"padding-top: 10px;\"><b>".$lang["time"].":</b> ".$position->time."<br />".
(!is_null($position->speed) ? "<b>".$lang["speed"].":</b> ".round($position->speed * 3.6 * $factor_kmh, 2)." ".$unit_kmh."<br />" : "").
(!is_null($position->altitude) ? "<b>".$lang["altitude"].":</b> ".round($position->altitude * $factor_m)." ".$unit_m."<br />" : "").
"<b>".$lang["ttime"].":</b> ".toHMS($totalSeconds)."<br />".
"<b>".$lang["aspeed"].":</b> ".(($totalSeconds != 0) ? round($totalMeters / $totalSeconds * 3.6 * $factor_kmh, 2) : 0)." ".$unit_kmh."<br />".
"<b>".$lang["tdistance"].":</b> ".round($totalMeters / 1000 * $factor_km, 2)." ".$unit_km."<br />"."</div>".
"<div style=\"padding-top: 10px;\"><b>".$lang["time"].":</b> ".$position->time."<br>".
(!is_null($position->speed) ? "<b>".$lang["speed"].":</b> ".round($position->speed * 3.6 * $factor_kmh, 2)." ".$unit_kmh."<br>" : "").
(!is_null($position->altitude) ? "<b>".$lang["altitude"].":</b> ".round($position->altitude * $factor_m)." ".$unit_m."<br>" : "").
"<b>".$lang["ttime"].":</b> ".toHMS($totalSeconds)."<br>".
"<b>".$lang["aspeed"].":</b> ".(($totalSeconds != 0) ? round($totalMeters / $totalSeconds * 3.6 * $factor_kmh, 2) : 0)." ".$unit_kmh."<br>".
"<b>".$lang["tdistance"].":</b> ".round($totalMeters / 1000 * $factor_km, 2)." ".$unit_km."<br>"."</div>".
"<div style=\"font-size: smaller;padding-top: 10px;\">".$lang["point"]." ".$i." ".$lang["of"]." ".count($positionsArr)."</div>".
"</div>";
$xml->startElement("description");

316
index.php
View File

@ -17,212 +17,188 @@
* along with this program; if not, see <http://www.gnu.org/licenses/>.
*/
require_once("auth.php");
require_once("helpers/position.php");
require_once("helpers/track.php");
require_once("auth.php"); // sets $mysqli, $user
require_once("helpers/position.php");
require_once("helpers/track.php");
if ($user->isValid) {
$itemPass = '<a href="javascript:void(0)" onclick="changePass()"><img class="icon" src="images/lock.svg" \> ' . $lang["changepass"] . '</a>';
$itemLogout = '<a href="logout.php"><img class="icon" src="images/poweroff.svg" \> ' . $lang["logout"] . '</a>';
$userHeader = '
<div id="user_menu">
<a href="javascript:void(0);" onclick="userMenu()"><img class="icon" src="images/user.svg" \> ' . $user->login . '</a>
<div id="user_dropdown" class="dropdown">
' . $itemPass . '
' . $itemLogout . '
</div>
</div>';
} else {
$userHeader = '<a href="index.php?force_login=1"><img class="icon" src="images/key.svg" \> ' . $lang["login"] . '</a>';
}
$lastUserId = NULL;
$userForm = '';
if ($user->isAdmin || $config::$public_tracks) {
// public access or admin user
// prepare user select form
$userForm = '
<br /><u>' . $lang["user"] . '</u>
<br />
<form>
<select name="user" onchange="selectUser(this)">
<option value="0">' . $lang["suser"] . '</option>';
// get last position user
$lastPosition = new uPosition();
$lastPosition->getLast();
if ($lastPosition->isValid) {
$lastUserId = $lastPosition->userId;
}
$usersArr = $user->getAll();
if (!empty($usersArr)) {
foreach ($usersArr as $aUser) {
$userForm.= sprintf("<option %svalue=\"%s\">%s</option>\n", (($aUser->id == $lastUserId) ? "selected " : ""), $aUser->id, $aUser->login);
$displayUserId = NULL;
$usersArr = [];
if ($user->isAdmin || $config::$public_tracks) {
// public access or admin user
// get last position user
$lastPosition = new uPosition();
$lastPosition->getLast();
if ($lastPosition->isValid) {
// display track of last position user
$displayUserId = $lastPosition->userId;
}
// populate users array (for <select>)
$usersArr = $user->getAll();
} else if ($user->isValid) {
// display track of authenticated user
$displayUserId = $user->id;
}
$userForm.= '
</select>
</form>
';
}
// prepare track select form
$trackForm = '
<u>' . $lang["track"] . '</u><br />
<form>
<select name="track" onchange="selectTrack(this)">';
$displayId = NULL;
if ($lastUserId) {
// or user who did last move
$displayId = $lastUserId;
} else if ($user->isValid) {
// display track of authenticated user
$displayId = $user->id;
}
$track = new uTrack();
$tracksArr = $track->getAll($displayId);
$trackId = NULL;
if (!empty($tracksArr)) {
$trackId = $tracksArr[0]->id; // get id of the latest track
foreach ($tracksArr as $aTrack) {
$trackForm.= sprintf("<option value=\"%s\">%s</option>\n", $aTrack->id, $aTrack->name);
$track = new uTrack();
$tracksArr = $track->getAll($displayUserId);
if (!empty($tracksArr)) {
// get id of the latest track
$displayTrackId = $tracksArr[0]->id;
} else {
$tracksArr = [];
$displayTrackId = NULL;
}
}
$trackForm.= '
</select>
<input id="latest" type="checkbox" onchange="toggleLatest();"> ' . $lang["latest"] . '<br />
</form>
';
// map api select form
$apiForm = '
<u>' . $lang["api"] . '</u><br />
<form>
<select name="api" onchange="loadMapAPI(this.options[this.selectedIndex].value);">
<option value="gmaps"' . (($config::$mapapi == "gmaps") ? ' selected' : '') . '>Google Maps</option>
<option value="openlayers"' . (($config::$mapapi == "openlayers") ? ' selected' : '') . '>OpenLayers</option>
</select>
</form>
';
// language select form
$langForm = '
<u>' . $lang["language"] . '</u><br />
<form>
<select name="units" onchange="setLang(this.options[this.selectedIndex].value);">';
asort($langsArr);
foreach ($langsArr as $langCode => $langName) {
$langForm .= '<option value="' . $langCode . '"' . (($config::$lang == $langCode) ? ' selected' : '') . '>' . $langName . '</option>';
}
$langForm .= '
</select>
</form>
';
// units select form
$unitsForm = '
<u>' . $lang["units"] . '</u><br />
<form>
<select name="units" onchange="setUnits(this.options[this.selectedIndex].value);">
<option value="metric"' . (($config::$units == "metric") ? ' selected' : '') . '>' . $lang["metric"] . '</option>
<option value="imperial"' . (($config::$units == "imperial") ? ' selected' : '') . '>' . $lang["imperial"] . '</option>
</select>
</form>
';
// admin menu
$adminMenu = '';
$adminScript = '';
if ($user->isAdmin) {
$adminMenu = '
<div id="admin_menu">
<u>' . $lang["adminmenu"] . '</u><br />
<a href="javascript:void(0);" onclick="addUser()">' . $lang["adduser"] . '</a><br />
</div>
';
$adminScript = '<script type="text/javascript" src="admin.js"></script>';
}
print '<!DOCTYPE html>
$mysqli->close();
?>
<!DOCTYPE html>
<html>
<head>
<title>' . $lang["title"] . '</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="main.css" />
<title><?= $lang["title"] ?></title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="main.css">
<script>
var interval = ' . $config::$interval . ';
var userid = ' . (($displayId) ? $displayId : -1) . ';
var trackid = ' . (($trackId) ? $trackId : -1) . ';
var units = "' . $config::$units . '";
var mapapi = "' . $config::$mapapi . '";
var gkey = ' . (!empty($config::$gkey) ? '"' . $config::$gkey . '"' : 'null') . ';
var layer_ocm = "' . $config::$layer_ocm . '";
var layer_mq = "' . $config::$layer_mq . '";
var layer_osmapa = "' . $config::$layer_osmapa . '";
var layer_ump = "' . $config::$layer_ump . '";
var init_latitude = "' . $config::$init_latitude . '";
var init_longitude = "' . $config::$init_longitude . '";
var lang = ' . json_encode($lang) . ';
var interval = '<?= $config::$interval ?>';
var userid = '<?= ($displayUserId) ? $displayUserId : -1 ?>';
var trackid = '<?= ($displayTrackId) ? $displayTrackId : -1 ?>';
var units = '<?= $config::$units ?>';
var mapapi = '<?= $config::$mapapi ?>';
var gkey = '<?= !empty($config::$gkey) ? $config::$gkey : "null" ?>';
var layer_ocm = '<?= $config::$layer_ocm ?>';
var layer_mq = '<?= $config::$layer_mq ?>';
var layer_osmapa = '<?= $config::$layer_osmapa ?>';
var layer_ump = '<?= $config::$layer_ump ?>';
var init_latitude = '<?= $config::$init_latitude ?>';
var init_longitude = '<?= $config::$init_longitude ?>';
var lang = <?= json_encode($lang) ?>;
</script>
<script type="text/javascript" src="main.js"></script>
';
if ($config::$mapapi == "gmaps") {
print ' <script type="text/javascript" src="//maps.googleapis.com/maps/api/js' . (!empty($config::$gkey) ? '?key=' . $config::$gkey : '') . '"></script>
<script type="text/javascript" src="api_gmaps.js"></script>
';
} else {
print ' <script type="text/javascript" src="//openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="api_openlayers.js"></script>
';
}
print '
' . $adminScript . '
<script type="text/javascript" src="pass.js"></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
</script>
<?php if ($config::$mapapi == "gmaps"): ?>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js<?= !empty($config::$gkey) ? "?key={$config::$gkey}" : "" ?>"></script>
<script type="text/javascript" src="api_gmaps.js"></script>
<?php else: ?>
<script type="text/javascript" src="//openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="api_openlayers.js"></script>
<?php endif; ?>
<?php if ($user->isAdmin): ?>
<script type="text/javascript" src="admin.js"></script>
<?php endif; ?>
<script type="text/javascript" src="pass.js"></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages:['corechart'] });
</script>
</head>
<body onload="init();loadTrack(userid,trackid,1);">
<body onload="init(); loadTrack(userid, trackid, 1);">
<div id="menu">
<div id="menu-content">
' . $userHeader . '
<?php if ($user->isValid): ?>
<div id="user_menu">
<a href="javascript:void(0);" onclick="userMenu()"><img class="icon" alt="<?= $lang["user"] ?>" src="images/user.svg"> <?= $user->login ?></a>
<div id="user_dropdown" class="dropdown">
<a href="javascript:void(0)" onclick="changePass()"><img class="icon" alt="<?= $lang["changepass"] ?>" src="images/lock.svg"> <?= $lang["changepass"] ?></a>
<a href="logout.php"><img class="icon" alt="<?= $lang["logout"] ?>" src="images/poweroff.svg"> <?= $lang["logout"] ?></a>
</div>
</div>
<?php else: ?>
<a href="index.php?force_login=1"><img class="icon" alt="<?= $lang["login"] ?>" src="images/key.svg"> <?= $lang["login"] ?></a>
<?php endif; ?>
<div id="user">
' . $userForm . '
<?php if (!empty($usersArr)): ?>
<br><u><?= $lang["user"] ?></u><br>
<form>
<select name="user" onchange="selectUser(this);">
<option value="0"><?= $lang["suser"] ?></option>
<?php foreach ($usersArr as $aUser): ?>
<option <?= ($aUser->id == $displayUserId) ? "selected " : "" ?>value="<?= $aUser->id ?>"><?= $aUser->login ?></option>
<?php endforeach; ?>
</select>
</form>
<?php endif; ?>
</div>
<div id="track">
' . $trackForm . '
<input type="checkbox" onchange="autoReload();"> ' . $lang["autoreload"] . ' (<a href="javascript:void(0);" onclick="setTime()"><span id="auto">' . $config::$interval . '</span></a> s)<br />
<a href="javascript:void(0);" onclick="loadTrack(userid,trackid,0)">' . $lang["reload"] . '</a><br />
<u><?= $lang["track"] ?></u><br>
<form>
<select name="track" onchange="selectTrack(this)">
<?php foreach ($tracksArr as $aTrack): ?>
<option value="<?= $aTrack->id ?>"><?= $aTrack->name ?></option>
<?php endforeach; ?>
</select>
<input id="latest" type="checkbox" onchange="toggleLatest();"> <?= $lang["latest"] ?><br>
</form>
<input type="checkbox" onchange="autoReload();"><?= $lang["autoreload"] ?> (<a href="javascript:void(0);" onclick="setTime();"><span id="auto"><?= $config::$interval ?></span></a> s)<br>
<a href="javascript:void(0);" onclick="loadTrack(userid, trackid, 0);"><?= $lang["reload"] ?></a><br>
</div>
<div id="summary"></div>
<div id="other">
<a href="javascript:void(0);" onclick="toggleChart();">' . $lang["chart"] . '</a>
<a href="javascript:void(0);" onclick="toggleChart();"><?= $lang["chart"] ?></a>
</div>
<div id="api">
' . $apiForm . '
<u><?= $lang["api"] ?></u><br>
<form>
<select name="api" onchange="loadMapAPI(this.options[this.selectedIndex].value);">
<option value="gmaps"<?= ($config::$mapapi == "gmaps") ? " selected" : "" ?>>Google Maps</option>
<option value="openlayers"<?= ($config::$mapapi == "openlayers") ? " selected" : "" ?>>OpenLayers</option>
</select>
</form>
</div>
<div id="lang">
' . $langForm . '
<u><?= $lang["language"] ?></u><br>
<form>
<select name="units" onchange="setLang(this.options[this.selectedIndex].value);">
<?php asort($langsArr); ?>
<?php foreach ($langsArr as $langCode => $langName): ?>
<option value="<?= $langCode ?>"<?= ($config::$lang == $langCode) ? " selected" : "" ?>><?= $langName ?></option>
<?php endforeach; ?>
</select>
</form>
</div>
<div id="units">
' . $unitsForm . '
<u><?= $lang["units"] ?></u><br>
<form>
<select name="units" onchange="setUnits(this.options[this.selectedIndex].value);">
<option value="metric"<?= ($config::$units == "metric") ? " selected" : "" ?>><?= $lang["metric"] ?></option>
<option value="imperial"<?= ($config::$units == "imperial") ? " selected" : "" ?>><?= $lang["imperial"] ?></option>
</select>
</form>
</div>
<div id="export">
<u>' . $lang["download"] . '</u><br />
<a href="javascript:void(0);" onclick="load(\'kml\',userid,trackid)">kml</a><br />
<a href="javascript:void(0);" onclick="load(\'gpx\',userid,trackid)">gpx</a><br />
<u><?= $lang["download"] ?></u><br>
<a href="javascript:void(0);" onclick="load('kml', userid, trackid);">kml</a><br>
<a href="javascript:void(0);" onclick="load('gpx', userid, trackid);">gpx</a><br>
</div>
' . $adminMenu . '
<?php if ($user->isAdmin): ?>
<div id="admin_menu">
<u><?= $lang["adminmenu"] ?></u><br>
<a href="javascript:void(0);" onclick="addUser()"><?= $lang["adduser"] ?></a><br>
</div>
<?php endif; ?>
</div>
<div id="menu-close" onclick="toggleMenu();">»</div>
<div id="footer"><a target="_blank" href="https://github.com/bfabiszewski/ulogger-server"><span class="mi">μ</span>logger</a> ' . $config::$version . '</div>
<div id="footer"><a target="_blank" href="https://github.com/bfabiszewski/ulogger-server"><span class="mi">μ</span>logger</a> <?= $config::$version ?></div>
</div>
<div id="main">
<div id="map-canvas"></div>
<div id="bottom">
<div id="chart"></div>
<div id="close"><a href="javascript:void(0);" onclick="toggleChart(0);">' . $lang["close"] . '</a></div>
<div id="close"><a href="javascript:void(0);" onclick="toggleChart(0);"><?= $lang["close"] ?></a></div>
</div>
</div>
</body>
</html>';
$mysqli->close();
?>
</body>
</html>

View File

@ -20,12 +20,12 @@
session_name('ulogger');
session_start();
$_SESSION = NULL;
if (isset($_COOKIE[session_name('ulogger')])) {
setcookie(session_name('ulogger'),'',time()-42000,'/');
if (isset($_COOKIE[session_name('ulogger') ])) {
setcookie(session_name('ulogger'), '', time() - 42000, '/');
}
session_destroy();
$ssl = ((!isset($_SERVER['HTTPS']) || $_SERVER['HTTPS'] == "" || $_SERVER['HTTPS'] == "off") ? "http" : "https");
$url = str_replace("//", "/", $_SERVER['HTTP_HOST'].dirname($_SERVER['SCRIPT_NAME'])."/index.php");
$url = str_replace("//", "/", $_SERVER['HTTP_HOST'] . dirname($_SERVER['SCRIPT_NAME']) . "/index.php");
header("Location: $ssl://$url");
?>

48
main.js
View File

@ -174,39 +174,39 @@ function getPopupHtml(p, i, count) {
var time = dateTime[1];
var provider = '';
if (p.provider == 'gps') {
provider = ' (<img class="icon" alt="' + lang['gps'] + '" title="' + lang['gps'] + '" src="images/gps_dark.svg" />)';
provider = ' (<img class="icon" alt="' + lang['gps'] + '" title="' + lang['gps'] + '" src="images/gps_dark.svg">)';
} else if (p.provider == 'network') {
provider = ' (<img class="icon" alt="' + lang['network'] + '" title="' + lang['network'] + '" src="images/network_dark.svg" />)';
provider = ' (<img class="icon" alt="' + lang['network'] + '" title="' + lang['network'] + '" src="images/network_dark.svg">)';
}
var stats = '';
if (latest == 0) {
stats =
'<div id="pright">' +
'<img class="icon" src="images/stats_blue.svg" style="padding-left: 3em;" /><br />' +
'<img class="icon" alt="' + lang['ttime'] + '" title="' + lang['ttime'] + '" src="images/time_blue.svg" /> ' +
p.totalSeconds.toHMS() + '<br />' +
'<img class="icon" alt="' + lang['aspeed'] + '" title="' + lang['aspeed'] + '" src="images/speed_blue.svg" /> ' +
((p.totalSeconds > 0) ? ((p.totalMeters / p.totalSeconds).toKmH() * factor_kmh).toFixed() : 0) + ' ' + unit_kmh + '<br />' +
'<img class="icon" alt="' + lang['tdistance'] + '" title="' + lang['tdistance'] + '" src="images/distance_blue.svg" /> ' +
(p.totalMeters.toKm() * factor_km).toFixed(2) + ' ' + unit_km + '<br />' + '</div>';
'<img class="icon" alt="' + lang['track'] + '" src="images/stats_blue.svg" style="padding-left: 3em;"><br>' +
'<img class="icon" alt="' + lang['ttime'] + '" title="' + lang['ttime'] + '" src="images/time_blue.svg"> ' +
p.totalSeconds.toHMS() + '<br>' +
'<img class="icon" alt="' + lang['aspeed'] + '" title="' + lang['aspeed'] + '" src="images/speed_blue.svg"> ' +
((p.totalSeconds > 0) ? ((p.totalMeters / p.totalSeconds).toKmH() * factor_kmh).toFixed() : 0) + ' ' + unit_kmh + '<br>' +
'<img class="icon" alt="' + lang['tdistance'] + '" title="' + lang['tdistance'] + '" src="images/distance_blue.svg"> ' +
(p.totalMeters.toKm() * factor_km).toFixed(2) + ' ' + unit_km + '<br>' + '</div>';
}
popup =
'<div id="popup">' +
'<div id="pheader">' +
'<div><img alt="' + lang['user'] + '" title="' + lang['user'] + '" src="images/user_dark.svg" /> ' + p.username + '</div>' +
'<div><img alt="' + lang['track'] + '" title="' + lang['track'] + '" src="images/route_dark.svg" /> ' + p.trackname + '</div>' +
'<div><img alt="' + lang['user'] + '" title="' + lang['user'] + '" src="images/user_dark.svg"> ' + p.username + '</div>' +
'<div><img alt="' + lang['track'] + '" title="' + lang['track'] + '" src="images/route_dark.svg"> ' + p.trackname + '</div>' +
'</div>' +
'<div id="pbody">' +
((p.comments != null) ? '<div id="pcomments">' + p.comments + '</div>' : '') +
'<div id="pleft">' +
'<img class="icon" alt="' + lang['time'] + '" title="' + lang['time'] + '" src="images/calendar_dark.svg" /> ' + date + '<br />' +
'<img class="icon" alt="' + lang['time'] + '" title="' + lang['time'] + '" src="images/clock_dark.svg" /> ' + time + '<br />' +
((p.speed != null) ? '<img class="icon" alt="' + lang['speed'] + '" title="' + lang['speed'] + '" src="images/speed_dark.svg" /> ' +
(p.speed.toKmH() * factor_kmh) + ' ' + unit_kmh + '<br />' : '') +
((p.altitude != null) ? '<img class="icon" alt="' + lang['altitude'] + '" title="' + lang['altitude'] + '" src="images/altitude_dark.svg" /> ' +
(p.altitude * factor_m).toFixed() + ' ' + unit_m + '<br />' : '') +
((p.accuracy != null) ? '<img class="icon" alt="' + lang['accuracy'] + '" title="' + lang['accuracy'] + '" src="images/accuracy_dark.svg" /> ' +
(p.accuracy * factor_m).toFixed() + ' ' + unit_m + provider + '<br />' : '') +
'<img class="icon" alt="' + lang['time'] + '" title="' + lang['time'] + '" src="images/calendar_dark.svg"> ' + date + '<br>' +
'<img class="icon" alt="' + lang['time'] + '" title="' + lang['time'] + '" src="images/clock_dark.svg"> ' + time + '<br>' +
((p.speed != null) ? '<img class="icon" alt="' + lang['speed'] + '" title="' + lang['speed'] + '" src="images/speed_dark.svg"> ' +
(p.speed.toKmH() * factor_kmh) + ' ' + unit_kmh + '<br>' : '') +
((p.altitude != null) ? '<img class="icon" alt="' + lang['altitude'] + '" title="' + lang['altitude'] + '" src="images/altitude_dark.svg"> ' +
(p.altitude * factor_m).toFixed() + ' ' + unit_m + '<br>' : '') +
((p.accuracy != null) ? '<img class="icon" alt="' + lang['accuracy'] + '" title="' + lang['accuracy'] + '" src="images/accuracy_dark.svg"> ' +
(p.accuracy * factor_m).toFixed() + ' ' + unit_m + provider + '<br>' : '') +
'</div>' +
stats +
'<div id="pfooter">' + lang['point'] + ' ' + (i + 1) + ' ' + lang['of'] + ' ' + count + '</div>' +
@ -222,12 +222,12 @@ function load(type, userid, trackid) {
function updateSummary(l, d, s) {
var t = document.getElementById('summary');
if (latest == 0) {
t.innerHTML = '<u>' + lang['summary'] + '</u><br />' +
'<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>';
t.innerHTML = '<u>' + lang['summary'] + '</u><br>' +
'<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 = '<u>' + lang['latest'] + ':</u><br>' + l;
}
}
@ -456,7 +456,7 @@ function setUnits(unit) {
function showModal(contentHTML) {
var div = document.createElement('div');
div.setAttribute('id', 'modal');
div.innerHTML = '<div id="modal-header"><button type="button" onclick="removeModal()"><img src="images/close.svg" \></button></div><div id="modal-body"></div>';
div.innerHTML = '<div id="modal-header"><button type="button" onclick="removeModal()"><img alt="' + lang['close'] + '" src="images/close.svg"></button></div><div id="modal-body"></div>';
document.body.appendChild(div);
var modalBody = document.getElementById('modal-body');
modalBody.innerHTML = contentHTML;