91 lines
3.3 KiB
Plaintext
91 lines
3.3 KiB
Plaintext
doctype html
|
|
html(lang='de')
|
|
head
|
|
title Network-Devices
|
|
meta(name='viewport' content='width=device-width, initial-scale=1.0')
|
|
style.
|
|
table {
|
|
font-family: arial, sans-serif;
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
|
|
td, th {
|
|
border: 1px solid #dddddd;
|
|
text-align: left;
|
|
padding: 8px;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: #dddddd;
|
|
}
|
|
body
|
|
script(src='https://code.jquery.com/jquery-3.6.0.min.js')
|
|
|
|
|
|
h1(style='float:left;') Network-Devices
|
|
button(onclick='reloadDevices();' style='float:right; margin-top: 25px; width:30%; height:40px;') Reload Devices
|
|
table
|
|
thead
|
|
tr
|
|
th MAC-Address
|
|
th IP-Address
|
|
th Hostname
|
|
th Status
|
|
tbody#devices
|
|
|
|
|
|
script.
|
|
function pingHost( ipAddress )
|
|
{
|
|
console.log( "pinging...");
|
|
$('#ping-' + ipAddress.replaceAll( '.', '-' ) ).html( '<a href="javascript:pingHost(\'' + ipAddress + '\');" style="color: orange;">Pinging... (unknown ms)</a>' );
|
|
setTimeout( () => {
|
|
$.ajax({
|
|
url : `/api/getDeviceStatus/${ipAddress}` ,
|
|
type : 'GET',
|
|
contentType: "application/json; charset=utf-8",
|
|
dataType : 'json',
|
|
|
|
|
|
success: function( data ) {
|
|
console.log( data );
|
|
if( data.data.online )
|
|
{
|
|
$('#ping-' + ipAddress.replaceAll( '.', '-' ) ).html( '<a href="javascript:pingHost(\'' + ipAddress + '\');" style="color: green">Online (' + data.data.avg + ' ms)</a>' );
|
|
}
|
|
else
|
|
{
|
|
$('#ping-' + ipAddress.replaceAll( '.', '-' ) ).html( '<a href="javascript:pingHost(\'' + ipAddress + '\');" style="color: red">Offline (' + data.data.avg + ' ms)</a>' );
|
|
}
|
|
}
|
|
|
|
});
|
|
},100 )
|
|
|
|
}
|
|
|
|
function reloadDevices()
|
|
{
|
|
$.ajax({
|
|
url : `/api/getDevices`,
|
|
type : 'GET',
|
|
contentType: "application/json; charset=utf-8",
|
|
dataType : 'json',
|
|
|
|
success: function( data ) {
|
|
console.log( data );
|
|
const table = $('#devices');
|
|
table.empty();
|
|
$( data.data ).each( ( key, entry ) => {
|
|
console.log( entry );
|
|
table.append( '<tr><td>' + entry.macAddress + '</td><td>' + entry.ipAddress + '</td><td>' + entry.hostname + '</td><td id="ping-' + entry.ipAddress.replaceAll( '.', '-' ) + '">Loading...</td>' )
|
|
setTimeout( () => { pingHost( entry.ipAddress ); }, 10 );
|
|
});
|
|
}
|
|
|
|
});
|
|
}
|
|
reloadDevices();
|
|
|