{% extends "layout.html" %}

{% block content %}
<main>
    <script type="text/javascript">

        $("#Div0").hide();
        var intTime=300;
        var intTimeSlow=2000;

        // fix visualizzazioni
        fixTables();
        dataRefresh();

        function fixFloat(actVal, numCount)
        {
            return parseFloat(actVal).toFixed(numCount)            
        }

        function dataRefresh() {
            // scarico i dati aggioranti
            $.ajax({url: "/api/v1/channels/all", success: function(result){

                numCount = parseInt(result.DecimalsCount)
                var divWidth = document.getElementById("divChA").offsetWidth

                // compilo i dati scaricati
                $("#SelChannelA").html(result.ChA);
                $("#OutputA").html(fixFloat(result.Outs[result.ChA],numCount));
                // $("#OutputA").html(result.Outs[result.ChA]);

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

                $("#SelChannelB").html(result.ChB);
                $("#OutputB").html(fixFloat(result.Outs[result.ChB],numCount));
                // $("#OutputB").html(result.Outs[result.ChB]);

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

                $("#LoggerTime").html(result.timeLog);
                $("#ServerTime").html(result.timeSrv);
                $("#LastSessionName").html(result.LastSessionName);
                $("#CurrentFolder").html(result.CurrentWorkFolder);

                if(result.GateOpen == "0")
                {
                    $("#WarnCanc").hide();
                }
                else if(result.GateOpen == "1")
                {
                    $("#WarnCanc").show();
                }

                // Se ho una current folder assegnata, la mostro e mostro contenuto. Altrimenti mostro elenco cartelle.
                if(result.CurrentWorkFolder == "")
                {
                    $("#Div7").hide();
                    $("#Div8").hide();
                    $("#Div9").show();
                    $("#Div10").hide();
                    $("#Div11").hide();
                }
                else
                {
                    $("#Div7").show();
                    $("#Div8").show();
                    $("#Div9").hide();
                    $("#Div10").show();
                    $("#Div11").show();
                }
                // Se LOG:STATUS è 0, mostro solo Start Log. se è 1, mostro solo Stop Log
                if(result.Status == "0")
                {
                    $("#btnStart").show();
                    $("#btnStop").hide();
                }

                else if(result.Status == "1")
                {
                    $("#btnStart").hide();
                    $("#btnStop").show();
                }

                // se real date status non è stato inserito, mostro div0 che lo chiede
                if(result.RealDateStatus == "0")
                {
                    $("#Div0").show();
                }

                //scarico unità di misura dei canali mostrati
                $("#UniMisuA").html(result.UniMeasure[result.ChA]);
                $("#UniMisuB").html(result.UniMeasure[result.ChB]);
                
            }});

            // A ogni giro di data refresh fix di tabella cartelle e tabella file
            timeoutFast = setTimeout(dataRefresh, intTime);
        };

        function fixTables(){
            fixFileTable();
            fixFolderTable();

            // A ogni giro di data refresh fix di tabella cartelle e tabella file
            timeoutSlow = setTimeout(fixTables, intTimeSlow);
        }

        function setGaugeA(divWidth,chValA,outMinA,outMaxA){
            // Create knob elements
            const knob0 = pureknob.createKnob(divWidth, divWidth);
            // Set properties knob0
            knob0.setProperty('angleStart', -0.85 * Math.PI);
            knob0.setProperty('angleEnd', 0.85 * Math.PI);
            knob0.setProperty('colorFG', '#07adec');
            knob0.setProperty('trackWidth', 0.25);
            knob0.setProperty('valMin', parseInt(outMinA)*1000);
            knob0.setProperty('valMax', parseInt(outMaxA)*1000);
            knob0.setProperty('readonly', 'true');
            // nascondo numero
            knob0.setProperty('textScale', '0');
            knob0.resize();
            // Set initial value0
            knob0.setValue(chValA*1000);
            // Create element node0
            const node0 = knob0.node();
            // Add it to the DOM.
            $("#divChA").html(node0);
        }

        function setGaugeB(divWidth,chValB,outMinB,outMaxB){
            // Create knob elements
            const knob1 = pureknob.createKnob(divWidth, divWidth);
            // Set properties knob1
            knob1.setProperty('angleStart', -0.85 * Math.PI);
            knob1.setProperty('angleEnd', 0.85 * Math.PI);
            knob1.setProperty('colorFG', '#07adec');
            knob1.setProperty('trackWidth', 0.25);
            knob1.setProperty('valMin', parseInt(outMinB)*1000);
            knob1.setProperty('valMax', parseInt(outMaxB)*1000);
            knob1.setProperty('readonly', 'true');
            // nascondo numero
            knob1.setProperty('textScale', '0');
            // Set valore
            knob1.setValue(chValB*1000);
            // 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 corretto
        function startLog(){
            $.ajax({
                type: 'PUT'
                ,url: "/api/v1/log/start"
                ,data: ""
            })
            // fix table
            dataRefresh();
        };

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

        function goBack(){
            $.ajax({
                type: 'PUT'
                ,url: "/api/v1/data/navigate"
                ,data: ""
            })
            // fix table
            dataRefresh();
        };

        //funzione exportData: chiamata per copiare e incollare il contenuto della cartella /data
        function exportData(){
            $.ajax({
                type: 'PUT'
                ,url: "/api/v1/data/export"
                ,data: ""
            })
            confirm("Cartella attuale copiata su USB drive.")
            // fix table
            dataRefresh();
        };

        //funzione deleteData: chiamata per eliminare il contenuto della cartella /data
        function deleteData(){
            var R = confirm("Confermi di voler eliminare la cartella attuale e il suo contenuto?");
            if (R == true){
                $.ajax({
                    type: 'PUT'
                    ,url: "/api/v1/data/delete"
                    ,data: ""
                })
                dataRefresh();
            }
            else{
                dataRefresh();
            }
        };

        function fixFolderTable(){
            // scarico i dati aggioranti
            $.ajax({url: "/api/v1/folders/list", success: function(result){
                folderTable = result.folderTable;
                // fix file
                UpdateFolderTable(folderTable);
            }});
        }
                   
        function UpdateFolderTable(folderTable) {
            // EXTRACT VALUE FOR HTML HEADER. 
            var col = [];
            for (var i = 0; i < folderTable.length; i++) {
                for (var key in folderTable[i]) {
                    if (col.indexOf(key) === -1) {
                        col.push(key);
                    }
                }
            }
            // CREATE DYNAMIC TABLE.
            var tableF = document.createElement("table");
            // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
            // TABLE ROW.
            var tr = tableF.insertRow(-1);
            // TABLE HEADER.
            for (var i = 0; i < col.length; i++) {
                var th = document.createElement("th");
                th.innerHTML = col[i];
                tr.appendChild(th);
            }
            // ADD JSON DATA TO THE TABLE AS ROWS.
            for (var i = 0; i < folderTable.length; i++) {    
                tr = tableF.insertRow(-1);    
                for (var j = 0; j < col.length; j++) {
                    var tabCell = tr.insertCell(-1);
                    tabCell.innerHTML = folderTable[i][col[j]];
                }
            }
            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("showFolders");
            divContainer.innerHTML = "";
            divContainer.appendChild(tableF);
        }

        function fixFileTable(){
            // scarico i dati aggioranti
            $.ajax({url: "/api/v1/files/list", success: function(result){
                fileTable = result.fileTable;
                // fix file
                UpdateFileTable(fileTable);
            }});
        }
    
        function UpdateFileTable(fileTable) {
            // EXTRACT VALUE FOR HTML HEADER. 
            var col = [];
            for (var i = 0; i < fileTable.length; i++) {
                for (var key in fileTable[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.
            // TABLE ROW.
            var tr = table.insertRow(-1);
            // TABLE HEADER.
            for (var i = 0; i < col.length; i++) {
                var th = document.createElement("th");
                th.innerHTML = col[i];
                tr.appendChild(th);
            }
            // ADD JSON DATA TO THE TABLE AS ROWS.
            for (var i = 0; i < fileTable.length; i++) {    
                tr = table.insertRow(-1);    
                for (var j = 0; j < col.length; j++) {
                    var tabCell = tr.insertCell(-1);
                    tabCell.innerHTML = fileTable[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 class="row my-2">
            <div class="col-12 alert alert-danger text-center" name="WarnCanc" id="WarnCanc">
                <h3>CANCELLO APERTO</h3>
            </div>
        </div>
        <div class="row my-2">
            <div class="col-12 col-xl-6">
                <div class="row my-2">
                    <div class="col-6 pr-0">                
                        <div class="card text-center">
                            <div class="card-header">
                                <strong>Channel A: <span id="SelChannelA"></span></strong>
                            </div>
                            <div class="card-body">
                                <div id="divChA"></div>
                                <div class="row">
                                    <div class="col-12">
                                        <span class="h3" id="OutputA"></span>
                                        <span class="h3" id="UniMisuA"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 pl-0">       
                        <div class="card text-center">
                            <div class="card-header">
                                <strong>Channel B: <span id="SelChannelB"></span></strong>
                            </div>
                            <div class="card-body">
                                <div id="divChB"></div>
                                <div class="row">
                                    <div class="col-12">
                                        <span class="h3" id="OutputB"></span>
                                        <span class="h3" id="UniMisuB"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-6">
                <div class="card my-2">
                    <div id="Div7"  class="card-header">
                        <div class="row">
                            <div class="col-6">
                                <button id="btnStart" type="button" class="btn btn-success btn-block" style="font-size: 110%" onclick="startLog()">
                                    <img src="../static/img/play-fill.svg" height="24" width="24">&nbsp; Start Log</button>
                            </div>
                            <div class="col-6">
                                <button id="btnStop" type="button" class="btn btn-danger btn-block" style="font-size: 110%" onclick="stopLog()">
                                    <img src="../static/img/stop-fill.svg" height="24" width="24">&nbsp; Stop Log</button>
                            </div>
                        </div>
                    </div>
                    <div class="card-header">
                        <div class="row" id="Div8"> <!--Div8 ovvero cartella attuale e sessione attuale-->
                            <div class="col-6"><strong>Cartella attuale: &nbsp;</strong> <h5><span id="CurrentFolder"></span></h5></div>
                            <div class="col-6"><strong>Sessione attuale: &nbsp;</strong> <h5><span id="LastSessionName"></span></h5></div>
                        </div>
                        <div id="Div9"> <!--Div9 ovvero selezione cartella-->
                        <p id="showFolders"></p>
                        <form method="POST" action="/api/v1/setup/workingtree">
                            <div class="input-group mb-2">
                                <span class="input-group-text col-5">Seleziona o Crea Cartella: &nbsp;</span>
                                <input type="text" class="form-control col-5" id="NewFolder" name="NewFolder"></input>
                                <button type="submit" class="btn btn-success col-2"><img src="../static/img/folder-plus.svg" height="24" width="24"></button>
                            </div>
                        </form>
                        </div>
                        <div id="Div10"> <!--Div10 ovvero 3 pulsanti logger-->
                            <div class="row mt-2">
                                <div class="col-4">
                                <button type="button" style="font-size: 90%" class="btn btn-info btn-block" onclick="goBack()">
                                    <img src="../static/img/arrow-90deg-up.svg" height="24" width="24"> &nbsp; Indietro</button>
                                </div>
                                <div class="col-4">
                                <button type="button" style="font-size: 90%" class="btn btn-primary btn-block" onclick="exportData()">
                                    <img src="../static/img/download.svg" height="24" width="24"> &nbsp; Esporta</button>
                                </div>
                                <div class="col-4">
                                <button type="button" style="font-size: 90%" class="btn btn-warning btn-block" onclick="deleteData()">
                                    <img src="../static/img/folder-x.svg" height="24" width="24"> &nbsp; Cancella</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body" id="Div11"> <!--Div11 ovvero elenco files-->
                        <p class="text-center" id="showData"></p>                    
                    </div>
                </div>
            </div>
        </div>
</main>
{% endblock %}