css/style.css

@@ -38,7 +38,8 @@ legend {
 #parent {
 	display: flex;
 	flex-flow: row wrap;
-	justify-content: flex-start;
+	align-items: center;
+	justify-content: center;
 }
 /* text description element */
 #parent div:nth-child(1) {
@@ -46,13 +47,10 @@ legend {
 }
 /* symbol elements */
 #parent div {
-	flex-basis: 45%;
+	flex-basis: 50%;
 }
 
 /* spacing */
-.article-spacing {
-	margin-bottom: 0.5cm;
-}
 .between-spacing {
 	margin-bottom: 1cm;
 }

js/validation.js

@@ -4,36 +4,31 @@ function isValid() {
     /* VALIDATE RENTAL ARTICLE NUMBER */
     let rental_art_nr = document.getElementById("mietart_nr").value;
     if(rental_art_nr == ''){  // check if rental art nr is present.
-        setErrorPanel("Bitte eine Mietartikel Nummer angeben.");  
-        return false;
+        setErrorPanel("Bitte eine Mietartikel Nummer angeben.");  return false;
     }
     console.log("Testing if " + rental_art_nr[0] + " is a letter. IsLetter=" + rental_art_nr[0].match(/[a-z]/i));
     if(rental_art_nr[0].match(/[a-z]/i) == null){  // check if first character is a letter. all article numbers start with a letter.
-        setErrorPanel("Bitte eine gültige Mietartikel Nummer angeben."); 
-        return false;
+        setErrorPanel("Bitte eine gültige Mietartikel Nummer angeben."); return false;
     }
 
     /* VALIDATE START DATE */
     let start_date_string = document.getElementById("von").value;
     let start_date = new Date(start_date_string);
     if(start_date_string == '' || start_date == null){ // check if start date is present and valid.
-        setErrorPanel("Bitte ein valides Startdatum angeben."); 
-        return false;
+        setErrorPanel("Bitte ein valides Startdatum angeben."); return false;
     }
 
     /* VALIDATE END DATE */
     let end_date_string = document.getElementById("bis").value;
     let end_date = new Date(end_date_string);
     if(end_date_string == '' || end_date == null){ // check if end date is present and valid.
-        setErrorPanel("Bitte ein valides Enddatum angeben."); 
-        return false;
+        setErrorPanel("Bitte ein valides Enddatum angeben."); return false;
     }
     
     /* VALIDATE START DATE IS BEFORE END DATE */
     console.log("Testing if start date " + start_date.toISOString() + " is before end date " + end_date.toISOString() + " Is=" + (end_date >= start_date));
     if(end_date < start_date){ // check if start date is before end date.
-        setErrorPanel("Startdatum muss vor Enddatum liegen."); 
-        return false;
+        setErrorPanel("Startdatum muss vor Enddatum liegen."); return false;
     }
 
     /* VALIDATE START DATE IS AFTER TODAY */
@@ -41,20 +36,17 @@ function isValid() {
     let now_dateOnly = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
     console.log("Testing if start date " + start_date.toISOString() + " is after now " + now_dateOnly.toISOString() + ". IsTodayOrLater=" + (start_date >= now_dateOnly));
     if(start_date < now_dateOnly){ // check if start date in the past. today is ok.
-        setErrorPanel("Startdatum liegt in der Vergangenheit."); 
-        return false;
+        setErrorPanel("Startdatum liegt in der Vergangenheit."); return false;
     }
 
     /* VALIDATE CUSTOMER NUMBER */
     let customer_nr = document.getElementById("kunden_nr").value;
     if(customer_nr == ''){  // check if customer number empty
-        setErrorPanel("Bitte eine Kundennummer angeben."); 
-        return false;
+        setErrorPanel("Bitte eine Kundennummer angeben."); return false;
     }
     console.log("Testing if customer number " + customer_nr + " is a number. IsInteger=" + (isNaN(customer_nr) == false));
     if(isNaN(customer_nr) == true){  // check if customer number is a number
-        setErrorPanel("Kundennummer ist ungültig."); 
-        return false;
+        setErrorPanel("Kundennummer ist ungültig."); return false;
     }
 
     console.log("Validation sucessful");

readme.txt

@@ -1,7 +0,0 @@
-Einige Hinweise zur Applikation:
-- Die Kundennummer wird nicht mit einer DB abgeglichen, da ich dies nicht innerhalb der gesetzten Zeilenlimiten realisieren konnte. 
-  Für diese Nummer deshalb einfach etwas erfinden: 123456 o.ä.
-- Nicht alle Materialien, welche in der PDF Liste sind, sind auch in der DB erfasst. Das ist ein valider Fall. 
-  Um das Erfassen eines DB-Eintrags zu testen, sollte eine erfasste Materialnummer verwendet werden (siehe schema.sql). Beispielsweise T010102
-- Die Anzahl der verfügbaren Materialien gem. PDF ist ebenfalls nicht implementiert. Dies hätte den Rahmen der Zeilenlimiten überschritten.
-  Jedes Material wird als "nur einmal verfügbar" angenommen.

rental.html

@@ -25,37 +25,33 @@
         <article class="w3-container">
             <h2 id="Information">Information</h2>
             <aside class="w3-container w3-col l6">
-                    <img class="aside-image" src="./img/aside_image.jpg" alt="Zwei gestapelte Racks mit Mischpult und Stagebox">
+                <img class="aside-image" src="./var/aside_image.jpg" alt="Zwei gestapelte Racks mit Mischpult und Stagebox">
             </aside>
             <section class="w3-container w3-col l6">
                 <h2>Beschreibung</h2>
                 <!-- information text -->
-                    <p>Auf dieser Webseite können Sie, als registrierter Kunde, Material von Jonas Arnold Eventtechnik mieten. Sie erhalten direkt eine Bestätigung, ob das Material zum gewünschten Zeitpunkt noch verfügbar ist. <br/>
+                Auf dieser Webseite können Sie als registrierter Kunde, Material von Jonas Arnold Eventtechnik mieten. Sie erhalten direkt eine Bestätigung, ob das Material zum gewünschten Zeitpunkt noch verfügbar ist. <br/>
                 Sofern es verfügbar ist, wird es für Sie reserviert und wir nehmen im Anschluss Kontakt mit Ihnen auf. <br>
                 Wenn Sie mehrere Materialien mieten möchten, füllen Sie das untenstehende Formular mehrmals aus. Die Bestellnummer bleibt während einer Stunde dieselbe. <br/>
-                    Zur Reservation benötigen sie die eindeutige Materialnummer. Die verfügbaren Mietartikel und deren Nummer finden Sie hier: </p>
-                    <p class="article-spacing"></p>
+                Die verfügbaren Mietartikel und deren Nummer finden Sie hier: <br/>
                 <form action="https://jonasarnold.com/wp-content/uploads/2022/12/Mietpreisliste_2023-1.pdf" method="get" target="_blank">
                     <button class="w3-button" type="submit" alt="Weiterleitung zu PDF, welches Mietartikel auflistet">PDF Mietartikel</button>
-                    </form> 
-                    <br/> 
+                </form> <br/> 
                 
                 <h2>Bestätigung Reservation</h2>
                 <!-- flexbox -->
                 <div id="parent">  
                     <div>
-                            <p>Die Mietanfrage wird mit der Datenbank abgeglichen. Sofern das Material verfügbar ist, wird es für Sie reserviert. Ansonsten werden Sie darüber informiert, dass das Material bereits vermietet ist.<br/>
-                            Folgende Symbole werden angezeigt, um die Reservation zu bestätigen oder abzulehnen. </p>
-                            <p class="article-spacing"></p>
+                        Die Mietanfrage wird mit der Datenbank abgeglichen. Sofern das Material verfügbar ist, wird es für Sie reserviert. Ansonsten werden Sie darüber informiert, dass das Material bereits vermietet ist. <br/> <br/>
                     </div>
                     <div>
-                            <h5>Erfolgreiche Reservation</h5><br/>
+                        <b>Erfolgreiche Reservation</b><br/>
                         <canvas id="canvasCheckmark" width="200px" height="200px" aria-label="Grüner Haken zur Bestätigung der erfolgreichen Reservation">
                             Ihr Webbrowser unterstützt kein Canvas.
                         </canvas>
                     </div>
                     <div>
-                            <h5>Reservation nicht möglich</h5><br/>
+                        <b>Reservation nicht möglich</b><br/>
                         <canvas id="canvasCross" width="200px" height="200px" aria-label="Rotes Stop Symbol zum Ausdruck der fehlgeschlagenen Reservation">
                             Ihr Webbrowser unterstützt kein Canvas.
                         </canvas>
@@ -68,34 +64,32 @@
 
         <!-- FORM -->
         <article class="w3-container">
-                <h2 id="Formular">Mietanfrage Formular</h2>
+            <form action="rental_action.php" method="post" onsubmit="return isValid();">
                 <!-- Error box, default hidden -->
+                <h2 id="Formular">Mietanfrage Formular</h2>
                 <div class="w3-container">
                     <div class="w3-panel w3-pale-red w3-border" hidden="true" id="error-panel">
                         <h3>Eingabefehler</h3>
                         <p id="error-text"></p>
                     </div>
                 </div>
-                <form action="rental_action.php" method="post" onsubmit="return isValid();">
                 <div class="w3-container w3-col l6">
                     <fieldset>
                         <legend>Mietartikel</legend>
                         <label for="mietart_nr">Mietartikel Nummer</label>
-                            <input class="w3-input" placeholder="z.B. T010301" type="text" id="mietart_nr" name="rental_article_nr" required>
-                            <br/>
+                        <input class="w3-input" placeholder="z.B. T010301" type="text" id="mietart_nr" name="rental_article_nr" required><br/>
+            
                         <label for="von">Von</label>
                         <input class="w3-input" type="date" id="von" name="start_date" required>
                         <label for="bis">Bis</label>
-                            <input class="w3-input" type="date" id="bis" name="end_date" required>
-                            <br/>
+                        <input class="w3-input" type="date" id="bis" name="end_date" required><br/>
                     </fieldset>
                 </div>
                 <div class="w3-container w3-col l6">
                     <fieldset>
                         <legend>Kundenangaben</legend>
                         <label for="kunden_nr">Kundennummer</label>
-                            <input class="w3-input" placeholder="z.B. 123456" type="number" id="kunden_nr" name="customer_nr" required>
-                            <br/>
+                        <input class="w3-input" placeholder="z.B. 123456" type="number" id="kunden_nr" name="customer_nr" required><br/>
                     </fieldset>
                     <fieldset>
                         <label for="submit">Mietanfrage senden</label>
@@ -104,9 +98,9 @@
                 </div>
             </form>
         </article>
-
         <p class="bottom-spacing"></p>
-
     </main>
 </body>
+
+
 </html>

rental_action.php

@@ -14,11 +14,12 @@
         <h2>Rückmeldung Mietanfrage</h2>
     </header>
     <main>
-            <aside class="w3-container w3-center w3-col l4">
+        <aside class="w3-container w3-center w3-col l3">
             <canvas id="canvas" width="300px" height="300px" class="confirmation-symbol" aria-label="Symbol, das die Reservation bestätigt oder ablehnt"></canvas>
         </aside>
-            <section class="w3-container w3-col l8 confirmation-container">
-<!-- php generated details --> 
+        <section class="w3-container w3-col l9 confirmation-container">
+
+<!-- generated details --> 
 <?php
 /* validates parameters received via POST. checks if all are set and they are valid. */
 function validateParameters() {
@@ -26,60 +27,50 @@ function validateParameters() {
 
     /* VALIDATE RENTAL ARTICLE NUMBER */
     if (!isset($_POST['rental_article_nr'])) { // check if rental art nr is present.
-        $failure_text = "Parameter 'rental_art_nr' is required."; 
-        return false;
+        $failure_text = "Parameter 'rental_art_nr' is required."; return false;
     }
     $rental_art_nr = trim($_POST['rental_article_nr']);
     if(ctype_alpha($rental_art_nr[0]) == false){ // check if first character is a letter. all article numbers start with a letter.
-        $failure_text = "Parameter 'rental_art_nr' has to start with a letter."; 
-        return false;
+        $failure_text = "Parameter 'rental_art_nr' has to start with a letter."; return false;
     }
 
     /* VALIDATE START DATE */
     if (!isset($_POST['start_date'])) { // check if start date is present
-        $failure_text = "Parameter 'start_date' is required."; 
-        return false;
+        $failure_text = "Parameter 'start_date' is required."; return false;
     }     
     $start_date = trim($_POST['start_date']);  // string arrives like "yyyy-mm-dd"
     $start_date_array = explode('-', $start_date);
     if (!checkdate($start_date_array[1], $start_date_array[2], $start_date_array[0])) { // check if start date is a valid date
-        $failure_text = "Parameter 'start_date' is not valid."; 
-        return false;
+        $failure_text = "Parameter 'start_date' is not valid."; return false;
     }
 
     /* VALIDATE END DATE */
     if (!isset($_POST['end_date'])) { // check if end date is present
-        $failure_text = "Parameter 'end_date' is required."; 
-        return false;
+        $failure_text = "Parameter 'end_date' is required."; return false;
     }
     $end_date = trim($_POST['end_date']);  // string arrives like "yyyy-mm-dd"
     $end_date_array = explode('-', $end_date);
     if (!checkdate($end_date_array[1], $end_date_array[2], $end_date_array[0])) { // check if end date is a valid date
-        $failure_text = "Parameter 'end_date' is not valid."; 
-        return false;
+        $failure_text = "Parameter 'end_date' is not valid."; return false;
     }
 
     /* VALIDATE START DATE IS BEFORE END DATE */
     if (strtotime($end_date) < strtotime($start_date)) {  // check if start date is before end date. same date is accepted.
-        $failure_text = "'start_date' must be before 'end_date'."; 
-        return false;
+        $failure_text = "'start_date' must be before 'end_date'."; return false;
     }
 
     /* VALIDATE START DATE IS AFTER TODAY */
     if (strtotime($start_date) < strtotime('today 00:00')) {  // check if start date in the past. today is ok.
-        $failure_text = "'start_date' cannot be in the past."; 
-        return false;
+        $failure_text = "'start_date' cannot be in the past."; return false;
     }
     
     /* VALIDATE CUSTOMER NUMBER */
     if (!isset($_POST['customer_nr'])) { // check if customer number is present
-        $failure_text = "Parameter 'customer_nr' is required."; 
-        return false;
+        $failure_text = "Parameter 'customer_nr' is required."; return false;
     }
     $customer_nr = intval($_POST['customer_nr']);
     if($customer_nr == 0){ // check if customer number is a number
-        $failure_text = "Parameter 'customer_nr' is not a valid number."; 
-        return false;
+        $failure_text = "Parameter 'customer_nr' is not a valid number."; return false;
     }
 
     return true;
@@ -102,7 +93,7 @@ function buildFailedConfirmationDetailsSection($text) {
     echo "<confirmation-details-1>".$text."</confirmation-details-1>";
 }
 
-/* main PHP procedure */
+/* main PHP */
 // initialize variables
 $failure_text = "Unbekannter Fehler";
 $material_name = "";
@@ -187,7 +178,7 @@ if(validateParameters()){
     }
 }
 
-/* check for success, generate according details section */
+/* final check for success, generate according defauls section */
 if($rentalSuccess){
     echo "<script>drawCheckmark('canvas', 250, 250);</script>";
     echo "<confirmation-header><h3 class=\"success\">Mietanfrage erfolgreich erfasst</h3></confirmation-header>";
@@ -197,8 +188,8 @@ if($rentalSuccess){
     echo "<confirmation-header><h3 class=\"failure\">Mietanfrage konnte nicht erfasst werden</h3></confirmation-header>";
     buildFailedConfirmationDetailsSection($failure_text);
 }
+
 ?>
-<!-- end of php generated code -->
             <!-- Footer with return link -->
             <confirmation-footer>
                 <button class="w3-button" onclick="window.location.href='./rental.html';">

schema.sql

@@ -1,28 +0,0 @@
-create database rental_system;
-
-use rental_system;
-
-create table articles(
-    article_number varchar(20) unique, 
-    article_name varchar(100),
-    html_description varchar(500)
-);
-
-create table rental_entries(
-    rental_id INT auto_increment,
-    article_number varchar(20), 
-    start_day date,
-    end_day date,
-    order_number varchar(30),
-    customer_number numeric,
-    primary key (rental_id)
-);
-
-insert into articles (article_number, article_name, html_description) values ("T010301", "Focusrite Scarlett 2i2 3rd Gen", "<ul><li>2x Mic/Line/Instr Input (XLR/Jack)</li><li>2x Jack Output (inkl. Adapter auf XLR)</li><li>AD-DA-Wandler 24 Bit/192 kHz</li><li>USB-C Anschluss</li><li>Gewicht inkl. Transportbox: 1,0 kg</li></ul>");
-insert into articles (article_number, article_name, html_description) values ("L010302", "MA Lighting grandMA2 Tour Pack (command Wing)", "<ul><li>Intel NUC PC mit grandMA2 onPC</li><li>grandMA2 command Wing</li><li>Hochwertiger 19.5&rdquo; ELO Touchscreen</li><li>Bis zu 2048 DMX-Kan&auml;le steuerbar</li><li>Gewicht: ca. 20,0 kg</li></ul>");
-insert into articles (article_number, article_name, html_description) values ("E010101", "McCrypt DB-S8, Vertikal-Nebelmaschine 1300W", "<ul><li>Ausstoss-Volumen ca. 300 m3/min</li><li>Ausstossweite: 10m</li><li>2 Nebelarten (Normal oder senkrecht nach oben)</li><li>DMX Steuerbar</li><li>Gewicht: 6,0 kg</li></ul>");
-insert into articles (article_number, article_name, html_description) values ("T010101", "Midas M32R Live, 40-Kanal Digitalmischpult", "<ul> <li>25 Bus, 8 DCA, 6 Mutegruppen</li> <li>16 XLR in, 8 XLR out</li> <li>6 Klinke in, 6 Klinke Out</li> <li>17 Midas PRO Motorfader</li> <li>Kompatibel mit Midas Stageboxen (AES50)<br> (bis zu 96 Inputs und 96 Outputs)</li> <li>Klark Teknik DN32-LIVE Karte</li> <li>Gewicht inkl. Case : 30,0 kg</li> </ul>");
-insert into articles (article_number, article_name, html_description) values ("T010102", "Midas M32C, Rackmischpult", "<ul> <li>40-Kanal Digitalmischpult im 2HE Case</li> <li>25 Bus, 8 DCA, 6 Mutegruppen</li> <li>Kompatibel mit Midas Stageboxen (AES50)<br> (bis zu 96 Inputs und 96 Outputs)</li> <li>Klark Teknik DN32-LIVE Karte</li> <li>Inkl. Midas DL32<br> (32 In, 16 Out) Digitale Stagebox</li> <li>OHNE WiFi-Access Point</li> <li>Gewicht inkl. Cases: 26,0 kg</li> </ul>");
-insert into articles (article_number, article_name, html_description) values ("T010201", "Midas DL32 Digitale Stagebox", "<ul> <li>32 XLR in MIDAS PRO Preamps, 16 XLR out</li> <li>2x AES/EBU (AES-3) out</li> <li>2x AES50 SuperMAC Ports<br> geschirmte CAT5e-Kabel verwenden,<br> max. 100m</li> <li>Gewicht inkl. Case: 15,0 kg</li> </ul>");
-insert into articles (article_number, article_name) values ("Z040201", "CAT5E Kabelrolle etherCon 50m");
-insert into articles (article_number, article_name, html_description) values ("Z010301", "Kabelrolle 50m, Typ13, 10A", "<ul><li>Gummikabel H07FN-F 3x1.5mm2</li><li>4x T13 Ausgang, Spritzwasserfest, IP44</li></ul>");