First commit of the new Insider version on docker
This commit is contained in:
192
views/paramAdminStats&Logs.ejs
Normal file
192
views/paramAdminStats&Logs.ejs
Normal file
@@ -0,0 +1,192 @@
|
||||
<!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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<link rel="stylesheet" href="/public/css/login.css">
|
||||
<title>Statistiques du serveur</title>
|
||||
<link rel="icon" href="/public/assets/homelab_logo.png" />
|
||||
|
||||
<style>
|
||||
.modal {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 1; /* Sit on top */
|
||||
padding-top: 100px; /* Location of the box */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background-color: rgb(0,0,0); /* Fallback color */
|
||||
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
||||
}
|
||||
|
||||
/* Modal Content */
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/* The Close Button */
|
||||
.close {
|
||||
color: #aaaaaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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>
|
||||
</head>
|
||||
|
||||
<body class="light-mode animate">
|
||||
<div class="container mt-4 table-container animate">
|
||||
<h2 class="text-center">Statistiques du serveur</h2><br>
|
||||
<div class="table-responsive">
|
||||
<table class="table w-100">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Paramètre</th>
|
||||
<th>Valeur</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Temps de fonctionnement</td>
|
||||
<td><%= Math.floor(uptime / 86400) %> jours, <%= Math.floor(uptime % 86400 / 3600) %> heures, <%= Math.floor(uptime % 3600 / 60) %> minutes, <%= uptime % 60 %> secondes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Utilisation de la mémoire</td>
|
||||
<td><%= memoryUsage.toFixed(2) %> Mo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Utilisation du processeur</td>
|
||||
<td><%= (cpuUsage * 100).toFixed(2) %> %</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2>Journaux</h2>
|
||||
<div class="row">
|
||||
<% logs && logs.forEach((log, index) => { %>
|
||||
<% if (log) { %>
|
||||
<div class="col-md-4 text-center">
|
||||
<button class="btn btn-primary custom-btn logName" data-index="<%= index %>"><%= log.name %></button>
|
||||
</div>
|
||||
<% if ((index + 1) % 3 === 0) { %>
|
||||
</div><div class="row">
|
||||
<% } %>
|
||||
<div id="myModal<%= index %>" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" data-index="<%= index %>">×</span>
|
||||
<pre><%= log.content %></pre>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<br><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>
|
||||
|
||||
<script>
|
||||
|
||||
var logNames = document.getElementsByClassName("logName");
|
||||
var closeButtons = document.getElementsByClassName("close");
|
||||
|
||||
// Add event listeners to all log names
|
||||
for (var i = 0; i < logNames.length; i++) {
|
||||
logNames[i].addEventListener("click", function(event) {
|
||||
var index = event.target.getAttribute("data-index");
|
||||
var modal = document.getElementById("myModal" + index);
|
||||
modal.style.display = "block";
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners to all close buttons
|
||||
for (var i = 0; i < closeButtons.length; i++) {
|
||||
closeButtons[i].addEventListener("click", function(event) {
|
||||
var index = event.target.getAttribute("data-index");
|
||||
var modal = document.getElementById("myModal" + index);
|
||||
modal.style.display = "none";
|
||||
});
|
||||
}
|
||||
|
||||
// When the user clicks anywhere outside of the modal, close it
|
||||
window.onclick = function(event) {
|
||||
if (event.target.className === "modal") {
|
||||
event.target.style.display = "none";
|
||||
}
|
||||
}
|
||||
const body = document.body;
|
||||
|
||||
document.getElementById('themeSwitcher').addEventListener('click', function () {
|
||||
if (body.classList.contains('dark-mode')) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user