Compare commits
3 Commits
869a11d17d
...
78fd0087e3
| Author | SHA1 | Date |
|---|---|---|
Jonas Arnold
|
78fd0087e3 | 4 years ago |
|
Jonas Arnold
|
fe28688ff7 | 4 years ago |
|
Jonas Arnold
|
57003df7fc | 4 years ago |
|
After Width: | Height: | Size: 1.3 MiB |
@ -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. |
||||
@ -1,106 +1,112 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="de"> |
||||
<head> |
||||
<title>Mietanfrage</title> |
||||
<meta charset="utf8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<script src="./js/canvas.js"></script> |
||||
<script src="./js/validation.js"></script> |
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> |
||||
<link rel="stylesheet" href="./css/custom.css"> <!-- Load custom css after w3 --> |
||||
<link rel="stylesheet" href="./css/style.css"> |
||||
</head> |
||||
<head> |
||||
<title>Mietanfrage</title> |
||||
<meta charset="utf8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<script src="./js/canvas.js"></script> |
||||
<script src="./js/validation.js"></script> |
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> |
||||
<link rel="stylesheet" href="./css/custom.css"> <!-- Load custom css after w3 --> |
||||
<link rel="stylesheet" href="./css/style.css"> |
||||
</head> |
||||
|
||||
<body onload="animateCheckmark('canvasCheckmark', 150, 200, 10);animateCross('canvasCross', 150, 200, 10);"> |
||||
<header class="w3-container"> |
||||
<h1>Mietanfrage Jonas Arnold Eventtechnik</h1> |
||||
<nav class="w3-bar navbar"> |
||||
<a href="#Information" class="w3-bar-item w3-button w3-mobile">Information</a> |
||||
<a href="#Formular" class="w3-bar-item w3-button w3-mobile">Formular</a> |
||||
</nav> |
||||
</header> |
||||
|
||||
<main> |
||||
<!-- INFORMATION / DESCRIPTION --> |
||||
<article class="w3-container"> |
||||
<h2 id="Information">Information</h2> |
||||
<aside class="w3-container w3-col l6"> |
||||
<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 --> |
||||
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/> |
||||
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/> |
||||
|
||||
<h2>Bestätigung Reservation</h2> |
||||
<!-- flexbox --> |
||||
<div id="parent"> |
||||
<div> |
||||
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/> |
||||
<body onload="animateCheckmark('canvasCheckmark', 150, 200, 10);animateCross('canvasCross', 150, 200, 10);"> |
||||
<header class="w3-container"> |
||||
<h1>Mietanfrage Jonas Arnold Eventtechnik</h1> |
||||
<nav class="w3-bar navbar"> |
||||
<a href="#Information" class="w3-bar-item w3-button w3-mobile">Information</a> |
||||
<a href="#Formular" class="w3-bar-item w3-button w3-mobile">Formular</a> |
||||
</nav> |
||||
</header> |
||||
|
||||
<main> |
||||
<!-- INFORMATION / DESCRIPTION --> |
||||
<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"> |
||||
</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/> |
||||
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> |
||||
<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/> |
||||
|
||||
<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> |
||||
</div> |
||||
<div> |
||||
<h5>Erfolgreiche Reservation</h5><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/> |
||||
<canvas id="canvasCross" width="200px" height="200px" aria-label="Rotes Stop Symbol zum Ausdruck der fehlgeschlagenen Reservation"> |
||||
Ihr Webbrowser unterstützt kein Canvas. |
||||
</canvas> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<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> |
||||
<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> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
</article> |
||||
</section> |
||||
</article> |
||||
|
||||
<p class="between-spacing"></p> |
||||
<p class="between-spacing"></p> |
||||
|
||||
<!-- FORM --> |
||||
<article class="w3-container"> |
||||
<form action="rental_action.php" method="post" onsubmit="return isValid();"> |
||||
<!-- Error box, default hidden --> |
||||
<!-- FORM --> |
||||
<article class="w3-container"> |
||||
<h2 id="Formular">Mietanfrage Formular</h2> |
||||
<!-- Error box, default hidden --> |
||||
<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> |
||||
<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/> |
||||
|
||||
<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/> |
||||
</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/> |
||||
</fieldset> |
||||
<fieldset> |
||||
<label for="submit">Mietanfrage senden</label> |
||||
<button class="w3-button w3-block" type="submit" id="submit">Senden</button> |
||||
</fieldset> |
||||
</div> |
||||
</form> |
||||
</article> |
||||
<p class="bottom-spacing"></p> |
||||
</main> |
||||
</body> |
||||
<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/> |
||||
<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/> |
||||
</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/> |
||||
</fieldset> |
||||
<fieldset> |
||||
<label for="submit">Mietanfrage senden</label> |
||||
<button class="w3-button w3-block" type="submit" id="submit">Senden</button> |
||||
</fieldset> |
||||
</div> |
||||
</form> |
||||
</article> |
||||
|
||||
<p class="bottom-spacing"></p> |
||||
|
||||
</main> |
||||
</body> |
||||
</html> |
||||
@ -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", "<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” ELO Touchscreen</li><li>Bis zu 2048 DMX-Kanä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>"); |
||||
Loading…
Reference in new issue