Changeset e15e8d9 for my-react-app/src/components

Timestamp:

04/30/25 18:24:41 (2 weeks ago)

Author:

Aleksandar Panovski <apano77@…>

Branches:

main

Children:

2518b3a

Parents:

deea3c4

Message:

menu feature done

Location:

my-react-app/src/components

Files:

• MenuList.js (added)
• ReservationConfirmation.js (modified) (5 diffs)
• ReservationEdit.js (modified) (3 diffs)
• Reservations.js (modified) (2 diffs)
• RestaurantDetails.js (modified) (4 diffs)
• RestaurantInfo.js (modified) (2 diffs)

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

@@ -3 +3 @@
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
-import {jwtDecode} from "jwt-decode";
+import { useLocation } from 'react-router-dom';
+import { jwtDecode } from "jwt-decode";
 import {request} from "../axios_helper";
 import restaurants from "./Restaurants";
@@ -10 +11 @@
     const navigate = useNavigate();
 
+    const location = useLocation();
+    const preOrderedItems = location.state?.preOrderedItems || [];
     const [restaurant, setRestaurant] = useState({});
     const [user, setUser] = useState({});
@@ -59 +62 @@
             specialRequests: specialRequests.trim(),
             paymentStatus: 'Pending',
+            preOrderedItems: preOrderedItems.map(item => `${item.itemName}:${item.quantity}:${item.price}`)
         };
 
@@ -117 +121 @@
         return `${formattedDate} - ${formattedTime}`;
     };
+
+    const grandTotal = preOrderedItems.reduce((acc, item) => acc + item.price * item.quantity, 0).toFixed(2);
+    const itemQuantityString = preOrderedItems
+        .map(item => `${item.itemName}:${item.quantity}`)
+        .join(',');
 
     return (
@@ -156 +165 @@
                                     <br />
                                 </p>
+                                {preOrderedItems.length > 0 ? (
+                                    <div className="row">
+                                        {preOrderedItems.map((item) => (
+                                            <div key={item.menuID} className="col-md-4 mb-4">
+                                                <div className="list-group shadow-sm p-3">
+                                                    <p className="item"><strong>Item:</strong> {item.itemName}</p>
+                                                    <p className="item"><strong>Price:</strong> ${item.price.toFixed(2)}</p>
+                                                    <p className="item"><strong>Quantity:</strong> {item.quantity}</p>
+                                                    <p className="item"><strong>Total:</strong> ${(item.price * item.quantity).toFixed(2)}</p>
+                                                </div>
+                                            </div>
+                                        ))}
+
+                                        <div className="col-12 mt-4">
+                                            <div className="list-group shadow-sm p-4 text-center">
+                                                <h4>Grand Total: ${grandTotal}</h4>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ) : (
+                                    <p>No pre-ordered items.</p>
+                                )}
                             </div>
                             <div className="card-footer">

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

@@ -65 +65 @@
     }, [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 { startTime, endTime } = parseOperatingHours(operatingHours, selectedDateObj);
+
         const isToday = selectedDateObj.toDateString() === now.toDateString();
-        const isTomorrow = selectedDateObj > now && selectedDateObj.getDate() === now.getDate() + 1;
 
         let currentTime;
 
         if (isToday) {
-            currentTime = roundToNext15Minutes(new Date());
+            const roundedNow = roundToNext15Minutes(now);
+
+            if (roundedNow < startTime) {
+                currentTime = startTime;
+            } else if (roundedNow > endTime) {
+                return [];
+            } else {
+                currentTime = roundedNow;
+            }
         } else {
-            currentTime = new Date(startTime);
+            currentTime = startTime;
         }
 
@@ -111 +98 @@
     };
 
-    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 roundToNext15Minutes = (date) => {
+        const ms = 1000 * 60 * 15;
+        return new Date(Math.ceil(date.getTime() / ms) * ms);
+    };
+
+    useEffect(() => {
+        if (table?.restaurant?.operatingHours && selectedDate) {
+            const options = generateTimeOptions(table.restaurant.operatingHours);
+            setTimeOptions(options);
+        }
+    }, [table, selectedDate]);
+
 
     const handleInputChange = (e) => {
@@ -189 +178 @@
     const formattedDate = `${year}-${month}-${day}`;
 
-    const parseOperatingHours = (operatingHours) => {
+    const parseOperatingHours = (operatingHours, forDate) => {
         const [start, end] = operatingHours.split('-');
-        return {
-            startTime: new Date(`1970-01-01T${start}:00`),
-            endTime: new Date(`1970-01-01T${end}:00`)
-        };
+
+        const [startHour, startMinute] = start.split(':').map(Number);
+        const [endHour, endMinute] = end.split(':').map(Number);
+
+        const startTime = new Date(forDate);
+        startTime.setHours(startHour, startMinute, 0, 0);
+
+        const endTime = new Date(forDate);
+        endTime.setHours(endHour, endMinute, 0, 0);
+
+        return { startTime, endTime };
     };
 

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

@@ -24 +24 @@
                 const response = await axios.get(`http://localhost:8081/api/reservations/by/${userId}`);
                 setReservations(response.data);
+                console.log(response.data)
             } catch (error) {
                 console.error('Error fetching reservations:', error);
@@ -88 +89 @@
                                         "Not specified"} </p>
                                     <p className="card-text">Party Size: {reservation.partySize || "Not specified"}</p>
+                                    {reservation.preOrderedItems && reservation.preOrderedItems.length > 0 ? (
+                                        <div className="mt-3">
+                                            <h5 className="text-primary">Pre-Ordered Items:</h5>
+                                            <ul className="list-group mb-3">
+                                                {reservation.preOrderedItems.map((itemStr, index) => {
+                                                    const parts = itemStr.split(':');
+                                                    const name = parts[0];
+                                                    const quantity = parseInt(parts[1], 10) || 0;
+                                                    const price = parseFloat(parts[2]) || 0;
+
+                                                    return (
+                                                        <li key={index} className="list-group-item d-flex justify-content-between align-items-center">
+                                                            <span><strong>{name}</strong> × {quantity}</span>
+                                                            <span className="badge bg-success rounded-pill">${(price * quantity).toFixed(2)}</span>
+                                                        </li>
+                                                    );
+                                                })}
+                                            </ul>
+
+                                            <div className="alert alert-info text-center" role="alert">
+                                                <h5>Grand Total: ${reservation.preOrderedItems.reduce((acc, itemStr) => {
+                                                    const parts = itemStr.split(':');
+                                                    const quantity = parseInt(parts[1], 10) || 0;
+                                                    const price = parseFloat(parts[2]) || 0;
+                                                    return acc + (quantity * price);
+                                                }, 0).toFixed(2)}</h5>
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <p>No pre-ordered items.</p>
+                                    )}
                                     <p className="card-text text-danger">Special Requests: {reservation.specialRequests || "None"}</p>
                                     <p className="card-text">Status: {reservation.status || "Pending"}</p>

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

@@ -5 +5 @@
 import { useParams } from 'react-router-dom';
 import StarRating from "./StarRating";
+import MenuList from "./MenuList";
 
 
@@ -10 +11 @@
     const navigate = useNavigate();
     const { id } = useParams();
+    const [preOrderedItems, setPreOrderedItems] = useState([]);
 
     const [restaurant, setRestaurant] = useState(null);
@@ -100 +102 @@
         const encodedRestaurantId = encodeURIComponent(restaurant.restaurantId);
 
-        navigate(`/reservationConfirmation/${encodedTableId}/${encodedDateTime}/${encodedRestaurantId}`);
-    };
+        const totalPrice = preOrderedItems.reduce((acc, item) => acc + item.price * item.quantity, 0).toFixed(2);
+
+        navigate(`/reservationConfirmation/${encodedTableId}/${encodedDateTime}/${encodedRestaurantId}`, {
+            state: {
+                preOrderedItems: preOrderedItems,
+                totalPrice: totalPrice,
+            }
+        });
+    };
+
 
     const roundToNext15Minutes = (date) => {
@@ -174 +184 @@
                             </>
                         )}
-
+                        <MenuList
+                            restaurantId={restaurant.restaurantId}
+                            setPreOrderedItems={setPreOrderedItems}
+                            preOrderedItems={preOrderedItems}
+                        />
                         <br />
                         <button
                             className="btn btn-primary"
                             onClick={handleReservationConfirmation}
-                            disabled={!selectedTableId || !selectedDate || !selectedTime}
-                        >
+                            disabled={!selectedTableId || !selectedDate || !selectedTime}>
                             Confirm Reservation
                         </button>

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

@@ -1 +1 @@
 import React from 'react';
 import StarRating from "./StarRating";
+import MenuList from "./MenuList";
 
 const RestaurantInfo = ({ restaurant }) => {
@@ -8 +9 @@
                 {restaurant.name} <StarRating key={restaurant.id} rating={restaurant.rating}/>
             </h2>
-            <p className="card-text">{restaurant.cuisineType}</p> {/* Assuming cuisineType is provided */}
-            <p className="card-text">{restaurant.operatingHours}</p> {/* Assuming operatingHours is provided */}
-            <p className="card-text">Ul. {restaurant.address}</p> {/* Assuming address is provided */}
+            <p className="card-text">{restaurant.cuisineType}</p>
+            <p className="card-text">{restaurant.operatingHours}</p>
+            <p className="card-text">Ul. {restaurant.address}</p>
+            <MenuList restaurantId={restaurant.id} />
         </div>
     );