diff --git a/css/style.css b/css/style.css index ffe88a1..ed0699b 100644 --- a/css/style.css +++ b/css/style.css @@ -38,8 +38,7 @@ legend { #parent { display: flex; flex-flow: row wrap; - align-items: center; - justify-content: center; + justify-content: flex-start; } /* text description element */ #parent div:nth-child(1) { @@ -47,10 +46,13 @@ legend { } /* symbol elements */ #parent div { - flex-basis: 50%; + flex-basis: 45%; } /* spacing */ +.article-spacing { + margin-bottom: 0.5cm; +} .between-spacing { margin-bottom: 1cm; } diff --git a/img/aside_image.jpg b/img/aside_image.jpg new file mode 100644 index 0000000..e7dddbf Binary files /dev/null and b/img/aside_image.jpg differ diff --git a/js/validation.js b/js/validation.js index 3c7a641..9aa6f62 100644 --- a/js/validation.js +++ b/js/validation.js @@ -4,31 +4,36 @@ 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 */ @@ -36,17 +41,20 @@ 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"); diff --git a/readme.txt b/readme.txt new file mode 100644 index 0000000..e6565ea --- /dev/null +++ b/readme.txt @@ -0,0 +1,7 @@ +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. \ No newline at end of file diff --git a/rental.html b/rental.html index bff5867..80c117d 100644 --- a/rental.html +++ b/rental.html @@ -1,106 +1,112 @@ - - Mietanfrage - - - - - - - - + + Mietanfrage + + + + + + + + - -
-

Mietanfrage Jonas Arnold Eventtechnik

- -
- -
- -
-

Information

- -
-

Beschreibung

- - 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.
- Sofern es verfügbar ist, wird es für Sie reserviert und wir nehmen im Anschluss Kontakt mit Ihnen auf.
- Wenn Sie mehrere Materialien mieten möchten, füllen Sie das untenstehende Formular mehrmals aus. Die Bestellnummer bleibt während einer Stunde dieselbe.
- Die verfügbaren Mietartikel und deren Nummer finden Sie hier:
-
- -

- -

Bestätigung Reservation

- -
-
- 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.

+ +
+

Mietanfrage Jonas Arnold Eventtechnik

+ +
+ +
+ +
+

Information

+ +
+

Beschreibung

+ +

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.
+ Sofern es verfügbar ist, wird es für Sie reserviert und wir nehmen im Anschluss Kontakt mit Ihnen auf.
+ Wenn Sie mehrere Materialien mieten möchten, füllen Sie das untenstehende Formular mehrmals aus. Die Bestellnummer bleibt während einer Stunde dieselbe.
+ Zur Reservation benötigen sie die eindeutige Materialnummer. Die verfügbaren Mietartikel und deren Nummer finden Sie hier:

+

+
+ +
+
+ +

Bestätigung Reservation

+ +
+
+

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.
+ Folgende Symbole werden angezeigt, um die Reservation zu bestätigen oder abzulehnen.

+

+
+
+
Erfolgreiche Reservation

+ + Ihr Webbrowser unterstützt kein Canvas. + +
+
+
Reservation nicht möglich

+ + Ihr Webbrowser unterstützt kein Canvas. + +
-
- Erfolgreiche Reservation
- - Ihr Webbrowser unterstützt kein Canvas. - -
-
- Reservation nicht möglich
- - Ihr Webbrowser unterstützt kein Canvas. - -
-
-
-
+ + -

+

- -
-
- + +

Mietanfrage Formular

+
-
-
- Mietartikel - -
- - - - -
-
-
-
-
- Kundenangaben - -
-
-
- - -
-
- -
-

-
- +
+
+
+ Mietartikel + + +
+ + + + +
+
+
+
+
+ Kundenangaben + + +
+
+
+ + +
+
+
+ +

+ + \ No newline at end of file diff --git a/rental_action.php b/rental_action.php index 3fe91be..c8e5a0b 100644 --- a/rental_action.php +++ b/rental_action.php @@ -1,25 +1,24 @@ - - Mietanfrage - - - - - - - - -
-

Rückmeldung Mietanfrage

-
-
- -
- - + + Mietanfrage + + + + + + + + +
+

Rückmeldung Mietanfrage

+
+
+ +
+ ".$text.""; } -/* main PHP */ +/* main PHP procedure */ // initialize variables $failure_text = "Unbekannter Fehler"; $material_name = ""; @@ -178,7 +187,7 @@ if(validateParameters()){ } } -/* final check for success, generate according defauls section */ +/* check for success, generate according details section */ if($rentalSuccess){ echo ""; echo "

Mietanfrage erfolgreich erfasst

"; @@ -188,15 +197,15 @@ if($rentalSuccess){ echo "

Mietanfrage konnte nicht erfasst werden

"; buildFailedConfirmationDetailsSection($failure_text); } - -?> - - - - -
-
- +?> + + + + + +
+
+ \ No newline at end of file diff --git a/schema.sql b/schema.sql new file mode 100644 index 0000000..7220125 --- /dev/null +++ b/schema.sql @@ -0,0 +1,28 @@ +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", ""); +insert into articles (article_number, article_name, html_description) values ("L010302", "MA Lighting grandMA2 Tour Pack (command Wing)", ""); +insert into articles (article_number, article_name, html_description) values ("E010101", "McCrypt DB-S8, Vertikal-Nebelmaschine 1300W", ""); +insert into articles (article_number, article_name, html_description) values ("T010101", "Midas M32R Live, 40-Kanal Digitalmischpult", ""); +insert into articles (article_number, article_name, html_description) values ("T010102", "Midas M32C, Rackmischpult", ""); +insert into articles (article_number, article_name, html_description) values ("T010201", "Midas DL32 Digitale Stagebox", ""); +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", "");