{% extends "layout.html" %}

{% block content %}
<style>
    .controller-box{
        text-align: center;
    }
</style>

<script>
    function sendCommand(command, params={}) {
        console.log({action: 'sendCommand', command: command, params: params});
        params['command'] = command;
        $.post("/api/command/", params).done(function (json) {
            console.log({action: 'sendCommand', json: json});
        }, 'json')
    }

    $(document).on('pageinit', function() {
        $('#slider-speed').on("slidestop", function (event) {
            let params = {
                speed: $("#slider-speed").val(),
            };
            sendCommand('speed', params);
        });
    });

</script>

<div class="controller-box">
    <h1>Remote Controller</h1>
</div>

<div class="controller-box">
    <div data-role="controlgroup" data-type="horizontal">
        <a href="#" data-role="button" onclick="sendCommand('takeOff'); return false;">Take Off</a>
        <a href="#" data-role="button" onclick="sendCommand('land'); return false;">Land</a>
    </div>
</div>


<div style="display: flex; justify-content: center;">
    <table style="align-self: center;">
        <td>
            <div style="text-align: center;">
                <div class="ui-nodisc-icon ui-alt-icon">
                    <a id="up" href="#"
                       class="ui-btn ui-shadow ui-corner-all ui-icon-carat-u
                              ui-btn-icon-notext ui-btn-inline"
                       onclick="sendCommand('up'); return false;"></a>
                </div>
                <div class="ui-nodisc-icon ui-alt-icon">
                   <a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-forward
                                      ui-btn-icon-notext ui-btn-inline"
                      onclick="sendCommand('clockwise'); return false;"></a>
                   <a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-back
                                      ui-btn-icon-notext ui-btn-inline"
                      onclick="sendCommand('counterClockwise'); return false;"></a>
                </div>
                <div class="ui-nodisc-icon ui-alt-icon">
                    <a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-carat-d
                                       ui-btn-icon-notext ui-btn-inline"
                       onclick="sendCommand('down'); return false;"></a>
                </div>
            </div>
        </td>

        <td>
            <div style="text-align: center;">
                <div class="ui-nodisc-icon ui-alt-icon">
                    <a href="#"
                       class="ui-btn ui-shadow ui-corner-all ui-icon-arrow-u
                                       ui-btn-icon-notext ui-btn-inline"
                       onclick="sendCommand('forward'); return false;"></a>
                </div>
                <div class="ui-nodisc-icon ui-alt-icon">
                   <a href="#"
                      class="ui-btn ui-shadow ui-corner-all ui-icon-arrow-l
                             ui-btn-icon-notext ui-btn-inline"
                      onclick="sendCommand('left'); return false;"></a>
                   <a href="#"
                      class="ui-btn ui-shadow ui-corner-all ui-icon-arrow-r
                             ui-btn-icon-notext ui-btn-inline"
                      onclick="sendCommand('right'); return false;"></a>
                </div>
                <div class="ui-nodisc-icon ui-alt-icon">
                    <a href="#"
                       class="ui-btn ui-shadow ui-corner-all ui-icon-arrow-d
                              ui-btn-icon-notext ui-btn-inline"
                       onclick="sendCommand('back'); return false;"></a>
                </div>
            </div>
        </td>
    </table>
</div>

<div class="controller-box">
    <h3>Speed</h3>
    <input type="range" name="slider-2" id="slider-speed" data-highlight="true" min="0" max="100" value="10">
</div>

<div class="controller-box">
    <h3>Flip</h3>
    <div data-role="controlgroup" data-type="horizontal">
        <a href="#" data-role="button" data-inline="true" onclick="sendCommand('flipFront'); return false;">Forward</a>
        <a href="#" data-role="button" data-inline="true" onclick="sendCommand('flipLeft'); return false;">Left</a>
        <a href="#" data-role="button" data-inline="true" onclick="sendCommand('flipRight'); return false;">Right</a>
        <a href="#" data-role="button" data-inline="true" onclick="sendCommand('flipBack'); return false;">Back</a>
    </div>
</div>

<div class="controller-box">
    <h3>ADVANCED MODE</h3>
    <div data-role="controlgroup" data-type="horizontal">
        <a href="#" data-role="button" data-inline="true" onclick="sendCommand('patrol'); return false;">Patrol</a>
        <a href="#" data-role="button" data-inline="true" onclick="sendCommand('stopPatrol'); return false;">Stop Patrol</a>
        <a href="#" data-role="button" data-inline="true" onclick="sendCommand('faceDetectAndTrack'); return false;">Face Detect And Track</a>
        <a href="#" data-role="button" data-inline="true" onclick="sendCommand('stopFaceDetectAndTrack'); return false;">Stop Face Detect And Track</a>
    </div>
    <br>
    <img src="/video/streaming">
</div>


{% endblock %}