finish warenkorb

Warenkorb fertig + Listenansicht besseres Bild

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";
@@ -14,11 +13,14 @@ 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 (
     <div className="App">
-      <Registrierung></Registrierung>
+      <Listenansicht></Listenansicht>
     </div>
   );
 }

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/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/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;