Added changes to help page

CHANGELOG

@@ -1,5 +1,11 @@
+14 maart 2020: Help pagina gepersonaliseerd. Leerlingen krijgen alleen de hulp te zien voor leerlingen. Hetzelfde geldt voor docenten.
+
+12 maart 2020: CSS Styling toegevoegd
+               Help pagina gemaakt
+
 10 maart 2020: Delete knop aangemaakt voor het verwijderen van database record.
-	       Links gefixt bij het dashboard.	       
+	       Links gefixt bij het dashboard.
+
 9 maart 2020:  Verbinding met database gelegd.
                Login systeem gemaakt.
                README.md geüpdatet. Nu zijn er duidelijke instructies voor het zelf opzetten van het gymrooster.

html/css/index.css

@@ -2,6 +2,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: Arial, Helvetica, sans-serif;
+  background-color: whitesmoke;
 }
 
 body nav {
@@ -29,19 +30,91 @@ body nav a:last-of-type {
   cursor: pointer;
 }
 
-body main {
+body header {
-  background-color: whitesmoke;
+  padding-bottom: 2em;
+}
+
+body header h1 {
+  margin-bottom: 0.25em;
+  text-decoration: underline;
+}
+
+body header h3 {
+  margin: 0;
+  font-weight: lighter;
+}
+
+body header h3:nth-of-type(2) {
+  margin-top: 1em;
+}
+
+body header a {
+  text-decoration: none !important;
   position: absolute;
-  top: 4em;
+  padding: 5px;
+}
+
+body header a:nth-of-type(1) {
   left: 0;
 }
 
+body header a:nth-of-type(2) {
+  right: 0;
+}
+
+body main {
+  position: relative;
+  top: 4em;
+  max-width: 50%;
+  min-width: 350px;
+  left: 0;
+  margin: 0 auto;
+  text-align: center;
+}
+
 body main div.loginContainer {
   position: relative;
   margin: 0 auto;
   text-align: center;
 }
 
+body main div.loginContainer input {
+  width: 75%;
+  max-width: 250px;
+  padding: 0.5em;
+}
+
+body main div table {
+  width: 100%;
+  text-align: left;
+}
+
+body main div table thead th {
+  text-decoration: underline;
+  padding: 5px;
+}
+
+body main div table tbody td {
+  vertical-align: top;
+  padding: 5px;
+}
+
+body a#help {
+  position: fixed;
+  bottom: 2em;
+  margin: 1em;
+}
+
+body form textarea {
+  width: 75%;
+  height: 5em;
+}
+
+body form button, body form select {
+  margin: 1em;
+  height: 2.25em;
+}
+
 body footer {
   background-color: #1f1f1f;
   color: whitesmoke;
@@ -53,4 +126,8 @@ body footer {
   height: 1em;
   padding: 0.5em;
 }
+
+body footer a {
+  color: whitesmoke !important;
+}
 /*# sourceMappingURL=index.css.map */

html/css/index.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AAAA,AAAA,IAAI,CAAC;EACD,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,WAAW,EAAE,4BAA4B;CA4C5C;;AA/CD,AAII,IAJA,CAIA,GAAG,CAAC;EACA,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,UAAU;EACjB,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,GAAG;CAYf;;AAxBL,AAaQ,IAbJ,CAIA,GAAG,CASC,GAAG,CAAC;EACA,MAAM,EAAE,GAAG;EACX,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,aAAa;CAC9G;;AAhBT,AAiBQ,IAjBJ,CAIA,GAAG,CAaC,CAAC,AAAA,aAAa,CAAC;EACX,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,GAAG;EACV,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,UAAU,CAAA,UAAU;EAC3B,MAAM,EAAE,OAAO;CAClB;;AAvBT,AAyBI,IAzBA,CAyBA,IAAI,CAAC;EACD,gBAAgB,EAAE,UAAU;EAC5B,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,CAAC;CAMV;;AAnCL,AA8BQ,IA9BJ,CAyBA,IAAI,CAKA,GAAG,AAAA,eAAe,CAAC;EACf,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,MAAM;EACd,UAAU,EAAE,MAAM;CACrB;;AAlCT,AAoCI,IApCA,CAoCA,MAAM,CAAC;EACH,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,UAAU;EACjB,QAAQ,EAAE,KAAK;EACf,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,KAAK;CACjB",
+    "mappings": "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",
     "sources": [
         "index.scss"
     ],

html/css/index.scss

@@ -2,6 +2,7 @@ body {
     margin: 0;
     padding: 0;
     font-family: Arial, Helvetica, sans-serif;
+    background-color: whitesmoke;
     nav {
         background-color: #1f1f1f;
         color: whitesmoke;
@@ -23,17 +24,86 @@ body {
             cursor: pointer;
         }
     }
+    header {
+        padding-bottom: 2em;
+        h1 {
+            margin-bottom: 0.25em;
+            text-decoration: underline;
+        }
+        h3 {
+            margin: 0;
+            font-weight: lighter;
+            &:nth-of-type(2) {
+                margin-top: 1em;
+            } 
+        }
+        a {
+            text-decoration: none!important;
+            position: absolute;
+            padding: 5px;
+            &:nth-of-type(1) {
+                left: 0;
+            }
+            &:nth-of-type(2) {
+                right: 0;
+            }
+        }
+    }
     main {
-        background-color: whitesmoke;
+        position: relative;
-        position: absolute;
         top: 4em;
+        max-width: 50%;
+        min-width: 350px;
         left: 0;
+        margin: 0 auto;
+        text-align: center;
         div.loginContainer {
             position: relative;
             margin: 0 auto;
             text-align: center;
+            input {
+                width: 75%;
+                max-width: 250px;
+                padding: 0.5em;
+            }
+        }
+        div {
+            table {
+                width: 100%;
+                text-align: left;
+                thead {
+                    th {
+                        text-decoration: underline;
+                        padding: 5px;
+                    }
+                }
+                tbody {
+                    td {
+                        vertical-align: top;
+                        padding: 5px;
+                    }
+                }
+            }
         }
     }
+
+    a#help {
+        position: fixed;
+        bottom: 2em;
+        margin: 1em;
+    }
+
+    form {
+        textarea {
+            width: 75%;
+            height: 5em;
+        }
+        button, select {
+            margin: 1em;
+            height: 2.25em;
+        }
+    }
+
     footer {
         background-color: #1f1f1f;
         color: whitesmoke;
@@ -44,5 +114,8 @@ body {
         text-align: center;
         height: 1em;
         padding: 0.5em;
+        a {
+            color: whitesmoke !important;
+        }
     }
 }

html/index.php

@@ -21,6 +21,8 @@ if ($url === '/' && !isAuthorized()) {
     include __DIR__ . '/../php/update.php';
 } elseif ($url === '/dashboard' && isAuthorized()) {
     include __DIR__ . '/../templates/dashboard.html.php';
+} elseif ($url === '/help') {
+    include __DIR__ . '/../templates/help.html.php';
 } elseif ($url === '/logout') {
     include __DIR__ . '/../php/logout.php';
 } elseif ($url === '/delete' && isAuthorized()) {

templates/dashboard.html.php

@@ -1,10 +1,14 @@
 <?php require __DIR__ . '/../php/dashboard.php' ?>
-Welkom <?=$docent['naam']?>
-<h1>Gymrooster voor <?=date("D d M Y", strtotime($date))?></h1>
-<a href="/dashboard?date=<?=date("Y-m-d", strtotime("-1 day", strtotime($date)))?>">Dag eerder</a>
-<a href="/dashboard?date=<?=date("Y-m-d", strtotime("+1 day", strtotime($date)))?>">Dag later</a>
 
-<form action="update?date=<?=$date?>&docent=<?=$docent['id']?>" method="post">
+<header>
+  <h1>Gymrooster</h1>
+  <h3>Welkom <?=$docent['naam']?></h3>
+  <h3><?=date("D d M Y", strtotime($date))?></h3>
+  <a href="/dashboard?date=<?=date("Y-m-d", strtotime("-1 day", strtotime($date)))?>">&lt;&nbsp;Dag eerder</a>
+  <a href="/dashboard?date=<?=date("Y-m-d", strtotime("+1 day", strtotime($date)))?>">Dag later&nbsp;&gt;</a>
+</header>
+
+<form id="submitForm" action="update?date=<?=$date?>&docent=<?=$docent['id']?>" method="post">
   <textarea name="opmerking" placeholder="Opmerkingen"><?=$rooster['opmerking']?></textarea><br>
   <select name="locatie">
   <?php if ($rooster['locatie'] === "1"): ?>
@@ -14,10 +18,17 @@ Welkom <?=$docent['naam']?>
     <option value="2">Buiten</option>
     <option value="1">Binnen</option>
   <?php endif; ?>
-  </select><br>
+  </select>
-  <input type="submit" value="Verzenden">
+  <button type="submit">Opslaan</button>
 </form>
 
 <a href="/delete?date=<?=$date?>&docent=<?=$docent['id']?>">
   Verwijder record in de database
 </a>
+
+
+<script>
+  document.getElementById('submitForm').addEventListener('submit', function(e) {
+    document.querySelectorAll('#submitForm button')[0].innerHTML = "✓ Opgeslagen";
+  });
+</script>

templates/help.html.php

@@ -0,0 +1,20 @@
+<header>
+    <h1>Hulp</h1>
+</header>
+
+<?php if (!isAuthorized()): ?>
+<h3>Voor leerlingen</h3>
+<p>
+    Ga naar de dag met de knoppen 'Dag eerder' en 'Dag later' en kijk of je binnen of buiten gym hebt. 
+    Als de gymles binnen wordt gegeven, volg dan het standaard lesrooster tenzij je docent een ander lokaal in de opmerking aangeeft.
+</p>
+<?php else: ?>
+<h3>Voor docenten</h3>
+<p>
+    Om een dag in te geven, drukt u rechtsboven op de knop 'Login'. Vervolgens vult u uw inloggegevens in. <br>
+    U komt op het Dashboard. Met de knoppen 'Dag eerder' en 'Dag later' kunt u door de komende dagen scrollen en gegevens ingeven. 
+    Vergeet na het ingeven niet op opslaan te drukken en vervolgens uit te loggen.<br>
+    De opmerking en de locatie kunnen later op de dag nog worden aangepast mocht dit nodig zijn.
+    De knop 'Verwijder record in de database' verwijdert alle data die bij de geselecteerde dag hoort. Dit is handig als u niet weet waar de les gegeven wordt maar wel al iets in het rooster heeft gezet.
+</p>
+<?php endif; ?>

templates/index.html.php

@@ -1,8 +1,11 @@
 <?php include "../php/index.php" ?>
 
-<h1>Gymrooster voor <?=date("D d M Y", strtotime($date))?></h1>
+<header>
-<a href="/?date=<?=date("Y-m-d", strtotime("-1 day", strtotime($date)))?>">Dag eerder</a>
+  <h1>Gymrooster</h1>
-<a href="/?date=<?=date("Y-m-d", strtotime("+1 day", strtotime($date)))?>">Dag later</a>
+  <h3><?=date("D d M Y", strtotime($date))?></h3>
+  <a href="/?date=<?=date("Y-m-d", strtotime("-1 day", strtotime($date)))?>">&lt;&nbsp;Dag eerder</a>
+  <a href="/?date=<?=date("Y-m-d", strtotime("+1 day", strtotime($date)))?>">Dag later&nbsp;&gt;</a>
+</header>
 
 <?php if ($result->num_rows !== 0): ?>
 <div>

templates/layout.html.php

@@ -9,7 +9,7 @@
 <body>
     <nav>
         <!-- Topnav -->
-        <a href="/"><img src="/res/HLC.svg"></a>
+        <a href="/"><img src="/res/HLC.svg" title="Home"></a>
         <?php if (isAuthorized()): ?>
             <a href="/logout">Log uit</a>
         <?php else: ?>
@@ -21,9 +21,11 @@
         <?=$output;?>
     </main>
 
+    <a id="help" href="/help">Help</a>
+
     <footer>
         <!-- Footer -->
-        Made by McArn and JoVo
+        Made by <a target="_blank" href="//arnweb.nl/">McArn</a> and <a target="_blank" href="//jobbel.nl">JoVo</a>
     </footer>
 </body>
 </html>

templates/login.html.php

@@ -1,8 +1,10 @@
 <div class="loginContainer">
     <form action="/login" method="post">
-        <h1>Login</h1>
+        <header>
+            <h1>Login</h1>
+        </header>
         <label for="username">Gebruikersnaam:</label><br>
-        <input type="text" name="username" placeholder="Gebruikersnaam"><br>
+        <input type="text" name="username" placeholder="Gebruikersnaam"><br><br>
         <label for="password">Wachtwoord:</label><br>
         <input type="password" name="password" placeholder="Wachtwoord"><br>