GithubOrgProjectPiza/frontend
1
0
Fork 0
mirror of https://github.com/GithubOrgProjectPiza/frontend.git synced 2026-09-04 08:36:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'routing-betty'

Browse Source 
# Conflicts:
#	package.json
#	src/App.js
#	src/Pages/anmeldepage.jsx
#	src/Pages/listenansicht.jsx
#	src/Pages/mainpage.jsx
#	src/Pages/registrierung.jsx
This commit is contained in:
Stefan-5422
2022-06-01 12:14:47 +02:00
parent d410898a03 0cb93a0dcf
commit b7d0eaefa5
13 changed files with 147 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+25
View File
@@ -5836,6 +5836,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",
@@ -9621,6 +9629,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
+2
View File
@@ -13,6 +13,8 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-query": "^3.39.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
src/App.js
+11 -2
View File
@@ -22,13 +22,22 @@ import EndPage from "./Components/endpage";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
const queryClient = new QueryClient();
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
console.log(process.env);
return (
<div className="App">
<QueryClientProvider client={queryClient}>
<Listenansicht></Listenansicht>
<BrowserRouter>
<Routes>
<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>
</QueryClientProvider>
</div>
);
src/Components/buttonRound.jsx
+1 -1
View File
@@ -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
+4 -1
View File
@@ -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
+10 -4
View File
@@ -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" />
<img src={ShoppingCart}></img>
<div class="flex justify-center items-center">
<Link to="/anmeldung">
<ButtonSecondary name="Abmelden" />
</Link>
<Link to="/warenkorb">
<img src={ShoppingCart} class="h-7"></img>
</Link>
</div>
</div>
);
src/Components/liste.jsx
+22 -1
View File
@@ -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
+7 -2
View File
@@ -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 (
@@ -30,8 +31,12 @@ function Anmeldepage(props) {
<br></br>
<br></br>
<div class="flex justify-between md:justify-center">
<ButtonPrimary name="Registieren"></ButtonPrimary>
<ButtonPrimary name="Anmelden"></ButtonPrimary>
<Link to="/registrierung">
<ButtonPrimary name="Registieren"></ButtonPrimary>
</Link>
<Link to="/">
<ButtonPrimary name="Anmelden"></ButtonPrimary>
</Link>
</div>
</div>
);
src/Components/endpage.jsx → src/Pages/endpage.jsx
+7 -4
View File
@@ -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() {
<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
+5 -6
View File
@@ -4,6 +4,7 @@ import Header1 from "../Components/header_1";
import Liste from "../Components/liste";
import bild from "../paparoy_liste.png";
import { useQuery } from "react-query";
import { Link } from "react-router-dom";
function Listenansicht(props) {
var color_liste = true;
@@ -38,13 +39,11 @@ function Listenansicht(props) {
<img class="sm: w-full h-auto" src={props.bild || bild} alt="Speisekartenlogo"></img>
</div>
{listen}
<div className="flex justify-between">
<div>
<ButtonPrimary name="Restaurants"></ButtonPrimary>
</div>
<div>
<div class="flex justify-end ">
<ButtonPrimary name="Restaurants"></ButtonPrimary>
<Link to="/warenkorb">
<ButtonPrimary name="Warenkorb"></ButtonPrimary>
</div>
</Link>
</div>
</div>
);
src/Components/mainpage.jsx → src/Pages/mainpage.jsx
+2 -2
View File
@@ -1,6 +1,6 @@
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";
@@ -23,7 +23,7 @@ function MainPage() {
return (
<div>
<Header1 />
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4">{listen}</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4" href="/liste">{listen}</div>
</div>
);
}
src/Pages/registrierung.jsx
+7 -2
View File
@@ -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 (
@@ -54,8 +55,12 @@ function Registrierung(props) {
<br></br>
<br></br>
<div class="sm: flex justify-between md:justify-center">
<ButtonPrimary name="Registieren"></ButtonPrimary>
<ButtonPrimary name="Anmelden"></ButtonPrimary>
<Link to="/">
<ButtonPrimary name="Registieren"></ButtonPrimary>
</Link>
<Link to="/anmeldung">
<ButtonPrimary name="Anmelden"></ButtonPrimary>
</Link>
</div>
</div>
);
src/Pages/warenkorb.jsx
+44 -9
View File
@@ -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(<Liste gericht="Pizza" price="12,99€" isColor={color_liste} icon_button="-"></Liste>);
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(<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>
@@ -43,18 +74,22 @@ function Warenkorb(props) {
</div>
<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>
<ButtonSecondary name="Bestätigen"></ButtonSecondary>
<Link to="/">
<ButtonSecondary name="Zurück"></ButtonSecondary>
</Link>
<Link to="/endpage">
<ButtonSecondary name="Bestätigen"></ButtonSecondary>
</Link>
</div>
</div>
);