{% extends "layout.html" %}

{% block content %}
<main>
    <script>
                var intTime=1000;
                // 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
                        $("#Chan0").html(result.Ch0);
                        $("#Chan1").html(result.Ch1);
                        $("#Chan2").html(result.Ch2);
                        $("#Chan3").html(result.Ch3);
                        $("#Chan4").html(result.Ch4);
                        $("#Chan5").html(result.Ch5);
                        $("#Chan6").html(result.Ch6);
                        $("#Chan7").html(result.Ch7);
                        $("#LogFrequency").html(result.Freq);
                        $("#LoggerTime").html(result.timeLog);
                        $("#ServerTime").html(result.timeSrv);
                        $("#ChanScaleMin1").html(result.ChScaleMin1);
                        $("#ChanScaleMax1").html(result.ChScaleMax1);
                        $("#ChanRealMin1").html(result.ChRealMin1);
                        $("#ChanRealMax1").html(result.ChRealMax1);

                    }});

                    timeout = setTimeout(dataRefresh, intTime);
                }
    </script>
    <div class="container-fluid py-2">
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-table mr-1"></i>
                Logger Timer
            </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">
                <i class="fas fa-table mr-1"></i>
                Channel 1 Settings
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-2 input-group mb-3 input-group-text">
                        <strong>Valori reali (current:&nbsp;<span id="Chan0"></span> ) </strong>
                    </div>
                    <div class="col-5">
                        <form method="POST" action="/api/v1/rmin1">
                            <div class="input-group mb-3">
                                <span class="input-group-text">Min: &nbsp; <span id="ChanRealMin1"></span></span>
                                <div class="input-group-append">
                                    <input type="submit" value="SET MIN" class="btn btn-success"></input>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-5">
                        <form method="POST" action="/api/v1/rmax1">
                            <div class="input-group mb-3">
                                <span class="input-group-text">Max: &nbsp; <span id="ChanRealMax1"></span></span>
                                <div class="input-group-append">
                                    <input type="submit" value="SET MAX" class="btn btn-success"></input>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-2 input-group mb-3 input-group-text">
                        <strong>Fattori di scala</strong>
                    </div>
                    <div class="col-5">
                        <form method="POST" action="/api/v1/smin1">
                            <div class="input-group mb-3">
                                <span class="input-group-text">Min: &nbsp; <span id="ChanScaleMin1"></span></span>
                                <input type="number" class="form-control" id="ScaleMin1" name="ScaleMin1"></input>
                                <div class="input-group-append">
                                    <input type="submit" value="SET" class="btn btn-success"></input>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-5">
                        <form method="POST" action="/api/v1/smax1">
                            <div class="input-group mb-3">
                                <span class="input-group-text">Max: &nbsp; <span id="ChanScaleMax1"></span></span>
                                <input type="number" class="form-control" id="caleMax1" name="ScaleMax1"></input>
                                <div class="input-group-append">
                                    <input type="submit" value="SET" class="btn btn-success"></input>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
</main>
{% endblock %}