AnaLogger/server/templates/settings.html

{% extends "layout.html" %}

{% block content %}
<main>
    <script type="text/javascript">
        var intTime=400;
        refreshInput();

        // carico la prima volta i dati
        function refreshInput() {
            // scarico i dati aggioranti
            $.ajax({url: "/api/v1/channels/current", success: function(result){
                // compilo i dati scaricati
                $("#CurrIn").html(result.CurrIn);
                $("#CurrOut").html(result.CurrOut);
                $("#LogFrequency").html(result.Freq);
                $("#LoggerTime").html(result.timeLog);
                $("#ServerTime").html(result.timeSrv);
                $("#ddlChannels").val(result.numCh);
                $("#MinOut").val(result.MinOut);
                $("#MaxOut").val(result.MaxOut);
                $("#MinIn").html(result.MinIn);
                $("#MaxIn").html(result.MaxIn);
            }});

            timeoutSetting = setTimeout(refreshSettings, intTime);
        }

        // avvio timer
        var timeoutSetting = setTimeout(refreshSettings, intTime);
        
        function refreshSettings() {
            // scarico i dati aggioranti
            $.ajax({url: "/api/v1/channels/current", success: function(result){
                // compilo i dati scaricati
                $("#CurrIn").html(result.CurrIn);
                $("#CurrOut").html(result.CurrOut);
                $("#LogFrequency").html(result.Freq);
                $("#LoggerTime").html(result.timeLog);
                $("#ServerTime").html(result.timeSrv);
                // $("#MinOut").val(result.MinOut);
                // $("#MaxOut").val(result.MaxOut);
                // $("#MinIn").html(result.MinIn);
                // $("#MaxIn").html(result.MaxIn);
            }});

            timeoutSetting = setTimeout(refreshSettings, 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 setChannel(ddlChannels) {
            // fare vera funzione x salvare QUALE sia il canale attivo ins etup 8all'apertura va impostato 1...)
            var selectedText = ddlChannels.options[ddlChannels.selectedIndex].innerHTML;
            var selectedValue = ddlChannels.value;
            // alert("Selected Text: " + selectedText + " Value: " + selectedValue);
            $.ajax({
                type: 'PUT'
                ,url: "/api/v1/setup/selectChannel/" + ddlChannels.value
                ,data: ""
                // ,success: function(){
                //     alert('Log Stopped');
                // }
            });
        };

    </script>
    <div class="container-fluid py-2">
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-table mr-1"></i>
                <strong>Logger Timer</strong>
            </div>
            <div class="row" id="setFrequency">
                <form class="col-12" method="POST" action="/api/v1/frequency">
                    <div class="input-group">
                        <span class="input-group-text">Periodo di campionamento (ms): &nbsp; <span id="LogFrequency"></span></span>
                        <input type="number" class="form-control" id="LogFreq" name="LogFreq"></input>
                        <div class="input-group-append">
                        <input type="submit" value="SET" class="btn btn-success"></input>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="card mb-4">
            <div class="card-header">
                <div class="row">
                    <div class="col-4">
                        <i class="fas fa-table mr-1"></i>
                        <strong>Channel Setup</strong>
                    </div>
                    <div class="col-4 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>
                            </select>
                          </div>
                    </div>
                    
                </div>
            </div>
            <h5>
            <div class="card-body text-center">
                <div class="card-body row text-center">
                    <div class="col-2"></div>
                    <div class="col-8">
                        <div class="row">
                            <div class="col-4">MIN</div>
                            <div class="col-4">Current</div>
                            <div class="col-4">MAX</div>
                        </div>
                    </div>
                    <div class="col-2"></div>
                </div>
                <div class="card-body row text-center">
                    <div class="col-2">IN</div>
                    <div class="col-8">
                        <div class="row">
                            <div class="col-4"><span class="badge badge-secondary text-center" id="MinIn">000</span></div>
                            <div class="col-4"><span class="badge badge-warning text-center" id="CurrIn">000</span></div>
                            <div class="col-4"><span class="badge badge-info text-center" id="MaxIn">000</span></div>
                        </div>
                    </div>
                    <div class="col-2"></div>
                </div>
                <div class="card-body row text-center">
                    <div class="col-2"></div>
                    <div class="col-8">
                        <div class="row">
                            <div class="col-4"><button type="button" class="btn btn-secondary btn-block" onclick="saveMin()">Save Min</button></div>
                            <div class="col-4"></div>
                            <div class="col-4"><button type="button" class="btn btn-info btn-block" onclick="saveMax()">Save Max</button></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-4">
                                    <input type="number" class="form-control text-center" id="MinOut" name="MinOut"></input>
                                </div>
                                <div class="col-4"><span class="badge badge-warning" id="CurrOut">{{ Out0 }}</span></div>
                                <div class="col-4">
                                    <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 text-center">
                    <div class="col-2"></div>
                    <div class="col-8">
                        <div class="row">
                            <input type="submit" value="SET OUTPUT SCALE" class="btn btn-success btn-block mx-2 my-2"></input>
                        </div>
                    </div>
                    <div class="col-2"></div>
                </div>
                </form>
            </div>
            </h5>
        </div>
    </div>
</main>
{% endblock %}