PixelHosting/Router-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Eerste commit

Browse source
This commit is contained in:
Blackwhitebear8 2025-06-09 20:56:28 +02:00
parent 534389b6f4
commit 9928321826
22 changed files with 1594 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

197
templates/interfaces.html Normal file
View file

@ -0,0 +1,197 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AS215085 - Router tools | Interfaces</title>
<link rel="icon" type="image/png" href="../static/img/cropped-Pixelhosting-logo-favicon-32x32.png">
<script src="../static/js/bootstrap.bundle.min.js"></script>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<link href="../static/css/style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="header-content">
<a href="/"> <img src="../static/img/as215085-logo.png" alt="AS215085 Logo" style="height: 120px; opacity: 1;!important"> </a>
<h2><b>core1.doet.pixelhosting.nl</b></h2>
<p><b>Proudly delivering the backbone for PixelHosting’s services</b></p>
</div>
</header>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #07AAF9;">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav justify-content-center w-100">
<li class="nav-item"><a class="nav-link text-white" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link text-white" href="/bgp">BGP summary</a></li>
<li class="nav-item"><a class="nav-link text-white" href="/bgp-route">BGP route</a></li>
<li class="nav-item"><a class="nav-link text-white" href="/arp">ARP table</a></li>
<li class="nav-item"><a class="nav-link text-white" href="/neighbors">Neighbors table</a></li>
<li class="nav-item"><a class="nav-link text-white" href="/interfaces">Interfaces table</a></li>
</ul>
</div>
</div>
</nav>
<main>
<section id="interfaces">
<div class="input-group mb-3">
<input type="text" id="interfaceSearch" class="form-control" placeholder="Search in Interface table..." onkeyup="filterTable('interfaceSearch', 'interfaceTable')">
<button id="refreshButton" class="btn btn-outline-primary" type="button" onclick="refreshTable()">
<span id="refreshIcon">⟳</span>
<span id="refreshSpinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
Refresh data
</button>
</div>
<p></p> <p>Codes: S - State, L - Link, u - Up, D - Down, A - Admin Down</p>
<table class="striped table table-bordered" id="interfaceTable">
<thead>
<tr>
<th class="sortable" onclick="sortTable('interfaceTable', 0, this)">Interface <span class="sort-arrow"></span></th>
<th class="sortable" onclick="sortTable('interfaceTable', 1, this)">IP Address <span class="sort-arrow"></span></th>
<th class="sortable" onclick="sortTable('interfaceTable', 2, this)">MAC Address <span class="sort-arrow"></span></th>
<th class="sortable" onclick="sortTable('interfaceTable', 3, this)">VRF <span class="sort-arrow"></span></th>
<th class="sortable" onclick="sortTable('interfaceTable', 4, this)">MTU <span class="sort-arrow"></span></th>
<th class="sortable" onclick="sortTable('interfaceTable', 5, this)">Status <span class="sort-arrow"></span></th>
<th class="sortable" onclick="sortTable('interfaceTable', 6, this)">Description <span class="sort-arrow"></span></th>
</tr>
</thead>
<tbody id="interfaceTableBody">
<tr id="interface-loading-row">
<td colspan="7" class="text-center">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</td>
</tr>
</tbody>
</table>
<p><a href="/interfaces/json">JSON version</a></p>
</section>
</main>
<footer>
<p>&copy; 2020 – <span id="year"></span> AS215085 (PixelHosting). All rights reserved.</p>
<script> document.getElementById("year").textContent = new Date().getFullYear(); </script>
</footer>
<script src="../static/js/materialize.min.js"></script>
<script>
function filterTable(searchInputId, tableId) {
const input = document.getElementById(searchInputId);
const filter = input.value.toUpperCase();
const table = document.getElementById(tableId);
const tr = table.getElementsByTagName("tr");
for (let i = 1; i < tr.length; i++) {
tr[i].style.display = "none";
const td = tr[i].getElementsByTagName("td");
for (let j = 0; j < td.length; j++) {
if (td[j]) {
const txtValue = td[j].textContent || td[j].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
break;
}
}
}
}
}
function sortTable(tableId, columnIndex, th) {
const table = document.getElementById(tableId);
const tbody = table.tBodies[0];
const rows = Array.from(tbody.rows);
const headers = Array.from(th.parentNode.children);
// Reset other headers
headers.forEach(header => {
if (header !== th) {
header.classList.remove('asc', 'desc');
header.setAttribute('data-sort-state', 'none');
}
});
let currentState = th.getAttribute('data-sort-state') || 'none';
let newState = currentState === 'none' ? 'asc' : currentState === 'asc' ? 'desc' : 'none';
th.classList.remove('asc', 'desc');
if (newState !== 'none') th.classList.add(newState);
th.setAttribute('data-sort-state', newState);
if (newState === 'none') {
rows.sort((a, b) => parseInt(a.getAttribute('data-index')) - parseInt(b.getAttribute('data-index')));
} else {
rows.sort((a, b) => {
const aText = a.cells[columnIndex].textContent.trim();
const bText = b.cells[columnIndex].textContent.trim();
const aNum = parseFloat(aText.replace(/[^0-9.-]/g, ''));
const bNum = parseFloat(bText.replace(/[^0-9.-]/g, ''));
const isNumeric = !isNaN(aNum) && !isNaN(bNum);
return newState === 'asc'
? (isNumeric ? aNum - bNum : aText.localeCompare(bText))
: (isNumeric ? bNum - aNum : bText.localeCompare(aText));
});
}
rows.forEach(row => tbody.appendChild(row));
}
async function loadInterfaceTable() {
const tableBody = document.getElementById("interfaceTableBody");
const loadingRow = document.getElementById("interface-loading-row");
try {
const response = await fetch("/interfaces/json");
const data = await response.json();
// Leeg de body
tableBody.innerHTML = "";
if (!data.interface_table || data.interface_table.length === 0) {
tableBody.innerHTML = "<tr><td colspan='7' class='text-center'>Geen data beschikbaar.</td></tr>";
return;
}
data.interface_table.forEach((entry, index) => {
const row = document.createElement("tr");
row.setAttribute("data-index", index);
row.innerHTML = `
<td>${entry.interface}</td>
<td>${entry.ip_address}</td>
<td>${entry.mac_address}</td>
<td>${entry.vrf}</td>
<td>${entry.mtu}</td>
<td>${entry.status}</td>
<td>${entry.description}</td>
`;
tableBody.appendChild(row);
});
} catch (err) {
tableBody.innerHTML = "<tr><td colspan='7' class='text-center text-danger'>Fout bij ophalen van data.</td></tr>";
}
}
window.addEventListener("DOMContentLoaded", () => {
loadInterfaceTable();
});
function refreshTable() {
const searchInput = document.getElementById("interfaceSearch");
const refreshIcon = document.getElementById("refreshIcon");
const refreshSpinner = document.getElementById("refreshSpinner");
searchInput.value = ""; // Leegmaken van het zoekveld
refreshIcon.classList.add("d-none");
refreshSpinner.classList.remove("d-none");
loadInterfaceTable().then(() => {
refreshIcon.classList.remove("d-none");
refreshSpinner.classList.add("d-none");
});
}
</script>
</body>
</html>