First commit of the new Insider version on docker
This commit is contained in:
193
views/paramAdminUser.ejs
Normal file
193
views/paramAdminUser.ejs
Normal file
@@ -0,0 +1,193 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
|
||||
<link rel="stylesheet" href="/public/css/login.css">
|
||||
<title>Parameter Admin</title>
|
||||
<link rel="icon" href="/public/assets/homelab_logo.png" />
|
||||
</head>
|
||||
|
||||
<style>
|
||||
.pagination .active .page-link {
|
||||
background-color: #007bff !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
#searchInput {
|
||||
flex-grow: 1;
|
||||
}
|
||||
#searchButton {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.custom-btn {
|
||||
transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
|
||||
color: #007BFF;
|
||||
background-color: transparent;
|
||||
padding: 5px 10px;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin: 4px 2px;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.25);
|
||||
border: 2px solid #007BFF;
|
||||
}
|
||||
|
||||
.custom-btn:hover {
|
||||
transform: scale(1.15);
|
||||
background-color: #007BFF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<body class="light-mode animate">
|
||||
<div class="container mt-4 table-container animate">
|
||||
<h2 class="text-center">Gestion des utilisateurs</h2><br>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<input type="text" id="searchInput" class="form-control rounded mr-2" placeholder="Rechercher par nom ou ID">
|
||||
<span id="shortcutHint" class="mr-2 align-self-center"></span>
|
||||
<button id="searchButton" class="btn btn-primary custom-btn">Rechercher</button>
|
||||
<select id="usersPerPage" class="form-control rounded ml-2" style="width: auto;">
|
||||
<option value="10">10</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
<option value="500">500</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="table-responsive mt-2">
|
||||
<table class="table w-100 table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Nom</th>
|
||||
<th>Rôle</th>
|
||||
<th class="text-right">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% users.forEach(user => { %>
|
||||
<tr>
|
||||
<td><%= user.id %></td>
|
||||
<td><%= user.name %></td>
|
||||
<td><%= user.role %></td>
|
||||
<td>
|
||||
<form action="/dpanel/dashboard/update-role" method="POST" class="d-flex align-items-center">
|
||||
<input type="hidden" name="id" value="<%= user.id %>">
|
||||
<input type="hidden" name="name" value="<%= user.name %>">
|
||||
<select class="form-control rounded mr-2" name="role">
|
||||
<option value="user" <%= user.role === 'user' ? 'selected' : '' %>>User</option>
|
||||
<option value="admin" <%= user.role === 'admin' ? 'selected' : '' %>>Admin</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-primary btn-round custom-btn">Mettre à jour</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination justify-content-center">
|
||||
<% for(let i = 1; i <= pages; i++) { %>
|
||||
<li class="page-item <%= i === currentPage ? 'active' : '' %>">
|
||||
<a class="page-link" href="/dpanel/dashboard/admin/users?page=<%= i %>&limit=<%= limit %>"><%= i %></a>
|
||||
</li>
|
||||
<% } %>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<a class="dropdown-item text-center text-white no-hover custom-btn" href="/dpanel/dashboard/admin/" style="max-width: 250px; padding: 10px;">
|
||||
<i class="fas fa-sign-out-alt text-white "></i> Retourner au dashboard admin
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-center animate">
|
||||
<button id="themeSwitcher" class="btn btn-warning mt-3 animate ">Changer de Thème</button>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
|
||||
|
||||
<script>
|
||||
const body = document.body;
|
||||
|
||||
document.getElementById('themeSwitcher').addEventListener('click', function () {
|
||||
body.classList.toggle('dark-mode');
|
||||
});
|
||||
|
||||
document.getElementById('usersPerPage').addEventListener('change', function () {
|
||||
window.location.href = "/dpanel/dashboard/admin/users?page=1&limit=" + this.value;
|
||||
});
|
||||
|
||||
window.onload = function() {
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
var limit = urlParams.get('limit');
|
||||
document.getElementById('usersPerPage').value = limit;
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const darkModeSwitch = document.getElementById('darkModeSwitch');
|
||||
|
||||
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
body.classList.toggle('dark-mode', darkModeMediaQuery.matches);
|
||||
|
||||
darkModeMediaQuery.addListener(function (e) {
|
||||
body.classList.toggle('dark-mode', e.matches);
|
||||
});
|
||||
});
|
||||
|
||||
function searchUsers() {
|
||||
var input = document.getElementById('searchInput');
|
||||
var filter = input.value.toUpperCase();
|
||||
var table = document.querySelector('.table');
|
||||
var tr = table.getElementsByTagName('tr');
|
||||
|
||||
for (var i = 0; i < tr.length; i++) {
|
||||
var tdName = tr[i].getElementsByTagName('td')[1];
|
||||
var tdId = tr[i].getElementsByTagName('td')[0];
|
||||
if (tdName || tdId) {
|
||||
var txtValueName = tdName.textContent || tdName.innerText;
|
||||
var txtValueId = tdId.textContent || tdId.innerText;
|
||||
if (txtValueName.toUpperCase().indexOf(filter) > -1 || txtValueId.toUpperCase().indexOf(filter) > -1) {
|
||||
tr[i].style.display = "";
|
||||
} else {
|
||||
tr[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('searchButton').addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
searchUsers();
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.ctrlKey && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
document.getElementById('searchInput').focus();
|
||||
}
|
||||
});
|
||||
|
||||
var isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
|
||||
var searchInput = document.getElementById('searchInput');
|
||||
searchInput.placeholder = isMac ? 'Rechercher par nom ou ID (Cmd + K)' : 'Rechercher par nom ou ID (Ctrl + K)';
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user