albert/iphistory
1
0
Fork 0
mirror of https://github.com/skidoodle/iphistory.git synced 2025-02-15 08:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity

initial commit

Browse source
This commit is contained in:
skidoodle 2024-05-31 12:56:54 +02:00
commit ee9309da68
6 changed files with 436 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

221
index.html Normal file
View file

@ -0,0 +1,221 @@
<!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">&laquo; Prev</button>
<button onclick="nextPage()" id="nextBtn">Next &raquo;</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>