{% extends "layout.html" %}

{% block content %}
<main>
    <script type="text/javascript">
        var intTime=500;

        refreshInput();
            
        var timeout = setTimeout(dataRefresh, intTime);
        var timeoutSetting = setTimeout(refreshSettings, intTime);

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

        // carico la prima volta i dati
        function refreshInput() {
            $.ajax({url: "/api/v1/channels/current", success: function(result){
                // compilo i dati scaricati
                numCount = parseInt(result.DecimalsCount)
                $("#CurrIn").html(fixFloat(result.CurrIn,numCount));
                $("#CurrOut").html(fixFloat(result.CurrOut, numCount));
                $("#LogFreq").val(result.LogFreq);
                $("#WriteFreq").val(result.WriteFreq);
                $("#DecimalsCount").val(result.DecimalsCount);
                $("#ServerTime").html(result.timeSrv);
                $("#ddlChannels").val(result.numCh);
                $("#MinOut").val(result.MinOut);
                $("#MaxOut").val(result.MaxOut);
                $("#MinIn").html(result.MinIn);
                $("#MaxIn").html(result.MaxIn);
                $("#CurrentFolder").html(result.CurrentWorkFolder);
                $("#UniMisura").val(result.UniMisura);
                // inizio nascondendo div2 e div3
                $("#Div2").hide();
                $("#Div3").hide();
                if(result.ShowDiv02 == "1")
                {
                    $("#Div2").show();
                }
                if(result.ShowDiv03 == "1")
                {
                    $("#Div3").show();
                }
            }});
        }

        function refreshSettings() {
            $.ajax({url: "/api/v1/channels/current", success: function(result){
                // compilo i dati scaricati
                numCount = parseInt(result.DecimalsCount)
                $("#CurrIn").html(fixFloat(result.CurrIn,numCount));
                $("#CurrOut").html(fixFloat(result.CurrOut, numCount));
                $("#LoggerTime").html(result.timeLog);
                $("#ServerTime").html(result.timeSrv);
                $("#MinIn").html(result.MinIn);
                $("#MaxIn").html(result.MaxIn);
            }});

            timeoutSetting = setTimeout(refreshSettings, intTime);
        }

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

                numCount = parseInt(result.DecimalsCount)
                $("#SelChannelA").val(result.ChA);
                $("#ChannelA").html(fixFloat(result.Channels[result.ChA],numCount+1));
                $("#OutputA").html(fixFloat(result.Outs[result.ChA],numCount));

                $("#SelChannelB").val(result.ChB);
                $("#ChannelB").html(fixFloat(result.Channels[result.ChB],numCount+1));
                $("#OutputB").html(fixFloat(result.Outs[result.ChB],numCount));

                $("#LogFrequency").html(result.LogFreq);
                $("#WriteFrequency").html(result.WriteFreq);
                $("#DecimalsCount").html(result.DecimalsCount);
                $("#ServerTime").html(result.timeSrv);
                $("#ChanScaleMin").html(result.ChScaleMin);
                $("#ChanScaleMax").html(result.ChScaleMax);
                $("#ChanRealMin").html(result.ChRealMin);
                $("#ChanRealMax").html(result.ChRealMax);
                $("#LastSessionName").html(result.LastSessionName);
                $("#ChannelThreshold").html(result.ChThreshold);
                $("#SmoothingFactor").html(result.smoothFact);
            }});

            timeout = setTimeout(dataRefresh, intTime);
        };

        function saveMin(){
            $.ajax({
                        type: 'PUT'
                        ,url: "/api/v1/setup/saveInMin"
                        ,data: ""
                        ,success: function(){
                            alert('Min Set');
                        }
                    })
        };

        function saveMax(){
            $.ajax({
                        type: 'PUT'
                        ,url: "/api/v1/setup/saveInMax"
                        ,data: ""
                        ,success: function(){
                            alert('Max Set');
                        }
                    })
        };

        function setChannelA(ddlChannelA) {
            var selectedText = ddlChannelA.options[ddlChannelA.selectedIndex].innerHTML;
            var selectedValue = ddlChannelA.value;
            $.ajax({
                type: 'PUT'
                ,url: "/api/v1/setup/selectChannelA/" + ddlChannelA.value
                ,data: ""
            });
        };

        function setChannelB(ddlChannelB) {
            var selectedText = ddlChannelB.options[ddlChannelB.selectedIndex].innerHTML;
            var selectedValue = ddlChannelB.value;
            $.ajax({
                type: 'PUT'
                ,url: "/api/v1/setup/selectChannelB/" + ddlChannelB.value
                ,data: ""
            });
        };

        function setChannel(ddlChannels) {
            var selectedText = ddlChannels.options[ddlChannels.selectedIndex].innerHTML;
            var selectedValue = ddlChannels.value;
            $.ajax({
                type: 'PUT'
                ,url: "/api/v1/setup/selectChannel/" + ddlChannels.value
                ,data: ""
            });
            refreshInput();
            refreshSettings();
            dataRefresh();
        };

        function setPowerChannel(ddlPowerChannel) {
            var selectedText = ddlPowerChannel.options[ddlPowerChannel.selectedIndex].innerHTML;
            var selectedValue = ddlPowerChannel.value;
            $.ajax({
                type: 'PUT'
                ,url: "/api/v1/setup/selectPowerChannel/" + ddlPowerChannel.value
                ,data: ""
            });
        };

        function setProcessing(ddlProcessing) {
            var selectedText = ddlProcessing.options[ddlProcessing.selectedIndex].innerHTML;
            var selectedValue = ddlProcessing.value;
            $.ajax({
                type: 'PUT'
                ,url: "/api/v1/setup/selectProcessing/" + ddlProcessing.value
                ,data: ""
            });
        };

    </script>
        <div id="Div1">
            <div class="card my-2 col-12">
                <div class="row card-header">
                    <strong>Autenticazione utente</strong>
                </div>
                <div class="card-body">
                    <form class="col-12" method="POST" action="/api/v1/setup/passwordInput">
                        <div class="row input-group my-2">
                            <span class="input-group-text col-3">Password: &nbsp;</span>
                            <input type="password" class=" form-control col-6" id="PasswordForm" name="PasswordForm"></input>
                            <input type="submit" value="Login" class="btn btn-success col-3"></input>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="row" id="Div2">
            <div class="col-6 pr-0">
                <div class="card my-2">
                    <div class="card-header">
                        <strong>Canale A</strong>
                        <div class="form-group">
                            <select class="form-control" id="SelChannelA" onchange="setChannelA(this)">
                                <option>0</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                            </select>
                        </div>
                    </div>
                <div class="card-body text-center">
                    Nativo: <span id="ChannelA"></span>
                    <br>
                        <strong>Scalato: <span id="OutputA"></span>
                        </strong>
                </div>
                </div>
            </div>
            <div class="col-6 pl-0">
                <div class="card my-2">
                    <div class="card-header">
                        <strong>Canale B</strong>
                        <div class="form-group">
                            <select class="form-control" id="SelChannelB" onchange="setChannelB(this)">
                                <option>0</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                            </select>
                        </div>
                </div>
                <div class="card-body text-center">
                    Nativo: <span id="ChannelB"></span>
                    <br>
                    <strong>Scalato: <span id="OutputB"></span>
                    </strong>
                    </div>
                </div>
            </div>
        </div>
        <div id="Div3">
            <div class="card my-2 col-12">
                <div class="row card-header">
                    <div class="col-5">
                        <i class="fas fa-table mr-1"></i>
                        <strong>Impostazioni scala canale</strong>
                    </div>
                    <div class="col-3 text-right">
                        <label for="sel1"> Channel n°</label>
                    </div>
                    <div class="col-4 text-right">
                        <div class="form-group">
                            <select class="form-control" id="ddlChannels" onchange="setChannel(this)">
                            <option>0</option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-body h6 text-center">
                    <div class="card-body row text-center">
                        <div class="col-2"></div>
                        <div class="col-8">
                            <div class="row">
                                <div class="col-3">MIN</div>
                                <div class="col-6">Attuale</div>
                                <div class="col-3">MAX</div>
                            </div>
                        </div>
                        <div class="col-2"></div>
                    </div>
                    <div class="card-body row text-center">
                        <div class="col-1"></div>
                        <div class="col-10">
                            <div class="row">
                                <div class="col-5 px-0"><button type="button" class="btn btn-secondary btn-block" onclick="saveMin()">Save Min</button></div>
                                <div class="col-2"></div>
                                <div class="col-5 px-0"><button type="button" class="btn btn-info btn-block" onclick="saveMax()">Save Max</button></div>
                            </div>
                        </div>
                        <div class="col-1"></div>
                    </div>
                    <div class="card-body row text-center">
                        <div class="col-2">IN</div>
                        <div class="col-8">
                            <div class="row text-center">
                                <div class="col-3 px-0"><span class="text-center" id="MinIn">000</span></div>
                                <div class="col-6 px-0"><span class="text-center" id="CurrIn">000</span></div>
                                <div class="col-3 px-0"><span class="text-center" id="MaxIn">000</span></div>
                            </div>
                        </div>
                        <div class="col-2"></div>
                    </div>
                    <form method="POST" action="/api/v1/scaleout">
                        <div class="card-body row text-center">
                            <div class="col-2 text-center">OUT</div>
                            <div class="col-8">
                                <div class="row">
                                    <div class="col-3 px-0">
                                        <input type="number" class="form-control text-center" id="MinOut" name="MinOut"></input>
                                    </div>
                                    <div class="col-6"><span class="text-center" id="CurrOut">{{ Out0 }}</span></div>
                                    <div class="col-3 px-0">
                                        <input type="number" class="form-control text-center" id="MaxOut" name="MaxOut"></input>
                                    </div>
                                </div>
                            </div>
                            <div class="col-2">
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-group my-2 px-0">
                                <span class="col-6 input-group-text">Unità di misura: &nbsp;</span>
                                <input type="text" class="col-6 form-control" id="UniMisura" name="UniMisura"></input>
                            </div>
                        </div>
                        <div class="row text-center">
                            <div class="col-2"></div>
                            <div class="col-8">
                            <input type="submit" value="SET OUTPUT SCALE" class="btn btn-success btn-block mt-2"></input>
                            </div>
                            <div class="col-2"></div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card my-2 col-12">
                <div class="row card-header">
                    <strong>Impostazioni canale e soglia per spegnimento</strong>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <i>Impostazione canale analogico a soglia per gestione autospegnimento.</i>
                        </div>
                        <br>
                        <div class="col-12">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Selezione canale</span>
                                </div>
                                <select class="form-control" id="SelPowerChannel" onchange="setPowerChannel(this)">
                                    <option value="10">Nessuno</option>
                                    <option>0</option>
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                    <option>6</option>
                                    <option>7</option>
                                </select>
                            </div>
                        </div>
                        <form class="col-12" method="POST" action="/api/v1/threshold">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Soglia spegnimento: &nbsp;</span>
                                </div>
                                <input type="number" step="0.1" min="0" max="3.3" class="form-control" id="ChThreshold" name="ChThreshold"></input>
                                <div class="input-group-append">
                                    <input type="submit" value="SET" class="btn btn-success "></input>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="card my-2 col-12">
                <div class="row card-header">
                    <strong>Tipo processing</strong>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Selezione Processing</span>
                                </div>
                                <select class="form-control" id="SelProcessing" onchange="setProcessing(this)">
                                    <option value="0">Nessuno</option>
                                    <option value="1">EWMA</option>
                                    <option value="2">RMS</option>
                                </select>
                            </div>
                        </div>
                        <form class="col-12" method="POST" action="/api/v1/smoothFact">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Fattore di Smoothing: &nbsp;</span>
                                </div>
                                <input type="number" min="1" max="50" class="form-control" id="smoothFact" name="smoothFact"></input>
                                <div class="input-group-append">
                                    <input type="submit" value="SET" class="btn btn-success "></input>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="card my-2 col-12">
                <div class="row card-header">
                    <i class="fas fa-table mr-1"></i>
                    <strong>Numero Decimali</strong>
                </div>
                <div class="card-body row">
                    <form class="col-12" method="POST" action="/api/v1/decimals">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Decimals Count: &nbsp;</span>
                            </div>
                            <input type="number" class="form-control" id="DecimalsCount" name="DecimalsCount"></input>
                            <div class="input-group-append">
                                <input type="submit" value="SET" class="btn btn-success"></input>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card my-2 col-12">
                <div class="row card-header">
                    <i class="fas fa-table mr-1"></i>
                    <strong>Impostazioni Timer</strong>
                </div>
                <div class="card-body row">
                    <form class="col-12" method="POST" action="/api/v1/frequency">
                        <div class="input-group row my-2 px-0">
                            <span class="col-6 input-group-text">Sample Period (ms): &nbsp;</span>
                            <input type="number" class="col-6 form-control" id="LogFreq" name="LogFreq"></input>
                        </div>
                        <div class="input-group row my-2 px-0">
                            <span class="col-6 input-group-text">Log Period (ms): &nbsp;</span>
                            <input type="number" class="col-6 form-control" id="WriteFreq" name="WriteFreq"></input>
                            <br>
                        </div>
                        <div class="row text-center">
                            <div class="col-2"></div>
                            <div class="col-8">
                                <input type="submit" value="SET" class="btn btn-success btn-block mt-2"></input>
                            </div>
                            <div class="col-2"></div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card my-2 col-12">
                <div class="row card-header">
                    <i class="fas fa-table mr-1"></i>
                    <strong>Reset default settings</strong>
                </div>
                <div class="card-body">
                    <form method="POST" action="/api/v1/setup/resetSettings">
                        <div class="row text-center">
                            <div class="col-2"></div>
                            <div class="col-8">
                                <input type="submit" value="RESET SETTINGS" class="btn btn-danger btn-block mt-2"></input>
                            </div>
                            <div class="col-2"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
</main>
{% endblock %}