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 1kgKosten: 0,95€
-
-
Auf Lager: 250
+
+
+
+
+
+
Karotten 1kgKosten: 0,95€
+
+
Auf Lager: 250
+
+
+
-
-
-
-
-
-
-
Äpfel 1kgKosten: 2€
-
-
Auf Lager: 500
+
+
+
+
Äpfel 1kgKosten: 2€
+
+
Auf Lager: 500
+
+
+
-
-
-
-
-
-
-
Sellerie 1 StückKosten: 1,10€
-
-
Auf Lager: 1000
+
+
+
+
Sellerie 1 StückKosten: 1,10€
+
+
Auf Lager: 1000
+
+
+
-
-
-
-
Lieferkosten:
-
2,90€
-
Gesamtkosten (inkl. MwSt):
-
+
+
+
+
+
+
+
+
Karotten 1kgKosten: 0,95€
+
+
Auf Lager: 250
+
+
+
-
-
Kostenpflichtig bestellen
+
+
+
+
+
+
+
Äpfel 1kgKosten: 2€
+
+
Auf Lager: 500
+
+
+
+
+
+
+
+
+
+
+
Sellerie 1 StückKosten: 1,10€
+
+
Auf Lager: 1000
+
+
+
+
+
+
+
Lieferkosten:
+
2,90€
+
Gesamtkosten (inkl. MwSt):
+
+
+
+