Project Round 9

controllers/tourController.js

@@ -293,7 +293,7 @@ exports.getUserBookings = async (req, res) => {
   console.log("Fetching bookings for user:", userId);
   try {
     const query = `
-      SELECT b.id AS booking_id, t.name AS tour_name, u.name AS user_name
+      SELECT t.name AS tour_name, u.name AS user_name
       FROM bookings b
       JOIN tours t ON b.tour_id = t.id
       JOIN users u ON b.user_id = u.id
@@ -343,14 +343,27 @@ exports.createBooking = async (req, res) => {
   }
 };
 
-// ยกเลิกการจอง
-exports.cancelBooking = (req, res) => {
+// แก้ไขการจอง (แสดงฟอร์ม)
+exports.getEditBooking = async (req, res) => {
   const bookingId = req.params.id;
-  bookingModel.cancelBooking(bookingId, (err, result) => {
-    if (err) return res.status(500).json({ error: err.message });
-    if (result.affectedRows === 0) {
-      return res.status(404).json({ message: 'Booking not found' });
+  try {
+    const booking = await Booking.findById(bookingId);
+    if (!booking) {
+      return res.status(404).send('Booking not found');
     }
-    res.status(200).json({ message: 'Booking canceled successfully' });
-  });
+    res.render('edit-booking', { booking });
+  } catch (err) {
+    res.status(500).send('Error fetching booking details');
+  }
+};
+
+// ลบการจอง
+exports.deleteBooking = async (req, res) => {
+  const bookingId = req.params.id;
+  try {
+    await Booking.deleteOne({ _id: bookingId });
+    res.redirect('/bookings');
+  } catch (err) {
+    res.status(500).send('Error deleting booking');
+  }
 };
\ No newline at end of file

models/tourModel.js

@@ -154,30 +154,36 @@ class Booking {
       WHERE b.user_id = ?
       ORDER BY b.id ASC
     `;
-    const [rows] = await pool.query(query, [userId]);
-    return rows;
+    try {
+      const [rows] = await pool.query(query, [userId]);
+      return rows;  // คืนค่ารายการจองทั้งหมด
+    } catch (error) {
+      console.error('Error fetching user bookings:', error);
+      throw new Error('Unable to retrieve user bookings');
+    }
   }
 
   // ทำการจองทัวร์
   static async createBooking(userId, tourId) {
     const query = 'INSERT INTO bookings (user_id, tour_id) VALUES (?, ?)';
     try {
-      await pool.execute(query, [userId, tourId]);
+      const [result] = await pool.execute(query, [userId, tourId]);
+      return result;  // คืนค่าผลลัพธ์จากการจอง
     } catch (error) {
       console.error('Error creating booking:', error);
       throw new Error('Error creating booking');
     }
   }
 
-
-  // ยกเลิกการจอง
-  static async cancelBooking(userId, bookingId) {
-    const query = 'DELETE FROM bookings WHERE id = ? AND user_id = ?';
+  // ลบการจอง
+  static async deleteBooking(bookingId) {
+    const query = 'DELETE FROM bookings WHERE id = ?';
     try {
-      const [result] = await pool.execute(query, [bookingId, userId]);
-      return result.affectedRows;
+      const [result] = await pool.execute(query, [bookingId]);
+      return result;  // คืนค่าผลลัพธ์จากการลบการจอง
     } catch (error) {
-      throw new Error('เกิดข้อผิดพลาดในการยกเลิกการจอง');
+      console.error('Error deleting booking:', error);
+      throw new Error('Error deleting booking');
     }
   }
 }

public/css/booklist.css

@@ -39,23 +39,49 @@ body {
     background-color: #f1f1f1;
   }
   
-  .btn-edit {
+/* ปุ่ม Edit */
+.btn-edit {
     display: inline-block;
-    margin-top: 20px;
-    padding: 10px 20px;
-    background: #17a2b8; /* สีฟ้าอ่อน */
+    padding: 8px 15px;
+    background-color: #17a2b8; /* สีฟ้า */
     color: white;
     text-decoration: none;
     border-radius: 5px;
     font-weight: bold;
-    font-size: 16px;
   }
   
   .btn-edit:hover {
-    background: #138496; /* สีฟ้าเข้มเมื่อ hover */
+    background-color: #138496;
+  }
+  
+  /* ปุ่ม Delete */
+  .btn-delete {
+    display: inline-block;
+    padding: 8px 15px;
+    background-color: #dc3545; /* สีแดง */
+    color: white;
+    text-decoration: none;
+    border-radius: 5px;
+    font-weight: bold;
+  }
+  
+  .btn-delete:hover {
+    background-color: #c82333;
+  }
+  
+  /* ปุ่มย้อนกลับ */
+  .btn-back {
+    display: inline-block;
+    margin-top: 20px;
+    padding: 10px 20px;
+    background: #6c757d; /* สีเทา */
+    color: white;
+    text-decoration: none;
+    border-radius: 5px;
+    font-weight: bold;
   }
   
-  .btn-edit:active {
-    background: #117a8b; /* สีฟ้าเข้มสุดเมื่อคลิก */
+  .btn-back:hover {
+    background: #5a6368;
   }
   
\ No newline at end of file

routes/tourRoutes.js

@@ -37,5 +37,7 @@ router.get('/bookinglist', tourController.getUserBookings);
 router.get('/create-booking', tourController.getAllTours);
 router.post('/create-booking', tourController.createBooking);
 router.post('/cancel/:id', tourController.cancelBooking);
+router.get('/edit-booking/:id', tourController.getEditBooking);
+router.get('/delete-booking/:id', tourController.deleteBooking);
 
 module.exports = router;

views/bookinglist.ejs

@@ -3,29 +3,32 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>bookinglist</title>
+  <title>Booking List</title>
   <link rel="stylesheet" href="/css/booklist.css">
 </head>
 <body>
-  <h1>bookinglist</h1>
+  <h1>Booking List</h1>
   <table border="1">
     <thead>
       <tr>
-        <th>Booking ID</th>
         <th>Booking User</th>
         <th>Tour Title</th>
+        <th>Actions</th> 
       </tr>
     </thead>
     <tbody>
       <% bookings.forEach(booking => { %>
         <tr>
-          <td><%= booking.booking_id %></td> <!-- booking_id -->
           <td><%= booking.user_name %></td> <!-- ชื่อผู้จอง --> 
           <td><%= booking.tour_name %></td> <!-- tour_title --> 
+          <td>
+            <a href="/edit-booking/<%= booking.booking_id %>" class="btn-edit">Edit</a> <!-- ปุ่มแก้ไข -->
+            <a href="/delete-booking/<%= booking.booking_id %>" class="btn-delete">Delete</a> <!-- ปุ่มลบ -->
+          </td>
         </tr>
       <% }) %>
     </tbody>
   </table>
-  <a href="/" class="btn-back">ย้อนกลับ</a>
+  <a href="/" class="btn-back">Back</a>
 </body>
 </html>