esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

MAPG-89 rewrite views and view templates to the new concept

Browse Source
This commit is contained in:
Bence Pőcze 2020-06-27 00:23:57 +02:00
parent bf8e5b5f4d
commit 1287fa0bc9
Signed by: bence
GPG Key ID: AA52B11A3269D1C1
18 changed files with 165 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
views/account/account.php
View File

@ -1,5 +1,6 @@
<?php require ROOT . '/views/templates/main_header.php'; ?> @extends('templates/layout_normal')
<?php require ROOT . '/views/templates/header.php'; ?>
@section('main')
<h2>Account</h2> <h2>Account</h2>
<div class="box"> <div class="box">
<form id="accountForm" action="/account" method="post" data-observe-inputs="password_new,password_new_confirm"> <form id="accountForm" action="/account" method="post" data-observe-inputs="password_new,password_new_confirm">
@ -19,5 +20,4 @@
</div> </div>
</form> </form>
</div> </div>
<?php require ROOT . '/views/templates/footer.php'; ?> @endsection
<?php require ROOT . '/views/templates/main_footer.php'; ?>

8
views/account/delete.php
View File

@ -1,5 +1,6 @@
<?php require ROOT . '/views/templates/main_header.php'; ?> @extends('templates/layout_normal')
<?php require ROOT . '/views/templates/header.php'; ?>
@section('main')
<h2>Delete account</h2> <h2>Delete account</h2>
<div class="box"> <div class="box">
<form id="deleteAccountForm" action="/account/delete" method="post" data-redirect-on-success="/"> <form id="deleteAccountForm" action="/account/delete" method="post" data-redirect-on-success="/">
@ -11,5 +12,4 @@
</div> </div>
</form> </form>
</div> </div>
<?php require ROOT . '/views/templates/footer.php'; ?> @endsection
<?php require ROOT . '/views/templates/main_footer.php'; ?>

32
views/admin/map_editor.php
View File

@ -1,3 +1,4 @@
@extra
<?php <?php
$cssFiles = [ $cssFiles = [
'node_modules/leaflet/dist/leaflet.css', 'node_modules/leaflet/dist/leaflet.css',
@ -12,16 +13,12 @@ $jsFiles = [
'js/map_editor.js', 'js/map_editor.js',
]; ];
?> ?>
<?php require ROOT . '/views/templates/main_header.php'; ?> @endextra
<header class="small">
<h1> @extends('templates/layout_full')
<a href="/" title="<?= $_ENV['APP_NAME'] ?>">
<img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>"><!-- @section('subheader')
--><span><?= $_ENV['APP_NAME'] ?></span> <span><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
</a>
</h1>
<p class="header">
<span><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
--><span><!-- --><span><!--
<?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?> <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
--><svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> --><svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
@ -46,8 +43,9 @@ $jsFiles = [
</svg><!-- </svg><!--
--><span id="deleted" class="bold">0</span><!-- --><span id="deleted" class="bold">0</span><!--
--></span> --></span>
</p> @endsection
</header>
@section('pagemodal')
<div id="metadata" class="modal"> <div id="metadata" class="modal">
<h2>Edit map data</h2> <h2>Edit map data</h2>
<form id="metadataForm" class="marginTop" data-no-submit="true"> <form id="metadataForm" class="marginTop" data-no-submit="true">
@ -59,7 +57,9 @@ $jsFiles = [
</div> </div>
</form> </form>
</div> </div>
<div class="full"> @endsection
@section('main')
<div id="map"></div> <div id="map"></div>
<div id="panorama"></div> <div id="panorama"></div>
<div id="noPano"> <div id="noPano">
@ -73,7 +73,9 @@ $jsFiles = [
<button id="closeButton" class="gray fullWidth marginTop">Close</button> <button id="closeButton" class="gray fullWidth marginTop">Close</button>
<button id="deleteButton" class="red fullWidth marginTop">Delete</button> <button id="deleteButton" class="red fullWidth marginTop">Delete</button>
</div> </div>
</div> @endsection
@section('pagescript')
<script> <script>
var tileUrl = '<?= $_ENV['LEAFLET_TILESERVER_URL'] ?>'; var tileUrl = '<?= $_ENV['LEAFLET_TILESERVER_URL'] ?>';
var tileAttribution = '<?= $_ENV['LEAFLET_TILESERVER_ATTRIBUTION'] ?>'; var tileAttribution = '<?= $_ENV['LEAFLET_TILESERVER_ATTRIBUTION'] ?>';
@ -81,4 +83,4 @@ $jsFiles = [
var mapBounds = <?= json_encode($bounds) ?>; var mapBounds = <?= json_encode($bounds) ?>;
var places = <?= json_encode($places, JSON_FORCE_OBJECT) ?>; var places = <?= json_encode($places, JSON_FORCE_OBJECT) ?>;
</script> </script>
<?php require ROOT . '/views/templates/main_footer.php'; ?> @endsection

8
views/error/404.php
View File

@ -1,6 +1,6 @@
<?php require ROOT . '/views/templates/main_header.php'; ?> @extends('templates/layout_normal')
<?php require ROOT . '/views/templates/header.php'; ?>
@section('main')
<h2>404 | Page not found</h2> <h2>404 | Page not found</h2>
<p>The requested URL was not found on this server. <a href="/" title="<?= $_ENV['APP_NAME'] ?>">Back to start.</a></p> <p>The requested URL was not found on this server. <a href="/" title="<?= $_ENV['APP_NAME'] ?>">Back to start.</a></p>
<?php require ROOT . '/views/templates/footer.php'; ?> @endsection
<?php require ROOT . '/views/templates/main_footer.php'; ?>

27
views/game.php
View File

@ -1,3 +1,4 @@
@extra
<?php <?php
$cssFiles = [ $cssFiles = [
'css/game.css' 'css/game.css'
@ -7,21 +8,17 @@ $jsFiles = [
'js/game.js', 'js/game.js',
]; ];
?> ?>
<?php require ROOT . '/views/templates/main_header.php'; ?> @endextra
<header class="small">
<h1> @extends('templates/layout_full')
<a href="/" title="<?= $_ENV['APP_NAME'] ?>">
<img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>"><!-- @section('subheader')
--><span><?= $_ENV['APP_NAME'] ?></span>
</a>
</h1>
<p class="header">
<span id="mapName" class="bold"><?= $mapName ?></span><!-- <span id="mapName" class="bold"><?= $mapName ?></span><!--
--><span>Round <span id="currentRound" class="bold"></span></span><!-- --><span>Round <span id="currentRound" class="bold"></span></span><!--
--><span>Score <span id="currentScoreSum" class="bold"></span></span> --><span>Score <span id="currentScoreSum" class="bold"></span></span>
</p> @endsection
</header>
<div class="full"> @section('main')
<div id="panoCover"></div> <div id="panoCover"></div>
<div id="panorama"></div> <div id="panorama"></div>
<div id="showGuessButtonContainer"> <div id="showGuessButtonContainer">
@ -56,9 +53,11 @@ $jsFiles = [
<button id="startNewGameButton" class="fullWidth">Play this map again</button> <button id="startNewGameButton" class="fullWidth">Play this map again</button>
</div> </div>
</div> </div>
</div> @endsection
@section('pagescript')
<script> <script>
var mapId = <?= $mapId ?>; var mapId = <?= $mapId ?>;
var mapBounds = <?= json_encode($bounds) ?>; var mapBounds = <?= json_encode($bounds) ?>;
</script> </script>
<?php require ROOT . '/views/templates/main_footer.php'; ?> @endsection

8
views/login/activate.php
View File

@ -1,8 +1,8 @@
<?php require ROOT . '/views/templates/main_header.php'; ?> @extends('templates/layout_normal')
<?php require ROOT . '/views/templates/header.php'; ?>
@section('main')
<h2>Account activation</h2> <h2>Account activation</h2>
<div class="box"> <div class="box">
<p class="error justify">Activation failed. Please check the link you entered or retry <a href="/signup" title="Sign up">sign up</a>!</p> <p class="error justify">Activation failed. Please check the link you entered or retry <a href="/signup" title="Sign up">sign up</a>!</p>
</div> </div>
<?php require ROOT . '/views/templates/footer.php'; ?> @endsection
<?php require ROOT . '/views/templates/main_footer.php'; ?>

8
views/login/cancel.php
View File

@ -1,5 +1,6 @@
<?php require ROOT . '/views/templates/main_header.php'; ?> @extends('templates/layout_normal')
<?php require ROOT . '/views/templates/header.php'; ?>
@section('main')
<h2>Account cancellation</h2> <h2>Account cancellation</h2>
<div class="box"> <div class="box">
<?php if ($success) : ?> <?php if ($success) : ?>
@ -8,5 +9,4 @@
<p class="error justify">Cancellation failed. Please check the link you entered! Maybe the account was already deleted, in this case no further action is required.</p> <p class="error justify">Cancellation failed. Please check the link you entered! Maybe the account was already deleted, in this case no further action is required.</p>
<?php endif; ?> <?php endif; ?>
</div> </div>
<?php require ROOT . '/views/templates/footer.php'; ?> @endsection
<?php require ROOT . '/views/templates/main_footer.php'; ?>

8
views/login/google_login.php
View File

@ -1,8 +1,8 @@
<?php require ROOT . '/views/templates/main_header.php'; ?> @extends('templates/layout_normal')
<?php require ROOT . '/views/templates/header.php'; ?>
@section('main')
<h2>Login up with Google</h2> <h2>Login up with Google</h2>
<div class="box"> <div class="box">
<p class="error justify">Authenticating with Google failed. Please <a href="/login/google" title="Login with Google">retry</a>!</p> <p class="error justify">Authenticating with Google failed. Please <a href="/login/google" title="Login with Google">retry</a>!</p>
</div> </div>
<?php require ROOT . '/views/templates/footer.php'; ?> @endsection
<?php require ROOT . '/views/templates/main_footer.php'; ?>

11
views/login/google_signup.php
View File

@ -1,10 +1,14 @@
@extra
<?php <?php
$jsFiles = [ $jsFiles = [
'js/login/google_signup.js', 'js/login/google_signup.js',
]; ];
?> ?>
<?php require ROOT . '/views/templates/main_header.php'; ?> @endextra
<?php require ROOT . '/views/templates/header.php'; ?>
@extends('templates/layout_normal')
@section('main')
<h2>Sign up</h2> <h2>Sign up</h2>
<div class="box"> <div class="box">
<form id="googleSignupForm" action="/signup/google" method="post" data-redirect-on-success="/"> <form id="googleSignupForm" action="/signup/google" method="post" data-redirect-on-success="/">
@ -26,5 +30,4 @@ $jsFiles = [
</div> </div>
</form> </form>
</div> </div>
<?php require ROOT . '/views/templates/footer.php'; ?> @endsection
<?php require ROOT . '/views/templates/main_footer.php'; ?>

8
views/login/login.php
View File

@ -1,5 +1,6 @@
<?php require ROOT . '/views/templates/main_header.php'; ?> @extends('templates/layout_normal')
<?php require ROOT . '/views/templates/header.php'; ?>
@section('main')
<h2>Login</h2> <h2>Login</h2>
<div class="box"> <div class="box">
<form id="loginForm" action="/login" method="post" data-redirect-on-success="/"> <form id="loginForm" action="/login" method="post" data-redirect-on-success="/">
@ -15,5 +16,4 @@
</div> </div>
</form> </form>
</div> </div>
<?php require ROOT . '/views/templates/footer.php'; ?> @endsection
<?php require ROOT . '/views/templates/main_footer.php'; ?>

11
views/login/signup.php
View File

@ -1,10 +1,14 @@
@extra
<?php <?php
$jsFiles = [ $jsFiles = [
'js/login/signup.js', 'js/login/signup.js',
]; ];
?> ?>
<?php require ROOT . '/views/templates/main_header.php'; ?> @endextra
<?php require ROOT . '/views/templates/header.php'; ?>
@extends('templates/layout_normal')
@section('main')
<h2>Sign up</h2> <h2>Sign up</h2>
<div class="box"> <div class="box">
<form id="signupForm" action="/signup" method="post" data-redirect-on-success="/signup/success"> <form id="signupForm" action="/signup" method="post" data-redirect-on-success="/signup/success">
@ -30,5 +34,4 @@ $jsFiles = [
</div> </div>
</form> </form>
</div> </div>
<?php require ROOT . '/views/templates/footer.php'; ?> @endsection
<?php require ROOT . '/views/templates/main_footer.php'; ?>

8
views/login/signup_success.php
View File

@ -1,8 +1,8 @@
<?php require ROOT . '/views/templates/main_header.php'; ?> @extends('templates/layout_normal')
<?php require ROOT . '/views/templates/header.php'; ?>
@section('main')
<h2>Sign up</h2> <h2>Sign up</h2>
<div class="box"> <div class="box">
<p class="justify">Sign up was successful. Please check your email and click on the activation link to activate your account!</p> <p class="justify">Sign up was successful. Please check your email and click on the activation link to activate your account!</p>
</div> </div>
<?php require ROOT . '/views/templates/footer.php'; ?> @endsection
<?php require ROOT . '/views/templates/main_footer.php'; ?>

11
views/maps.php
View File

@ -1,3 +1,4 @@
@extra
<?php <?php
$cssFiles = [ $cssFiles = [
'css/maps.css' 'css/maps.css'
@ -9,8 +10,11 @@ if ($isAdmin) {
$jsFiles[] = 'js/maps_admin.js'; $jsFiles[] = 'js/maps_admin.js';
} }
?> ?>
<?php require ROOT . '/views/templates/main_header.php'; ?> @endextra
<?php require ROOT . '/views/templates/header.php'; ?>
@extends('templates/layout_normal')
@section('main')
<div id="mapContainer"> <div id="mapContainer">
<?php foreach ($maps as $map): ?> <?php foreach ($maps as $map): ?>
<div class="mapItem"> <div class="mapItem">
@ -66,5 +70,4 @@ if ($isAdmin) {
<?php endfor; ?> <?php endfor; ?>
<?php endif; ?> <?php endif; ?>
</div> </div>
<?php require ROOT . '/views/templates/footer.php'; ?> @endsection
<?php require ROOT . '/views/templates/main_footer.php'; ?>

5
views/templates/footer.php
View File

@ -1,5 +0,0 @@
</main>
<footer>
<p><span class="bold"><?= $_ENV['APP_NAME'] ?></span> <?= str_replace('Release_', '', VERSION) ?></p><!--
--><p>&copy; Pőcze Bence <?= (new DateTime(REVISION_DATE))->format('Y') ?></p>
</footer>

18
views/templates/layout_full.php Normal file
View File

@ -0,0 +1,18 @@
@extends('templates/mapguesser')
@section('content')
<header class="small">
<h1>
<a href="/" title="<?= $_ENV['APP_NAME'] ?>">
<img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>"><!--
--><span><?= $_ENV['APP_NAME'] ?></span>
</a>
</h1>
<p class="header">
@yields('subheader')
</p>
</header>
<main class="full">
@yields('main')
</main>
@endsection

9
views/templates/header.php → views/templates/layout_normal.php
View File

@ -1,3 +1,5 @@
@extends('templates/mapguesser')
@section('content')
<header> <header>
<h1> <h1>
<a href="/" title="<?= $_ENV['APP_NAME'] ?>"> <a href="/" title="<?= $_ENV['APP_NAME'] ?>">
@ -22,3 +24,10 @@
</p> </p>
</header> </header>
<main> <main>
@yields('main')
</main>
<footer>
<p><span class="bold"><?= $_ENV['APP_NAME'] ?></span> <?= str_replace('Release_', '', VERSION) ?></p><!--
--><p>&copy; Pőcze Bence <?= (new DateTime(REVISION_DATE))->format('Y') ?></p>
</footer>
@endsection

50
views/templates/main_footer.php
View File

@ -1,50 +0,0 @@
<script>
const STATIC_ROOT = '<?= $_ENV['STATIC_ROOT'] ?>';
const REVISION = '<?= REVISION ?>';
var ANTI_CSRF_TOKEN = '<?= \Container::$request->session()->get('anti_csrf_token') ?>';
const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>';
<?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
const GOOGLE_ANALITICS_ID = '<?= $_ENV['GOOGLE_ANALITICS_ID'] ?>';
<?php endif; ?>
</script>
<script src="<?= $_ENV['STATIC_ROOT'] ?>/js/mapguesser.js?rev=<?= REVISION ?>"></script>
<?php if (isset($jsFiles)) : ?>
<?php foreach ($jsFiles as $jsFile) : ?>
<?php
if (!preg_match('/^http(s)?/', $jsFile)) {
$jsFile = $_ENV['STATIC_ROOT'] . '/' . $jsFile . '?rev=' . REVISION;
}
?>
<script src="<?= $jsFile ?>"></script>
<?php endforeach; ?>
<?php endif; ?>
<?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
<script>
(function () {
// we don't want user to agree cookies when clicking on the notice itself
document.getElementById('cookiesNotice').onclick = function (e) {
e.stopPropagation();
};
document.getElementById('agreeCookiesButton').onclick = function () {
MapGuesser.agreeCookies();
document.getElementById('cookiesNotice').style.display = 'none';
};
window.onclick = function () {
MapGuesser.agreeCookies();
};
})();
</script>
<?php else: ?>
<?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
<script>
(function () {
MapGuesser.initGoogleAnalitics();
})();
</script>
<?php endif; ?>
<?php endif; ?>
</body>
</html>

53
views/templates/main_header.php → views/templates/mapguesser.php
View File

@ -39,3 +39,56 @@
<p id="modalText" class="justify marginTop"></p> <p id="modalText" class="justify marginTop"></p>
<div id="modalButtons" class="right"></div> <div id="modalButtons" class="right"></div>
</div> </div>
@yields('pagemodal')
@yields('content')
<script>
const STATIC_ROOT = '<?= $_ENV['STATIC_ROOT'] ?>';
const REVISION = '<?= REVISION ?>';
var ANTI_CSRF_TOKEN = '<?= \Container::$request->session()->get('anti_csrf_token') ?>';
const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>';
<?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
const GOOGLE_ANALITICS_ID = '<?= $_ENV['GOOGLE_ANALITICS_ID'] ?>';
<?php endif; ?>
</script>
@yields('pagescript')
<script src="<?= $_ENV['STATIC_ROOT'] ?>/js/mapguesser.js?rev=<?= REVISION ?>"></script>
<?php if (isset($jsFiles)) : ?>
<?php foreach ($jsFiles as $jsFile) : ?>
<?php
if (!preg_match('/^http(s)?/', $jsFile)) {
$jsFile = $_ENV['STATIC_ROOT'] . '/' . $jsFile . '?rev=' . REVISION;
}
?>
<script src="<?= $jsFile ?>"></script>
<?php endforeach; ?>
<?php endif; ?>
<?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
<script>
(function () {
// we don't want user to agree cookies when clicking on the notice itself
document.getElementById('cookiesNotice').onclick = function (e) {
e.stopPropagation();
};
document.getElementById('agreeCookiesButton').onclick = function () {
MapGuesser.agreeCookies();
document.getElementById('cookiesNotice').style.display = 'none';
};
window.onclick = function () {
MapGuesser.agreeCookies();
};
})();
</script>
<?php else: ?>
<?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
<script>
(function () {
MapGuesser.initGoogleAnalitics();
})();
</script>
<?php endif; ?>
<?php endif; ?>
</body>
</html>