
{% extends "layout.jinja2" %}

{% block content %}

<div class="content">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 well" style="text-align:center;">
                <h1>Run Mode: <span id="runMode">Loading...</span></h1>
                <button class="btn btn-lg btn-warning runModeBtn" data-mode="POC">POC</button>
                <button class="btn btn-lg btn-warning runModeBtn" data-mode="MANUAL">Manual</button>
                <button class="btn btn-lg btn-warning runModeBtn" data-mode="TIMER">Timer</button>
                <br/><br/>
                <p>Set by <span id="runModeSetBy">Loading...</span> at <span id="runModeSetTime">Loading...</span>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <h1>POC Setpoints</h1>
                <div class="table table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <td>Name</td>
                                <td>Value</td>
                                <td></td>
                                <td>Stored By</td>
                                <td>Last Time Stored</td>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

    <script>

    function updateRunMode(data){
        $('#runMode').text(runModeToString(data.updated.value));
        $('#runModeSetBy').text(data.updated.storedBy);
        $('#runModeSetTime').text(data.updated.lastStored);
    }

    function makeFormForSetpoint(i, s){
        if(s.name == "runMode"){
            $('#runMode').text(runModeToString(s.value));
            $('#runModeSetBy').text(s.storedBy);
            $('#runModeSetTime').text(s.lastStored);
            return;
        }
        var row = '<tr>';
        row += '<td>' + s.name +'</td>';
        row += '<td><input type="number" class="form-control" id="' + s.name + '" value="' + s.value + '"></td>';
        row += '<td><button class="btn btn-default setbtn" data-setpoint="'+ s.name + '">Update</button></td>';
        row += '<td><input disabled type="text" class="form-control" id="' + s.name + '-storedBy" value="' + s.storedBy + '"></td>';
        row += '<td><input disabled type="text" class="form-control" id="' + s.name + '-lastStored" value="' + s.lastStored + '"></td>';
        row += '</tr>';
        $('tbody').append(row);
    }

    function runModeToString(rm){
        if (rm == 0){
            return "POC";
        } else if (rm == 1) {
            return "MANUAL";
        } else if (rm == 2) {
            return "TIMER";
        }
    }

    function runModeFromString(rm){
        if (rm == "POC"){
            return 0;
        } else if (rm == "MANUAL") {
            return 1;
        } else if (rm == "TIMER") {
            return 2;
        }
    }

    function updateSingleRow(data){
        var name = data.updated.name;
        var storedBy = data.updated.storedBy;
        var value = data.updated.value;
        $("#"+ name).val(value);
    }

    function getSetpoints(){
        $('tbody').empty();
        $.get("/json/setpoints", {}, function(data){
            $.each(data.setpoints, makeFormForSetpoint);
            $('.setbtn').click(function(e){
                e.preventDefault();
                var setpoint = $(this).data('setpoint');
                var value = $("#"+ setpoint).val();
                $.post({
                    dataType: 'json',
                    data: JSON.stringify({name: setpoint, value: value}),
                    contentType: "application/json; charset=utf-8",
                    url: "/json/setpoints",
                    success: updateSingleRow
                });
            });
        });
    }
    getSetpoints();

    $('.runModeBtn').click(function(e){
        e.preventDefault();
        var modeStr = $(this).data('mode');
        var mode = runModeFromString(modeStr);
        $.post({
            dataType: 'json',
            data: JSON.stringify({mode: mode}),
            contentType: "application/json; charset=utf-8",
            url: "/json/mode",
            success: updateRunMode
        });
    });

    </script>
    {% endblock content %}
