Changeset f5b256e

my-react-app/package-lock.json

-              r8ca35dc
+              rf5b256e
         "jwt-decode": "^4.0.0",
         "react": "^18.2.0",
+        "react-bootstrap-datetimepicker": "^0.0.22",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.22.0",
 …
+      }
     },
+    "node_modules/babel-runtime": {
+      "version": "5.8.38",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-5.8.38.tgz",
+      "integrity": "sha512-KpgoA8VE/pMmNCrnEeeXqFG24TIH11Z3ZaimIhJWsin8EbfZy3WzFKUTIan10ZIDgRVvi9EkLbruJElJC9dRlg==",
+      "dependencies": {
+        "core-js": "^1.0.0"
+      }
+    },
+    "node_modules/babel-runtime/node_modules/core-js": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js."
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
 …
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz",
       "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ=="
+    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
     },
     "node_modules/clean-css": {
 …
       "bin": {
         "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
     },
 …
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
+    "node_modules/react-bootstrap-datetimepicker": {
+      "version": "0.0.22",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-datetimepicker/-/react-bootstrap-datetimepicker-0.0.22.tgz",
+      "integrity": "sha512-1va2drwnGtjBtK38TKHS7cJ2lYjjPDYOJwbUaam1ctpdxhPbYLyjg8ahrflLjqIQQCsUTmPJg0W4NopbUoGKlw==",
+      "dependencies": {
+        "babel-runtime": "^5.6.18",
+        "classnames": "^2.1.2",
+        "moment": "^2.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=0.14"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",

my-react-app/package.json

r8ca35dc	rf5b256e
11	11	"jwt-decode": "^4.0.0",
12	12	"react": "^18.2.0",
	13	"react-bootstrap-datetimepicker": "^0.0.22",
13	14	"react-dom": "^18.2.0",
14	15	"react-router-dom": "^6.22.0",

my-react-app/src/App.js

-              r8ca35dc
+              rf5b256e
 import {BrowserRouter as Router, Navigate, Route, Routes, useNavigate} from 'react-router-dom';
 import Customers from './components/Customers';
 import Layout from "./components/Layout";
 …
 import AppContent from "./components/AppContent";
 import ReservationHistory from "./components/ReservationHistory";
+import AuthContent from "./components/AuthContent";
 const ProtectedRoute = ({ element, isAuthenticated }) => {
 …
 const App = () => {
     const [isAuthenticated, setIsAuthenticated] = React.useState(false);
     React.useEffect(() => {
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
 …
     const navigate = useNavigate();
     const todayDate = new Date().toISOString().split('T')[0]; // Get today's date in 'YYYY-MM-DD' format
+    const todayDate = new Date().toISOString().split('T')[0];
     const [date, setDate] = useState(todayDate);
 …
             const isToday = selectedDate.toDateString() === today.toDateString();
-            // Determine the start hour and minute
             let startHour = 9;
             let startMinute = 0;
 …
                 const currentHour = today.getHours();
                 const currentMinute = today.getMinutes();
-                // If current time is later than 09:00, start from the current hour and minute
                 if (currentHour > 9 || (currentHour === 9 && currentMinute >= 0)) {
                     startHour = currentHour;
 …
+            }
-            // Create the start time and end time
             const startTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate(), startHour, startMinute);
             const endTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate(), 23, 30);
-            // Generate time slots from start time to end time in 15-minute intervals
             const slots = [];
             let currentTime = new Date(startTime);
 …
+            }
-            // Update the timeSlots state
             setTimeSlots(slots);
+        }
     }, [date]);
+    const handleGoToRestaurant = (restaurantId) => {
+        navigate(`/restaurants/${restaurantId}`);
+    };
     const handleDateChange = (e) => {
 …
         if (selectedTime) {
             const [selectedHours, selectedMinutes] = selectedTime.split(":");
-            // Check if selectedHours and selectedMinutes are valid numbers
             if (!isNaN(selectedHours) && !isNaN(selectedMinutes)) {
                 const dateTime = new Date(Date.UTC(year, month - 1, day, selectedHours, selectedMinutes));
 …
+            }
         } else {
-            // Find the first available time slot after the current time
             const now = new Date();
             const currentTime = now.getHours() * 60 + now.getMinutes(); // Current time in minutes
+            const currentTime = now.getHours() * 60 + now.getMinutes();
             const nextSlot = timeSlots.find(slot => {
                 const [hours, minutes] = slot.split(":");
                 const slotTime = parseInt(hours) * 60 + parseInt(minutes); // Time of the slot in minutes
+                const slotTime = parseInt(hours) * 60 + parseInt(minutes);
                 return slotTime > currentTime;
             });
-            // If no slot is found after the current time, use the first slot of the day
             formattedDateTime = nextSlot ? `${date} ${nextSlot}` : `${date} ${timeSlots[0]}`;
+        }
 …
         };
-        console.log("Data to be submitted:");
-        console.log(data);
         try {
             const response = await axios.post('http://localhost:8081/api/search', data);
             const filteredRestaurants = response.data;
             setFilteredRestaurants(filteredRestaurants);
             console.log(filteredRestaurants);
+            console.log(filteredRestaurants)
             setShowCuisineSearch(false);
-            // Handle response accordingly
         } catch (error) {
             console.error('Error:', error);
 …
         try {
             const response = await axios.post(`http://localhost:8081/api/search/shortcut/${cuisineName}`, cuisineName);
-            console.log(response.data);
             setFilteredRestaurants(response.data)
+            console.log(response.data)
         } catch (error) {
             console.error('Error searching by cuisine:', error);
 …
         setShowCuisineSearch(false);
     };
+    const parseTime = (timeString) => {
+        const [hours, minutes] = timeString.trim().split(':').map(Number);
+        return new Date().setHours(hours, minutes, 0, 0);
+    };
+    const roundToNextQuarter = (date) => {
+        const minutes = date.getMinutes();
+        const roundedMinutes = Math.floor(minutes / 15) * 15;
+        date.setMinutes(roundedMinutes, 0, 0);
+        return date;
+    };
+    const shouldMoveToNextDay = (currentTime, endTime) => {
+        return (endTime - currentTime) <= 2 * 60 * 60 * 1000;
+    };
+    const generateTimeSlots = (operatingHours) => {
+        const timeSlots = [];
+        const [startTimeStr, endTimeStr] = operatingHours.split('-').map((time) => time.trim());
+        const startTime = parseTime(startTimeStr);
+        let endTime = parseTime(endTimeStr);
+        const currentTime = new Date().getTime();
+        if (shouldMoveToNextDay(currentTime, endTime)) {
+            endTime += 24 * 60 * 60 * 1000;
+        }
+        let currentTimeSlot = new Date(startTime);
+        currentTimeSlot = roundToNextQuarter(currentTimeSlot);
+        while (currentTimeSlot.getTime() < endTime) {
+            timeSlots.push(currentTimeSlot.toISOString());
+            currentTimeSlot.setMinutes(currentTimeSlot.getMinutes() + 15);
+        }
+        return timeSlots;
+    };
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, '0');
+    const day = String(today.getDate()).padStart(2, '0');
+    const formattedDate = `${year}-${month}-${day}`;
     const handleTimeSlotClick = (table, timeSlot, restaurant) => {
 …
         const restaurantId = restaurant.restaurantId;
         const encodedTableNumber = encodeURI(tableNumber);
+        const encodedTableNumber = encodeURIComponent(tableNumber);
         const encodedTimeSlot = encodeURIComponent(formattedTimeSlot);
         const encodedRestaurantId = encodeURIComponent(restaurantId);
         navigate(`/reservationConfirmation/${encodedTableNumber}/${encodedTimeSlot}/${encodedRestaurantId}`);
+    }
+    };
     const renderTimeSlots = (tablesList, restaurant) => {
+        const [year, month, day] = date.split("-");
+        const [hours, minutes] = selectedTime.split(":");
+        const dateTime = new Date(year, month - 1, day, hours, minutes); // month is zero-based
+        let timestamp = dateTime.getTime();
+        if (isNaN(timestamp)) {
+            timestamp = Date.now();
+        }
+        let renderedTimeSlots = {}; // Object to store rendered slots for each table capacity
+        return tablesList.flatMap(table => {
+            // Render capacity header when encountering a new capacity
+            if (!renderedTimeSlots[table.capacity] && numPeople <= table.capacity) {
+        const currentTime = new Date().getTime();
+        let renderedTimeSlots = {};
+        if (tablesList.length === 0) {
+            return <p>No tables available for reservations at this restaurant.</p>;
+        }
+        return tablesList.flatMap((table) => {
+            const tableTimeSlots = generateTimeSlots(restaurant.operatingHours);
+            if (!renderedTimeSlots[table.capacity]) {
                 renderedTimeSlots[table.capacity] = 0;
                 return (
                     <div key={table.capacity}>
+                        <h3>Table for: {table.capacity}</h3>
+                        {table.timeSlots.map((timeSlot, index) => {
+                            let timeSlotTime = new Date(timeSlot).getTime();
+                            const tableCapacity = table.capacity;
+                            // Check if the time slot is after the current time, numPeople is less than or equal to tableCapacity, and limit to 5 slots
+                            if (timeSlotTime >= timestamp && numPeople <= tableCapacity && renderedTimeSlots[tableCapacity] < 5) {
+                                renderedTimeSlots[tableCapacity]++;
+                        <h3>Table for {table.capacity} guests</h3>
+                        {tableTimeSlots.map((timeSlot, index) => {
+                            const timeSlotTime = new Date(timeSlot).getTime();
+                            if (timeSlotTime > currentTime && renderedTimeSlots[table.capacity] < 3) {
+                                renderedTimeSlots[table.capacity]++;
                                 const timeSlotDateTime = new Date(timeSlot);
+                                const formattedDateTime = timeSlotDateTime.toLocaleString(); // Format for both date and time
+                                const formattedTime = timeSlotDateTime.toLocaleTimeString([], {
+                                    hour: '2-digit',
+                                    minute: '2-digit'
+                                });
                                 return (
+                                    <button key={index} className="btn btn-primary me-2 mb-2" onClick={() => handleTimeSlotClick(table, timeSlot, restaurant)}>
+                                        {formattedDateTime} {/* Display both date and time */}
+                                    <button
+                                        key={index}
+                                        className="btn btn-primary me-2 mb-2"
+                                        onClick={() => handleTimeSlotClick(table, timeSlot, restaurant)}
+                                    >
+                                        {formattedTime} {}
                                     </button>
                                 );
+                                <br/>
                             } else {
                                 return null; // Render nothing if the condition is not met
+                                return null;
+                            }
                         })}
 …
                 );
             } else {
-                // If capacity has been rendered, return null to avoid duplicate rendering
                 return null;
+            }
         });
+    }
+// Rest of your component code...
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, '0');
+    const day = String(today.getDate()).padStart(2, '0');
+    const formattedDate = `${year}-${month}-${day}`;
+    };
 …
                         placeholder="Restaurant or Cuisine"
                         aria-label="Search"
                         value={searchValue} // Set the value of the input field
                         onChange={handleInputChange} // Call the event handler on change
+                        value={searchValue}
+                        onChange={handleInputChange}
                     />
                 </div>
 …
                             <div className="card-body">
                                 <RestaurantInfo key={restaurant.id} restaurant={restaurant}/>
                                 <p>Available time slots</p>
+                                {/*<p>Available time slots</p>*/}
                                 <div className="d-flex flex-wrap">
+                                    {renderTimeSlots(restaurant.tablesList.flatMap((table) => table), restaurant)}
+                                    {restaurant.tablesList && restaurant.tablesList.length > 0 ? (
+                                        <div className="d-flex flex-wrap">
+                                            {renderTimeSlots(restaurant.tablesList, restaurant)}
+                                        </div>
+                                    ) : (
+                                        <p>No tables available for reservations at this restaurant</p>
+                                    )}
                                 </div>
+                                <button
+                                    className="btn btn-secondary"
+                                    onClick={() => handleGoToRestaurant(restaurant.restaurantId)}
+                                >
+                                    Go to Restaurant
+                                </button>
                             </div>
                         </div>
 …
                 </div>
                 {showCuisineSearch && (
                     <div className="mb-3">
                         <h2 className="display-2">Search by cuisine type</h2>
+                    <ul className="list-group">
+                        {cuisineTypes.map((cuisine, index) => (
+                            <li key={index} className="list-group-item">
+                                <button type="button" className="btn btn-outline-primary"
+                                        onClick={() => handleSearchByCuisine(cuisine)}>
+                                    {cuisine}
+                                </button>
+                            </li>
+                        ))}
+                    </ul>
+                </div>)}
+                        <ul className="list-group">
+                            {cuisineTypes.map((cuisine, index) => (
+                                <li key={index} className="list-group-item">
+                                    <button type="button" className="btn btn-outline-primary"
+                                            onClick={() => handleSearchByCuisine(cuisine)}>
+                                        {cuisine}
+                                    </button>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                )}
             </form>
         </div>

my-react-app/src/axios_helper.js

-              r8ca35dc
+              rf5b256e
 export const getAuthToken = () => {
     return window.localStorage.getItem("auth_token");
+    return window.localStorage.getItem("token");
+}
 …
         method: method,
         url: url,
+        data: data
+        data: data ? JSON.stringify(data) : null,
+        headers
     })
+}

my-react-app/src/components/AppContent.js

-              r8ca35dc
+              rf5b256e
             isAuthenticated: false,
             user: null,
             loading: false // Add loading state
+            loading: false
         };
+    }
 …
     fetchUserDetails = (token) => {
         console.log("Fetch");
+        console.log("Fetching User Details...");
         axios.get("/api/user")
             .then((response) => {
+                this.setState({ user: response.data, componentToShow: "restaurants", isAuthenticated: true });
+                this.setState({
+                    user: response.data,
+                    componentToShow: "restaurants",
+                    isAuthenticated: true
+                });
             })
             .catch((error) => {
                 console.error("Failed to fetch user details:", error);
-                this.logout();
             });
     };
 …
     onLogin = (e, email, password) => {
         e.preventDefault();
+        // After successful login, save the token
         axios.post("/api/login", { email, password })
             .then((response) => {
                 const token = response.data.token;
                 localStorage.setItem('token', token);  // Save the token
                 console.log(token);
                 this.setAuthToken(token);  // Set the token for future requests
                 this.setState({ componentToShow: "restaurants", isAuthenticated: true });
+                localStorage.setItem('token', token);
+                console.log("Login Token:", token);
+                this.setAuthToken(token);
+                this.fetchUserDetails(token);
             })
             .catch((error) => {
 …
                 this.setState({ componentToShow: "welcome" });
             });
     };
 …
     render() {
+        if (this.state.isAuthenticated) {
+            return (
+                <div>
+                    <Buttons login={this.login} logout={this.logout} />
+                    <AuthContent />
+                </div>
+            );
+        }
         return (
             <div>
                 <Buttons login={this.login} logout={this.logout} />
                 {this.state.componentToShow === "welcome" && <WelcomeContent />}
-                {this.state.componentToShow === "restaurants" && <AuthContent />}
                 {this.state.componentToShow === "login" && <LoginForm onLogin={this.onLogin} onRegister={this.onRegister} />}
-                {this.state.loading && <div>Loading...</div>} {/* Show loading state */}
             </div>
         );
+        // return (
+        //     <div>
+        //         <Buttons login={this.login} logout={this.logout} />
+        //         {this.state.componentToShow === "welcome" && <WelcomeContent />}
+        //         {this.state.componentToShow === "restaurants" && <AuthContent />}
+        //         {this.state.componentToShow === "login" && <LoginForm onLogin={this.onLogin} onRegister={this.onRegister} />}
+        //         {this.state.loading && <div>Loading...</div>} {/* Show loading state */}
+        //     </div>
+        // );
+    }
+}

my-react-app/src/components/AuthContent.js

-              r8ca35dc
+              rf5b256e
+    }
+    // componentDidMount() {
+    //     request(
+    //         "GET",
+    //         "/api/restaurants",
+    //         []
+    //     ).then((response) => {
+    //         this.setState({ data: response.data });
+    //     });
+    // }
     componentDidMount() {
+        request(
+            "GET",
+            "/api/restaurants",
+            []
+        ).then((response) => {
+            this.setState({ data: response.data });
+        });
+        const token = localStorage.getItem('token');
+        console.log("Stored Token on Reload:", token);
+        if (token) {
+            this.setAuthToken(token);
+            this.fetchUserDetails(token);
+        } else {
+            console.log("No token found. Redirecting to login.");
+            this.setState({ componentToShow: "login", isAuthenticated: false });
+        }
+    }

my-react-app/src/components/Header.js

-              r8ca35dc
+              rf5b256e
 import React from 'react';
+import React, {useEffect, useState} from 'react';
 import { Link, useNavigate } from 'react-router-dom';
+import {jwtDecode} from "jwt-decode";
+import axios from "axios";
 const Header = () => {
     const navigate = useNavigate();
+    // Check if the user is logged in by looking for a token in localStorage
+    const [user, setUser] = useState({});
     const isLoggedIn = localStorage.getItem('token');
     const handleLogout = () => {
+        // Clear the token from localStorage
+        localStorage.removeItem('token');
+        // Redirect to the home page or login page after logging out
+        navigate('/login');
+        localStorage.removeItem("token");
+        localStorage.removeItem("user");
+        setUser(null);
+        navigate("/login");
     };
+    useEffect(() => {
+        const fetchUser = async () => {
+            try {
+                const token = localStorage.getItem("token");
+                if (!token) return;
+                const storedUser = localStorage.getItem("user");
+                if (storedUser) {
+                    setUser(JSON.parse(storedUser));
+                    return;
+                }
+                const decodedToken = jwtDecode(token);
+                const userId = decodedToken.iss;
+                const { data } = await axios.get(`http://localhost:8081/api/user/${userId}`);
+                setUser(data);
+                localStorage.setItem("user", JSON.stringify(data));
+            } catch (error) {
+                console.error("Error fetching user:", error);
+            }
+        };
+        fetchUser();
+    }, [isLoggedIn]);
     return (
 …
                         <form className="form-inline mt-2 mt-md-0 ml-3">
                             {isLoggedIn ? (
+                                <button className="btn btn-outline-danger my-2 my-sm-0" onClick={handleLogout}>Logout</button>
+                                <button className="btn btn-outline-danger ml-3" onClick={handleLogout}>
+                                    Logout {user?.firstName}
+                                </button>
                             ) : (
                                 <Link className="btn btn-outline-info my-2 my-sm-0" to="/login">Login</Link>
+                                <Link className="btn btn-outline-info ml-3" to="/login">Login</Link>
                             )}
                         </form>

my-react-app/src/components/Login.js

-              r8ca35dc
+              rf5b256e
             const { token } = response.data;
-            // Store token securely (consider httpOnly cookies)
             localStorage.setItem('token', token);
             navigate("/")
         } catch (error) {
-            // Handle login failure
             console.error('Login failed:', error);
             setError('Login failed. Please check your credentials and try again.');

my-react-app/src/components/ReservationConfirmation.js

-              r8ca35dc
+              rf5b256e
 import { useNavigate } from 'react-router-dom';
 import {jwtDecode} from "jwt-decode";
+import {request} from "../axios_helper";
+import restaurants from "./Restaurants";
 const ReservationConfirmation = () => {
 …
     const [restaurant, setRestaurant] = useState({});
+    const [user, setUser] = useState({});
     const [table, setTable] = useState({});
     const [reservationDateTime, setReservationDateTime] = useState('');
 …
     const { tableNumber, timeSlot, restaurantId } = useParams();
+    const adjustedTimeSlot = new Date(new Date(timeSlot).getTime() + 60 * 60 * 1000).toISOString();
     useEffect(() => {
         const fetchTableDetails = async () => {
+        const fetchDetails = async () => {
             try {
                 const tableResponse = await axios.get(`http://localhost:8081/api/tables/${tableNumber}`);
 …
                 const restaurantResponse = await axios.get(`http://localhost:8081/api/restaurants/${restaurantId}`);
                 setRestaurant(restaurantResponse.data);
+                const token = localStorage.getItem("token");
+                if (!token) {
+                    console.error("No token found");
+                    return;
+                }
+                const decodedToken = jwtDecode(token);
+                const userId = decodedToken.iss;
+                const userResponse = await axios.get(`http://localhost:8081/api/user/${userId}`);
+                setUser(userResponse.data);
             } catch (error) {
                 console.error('Error fetching table details:', error);
+                console.error('Error fetching table or restaurant details:', error);
+            }
         };
         fetchTableDetails();
+        fetchDetails();
     }, [tableNumber, restaurantId]);
 …
         e.preventDefault();
+        if (!restaurant || !table) {
+            console.error("Restaurant or table is missing.");
+            return;
+        }
+        const payload = {
+            reservationID: 0,
+            userEmail: user.email,
+            rating: parseFloat(restaurant.rating) || null,
+            tableNumber: parseInt(table.id, 10),
+            restaurant: restaurant,
+            reservationDateTime: adjustedTimeSlot,
+            partySize: parseInt(partySize, 10),
+            status: 'Reserved',
+            specialRequests: specialRequests.trim(),
+            paymentStatus: 'Pending',
+        };
         try {
+            const token = localStorage.getItem("token");
+            if (!token) {
+                console.error("No token found");
+                return;
+            const response = await axios.post('http://localhost:8081/api/reservations', payload);
+            console.log('Reservation created successfully:', response.data);
+            navigate("/reservations")
+        } catch (error) {
+            if (error.response) {
+                alert('The selected time slot is no longer available. Please choose another time.');
+            } else {
+                alert('Network error. Please check your internet connection.');
+            }
-            // Decode the token to get the user email
-            const decodedToken = jwtDecode(token);
-            console.log(decodedToken)
-            const userId = decodedToken.iss;// Assuming the email is part of the decoded JWT token
-            const response = await axios.post(
-                `http://localhost:8081/api/reservations/${userId}`,
+                {
-                    restaurant: restaurant,
-                    table: table,
-                    checkInTime: timeSlot,
-                    partySize: partySize,
-                    specialRequests: specialRequests
-                },
+                {
-                    headers: {
-                        Authorization: `Bearer ${token}` // Include the token here
+                    }
+                }
-            );
-            navigate("/reservations");
-        } catch (error) {
-            console.error("Error creating reservation:", error);
+        }
     };
+    const calculateCheckOutTime = (checkInTime) => {
+        const checkIn = new Date(checkInTime);
+        checkIn.setHours(checkIn.getHours() + 2);
+        return checkIn.toISOString();
+    };
     const initialRemainingTime = localStorage.getItem('remainingTime') || 300;
     const [remainingTime, setRemainingTime] = useState(parseInt(initialRemainingTime));
+    const [remainingTime, setRemainingTime] = useState(parseInt(initialRemainingTime, 10));
     useEffect(() => {
 …
             setRemainingTime((prevTime) => {
                 const newTime = prevTime - 1;
                 localStorage.setItem('remainingTime', newTime.toString()); // Update remaining time in localStorage
+                localStorage.setItem('remainingTime', newTime.toString());
                 return newTime;
             });
 …
     useEffect(() => {
-        // Reset remaining time if it reaches zero
         if (remainingTime <= 0) {
             localStorage.removeItem('remainingTime');
+            // Optionally, handle releasing the hold on the table
+            alert("Time has expired. Please try reserving again.");
+            navigate('/restaurants'); // Redirect or take necessary action
+        }
     }, [remainingTime]);
+    }, [remainingTime, navigate]);
     const formatTime = (timeInSeconds) => {
 …
         const seconds = timeInSeconds % 60;
         return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    };
+    const formatTimeSlot = (timeSlot) => {
+        const utcDate = new Date(timeSlot);
+        const localDate = new Date(utcDate.toLocaleString("en-US", { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone }));
+        const formattedDate = localDate.toLocaleDateString();
+        const formattedTime = localDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        return `${formattedDate} - ${formattedTime}`;
     };
 …
                                 <h5 className="card-title">Reservation Details</h5>
                                 <p className="card-text">
+                                    <strong>Restaurant:</strong> {restaurant.name || 'Loading...'} <br/>
+                                    <strong>Cuisine type:</strong> {restaurant.cuisineType || 'Loading...'} <br/>
+                                    <strong>Selected Time Slot:</strong> {timeSlot} <br/>
+                                    <strong>Party size:</strong> <input type="number" max={table.capacity}
+                                                                        value={partySize}
+                                                                        onChange={(e) => setPartySize(e.target.value)}/>
+                                    <strong>Table size:</strong> {table.capacity} <br/>
+                                    <strong>Special Requests:</strong> <input type="text" value={specialRequests}
+                                                                              onChange={(e) => setSpecialRequests(e.target.value)}/><br/>
+                                    <strong>Restaurant:</strong> {restaurant.name || 'Loading...'} <br />
+                                    <strong>Cuisine type:</strong> {restaurant.cuisineType || 'Loading...'} <br />
+                                    <strong>Selected Time Slot:</strong> {formatTimeSlot(timeSlot)} <br />
+                                    <strong>Party size:</strong>{' '}
+                                    <input
+                                        type="number"
+                                        max={table.capacity}
+                                        value={partySize}
+                                        onChange={(e) => setPartySize(e.target.value)}
+                                    />
+                                    <strong>Table size:</strong> {table.capacity} <br />
+                                    <strong>Special Requests:</strong>{' '}
+                                    <input
+                                        type="text"
+                                        value={specialRequests}
+                                        onChange={(e) => setSpecialRequests(e.target.value)}
+                                    />
+                                    <br />
                                 </p>
                                 <p className="card-text text-success">
+                                    <strong>Check-in Time: grace period of 15 minutes +- the slot, for more call the
+                                        restaurant</strong><br/>
+                                    <strong>
+                                        Check-in Time: Grace period of 15 minutes +/- the slot. For more information, call the restaurant.
+                                    </strong>
+                                    <br />
                                 </p>
                             </div>
                             <div className="card-footer">
                                 <button type="submit" className="btn btn-primary">Submit</button>
+                            </div>
+                            <div className="card-footer">
+                                <a href="/restaurants" className="btn btn-primary">Back to Restaurants</a>
+                            </div>
+                            <div className="card-footer">
+                                <a href="/" className="btn btn-primary">Back to Home</a>
+                                <a href="/restaurants" className="btn btn-secondary mx-2">Back to Restaurants</a>
+                                <a href="/" className="btn btn-secondary">Back to Home</a>
                             </div>
                         </form>
                     </div>
                 </div>
             </div>
         </div>

my-react-app/src/components/ReservationEdit.js

-              r8ca35dc
+              rf5b256e
 const ReservationEdit = () => {
     const navigate = useNavigate();
+    const { reservationId } = useParams();
     const [isLoading, setIsLoading] = useState(true);
-    const { reservationId } = useParams(); // Extract reservationId from URL params
     const [formData, setFormData] = useState({});
+    const [tableNumber, setTableNumber] = useState({});
     const [table, setTable] = useState({});
     const [restaurant, setRestaurant] = useState({});
+    const [restaurantId, setRestaurantId] = useState({});
     const [timeSlots, setTimeSlots] = useState([]);
     const [filteredTimeSlots, setFilteredTimeSlots] = useState([]);
     const [checkInTime, setCheckInTime] = useState([]);
+    const [tableReservations, setTableReservations] = useState([]);
+    const timeSlotInterval = 15;
+    const [selectedDate, setSelectedDate] = useState('');
+    const [selectedTime, setSelectedTime] = useState('');
+    const [timeOptions, setTimeOptions] = useState([]);
     useEffect(() => {
 …
                 setIsLoading(true);
                 const response = await axios.get(`http://localhost:8081/api/reservations/${reservationId}`);
+                setCheckInTime(response.data.checkInTime)
+                console.log(response)
+                setCheckInTime(response.data.reservationDateTime);
                 setFormData(response.data);
+                setTable(response.data.table);
+                setRestaurant(response.data.restaurant);
+                setTimeSlots(response.data.table.timeSlots);
+                setRestaurant(response.data.restaurantName);
+                setRestaurantId(response.data.restaurantId);
+                setTableNumber(response.data.tableNumber);
+                const tableResponse = await axios.get(`http://localhost:8081/api/tables/${response.data.tableNumber}`);
+                setTable(tableResponse.data)
                 setIsLoading(false);
             } catch (error) {
 …
+            }
         };
         fetchReservation();
     }, [reservationId]);
     useEffect(() => {
+        if (!table || !restaurant) return; // If table or restaurant is not loaded, return early
+        const currentTime = new Date();
+        const filteredSlots = timeSlots.filter(timeSlot => new Date(timeSlot) >= currentTime);
+        setFilteredTimeSlots(filteredSlots);
+    }, [table, restaurant]);
+        const fetchTableReservations = async () => {
+            try {
+                const response = await axios.get(`http://localhost:8081/api/table-reservations/${table.tableId}`);
+                setTableReservations(response.data);
+                setIsLoading(false);
+            } catch (error) {
+                console.error('Error fetching table reservations:', error);
+            }
+        };
+        if (table?.tableId) {
+            fetchTableReservations();
+        }
+    }, [table]);
+    const generateTimeSlots = (operatingHours, interval) => {
+        const slots = [];
+        const [startTimeStr, endTimeStr] = operatingHours.split('-');
+        const [startHours, startMinutes] = startTimeStr.split(':').map(Number);
+        const [endHours, endMinutes] = endTimeStr.split(':').map(Number);
+        const startTime = new Date();
+        startTime.setHours(startHours, startMinutes, 0, 0);
+        const endTime = new Date();
+        endTime.setHours(endHours, endMinutes, 0, 0);
+        let currentTime = startTime;
+        while (currentTime <= endTime) {
+            slots.push(new Date(currentTime).toISOString());
+            currentTime = new Date(currentTime.getTime() + interval * 60000);
+        }
+        return slots;
+    };
+    const generateTimeOptions = (operatingHours) => {
+        const { startTime, endTime } = parseOperatingHours(operatingHours);
+        const now = new Date();
+        const selectedDateObj = new Date(selectedDate);
+        const isToday = selectedDateObj.toDateString() === now.toDateString();
+        const isTomorrow = selectedDateObj > now && selectedDateObj.getDate() === now.getDate() + 1;
+        let currentTime;
+        if (isToday) {
+            currentTime = roundToNext15Minutes(new Date());
+        } else {
+            currentTime = new Date(startTime);
+        }
+        const options = [];
+        while (currentTime <= endTime) {
+            options.push(currentTime.toTimeString().slice(0, 5));
+            currentTime = new Date(currentTime.getTime() + 15 * 60 * 1000);
+        }
+        return options;
+    };
+    useEffect(() => {
+        const operatingHours = table?.restaurant?.operatingHours || "09:00-00:00";
+        const allTimeSlots = generateTimeSlots(operatingHours, timeSlotInterval);
+        const availableSlots = allTimeSlots.filter((slot) =>
+            !tableReservations.includes(slot)
+        );
+        setFilteredTimeSlots(availableSlots);
+    }, [tableReservations, table]);
     const handleInputChange = (e) => {
         const { name, value } = e.target;
+        // Check if the changed input is the time slot select element
+        if (name === 'selectedTimeSlot') {
+            // Update the formData with the selected time slot value
+            setFormData({ ...formData, checkInTime: value });
+        if (name === 'partySize') {
+            const valueAsNumber = Math.min(value, table?.capacity);
+            setFormData(prevState => ({
+                ...prevState,
+                [name]: valueAsNumber
+            }));
         } else {
+            // For other input fields, update formData as usual
+            setFormData({ ...formData, [name]: value });
+        }
+    };
+            setFormData(prevState => ({
+                ...prevState,
+                [name]: value
+            }));
+        }
+    };
     const handleSubmit = async (e) => {
 …
             const decodedToken = jwtDecode(token);
-            console.log(decodedToken)
             const userId = decodedToken.iss;
+            await axios.post(`http://localhost:8081/api/reservations/${reservationId}/${userId}`, formData);
+            navigate(`/reservations`)
+            const updatedReservationData = {
+                ...formData,
+                reservationDateTime: `${selectedDate}T${selectedTime}`,
+                checkInTime: checkInTime,
+                reservationID: reservationId,
+            };
+            await axios.post(
+                `http://localhost:8081/api/reservations/${reservationId}/${userId}`,
+                updatedReservationData,
+                {
+                    headers: {
+                        'Content-Type': 'application/json',
+                    }
+                }
+            );
+            console.log(updatedReservationData)
+            navigate(`/reservations`);
         } catch (error) {
             console.error('Error updating reservation:', error);
 …
     };
+    const formatCurrentTimeSlot = (timeSlot) => {
+        const date = new Date(timeSlot);
+        const formattedDate = date.toLocaleDateString('en-GB'); // Format date as YYYY-MM-DD
+        const formattedTime = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); // Format time as HH:MM
+        return `${formattedDate} ${formattedTime}`;
+    };
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, '0');
+    const day = String(today.getDate()).padStart(2, '0');
+    const formattedDate = `${year}-${month}-${day}`;
+    const parseOperatingHours = (operatingHours) => {
+        const [start, end] = operatingHours.split('-');
+        return {
+            startTime: new Date(`1970-01-01T${start}:00`),
+            endTime: new Date(`1970-01-01T${end}:00`)
+        };
+    };
+    useEffect(() => {
+        if (formData?.restaurant?.operatingHours && selectedDate) {
+            const options = generateTimeOptions(formData.restaurant.operatingHours);
+            setTimeOptions(options);
+        }
+    }, [restaurant, selectedDate]);
+        // useEffect(() => {
+        //     if (checkInTime) {
+        //         const checkInDateObj = new Date(checkInTime);
+        //         setSelectedDate(checkInDateObj.toISOString().split("T")[0]);
+        //         setSelectedTime(checkInDateObj.toTimeString().slice(0, 5));
+        //     }
+        // }, [checkInTime]);
     return (
         <div className="container">
             {isLoading ? ( // Conditional rendering based on loading state
+            {isLoading ? (
                 <p>Loading...</p>
             ) : (
 …
                     <h1>Edit Reservation</h1>
                     <div className="card-body">
                         <h2>
                             {restaurant.name} <StarRating key={restaurant.id} rating={restaurant.rating}/>
+                        <h2 className="card-title">
+                            {formData.restaurant.name} <StarRating key={formData.restaurant.id} rating={formData.restaurant.rating} />
                         </h2>
                         <p className="card-text">{restaurant.cuisineType}</p>
                         <p className="card-text">{restaurant.operatingHours}</p>
                         <p className="card-text">Ul. {restaurant.address}</p>
                         <br/>
+                        <p className="card-text">{formData.restaurant.name}</p>
+                        <p className="card-text">{formData.restaurant.operatingHours}</p>
+                        <p className="card-text">Ul. {formData.restaurant.address}</p>
+                        <br />
                     </div>
                     <form onSubmit={handleSubmit}>
                         <div className="mb-3">
+                            <label htmlFor="checkInTime" className="form-label">Check-in Time</label>
+                            <select className="form-select mt-2" aria-label="Select Time Slot"
+                                    name="selectedTimeSlot" // Add name attribute
+                                    onChange={handleInputChange}>
+                                <option value="">Select Time Slot</option>
+                                {filteredTimeSlots.map((timeSlot, index) => (
+                                    <option key={index} value={timeSlot}>{formatTimeSlot(timeSlot)}</option>
+                            <label>Select Date:</label>
+                            <input
+                                type="date"
+                                className="form-control mt-2"
+                                onChange={(event) => setSelectedDate(event.target.value)}
+                                value={selectedDate}
+                                min={formattedDate}
+                            />
+                            <label>Select Time:</label>
+                            <select
+                                className="form-select mt-2"
+                                onChange={(event) => setSelectedTime(event.target.value)}
+                                value={selectedTime}
+                                disabled={!selectedDate}
+                            >
+                                <option value="">Select Time</option>
+                                {timeOptions.map((time, index) => (
+                                    <option key={index} value={time}>
+                                        {time}
+                                    </option>
                                 ))}
                             </select>
+                            <label className=".text-danger">Current check in time: {formatTimeSlot(checkInTime)}</label>
+                            <label className="text-danger">
+                                Current check-in time: {formatTimeSlot(checkInTime)}
+                            </label>
                         </div>
                         <div className="mb-3">
                             <label htmlFor="partySize" className="form-label">Party Size</label>
+                            <input type="number" className="form-control" id="partySize" name="partySize"
+                                   max={table.capacity}
+                                   value={formData.partySize || ''} onChange={handleInputChange}/>
+                            <input
+                                type="number"
+                                className="form-control"
+                                id="partySize"
+                                name="partySize"
+                                max={table?.capacity}
+                                min={1}
+                                value={formData.partySize || ''}
+                                onChange={handleInputChange}
+                            />
+                            <label className="text-danger">
+                                Table capacity: {table?.capacity}
+                            </label>
                         </div>
                         <div className="mb-3">
+                        <label htmlFor="specialRequests" className="form-label">Special Requests</label>
+                            <input type="text" className="form-control" id="specialRequests" name="specialRequests"
+                                   value={formData.specialRequests || ''} onChange={handleInputChange}/>
+                            <label htmlFor="specialRequests" className="form-label">Special Requests</label>
+                            <input
+                                type="text"
+                                className="form-control"
+                                id="specialRequests"
+                                name="specialRequests"
+                                value={formData.specialRequests || ''}
+                                onChange={handleInputChange}
+                            />
                         </div>
                         <button type="submit" className="btn btn-primary">Submit</button>
 …
         </div>
     );
 };

my-react-app/src/components/ReservationHistory.js

-              r8ca35dc
+              rf5b256e
 const ReservationHistory = () => {
     const [reservations, setReservations] = useState([]);
+    const [filteredReservations, setFilteredReservations] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+    const [restaurantFilter, setRestaurantFilter] = useState("");
+    const [tableFilter, setTableFilter] = useState("");
+    const [partySizeFilter, setPartySizeFilter] = useState("");
+    const [statusFilter, setStatusFilter] = useState("");
+    const [cancellationReasonFilter, setCancellationReasonFilter] = useState("");
+    const [startDate, setStartDate] = useState("");
+    const [endDate, setEndDate] = useState("");
     useEffect(() => {
 …
                 setReservations(response.data);
+                setFilteredReservations(response.data);
             } catch (err) {
                 setError("Failed to fetch reservations.");
 …
     }, []);
+    useEffect(() => {
+        let tempReservations = reservations;
+        if (restaurantFilter) {
+            tempReservations = tempReservations.filter(res =>
+                res.restaurant?.name.toLowerCase().includes(restaurantFilter.toLowerCase())
+            );
+        }
+        if (tableFilter) {
+            tempReservations = tempReservations.filter(res =>
+                res.table?.id?.toString() === tableFilter
+            );
+        }
+        if (partySizeFilter) {
+            tempReservations = tempReservations.filter(res =>
+                res.partySize?.toString() === partySizeFilter
+            );
+        }
+        if (statusFilter) {
+            tempReservations = tempReservations.filter(res =>
+                res.status.toLowerCase().includes(statusFilter.toLowerCase())
+            );
+        }
+        if (cancellationReasonFilter) {
+            tempReservations = tempReservations.filter(res =>
+                (res.cancellationReason || "None").toLowerCase().includes(cancellationReasonFilter.toLowerCase())
+            );
+        }
+        if (startDate && endDate) {
+            const start = new Date(startDate);
+            const end = new Date(endDate);
+            tempReservations = tempReservations.filter(res => {
+                const reservationDate = new Date(res.reservationDateTime);
+                return reservationDate >= start && reservationDate <= end;
+            });
+        }
+        setFilteredReservations(tempReservations);
+    }, [
+        restaurantFilter,
+        tableFilter,
+        partySizeFilter,
+        statusFilter,
+        cancellationReasonFilter,
+        startDate,
+        endDate,
+        reservations
+    ]);
+    const resetFilters = () => {
+        setRestaurantFilter("");
+        setTableFilter("");
+        setPartySizeFilter("");
+        setStatusFilter("");
+        setCancellationReasonFilter("");
+        setStartDate("");
+        setEndDate("");
+    };
     if (loading) return <div>Loading...</div>;
     if (error) return <div className="alert alert-danger">{error}</div>;
 …
     return (
         <div className="container mt-5">
+            <h3>Past Reservations</h3>
+            <table className="table table-bordered">
+                <thead className="thead-dark">
+                <tr>
+                    <th>#</th>
+                    <th>Restaurant</th>
+                    <th>Table</th>
+                    <th>Date & Time</th>
+                    <th>Party Size</th>
+                    <th>Special Requests</th>
+                    <th>Status</th>
+                    <th>Cancellation Reason</th>
+                </tr>
+                </thead>
+                <tbody>
+                {reservations.map((res, index) => (
+                    <tr key={res.id}>
+                        <td>{index + 1}</td>
+                        <td>{res.restaurant?.name || "N/A"}</td>
+                        <td>{res.table?.id || "N/A"}</td>
+                        <td>{new Date(res.reservationDateTime).toLocaleString()}</td>
+                        <td>{res.partySize}</td>
+                        <td>{res.specialRequests || "None"}</td>
+                        <td>{res.status}</td>
+                        <td>{res.cancellationReason || "None"}</td>
+            <h3 className="mb-4 text-center">Past Reservations</h3>
+            <div className="row mb-4 align-items-end">
+                <div className="col-md-2">
+                    <input
+                        type="text"
+                        className="form-control"
+                        placeholder="Filter by Restaurant"
+                        value={restaurantFilter}
+                        onChange={(e) => setRestaurantFilter(e.target.value)}
+                    />
+                </div>
+                <div className="col-md-2">
+                    <input
+                        type="number"
+                        className="form-control"
+                        placeholder="Filter by Table ID"
+                        value={tableFilter}
+                        onChange={(e) => setTableFilter(e.target.value)}
+                    />
+                </div>
+                <div className="col-md-4 d-flex gap-2">
+                    <input
+                        type="date"
+                        className="form-control"
+                        placeholder="Start date"
+                        value={startDate}
+                        onChange={(e) => setStartDate(e.target.value)}
+                    />
+                    <input
+                        type="date"
+                        className="form-control"
+                        placeholder="End date"
+                        value={endDate}
+                        onChange={(e) => setEndDate(e.target.value)}
+                    />
+                </div>
+                <div className="col-md-2">
+                    <input
+                        type="number"
+                        className="form-control"
+                        placeholder="Filter by Party Size"
+                        value={partySizeFilter}
+                        onChange={(e) => setPartySizeFilter(e.target.value)}
+                    />
+                </div>
+                <div className="col-md-2">
+                    <select
+                        value={statusFilter}
+                        onChange={(e) => setStatusFilter(e.target.value)}
+                        className="form-control"
+                    >
+                        <option value="">Filter by status</option>
+                        <option value="successful">Successful</option>
+                        <option value="canceled">Canceled</option>
+                    </select>
+                </div>
+                <div className="col-md-2 mt-2">
+                    <input
+                        type="text"
+                        className="form-control"
+                        placeholder="Filter by Cancellation Reason"
+                        value={cancellationReasonFilter}
+                        onChange={(e) => setCancellationReasonFilter(e.target.value)}
+                    />
+                </div>
+                <div className="col-md-2 mt-2">
+                    <button
+                        onClick={resetFilters}
+                        className="btn btn-outline-secondary w-100"
+                    >
+                        Reset Filters
+                    </button>
+                </div>
+            </div>
+            <div className="table-responsive">
+                <table className="table table-striped table-hover table-bordered align-middle">
+                    <thead className="table-dark text-center">
+                    <tr>
+                        <th>#</th>
+                        <th>Restaurant</th>
+                        <th>Table</th>
+                        <th>Date & Time</th>
+                        <th>Party Size</th>
+                        <th>Special Requests</th>
+                        <th>Status</th>
+                        <th>Cancellation Reason</th>
                     </tr>
+                ))}
+                </tbody>
+            </table>
+                    </thead>
+                    <tbody>
+                    {filteredReservations.length > 0 ? (
+                        filteredReservations.map((res, index) => (
+                            <tr key={res.id}>
+                                <td>{index + 1}</td>
+                                <td>{res.restaurant?.name || "N/A"}</td>
+                                <td>{res.table?.id || "N/A"}</td>
+                                <td>{new Date(res.reservationDateTime).toLocaleString()}</td>
+                                <td>{res.partySize}</td>
+                                <td>{res.specialRequests || "None"}</td>
+                                <td>{res.status}</td>
+                                <td>{res.cancellationReason || "None"}</td>
+                            </tr>
+                        ))
+                    ) : (
+                        <tr>
+                            <td colSpan="8" className="text-center">No reservations found.</td>
+                        </tr>
+                    )}
+                    </tbody>
+                </table>
+            </div>
         </div>
     );

my-react-app/src/components/Reservations.js

-              r8ca35dc
+              rf5b256e
+                }
                 const decodedToken = jwtDecode(token);
-                console.log(decodedToken)
                 const userId = decodedToken.iss;
 …
+        }
     };
     return (
         <div className="container">
-            <h2>Reservations</h2>
             <div className="row">
+                {reservations.map(reservation => (
+                    <div key={reservation.reservationID} className="col-md-4 mb-4">
+                        <div className="card">
+                            <div className="card-body">
+                                <div className="card-title">Reservation ID: {reservation.reservationID}</div>
+                                <div className="card-text">Restaurant: {reservation.restaurant.name}</div>
+                                <div className="card-text">Table Number: {reservation.table.id}</div>
+                                {/* Format reservation date and time */}
+                                <div className="card-text">Reservation
+                                    Date: {new Date(reservation.checkInTime).toLocaleDateString('en-US', {
+                                        weekday: 'long',
+                                        year: 'numeric',
+                                        month: 'long',
+                                        day: 'numeric'
+                                    })}</div>
+                                <div className="card-text">Reservation
+                                    Time: {new Date(reservation.checkInTime).toLocaleTimeString('en-US', {
+                                        hour: 'numeric',
+                                        minute: 'numeric',
+                                        hour12: true
+                                    })}</div>
+                                {/* End of formatted date and time */}
+                                <div className="card-text">Party Size: {reservation.partySize}</div>
+                                <div className="card-text text-danger">Special
+                                    Requests: {reservation.specialRequests}</div>
+                                <div className="card-text">Status: {reservation.status}</div>
+                                <div className="card-text text-danger">Grace period of 15 minutes +-</div>
+                                <br/>
+                                <div className="row">
+                                    <div className="col">
+                                        <button className="danger text-bg-warning border-0"
+                                                onClick={() => handleEditReservation(reservation.reservationID)}>Edit
+                                            Reservation
+                {reservations.length === 0 ? (
+                    <div className="text-center mt-5">
+                        <h4>No active reservations</h4>
+                        <p>Looking for a place to dine? Check out our <a href="/restaurants" className="text-primary">restaurants</a>.</p>
+                    </div>
+                ) : (
+                    reservations.map(reservation => (
+                        <div key={reservation.reservationID} className="col-md-4 mb-4">
+                            <div className="card h-100">
+                                <div className="card-body">
+                                    <h5 className="card-title">Reservation ID: {reservation.reservationID}</h5>
+                                    <p className="card-text">Restaurant: {reservation?.restaurant.name || "Not specified"}</p>
+                                    <p className="card-text">Table Number: {reservation?.tableNumber || "Not specified"}</p>
+                                    <p className="card-text">
+                                        Reservation Date: {reservation.checkInTime ?
+                                        new Date(reservation.checkInTime).toLocaleDateString('en-US', {
+                                            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
+                                        }) :
+                                        "Not specified"}
+                                    </p>
+                                    <p className="card-text">
+                                        Reservation Time: {reservation.checkInTime ?
+                                        new Date(reservation.checkInTime).toLocaleTimeString('en-US', {
+                                            hour: 'numeric', minute: 'numeric', hour12: true
+                                        }) :
+                                        "Not specified"}
+                                    </p>
+                                    <p className="card-text">Reservation made on: {reservation.reservationDateTime ?
+                                        new Date(reservation.reservationDateTime).toLocaleTimeString('en-US', {
+                                            hour: 'numeric', minute: 'numeric', hour12: true
+                                        }) :
+                                        "Not specified"}  {reservation.reservationDateTime ?
+                                        new Date(reservation.reservationDateTime).toLocaleDateString('en-US', {
+                                            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
+                                        }) :
+                                        "Not specified"} </p>
+                                    <p className="card-text">Party Size: {reservation.partySize || "Not specified"}</p>
+                                    <p className="card-text text-danger">Special Requests: {reservation.specialRequests || "None"}</p>
+                                    <p className="card-text">Status: {reservation.status || "Pending"}</p>
+                                    <p className="card-text text-danger">Grace period of 15 minutes +-</p>
+                                    <div className="d-flex justify-content-between mt-3">
+                                        <button
+                                            className="btn btn-warning"
+                                            onClick={() => handleEditReservation(reservation.reservationID)}>
+                                            Edit Reservation
                                         </button>
+                                    </div>
+                                    <div className="col">
+                                        <button className="danger text-bg-danger border-0"
+                                                onClick={() => handleCancelReservation(reservation.reservationID)}>Cancel
+                                            Reservation
+                                        <button
+                                            className="btn btn-danger"
+                                            onClick={() => handleCancelReservation(reservation.reservationID)}>
+                                            Cancel Reservation
                                         </button>
                                     </div>
 …
                             </div>
                         </div>
                     </div>
                 ))}
+                    ))
+                )}
             </div>
         </div>
     );
+    p
 };
 export default Reservations;

my-react-app/src/components/RestaurantContext.js

r8ca35dc	rf5b256e
17	17	};
18	18
19		fetchRestaurants()~~.then(r => console.log(fetchRestaurants()))~~;
	19	fetchRestaurants();
20	20	}, []);
21	21

my-react-app/src/components/RestaurantDetails.js

-              r8ca35dc
+              rf5b256e
 import StarRating from "./StarRating";
 const RestaurantDetails = () => {
     const navigate = useNavigate();
+    const { id } = useParams();
-    const { id } = useParams();
     const [restaurant, setRestaurant] = useState(null);
     const [selectedTableId, setSelectedTableId] = useState('');
+    const [selectedTimeSlot, setSelectedTimeSlot] = useState('');
+    const [selectedDate, setSelectedDate] = useState('');
+    const [selectedTime, setSelectedTime] = useState('');
+    const [timeOptions, setTimeOptions] = useState([]);
     const [selectedTable, setSelectedTable] = useState(null);
-    const [filteredTimeSlots, setFilteredTimeSlots] = useState([]);
-    const [selectedCapacity, setSelectedCapacity] = useState(''); // Define selectedCapacity state
     useEffect(() => {
 …
     useEffect(() => {
         if (!selectedTableId) return; // If no table is selected, return early
+        if (!selectedTableId) return;
         const fetchTableDetails = async () => {
 …
     }, [selectedTableId]);
+    useEffect(() => {
+        if (!selectedTable || !restaurant) return; // If table or restaurant is not loaded, return early
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, '0');
+    const day = String(today.getDate()).padStart(2, '0');
+    const formattedDate = `${year}-${month}-${day}`;
+    const parseOperatingHours = (operatingHours) => {
+        const [start, end] = operatingHours.split('-');
+        const [startHour, startMinute] = start.split(':').map(Number);
+        const [endHour, endMinute] = end.split(':').map(Number);
+        // Filter time slots based on the selected table
+        const currentTime = new Date();
+        const filteredSlots = selectedTable.timeSlots.filter(timeSlot => new Date(timeSlot) >= currentTime);
+        setFilteredTimeSlots(filteredSlots);
+    }, [selectedTable, restaurant]);
+        const startTime = new Date();
+        startTime.setHours(startHour, startMinute, 0, 0);
+        const endTime = new Date();
+        endTime.setHours(endHour < startHour ? endHour + 24 : endHour, endMinute, 0, 0);
+    const formatTimeSlot = (timeSlot) => {
+        const date = new Date(timeSlot);
+        const formattedDate = date.toLocaleDateString();
+        const formattedTime = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        return `${formattedDate} - ${formattedTime}`;
+        return { startTime, endTime };
     };
+    const handleTableSelect = (event) => {
+        const selectedTableId = event.target.value;
+        setSelectedTableId(selectedTableId);
+    const generateTimeOptions = (operatingHours) => {
+        const { startTime, endTime } = parseOperatingHours(operatingHours);
+        const now = new Date();
+        const selectedDateObj = new Date(selectedDate);
+        const isToday = selectedDateObj.toDateString() === now.toDateString();
+        let currentTime = isToday ? roundToNext15Minutes(new Date()) : new Date(startTime);
+        const options = [];
+        while (currentTime <= endTime) {
+            options.push(currentTime.toTimeString().slice(0, 5));
+            currentTime = new Date(currentTime.getTime() + 15 * 60 * 1000);
+        }
+        return options;
     };
+    const handleTimeSlotSelect = (event) => {
+        const selectedTimeSlot = event.target.value;
+        setSelectedTimeSlot(selectedTimeSlot);
+    useEffect(() => {
+        if (restaurant && selectedDate) {
+            const options = generateTimeOptions(restaurant.operatingHours);
+            setTimeOptions(options);
+        }
+    }, [restaurant, selectedDate]);
+    const handleTableSelect = (event) => {
+        setSelectedTableId(event.target.value);
     };
     const handleReservationConfirmation = (restaurant) => {
         const tableNumber = selectedTableId;
         const formattedTimeSlot = selectedTimeSlot;
         const restaurantId = restaurant.restaurantId;
+    const handleReservationConfirmation = () => {
+        const encodedTableId = encodeURIComponent(selectedTableId);
+        const encodedDateTime = encodeURIComponent(`${selectedDate}T${selectedTime}`);
+        const encodedRestaurantId = encodeURIComponent(restaurant.restaurantId);
+        const encodedTableNumber = encodeURIComponent(tableNumber);
+        const encodedTimeSlot = encodeURIComponent(formattedTimeSlot);
+        const encodedRestaurantId = encodeURIComponent(restaurantId);
+        navigate(`/reservationConfirmation/${encodedTableNumber}/${encodedTimeSlot}/${encodedRestaurantId}`);
+        navigate(`/reservationConfirmation/${encodedTableId}/${encodedDateTime}/${encodedRestaurantId}`);
     };
+    const roundToNext15Minutes = (date) => {
+        const minutes = date.getMinutes();
+        const remainder = minutes % 15;
+        if (remainder === 0) return date;
+        date.setMinutes(minutes + 15 - remainder);
+        date.setSeconds(0, 0);
+        return date;
+    };
     return (
 …
                 <>
                     <h2 className="card-title">
                         {restaurant.name} <StarRating key={restaurant.id} rating={restaurant.rating}/>
+                        {restaurant.name} <StarRating key={restaurant.id} rating={restaurant.rating} />
                     </h2>
                     <div className="restaurant-details">
 …
                         <p>Address: {restaurant.address}</p>
                         <p>Phone: {restaurant.phone}</p>
+                        <p>Website: <a href={restaurant.website}>{restaurant.website}</a></p>
+                        <p>
+                            Website: <a href={restaurant.website}>{restaurant.website}</a>
+                        </p>
                         <p>Social Media Links: {restaurant.socialMediaLinks}</p>
                         <label>Select Table:</label>
+                        <select className="form-select" aria-label="Select Table" onChange={handleTableSelect}
+                                value={selectedTableId}>
+                        <select
+                            className="form-select"
+                            aria-label="Select Table"
+                            onChange={handleTableSelect}
+                            value={selectedTableId}
+                        >
                             <option value="">Select Table</option>
+                            {restaurant.tablesList.map((table, index) => (
+                                <option key={index}
+                                        value={table.id}>{`Capacity: ${table.capacity} - ${table.location}`}</option>
+                            {restaurant.tablesList.map((table) => (
+                                <option key={table.id} value={table.id}>
+                                    {`Capacity: ${table.capacity} - ${table.location}`}
+                                </option>
                             ))}
                         </select>
                         {selectedTable && (
                             <>
+                                <label>Select Time Slot:</label>
+                                <select className="form-select mt-2" aria-label="Select Time Slot" onChange={handleTimeSlotSelect}>
+                                    <option value="">Select Time Slot</option>
+                                    {filteredTimeSlots.map((timeSlot, index) => (
+                                        <option key={index} value={timeSlot}>{formatTimeSlot(timeSlot)}</option>
+                                <label>Select Date:</label>
+                                <input
+                                    type="date"
+                                    className="form-control mt-2"
+                                    onChange={(event) => setSelectedDate(event.target.value)}
+                                    value={selectedDate}
+                                    min={formattedDate}
+                                    onKeyDown={(e) => e.preventDefault()}
+                                />
+                                {!selectedDate && <p style={{ color: "red" }}>Please select a valid date.</p>}
+                                <label>Select Time:</label>
+                                <select
+                                    className="form-select mt-2"
+                                    onChange={(event) => setSelectedTime(event.target.value)}
+                                    value={selectedTime}
+                                    disabled={!selectedDate}
+                                >
+                                    <option value="">Select Time</option>
+                                    {timeOptions.map((time, index) => (
+                                        <option key={index} value={time}>
+                                            {time}
+                                        </option>
                                     ))}
                                 </select>
                             </>
                         )}
+                        <br/>
+                        {/* Add a button to trigger reservation confirmation */}
+                        <button className="btn btn-primary" onClick={() => handleReservationConfirmation(restaurant)}>
+                        <br />
+                        <button
+                            className="btn btn-primary"
+                            onClick={handleReservationConfirmation}
+                            disabled={!selectedTableId || !selectedDate || !selectedTime}
+                        >
                             Confirm Reservation
                         </button>

my-react-app/src/components/Restaurants.js

-              r8ca35dc
+              rf5b256e
 import { useNavigate } from 'react-router-dom';
 import {RestaurantContext} from "./RestaurantContext";
+import {Alert} from "bootstrap";
+const parseTime = (timeString) => {
+    const [hours, minutes] = timeString.trim().split(':').map(Number);
+    return new Date().setHours(hours, minutes, 0, 0);
+};
+const roundToNextQuarter = (date) => {
+    const minutes = date.getMinutes();
+    const roundedMinutes = Math.floor(minutes / 15) * 15;
+    date.setMinutes(roundedMinutes, 0, 0);
+    return date;
+};
+const shouldMoveToNextDay = (currentTime, endTime) => {
+    return (endTime - currentTime) <= 2 * 60 * 60 * 1000;
+};
 const Restaurants = () => {
 …
     }, [restaurantContext]);
+    const generateTimeSlots = (operatingHours) => {
+        const timeSlots = [];
+        const [startTimeStr, endTimeStr] = operatingHours.split('-').map((time) => time.trim());
+        const startTime = parseTime(startTimeStr);
+        let endTime = parseTime(endTimeStr);
+        const currentTime = new Date().getTime();
+        if (shouldMoveToNextDay(currentTime, endTime)) {
+            endTime += 24 * 60 * 60 * 1000;
+        }
+        let currentTimeSlot = new Date(startTime);
+        currentTimeSlot = roundToNextQuarter(currentTimeSlot);
+        while (currentTimeSlot.getTime() < endTime) {
+            timeSlots.push(currentTimeSlot.toISOString());
+            currentTimeSlot.setMinutes(currentTimeSlot.getMinutes() + 15);
+        }
+        return timeSlots;
+    };
     const handleDetailClick = (restaurantId) => {
         navigate(`/restaurants/${restaurantId}`);
+    }
+    };
     const handleTimeSlotClick = (table, timeSlot, restaurant) => {
 …
         const restaurantId = restaurant.restaurantId;
         const encodedTableNumber = encodeURI(tableNumber);
+        const encodedTableNumber = encodeURIComponent(tableNumber);
         const encodedTimeSlot = encodeURIComponent(formattedTimeSlot);
         const encodedRestaurantId = encodeURIComponent(restaurantId);
         navigate(`/reservationConfirmation/${encodedTableNumber}/${encodedTimeSlot}/${encodedRestaurantId}`);
+    }
+    };
     const renderTimeSlots = (tablesList, restaurant) => {
         const currentTime = new Date().getTime();
         let renderedTimeSlots = {}; // Object to store rendered slots for each table capacity
+        let renderedTimeSlots = {};
+        return tablesList.flatMap(table => {
+            // Render capacity header when encountering a new capacity
+        if (tablesList.length === 0) {
+            return <p>No tables available for reservations at this restaurant.</p>;
+        }
+        return tablesList.flatMap((table) => {
+            const tableTimeSlots = generateTimeSlots(restaurant.operatingHours);
             if (!renderedTimeSlots[table.capacity]) {
                 renderedTimeSlots[table.capacity] = 0;
                 return (
                     <div key={table.capacity}>
                         <h3>Table for: {table.capacity}</h3>
                         {table.timeSlots.map((timeSlot, index) => {
+                        <h3>Table for {table.capacity} guests</h3>
+                        {tableTimeSlots.map((timeSlot, index) => {
                             const timeSlotTime = new Date(timeSlot).getTime();
-                            const tableCapacity = table.capacity;
+                            // Check if the time slot is after the current time and limit to 3 slots
+                            if (timeSlotTime > currentTime && renderedTimeSlots[tableCapacity] < 3) {
+                                renderedTimeSlots[tableCapacity]++;
+                            if (timeSlotTime > currentTime && renderedTimeSlots[table.capacity] < 3) {
+                                renderedTimeSlots[table.capacity]++;
                                 const timeSlotDateTime = new Date(timeSlot);
+                                const formattedTime = timeSlotDateTime.toLocaleTimeString();
+                                const formattedDateTime = timeSlotDateTime.toLocaleString(); // Format for both date and time
+                                const formattedTime = timeSlotDateTime.toLocaleTimeString([], {
+                                    hour: '2-digit',
+                                    minute: '2-digit'
+                                });
                                 return (
+                                    <button key={index} className="btn btn-primary me-2 mb-2" onClick={() => handleTimeSlotClick(table, timeSlot, restaurant)}>
+                                        {formattedDateTime} {/* Display both date and time */}
+                                    <button
+                                        key={index}
+                                        className="btn btn-primary me-2 mb-2"
+                                        onClick={() => handleTimeSlotClick(table, timeSlot, restaurant)}
+                                    >
+                                        {formattedTime} {}
                                     </button>
                                 );
                             } else {
                                 return null; // Render nothing if the condition is not met
+                                return null;
+                            }
                         })}
 …
                 );
             } else {
-                // If capacity has been rendered, return null to avoid duplicate rendering
                 return null;
+            }
         });
+    }
+    };
     return (
 …
             <div className="row">
                 {restaurants.map((restaurant) => (
                     <div key={restaurant.id} className="col-md-4 mb-4">
+                    <div key={restaurant.restaurantId} className="col-md-4 mb-4">
                         <div className="card">
                             <div className="card-body">
                                 <h5 className="card-title">
                                     {restaurant.name} <StarRating key={restaurant.id} rating={restaurant.rating}/>
+                                    {restaurant.name}
                                 </h5>
                                 <p className="card-text">{restaurant.cuisineType}</p>
                                 <p className="card-text">{restaurant.operatingHours}</p>
                                 <p className="card-text">Ul. {restaurant.address}</p>
+                                <div className="d-flex flex-wrap">
+                                    {renderTimeSlots(restaurant.tablesList.flatMap((table) => table), restaurant)}
+                                </div>
+                                {restaurant.tablesList && restaurant.tablesList.length > 0 ? (
+                                    <div className="d-flex flex-wrap">
+                                        {renderTimeSlots(restaurant.tablesList, restaurant)}
+                                    </div>
+                                ) : (
+                                    <p>No tables available for reservations at this restaurant.</p>
+                                )}
                             </div>
                             <button onClick={() => handleDetailClick(restaurant.restaurantId)}
                                     className="btn btn-primary">View Details
+                            <button onClick={() => handleDetailClick(restaurant.restaurantId)} className="btn btn-primary">
+                                View Details
                             </button>
                         </div>

Context Navigation

Legend:

my-react-app/package-lock.json

my-react-app/package.json

my-react-app/src/App.js

my-react-app/src/axios_helper.js

my-react-app/src/components/AppContent.js

my-react-app/src/components/AuthContent.js

my-react-app/src/components/Header.js

my-react-app/src/components/Login.js

my-react-app/src/components/ReservationConfirmation.js

my-react-app/src/components/ReservationEdit.js

my-react-app/src/components/ReservationHistory.js

my-react-app/src/components/Reservations.js

my-react-app/src/components/RestaurantContext.js

my-react-app/src/components/RestaurantDetails.js

my-react-app/src/components/Restaurants.js

Download in other formats: