TobiasH/network-devices
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update, update some stylings and much more

Browse Source 
Took 55 minutes
This commit is contained in:
Tobias Hopp 2021-08-27 12:02:08 +02:00
parent 29a7ae49e8
commit 09c030ea06
2 changed files with 47 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.js
View File

@ -33,8 +33,9 @@ const apiResponse = {
app.get( '/api/getDeviceStatus/:ipAddress', async ( req, res ) => { app.get( '/api/getDeviceStatus/:ipAddress', async ( req, res ) => {
console.log( 'Loading device status for ' + req.params.ipAddress + '...' ); console.log( 'Loading device status for ' + req.params.ipAddress + '...' );
let ping_response = await ping.promise.probe(req.params.ipAddress, { let ping_response = await ping.promise.probe(req.params.ipAddress, {
timeout: 5, timeout: 1,
extra: ['-i', '1'], extra: ['-i', '1'],
}); });

56
views/index.pug
View File

@ -24,7 +24,8 @@ html(lang='de')
h1(style='float:left;') Network-Devices (<span id="device_count">0</span> devices) h1(style='float:left;') Network-Devices (<span id="device_count">0</span> devices)
button(onclick='reloadDevices();' style='float:right; margin-top: 25px; width:30%; height:40px;') Reload Devices button#reloadDeviceBtn(onclick='reloadDevices();' style='float:right; margin-top: 25px; width:15%; height:40px;') Reload devices
button#reloadDeviceBtn(onclick='reloadAllPings();' style='float:right; margin-top: 25px; width:15%; height:40px;') Reload pings
table table
thead thead
tr tr
@ -36,16 +37,19 @@ html(lang='de')
script. script.
let openPings = 0;
function pingHost( ipAddress ) function pingHost( ipAddress )
{ {
console.log( "pinging..."); console.log( "Pinging " + ipAddress + "..." );
let statusField = $('#ping-' + ipAddress.replaceAll( '.', '-' ) ); let statusField = $('#ping-' + ipAddress.replaceAll( '.', '-' ) );
let lastStatus; let lastStatus;
if( statusField.text().startsWith( 'Online' ) ) if( statusField.text().startsWith( 'Online' ) )
{ {
lastStatus = true; lastStatus = true;
} }
else else if( statusField.text().startsWith( 'Offline' ) )
{ {
lastStatus = false; lastStatus = false;
} }
@ -60,33 +64,56 @@ html(lang='de')
success: function( data ) { success: function( data ) {
console.log( data ); openPings--;
let txt = $('#device_online_count').text(); let txt = $('#device_online_count').text();
if( data.data.online ) if( data.data.online )
{ {
$('#ping-' + ipAddress.replaceAll( '.', '-' ) ).html( '<a href="javascript:pingHost(\'' + ipAddress + '\');" style="color: green">Online (' + data.data.avg + ' ms)</a>' ); if( lastStatus === false )
if( !lastStatus )
{ {
$('#device_online_count').html( parseInt( txt )+ 1 ); $('#device_online_count').html( parseInt( txt )+ 1 );
$('#ping-' + ipAddress.replaceAll( '.', '-' ) ).html( '<a href="javascript:pingHost(\'' + ipAddress + '\');" style="color: #00e1ff">Online (' + data.data.avg + ' ms)</a>' );
} }
else
{
$('#ping-' + ipAddress.replaceAll( '.', '-' ) ).html( '<a href="javascript:pingHost(\'' + ipAddress + '\');" style="color: green">Online (' + data.data.avg + ' ms)</a>' );
}
//#00e1ff
} }
else else
{ {
$('#ping-' + ipAddress.replaceAll( '.', '-' ) ).html( '<a href="javascript:pingHost(\'' + ipAddress + '\');" style="color: red">Offline (' + data.data.avg + ' ms)</a>' ); if( lastStatus === true )
if( lastStatus )
{ {
$('#device_online_count').html( parseInt( txt )- 1 ); $('#device_online_count').html( parseInt( txt )- 1 );
$('#ping-' + ipAddress.replaceAll( '.', '-' ) ).html( '<a href="javascript:pingHost(\'' + ipAddress + '\');" style="color: #ff00cc">Offline (' + 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 ) },5 );
} }
function reloadAllPings()
{
$('#devices').find('tr').each (( row, tr ) =>
{
pingHost( $( tr ).find( 'td' ).eq( 3 )[0].id.replaceAll( '-', '.' ).replaceAll( 'ping.', '' ) );
});
}
function reloadDevices() function reloadDevices()
{ {
$('#reloadDeviceBtn').prop( 'disabled', true );
$.ajax({ $.ajax({
url : `/api/getDevices`, url : `/api/getDevices`,
type : 'GET', type : 'GET',
@ -94,7 +121,7 @@ html(lang='de')
dataType : 'json', dataType : 'json',
success: function( data ) { success: function( data ) {
console.log( data );
const table = $('#devices'); const table = $('#devices');
table.empty(); table.empty();
let device_count = $('#device_count'); let device_count = $('#device_count');
@ -103,13 +130,20 @@ html(lang='de')
$( data.data ).each( ( key, entry ) => { $( data.data ).each( ( key, entry ) => {
console.log( 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>' ) 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 ); setTimeout( () => { pingHost( entry.ipAddress ); openPings +=1; }, 1 );
let txt = device_count.html(); let txt = device_count.html();
$('#device_count').html( parseInt( txt ) +1 ); $('#device_count').html( parseInt( txt ) +1 );
}); });
setTimeout ( () => {
$('#reloadDeviceBtn').prop( 'disabled', false );
}, 500 );
} }
}); });
} }
reloadDevices(); reloadDevices();