From 0cb93a0dcf9d260123c41d3cfd14a0185e47915e Mon Sep 17 00:00:00 2001 From: BettinaHallinger Date: Wed, 1 Jun 2022 11:55:47 +0200 Subject: [PATCH] Warenkorb implementiert --- package-lock.json | 25 ++++++++++++ package.json | 2 + src/App.js | 17 +++++++-- src/Components/buttonRound.jsx | 2 +- src/Components/card.jsx | 5 ++- src/Components/header_1.jsx | 14 +++++-- src/Components/liste.jsx | 23 ++++++++++- src/Pages/anmeldepage.jsx | 9 ++++- src/{Components => Pages}/endpage.jsx | 11 ++++-- src/Pages/listenansicht.jsx | 5 ++- src/{Components => Pages}/mainpage.jsx | 10 ++--- src/Pages/registrierung.jsx | 9 ++++- src/Pages/warenkorb.jsx | 53 +++++++++++++++++++++----- 13 files changed, 152 insertions(+), 33 deletions(-) rename src/{Components => Pages}/endpage.jsx (65%) rename src/{Components => Pages}/mainpage.jsx (53%) diff --git a/package-lock.json b/package-lock.json index ee4c046..9cd66bf 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 8296e33..bce1cfd 100644 --- a/package.json +++ b/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" }, diff --git a/src/App.js b/src/App.js index 65d7c71..b69e7b2 100644 --- a/src/App.js +++ b/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 ( -
- -
+ + + } /> + } /> + } /> + } /> + } /> + } /> + + ); } diff --git a/src/Components/buttonRound.jsx b/src/Components/buttonRound.jsx index 6a708ec..75635d4 100644 --- a/src/Components/buttonRound.jsx +++ b/src/Components/buttonRound.jsx @@ -2,7 +2,7 @@ import React from "react"; function ButtonRound(props) { return ( - diff --git a/src/Components/card.jsx b/src/Components/card.jsx index 018aa63..25b9963 100644 --- a/src/Components/card.jsx +++ b/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) {
- + + + ); diff --git a/src/Components/header_1.jsx b/src/Components/header_1.jsx index 0bc117d..e157bd2 100644 --- a/src/Components/header_1.jsx +++ b/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 (
Logo -
- - + +
+ + + + + + +
); diff --git a/src/Components/liste.jsx b/src/Components/liste.jsx index d2e3be3..72cdc86 100644 --- a/src/Components/liste.jsx +++ b/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 (
{gericht}
{price}
- + { + 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++; + } + }}>
); diff --git a/src/Pages/anmeldepage.jsx b/src/Pages/anmeldepage.jsx index 4b09218..3e93190 100644 --- a/src/Pages/anmeldepage.jsx +++ b/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) {



- - + + + + + +
); diff --git a/src/Components/endpage.jsx b/src/Pages/endpage.jsx similarity index 65% rename from src/Components/endpage.jsx rename to src/Pages/endpage.jsx index f0773c8..cd15500 100644 --- a/src/Components/endpage.jsx +++ b/src/Pages/endpage.jsx @@ -1,7 +1,8 @@ import React from "react"; -import ButtonSecondary from "./buttonSecondary"; -import HeaderBig from "./header_big"; -import Ueberschrift2 from "./ueberschrift2"; +import ButtonSecondary from "../Components/buttonSecondary"; +import HeaderBig from "../Components/header_big"; +import Ueberschrift2 from "../Components/ueberschrift2"; +import { Link } from "react-router-dom"; function EndPage() { return ( @@ -14,7 +15,9 @@ function EndPage() {
- + + + diff --git a/src/Pages/listenansicht.jsx b/src/Pages/listenansicht.jsx index b0e0ce3..6119875 100644 --- a/src/Pages/listenansicht.jsx +++ b/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) { {listen}
- + + +
); diff --git a/src/Components/mainpage.jsx b/src/Pages/mainpage.jsx similarity index 53% rename from src/Components/mainpage.jsx rename to src/Pages/mainpage.jsx index 7db2ba9..0903b7d 100644 --- a/src/Components/mainpage.jsx +++ b/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 (
- - - + + +
); diff --git a/src/Pages/registrierung.jsx b/src/Pages/registrierung.jsx index 17c79d0..ca6b45b 100644 --- a/src/Pages/registrierung.jsx +++ b/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) {



- - + + + + + +
); diff --git a/src/Pages/warenkorb.jsx b/src/Pages/warenkorb.jsx index 11ccc3f..eb5e093 100644 --- a/src/Pages/warenkorb.jsx +++ b/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; - let listen = []; + var sum = 0; + var number = localStorage; + console.log(number); - for (let index = 0; index < number; index++) { - listen.push(); + const [listen, setlisten] = useState(JSON.parse(localStorage.getItem("gerichte")) ?? []); + + var liste = []; + console.log(listen); + + /*for (let index = 0; index < number; index++) { + var name = listen.at(index).name; + console.log(name); + listen.push(); 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( + + ); + 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 (
@@ -44,18 +75,22 @@ function Warenkorb(props) {



- {listen} + {liste}



Kassa - +




- - + + + + + +
);