<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard</title>
<!-- Add Bootstrap CSS for styling -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
display: flex;
min-height: 100vh;
margin: 0;
}
/* Sidebar styles */
.sidebar {
width: 250px;
background-color: #f8f9fa;
padding: 15px;
height: 100vh;
position: fixed;
}
.sidebar .admin-info {
text-align: center;
margin-bottom: 30px;
}
.sidebar .admin-info img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 15px;
}
.main-content {
margin-left: 270px; /* Adjust according to the sidebar width */
padding: 20px;
width: 100%;
}
.table-container {
margin-bottom: 40px;
}
.action-btn {
margin: 0 5px;
}
</style>
</head>
<body>
<!-- Sidebar -->
<div class="sidebar">
<div class="admin-info">
<img src="https://via.placeholder.com/100" alt="Admin Picture">
<h3>Admin Name</h3>
<p>Admin Email: admin@example.com</p>
<p>Role: Administrator</p>
</div>
</div>
<!-- Main Content Area -->
<div class="main-content">
{% if is_admin %}
<!-- Admin View -->
<!-- User List -->
<div class="container mt-5">
<h2>User List</h2>
<form id="userForm" method="post" class="mb-4">
{% csrf_token %}
<div class="row">
<div class="col">
<input type="text" id="firstName" name="firstName"
class="form-control" placeholder="First Name" required>
</div>
<div class="col">
<input type="text" id="lastName" name="lastName"
class="form-control" placeholder="Last Name" required>
</div>
<div class="col">
<button type="submit" class="btn btn-success"
id="submitButton">Add User</button>
</div>
</div>
</form>
<table class="table table-bordered table-striped" id="userTable">
<thead class="table-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
{% for submission in submissions %}
<tr>
<th scope="row">{{ forloop.counter }}</th>
<td>{{ submission.first_name }}</td>
<td>{{ submission.last_name }}</td>
<td>
<button class="btn btn-warning btn-sm action-btn"
onclick="editUser(this)">Edit</button>
<button class="btn btn-danger btn-sm action-btn"
onclick="deleteUser(this)">Delete</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- User Record Management -->
<div class="container mt-5">
<h2>User Record Management</h2>
<form id="recordForm" method="post" class="mb-4">
{% csrf_token %}
<div class="row">
<div class="col">
<input type="text" id="recordLink" name="recordLink"
class="form-control" placeholder="Record Link" required>
</div>
<div class="col">
<input type="text" id="userName" name="userName"
class="form-control" placeholder="User Name" required>
</div>
<div class="col">
<button type="submit" class="btn btn-success"
id="submitButton">Add Record</button>
</div>
</div>
</form>
<table class="table table-bordered table-striped" id="recordTable">
<thead class="table-dark">
<tr>
<th scope="col">Record Links</th>
<th scope="col">User</th>
<th scope="col">Actions</th>
<th scope="col">Timestamps</th>
</tr>
</thead>
<tbody>
{% for submission in submissions %}
<tr>
<td><a href="{{ submission.record_link }}"
target="_blank">{{ submission.record_link }}</a></td>
<td>{{ submission.user }}</td>
<td>
<button class="btn btn-warning btn-sm action-btn"
onclick="editRecord(this)">Edit</button>
<button class="btn btn-danger btn-sm action-btn"
onclick="deleteRecord(this)">Delete</button>
</td>
<td>
Filled: {{ submission.filled_timestamp }} <br>
Modified: {{ submission.modified_timestamp }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<!-- User Form Submission View -->
<h2>Submit an Anomaly</h2>
<form method="post" enctype="multipart/form-data" class="mb-4">
{% csrf_token %}
<div class="row mb-3">
<div class="col">
<input type="text" name="bl_number" class="form-control"
placeholder="BL Number" required>
</div>
<div class="col">
<input type="text" name="shift" class="form-control"
placeholder="Shift" required>
</div>
</div>
<div class="row mb-3">
<div class="col">
<input type="text" name="anomaly" class="form-control"
placeholder="Anomaly" required>
</div>
<div class="col">
<input type="text" name="subcategory" class="form-control"
placeholder="Subcategory">
</div>
</div>
<div class="mb-3">
<textarea name="comment" class="form-control"
placeholder="Comment"></textarea>
</div>
<div class="mb-3">
<input type="file" name="file" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
{% endif %}
</div>
<!-- JavaScript to handle add, edit, and delete actions -->
<script>
// User Management JavaScript
let editingRow = null;
// Event listener for user form submission
document.getElementById('userForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form from submitting traditionally
if (editingRow) {
updateUser();
} else {
addUser();
}
});
function addUser() {
const table =
document.getElementById('userTable').getElementsByTagName('tbody')[0];
const rowCount = table.rows.length + 1; // Calculate the new row number
const firstName = document.getElementById('firstName').value;
const lastName = document.getElementById('lastName').value;
const newRow = table.insertRow();
newRow.innerHTML = `
<th scope="row">${rowCount}</th>
<td>${firstName}</td>
<td>${lastName}</td>
<td>
<button class="btn btn-warning btn-sm action-btn"
onclick="editUser(this)">Edit</button>
<button class="btn btn-danger btn-sm action-btn"
onclick="deleteUser(this)">Delete</button>
</td>
`;
resetForm(); // Reset form for new inputs
updateRowNumbers(); // Update row numbers
}
function deleteUser(button) {
const row = button.parentNode.parentNode; // Get the row to delete
row.parentNode.removeChild(row); // Remove the row from the table
updateRowNumbers(); // Update row numbers
}
function editUser(button) {
editingRow = button.parentNode.parentNode; // Get the row to edit
const cells = editingRow.getElementsByTagName('td');
document.getElementById('firstName').value = cells[0].innerText;
document.getElementById('lastName').value = cells[1].innerText;
document.getElementById('submitButton').textContent = 'Update User';
}
function updateUser() {
const firstName = document.getElementById('firstName').value;
const lastName = document.getElementById('lastName').value;
const cells = editingRow.getElementsByTagName('td');
cells[0].innerText = firstName;
cells[1].innerText = lastName;
resetForm(); // Reset form fields
editingRow = null; // Clear editing row
document.getElementById('submitButton').textContent = 'Add User'; // Reset
button text
}
function resetForm() {
document.getElementById('userForm').reset();
}
function updateRowNumbers() {
const table =
document.getElementById('userTable').getElementsByTagName('tbody')[0];
for (let i = 0; i < table.rows.length; i++) {
table.rows[i].getElementsByTagName('th')[0].innerText = i + 1;
}
}
// Record Management JavaScript
let editingRecord = null;
document.getElementById('recordForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form from submitting traditionally
if (editingRecord) {
updateRecord();
} else {
addRecord();
}
});
function addRecord() {
const table =
document.getElementById('recordTable').getElementsByTagName('tbody')[0];
const recordLink = document.getElementById('recordLink').value;
const userName = document.getElementById('userName').value;
const currentTime = new Date().toLocaleString();
const newRow = table.insertRow();
newRow.innerHTML = `
<td><a href="${recordLink}" target="_blank">${recordLink}</a></td>
<td>${userName}</td>
<td>
<button class="btn btn-warning btn-sm action-btn"
onclick="editRecord(this)">Edit</button>
<button class="btn btn-danger btn-sm action-btn"
onclick="deleteRecord(this)">Delete</button>
</td>
<td>
Filled: ${currentTime} <br>
Modified: -
</td>
`;
resetForm(); // Reset form for new inputs
}
function deleteRecord(button) {
const row = button.parentNode.parentNode; // Get the row to delete
row.parentNode.removeChild(row); // Remove the row from the table
}
function editRecord(button) {
editingRecord = button.parentNode.parentNode; // Get the row to edit
const cells = editingRecord.getElementsByTagName('td');
document.getElementById('recordLink').value = cells[0].innerText;
document.getElementById('userName').value = cells[1].innerText;
document.getElementById('submitButton').textContent = 'Update Record';
}
function updateRecord() {
const recordLink = document.getElementById('recordLink').value;
const userName = document.getElementById('userName').value;
const currentTime = new Date().toLocaleString();
const cells = editingRecord.getElementsByTagName('td');
cells[0].innerHTML = `<a href="${recordLink}"
target="_blank">${recordLink}</a>`;
cells[1].innerText = userName;
const timestampsCell = cells[3];
timestampsCell.innerHTML = timestampsCell.innerHTML.replace(/Modified: .*/,
`Modified: ${currentTime}`);
resetForm(); // Reset form fields
editingRecord = null; // Clear editing row
document.getElementById('submitButton').textContent = 'Add Record'; // Reset
button text
</script>
</body>
</html>
