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

ipv6

Browse source
This commit is contained in:
skidoodle 2024-08-24 01:02:02 +02:00
parent 3148a47258
commit b690c6f789
6 changed files with 189 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web/index.html
View file

@ -2,12 +2,11 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>IP History</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1><a href="/">IP History</a></h1>
@ -18,8 +17,9 @@
<table id="ipTable">
<thead>
<tr>
<th onclick="sortTable()">Timestamp</th>
<th>IP Address</th>
<th onclick="sortTable('timestamp')">Timestamp</th>
<th onclick="sortTable('ipv4')">IPv4 Address</th>
<th onclick="sortTable('ipv6')">IPv6 Address</th>
</tr>
</thead>
<tbody></tbody>

25
web/script.js
View file

@ -15,7 +15,11 @@ $(document).ready(function() {
$('#searchBar').on('input', function() {
const query = $(this).val().toLowerCase();
filteredHistory = ipHistory.filter(entry => entry.timestamp.toLowerCase().includes(query) || entry.ip_address.toLowerCase().includes(query));
filteredHistory = ipHistory.filter(entry =>
entry.timestamp.toLowerCase().includes(query) ||
(entry.ipv4 && entry.ipv4.toLowerCase().includes(query)) ||
(entry.ipv6 && entry.ipv6.toLowerCase().includes(query))
);
currentPage = 1;
displayTable();
updateTotalIPs();
@ -31,7 +35,8 @@ function displayTable() {
currentEntries.forEach(entry => {
const tr = $('<tr>');
tr.append($('<td>').text(entry.timestamp));
tr.append($('<td>').text(entry.ip_address));
tr.append($('<td>').text(entry.ipv4 || 'N/A').css('min-width', '120px')); // Set static width
tr.append($('<td>').text(entry.ipv6 || 'N/A').css('min-width', '180px')); // Set static width
tbody.append(tr);
});
updatePaginationButtons();
@ -62,21 +67,27 @@ function prevPage() {
}
}
function sortTable() {
const isAscending = $('#ipTable th').eq(0).hasClass('sort-asc');
function sortTable(field) {
const isAscending = $(`#ipTable th:contains(${field.charAt(0).toUpperCase() + field.slice(1)})`).hasClass('sort-asc');
const orderModifier = isAscending ? 1 : -1;
filteredHistory.sort((a, b) => (a.timestamp.localeCompare(b.timestamp)) * orderModifier);
filteredHistory.sort((a, b) => {
if (a[field] && b[field]) {
return (a[field].localeCompare(b[field])) * orderModifier;
}
return 0;
});
$('#ipTable th').removeClass('sort-asc sort-desc');
$('#ipTable th').eq(0).addClass(isAscending ? 'sort-desc' : 'sort-asc');
$(`#ipTable th:contains(${field.charAt(0).toUpperCase() + field.slice(1)})`).addClass(isAscending ? 'sort-desc' : 'sort-asc');
displayTable();
}
function exportToCSV() {
const rows = [
['Timestamp', 'IP Address'], ...filteredHistory.map(entry => [entry.timestamp, entry.ip_address])
['Timestamp', 'IPv4 Address', 'IPv6 Address'],
...filteredHistory.map(entry => [entry.timestamp, entry.ipv4 || '', entry.ipv6 || ''])
];
const csvContent = "data:text/csv;charset=utf-8," + rows.map(e => e.join(",")).join("\n");
const encodedUri = encodeURI(csvContent);

28
web/style.css
View file

@ -1,3 +1,9 @@
* {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
touch-action: manipulation;
}
body {
font-family: Arial, sans-serif;
background-color: #222;
@ -58,18 +64,21 @@ h1 a:hover {
}
table {
width: 90%;
max-width: 800px;
max-width: 1200px;
border-collapse: collapse;
margin: 0 auto 20px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
background-color: #333;
table-layout: fixed;
}
th, td {
border: 1px solid #444;
padding: 12px;
text-align: left;
word-wrap: break-word;
overflow-wrap: break-word;
}
th {
cursor: pointer;
@ -107,9 +116,14 @@ tbody tr:nth-child(even) {
background-color: #555;
cursor: not-allowed;
}
@media (max-width: 600px) {
th, td {
padding: 8px;
font-size: 14px;
}
table {
font-size: 14px;
}
.export, .pagination button {
padding: 8px 12px;
@ -119,4 +133,16 @@ tbody tr:nth-child(even) {
padding: 8px;
font-size: 14px;
}
.controls {
flex-direction: column;
align-items: stretch;
}
.export {
width: 100%;
margin-bottom: 10px;
}
.search-bar {
width: 100%;
margin-left: 0;
}
}