Update HTML
This commit is contained in:
Bartek Fabiszewski
parent
34169dd294
commit
0c0cea70a1
95
css/main.css
95
css/main.css
@ -38,33 +38,20 @@ select {
|
||||
font-weight: normal;
|
||||
padding-top: 0.2em;
|
||||
}
|
||||
#menu input,
|
||||
#login input {
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#menu input[type = "submit"],
|
||||
#login input[type = "submit"] {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
}
|
||||
#menu input[type = "checkbox"] {
|
||||
width: auto;
|
||||
}
|
||||
.menu-link {
|
||||
display: block;
|
||||
margin-top: .2em;
|
||||
#container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
#main {
|
||||
flex-grow: 1;
|
||||
order: 1;
|
||||
height: 100%;
|
||||
margin-right: 165px;
|
||||
}
|
||||
#map-canvas {
|
||||
height: 100%;
|
||||
}
|
||||
#menu {
|
||||
order: 2;
|
||||
font-family: 'Open Sans', Verdana, sans-serif;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@ -90,21 +77,59 @@ select {
|
||||
background-color:rgba(102, 102, 102, 0.9);
|
||||
color: lightgray;
|
||||
}
|
||||
#menu-close {
|
||||
background-color: #666;
|
||||
opacity: 0.9;
|
||||
#menu-button {
|
||||
border-style: solid;
|
||||
border-width: 1px 0 1px 1px;
|
||||
border-color: #bce;
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
right: 165px;
|
||||
top: 5px;
|
||||
right: 0;
|
||||
z-index: 1900;
|
||||
width: 18px;
|
||||
height: 20px;
|
||||
line-height: 18px;
|
||||
text-align: right;
|
||||
font-size: 18px;
|
||||
font-weight: bolder;
|
||||
width: 30px;
|
||||
height: 35px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-weight: normal;
|
||||
border-radius: 11px 0 0 11px;
|
||||
cursor: pointer;
|
||||
background-color: #666;
|
||||
}
|
||||
#menu-button a {
|
||||
color: white;
|
||||
}
|
||||
#menu-button a:after {
|
||||
content: "»";
|
||||
}
|
||||
#menu.menu-hidden {
|
||||
width: 0;
|
||||
}
|
||||
#menu.menu-hidden #menu-button {
|
||||
border-color: white;
|
||||
font-weight: normal;
|
||||
background-color: #003c884d;
|
||||
}
|
||||
#menu.menu-hidden #menu-button a:after {
|
||||
content: "«";
|
||||
}
|
||||
#menu input,
|
||||
#login input {
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#menu input[type = "submit"],
|
||||
#login input[type = "submit"] {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
}
|
||||
#menu input[type = "checkbox"] {
|
||||
width: auto;
|
||||
}
|
||||
.menu-link {
|
||||
display: block;
|
||||
margin-top: .2em;
|
||||
}
|
||||
label[for=user] {
|
||||
padding-top: 1em;
|
||||
@ -322,8 +347,8 @@ button > * {
|
||||
-webkit-border-radius: 10px;
|
||||
}
|
||||
|
||||
#user-dropdown {
|
||||
display: none;
|
||||
#user-menu {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: gray;
|
||||
padding: 1em;
|
||||
@ -331,7 +356,11 @@ button > * {
|
||||
border: 1px solid #888;
|
||||
}
|
||||
|
||||
#user-dropdown a {
|
||||
#user-menu.menu-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#user-menu a {
|
||||
display: block;
|
||||
padding-bottom: .5em;
|
||||
padding-top: .5em;
|
||||
|
||||
240
index.php
240
index.php
@ -17,12 +17,12 @@
|
||||
* along with this program; if not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
require_once(__DIR__ . "/helpers/auth.php");
|
||||
require_once(ROOT_DIR . "/helpers/config.php");
|
||||
require_once(ROOT_DIR . "/helpers/position.php");
|
||||
require_once(ROOT_DIR . "/helpers/track.php");
|
||||
require_once(ROOT_DIR . "/helpers/utils.php");
|
||||
require_once(ROOT_DIR . "/helpers/lang.php");
|
||||
require_once(__DIR__ . '/helpers/auth.php');
|
||||
require_once(ROOT_DIR . '/helpers/config.php');
|
||||
require_once(ROOT_DIR . '/helpers/position.php');
|
||||
require_once(ROOT_DIR . '/helpers/track.php');
|
||||
require_once(ROOT_DIR . '/helpers/utils.php');
|
||||
require_once(ROOT_DIR . '/helpers/lang.php');
|
||||
|
||||
$login = uUtils::postString('user');
|
||||
$pass = uUtils::postPass('pass');
|
||||
@ -32,163 +32,127 @@
|
||||
$langsArr = uLang::getLanguages();
|
||||
|
||||
$auth = new uAuth();
|
||||
if ($action == "auth") {
|
||||
if ($action === 'auth') {
|
||||
$auth->checkLogin($login, $pass);
|
||||
}
|
||||
|
||||
if (!$auth->isAuthenticated() && $action == "auth") {
|
||||
$auth->exitWithRedirect("login.php?auth_error=1");
|
||||
if ($action === 'auth' && !$auth->isAuthenticated()) {
|
||||
$auth->exitWithRedirect('login.php?auth_error=1');
|
||||
}
|
||||
if (!$auth->isAuthenticated() && uConfig::$require_authentication) {
|
||||
$auth->exitWithRedirect("login.php");
|
||||
}
|
||||
|
||||
$displayUserId = NULL;
|
||||
$usersArr = [];
|
||||
if ($auth->isAdmin() || uConfig::$public_tracks) {
|
||||
// public access or admin user
|
||||
// get last position user
|
||||
$lastPosition = uPosition::getLast();
|
||||
if ($lastPosition->isValid) {
|
||||
// display track of last position user
|
||||
$displayUserId = $lastPosition->userId;
|
||||
}
|
||||
// populate users array (for <select>)
|
||||
$usersArr = uUser::getAll();
|
||||
} else if ($auth->isAuthenticated()) {
|
||||
// display track of authenticated user
|
||||
$displayUserId = $auth->user->id;
|
||||
}
|
||||
|
||||
$tracksArr = uTrack::getAll($displayUserId);
|
||||
if (!empty($tracksArr)) {
|
||||
// get id of the latest track
|
||||
$displayTrackId = $tracksArr[0]->id;
|
||||
} else {
|
||||
$tracksArr = [];
|
||||
$displayTrackId = NULL;
|
||||
if (uConfig::$require_authentication && !$auth->isAuthenticated()) {
|
||||
$auth->exitWithRedirect('login.php');
|
||||
}
|
||||
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="<?= uConfig::$lang ?>">
|
||||
<head>
|
||||
<title><?= $lang["title"] ?></title>
|
||||
<?php include("meta.php"); ?>
|
||||
<script src="js/ulogger.js" type="module"></script>
|
||||
<script src="js/bundle.js" defer nomodule></script>
|
||||
<title><?= $lang['title'] ?></title>
|
||||
<?php include('meta.php'); ?>
|
||||
<script src="js/dist/bundle.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="menu">
|
||||
<div id="menu-content">
|
||||
<div id="container">
|
||||
<div id="menu">
|
||||
<div id="menu-content">
|
||||
|
||||
<?php if ($auth->isAuthenticated()): ?>
|
||||
<div>
|
||||
<a id="user-menu"><img class="icon" alt="<?= $lang["user"] ?>" src="images/user.svg"> <?= htmlspecialchars($auth->user->login) ?></a>
|
||||
<div id="user-dropdown">
|
||||
<a id="user-pass"><img class="icon" alt="<?= $lang["changepass"] ?>" src="images/lock.svg"> <?= $lang["changepass"] ?></a>
|
||||
<a href="utils/logout.php"><img class="icon" alt="<?= $lang["logout"] ?>" src="images/poweroff.svg"> <?= $lang["logout"] ?></a>
|
||||
<?php if ($auth->isAuthenticated()): ?>
|
||||
<div>
|
||||
<a data-bind="onShowUserMenu"><img class="icon" alt="<?= $lang['user'] ?>" src="images/user.svg"> <?= htmlspecialchars($auth->user->login) ?></a>
|
||||
<div id="user-menu" class="menu-hidden">
|
||||
<a id="user-pass"><img class="icon" alt="<?= $lang['changepass'] ?>" src="images/lock.svg"> <?= $lang['changepass'] ?></a>
|
||||
<a href="utils/logout.php"><img class="icon" alt="<?= $lang['logout'] ?>" src="images/poweroff.svg"> <?= $lang['logout'] ?></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<a href="login.php"><img class="icon" alt="<?= $lang["login"] ?>" src="images/key.svg"> <?= $lang["login"] ?></a>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="section">
|
||||
<?php if (!empty($usersArr)): ?>
|
||||
<label for="user"><?= $lang["user"] ?></label>
|
||||
<select id="user" name="user">
|
||||
<option value="0" disabled><?= $lang["suser"] ?></option>
|
||||
<?php foreach ($usersArr as $aUser): ?>
|
||||
<option <?= ($aUser->id == $displayUserId) ? "selected " : "" ?>value="<?= $aUser->id ?>"><?= htmlspecialchars($aUser->login) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<?php else: ?>
|
||||
<a href="login.php"><img class="icon" alt="<?= $lang['login'] ?>" src="images/key.svg"> <?= $lang['login'] ?></a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<label for="track"><?= $lang["track"] ?></label>
|
||||
<select id="track" name="track">
|
||||
<?php foreach ($tracksArr as $aTrack): ?>
|
||||
<option value="<?= $aTrack->id ?>"><?= htmlspecialchars($aTrack->name) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<input id="latest" type="checkbox"> <label for="latest"><?= $lang["latest"] ?></label><br>
|
||||
<input id="auto-reload" type="checkbox"> <label for="auto-reload"><?= $lang["autoreload"] ?></label> (<a id="set-interval"><span id="interval"><?= uConfig::$interval ?></span></a> s)<br>
|
||||
<a id="force-reload"> <?= $lang["reload"] ?></a><br>
|
||||
</div>
|
||||
|
||||
<div id="summary" class="section"></div>
|
||||
|
||||
<div id="other" class="section">
|
||||
<a id="altitudes"><?= $lang["chart"] ?></a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="api"><?= $lang["api"] ?></label>
|
||||
<select id="api" name="api">
|
||||
<option value="gmaps"<?= (uConfig::$mapapi == "gmaps") ? " selected" : "" ?>>Google Maps</option>
|
||||
<option value="openlayers"<?= (uConfig::$mapapi == "openlayers") ? " selected" : "" ?>>OpenLayers</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="lang"><?= $lang["language"] ?></label>
|
||||
<select id="lang" name="lang">
|
||||
<?php foreach ($langsArr as $langCode => $langName): ?>
|
||||
<option value="<?= $langCode ?>"<?= (uConfig::$lang == $langCode) ? " selected" : "" ?>><?= $langName ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<label for="units"><?= $lang["units"] ?></label>
|
||||
<select id="units" name="units">
|
||||
<option value="metric"<?= (uConfig::$units == "metric") ? " selected" : "" ?>><?= $lang["metric"] ?></option>
|
||||
<option value="imperial"<?= (uConfig::$units == "imperial") ? " selected" : "" ?>><?= $lang["imperial"] ?></option>
|
||||
<option value="nautical"<?= (uConfig::$units == "nautical") ? " selected" : "" ?>><?= $lang["nautical"] ?></option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="menu-title"><?= $lang["export"] ?></div>
|
||||
<a id="export-kml" class="menu-link">kml</a>
|
||||
<a id="export-gpx" class="menu-link">gpx</a>
|
||||
</div>
|
||||
|
||||
<?php if ($auth->isAuthenticated()): ?>
|
||||
<div class="section">
|
||||
<div id="import" class="menu-title"><?= $lang["import"] ?></div>
|
||||
<form id="import-form" enctype="multipart/form-data" method="post">
|
||||
<input type="hidden" name="MAX_FILE_SIZE" value="<?= uUtils::getUploadMaxSize() ?>" />
|
||||
<input type="file" id="input-file" name="gpx" />
|
||||
</form>
|
||||
<a id="import-gpx" class="menu-link">gpx</a>
|
||||
<label for="user"><?= $lang['user'] ?></label>
|
||||
<select id="user" data-bind="currentUserId" name="user"></select>
|
||||
</div>
|
||||
|
||||
<div id="admin-menu">
|
||||
<div class="menu-title"><?= $lang["adminmenu"] ?></div>
|
||||
<?php if ($auth->isAdmin()): ?>
|
||||
<a id="adduser" class="menu-link"><?= $lang["adduser"] ?></a>
|
||||
<a id="edituser" class="menu-link"><?= $lang["edituser"] ?></a>
|
||||
<?php endif; ?>
|
||||
<a id="edittrack" class="menu-link"><?= $lang["edittrack"] ?></a>
|
||||
<div class="section">
|
||||
<label for="track"><?= $lang['track'] ?></label>
|
||||
<select id="track" data-bind="currentTrackId" name="track"></select>
|
||||
<input id="latest" type="checkbox" data-bind="showLatest"> <label for="latest"><?= $lang['latest'] ?></label><br>
|
||||
<input id="auto-reload" type="checkbox" data-bind="autoReload"> <label for="auto-reload"><?= $lang['autoreload'] ?></label> (<a id="set-interval" data-bind="onSetInterval"><span id="interval" data-bind="interval"><?= uConfig::$interval ?></span></a> s)<br>
|
||||
<a id="force-reload" data-bind="onReload"> <?= $lang['reload'] ?></a><br>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div id="summary" class="section" data-bind="summary"></div>
|
||||
|
||||
<div id="other" class="section">
|
||||
<a id="altitudes" data-bind="onChartToggle"><?= $lang['chart'] ?></a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="api"><?= $lang['api'] ?></label>
|
||||
<select id="api" name="api" data-bind="mapApi">
|
||||
<option value="gmaps"<?= (uConfig::$mapapi === 'gmaps') ? ' selected' : '' ?>>Google Maps</option>
|
||||
<option value="openlayers"<?= (uConfig::$mapapi === 'openlayers') ? ' selected' : '' ?>>OpenLayers</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="lang"><?= $lang['language'] ?></label>
|
||||
<select id="lang" name="lang" data-bind="lang">
|
||||
<?php foreach ($langsArr as $langCode => $langName): ?>
|
||||
<option value="<?= $langCode ?>"<?= (uConfig::$lang === $langCode) ? ' selected' : '' ?>><?= $langName ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<label for="units"><?= $lang['units'] ?></label>
|
||||
<select id="units" name="units" data-bind="units">
|
||||
<option value="metric"<?= (uConfig::$units === 'metric') ? ' selected' : '' ?>><?= $lang['metric'] ?></option>
|
||||
<option value="imperial"<?= (uConfig::$units === 'imperial') ? ' selected' : '' ?>><?= $lang['imperial'] ?></option>
|
||||
<option value="nautical"<?= (uConfig::$units === 'nautical') ? ' selected' : '' ?>><?= $lang['nautical'] ?></option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="menu-title"><?= $lang['export'] ?></div>
|
||||
<a id="export-kml" class="menu-link" data-bind="onExportKml">kml</a>
|
||||
<a id="export-gpx" class="menu-link" data-bind="onExportGpx">gpx</a>
|
||||
</div>
|
||||
|
||||
<?php if ($auth->isAuthenticated()): ?>
|
||||
<div class="section">
|
||||
<div id="import" class="menu-title"><?= $lang['import'] ?></div>
|
||||
<form id="import-form" enctype="multipart/form-data" method="post">
|
||||
<input type="hidden" name="MAX_FILE_SIZE" value="<?= uUtils::getUploadMaxSize() ?>" />
|
||||
<input type="file" id="input-file" name="gpx" data-bind="inputFile"/>
|
||||
</form>
|
||||
<a id="import-gpx" class="menu-link" data-bind="onImportGpx">gpx</a>
|
||||
</div>
|
||||
|
||||
<div id="admin-menu">
|
||||
<div class="menu-title"><?= $lang['adminmenu'] ?></div>
|
||||
<?php if ($auth->isAdmin()): ?>
|
||||
<a id="adduser" class="menu-link"><?= $lang['adduser'] ?></a>
|
||||
<a id="edituser" class="menu-link"><?= $lang['edituser'] ?></a>
|
||||
<?php endif; ?>
|
||||
<a id="edittrack" class="menu-link"><?= $lang['edittrack'] ?></a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
</div>
|
||||
<div id="menu-button"><a data-bind="onMenuToggle"></a></div>
|
||||
<div id="footer"><a target="_blank" href="https://github.com/bfabiszewski/ulogger-server"><span class="mi">μ</span>logger</a> <?= uConfig::$version ?></div>
|
||||
</div>
|
||||
<div id="menu-close">»</div>
|
||||
<div id="footer"><a target="_blank" href="https://github.com/bfabiszewski/ulogger-server"><span class="mi">μ</span>logger</a> <?= uConfig::$version ?></div>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<div id="map-canvas"></div>
|
||||
<div id="bottom">
|
||||
<div id="chart"></div>
|
||||
<div id="chart-close"><?= $lang["close"] ?></div>
|
||||
<div id="main">
|
||||
<div id="map-canvas"></div>
|
||||
<div id="bottom">
|
||||
<div id="chart"></div>
|
||||
<a id="chart-close" data-bind="onChartToggle"><?= $lang['close'] ?></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -39,12 +39,11 @@ describe('MapViewModel tests', () => {
|
||||
beforeEach(() => {
|
||||
const fixture = `<div id="fixture">
|
||||
<div id="map-canvas"></div>
|
||||
<div id="menu-close"><a data-bind="onMenuToggle"></a></div>
|
||||
<div id="menu-button"><a data-bind="onMenuToggle"></a></div>
|
||||
</div>`;
|
||||
document.body.insertAdjacentHTML('afterbegin', fixture);
|
||||
mapEl = document.querySelector('#map-canvas');
|
||||
const menuEl = document.querySelector('#menu-close');
|
||||
menuButtonEl = menuEl.firstChild;
|
||||
menuButtonEl = document.querySelector('#menu-button a');
|
||||
config.reinitialize();
|
||||
config.mapApi = defaultApi;
|
||||
lang.init(config);
|
||||
|
||||
2
meta.php
2
meta.php
@ -8,5 +8,5 @@
|
||||
<link rel="shortcut icon" href="icons/favicon.ico">
|
||||
<meta name="msapplication-config" content="browserconfig.xml">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&subset=cyrillic" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="css/fonts.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/main.css">
|
||||
Loading…
x
Reference in New Issue
Block a user