Changeset f5b256e for my-react-app/src/components/ReservationEdit.js

Timestamp:

04/28/25 14:20:18 (3 weeks ago)

Author:

Aleksandar Panovski <apano77@…>

Branches:

main

Children:

deea3c4

Parents:

8ca35dc

Message:

Big change done works with handle_reservation_update() trigger

File:

• my-react-app/src/components/ReservationEdit.js (modified) (7 diffs)

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

@@ -7 +7 @@
 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(() => {
@@ -22 +30 @@
                 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) {
@@ -32 +45 @@
             }
         };
+
         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) => {
@@ -68 +151 @@
 
             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);
@@ -86 +183 @@
     };
 
-    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>
             ) : (
@@ -101 +220 @@
                     <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>
@@ -139 +290 @@
         </div>
     );
-
 };