<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
    <title>Wenet Web Interface</title>

    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/wenet.css') }}" rel="stylesheet">
    <script src="{{ url_for('static', filename='js/jquery-3.3.1.min.js')}}"></script>
    <script src="{{ url_for('static', filename='js/socket.io-4.1.2.min.js') }}"></script>
    <script type="text/javascript" charset="utf-8">


        $(document).ready(function() {
            // Use the 'update_status' namespace for all of our traffic
            namespace = '/update_status';

            // Connect to the Socket.IO server.
            // The connection URL has the following format:
            //     http[s]://<domain>:<port>[/<namespace>]
            var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);


            // Handle an image update.
            socket.on('image_update', function(msg) {
                var myImageElement = document.getElementById('wenet_image');
                myImageElement.src = 'latest.jpg?rand=' + Math.random();

                var _new_desc = msg.text;
                $('#image_data').html(_new_desc);
            });

            socket.on('uploader_update', function(msg) {

                var _new_desc = "Uploader Status: " + msg.queued + " Queued, " + msg.uploaded + " Uploaded, " + msg.discarded + " Discarded";
                $('#uploader_data').html(_new_desc);
            });


            socket.on('modem_stats', function(msg) {

                var snr = msg.snr.toFixed(1);
                var ppm = msg.ppm.toFixed(1);

                var _new_desc = "SNR: " + snr + " dB"
                $('#snr-data').html(_new_desc);
            });

            socket.on('gps_update', function(msg) {

                if (msg.numSV < 3){
                    $('#gps-data').html("No GPS Lock");
                } else {

                    var lat = msg.latitude.toFixed(5);
                    var lon = msg.longitude.toFixed(5);
                    var alt = msg.altitude.toFixed(0);
                    var ascent = msg.ascent_rate.toFixed(1);

                    var _new_desc = lat + ", " + lon + " " + alt + "m " + ascent + " m/s"
                    $('#gps-data').html(_new_desc);
                }
            });

            var text_messages = [];

            socket.on('text_update', function(msg) {
                var _text = "Msg #" + msg.id + ": " + msg.text;
                text_messages.push(_text);
                if(text_messages.length > 6){
                    text_messages.shift();
                }

                var _log_output = "";
                text_messages.forEach( function(value, index, array){
                    _log_output = _log_output + value + "<br>";
                });

                $('#log_data').html(_log_output);
            });

            // Tell the server we are connected and ready for data.
            socket.on('connect', function() {
                socket.emit('client_connected', {data: 'I\'m connected!'});
            });

        });
    </script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-4">
                <h3 class="masthead-brand">Wenet Dashboard</h3>
            </div>
            <div class="col-6">
                <h5 class="gps-display" id="gps-data"></h5>
            </div>
            <div class="col-2">
                <h4 class="snr-display" id="snr-data">SNR: 0 dB</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <img src="{{ url_for('static', filename='horus.png') }}" id="wenet_image" class="center-block wenet-image"/>
            </div>
        </div>
        <div class="row">
            <div class='col-6'>
                <div id="image_data">No image data received yet.</div>
            </div>
            <div class='col-6'>
                <div id="uploader_data">No uploader status data received yet.</div>
            </div>
        </div>
        <div class="row">
            <div class='col-12'>
                <div id="log_data">No log messages received yet.</div>
            </div>
        </div>
    </div>
</body>
</html>
