Ignore:
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:
1 edited

Legend:

Unmodified
Added
Removed

  • my-react-app/src/components/Reservations.js

    r8ca35dc rf5b256e  
    2020                }
    2121                const decodedToken = jwtDecode(token);
    22                 console.log(decodedToken)
    2322                const userId = decodedToken.iss;
    2423
    … …  
    4948        }
    5049    };
    51 
    52 
    5350    return (
    5451        <div className="container">
    55             <h2>Reservations</h2>
    5652            <div className="row">
    57                 {reservations.map(reservation => (
    58                     <div key={reservation.reservationID} className="col-md-4 mb-4">
    59                         <div className="card">
    60                             <div className="card-body">
    61                                 <div className="card-title">Reservation ID: {reservation.reservationID}</div>
    62                                 <div className="card-text">Restaurant: {reservation.restaurant.name}</div>
    63                                 <div className="card-text">Table Number: {reservation.table.id}</div>
    64                                 {/* Format reservation date and time */}
    65                                 <div className="card-text">Reservation
    66                                     Date: {new Date(reservation.checkInTime).toLocaleDateString('en-US', {
    67                                         weekday: 'long',
    68                                         year: 'numeric',
    69                                         month: 'long',
    70                                         day: 'numeric'
    71                                     })}</div>
    72                                 <div className="card-text">Reservation
    73                                     Time: {new Date(reservation.checkInTime).toLocaleTimeString('en-US', {
    74                                         hour: 'numeric',
    75                                         minute: 'numeric',
    76                                         hour12: true
    77                                     })}</div>
    78                                 {/* End of formatted date and time */}
    79                                 <div className="card-text">Party Size: {reservation.partySize}</div>
    80                                 <div className="card-text text-danger">Special
    81                                     Requests: {reservation.specialRequests}</div>
    82                                 <div className="card-text">Status: {reservation.status}</div>
    83                                 <div className="card-text text-danger">Grace period of 15 minutes +-</div>
    84                                 <br/>
    85                                 <div className="row">
    86                                     <div className="col">
    87                                         <button className="danger text-bg-warning border-0"
    88                                                 onClick={() => handleEditReservation(reservation.reservationID)}>Edit
    89                                             Reservation
     53                {reservations.length === 0 ? (
     54                    <div className="text-center mt-5">
     55                        <h4>No active reservations</h4>
     56                        <p>Looking for a place to dine? Check out our <a href="/restaurants" className="text-primary">restaurants</a>.</p>
     57                    </div>
     58                ) : (
     59                    reservations.map(reservation => (
     60                        <div key={reservation.reservationID} className="col-md-4 mb-4">
     61                            <div className="card h-100">
     62                                <div className="card-body">
     63                                    <h5 className="card-title">Reservation ID: {reservation.reservationID}</h5>
     64                                    <p className="card-text">Restaurant: {reservation?.restaurant.name || "Not specified"}</p>
     65                                    <p className="card-text">Table Number: {reservation?.tableNumber || "Not specified"}</p>
     66                                    <p className="card-text">
     67                                        Reservation Date: {reservation.checkInTime ?
     68                                        new Date(reservation.checkInTime).toLocaleDateString('en-US', {
     69                                            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
     70                                        }) :
     71                                        "Not specified"}
     72                                    </p>
     73                                    <p className="card-text">
     74                                        Reservation Time: {reservation.checkInTime ?
     75                                        new Date(reservation.checkInTime).toLocaleTimeString('en-US', {
     76                                            hour: 'numeric', minute: 'numeric', hour12: true
     77                                        }) :
     78                                        "Not specified"}
     79                                    </p>
     80                                    <p className="card-text">Reservation made on: {reservation.reservationDateTime ?
     81                                        new Date(reservation.reservationDateTime).toLocaleTimeString('en-US', {
     82                                            hour: 'numeric', minute: 'numeric', hour12: true
     83                                        }) :
     84                                        "Not specified"}  {reservation.reservationDateTime ?
     85                                        new Date(reservation.reservationDateTime).toLocaleDateString('en-US', {
     86                                            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
     87                                        }) :
     88                                        "Not specified"} </p>
     89                                    <p className="card-text">Party Size: {reservation.partySize || "Not specified"}</p>
     90                                    <p className="card-text text-danger">Special Requests: {reservation.specialRequests || "None"}</p>
     91                                    <p className="card-text">Status: {reservation.status || "Pending"}</p>
     92                                    <p className="card-text text-danger">Grace period of 15 minutes +-</p>
     93                                    <div className="d-flex justify-content-between mt-3">
     94                                        <button
     95                                            className="btn btn-warning"
     96                                            onClick={() => handleEditReservation(reservation.reservationID)}>
     97                                            Edit Reservation
    9098                                        </button>
    91                                     </div>
    92                                     <div className="col">
    93                                         <button className="danger text-bg-danger border-0"
    94                                                 onClick={() => handleCancelReservation(reservation.reservationID)}>Cancel
    95                                             Reservation
     99                                        <button
     100                                            className="btn btn-danger"
     101                                            onClick={() => handleCancelReservation(reservation.reservationID)}>
     102                                            Cancel Reservation
    96103                                        </button>
    97104                                    </div>
    … …  
    99106                            </div>
    100107                        </div>
    101                     </div>
    102                 ))}
     108                    ))
     109                )}
    103110            </div>
    104111        </div>
    105112    );
    106     p
    107 
    108113};
    109114
    110115export default Reservations;
     116
Note: See TracChangeset for help on using the changeset viewer.