Merge pull request #91 from atlp-rwanda/fixing-order-status

Fixing order status
atlp-rwanda · Jul 3, 2024 · b895339 · b895339
2 parents fe09130 + ba1593c
commit b895339
Show file tree

Hide file tree

Showing 9 changed files with 1,053 additions and 1 deletion.
diff --git a/public/order.html b/public/order.html
@@ -0,0 +1,353 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Order Status</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f4f4f4;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        flex-direction: column;
+      }
+
+      #orderStatusContainer {
+        background-color: #fff;
+        padding: 2rem;
+        border-radius: 0.5rem;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        text-align: center;
+        display: none;
+      }
+
+      #loginForm {
+        background-color: #fff;
+        padding: 2rem;
+        border-radius: 0.5rem;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        text-align: center;
+      }
+
+      input[type='email'],
+      input[type='password'] {
+        width: 100%;
+        padding: 0.5rem;
+        margin-bottom: 1rem;
+        border: 1px solid #ccc;
+        border-radius: 0.25rem;
+      }
+
+      button {
+        background-color: #007bff;
+        color: white;
+        padding: 0.5rem 1rem;
+        border: none;
+        border-radius: 0.25rem;
+        cursor: pointer;
+      }
+
+      button:hover {
+        background-color: #0056b3;
+      }
+
+      .orderContainer {
+        border: 1px solid red;
+        width: 100vw;
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+
+      th,
+      td {
+        padding: 0.5rem;
+        text-align: left;
+        border-bottom: 1px solid #ddd;
+      }
+
+      th {
+        background-color: #f2f2f2;
+      }
+
+      tr:hover {
+        background-color: #f9f9f9;
+      }
+
+      .dialog {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: #f9f9f9;
+        padding: 20px;
+        border-radius: 5px;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+        z-index: 999;
+        display: none;
+      }
+
+      .confirm-button,
+      .cancel-button,
+      .close-button {
+        background-color: #007bff;
+        color: white;
+        padding: 0.5rem 1rem;
+        border: none;
+        border-radius: 0.25rem;
+        cursor: pointer;
+        margin-right: 10px;
+      }
+
+      .confirm-button:hover {
+        background-color: #0056b3;
+      }
+
+      .cancel-button,
+      .close-button {
+        background-color: #ccc;
+      }
+
+      .cancel-button:hover,
+      .close-button:hover {
+        background-color: #999;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="loginForm">
+      <h1>Login</h1>
+      <input type="email" id="email" placeholder="Email" required />
+      <input type="password" id="password" placeholder="Password" required />
+      <button id="login">Login</button>
+    </div>
+
+    <div id="orderStatusContainer" class="orderContainer">
+      <h1>Order Status</h1>
+      <table id="ordersTable">
+        <thead>
+          <tr>
+            <th>Select</th>
+            <th>Order ID</th>
+            <th>Status</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody id="ordersTableBody"></tbody>
+      </table>
+    </div>
+
+    <div id="confirmCancelDialog" class="dialog">
+      <p id="confirmCancelMessage"></p>
+      <button id="confirmCancelButton" class="confirm-button">Cancel Order</button>
+      <button id="cancelButton" class="cancel-button">Cancel</button>
+    </div>
+
+    <div id="cancelResultDialog" class="dialog">
+      <p id="cancelResultMessage"></p>
+      <button id="closeCancelResultButton" class="close-button">Close</button>
+    </div>
+    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
+    <script>
+      const checkStatus = async orderId => {
+        const token = localStorage.getItem('Token');
+        const response = await fetch(`http://localhost:8080/api/orders/${orderId}/check-status`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': token,
+          },
+        });
+        return await response.json();
+      };
+
+      const cancelOrder = async orderId => {
+        const token = localStorage.getItem('Token');
+        const confirmCancelDialog = document.getElementById('confirmCancelDialog');
+        const confirmCancelMessage = document.getElementById('confirmCancelMessage');
+        const confirmCancelButton = document.getElementById('confirmCancelButton');
+        const cancelButton = document.getElementById('cancelButton');
+        const cancelResultDialog = document.getElementById('cancelResultDialog');
+        const cancelResultMessage = document.getElementById('cancelResultMessage');
+        const closeCancelResultButton = document.getElementById('closeCancelResultButton');
+
+        confirmCancelMessage.textContent = `Are you sure you want to cancel order ${orderId}?`;
+        confirmCancelDialog.style.display = 'block';
+
+        confirmCancelButton.addEventListener('click', async () => {
+          confirmCancelDialog.style.display = 'none';
+          try {
+            const response = await fetch(`http://localhost:8080/api/orders/${orderId}/cancel`, {
+              method: 'PUT',
+              headers: {
+                'Content-Type': 'application/json',
+                'Authorization': token,
+              },
+            });
+            if (!response.ok) {
+              throw new Error(`API request failed with status ${response.status}`);
+            }
+            const data = await response.json();
+            cancelResultMessage.textContent = data.message;
+            cancelResultDialog.style.display = 'block';
+          } catch (error) {
+            console.error(error);
+            cancelResultMessage.textContent = 'An error occurred while canceling the order.';
+            cancelResultDialog.style.display = 'block';
+          }
+        });
+
+        cancelButton.addEventListener('click', () => {
+          confirmCancelDialog.style.display = 'none';
+        });
+
+        closeCancelResultButton.addEventListener('click', () => {
+          cancelResultDialog.style.display = 'none';
+        });
+      };
+
+      const sellerChangeStatus = async orderId => {
+        const token = localStorage.getItem('Token');
+        const response = await fetch(`http://localhost:8080/api/orders/${orderId}/seller-change-status`, {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': token,
+          },
+        });
+        return await response.json();
+      };
+
+      const getAllOrders = async () => {
+        const token = localStorage.getItem('Token');
+        try {
+          const response = await fetch('http://localhost:8080/api/orders', {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/json',
+              'authorization': token,
+            },
+          });
+          const data = await response.json();
+
+          if (Array.isArray(data.data)) {
+            populateOrdersTable(data.data);
+          }
+        } catch (error) {
+          console.log(error);
+        }
+      };
+
+      const populateOrdersTable = orders => {
+        try {
+          const ordersTableBody = document.getElementById('ordersTableBody');
+          ordersTableBody.innerHTML = '';
+
+          orders.forEach(order => {
+            console.log(order);
+            const row = document.createElement('tr');
+            row.innerHTML = `
+            <td><input type="radio" name="order" value="${order.id}"></td>
+            <td>${order.id}</td>
+            <td>${order.status}</td>
+            <td>
+              <button class="checkStatusButton">Check Status</button>
+              <button class="cancelOrderButton">Cancel Order</button>
+            </td>
+          `;
+            ordersTableBody.appendChild(row);
+          });
+
+          addEventListenersToOrderButtons();
+        } catch (error) {
+          console.log(error);
+        }
+      };
+
+      const addEventListenersToOrderButtons = () => {
+        const checkStatusButtons = document.getElementsByClassName('checkStatusButton');
+        const cancelOrderButtons = document.getElementsByClassName('cancelOrderButton');
+
+        Array.from(checkStatusButtons).forEach(button => {
+          button.addEventListener('click', async () => {
+            const orderId = getSelectedOrderId();
+            const result = await checkStatus(orderId);
+            console.log(result);
+          });
+        });
+
+        Array.from(cancelOrderButtons).forEach(button => {
+          button.addEventListener('click', async () => {
+            const orderId = getSelectedOrderId();
+            await cancelOrder(orderId);
+          });
+        });
+      };
+
+      const getSelectedOrderId = () => {
+        const selectedOrderRadio = document.querySelector('input[name="order"]:checked');
+        return selectedOrderRadio ? selectedOrderRadio.value : null;
+      };
+
+      const loginToAccount = () => {
+        document.addEventListener('DOMContentLoaded', e => {
+          const email = document.querySelector('#email');
+          const password = document.getElementById('password');
+          const loginButton = document.getElementById('login');
+          const loginForm = document.getElementById('loginForm');
+          const orderStatusContainer = document.getElementById('orderStatusContainer');
+
+          loginButton.addEventListener('click', async e => {
+            e.preventDefault();
+            const response = await fetch('http://localhost:8080/api/auth/login', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                email: email.value,
+                password: password.value,
+              }),
+            });
+            const result = await response.json();
+            if (result.token) {
+              localStorage.setItem('Token', result.token);
+              loginForm.style.display = 'none';
+              orderStatusContainer.style.display = 'block';
+              getAllOrders();
+              establishSocketConnection()
+            }
+          });
+        });
+      };
+      const establishSocketConnection = () => {
+        const tokenValue = localStorage.getItem('Token');
+
+        if (tokenValue) {
+          const socket = io('http://localhost:8080', {
+            auth: {
+              token: tokenValue,
+            },
+          });
+          socket.on('orderStatusChanged', (data) => {
+            if (Array.isArray(data)) {
+            populateOrdersTable(data);
+            }else
+            {
+              console.log('Error in dispaying orders');
+              console.log(data)
+            }
+          }
+
+          );
+             }}
+
+      loginToAccount();
+      establishSocketConnection();
+    </script>
+  </body>
+</html>