network-devices/views/index.pug

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 (<span id="device_count">0</span> 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
            thead
                tr
                    th MAC-Address
                    th IP-Address
                    th Hostname
                    th Status (<span id="device_online_count">0</span> online devices)
            tbody#devices


        script.

            let openPings = 0;

            function pingHost( ipAddress )
            {
                console.log( "Pinging " + ipAddress + "..." );
                let statusField = $('#ping-' + ipAddress.replaceAll( '.', '-' ) );
                let lastStatus;
                if( statusField.text().startsWith( 'Online' ) )
                {
                    lastStatus = true;
                }
                else if( statusField.text().startsWith( 'Offline' ) )
                {
                    lastStatus = false;
                }

                statusField.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 ) {
                            openPings--;

                            let txt = $('#device_online_count').text();
                            if( data.data.online )
                            {
                                if( lastStatus === false )
                                {
                                    $('#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
                            {
                                if( lastStatus === true )
                                {
                                    $('#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>' );
                                }

                            }
                        }

                    });
                },5 );

            }

            function reloadAllPings()
            {
                $('#devices').find('tr').each (( row, tr ) =>
                {

                    pingHost( $( tr ).find( 'td' ).eq( 3 )[0].id.replaceAll( '-', '.' ).replaceAll( 'ping.', '' ) );
                });
            }



            function reloadDevices()
            {
                $('#reloadDeviceBtn').prop( 'disabled', true );
                $.ajax({
                    url : `/api/getDevices`,
                    type : 'GET',
                    contentType: "application/json; charset=utf-8",
                    dataType : 'json',

                    success: function( data ) {

                        const table = $('#devices');
                        table.empty();
                        let device_count = $('#device_count');
                        device_count.html( '0' );
                        $('#device_online_count').html( '0' );
                        $( 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 ); openPings +=1; }, 1 );
                            let txt = device_count.html();
                            $('#device_count').html( parseInt( txt ) +1 );
                        });

                        setTimeout ( () => {

                            $('#reloadDeviceBtn').prop( 'disabled', false );
                        }, 500 );
                    }

                });
            }


            reloadDevices();