204 lines
7.0 KiB
Plaintext
204 lines
7.0 KiB
Plaintext
<!-- views/inusers.ejs -->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>In-House Users</title>
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="/style.css">
|
|
<link rel="stylesheet" href="/user-creation.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="sidebar">
|
|
<img src="LOGO.PNG" alt="Custom Image">
|
|
<div id="sidebarCollapse">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<a href="#" id="userDataLink">User Data</a>
|
|
<a href="#" id="addUserLink">Add User</a>
|
|
<a href="#" id="deleteUserLink">Delete User</a>
|
|
<a href="/home" id="homeLink">Home</a>
|
|
</div>
|
|
|
|
<div id="content">
|
|
<h2>Welcome to the In-House Users Page</h2>
|
|
<div id="downloadButtonContainer">
|
|
<button id="downloadButton">Download as Excel</button>
|
|
</div>
|
|
<div id="userDataContainer">
|
|
<h3>All Users</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Username</th>
|
|
<th>Email</th>
|
|
<th>Password</th>
|
|
<th>Last Login</th>
|
|
<th>Job Title</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% if (allUsers && allUsers.length > 0) { %>
|
|
<% allUsers.forEach(user => { %>
|
|
<tr>
|
|
<td><%= user.name %></td>
|
|
<td><%= user.username %></td>
|
|
<td><%= user.email %></td>
|
|
<td><%= user.password %></td>
|
|
<td><%= new Date(user.lastLogin).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }) %></td>
|
|
<td><%= user.jobTitle %></td>
|
|
</tr>
|
|
<% }); %>
|
|
<% } else { %>
|
|
<tr>
|
|
<td colspan="6">No users available.</td>
|
|
</tr>
|
|
<% } %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="createUserForm" class="user-creation-container" style="display: none;">
|
|
<div class="title">Registration</div>
|
|
<div class="content">
|
|
<form action="/createUser" id="userForm" method="post">
|
|
<div class="user-details">
|
|
<div class="input-box">
|
|
<span class="details">Full Name</span>
|
|
<input type="text" name="name" placeholder="Enter your name" required>
|
|
</div>
|
|
<div class="input-box">
|
|
<span class="details">Username</span>
|
|
<input type="text" name="username" placeholder="Enter your username" required>
|
|
</div>
|
|
<div class="input-box">
|
|
<span class="details">Email</span>
|
|
<input type="text" name="email" placeholder="Enter your email" required>
|
|
</div>
|
|
<div class="input-box">
|
|
<span class="details">Password</span>
|
|
<input type="password" name="password" placeholder="Enter your password" required>
|
|
</div>
|
|
<div class="input-box">
|
|
<span class="details">Job Title</span>
|
|
<select name="jobTitle">
|
|
<option value="admin">Admin</option>
|
|
<option value="dataAnalyst">Data Analyst</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="button">
|
|
<input type="submit" value="Register">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Your existing script tags -->
|
|
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.2.1/exceljs.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
const allUsers = <%- JSON.stringify(allUsers) %>;
|
|
|
|
document.getElementById('downloadButton').addEventListener('click', function () {
|
|
console.log('Download button clicked');
|
|
downloadExcel(allUsers);
|
|
});
|
|
|
|
document.getElementById('addUserLink').addEventListener('click', function () {
|
|
document.getElementById('downloadButtonContainer').style.display = 'none';
|
|
document.getElementById('userDataContainer').style.display = 'none';
|
|
document.getElementById('createUserForm').style.display = 'block';
|
|
});
|
|
|
|
document.getElementById('userDataLink').addEventListener('click', function () {
|
|
document.getElementById('downloadButtonContainer').style.display = 'block';
|
|
document.getElementById('userDataContainer').style.display = 'block';
|
|
document.getElementById('createUserForm').style.display = 'none';
|
|
});
|
|
|
|
document.getElementById('userForm').addEventListener('submit', function (event) {
|
|
event.preventDefault();
|
|
const formData = new FormData(this);
|
|
const newUser = {};
|
|
formData.forEach((value, key) => {
|
|
newUser[key] = value;
|
|
});
|
|
|
|
console.log('Form Data Before Sending:', newUser);
|
|
|
|
fetch('/createUser', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(newUser),
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('Success:', data);
|
|
})
|
|
.catch(error => {
|
|
console.error('Fetch Error:', error);
|
|
});
|
|
})
|
|
|
|
function downloadExcel(allUsers) {
|
|
if (allUsers && allUsers.length > 0) {
|
|
const workbook = new ExcelJS.Workbook();
|
|
const worksheet = workbook.addWorksheet('All Users');
|
|
const headers = ['Name', 'Username', 'Email', 'Password', 'Last Login', 'Job Title'];
|
|
worksheet.addRow(headers);
|
|
allUsers.forEach(user => {
|
|
const rowData = [
|
|
user.name || '',
|
|
user.username || '',
|
|
user.email || '',
|
|
user.password || '',
|
|
user.lastLogin ? new Date(user.lastLogin).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }) : '',
|
|
user.jobTitle || ''
|
|
];
|
|
worksheet.addRow(rowData);
|
|
});
|
|
workbook.xlsx.writeBuffer().then(buffer => {
|
|
const currentDate = new Date();
|
|
const formattedDate = currentDate.toISOString().split('T')[0];
|
|
const formattedTime = currentDate.toTimeString().split(' ')[0].replace(/:/g, '-');
|
|
const fileName = `user_data_${formattedDate}_${formattedTime}.xlsx`;
|
|
const blob = new Blob([buffer], {
|
|
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
|
});
|
|
saveAs(blob, fileName);
|
|
});
|
|
} else {
|
|
console.error('No data available for download.');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|