362 lines
13 KiB
HTML
362 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Computer Inventory</title>
|
|
<style>
|
|
|
|
h1, h2 {
|
|
text-align: center;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
th, td {
|
|
padding: 8px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #ddd;
|
|
border-right: 1px solid #ddd; /* Add border-right for separation */
|
|
}
|
|
th:last-child, td:last-child {
|
|
border-right: none; /* Remove border-right for last column */
|
|
}
|
|
tr:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.edit-button {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
padding: 4px 8px; /* Reduce padding */
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
}
|
|
.edit-button:hover {
|
|
background-color: #45a049;
|
|
}
|
|
.delete-button {
|
|
background-color: #f44336;
|
|
color: white;
|
|
padding: 4px 8px; /* Reduce padding */
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
}
|
|
.delete-button:hover {
|
|
background-color: #d32f2f;
|
|
}
|
|
.add-button {
|
|
background-color: #2196F3;
|
|
color: white;
|
|
padding: 4px 8px; /* Reduce padding */
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 18px; /* Reduce font size */
|
|
}
|
|
.add-button:hover {
|
|
background-color: #1976D2;
|
|
}
|
|
.computer-table-container {
|
|
width: 95vw;
|
|
padding: 16px;
|
|
background-color: #f2f2f2;
|
|
margin: 0 auto;
|
|
border-radius: 8px; /* Add rounded border */
|
|
}
|
|
.computer-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.computer-table th, .computer-table td {
|
|
padding: 8px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #ddd;
|
|
border-right: 1px solid #ddd; /* Add border-right for separation */
|
|
}
|
|
.computer-table th:last-child, .computer-table td:last-child {
|
|
border-right: none; /* Remove border-right for last column */
|
|
}
|
|
.computer-table tr:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.computer-table input[type="text"] {
|
|
width: 100%;
|
|
padding: 8px;
|
|
margin-bottom: 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
.form-container {
|
|
text-align: center; /* Center the form */
|
|
}
|
|
.form-container input[type="text"] {
|
|
width: 100%;
|
|
padding: 8px;
|
|
margin-bottom: 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Computer Inventory</h1>
|
|
<br>
|
|
<div class="computer-table-container">
|
|
<table class="computer-table">
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Brand</th>
|
|
<th>Model</th>
|
|
<th>Status</th>
|
|
<th>Date of entry</th>
|
|
<th>State</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</table>
|
|
<br>
|
|
<div class="form-container">
|
|
<input type="text" id="brand" name="brand" placeholder="Brand" required>
|
|
<input type="text" id="model" name="model" placeholder="Model" required>
|
|
<input type="text" id="status" name="status" placeholder="Status" required>
|
|
<input type="text" id="dateOfEntry" name="dateOfEntry" placeholder="Date of entry" required>
|
|
<input type="text" id="state" name="state" placeholder="State" required>
|
|
<button class="add-button" onclick="addComputer()">Add Computer</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function createTable() {
|
|
fetch(`http://localhost:3000/computer`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `${localStorage.getItem('token')}`
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const table = document.querySelector('.computer-table');
|
|
table.innerHTML = '<tr><th>ID</th><th>Brand</th><th>Model</th><th>Status</th><th>Date of entry</th><th>State</th><th>Actions</th></tr>';
|
|
data.forEach(computer => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td>${computer.id}</td>
|
|
<td>${computer.brand}</td>
|
|
<td>${computer.model}</td>
|
|
<td>${computer.status}</td>
|
|
<td>${computer.dateOfEntry}</td>
|
|
<td>${computer.state}</td>
|
|
<td>
|
|
<button class="edit-button" onclick="editComputer(${computer.id})">Edit</button>
|
|
<button class="delete-button" onclick="deleteComputer(${computer.id})">Delete</button>
|
|
</td>
|
|
`;
|
|
document.querySelector('.computer-table').appendChild(row);
|
|
});
|
|
})
|
|
.catch(error => console.error(error));
|
|
}
|
|
|
|
// Function to handle edit button click
|
|
function editComputer(id) {
|
|
const table = document.querySelector('.computer-table');
|
|
const rows = table.querySelectorAll('tr');
|
|
let row;
|
|
for(let i = 0; i < rows.length; i++) {
|
|
if (rows[i].cells[0].innerText == id) {
|
|
row = rows[i];
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Get the cells of the row
|
|
const cells = row.querySelectorAll('td');
|
|
|
|
// Replace the "Edit" button with a checkmark and a crossmark
|
|
const editButton = row.querySelector('.edit-button');
|
|
editButton.innerHTML = '✓'; // Checkmark button
|
|
editButton.classList.add('confirm-button');
|
|
editButton.setAttribute('onclick', `confirmEdit(${id})`);
|
|
|
|
const deleteButton = row.querySelector('.delete-button');
|
|
deleteButton.innerHTML = '✕'; // Crossmark button
|
|
deleteButton.classList.add('cancel-button');
|
|
deleteButton.setAttribute('onclick', `cancelEdit(${id})`);
|
|
|
|
// Enable editing for each cell
|
|
cells.forEach(cell => {
|
|
if (cell.innerText == id || cell.innerText == "✓ ✕") return;
|
|
const value = cell.innerText;
|
|
cell.innerHTML = `<input type="text" value="${value}">`;
|
|
});
|
|
}
|
|
|
|
// Function to handle confirm edit button click
|
|
function confirmEdit(id) {
|
|
// Get the row of the computer being edited
|
|
const table = document.querySelector('.computer-table');
|
|
const rows = table.querySelectorAll('tr');
|
|
let row;
|
|
for(let i = 0; i < rows.length; i++) {
|
|
if (rows[i].cells[0].innerText == id) {
|
|
row = rows[i];
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Get the cells of the row
|
|
const cells = row.querySelectorAll('td');
|
|
const values = [];
|
|
cells.forEach(cell => {
|
|
if (cell.innerText == id || cell.innerText == "✓ ✕") return;
|
|
const value = cell.querySelector('input').value;
|
|
values.push(value);
|
|
cell.innerHTML = `${value}`;
|
|
});
|
|
|
|
// Send a PUT request to update the computer
|
|
fetch(`http://localhost:3000/computer/${id}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `${localStorage.getItem('token')}`
|
|
},
|
|
body: JSON.stringify({
|
|
brand: values[0],
|
|
model: values[1],
|
|
status: values[2],
|
|
dateOfEntry: values[3],
|
|
state: values[4]
|
|
})
|
|
})
|
|
.then(response => {
|
|
if (response.ok) {
|
|
createTable();
|
|
} else {
|
|
alert('Failed to update computer');
|
|
console.error('Failed to update computer');
|
|
}
|
|
})
|
|
.catch(error => console.error(error));
|
|
}
|
|
|
|
// Function to handle cancel edit button click
|
|
function cancelEdit(id) {
|
|
createTable();
|
|
}
|
|
|
|
// Function to handle delete button click
|
|
function deleteComputer(id) {
|
|
// Display a confirmation dialog
|
|
const confirmDelete = confirm("Are you sure you want to delete this computer?");
|
|
|
|
if (confirmDelete) {
|
|
// Send a DELETE request to the server to delete the computer
|
|
fetch(`http://localhost:3000/computer/${id}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `${localStorage.getItem('token')}`
|
|
},
|
|
})
|
|
.then(response => {
|
|
if (response.ok) {
|
|
// Refresh the table by re-fetching the computer data
|
|
createTable();
|
|
} else {
|
|
alert('Failed to delete computer');
|
|
console.error('Failed to delete computer');
|
|
}
|
|
})
|
|
.catch(error => console.error(error));
|
|
}
|
|
}
|
|
|
|
// Function to handle add computer button click
|
|
function addComputer() {
|
|
const brand = document.getElementById('brand').value;
|
|
const model = document.getElementById('model').value;
|
|
const status = document.getElementById('status').value;
|
|
const dateOfEntry = document.getElementById('dateOfEntry').value;
|
|
const state = document.getElementById('state').value;
|
|
|
|
// Send a POST request to add the computer
|
|
fetch('http://localhost:3000/computer', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `${localStorage.getItem('token')}`
|
|
},
|
|
body: JSON.stringify({
|
|
brand: brand,
|
|
model: model,
|
|
status: status,
|
|
dateOfEntry: dateOfEntry,
|
|
state: state
|
|
})
|
|
})
|
|
.then(response => {
|
|
if (response.ok) {
|
|
createTable();
|
|
document.getElementById('brand').value = '';
|
|
document.getElementById('model').value = '';
|
|
document.getElementById('status').value = '';
|
|
document.getElementById('dateOfEntry').value = '';
|
|
document.getElementById('state').value = '';
|
|
} else {
|
|
alert('Failed to add computer');
|
|
console.error('Failed to add computer');
|
|
}
|
|
})
|
|
.catch(error => console.error(error));
|
|
}
|
|
|
|
// check if user is logged in
|
|
window.onload = checkIfLoggedIn();
|
|
async function checkIfLoggedIn() {
|
|
const token = localStorage.getItem('token');
|
|
if (token) {
|
|
const valid = await checkIfTokenIsValid(token);
|
|
if (!valid) {
|
|
localStorage.removeItem('token');
|
|
window.location.href = '../';
|
|
}
|
|
else {
|
|
createTable();
|
|
}
|
|
}
|
|
else {
|
|
window.location.href = '../';
|
|
}
|
|
}
|
|
|
|
async function checkIfTokenIsValid(token) {
|
|
// Make a POST request to the login endpoint
|
|
return await fetch('http://localhost:3000/user/verify', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ token })
|
|
})
|
|
.then(response => {
|
|
if (response.status === 200) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('An error occurred');
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|