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

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

@@ -4 +4 @@
 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 = () => {
@@ -14 +31 @@
     }, [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) => {
@@ -23 +64 @@
         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;
                             }
                         })}
@@ -64 +114 @@
                 );
             } else {
-                // If capacity has been rendered, return null to avoid duplicate rendering
                 return null;
             }
         });
-
-    }
-
+    };
 
     return (
@@ -77 +124 @@
             <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>