{% extends "train-base.html" %}


{% block header-extras %}
    <script>

        function send_train_command(command) {
            $.post("{% url 'L60Train:train-command' %}", {
                command: command,
                data: 'Y',
                csrfmiddlewaretoken: '{{csrf_token}}'
            });
        }

        function move_train_axis(command) {
            clear_position();
            var selaxis = $('input[type=radio][name=axis-select]:checked').val();
            var moveCmd = selaxis.replace("AXIS_", "").toLowerCase() + command;

            $.post("{% url 'L60Train:train-move-axis' %}", {
                command: moveCmd,
                move_amount: $("#axis-move-amount").val(),
                csrfmiddlewaretoken: '{{csrf_token}}'
            });
        }

        function send_axis_train_command(command, position) {
            clear_position();
            var selaxis = $('input[type=radio][name=axis-select]:checked').val();
            var moveCmd = selaxis.replace("AXIS_", "").toLowerCase() + command;

            $.post("{% url 'L60Train:train-axis-command' %}", {
                command: moveCmd,
                data: position,
                csrfmiddlewaretoken: '{{csrf_token}}'
            });
        }

        function show_save_setting_button(visible) {
            if (visible == true) {
                $("#set-value-button").show();
                $("#go-setting-btn").show();
            } else {
                $("#set-value-button").hide();
                $("#go-setting-btn").hide();
            }
        }

        function clear_position() {
            $("#axis-current-pos").html("Current Axis Position: ----");
        }

        function update_axis_position_data() {
            $.post("{% url 'L60Train:train-get-axis-position' %}", {
                axis: $('input[type=radio][name=axis-select]:checked').val().replace("AXIS_", ""),
                csrfmiddlewaretoken: '{{csrf_token}}'
            }, function (data) {
                $("#axis-current-pos").html("Current Axis Position: " + data + " in.");
            });
        }

        function get_position_db_value() {
            var checkedName = $('input[type=radio][name=setting-select]:checked').attr('id');
            if (checkedName.substring(0, 3) == 'pos') {
                $.post("{% url 'L60Train:get-axis-position-db' %}", {
                    settingid: $('input[type=radio][name=setting-select]:checked').val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                }, function (data) {
                    $("#axis-db-setting").html(data);
                });
            } else {
                $.post("{% url 'L60Train:get-axis-setting-db' %}", {
                    settingid: $('input[type=radio][name=setting-select]:checked').val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                }, function (data) {
                    $("#axis-db-setting").html(data);
                });
            }
        }

        $(function () {

            $("#axis-select-group").buttonset();
            $("#setting-select-group").buttonset();

            $("#exit-button").click(function () {
                window.location.href = "{% url 'L60Train:train-menu' %}";
            });

            $('input[type=radio][name=axis-select]').click(function () {
                document.trainAxisForm.submit();
            });

            $('input[type=radio][name=setting-select]').click(function () {
                show_save_setting_button(true);
                get_position_db_value();
            });

            $("#trolley-pump-btn").click(function () {
                if ($(this).val() == "off") {
                    $(this).val("on");
                    $(this).css('background-color', 'lightgreen');
                } else {
                    $(this).val("off");
                    $(this).css('background-color', 'darkgray');
                }

                $.post("{% url 'L60Train:train-command' %}", {
                    command: 'trolley-pump',
                    data: $(this).val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                });
            });

            $("#flipper-pump-btn").click(function () {
                if ($(this).val() == "off") {
                    $(this).val("on");
                    $(this).css('background-color', 'lightgreen');
                } else {
                    $(this).val("off");
                    $(this).css('background-color', 'darkgray');
                }

                $.post("{% url 'L60Train:train-command' %}", {
                    command: 'flipper-pump',
                    data: $(this).val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                });
            });

            $("#axis-up-btn").click(function () {
                move_train_axis("-move-up");
            });

            $("#axis-back-btn").click(function () {
                move_train_axis("-move-back");
            });

            $("#axis-left-btn").click(function () {
                move_train_axis("-move-left");
            });

            $("#axis-right-btn").click(function () {
                move_train_axis("-move-right");
            });

            $("#axis-down-btn").click(function () {
                move_train_axis("-move-down");
            });

            $("#axis-front-btn").click(function () {
                move_train_axis("-move-front");
            });

            $("#zero-axis-btn").click(function () {
                send_axis_train_command("-re-zero", "");
            });

            $("#home-axis-btn").click(function () {
                send_axis_train_command("-go-home", "");
            });

            $("#go-setting-btn").click(function () {
                var selsetting = $('input[type=radio][name=setting-select]:checked').val();
                var checkedName = $('input[type=radio][name=setting-select]:checked').attr('id');
                if (checkedName.substring(0, 3) == 'pos') {
                    send_axis_train_command("-go-position", selsetting);
                } else {
                    send_axis_train_command("-go-setting", selsetting);
                }
            });

            $("#update-position-button").click(function () {
                update_axis_position_data();
            });

            $("#train-axis-stop").click(function () {
                send_train_command('train-axis-stop');
            });

            $("#set-value-button").click(function () {
                var checkedName = $('input[type=radio][name=setting-select]:checked').attr('id');
                if (checkedName.substring(0, 3) == 'pos') {
                    $.post("{% url 'L60Train:train-save-axis-position' %}", {
                        axis: $('input[type=radio][name=axis-select]:checked').val().replace("AXIS_", ""),
                        settingid: $('input[type=radio][name=setting-select]:checked').val(),
                        csrfmiddlewaretoken: '{{csrf_token}}'
                    }, function (data) {
                        $("#axis-current-pos").html("Current Axis Position: " + data);
                        alert("Axis Position Value Saved.");
                        get_position_db_value();
                    });
                } else {
                    $.post("{% url 'L60Train:train-save-axis-setting' %}", {
                        axis: $('input[type=radio][name=axis-select]:checked').val().replace("AXIS_", ""),
                        settingid: $('input[type=radio][name=setting-select]:checked').val(),
                        csrfmiddlewaretoken: '{{csrf_token}}'
                    }, function (data) {
                        $("#axis-current-pos").html("Current Axis Position: " + data);
                        alert("Axis Setting Value Saved.");
                        get_position_db_value();
                    });
                }
            });

            var moveAdjValues = ["0.01", "0.05", "0.1", "0.5", "1", "2", "3", "4", "5"];
            var moveAdjIndex = 1;
            var moveVal = $('#axis-move-amount').val();

            if (moveVal.length > 0) {
                for (var i = 0; i < moveAdjValues.length; i++) {
                    if (moveVal == moveAdjValues[i]) {
                        moveAdjIndex = i;
                        break;
                    }
                }
            }

            $('#minus-amount').click(function () {
                moveAdjIndex--;
                if (moveAdjIndex < 0) {
                    moveAdjIndex = 0;
                }
                $('#axis-move-amount').val(moveAdjValues[moveAdjIndex]);
            });

            $('#plus-amount').click(function () {
                moveAdjIndex++;
                if (moveAdjIndex > moveAdjValues.length - 1) {
                    moveAdjIndex = moveAdjValues.length - 1;
                }
                $('#axis-move-amount').val(moveAdjValues[moveAdjIndex]);
            });

        });
    </script>
{% endblock %}

{% block pagehead %}
    <h3 class="site-deck" style="text-align: center;">L60 Axis Training -- {{ current_dafe.display_name }}</h3>
{% endblock %}

{% block content %}
    <form name="trainAxisForm" id="trainAxisForm" method="post" style="margin-bottom: 0;">
        {% csrf_token %}
        <div class="well well-small" style="margin-bottom: 0; margin-top: 0; padding: 2px;">
            <table style="width: 100%; height: 550px;">
                <tr>
                    <td style="border-right: thin solid #000000; vertical-align: top;">
                        <div id="axis-select-group">
                            {% for axis in axis_list %}
                                <input type="radio" id="axis-{{ axis.tag }}" name="axis-select" value="{{ axis.tag }}"
                                       {% if current_axis == axis.tag %}checked{% endif %}>
                                <label class="train-axis-select-btn" style="margin-top: 7px;"
                                       for="axis-{{ axis.tag }}">{{ axis.description|slice:"4:10" }}</label>
                            {% endfor %}
                        </div>
                    </td>
                    <td style="border-right: thin solid #000000; vertical-align: top;">
                        <div id="setting-select-group">
                            {% for set in set_list %}
                                <input type="radio" id="set-{{ set.id }}" name="setting-select" value="{{ set.id }}"
                                       {% if current_setting == set.id %}checked{% endif %}>
                                <label class="train-setting-select-btn" style="margin-top: 7px;"
                                       for="set-{{ set.id }}">{{ set.axis_setting_type.tag }}</label>
                            {% endfor %}
                            {% for pos in position_list %}
                                <input type="radio" id="pos-{{ pos.id }}" name="setting-select" value="{{ pos.id }}"
                                       {% if current_setting == pos.id %}checked{% endif %}>
                                <label class="train-setting-select-btn" style="margin-top: 7px;"
                                       for="pos-{{ pos.id }}">{{ pos.location.tag }}</label>
                            {% endfor %}
                        </div>
                    </td>
                    <td style="width: 100%;">
                        <table align="center" style="width: 500px;">
                            <tr class="dosis-report-header">
                                <td colspan="3">
                                    <div id="axis-db-setting"></div>
                                </td>
                            </tr>
                            <tr style="height: 120px;">
                                <td class="train-cross-td">&nbsp;</td>
                                <td class="train-cross-td">{% if show_up_down %}
                                    <button id="axis-up-btn" name="axis-up-btn" type="button"
                                            class="btn train-axis-move-btn">Up
                                    </button>
                                {% elif show_front_back %}
                                    <button id="axis-back-btn" name="axis-back-btn" type="button"
                                            class="btn train-axis-move-btn">Back
                                    </button>{% endif %}
                                </td>
                                <td class="train-cross-td">&nbsp;</td>
                            </tr>
                            <tr style="height: 120px;">
                                <td class="train-cross-td">{% if show_left_right %}
                                    <button id="axis-left-btn" name="axis-left-btn" type="button"
                                            class="btn train-axis-move-btn">
                                        Left
                                    </button>{% endif %}
                                </td>
                                <td class="train-cross-td">
                                    &nbsp;
                                </td>
                                <td class="train-cross-td">{% if show_left_right %}
                                    <button id="axis-right-btn" name="axis-right-btn" type="button"
                                            class="btn train-axis-move-btn">
                                        Right
                                    </button>{% endif %}
                                </td>
                            </tr>
                            <tr style="height: 120px;">
                                <td class="train-cross-td">&nbsp;</td>
                                <td class="train-cross-td">{% if show_up_down %}
                                    <button id="axis-down-btn" name="axis-down-btn" type="button"
                                            class="btn train-axis-move-btn">
                                        Down
                                    </button>{% elif show_front_back %}
                                    <button id="axis-front-btn" name="axis-front-btn" type="button"
                                            class="btn train-axis-move-btn">
                                        Front
                                    </button>{% endif %}
                                </td>
                                <td class="train-cross-td">&nbsp;</td>
                            </tr>
                            <tr style="height: 75px;">
                                <td colspan="3">&nbsp;</td>
                            </tr>
                            <tr>
                                <td colspan="3">
                                    <div id="axis-current-pos" style="display: inline-block;">Current Axis Position:
                                        ----
                                    </div>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <button type="button" id="update-position-button" name="update-position-button"
                                            class="btn diag-move-adjust-button"
                                            style="width: 100px; display: inline-block;">
                                        Update
                                    </button>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td style="text-align: right; vertical-align: bottom; border-left: thin solid #000000;">
                        <div style="height: 100px; text-align: center;">
                            <button id="zero-axis-btn" name="zero-axis-btn" type="button"
                                    class="btn train-axis-action-btn">
                                Re-Zero Axis
                            </button>
                        </div>
                        <div style="height: 100px; text-align: center;">
                            <button id="home-axis-btn" name="home-axis-btn" type="button"
                                    class="btn train-axis-action-btn">
                                Go Home
                            </button>
                        </div>
                        <div style="height: 100px; text-align: center;">
                            <button id="go-setting-btn" name="go-setting-btn" type="button"
                                    class="btn train-axis-action-btn" style="display: none;">
                                Go To Setting
                            </button>
                        </div>
                        {% if current_axis == 'AXIS_C' %}
                        <div style="height: 100px; text-align: center;">
                            <button id="trolley-pump-btn" name="trolley-pump-btn" type="button" value="off"
                                    class="btn train-axis-action-btn" style="background: darkgray none;">
                                Trolley Pump
                            </button>
                        </div>
                        {% endif %}
                        {% if current_axis == 'AXIS_F' %}
                        <div style="height: 100px; text-align: center;">
                            <button id="flipper-pump-btn" name="flipper-pump-btn" type="button" value="off"
                                    class="btn train-axis-action-btn" style="background: darkgray none;">
                                Flipper Pump
                            </button>
                        </div>
                        {% endif %}
                        <div style="width: 180px;">
                            Move Amt: <input id="axis-move-amount" name="axis-move-amount" type="text"
                                             style="width: 40px;"
                                             value="0.05" class="diag-short-input">in.&nbsp;&nbsp;&nbsp;
                            <button id="minus-amount" name="minus-amount" type="button" class="btn train-btn">
                                <img class="img-rounded" src="{{ STATIC_URL }}img/cc_remove.png">
                            </button>
                            &nbsp;&nbsp;&nbsp;
                            <button id="plus-amount" name="plus-amount" type="button" class="btn train-btn">
                                <img class="img-rounded" src="{{ STATIC_URL }}img/cc_add.png">
                            </button>
                        </div>
                    </td>
                </tr>
            </table>
            <table style="height: 60px; vertical-align: bottom; width: 100%;">
                <tr style="border-top: thin solid #000000;">
                    <td>
                        <button type="button" id="exit-button" name="exit-button" class="btn diag-move-adjust-button">
                            Exit
                        </button>
                    </td>
                    <td>&nbsp;</td>
                    <td>
                        <button type="button" id="train-axis-stop" name="train-axis-stop"
                                class="btn diag-move-adjust-button"
                                style="margin-left: 50px; background: #c02025 none; color: white; font-weight: bold; font-size: 16pt; width: 200px;">
                            STOP
                        </button>
                    </td>
                    <td style="width: 350px;">
                        <button type="button" id="set-value-button" name="set-value-button"
                                class="btn diag-move-adjust-button" style="width: 100px; display: none;">
                            Save Value
                        </button>
                    </td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </div>
    </form>
{% endblock %}