Merge pull request #6 from GithubOrgProjectPiza/pages-prodi

Merge Pages into main

src/App.js

@@ -1,7 +1,6 @@
 import logo from "./logo.svg";
 import ButtonPrimary from "./Components/buttonPrimary";
 import ButtonSecondary from "./Components/buttonSecondary";
-import "./App.css";
 import p_logo_dark from "./pizza_logo_dark.png";
 import p_logo_light from "./pizza_logo_light.png";
 import Header1 from "./Components/header_1";
@@ -12,7 +11,11 @@ import img_alaturca from "./alaturca.jpg";
 import Eingabefeld from "./Components/eingabefeld";
 import "../node_modules/font-awesome/css/font-awesome.min.css";
 import Liste from "./Components/liste";
-
+import Anmeldepage from "./Pages/anmeldepage";
+import Registrierung from "./Pages/registrierung";
+import Warenkorb from "./Pages/warenkorb";
+import Listenansicht from "./Pages/listenansicht";
+import "./App.css";
 
 function App() {
   return (

src/Components/eingabefeld.jsx

@@ -3,15 +3,15 @@ import React, { useState } from "react";
 function Eingabefeld(props) {
   const [usepollName, setPollName] = useState("");
   return (
-    <div>
-      <label>{props.label}</label>
+    <div class="pb-2">
       <br />
       <input
         className="form-control
         border-radius: 5px
         block
-        w-220
+        w-full
         h-35
+        p-5
         px-3
         py-1.5
         text-base

src/Components/liste.jsx

@@ -4,18 +4,19 @@ import ButtonRound from "./buttonRound";
 function Liste(props) {
   var gericht = props.gericht;
   var price = props.price;
+  let icon_button = props.icon_button;
 
   return (
     <div
-      class={
+      className={
         props.isColor
-          ? "grid grid-cols-6 gap-0 bg-slate-200 p-4 items-center"
-          : "grid grid-cols-6 gap-0 bg-white p-4 items-center"
+          ? "bg-gray1 grid grid-cols-6 gap-0 p-4 items-center"
+          : " bg-white grid grid-cols-6 gap-0 p-4 items-center"
       }>
-      <div class="col-start-1 col-end-1 ">{gericht}</div>
+      <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="+"></ButtonRound>
+        <ButtonRound name={icon_button}></ButtonRound>
       </div>
     </div>
   );

src/Pages/anmeldepage.jsx

@@ -1,10 +1,33 @@
 import React, { useState } from "react";
-import bild from "../paparoy_liste.png";
+import ButtonPrimary from "../Components/buttonPrimary";
+import Eingabefeld from "../Components/eingabefeld";
+import bild from "../pizza_logo_dark.png";
 
 function Anmeldepage(props) {
   return (
-    <div class="sm:  grid grid-cols-1 items-center">
-      <img class="w-50 h-50 col-start-1 col-end-1" src={props.bild || bild} alt="Logo"></img>
+    <div class="sm: m-2">
+      <div class="sm:  grid grid-cols-5 items-center">
+        <img
+          class="sm:w-60 h-45 p-5 grid col-span-3 col-start-2 place-content-center"
+          src={props.bild || bild}
+          alt="Logo"></img>
+      </div>
+      <br></br>
+      <br></br>
+      <label class="font-medium leading-tight text-3xl mt-0 mb-2">Anmelden</label>
+      <br></br>
+      <br></br>
+      <label class="absolute left-0">E-Mail:</label>
+      <Eingabefeld isPassword={false} placeholder="Mail"></Eingabefeld>
+      <label class="absolute left-0">Passwort:</label>
+      <Eingabefeld isPassword={true} placeholder="Passwort"></Eingabefeld>
+      <br></br>
+      <br></br>
+      <div class="sm: flex justify-between">
+        <ButtonPrimary name="Registieren"></ButtonPrimary>
+        <ButtonPrimary name="Anmelden"></ButtonPrimary>
+      </div>
     </div>
   );
 }
+export default Anmeldepage;

src/Pages/listenansicht.jsx

@@ -12,7 +12,7 @@ function Listenansicht(props) {
 
   //Daten von Backend erforderlich + Bild vom jeweiligen Restaurant erforderlich
   for (let index = 0; index < number; index++) {
-    listen.push(<Liste gericht="Pizza" price="12,99€" isColor={color_liste}></Liste>);
+    listen.push(<Liste gericht="Pizza" price="12,99€" isColor={color_liste} icon_button="+"></Liste>);
     if (color_liste == true) {
       color_liste = false;
     } else {
@@ -22,11 +22,12 @@ function Listenansicht(props) {
   return (
     <div>
       <Header1></Header1>
-
-      <img class="sm: w-full h-auto" src={props.bild || bild} alt="Papa Roy"></img>
+      <div className="bg-slate-400">
+        <img class="sm: w-full h-auto" src={props.bild || bild} alt="Papa Roy"></img>
+      </div>
       {listen}
-      <div class="grid grid-cols-4 ">
-        <ButtonPrimary name="Warenkorb" class="col-start-3 col-end-3 place-content-end"></ButtonPrimary>
+      <div class="flex justify-end ">
+        <ButtonPrimary name="Warenkorb"></ButtonPrimary>
       </div>
     </div>
   );

src/Pages/registrierung.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import ButtonPrimary from "../Components/buttonPrimary";
+import Eingabefeld from "../Components/eingabefeld";
+import bild from "../pizza_logo_dark.png";
+
+function Registrierung(props) {
+  return (
+    <div class="sm: m-5">
+      <div class="sm:  grid grid-cols-5 items-center">
+        <img
+          class="sm:w-60 h-45 p-5 grid col-span-3 col-start-2 place-content-center"
+          src={props.bild || bild}
+          alt="Logo"></img>
+      </div>
+
+      <br></br>
+      <br></br>
+      <label class="font-medium leading-tight text-3xl mt-0 mb-2">Registrieren</label>
+      <br></br>
+      <br></br>
+      <div class="grid grid-cols-2 grid-rows-2 justify-items-start p-0 gap-x-1 gap-y-0 h-10">
+        <label class="col-start-1 col-end-1 row-start-1 row-end-1">Vorname:</label>
+        <label class="col-start-2 col-end-2 row-start-1 row-end-1">Passwort:</label>
+        <Eingabefeld
+          isPassword={false}
+          placeholder="Mail"
+          class="col-start-1 col-end-1 row-start-2 row-end-2"></Eingabefeld>
+        <Eingabefeld
+          isPassword={true}
+          placeholder="Passwort"
+          class="col-start-2 col-end-2 row-start-2 row-end-2"></Eingabefeld>
+      </div>
+      <br></br>
+      <br></br>
+      <div class="pt-2">
+        <label class="absolute left-2">E-Mail:</label>
+        <Eingabefeld isPassword={false} placeholder="Mail"></Eingabefeld>
+      </div>
+
+      <div class="pt-2">
+        <label class="absolute left-2">Passwort:</label>
+        <Eingabefeld isPassword={true} placeholder="Passwort"></Eingabefeld>
+      </div>
+
+      <div class="pt-2">
+        <label class="absolute left-2">Passwort erneut:</label>
+        <Eingabefeld isPassword={false} placeholder="Passwort erneut"></Eingabefeld>
+      </div>
+
+      <br></br>
+      <br></br>
+      <div class="sm: flex justify-between">
+        <ButtonPrimary name="Registieren"></ButtonPrimary>
+        <ButtonPrimary name="Anmelden"></ButtonPrimary>
+      </div>
+    </div>
+  );
+}
+export default Registrierung;

src/Pages/warenkorb.jsx

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import Header1 from "../Components/header_1";
+import warenkorb_image from "../warenkorb_icon.png";
+import restaurant_image from "../restaurant_icon.png";
+import kassa_image from "../kassa_icon.png";
+import Liste from "../Components/liste";
+import ButtonSecondary from "../Components/buttonSecondary";
+
+function Warenkorb(props) {
+  //Übergabe vom Namen des Restaurants (merken von Cards?!)
+
+  //Speicherung der gewählten Gerichte von der Listenansicht (muss an diese Page übergeben werden)
+  //Code mit Demoliste
+
+  //Summe der Preise muss noch gebildet werden mit umwandlung in fließkomma wert
+
+  var color_liste = true;
+  var number = 3;
+  let listen = [];
+
+  for (let index = 0; index < number; index++) {
+    listen.push(<Liste gericht="Pizza" price="12,99€" isColor={color_liste} icon_button="-"></Liste>);
+    if (color_liste == true) {
+      color_liste = false;
+    } else {
+      color_liste = true;
+    }
+  }
+  return (
+    <div className="mb-5">
+      <Header1></Header1>
+      <br></br>
+      <div class="flex sm:flex-row md:flex-row-reverse md:justify-between pt-3 pb-3">
+        <img src={warenkorb_image} alt="Warenkorbicon"></img>
+        <label class="font-medium leading-tight text-3xl mt-0 mb-2">Warenkorb</label>
+      </div>
+      <br></br>
+      <div class="flex sm:flex-row md:flex-row-reverse md:justify-between pt-6 pb-6 bg-primary">
+        <img src={restaurant_image} alt="Restauranticon"></img>
+        <label class="font-medium leading-tight text-3xl mt-0 mb-2 text-white">
+          {props.restaurant || "Restaurant"}
+        </label>
+      </div>
+
+      <br></br>
+      <br></br>
+      {listen}
+      <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>
+      </div>
+      <br></br>
+      <br></br>
+      <div class="flex justify-between">
+        <ButtonSecondary name="Zurück"></ButtonSecondary>
+        <ButtonSecondary name="Bestätigen"></ButtonSecondary>
+      </div>
+    </div>
+  );
+}
+
+export default Warenkorb;