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();