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

Timestamp:

05/07/25 18:34:01 (10 days ago)

Author:

Aleksandar Panovski <apano77@…>

Branches:

main

Parents:

b67dfd3

Message:

Final version for DB

File:

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

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

@@ -30 +30 @@
                 setIsLoading(true);
                 const response = await axios.get(`http://localhost:8081/api/reservations/${reservationId}`);
-                console.log(response)
                 setCheckInTime(response.data.reservationDateTime);
                 setFormData(response.data);
-                setRestaurant(response.data.restaurantName);
+
                 setRestaurantId(response.data.restaurantId);
+                const restaurantResponse = await axios.get(`http://localhost:8081/api/restaurants/${response.data.restaurantId}`);
+                setRestaurant(restaurantResponse.data);
 
                 setTableNumber(response.data.tableNumber);
@@ -45 +46 @@
             }
         };
-
         fetchReservation();
     }, [reservationId]);
@@ -64 +64 @@
         }
     }, [table]);
-
-    const generateTimeOptions = (operatingHours) => {
-        const now = new Date();
-        const selectedDateObj = new Date(selectedDate);
-
-        const { startTime, endTime } = parseOperatingHours(operatingHours, selectedDateObj);
-
-        const isToday = selectedDateObj.toDateString() === now.toDateString();
-
-        let currentTime;
-
-        if (isToday) {
-            const roundedNow = roundToNext15Minutes(now);
-
-            if (roundedNow < startTime) {
-                currentTime = startTime;
-            } else if (roundedNow > endTime) {
-                return [];
-            } else {
-                currentTime = roundedNow;
-            }
-        } else {
-            currentTime = startTime;
-        }
-
-        const options = [];
-        while (currentTime <= endTime) {
-            options.push(currentTime.toTimeString().slice(0, 5));
-            currentTime = new Date(currentTime.getTime() + 15 * 60 * 1000);
-        }
-
-        return options;
-    };
-
-    const roundToNext15Minutes = (date) => {
-        const ms = 1000 * 60 * 15;
-        return new Date(Math.ceil(date.getTime() / ms) * ms);
-    };
 
     useEffect(() => {
@@ -178 +140 @@
     const formattedDate = `${year}-${month}-${day}`;
 
-    const parseOperatingHours = (operatingHours, forDate) => {
-        const [start, end] = operatingHours.split('-');
-
-        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 };
-    };
-
-    useEffect(() => {
-        if (formData?.restaurant?.operatingHours && selectedDate) {
-            const options = generateTimeOptions(formData.restaurant.operatingHours);
+    const generateTimeOptions = (operatingHours) => {
+        const now = new Date();
+        const selectedDateObj = new Date(selectedDate);
+        const isToday = selectedDateObj.toDateString() === now.toDateString();
+
+        let options = [];
+        for (const hours of operatingHours.split(',')) {
+            const [start, end] = hours.trim().split('-');
+            const startTime = new Date(selectedDateObj);
+            const endTime = new Date(selectedDateObj);
+            const [startHour, startMinute] = start.split(':').map(Number);
+            const [endHour, endMinute] = end.split(':').map(Number);
+            startTime.setHours(startHour, startMinute, 0);
+            endTime.setHours(endHour, endMinute, 0);
+
+            if (isToday && startTime < now) {
+                startTime.setTime(roundToNext15Minutes(now).getTime());
+            }
+
+            if (endTime <= now) {
+                setNoAvailableMessage('No available time due to closing.');
+                continue;
+            }
+
+            while (startTime <= endTime) {
+                options.push(startTime.toTimeString().slice(0, 5));
+                startTime.setMinutes(startTime.getMinutes() + 15);
+            }
+        }
+
+        return options.length ? options : ['No available time'];
+    };
+
+    const roundToNext15Minutes = (date) => {
+        const ms = 1000 * 60 * 15;
+        const roundedTime = new Date(Math.ceil(date.getTime() / ms) * ms);
+
+        if (roundedTime.getTime() === date.getTime()) {
+            roundedTime.setMinutes(roundedTime.getMinutes() + 15);
+        }
+
+        return roundedTime;
+    };
+
+    useEffect(() => {
+        if (restaurant?.operatingHours && selectedDate) {
+            const options = generateTimeOptions(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 (
@@ -217 +201 @@
                     <div className="card-body">
                         <h2 className="card-title">
-                            {formData.restaurant.name} <StarRating key={formData.restaurant.id} rating={formData.restaurant.rating} />
+                            {restaurant?.name}
+                            <StarRating key={restaurant?.id} rating={restaurant?.rating || 0}/>
                         </h2>
-                        <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 />
+                        <p className="card-text">Operating Hours: {restaurant?.operatingHours}</p>
+                        <p className="card-text">Address: Ul. {restaurant?.address}</p>
+                        <br/>
                     </div>
                     <form onSubmit={handleSubmit}>