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

Warenkorb

-
- karotten -
-

Karotten 1kg
Kosten: 0,95€

-
-

Auf Lager: 250

+
+
+
+ karotten +
+

Karotten 1kg
Kosten: 0,95€

+
+

Auf Lager: 250

+
+
+

Entfernen

+ + +
+

-
-

Entfernen

- -
-
-

-
-
- aepfel -
-

Äpfel 1kg
Kosten: 2€

-
-

Auf Lager: 500

+
+ aepfel +
+

Äpfel 1kg
Kosten: 2€

+
+

Auf Lager: 500

+
+
+

Entfernen

+ + +
+

-
-

Entfernen

- -
-
-

-
-
- sellerie -
-

Sellerie 1 Stück
Kosten: 1,10€

-
-

Auf Lager: 1000

+
+ sellerie +
+

Sellerie 1 Stück
Kosten: 1,10€

+
+

Auf Lager: 1000

+
+
+

Entfernen

+ + +
+

-
-

Entfernen

- -
+
+
+

Lieferkosten:

+

2,90€

+

Gesamtkosten (inkl. MwSt):

+

+
+
-

-
-
-

Lieferkosten:

-

2,90€

-

Gesamtkosten (inkl. MwSt):

-

+ +
+
+
+ karotten +
+
+

Karotten 1kg
Kosten: 0,95€

+
+

Auf Lager: 250

+
+
+

Entfernen

+ + +
+

-
- Kostenpflichtig bestellen + +
+
+ aepfel +
+
+

Äpfel 1kg
Kosten: 2€

+
+

Auf Lager: 500

+
+
+

Entfernen

+ + +
+

+
+ +
+
+ sellerie +
+
+

Sellerie 1 Stück
Kosten: 1,10€

+
+

Auf Lager: 1000

+
+
+

Entfernen

+ + +
+

+
+
+
+

Lieferkosten:

+

2,90€

+

Gesamtkosten (inkl. MwSt):

+

+
+
+