connection to DB

alesberesik22 · Sep 17, 2022 · f699527 · f699527
1 parent 80d7365
commit f699527
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 39 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@types/node": "^16.11.48",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "axios": "^0.27.2",
     "framer-motion": "^7.3.2",
     "react": "^18.2.0",
     "react-calendar": "^3.8.0",

diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
@@ -7,6 +7,8 @@
   height: 12vh;
 
   padding: 1rem 2rem;
+  position: sticky;
+  position: -webkit-sticky; /* Safari */
 }
 .app_navbar_text {
   font-family: var(--font-alt);

diff --git a/src/components/Navbar/Navbarlinks.tsx b/src/components/Navbar/Navbarlinks.tsx
@@ -4,19 +4,19 @@ function Navbarlinks() {
   return (
     <>
       <li className="app_navbar_text">
-        <a href="#home">Home</a>
+        <a href="/#home">Home</a>
       </li>
       <li className="app_navbar_text">
-        <a href="#about">About</a>
+        <a href="/#about">About</a>
       </li>
       <li className="app_navbar_text">
-        <a href="#menu">Menu</a>
+        <a href="/#menu">Menu</a>
       </li>
       <li className="app_navbar_text">
-        <a href="#awards">Awards</a>
+        <a href="/#awards">Awards</a>
       </li>
       <li className="app_navbar_text">
-        <a href="#contact">Contact</a>
+        <a href="/#contact">Contact</a>
       </li>
     </>
   );

diff --git a/src/components/Reservations/ReservationModal/ReservationModal.css b/src/components/Reservations/ReservationModal/ReservationModal.css
@@ -29,10 +29,11 @@
   width: 20rem;
 }
 .time {
-  display: flex;
+  display: grid;
   width: 20rem;
   color: white;
-  flex-direction: column;
+  grid-template-columns: 10rem 10rem;
+  height: 20rem;
 }
 .button_time {
   width: 9rem;

diff --git a/src/components/Reservations/ReservationModal/ReservationModal.tsx b/src/components/Reservations/ReservationModal/ReservationModal.tsx
@@ -1,6 +1,7 @@
 import { Box, Typography } from "@mui/material";
 import Modal from "@mui/material/Modal";
 import React, { useEffect } from "react";
+import axios from "axios";
 import { Calendar } from "react-calendar";
 import { motion } from "framer-motion";
 import "react-calendar/dist/Calendar.css";
@@ -11,7 +12,7 @@ function ReservationModal(props: any) {
   const [dateSelected, setDateSelected] = React.useState(false);
   const [timeSelected, setTimeSelected] = React.useState("");
   const [date, setDate] = React.useState("");
-  const [tableID, setTableID] = React.useState([]);
+  const [tableID, setTableID] = React.useState<any>([]);
   const [userInfo, setUserInfo] = React.useState({});
   const [name, setName] = React.useState("");
   const [email, setEmail] = React.useState("");
@@ -20,32 +21,6 @@ function ReservationModal(props: any) {
   const [activeButton, setActiveButton] = React.useState<any | null>(null);
   const [calendarValue, setCalendarValue] = React.useState(new Date());
 
-  const times01 = [
-    "08:00 - 10:00",
-    "10:00 - 12:00",
-    "12:00 - 14:00",
-    "14:00 - 16:00",
-    "16:00 - 18:00",
-    "18:00 - 20:00",
-  ];
-  const times02 = [
-    "08:00 - 10:00",
-    "10:00 - 12:00",
-    "12:00 - 14:00",
-    "14:00 - 16:00",
-    "16:00 - 18:00",
-    "18:00 - 20:00",
-  ];
-  const times03 = [
-    "08:00 - 9:00",
-    "10:00 - 11:00",
-    "12:00 - 13:00",
-    "14:00 - 15:00",
-    "16:00 - 17:00",
-    "18:00 - 29:00",
-  ];
-  const times04 = ["08:00 - 9:00", "18:00 - 29:00"];
-
   const handleClose = () => {
     props.setShowReservation(false);
     setOpen(false);
@@ -54,7 +29,6 @@ function ReservationModal(props: any) {
 
   useEffect(() => {
     setOpen(props.open);
-    setTableID(eval("times" + props.id));
   }, []);
 
   const getReservationData = (event: any) => {
@@ -87,8 +61,7 @@ function ReservationModal(props: any) {
     setButtonColor((current) => !current);
   };
 
-  const submit = () => {
-    console.log(userInfo);
+  const submitClear = () => {
     setUserInfo({});
     setName("");
     setEmail("");
@@ -97,15 +70,37 @@ function ReservationModal(props: any) {
     setDate("");
     setDateSelected(false);
     setActiveButton(null);
+    props.setShowReservation(false);
+    setOpen(false);
+  };
+
+  const submit = async () => {
+    let dateParse = date.split(" ");
+    axios.post(
+      `http://localhost:5000/${props.id}/${dateParse[0]}/${dateParse[1]}/${timeSelected}`,
+      userInfo
+    );
+    submitClear();
   };
 
   const calendarChange = (event) => {
     let date = String(event).split(" ");
-    console.log("times" + props.id);
-    console.log(date[1] + date[2]);
     setCalendarValue(event);
     setDateSelected(true);
     setDate(date[1] + " " + date[2]);
+    setTableID([]);
+    axios
+      .get(`http://localhost:5000/${props.id}/${date[1]}/${date[2]}`)
+      .then((response) => {
+        for (let key in response.data[0]) {
+          if (
+            key !== "id" &&
+            Object.keys(response.data[0][String(key)]).length === 0
+          ) {
+            setTableID((old) => [...old, key]);
+          }
+        }
+      });
   };
 
   return (