Changeset f5b256e for my-react-app/src/components/RestaurantDetails.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/RestaurantDetails.js (modified) (5 diffs)

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

@@ -6 +6 @@
 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(() => {
@@ -32 +33 @@
 
     useEffect(() => {
-        if (!selectedTableId) return; // If no table is selected, return early
+        if (!selectedTableId) return;
 
         const fetchTableDetails = async () => {
@@ -46 +47 @@
     }, [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 (
@@ -91 +118 @@
                 <>
                     <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">
@@ -98 +125 @@
                         <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>