Warenkorb implementiert

package-lock.json

@@ -5769,6 +5769,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -9462,6 +9470,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",

package.json

@@ -12,6 +12,8 @@
     "font-awesome": "^4.7.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -16,12 +16,23 @@ import Registrierung from "./Pages/registrierung";
 import Warenkorb from "./Pages/warenkorb";
 import Listenansicht from "./Pages/listenansicht";
 import "./App.css";
+import EndPage from "./Pages/endpage";
+import MainPage from "./Pages/mainpage";
+
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 function App() {
   return (
-    <div className="App">
+    <BrowserRouter>
-    
+      <Routes>
-    </div>
+        <Route path="/" element={<MainPage />} />
+        <Route path="endpage" element={<EndPage />} />
+        <Route path="liste" element={<Listenansicht />} />
+        <Route path="registrierung" element={<Registrierung />} />
+        <Route path="anmeldung" element={<Anmeldepage />} />
+        <Route path="warenkorb" element={<Warenkorb />} />
+      </Routes>
+    </BrowserRouter>
   );
 }
 

src/Components/buttonRound.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 function ButtonRound(props) {
   return (
-    <button class="bg-primary hover:bg-primaryHover rounded-full h-9 w-9 text-white m-3">
+    <button class="bg-primary hover:bg-primaryHover rounded-full h-9 w-9 text-white m-3" onClick={props.onaction}>
       {" "}
       {props.name || "Button"}{" "}
     </button>

src/Components/card.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import bild from "../paparoy.jpg";
 import ButtonPrimary from "./buttonPrimary";
 import Ueberschrift2 from "./ueberschrift2";
+import { Link } from "react-router-dom";
 
 function Card(props) {
   return (
@@ -13,7 +14,9 @@ function Card(props) {
         <div class="font-bold text-xl flex justify-start m-3">
           <Ueberschrift2 name={props.name} />
         </div>
-        <ButtonPrimary name="Speisekarte" />
+        <Link to={props.href}>
+          <ButtonPrimary name="Speisekarte" />
+        </Link>
       </div>
     </div>
   );

src/Components/header_1.jsx

@@ -3,14 +3,20 @@ import p_logo_dark from "../pizza_logo_dark.png";
 import p_logo_light from "../pizza_logo_light.png";
 import ButtonSecondary from "./buttonSecondary";
 import ShoppingCart from "../shopping_cart.svg";
-
+import { Link } from "react-router-dom";
 function Header1() {
   return (
     <div class="bg-primary h-14 w-full p-2 flex justify-between items-center">
       <img src={p_logo_light} alt="Logo" class="h-10"></img>
-      <div class="flex justify-center">
+
-        <ButtonSecondary name="Abmelden" />
+      <div class="flex justify-center items-center">
-        <img src={ShoppingCart}></img>
+        <Link to="/anmeldung">
+          <ButtonSecondary name="Abmelden" />
+        </Link>
+
+        <Link to="/warenkorb">
+          <img src={ShoppingCart} class="h-7"></img>
+        </Link>
       </div>
     </div>
   );

src/Components/liste.jsx

@@ -5,6 +5,11 @@ function Liste(props) {
   var gericht = props.gericht;
   var price = props.price;
   let icon_button = props.icon_button;
+  var key = 0;
+  var i = props.index;
+  const gericht1 = { name: gericht, preis: price, index: i };
+
+  //localStorage.setItem("gericht", JSON.stringify(gericht1));
 
   return (
     <div
@@ -16,7 +21,23 @@ function Liste(props) {
       <div class="col-start-1 col-end-1">{gericht}</div>
       <div class="place-content-end col-start-4 col-end-4 ">{price}</div>
       <div class="col-start-6 col-end-6 place-content-end ">
-        <ButtonRound name={icon_button}></ButtonRound>
+        <ButtonRound
+          name={icon_button}
+          onaction={() => {
+            if (props.icon_button == "-") {
+              console.log(i);
+              let gerichte = JSON.parse(localStorage.getItem("gerichte"));
+              gerichte.splice(i, 1);
+              props.setlisten(gerichte);
+              localStorage.setItem("gerichte", JSON.stringify(gerichte));
+            } else {
+              const gerichte = JSON.parse(localStorage.getItem("gerichte")) ?? [];
+              gerichte.push(gericht1);
+              console.log(gerichte);
+              localStorage.setItem("gerichte", JSON.stringify(gerichte));
+              i++;
+            }
+          }}></ButtonRound>
       </div>
     </div>
   );

src/Pages/anmeldepage.jsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import ButtonPrimary from "../Components/buttonPrimary";
 import Eingabefeld from "../Components/eingabefeld";
 import bild from "../pizza_logo_dark.png";
+import { Link } from "react-router-dom";
 
 function Anmeldepage(props) {
   return (
@@ -24,8 +25,12 @@ function Anmeldepage(props) {
       <br></br>
       <br></br>
       <div class="sm: flex justify-between">
-        <ButtonPrimary name="Registieren"></ButtonPrimary>
+        <Link to="/registrierung">
-        <ButtonPrimary name="Anmelden"></ButtonPrimary>
+          <ButtonPrimary name="Registieren"></ButtonPrimary>
+        </Link>
+        <Link to="/">
+          <ButtonPrimary name="Anmelden"></ButtonPrimary>
+        </Link>
       </div>
     </div>
   );

src/Pages/endpage.jsx

@@ -1,7 +1,8 @@
 import React from "react";
-import ButtonSecondary from "./buttonSecondary";
+import ButtonSecondary from "../Components/buttonSecondary";
-import HeaderBig from "./header_big";
+import HeaderBig from "../Components/header_big";
-import Ueberschrift2 from "./ueberschrift2";
+import Ueberschrift2 from "../Components/ueberschrift2";
+import { Link } from "react-router-dom";
 
 function EndPage() {
   return (
@@ -14,7 +15,9 @@ function EndPage() {
           <Ueberschrift2 name="Vielen Dank!" />
           <Ueberschrift2 name="Deine Bestellung wurde erfolgreich aufgegeben." />
           <div class="p-5"></div>
-          <ButtonSecondary name="Zur Startseite" />
+          <Link to="/">
+            <ButtonSecondary name="Zur Startseite" />
+          </Link>
         </div>
       </div>
     </div>

src/Pages/listenansicht.jsx

@@ -3,6 +3,7 @@ import ButtonPrimary from "../Components/buttonPrimary";
 import Header1 from "../Components/header_1";
 import Liste from "../Components/liste";
 import bild from "../paparoy_liste.png";
+import { Link } from "react-router-dom";
 
 function Listenansicht(props) {
   var color_liste = true;
@@ -27,7 +28,9 @@ function Listenansicht(props) {
       </div>
       {listen}
       <div class="flex justify-end ">
-        <ButtonPrimary name="Warenkorb"></ButtonPrimary>
+        <Link to="/warenkorb">
+          <ButtonPrimary name="Warenkorb"></ButtonPrimary>
+        </Link>
       </div>
     </div>
   );

src/Pages/mainpage.jsx

@@ -1,18 +1,18 @@
 import React from "react";
 import Header1 from "../Components/header_1";
-import ButtonPrimary from "./buttonPrimary";
+import ButtonPrimary from "../Components/buttonPrimary";
 import img_paparoy from "../paparoy.jpg";
 import img_alaturca from "../alaturca.jpg";
-import Card from "./card";
+import Card from "../Components/card";
 
 function MainPage() {
   return (
     <div>
       <Header1 />
       <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
-        <Card name="Papa Roy" bild={img_paparoy} />
+        <Card name="Papa Roy" bild={img_paparoy} href="/liste" />
-        <Card name="A la Turca" bild={img_alaturca} />
+        <Card name="A la Turca" bild={img_alaturca} href="/liste" />
-        <Card name="Pizza Olive" bild={img_paparoy} />
+        <Card name="Pizza Olive" bild={img_paparoy} href="/liste" />
       </div>
     </div>
   );

src/Pages/registrierung.jsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import ButtonPrimary from "../Components/buttonPrimary";
 import Eingabefeld from "../Components/eingabefeld";
 import bild from "../pizza_logo_dark.png";
+import { Link } from "react-router-dom";
 
 function Registrierung(props) {
   return (
@@ -50,8 +51,12 @@ function Registrierung(props) {
       <br></br>
       <br></br>
       <div class="sm: flex justify-between">
-        <ButtonPrimary name="Registieren"></ButtonPrimary>
+        <Link to="/">
-        <ButtonPrimary name="Anmelden"></ButtonPrimary>
+          <ButtonPrimary name="Registieren"></ButtonPrimary>
+        </Link>
+        <Link to="/anmeldung">
+          <ButtonPrimary name="Anmelden"></ButtonPrimary>
+        </Link>
       </div>
     </div>
   );

src/Pages/warenkorb.jsx

@@ -5,6 +5,7 @@ import restaurant_image from "../restaurant_icon.png";
 import kassa_image from "../kassa_icon.png";
 import Liste from "../Components/liste";
 import ButtonSecondary from "../Components/buttonSecondary";
+import { Link } from "react-router-dom";
 
 function Warenkorb(props) {
   //Übergabe vom Namen des Restaurants (merken von Cards?!)
@@ -15,17 +16,47 @@ function Warenkorb(props) {
   //Summe der Preise muss noch gebildet werden mit umwandlung in fließkomma wert
 
   var color_liste = true;
-  var number = 3;
+  var sum = 0;
-  let listen = [];
+  var number = localStorage;
+  console.log(number);
 
-  for (let index = 0; index < number; index++) {
+  const [listen, setlisten] = useState(JSON.parse(localStorage.getItem("gerichte")) ?? []);
-    listen.push(<Liste gericht="Pizza" price="12,99€" isColor={color_liste} icon_button="-"></Liste>);
+
+  var liste = [];
+  console.log(listen);
+
+  /*for (let index = 0; index < number; index++) {
+    var name = listen.at(index).name;
+    console.log(name);
+    listen.push(<Liste gericht="Gericht" price="12,99€" isColor={color_liste} icon_button="-"></Liste>);
     if (color_liste == true) {
       color_liste = false;
     } else {
       color_liste = true;
     }
-  }
+  }*/
+
+  //console.log(JSON.parse(localStorage.getItem("gerichte")) ?? []);
+  listen.forEach(function (g, i) {
+    console.log(g.preis, g.name, g.index);
+    liste.push(
+      <Liste
+        gericht={g.name}
+        price={g.preis}
+        isColor={color_liste}
+        icon_button="-"
+        index={i}
+        setlisten={setlisten}></Liste>
+    );
+    if (color_liste == true) {
+      color_liste = false;
+    } else {
+      color_liste = true;
+    }
+    var s = Number(g.preis.substring(0, g.preis.length - 1).replace(",", "."));
+    sum += s;
+  });
+
   return (
     <div className="mb-5">
       <Header1></Header1>
@@ -44,18 +75,22 @@ function Warenkorb(props) {
 
       <br></br>
       <br></br>
-      {listen}
+      {liste}
       <br></br>
       <br></br>
       <div class="flex justify-between pt-6 pb-6 bg-primary">
         <img src={kassa_image} alt="Kassa"></img>
-        <label class="font-medium  text-2xl text-white items-center">Summe: 25,98€</label>
+        <label class="font-medium  text-2xl text-white items-center">Summe: {Math.round(sum * 100) / 100}€ </label>
       </div>
       <br></br>
       <br></br>
       <div class="flex justify-between">
-        <ButtonSecondary name="Zurück"></ButtonSecondary>
+        <Link to="/">
-        <ButtonSecondary name="Bestätigen"></ButtonSecondary>
+          <ButtonSecondary name="Zurück"></ButtonSecondary>
+        </Link>
+        <Link to="/endpage">
+          <ButtonSecondary name="Bestätigen"></ButtonSecondary>
+        </Link>
       </div>
     </div>
   );