Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixing order status #91

Merged
merged 1 commit into from
Jul 3, 2024
Merged

Fixing order status #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
353 changes: 353 additions & 0 deletions public/order.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading
Loading