extends layout

block content
    div.page-content
        div.content-wrapper
            div
                div.col-md-6
                    div.panel.panel-flat
                        div.panel-heading
                            h6.panel-title Move
                            div.heading-elements
                                div.heading-btn.btn-group
                                    button.btn.btn-xs.btn-danger(type="button") E-Stop
                                    button.btn.btn-xs.btn-warning(type="button", id="soft-reset") Soft-Reset
                        div.container-fluid
                            label.text-center MOVE AMOUNT (mm)
                            div.move-amount-wrapper
                                button.move-amount.no-radius.fb-button.leftmost 1
                                button.move-amount.no-radius.fb-button.move-amount-selected 10
                                button.move-amount.no-radius.fb-button.leftmost 100
                                button.move-amount.no-radius.fb-button.leftmost 1000
                                button.move-amount.no-radius.fb-button.leftmost 10000
                            table.jog-table(style="border: 0px none;")
                                tbody
                                    tr
                                        td
                                            //-button.i.fa.fa-camera.arrow-button.fb-button
                                        td
                                        td
                                        td
                                            button.fb-button.fa.fa-2x.arrow-button.radius.fa-arrow-up(title="move y axis", id="yup")
                                        td
                                        td
                                        td
                                            button.fb-button.fa.fa-2x.arrow-button.radius.fa-arrow-up(title="move z axis", id="zup")
                                    tr
                                        td
                                            button.i.fa.fa-home.arrow-button.fb-button(id="home")
                                        td
                                        td
                                            button.fb-button.fa.fa-2x.arrow-button.radius.fa-arrow-left(title="move x axis", id="xdown")
                                        td
                                            button.fb-button.fa.fa-2x.arrow-button.radius.fa-arrow-down(title="move y axis", id="ydown")
                                        td
                                            button.fb-button.fa.fa-2x.arrow-button.radius.fa-arrow-right(title="move x axis", id="xup")
                                        td
                                        td
                                            button.fb-button.fa.fa-2x.arrow-button.radius.fa-arrow-down(title="move z axis", id="zdown")
                                    tr
                                        td

                            div.row
                                div.col-xs-3
                                    label X AXIS
                                div.col-xs-3
                                    label Y AXIS
                                div.col-xs-3
                                    label Z AXIS
                            div.row
                                div.col-xs-3
                                    input.form-control(id="current_x", type="number", disabled="", value=0)
                                div.col-xs-3
                                    input.form-control(id="current_y", type="number", disabled="", value=0)
                                div.col-xs-3
                                    input.form-control(id="current_z", type="number", disabled="", value=0)
                                div.col-xs-3
                                    label Motor Coordinates (mm)
                            div.row
                                div.col-xs-3
                                    input.form-control(type="number", value="")
                                div.col-xs-3
                                    input.form-control(type="number", value="")
                                div.col-xs-3
                                    input.form-control(type="number", value="")
                                div.col-xs-3
                                    button.full-width.green.go.fb-button GO
                            div.row
                                div.col-md-12
                                    textarea.form-control(id='console', readonly='readonly', rows='7')

                div.col-md-6
                    div.panel.panel-flat
                        div.panel-heading
                            h6.panel-title Webcam Feeds
                        div.container-fluid
                            div.image-flipper
                                div
                                    img(style="-webkit-user-select: none;",src=motion_url)
                                div.no-flipper-image-container
                                button.image-flipper-left.fb-button(hidden="") Prev
                                button.image-flipper-right.fb-button(hidden="") Next

    script.
        //$( document ).ready(function() {
            var socket = io();
            var psconsole = $('#console');

            socket.on('response', function (data) {
                $('#current_x').val(data.current_x);
                $('#current_y').val(data.current_y);
                $('#current_z').val(data.current_z);
                $('#console').append('>>> '+data.log);

                if(psconsole.length) {
                    psconsole.scrollTop(psconsole[0].scrollHeight - psconsole.height());
                }
            });


            console.log('ready!');

            $('#home').click(function(e) {
                execute('home');
            });
            $('#xup').click(function(e) {
                execute('xup');
                //console.log('move: x-up');
            });

            $('#xdown').click(function(e) {
                execute('xdown');
                //console.log('move: x-down');
            });

            $('#yup').click(function(e) {
                execute('yup');
            });

            $('#ydown').click(function(e) {
                execute('ydown');
            });

            $('#zup').click(function(e) {
                execute('zup');
            });

            $('#zdown').click(function(e) {
                execute('zdown');
            });

            $('#soft-reset').click(function(e) {
                execute('soft-reset');
            });

            function execute(action) {
                $.ajax({
                    url: "./api/controls/move",
                    method: 'post',
                    data: {action: action}
                    }).done(function(res) {
                        //console.log(res.msg);
                    });
            }

            // WASD and up/down keys
            $(document).keydown(function (e) {
                var keyCode = e.keyCode || e.which;

                if ($('#command').is(':focus')) {
                    // don't handle keycodes inside command window
                    return;
                }

                switch (keyCode) {
                case 65:
                    // a key X-
                    e.preventDefault();
                    $('#xdown').click();
                    break;
                case 68:
                    // d key X+
                    e.preventDefault();
                    $('#xup').click();
                    break;
                case 87:
                    // w key Y+
                    e.preventDefault();
                    $('#yup').click();
                    break;
                case 83:
                    // s key Y-
                    e.preventDefault();
                    $('#ydown').click();
                    break;
                case 38:
                    // up arrow Z+
                    e.preventDefault();
                    $('#zup').click();
                    break;
                case 40:
                    // down arrow Z-
                    e.preventDefault();
                    $('#zdown').click();
                    break;
                }
            });

        //});