mirror of
https://github.com/skidoodle/iphistory.git
synced 2025-02-15 08:29:16 +01:00
221 lines
6.4 KiB
HTML
221 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IP History</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #222;
|
|
color: #fff;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
button.export {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
}
|
|
|
|
button.export:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
table {
|
|
width: 80%;
|
|
border-collapse: collapse;
|
|
margin: 0 auto;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
background-color: #333;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
th, td {
|
|
border: 1px solid #444;
|
|
padding: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
cursor: pointer;
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
}
|
|
|
|
th.sort-asc::after, th.sort-desc::after {
|
|
content: "-ascending";
|
|
color: #fff;
|
|
}
|
|
|
|
th.sort-desc::after {
|
|
content: "-descending";
|
|
}
|
|
|
|
tbody tr:nth-child(even) {
|
|
background-color: #444;
|
|
}
|
|
|
|
.pagination {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.pagination button {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.pagination button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
.pagination button.active {
|
|
background-color: #0056b3;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button class="export" onclick="exportToCSV()">Export to CSV</button>
|
|
<h1>IP History</h1>
|
|
<table id="ipTable">
|
|
<thead>
|
|
<tr>
|
|
<th onclick="sortTable()">Timestamp</th>
|
|
<th>IP Address</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
|
|
<div class="pagination" id="pagination">
|
|
<button onclick="prevPage()" id="prevBtn">« Prev</button>
|
|
<button onclick="nextPage()" id="nextBtn">Next »</button>
|
|
</div>
|
|
|
|
<script>
|
|
let ipHistory = [];
|
|
let currentPage = 1;
|
|
const entriesPerPage = 10;
|
|
|
|
function loadIPHistory() {
|
|
fetch('/history')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
ipHistory = data.map(entry => entry.split(" - "));
|
|
displayTable();
|
|
})
|
|
.catch(error => console.error('Error fetching IP history:', error));
|
|
}
|
|
|
|
function displayTable() {
|
|
const tbody = document.getElementById('ipTable').getElementsByTagName('tbody')[0];
|
|
tbody.innerHTML = '';
|
|
const start = (currentPage - 1) * entriesPerPage;
|
|
const end = start + entriesPerPage;
|
|
const currentEntries = ipHistory.slice(start, end);
|
|
currentEntries.forEach(row => {
|
|
const tr = document.createElement('tr');
|
|
row.forEach(cell => {
|
|
const td = document.createElement('td');
|
|
td.textContent = cell;
|
|
tr.appendChild(td);
|
|
});
|
|
tbody.appendChild(tr);
|
|
});
|
|
updatePaginationButtons();
|
|
}
|
|
|
|
function updatePaginationButtons() {
|
|
const prevBtn = document.getElementById('prevBtn');
|
|
const nextBtn = document.getElementById('nextBtn');
|
|
if (currentPage === 1) {
|
|
prevBtn.style.display = 'none';
|
|
} else {
|
|
prevBtn.style.display = 'inline-block';
|
|
}
|
|
if (currentPage === Math.ceil(ipHistory.length / entriesPerPage)) {
|
|
nextBtn.style.display = 'none';
|
|
} else {
|
|
nextBtn.style.display = 'inline-block';
|
|
}
|
|
}
|
|
|
|
function nextPage() {
|
|
if (currentPage < Math.ceil(ipHistory.length / entriesPerPage)) {
|
|
currentPage++;
|
|
displayTable();
|
|
}
|
|
}
|
|
|
|
function prevPage() {
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
displayTable();
|
|
}
|
|
}
|
|
|
|
function sortTable() {
|
|
const table = document.getElementById('ipTable');
|
|
const tbody = table.getElementsByTagName('tbody')[0];
|
|
const rows = Array.from(tbody.getElementsByTagName('tr'));
|
|
const th = table.getElementsByTagName('th')[0];
|
|
const isAscending = !th.classList.contains('sort-asc');
|
|
const orderModifier = isAscending ? 1 : -1;
|
|
|
|
rows.sort((a, b) => {
|
|
const aText = a.getElementsByTagName('td')[0].textContent;
|
|
const bText = b.getElementsByTagName('td')[0].textContent;
|
|
return aText.localeCompare(bText) * orderModifier;
|
|
});
|
|
|
|
th.classList.toggle('sort-asc', isAscending);
|
|
th.classList.toggle('sort-desc', !isAscending);
|
|
|
|
rows.forEach(row => tbody.appendChild(row));
|
|
}
|
|
|
|
function exportToCSV() {
|
|
const rows = [['Timestamp', 'IP Address'], ...ipHistory];
|
|
let csvContent = "data:text/csv;charset=utf-8,";
|
|
|
|
rows.forEach(rowArray => {
|
|
const row = rowArray.join(",");
|
|
csvContent += row + "\r\n";
|
|
});
|
|
|
|
const encodedUri = encodeURI(csvContent);
|
|
const link = document.createElement("a");
|
|
link.setAttribute("href", encodedUri);
|
|
link.setAttribute("download", "ip_history.csv");
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
}
|
|
|
|
window.onload = loadIPHistory;
|
|
</script>
|
|
</body>
|
|
</html>
|