From 1287fa0bc952da661c559e17c4ab99ce6babf904 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Sat, 27 Jun 2020 00:23:57 +0200
Subject: [PATCH] MAPG-89 rewrite views and view templates to the new concept

---
 views/account/account.php                     |  8 +--
 views/account/delete.php                      |  8 +--
 views/admin/map_editor.php                    | 32 ++++++-----
 views/error/404.php                           |  8 +--
 views/game.php                                | 27 +++++----
 views/login/activate.php                      |  8 +--
 views/login/cancel.php                        |  8 +--
 views/login/google_login.php                  |  8 +--
 views/login/google_signup.php                 | 11 ++--
 views/login/login.php                         |  8 +--
 views/login/signup.php                        | 11 ++--
 views/login/signup_success.php                |  8 +--
 views/maps.php                                | 11 ++--
 views/templates/footer.php                    |  5 --
 views/templates/layout_full.php               | 18 ++++++
 .../{header.php => layout_normal.php}         | 11 +++-
 views/templates/main_footer.php               | 50 -----------------
 .../{main_header.php => mapguesser.php}       | 55 ++++++++++++++++++-
 18 files changed, 165 insertions(+), 130 deletions(-)
 delete mode 100644 views/templates/footer.php
 create mode 100644 views/templates/layout_full.php
 rename views/templates/{header.php => layout_normal.php} (79%)
 delete mode 100644 views/templates/main_footer.php
 rename views/templates/{main_header.php => mapguesser.php} (50%)

diff --git a/views/account/account.php b/views/account/account.php
index dd3c698..f6186b6 100644
--- a/views/account/account.php
+++ b/views/account/account.php
@@ -1,5 +1,6 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Account</h2>
     <div class="box">
         <form id="accountForm" action="/account" method="post" data-observe-inputs="password_new,password_new_confirm">
@@ -19,5 +20,4 @@
             </div>
         </form>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
\ No newline at end of file
+@endsection
diff --git a/views/account/delete.php b/views/account/delete.php
index 75deec5..1b190e7 100644
--- a/views/account/delete.php
+++ b/views/account/delete.php
@@ -1,5 +1,6 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Delete account</h2>
     <div class="box">
         <form id="deleteAccountForm" action="/account/delete" method="post" data-redirect-on-success="/">
@@ -11,5 +12,4 @@
             </div>
         </form>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
\ No newline at end of file
+@endsection
diff --git a/views/admin/map_editor.php b/views/admin/map_editor.php
index 0e58851..1ca983f 100644
--- a/views/admin/map_editor.php
+++ b/views/admin/map_editor.php
@@ -1,3 +1,4 @@
+@extra
 <?php
 $cssFiles = [
     'node_modules/leaflet/dist/leaflet.css',
@@ -12,16 +13,12 @@ $jsFiles = [
     'js/map_editor.js',
 ];
 ?>
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<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">
-        <span><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
+@endextra
+
+@extends('templates/layout_full')
+
+@section('subheader')
+           <span><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
         --><span><!--
             <?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">
@@ -46,8 +43,9 @@ $jsFiles = [
             </svg><!--
          --><span id="deleted" class="bold">0</span><!--
         --></span>
-    </p>
-</header>
+@endsection
+
+@section('pagemodal')
 <div id="metadata" class="modal">
     <h2>Edit map data</h2>
     <form id="metadataForm" class="marginTop" data-no-submit="true">
@@ -59,7 +57,9 @@ $jsFiles = [
         </div>
     </form>
 </div>
-<div class="full">
+@endsection
+
+@section('main')
     <div id="map"></div>
     <div id="panorama"></div>
     <div id="noPano">
@@ -73,7 +73,9 @@ $jsFiles = [
         <button id="closeButton" class="gray fullWidth marginTop">Close</button>
         <button id="deleteButton" class="red fullWidth marginTop">Delete</button>
     </div>
-</div>
+@endsection
+
+@section('pagescript')
 <script>
     var tileUrl = '<?= $_ENV['LEAFLET_TILESERVER_URL'] ?>';
     var tileAttribution = '<?= $_ENV['LEAFLET_TILESERVER_ATTRIBUTION'] ?>';
@@ -81,4 +83,4 @@ $jsFiles = [
     var mapBounds = <?= json_encode($bounds) ?>;
     var places = <?= json_encode($places, JSON_FORCE_OBJECT) ?>;
 </script>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
\ No newline at end of file
+@endsection
diff --git a/views/error/404.php b/views/error/404.php
index f50146f..7564012 100644
--- a/views/error/404.php
+++ b/views/error/404.php
@@ -1,6 +1,6 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
     <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>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
\ No newline at end of file
+@endsection
diff --git a/views/game.php b/views/game.php
index 8d971fd..bc4c63a 100644
--- a/views/game.php
+++ b/views/game.php
@@ -1,3 +1,4 @@
+@extra
 <?php
 $cssFiles = [
     'css/game.css'
@@ -7,21 +8,17 @@ $jsFiles = [
     'js/game.js',
 ];
 ?>
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<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">
+@endextra
+
+@extends('templates/layout_full')
+
+@section('subheader')
         <span id="mapName" class="bold"><?= $mapName ?></span><!--
         --><span>Round <span id="currentRound" class="bold"></span></span><!--
         --><span>Score <span id="currentScoreSum" class="bold"></span></span>
-    </p>
-</header>
-<div class="full">
+@endsection
+
+@section('main')
     <div id="panoCover"></div>
     <div id="panorama"></div>
     <div id="showGuessButtonContainer">
@@ -56,9 +53,11 @@ $jsFiles = [
             <button id="startNewGameButton" class="fullWidth">Play this map again</button>
         </div>
     </div>
-</div>
+@endsection
+
+@section('pagescript')
 <script>
     var mapId = <?= $mapId ?>;
     var mapBounds = <?= json_encode($bounds) ?>;
 </script>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
\ No newline at end of file
+@endsection
diff --git a/views/login/activate.php b/views/login/activate.php
index 428ca72..e28c707 100644
--- a/views/login/activate.php
+++ b/views/login/activate.php
@@ -1,8 +1,8 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Account activation</h2>
     <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>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
\ No newline at end of file
+@endsection
diff --git a/views/login/cancel.php b/views/login/cancel.php
index 2f37e59..980c125 100644
--- a/views/login/cancel.php
+++ b/views/login/cancel.php
@@ -1,5 +1,6 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Account cancellation</h2>
     <div class="box">
         <?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>
         <?php endif; ?>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
\ No newline at end of file
+@endsection
diff --git a/views/login/google_login.php b/views/login/google_login.php
index da33385..65020f0 100644
--- a/views/login/google_login.php
+++ b/views/login/google_login.php
@@ -1,8 +1,8 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Login up with Google</h2>
     <div class="box">
         <p class="error justify">Authenticating with Google failed. Please <a href="/login/google" title="Login with Google">retry</a>!</p>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
\ No newline at end of file
+@endsection
diff --git a/views/login/google_signup.php b/views/login/google_signup.php
index 8b741de..0f9fe9c 100644
--- a/views/login/google_signup.php
+++ b/views/login/google_signup.php
@@ -1,10 +1,14 @@
+@extra
 <?php
 $jsFiles = [
     'js/login/google_signup.js',
 ];
 ?>
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@endextra
+
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Sign up</h2>
     <div class="box">
         <form id="googleSignupForm" action="/signup/google" method="post" data-redirect-on-success="/">
@@ -26,5 +30,4 @@ $jsFiles = [
             </div>
         </form>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
\ No newline at end of file
+@endsection
diff --git a/views/login/login.php b/views/login/login.php
index 5170136..e2eef46 100644
--- a/views/login/login.php
+++ b/views/login/login.php
@@ -1,5 +1,6 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Login</h2>
     <div class="box">
         <form id="loginForm" action="/login" method="post" data-redirect-on-success="/">
@@ -15,5 +16,4 @@
             </div>
         </form>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
\ No newline at end of file
+@endsection
diff --git a/views/login/signup.php b/views/login/signup.php
index c0d11bd..6912a27 100644
--- a/views/login/signup.php
+++ b/views/login/signup.php
@@ -1,10 +1,14 @@
+@extra
 <?php
 $jsFiles = [
     'js/login/signup.js',
 ];
 ?>
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@endextra
+
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Sign up</h2>
     <div class="box">
         <form id="signupForm" action="/signup" method="post" data-redirect-on-success="/signup/success">
@@ -30,5 +34,4 @@ $jsFiles = [
             </div>
         </form>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
\ No newline at end of file
+@endsection
diff --git a/views/login/signup_success.php b/views/login/signup_success.php
index e727ee1..f2a42f1 100644
--- a/views/login/signup_success.php
+++ b/views/login/signup_success.php
@@ -1,8 +1,8 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Sign up</h2>
     <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>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
\ No newline at end of file
+@endsection
diff --git a/views/maps.php b/views/maps.php
index 64ec1db..002d3bb 100644
--- a/views/maps.php
+++ b/views/maps.php
@@ -1,3 +1,4 @@
+@extra
 <?php
 $cssFiles = [
     'css/maps.css'
@@ -9,8 +10,11 @@ if ($isAdmin) {
     $jsFiles[] = 'js/maps_admin.js';
 }
 ?>
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@endextra
+
+@extends('templates/layout_normal')
+
+@section('main')
     <div id="mapContainer">
         <?php foreach ($maps as $map): ?>
             <div class="mapItem">
@@ -66,5 +70,4 @@ if ($isAdmin) {
             <?php endfor; ?>
         <?php endif; ?>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
\ No newline at end of file
+@endsection
diff --git a/views/templates/footer.php b/views/templates/footer.php
deleted file mode 100644
index 8c3ff6f..0000000
--- a/views/templates/footer.php
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/views/templates/layout_full.php b/views/templates/layout_full.php
new file mode 100644
index 0000000..4a8fd24
--- /dev/null
+++ b/views/templates/layout_full.php
@@ -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
diff --git a/views/templates/header.php b/views/templates/layout_normal.php
similarity index 79%
rename from views/templates/header.php
rename to views/templates/layout_normal.php
index c903207..1b5dd61 100644
--- a/views/templates/header.php
+++ b/views/templates/layout_normal.php
@@ -1,3 +1,5 @@
+@extends('templates/mapguesser')
+@section('content')
 <header>
     <h1>
         <a href="/" title="<?= $_ENV['APP_NAME'] ?>">
@@ -21,4 +23,11 @@
         <?php endif; ?>
     </p>
 </header>
-<main>
\ No newline at end of file
+<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
diff --git a/views/templates/main_footer.php b/views/templates/main_footer.php
deleted file mode 100644
index 378e2ff..0000000
--- a/views/templates/main_footer.php
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/views/templates/main_header.php b/views/templates/mapguesser.php
similarity index 50%
rename from views/templates/main_header.php
rename to views/templates/mapguesser.php
index a88457d..083fbb7 100644
--- a/views/templates/main_header.php
+++ b/views/templates/mapguesser.php
@@ -38,4 +38,57 @@
         <h2 id="modalTitle"></h2>
         <p id="modalText" class="justify marginTop"></p>
         <div id="modalButtons" class="right"></div>
-    </div>
\ No newline at end of file
+    </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>