{% extends "layout.html" %}
{% load staticfiles %}

{% block content %}
<div class="container">
    <div class="row">
        {% include "account/sub_nav.html" %}
        <div style="margin-left: 30px">
            {% include "admin/sub_nav.html" %}
            <h1>Board status</h1>
        </div>
        <div class="span7">
            <table class="table table-bordered" id="tableId">
                <thead>
                    <tr>
                        <th>Board MID</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for b in boards %}
                    <tr>
                        <td>{{ b.mid }}</td>
                        <td><span class="label label-{% if b.online %}success{% else %}important{% endif %}">{% if b.online %}Online{% else %}Offline{% endif %}</span></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="span5" style="position: fixed;right: 10%; border: 1px slategray solid; padding: 15px;">    
            <div>
                <input type="text" id="temp" disabled="true"><br/>
                <button class="btn btn-primary" onclick="getTemp()">Get Temperature</button>
            </div>
            <br><br>

            <div>
                Heater Input: <input type="number" size="3" min="0" max="250" id="heater_val"><br/>
                Fan Input:<input type="number" size="3" min="0" max="250" id="fan_val" style="margin-left: 20px"><br/>
                <button class="btn btn-primary" onclick="setParams()">Set Parameters</button>
                <br><br>
            </div>
            <br><br>

            <div>
                <button class="btn btn-primary" onclick="resetParams()">Reset Parameters</button>
            </div>           

        </div>

    </div>
</div>
<style type="text/css">
    .highlight {
        background-color: lightblue;
    }
</style>
<script>
    var BASE_URL = window.location.origin;
    $("#tableId").on("click", "tr", function(e) {
        $("#tableId").find("tr.highlight").removeClass("highlight");
        $(this).addClass("highlight");
    });
    
    function resetParams() {
        var selected_machine = document.getElementsByClassName("highlight");
        if (selected_machine.length == 0) {
            alert("Please select a machine first");
            return;
        }
        var selected_mid = selected_machine[0].getElementsByTagName('td')[0].innerHTML;
        var request = $.ajax({
            url : BASE_URL + '/admin/resetdevice',
            method : 'POST',
            data : {
                'mid' : selected_mid
            }
        });

        request.done(function(data){
            if (data.status_code == 200) {
                document.getElementById("temp").value = data.message;
                document.getElementById("fan_val").value = 100;
                document.getElementById("heater_val").value = 0;
            }
            else {
                alert(data.message);
            }
        });
    }

    function setParams() {
        var selected_machine = document.getElementsByClassName("highlight");
        if (selected_machine.length == 0) {
            alert("Please select a machine first");
            return;
        }
        var selected_mid = selected_machine[0].getElementsByTagName('td')[0].innerHTML;
        var fan_value = document.getElementById("fan_val").value;
        var heater_value = document.getElementById("heater_val").value;

        var isInputOK = !isNaN(fan_value) && fan_value >=0 && fan_value <= 250 && !isNaN(heater_value) && heater_value >=0 && heater_value;
        if (!isInputOK) {
            alert("Please enter a value between 0 and 250");
            return;
        }

        var request = $.ajax({
            url : BASE_URL + '/admin/setdevice',
            method : 'POST',
            data : {
                'mid' : selected_mid,
                'fan' : fan_value,
                'heat' : heater_value
            }
        });

        request.done(function(data){
            if (data.status_code == 200) {
                document.getElementById("temp").value = data.message;
            }
            else {
                alert(data.message);
            }
        });
    }
    var mydata;
    function getTemp() {
        var selected_machine = document.getElementsByClassName("highlight");
        if (selected_machine.length == 0) {
            alert("Please select a machine first");
            return;
        }
        var selected_mid = selected_machine[0].getElementsByTagName('td')[0].innerHTML;
        var request = $.ajax({
            url : BASE_URL + '/admin/gettemp',
            method : 'POST',
            data : {
                'mid' : selected_mid
            }
        });

        request.done(function(data){
            mydata = data;
            if (data.status_code == 200) {
                document.getElementById("temp").value = data.message;
            }
            else {
                alert(data.message);
            }
        });
    }
</script>

{% endblock %}