From e39ddb726f2133c0223406b4d437d2db862b9751 Mon Sep 17 00:00:00 2001
From: Robin Schumann <2210880@stud.hs-mannheim.de>
Date: Tue, 16 May 2023 12:52:47 +0200
Subject: [PATCH] =?UTF-8?q?=C3=84nderungen=20mobil-Warenkorb,=20Warenkorb.?=
 =?UTF-8?q?js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/desktop.css         |  10 ++
 public/css/mobile.css          |  97 +++++++++++---------
 public/javascript/warenkorb.js | 154 ++++++++++++++++++++++---------
 public/warenkorb.html          | 161 ++++++++++++++++++++++++---------
 4 files changed, 289 insertions(+), 133 deletions(-)

diff --git a/public/css/desktop.css b/public/css/desktop.css
index 03ce1cb..e036721 100644
--- a/public/css/desktop.css
+++ b/public/css/desktop.css
@@ -511,3 +511,13 @@
         cursor: pointer;
         font-weight: normal;
     }
+
+    #fehlerbox{
+        text-align: center;
+        color: red;
+        display: none;
+    }
+    
+    .mobile_ansicht{
+        display:none;
+    }
diff --git a/public/css/mobile.css b/public/css/mobile.css
index 59a0b35..73beb2f 100644
--- a/public/css/mobile.css
+++ b/public/css/mobile.css
@@ -415,38 +415,50 @@
     }
     
     .produkte_warenkorb {
-        position: relative;
-        max-width: 88%;
-        height: 165px;
-        border: thin solid #606060;
-        margin-top: 22.5px;
-        margin-bottom: 22.5px;
-        display: flex;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto 1fr;
+        border: thin solid black;
+        margin-left: -55px;
+        margin-top: 20px;
+        align-items: center;
+        justify-items: left;
+    }
+    
+    .content .produkte_warenkorb .bild_mobil img {
+        margin-left: -50px;
         align-items: center;
     }
     
-    .produkte_warenkorb img {
-        margin-right: 0px;
-        height: 60%;
-    
+    .content .produkte_details {
+        display: block;
+        margin-left: 0;
+        font-size: 0.8em;
+        justify-content: left;
     }
     
-    .content .produkte_details {
-        color: black;
-        font-weight: bold;
-        width: 150px;
-        display: block;
-        font-size: 0.8em;
-        margin-top: -40px;
+    .content .produkte_details p{
+        margin-left: 0;
     }
     
     .button_mit_menue {
         display: flex;
         align-items: center;
-        position: absolute;
-        bottom: 50px;
-        right: 30px;
+    }
     
+    .button_mit_menue p{
+        margin-left: -45px;
+    }
+    
+    #menue1,
+    #menue2,
+    #menue3,
+    #menue4,
+    #menue5,
+    #menue6 {
+        width: 35px;
+        height: 25px;
+        margin-left: 10px;
     }
     
     .button_entfernen {
@@ -464,33 +476,21 @@
         margin: 4px 2px;
         cursor: pointer;
         font-weight: normal;
-    
     }
     
-    #menue {
-        width: 35px;
-        height: 25px;
-        margin-left: 10px;
-    }
     
-    .content .gesamtbetrag {
+    .content .gesamtbetrag1,
+    .content .gesamtbetrag2,
+    .content .gesamtbetrag3,
+    .content .gesamtbetrag4,
+    .content .gesamtbetrag5,
+    .content .gesamtbetrag6 {
         font-weight: bold;
         color: black;
-        position: absolute;
         font-size: 1em;
-        bottom: 15px;
-        right: 15px;
+        margin-left: 0;
     }
     
-    
-    
-    .gesamtbetrag {
-        position: absolute;
-        font-size: 1em;
-        bottom: 15px;
-        right: 15px;
-    }
-
     .button_hinzufuegen {
         background-color: #9BB558;
         color: white;
@@ -564,19 +564,22 @@
         color: black;
         display: inline-block;
     }
-    .content .gesamtkosten_text{
+    
+    .content .gesamtkosten_text {
         color: black;
         display: inline-block;
         text-align: left;
         margin-left: 0;
         margin-right: 63px;
     }
-    .content .gesamtpreis{
+    
+    .content .gesamtpreis {
         color: black;
         display: inline-block;
         margin-left: 0;
     
     }
+    
     .content .button_bestellung_abschließen {
         background-color: #476B1C;
         color: white;
@@ -590,5 +593,11 @@
         cursor: pointer;
         font-weight: normal;
     }
-
-    
\ No newline at end of file
+    
+    .content .mobile_ansicht{
+        margin-left: -55px;
+    }
+    
+    .desktop_ansicht{
+        display: none;
+    }
\ No newline at end of file
diff --git a/public/javascript/warenkorb.js b/public/javascript/warenkorb.js
index 450516d..a105961 100644
--- a/public/javascript/warenkorb.js
+++ b/public/javascript/warenkorb.js
@@ -1,52 +1,118 @@
-let standardWerte = [10, 10, 10];
-const preise = [0.95, 2.0, 1.10];
+window.addEventListener('DOMContentLoaded', function () {
+    let standardWerte = [10, 10, 10];
+    const preise = [0.95, 2.0, 1.10];
 
-window.addEventListener('DOMContentLoaded', berechnePreise);
-
-function entferneAusWarenkorb(index) {
-    let inputId = 'menue' + index;
-    let inputElement = document.getElementById(inputId);
-    let testVar = inputElement.value;
-
-    if (/^[0-9]+$/.test(testVar) === false) {
-        zeigeHinweisfenster("Keine gültige Zahl eingegeben.");
-    } else {
-        let verringereUm = parseInt(inputElement.value);
-
-        if ((standardWerte[index - 1] - verringereUm) < 0) {
-            zeigeHinweisfenster("Der Wert darf nicht negativ sein/die Anzahl darf nicht unter 0 fallen.");
-        } else {
-            zeigeHinweisfenster("");
-            let aktuellerWert = standardWerte[index - 1] - verringereUm;
-            standardWerte[index - 1] = aktuellerWert; 
-            inputElement.value = aktuellerWert;
-        }
-    }
     berechnePreise();
 
-}
-function berechnePreise() {
-    for (let i = 0; i < standardWerte.length; i++) {
-        let preisID = 'gesamtbetrag' + (i + 1);
-        let preisElement = document.getElementById(preisID);
-        let preisEinzeln = (standardWerte[i] * preise[i]).toFixed(2);
-        preisElement.innerText = "Betrag Gesamt (inkl. MwSt.): " + preisEinzeln + '€';
+    document.getElementById("button1").addEventListener('click', function () {
+        entferneAusWarenkorb(1);
+    });
+
+    document.getElementById("button2").addEventListener('click', function () {
+        entferneAusWarenkorb(2);
+    });
+
+    document.getElementById("button3").addEventListener('click', function () {
+        entferneAusWarenkorb(3);
+    });
+
+    document.getElementById("button4").addEventListener('click', function () {
+        entferneAusWarenkorb(4);
+    });
+
+    document.getElementById("button5").addEventListener('click', function () {
+        entferneAusWarenkorb(5);
+    });
+
+    document.getElementById("button6").addEventListener('click', function () {
+        entferneAusWarenkorb(6);
+    });
+
+    var bestellbutton1 = document.getElementById("bestellbutton_desktop").addEventListener('click', checkObFeldLeer);
+    var bestellbutton2 = document.getElementById("bestellbutton_mobil").addEventListener('click', checkObFeldLeer);
+
+    function entferneAusWarenkorb(index) {
+        let inputId = 'menue' + index;
+        let inputElement = document.getElementById(inputId);
+        let testVar = inputElement.value;
+
+        if (/^[0-9]+$/.test(testVar) === false) {
+            zeigeHinweisfenster("Keine gültige Zahl eingegeben.");
+        } else {
+            let verringereUm = parseInt(inputElement.value);
+
+            if (index === 4) {
+                index = 1;
+            }
+            if (index === 5) {
+                index = 2;
+            }
+            if (index === 6) {
+                index = 3;
+            }
+            if ((standardWerte[index - 1] - verringereUm) < 0) {
+                zeigeHinweisfenster("Der Wert darf nicht negativ sein/die Anzahl darf nicht unter 0 fallen.");
+            } else {
+                zeigeHinweisfenster("");
+                let aktuellerWert = standardWerte[index - 1] - verringereUm;
+                standardWerte[index - 1] = aktuellerWert;
+                inputElement.value = aktuellerWert;
+            }
+        }
+        berechnePreise();
 
     }
-    gesamtpreis = ((standardWerte[0] * preise[0]) + (standardWerte[1] * preise[1]) + (standardWerte[2] * preise[2])) + 2.90;
-    let gesamtkostenText = document.getElementById("gesamtpreis");
-    gesamtkostenText.innerText = gesamtpreis.toFixed(2) + "€";
-    localStorage.setItem("gesamtpreis", gesamtpreis);
-}
-
-function zeigeHinweisfenster(text) {
-    var hinweisfenster = document.getElementById("notification");
-    hinweisfenster.innerText = text;
-    if (text !== "") {
-        hinweisfenster.style.display = "block";
-    } else {
-        hinweisfenster.style.display = "none";
+    function berechnePreise() {
+        for (let i = 0; i < standardWerte.length; i++) {
+            let preisID = 'gesamtbetrag' + (i + 1);
+            let preisElement = document.getElementById(preisID);
+            let preisEinzeln = (standardWerte[i] * preise[i]).toFixed(2);
+            preisElement.innerText = "Betrag Gesamt (inkl. MwSt.): " + preisEinzeln + '€';
+        }
+        for (let i = 0; i < standardWerte.length; i++) {
+            let preisID = 'gesamtbetrag' + (i + 4);
+            let preisElement = document.getElementById(preisID);
+            let preisEinzeln = (standardWerte[i] * preise[i]).toFixed(2);
+            preisElement.innerText = "Betrag Gesamt (inkl. MwSt.): " + preisEinzeln + '€';
+        }
+        gesamtpreis = ((standardWerte[0] * preise[0]) + (standardWerte[1] * preise[1]) + (standardWerte[2] * preise[2])) + 2.90;
+        let gesamtkostenText = document.getElementById("gesamtpreis");
+        gesamtkostenText.innerText = gesamtpreis.toFixed(2) + "€";
+        localStorage.setItem("gesamtpreis", gesamtpreis);
     }
-}
 
+    function zeigeHinweisfenster(text) {
+        var hinweisfenster = document.getElementById("notification");
+        hinweisfenster.innerText = text;
+        if (text !== "") {
+            hinweisfenster.style.display = "block";
+        } else {
+            hinweisfenster.style.display = "none";
+        }
+    }
+
+    function checkObFeldLeer(event) {
+        let feld1 = document.getElementById("menue1").value;
+        let feld2 = document.getElementById("menue2").value;
+        let feld3 = document.getElementById("menue3").value;
+        let feld4 = document.getElementById("menue4").value;
+        let feld5 = document.getElementById("menue5").value;
+        let feld6 = document.getElementById("menue6").value;
+
+        if ((feld1 === "") || (feld2 === "") || (feld3 === "") || (feld4 === "") || (feld5 === "") || (feld6 === "")) {
+            event.preventDefault();
+            zeigeHinweisfenster("Kein Feld darf leer sein!");
+
+        }
+        else if ((/^[0-9]{1,}$/.test(feld1) === false) || (/^[0-9]{1,}$/.test(feld2) === false) || (/^[0-9]{1,}$/.test(feld3) === false)
+            || (/^[0-9]{1,}$/.test(feld4) === false) || (/^[0-9]{1,}$/.test(feld5) === false) || (/^[0-9]{1,}$/.test(feld6) === false)) {
+            event.preventDefault();
+            zeigeHinweisfenster("Es stehten keine (gültigen) Nummern in den Feldern.   [gültig = positive Zahlen 0-9]")
+        }
+        else {
+            window.location.href = event.target.href;
+            // zeigeHinweisfenster("Feld ist nicht leer");
+        }
+    }
+});
 
diff --git a/public/warenkorb.html b/public/warenkorb.html
index 216f06e..d167305 100644
--- a/public/warenkorb.html
+++ b/public/warenkorb.html
@@ -67,63 +67,134 @@
 
     <div class="content">
         <h1>Warenkorb</h1>
-        <div class="produkte_warenkorb">
-            <img src="pictures/karotte_ohne_preis.webp" alt="karotten">
-            <div class="produkte_details">
-                <p><strong>Karotten 1kg</br>Kosten: 0,95€</strong></p>
-                </br>
-                <p>Auf Lager: 250</p>
+        <div id="notification"></div>
+        <div class="desktop_ansicht">
+            <div class="produkte_warenkorb">
+                <img src="pictures/karotte_ohne_preis.webp" alt="karotten">
+                <div class="produkte_details">
+                    <p><strong>Karotten 1kg</br>Kosten: 0,95€</strong></p>
+                    </br>
+                    <p>Auf Lager: 250</p>
+                </div>
+                <div class="button_mit_menue">
+                    <p><a class="button_entfernen" href="#" id="button1">Entfernen</a></p>
+                    <input type="text" id="menue1" value="10">
+                    
+                </div>
+                <p class="gesamtbetrag1" id="gesamtbetrag1"></p>
             </div>
-            <div class="button_mit_menue">
-                <p><a class="button_entfernen" href="#" id="button1" onclick="entferneAusWarenkorb(1)">Entfernen</a></p>
-                <input type="text" id="menue1" value="10">
-                <div id="notification"></div>
-            </div>
-            <p class="gesamtbetrag1" id="gesamtbetrag1"></p>
-        </div>
 
-        <div class="produkte_warenkorb">
-            <img src="pictures/aepfel_ohne_preis.png.avif" alt="aepfel">
-            <div class="produkte_details">
-                <p><strong>Äpfel 1kg</br>Kosten: 2€</strong></p>
-                </br>
-                <p>Auf Lager: 500</p>
+            <div class="produkte_warenkorb">
+                <img src="pictures/aepfel_ohne_preis.png.avif" alt="aepfel">
+                <div class="produkte_details">
+                    <p><strong>Äpfel 1kg</br>Kosten: 2€</strong></p>
+                    </br>
+                    <p>Auf Lager: 500</p>
+                </div>
+                <div class="button_mit_menue">
+                    <p><a class="button_entfernen" href="#" id="button2">Entfernen</a></p>
+                    <input type="text" id="menue2" value="10">
+                    
+                </div>
+                <p class="gesamtbetrag2" id="gesamtbetrag2"></p>
             </div>
-            <div class="button_mit_menue">
-                <p><a class="button_entfernen" href="#" id="button2" onclick="entferneAusWarenkorb(2)">Entfernen</a></p>
-                <input type="text" id="menue2" value="10">
-                <div id="notification"></div>
-            </div>
-            <p class="gesamtbetrag2" id="gesamtbetrag2"></p>
-        </div>
 
-        <div class="produkte_warenkorb">
-            <img src="pictures/sellerie_ohne_preis.webp" alt="sellerie">
-            <div class="produkte_details">
-                <p><strong>Sellerie 1 Stück</br>Kosten: 1,10€</strong></p>
-                </br>
-                <p>Auf Lager: 1000</p>
+            <div class="produkte_warenkorb">
+                <img src="pictures/sellerie_ohne_preis.webp" alt="sellerie">
+                <div class="produkte_details">
+                    <p><strong>Sellerie 1 Stück</br>Kosten: 1,10€</strong></p>
+                    </br>
+                    <p>Auf Lager: 1000</p>
+                </div>
+                <div class="button_mit_menue">
+                    <p><a class="button_entfernen" href="#" id="button3">Entfernen</a></p>
+                    <input type="text" id="menue3" value="10">
+                    
+                </div>
+                <p class="gesamtbetrag3" id="gesamtbetrag3"></p>
             </div>
-            <div class="button_mit_menue">
-                <p><a class="button_entfernen" href="#" id="button3" onclick="entferneAusWarenkorb(3)">Entfernen</a></p>
-                <input type="text" id="menue3" value="10">
-                <div id="notification"></div>
+            <div class="äußererContainer">
+                <div class="kostenContainer">
+                    <p class="lieferkosten_text">Lieferkosten:</p>
+                    <p class="lieferkosten_preis">2,90€</p>
+                    <p class="gesamtkosten_text">Gesamtkosten (inkl. MwSt): </p>
+                    <p class="gesamtpreis" id="gesamtpreis"></p>
+                </div>
+                <div>
+                    <a class="button_bestellung_abschließen" id="bestellbutton_desktop"
+                        href="bestellformular.html">Kostenpflichtig
+                        bestellen</a>
+                </div>
             </div>
-            <p class="gesamtbetrag3" id="gesamtbetrag3"></p>
         </div>
-        <div class="äußererContainer">
-            <div class="kostenContainer">
-                <p class="lieferkosten_text">Lieferkosten:</p>
-                <p class="lieferkosten_preis">2,90€</p>
-                <p class="gesamtkosten_text">Gesamtkosten (inkl. MwSt): </p>
-                <p class="gesamtpreis" id="gesamtpreis"></p>
+        
+        <div class="mobile_ansicht">
+            <div class="produkte_warenkorb">
+                <div class="bild_mobil">
+                    <img src="pictures/karotte_ohne_preis.webp" width="100" height="100" alt="karotten">
+                </div>
+                <div class="produkte_details">
+                    <p><strong>Karotten 1kg</br>Kosten: 0,95€</strong></p>
+                    </br>
+                    <p>Auf Lager: 250</p>
+                </div>
+                <div class="button_mit_menue">
+                    <p><a class="button_entfernen" href="#" id="button4">Entfernen</a></p>
+                    <input type="text" id="menue4" value="10">
+                    
+                </div>
+                <p class="gesamtbetrag4" id="gesamtbetrag4"></p>
             </div>
-            <div>
-            <a class="button_bestellung_abschließen" href="bestellformular.html">Kostenpflichtig bestellen</a>
+    
+            <div class="produkte_warenkorb">
+                <div class="bild_mobil">
+                    <img src="pictures/aepfel_ohne_preis.png.avif" width="100" height="100" alt="aepfel">
+                </div>
+                <div class="produkte_details">
+                    <p><strong>Äpfel 1kg</br>Kosten: 2€</strong></p>
+                    </br>
+                    <p>Auf Lager: 500</p>
+                </div>
+                <div class="button_mit_menue">
+                    <p><a class="button_entfernen" href="#" id="button5">Entfernen</a></p>
+                    <input type="text" id="menue5" value="10">
+                    
+                </div>
+                <p class="gesamtbetrag5" id="gesamtbetrag5"></p>
+            </div>
+    
+            <div class="produkte_warenkorb">
+                <div class="bild_mobil">
+                    <img src="pictures/sellerie_ohne_preis.webp" width="100" height="100" alt="sellerie">
+                </div>
+                <div class="produkte_details">
+                    <p><strong>Sellerie 1 Stück</br>Kosten: 1,10€</strong></p>
+                    </br>
+                    <p>Auf Lager: 1000</p>
+                </div>
+                <div class="button_mit_menue">
+                    <p><a class="button_entfernen" href="#" id="button6">Entfernen</a></p>
+                    <input type="text" id="menue6" value="10">
+                    
+                </div>
+                <p class="gesamtbetrag6" id="gesamtbetrag6"></p>
+            </div>
+            <div class="äußererContainer">
+                <div class="kostenContainer">
+                    <p class="lieferkosten_text">Lieferkosten:</p>
+                    <p class="lieferkosten_preis">2,90€</p>
+                    <p class="gesamtkosten_text">Gesamtkosten (inkl. MwSt): </p>
+                    <p class="gesamtpreis" id="gesamtpreis"></p>
+                </div>
+                <div>
+                    <a class="button_bestellung_abschließen" id="bestellbutton_mobil" href="bestellformular.html">Kostenpflichtig
+                        bestellen</a>
+                </div>
             </div>
         </div>
     </div>
 
+
     <footer>
         <nav class="navbar-desktop" style="--items: 2;">
             <a href="impressum.html">Impressum</a>