Changeset e35d0e9 for my-react-app/src

Timestamp:

03/03/24 20:18:46 (15 months ago)

Author:

Aleksandar Panovski <apano77@…>

Branches:

main

Children:

a7d40aa

Parents:

9293100

Message:

RetaurantServiceImpl problemi
isAvailable od tableEntity...

Location:

my-react-app/src

Files:

• App.js (modified) (6 diffs)
• components/ReservationConfirmation.js (modified) (1 diff)

my-react-app/src/App.js

@@ -1 @@
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import {BrowserRouter as Router, Route, Routes, useNavigate} from 'react-router-dom';
 import Customers from './components/Customers';
 import Layout from "./components/Layout";
@@ -39 +39 @@
 
 const Home = () => {
+    const navigate = useNavigate();
+
     const todayDate = new Date().toISOString().split('T')[0]; // Get today's date in 'YYYY-MM-DD' format
 
     const [date, setDate] = useState(todayDate);
     const [selectedTime, setSelectedTime] = useState('');
-    const [formatedDateTime, setFormatedDateTime] = useState('')
     const [numPeople, setNumPeople] = useState(2);
     const [searchValue, setSearchValue] = useState('');
     const [timeSlots, setTimeSlots] = useState([]);
-
     let [filteredRestaurants, setFilteredRestaurants] = useState([]);
+
     const cuisineTypes = useContext(CuisineContext);
     const [showCuisineSearch, setShowCuisineSearch] = useState(true);
+
+    const [formatedDateTime, setFormatedDateTime] = useState('')
 
     useEffect(() => {
@@ -165 +168 @@
     };
 
+    const handleTimeSlotClick = (table, timeSlot, restaurant) => {
+        const tableNumber = table.id;
+        const formattedTimeSlot = timeSlot;
+        const restaurantId = restaurant.restaurantId;
+
+        const encodedTableNumber = encodeURI(tableNumber);
+        const encodedTimeSlot = encodeURIComponent(formattedTimeSlot);
+        const encodedRestaurantId = encodeURIComponent(restaurantId);
+
+        navigate(`/reservationConfirmation/${encodedTableNumber}/${encodedTimeSlot}/${encodedRestaurantId}`);
+    }
+
     const renderTimeSlots = (tablesList, restaurant) => {
         const [year, month, day] = date.split("-");
@@ -179 +194 @@
         return tablesList.flatMap(table => {
             // Render capacity header when encountering a new capacity
-            if (!renderedTimeSlots[table.capacity]) {
+            if (!renderedTimeSlots[table.capacity] && numPeople <= table.capacity) {
                 renderedTimeSlots[table.capacity] = 0;
                 return (
@@ -185 +200 @@
                         <h3>Table for: {table.capacity}</h3>
                         {table.timeSlots.map((timeSlot, index) => {
-                            const timeSlotTime = new Date(timeSlot).getTime();
+                            let timeSlotTime = new Date(timeSlot).getTime();
+
                             const tableCapacity = table.capacity;
                             // Check if the time slot is after the current time, numPeople is less than or equal to tableCapacity, and limit to 5 slots
-                            if (timeSlotTime > timestamp && numPeople <= tableCapacity && renderedTimeSlots[tableCapacity] < 5) {
+                            if (timeSlotTime >= timestamp && numPeople <= tableCapacity && renderedTimeSlots[tableCapacity] < 5) {
                                 renderedTimeSlots[tableCapacity]++;
                                 const timeSlotDateTime = new Date(timeSlot);
@@ -259 +275 @@
                 </div>
 
-                <div>
+                <div className="border-0">
                     {filteredRestaurants.map((restaurant) => (
                         <div key={restaurant.id} className="card mb-3">

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

@@ -114 +114 @@
                                 <button type="submit" className="btn btn-primary">Submit</button>
                             </div>
-                            <div className="col-md-6">
-                                <a href="/restaurants" className="btn btn-primary">Back to Home</a>
+                            <div className="card-footer">
+                                <a href="/restaurants" className="btn btn-primary">Back to Restaurants</a>
+                            </div>
+                            <div className="card-footer">
+                                <a href="/" className="btn btn-primary">Back to Home</a>
                             </div>
                         </form>