add Anmeldung

add Anmeldung with admin E-Mail adress
No registration

package-lock.json

@@ -3199,6 +3199,27 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
       "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw=="
     },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",

package.json

@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
     "font-awesome": "^4.7.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/Components/buttonPrimary.jsx

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

src/Components/buttonSecondary.jsx

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

src/Components/eingabefeld.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 
 function Eingabefeld(props) {
-  const [usepollName, setPollName] = useState("");
   return (
     <div class="pb-2">
       <br />
@@ -18,8 +17,8 @@ function Eingabefeld(props) {
         font-normal
         border border-solid border-gray-300
         rounded"
-        onChange={(e) => setPollName(e.target.value)}
+        onChange={props.onChange}
-        value={usepollName}
+        value={props.value}
         placeholder={props.placeholder}
         type={props.isPassword ? "password" : "text"}
       />

src/Components/liste.jsx

@@ -4,10 +4,11 @@ import ButtonRound from "./buttonRound";
 function Liste(props) {
   var gericht = props.gericht;
   var price = props.price;
+  var id = props.id;
   let icon_button = props.icon_button;
   var key = 0;
   var i = props.index;
-  const gericht1 = { name: gericht, preis: price, index: i };
+  const gericht1 = { name: gericht, preis: price, index: i, id };
 
   //localStorage.setItem("gericht", JSON.stringify(gericht1));
 
@@ -25,7 +26,6 @@ function Liste(props) {
           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);
@@ -33,7 +33,6 @@ function Liste(props) {
             } else {
               const gerichte = JSON.parse(localStorage.getItem("gerichte")) ?? [];
               gerichte.push(gericht1);
-              console.log(gerichte);
               localStorage.setItem("gerichte", JSON.stringify(gerichte));
               i++;
             }

src/Pages/anmeldepage.jsx

@@ -3,8 +3,23 @@ import ButtonPrimary from "../Components/buttonPrimary";
 import Eingabefeld from "../Components/eingabefeld";
 import bild from "../pizza_logo_dark.png";
 import { Link } from "react-router-dom";
+import axios from "axios";
 
 function Anmeldepage(props) {
+  const [username, setusername] = useState();
+  const [password, setpassword] = useState();
+  const onsubmit = () => {
+    axios
+      .post(process.env.REACT_APP_SERVER_IP + "auth/authenthicate", {
+        name: username,
+        password: password,
+      })
+      .then((data) => {
+        localStorage.setItem("token", data.data.payload.context.token);
+      })
+      .catch((error) => console.log(error));
+  };
+
   return (
     <div class="sm: m-2 items-center">
       <div class="flex justify-center">
@@ -19,14 +34,22 @@ function Anmeldepage(props) {
         <label className="sm:absolute-left-0">E-Mail:</label>
       </div>
       <div class="md:flex justify-center sm:w-full">
-        <Eingabefeld isPassword={false} placeholder="Mail"></Eingabefeld>
+        <Eingabefeld
+          isPassword={false}
+          placeholder="Mail"
+          onChange={(e) => setusername(e.target.value)}
+          value={username}></Eingabefeld>
       </div>
 
       <div class="md:flex justify-center sm:w-full">
         <label className="sm:absolute-left-0">Passwort:</label>
       </div>
       <div class="md:flex justify-center sm:w-full">
-        <Eingabefeld isPassword={true} placeholder="Passwort"></Eingabefeld>
+        <Eingabefeld
+          isPassword={true}
+          placeholder="Passwort"
+          onChange={(e) => setpassword(e.target.value)}
+          value={password}></Eingabefeld>
       </div>
       <br></br>
       <br></br>
@@ -35,7 +58,7 @@ function Anmeldepage(props) {
           <ButtonPrimary name="Registieren"></ButtonPrimary>
         </Link>
         <Link to="/">
-          <ButtonPrimary name="Anmelden"></ButtonPrimary>
+          <ButtonPrimary name="Anmelden" onAction={onsubmit}></ButtonPrimary>
         </Link>
       </div>
     </div>

src/Pages/listenansicht.jsx

@@ -19,13 +19,15 @@ function Listenansicht() {
   if (isLoading) return "Loading...";
   if (error) return "An error has occurred: " + error.message;
 
-  console.log(data);
+  if (!(typeof data.pizzas == "object")) return "Loading...";
 
   for (let index = 0; index < data.pizzas.length; index++) {
     listen.push(
       <Liste
         gericht={data.pizzas[index].name}
         price={data.pizzas[index].price}
+        id={data.pizzas[index].id}
+        key={data.pizzas[index].id}
         isColor={color_liste}
         icon_button="+"></Liste>
     );
@@ -42,13 +44,19 @@ function Listenansicht() {
         <img class="sm: w-full h-auto" src={props.bild || bild} alt="Speisekartenlogo"></img>
       </div>
       {listen}
-      <div class="flex justify-end ">
+      <div class="flex justify-between ">
+        <div>
+          <Link to="/">
             <ButtonPrimary name="Restaurants"></ButtonPrimary>
+          </Link>
+        </div>
+        <div>
           <Link to="/warenkorb">
             <ButtonPrimary name="Warenkorb"></ButtonPrimary>
           </Link>
         </div>
       </div>
+    </div>
   );
 }
 

src/Pages/mainpage.jsx

@@ -16,7 +16,6 @@ function MainPage() {
   if (error) return "An error has occurred: " + error.message;
 
   for (let index = 0; index < data.length; index++) {
-    console.log(data);
     listen.push(<Card name={data[index].name} bild={img_paparoy} href={"/liste/" + data[index].id} />);
   }
 

src/Pages/warenkorb.jsx

@@ -6,6 +6,7 @@ import kassa_image from "../kassa_icon.png";
 import Liste from "../Components/liste";
 import ButtonSecondary from "../Components/buttonSecondary";
 import { Link } from "react-router-dom";
+import axios from "axios";
 
 function Warenkorb(props) {
   //Übergabe vom Namen des Restaurants (merken von Cards?!)
@@ -18,12 +19,10 @@ function Warenkorb(props) {
   var color_liste = true;
   var sum = 0;
   var number = localStorage;
-  console.log(number);
 
   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;
@@ -38,7 +37,6 @@ function Warenkorb(props) {
 
   //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}
@@ -57,6 +55,19 @@ function Warenkorb(props) {
     sum += s;
   });
 
+  const onSubmit = () => {
+    console.log("hallo");
+    let gerichte = JSON.parse(localStorage.getItem("gerichte")).map((a) => a.id);
+    axios
+      .post(
+        process.env.REACT_APP_SERVER_IP + "order/",
+        { pizzas: gerichte },
+        { headers: { Authorization: `Bearer ${localStorage.getItem("token")}` } }
+      )
+      .then((data) => console.log(data))
+      .catch((e) => console.log(e));
+  };
+
   return (
     <div className="mb-5">
       <Header1></Header1>
@@ -88,7 +99,7 @@ function Warenkorb(props) {
           <ButtonSecondary name="Zurück"></ButtonSecondary>
         </Link>
         <Link to="/endpage">
-          <ButtonSecondary name="Bestätigen"></ButtonSecondary>
+          <ButtonSecondary name="Bestätigen" onAction={onSubmit}></ButtonSecondary>
         </Link>
       </div>
     </div>