implement display download and filter api logs
This commit is contained in:
BIG2EYEZ
68
Sean/views/apilog.ejs
Normal file
68
Sean/views/apilog.ejs
Normal file
@ -0,0 +1,68 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>API Logs</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>ECOSAVER MANAGEMENT</h1>
|
||||
</header>
|
||||
<nav>
|
||||
<a href="/home" id="homeLink">Home</a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<h2>Welcome to the API Logs Users Page</h2>
|
||||
</main>
|
||||
<div id="downloadButtonContainer">
|
||||
<button id="downloadButton" onclick="downloadAsExcel()">Download as Excel</button>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Time</th>
|
||||
<th>Method</th>
|
||||
<th>Host</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% logData.forEach(entry => { %>
|
||||
<tr>
|
||||
<td><%= entry.id %></td>
|
||||
<td><%= entry.time %></td>
|
||||
<td><%= entry.method %></td>
|
||||
<td><%= entry.host %></td>
|
||||
<td><%= entry.createdAt %></td>
|
||||
</tr>
|
||||
<% }); %>
|
||||
</tbody>
|
||||
</table>
|
||||
<script >
|
||||
const logData = <%- JSON.stringify(logData) %>;
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<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/flatpickr/dist/flatpickr.min.js"></script>
|
||||
<script src="apil;og.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
54
Sean/views/apilog.js
Normal file
54
Sean/views/apilog.js
Normal file
@ -0,0 +1,54 @@
|
||||
function downloadAsExcel() {
|
||||
// Get the current date
|
||||
var currentDate = new Date();
|
||||
var formattedDate = currentDate.toISOString().slice(0, 10); // Format as YYYY-MM-DD
|
||||
|
||||
// Create a new workbook
|
||||
var wb = XLSX.utils.book_new();
|
||||
// Convert logData to a worksheet
|
||||
var ws = XLSX.utils.json_to_sheet(logData);
|
||||
// Add the worksheet to the workbook
|
||||
XLSX.utils.book_append_sheet(wb, ws, 'Log Data');
|
||||
// Create a blob with the Excel file content
|
||||
var blob = XLSX.write(wb, { bookType: 'xlsx', type: 'blob', mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
||||
|
||||
// Trigger the download with the filename including the current date
|
||||
saveAs(blob, 'log_data_' + formattedDate + '.xlsx');
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize flatpickr on the date input
|
||||
flatpickr("#datepicker", {
|
||||
dateFormat: "Y-m-d",
|
||||
onChange: function(selectedDates, dateStr, instance) {
|
||||
// Call a function to filter logs based on the selected date
|
||||
filterLogsByDate(dateStr);
|
||||
}
|
||||
});
|
||||
|
||||
function filterLogsByDate(selectedDate) {
|
||||
// Use logData to filter logs based on the selected date
|
||||
var filteredLogs = logData.filter(function(entry) {
|
||||
return entry.createdAt.startsWith(selectedDate);
|
||||
});
|
||||
|
||||
// Render the filtered logs in the table
|
||||
renderLogsTable(filteredLogs);
|
||||
}
|
||||
|
||||
function renderLogsTable(logs) {
|
||||
var tableBody = document.getElementById('logsTableBody');
|
||||
tableBody.innerHTML = '';
|
||||
|
||||
logs.forEach(function(entry) {
|
||||
var row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${entry.id}</td>
|
||||
<td>${entry.time}</td>
|
||||
<td>${entry.method}</td>
|
||||
<td>${entry.host}</td>
|
||||
<td>${entry.createdAt}</td>
|
||||
`;
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -22,6 +22,7 @@
|
||||
<a href="#">Users</a>
|
||||
<a href="/sensors">Sensors</a>
|
||||
<a href="/locations">Locations</a>
|
||||
<a href="/apilog">Api Logs</a>
|
||||
<a href="/logout">Logout</a>
|
||||
</nav>
|
||||
|
||||
@ -57,12 +58,6 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="health-container">
|
||||
<h4>Network Latency</h4>
|
||||
<ul>
|
||||
<li><strong>Latency:</strong> <%= systemHealth && systemHealth.networkHealth ? systemHealth.networkHealth.latency : 'N/A' %> ms</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<footer>
|
||||
Any Issue faced, Please contact the administrator at 11111111 or ecosaverAdmin@gmail.com
|
||||
|
||||
Reference in New Issue
Block a user