AnaLogger/server/templates/logger.html

{% extends "layout.html" %}

{% block content %}
<main>
    <script type="text/javascript">
        var intTime=200;
        // fix visualizzazioni
        fixDisplay();
        // avvio timer
        var timeout = setTimeout(dataRefresh, intTime);

        function fixDisplay(){
            $("#divNewFile").toggle();
        };

        function dataRefresh() {
            // scarico i dati aggioranti
            $.ajax({url: "/api/v1/channels/all", success: function(result){
                // compilo i dati scaricati
                $("#SelChannelA").html(result.ChA);
                $("#ChannelA").html(result.Channels[result.ChA]);
                $("#OutputA").html(result.Outs[result.ChA]);

                setGaugeA(result.Outs[result.ChA],result.Outmin[result.ChA],result.Outmax[result.ChA]);

                $("#SelChannelB").html(result.ChB);
                $("#ChannelB").html(result.Channels[result.ChB]);
                $("#OutputB").html(result.Outs[result.ChB]);

                setGaugeB(result.Outs[result.ChB],result.Outmin[result.ChB],result.Outmax[result.ChB]);

                $("#LogFrequency").html(result.LogFreq);
                $("#WriteFrequency").html(result.WriteFreq);
                $("#LoggerTime").html(result.timeLog);
                $("#ServerTime").html(result.timeSrv);
                $("#LastSessionName").html(result.LastSessionName);
            }});

            timeout = setTimeout(dataRefresh, intTime);
        };

        function setGaugeA(chValA,outMinA,outMaxA){
            // Create knob elements
            const knob0 = pureknob.createKnob(200, 200);
            // Set properties knob0
            knob0.setProperty('angleStart', -0.8 * Math.PI);
            knob0.setProperty('angleEnd', 0.8 * Math.PI);
            knob0.setProperty('colorFG', '#07adec');
            knob0.setProperty('trackWidth', 0.3);
            knob0.setProperty('valMin', parseInt(outMinA));
            knob0.setProperty('valMax', parseInt(outMaxA));
            // Set initial value0
            knob0.setValue(chValA);
            // Create element node0
            const node0 = knob0.node();
            // Add it to the DOM.
            $("#divChA").html(node0);
        }

        function setGaugeB(chValB,outMinB,outMaxB){
            // Create knob elements
            const knob1 = pureknob.createKnob(200, 200);
            // Set properties knob1
            knob1.setProperty('angleStart', -0.8 * Math.PI);
            knob1.setProperty('angleEnd', 0.8 * Math.PI);
            knob1.setProperty('colorFG', '#07adec');
            knob1.setProperty('trackWidth', 0.3);
            knob1.setProperty('valMin', parseInt(outMinB));
            knob1.setProperty('valMax', parseInt(outMaxB));
            // Set initial value1
            knob1.setValue(chValB);
            // Create element node1
            const node1 = knob1.node();
            // Add it to the DOM.
            $("#divChB").html(node1);
        }

        // Funzione startLog: chiamata /api/v1/log/start per avviare log e dare nome
        function startLog(){
            $.ajax({
                type: 'PUT'
                ,url: "/api/v1/log/start"
                ,data: ""
            })
        };

        // Funzione stopLog: fa chiamata per settare a 0 il LOG:STATUS
        function stopLog(){
            $.ajax({
                type: 'PUT'
                ,url: "/api/v1/log/stop"
                ,data: ""
            })
        };

    </script>
    <div class="container-fluid">
        <div class="row mx-2 my-2">
            <div class="card text-center col-6">
                <div class="card-header text-center">
                    <strong>Channel A: <span id="SelChannelA"></span></strong>
                </div>
                <div class="card-body">
                    <div id="divChA"></div>
                Original: <span id="ChannelA"></span>
                <br>
                    <strong>Scaled: <span id="OutputA"></span>
                    </strong>
                </div>
            </div>
            <div class="card text-center col-6">
                <div class="card-header text-center">
                    <strong>Channel B: <span id="SelChannelB"></span></strong>
                </div>
                <div class="card-body">
                    <div id="divChB"></div>
                Original: <span id="ChannelB"></span>
                <br>
                    <strong>Scaled: <span id="OutputB"></span>
                    </strong>
                </div>
            </div>
        </div>
        <div class="alert alert-info text-center">
            <strong>Logger period: </strong> <span id="LogFrequency"></span> ms
            <br>
            <strong>File Write period: </strong> <span id="WriteFrequency"></span> ms
        </div>
            <!--pulsanti start log e stop log-->
            <div class="text-center mx-2 my-2">
                <button type="button" class="btn btn-success" onclick="startLog()">Start Log</button>
                <button type="button" class="btn btn-danger" onclick="stopLog()">Stop Log</button>
            </div>
        <div class="card mb-4">
            <div class="card-header">
                <div class="row">
                        <i class="fas fa-table mr-1"></i>
                        <strong>
                        Record Log
                    </strong>
                </div>
            </div>
            <div class="card-body">
                <div class="input-group-text mb-3">
                    <span>Session: &nbsp;</span> <span id="LastSessionName"></span>
                </div>
 
                    <!-- To Do: display contenuto cartella /data e dimensione files -->


                    <input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
                    <p id="showData"></p>

                    <script>
                        function CreateTableFromJSON() {
                            var myBooks = [
                                {
                                    "Book ID": "1",
                                    "Book Name": "Computer Architecture",
                                    "Category": "Computers",
                                    "Price": "125.60"
                                },
                                {
                                    "Book ID": "2",
                                    "Book Name": "Asp.Net 4 Blue Book",
                                    "Category": "Programming",
                                    "Price": "56.00"
                                },
                                {
                                    "Book ID": "3",
                                    "Book Name": "Popular Science",
                                    "Category": "Science",
                                    "Price": "210.40"
                                }
                            ]
                    
                            // EXTRACT VALUE FOR HTML HEADER. 
                            // ('Book ID', 'Book Name', 'Category' and 'Price')
                            var col = [];
                            for (var i = 0; i < myBooks.length; i++) {
                                for (var key in myBooks[i]) {
                                    if (col.indexOf(key) === -1) {
                                        col.push(key);
                                    }
                                }
                            }
                    
                            // CREATE DYNAMIC TABLE.
                            var table = document.createElement("table");
                    
                            // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
                    
                            var tr = table.insertRow(-1);                   // TABLE ROW.
                    
                            for (var i = 0; i < col.length; i++) {
                                var th = document.createElement("th");      // TABLE HEADER.
                                th.innerHTML = col[i];
                                tr.appendChild(th);
                            }
                    
                            // ADD JSON DATA TO THE TABLE AS ROWS.
                            for (var i = 0; i < myBooks.length; i++) {
                    
                                tr = table.insertRow(-1);
                    
                                for (var j = 0; j < col.length; j++) {
                                    var tabCell = tr.insertCell(-1);
                                    tabCell.innerHTML = myBooks[i][col[j]];
                                }
                            }
                    
                            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
                            var divContainer = document.getElementById("showData");
                            divContainer.innerHTML = "";
                            divContainer.appendChild(table);
                        }
                    </script>
                </div>
            </div>
        </div>
</main>
{% endblock %}