Scribd
Upload
1 views

!DOCTYPE html

The document is an HTML template for an Admin Dashboard that includes a sidebar for admin information and a main content area for user management and record management. It features forms for adding users and records, along with tables displaying user and record data, including options to edit and delete entries. The document also includes JavaScript for handling form submissions and dynamic table updates.

Uploaded by

souha13rami
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
1 views

!DOCTYPE html

The document is an HTML template for an Admin Dashboard that includes a sidebar for admin information and a main content area for user management and record management. It features forms for adding users and records, along with tables displaying user and record data, including options to edit and delete entries. The document also includes JavaScript for handling form submissions and dynamic table updates.

Uploaded by

souha13rami
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

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>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy