{% extends "support.html" %}


{% block head %}
    {{ block.super }}
    <script>
        function computeMeanVals(row, side, axis) {
            var retval = 0;
            var sum = 0;

            if (side == "1") {
                for (var i = 1; i < 7; i++) {
                    sum += parseFloat($("#div_can_" + axis + "_" + row + "_" + i + " :input").val());
                }
            } else if (side == "12") {
                for (var i = 7; i < 13; i++) {
                    sum += parseFloat($("#div_can_" + axis + "_" + row + "_" + i + " :input").val());
                }
            }

            retval = sum / 6;

            return retval;
        }

        function updateDeltaInput(idx, mean, row, axis) {
            var tmpVal;
            var titleVal = row + idx + " " + axis + " Delta: ";

            var inputVal = parseFloat($("#div_can_" + axis + "_" + row + "_" + idx + " :input").val());
            tmpVal = inputVal - parseFloat(mean);
            if (tmpVal >= 0) {
                titleVal += "+";
            }
            titleVal += parseFloat(tmpVal.toFixed(3));
            $("#div_can_" + axis + "_" + row + "_" + idx).attr("title", titleVal);
            $("#div_can_" + axis + "_" + row + "_" + idx).tooltip({ content: titleVal });
        }

        function updateDeltaVals(mean, row, side, axis) {
            var inputVal;

            if (side == "1") {
                for (var i = 1; i < 7; i++) {
                    updateDeltaInput(i, mean, row, axis);
                }
            } else if (side == "12") {
                for (var i = 7; i < 13; i++) {
                    updateDeltaInput(i, mean, row, axis);
                }
            }
        }

        function loadAllMeanVals() {
            var rowlist = {A: 1, B: 2, C: 3, D: 4, E: 5};
            var axislist = {X: 1, Y: 2, Z: 3};
            var sidelist = {1: 1, 12: 2};

            for (var row in rowlist) {
                for (var axis in axislist) {
                    for (var side in sidelist) {
                        $("#" + row + side + "_" + axis + "_mean").html(parseFloat(computeMeanVals(row, side, axis).toFixed(3)));
                    }
                }
            }
        }

        function loadAllDeltaVals() {
            var rowlist = {A: 1, B: 2, C: 3, D: 4, E: 5};
            var axislist = {X: 1, Y: 2, Z: 3};
            var sidelist = {1: 1, 12: 2};

            for (var row in rowlist) {
                for (var axis in axislist) {
                    for (var side in sidelist) {
                        updateDeltaVals($("#" + row + side + "_" + axis + "_mean").html(), row, side, axis);
                    }
                }
            }
        }

        // change url search params when submitting form
        function submit_form() {
            let selected_tower = $('#dafe_select').val();
            let currentUrl = new URL(window.location.href);
            let group_select = $(`#group_select_${selected_tower}`).val()
            currentUrl.searchParams.set('dafe_select', selected_tower);
            currentUrl.searchParams.set('group_select', group_select);
            window.history.pushState({}, '', currentUrl);
        }

        $(function () {
            $("#submitval").val("");
            $(document).tooltip();
            loadAllMeanVals();

            // unhide currently selected setting group on load
            let selected_tower = $('#dafe_select').val();
            $(`#group_select_${selected_tower}`).css('display', 'inline');

            // make current url whatever is presently selected
            let currentUrl = new URL(window.location.href);
            let group_select = $(`#group_select_${selected_tower}`).val()
            currentUrl.searchParams.set('dafe_select', selected_tower);
            currentUrl.searchParams.set('group_select', group_select);
            window.history.pushState({}, '', currentUrl);

            // change which setting group is shown when tower is changed
            $('#dafe_select').on('change', function(){
                let selected_tower = $(this).val();
                $("[id^='group_select_']").css('display', 'none');
                $(`#group_select_${selected_tower}`).css('display', 'inline');
            })

            let parsedUrl = new URL(window.location.href);
            let setting = parsedUrl.searchParams.get('setting');
            $('#settings-table td').each(function() {
                if ($(this).text() === setting) {
                    $(this).css('background-color', 'lightblue')
                    $(this).siblings().css('background-color', 'lightblue');
                    let targetOffset = $(this).offset().top;
                    $('html, body').animate({ scrollTop: targetOffset }, 100);
                }
            });

            $("input[type='text']").change(function () {
                var id = $(this).closest("div").attr("id").replace("div_can_", "");

                if (id.length >= 5) {
                    var axis = id.substr(0, 1);
                    var row = id.substr(2, 1);
                    var side = id.substr(4);

                    if (parseInt(side) < 7) {
                        side = 1;
                    } else {
                        side = 12;
                    }

                    $("#" + row + side + "_" + axis + "_mean").html(parseFloat(computeMeanVals(row, side, axis).toFixed(3)));
                    updateDeltaVals($("#" + row + side + "_" + axis + "_mean").html(), row, side, axis);
                }

            });
            loadAllDeltaVals();

            $("#dafeSettingsForm").validate({
                onkeyup: false,
                errorContainer: $("#dafe-settings-validation-alert"),
                errorLabelContainer: $("ul", $("#dafe-settings-validation-alert")),
                wrapper: 'li'
            });

            $("input[id^='id_set'][type='text']").each(function () {
                $(this).rules('add', {
                    required: true,
                    messages: {
                        required: "Dafe Setting value cannot be blank."
                    }
                });
            });

            $("input[id^='id_pos'][type='text']").each(function () {
                $(this).rules('add', {
                    required: true,
                    number: true,
                    messages: {
                        required: "Dafe Position value cannot be blank.",
                        number: "Dafe Position value must be numeric."
                    }
                });
            });

            $("#apply-axis-settings").click(function () {
                $("#dafeSettingsForm").validate();
                if ($("#dafeSettingsForm").valid()) {
                    $("#submitval").val("Apply");
                    document.dafeSettingsForm.submit();
                }
            });

            $("button[id^='updbtn-']").click(function () {
                $("#dafeSettingsForm").validate();
                if ($("#dafeSettingsForm").valid()) {
                    $("#submitval").val($(this).val());
                    document.dafeSettingsForm.submit();
                }
            });

            $("#btn-preview-motor-profile").on("click", function(){
                $("[name='preview']").toggle();
            });
        });
    </script>
{% endblock %}

{% block pagehead %}
    {% include 'pagehead.html' %}
{% endblock %}

{% block content %}
    <form id="dafeSettingsForm" name="dafeSettingsForm" method="POST">
        <div class="alert alert-error" id="dafe-settings-validation-alert" style="display: none;">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <ul id="dafe-settings-validation-error-list">
            </ul>
        </div>
        {% csrf_token %}
        <div id="dafe_select_div">
            Tower:
            <select style="width: auto;" id="dafe_select" name="dafe_select">
                {% for dafe in dafe_list %}
                    <option value="{{ dafe.id }}"
                            {% ifequal dafe.id|slugify current_dafe %}selected{% endifequal %}>{{ dafe.display_name }}</option>
                {% endfor %}
            </select>

            Setting Group:

            {% for dafe, setting_group_list in dafe_setting_group_list.items %}
                <select style="width: auto; display: none;" id="group_select_{{dafe}}" name="group_select_{{dafe}}">
                    {% for setgrp in setting_group_list %}
                        <option value="{{ setgrp.id }}"
                                {% ifequal setgrp.id|slugify current_group %}selected{% endifequal %}>{{ setgrp.display_name }}</option>
                    {% endfor %}
                </select>
            {% endfor %}
            <button class="btn cancel" id="select-setting-group" name="select-setting-group" onclick="submit_form()">Show Settings</button>
            {% if current_group != 'canisters' and current_group != 'main' %}
                <button class="btn cancel" type="button" id="btn-preview-motor-profile" name="btn-preview-motor-profile">Preview Default Motor Profile Values</button>
                <button class="btn cancel" id="btn-reset-motor-profile" name="btn-reset-motor-profile">Reset Axis Motor Profile</button>
            {% endif %}

            {% if current_dafe and not initial_view %}
                <h3>{{ setting_list.axis_name }} - {{ setting_list.axis_tag }}</h3>
                {% if current_group != 'canisters' %}
                    <div>
                        <table class="table-striped" id="settings-table">
                            <caption style="font-weight:bold; font-size: 12pt;">{{ setting_list.axis_name }} Settings
                            </caption>
                            <tr>
                                <th>Tag</th>
                                <th>Setting</th>
                                <th>Value</th>
                                {% if current_group != 'main' %}
                                    <th>Encoder</th>{% endif %}
                                <th>&nbsp;</th>
                                {% if current_group != 'canisters' and current_group != 'main' %}
                                    <th name="preview" style="display:none;">Default Value</th>
                                {% endif %}
                            </tr>
                            {% for setfrm in setting_list.setting_forms %}
                                <tr>
                                    <td style="padding: 3px; margin-bottom: 5px;">{{ setfrm.setting_tag }}</td>
                                    <td title="Current Value: {{ setfrm.setting_frm.value.value }}"
                                        style="padding: 3px; margin-bottom: 5px;">
                                        {{ setfrm.setting_desc }}:
                                    </td>
                                    <td style="padding: 3px; margin-bottom: 5px;">{{ setfrm.setting_frm.value }}</td>
                                    {% if current_group != main %}
                                        <td style="padding: 3px; margin-bottom: 5px;">{% if setfrm.show_encoder %} (
                                            {{ setfrm.setting_encoder }}){% endif %}
                                        </td>{% endif %}
                                    <td><button class="btn" type="button" id="updbtn-{{ setfrm.setting_frm.value.html_name }}"
                                                name="updbtn-{{ setfrm.setting_frm.value.html_name }}" value="{{ setfrm.setting_frm.value.html_name }}">Update</button></td>
                                    {% if current_group != 'canisters' and current_group != 'main' %}
                                        <td name="preview" style="padding: 3px; margin-bottom: 5px; text-align: right; display:none;">{{ setfrm.default_value }}</td>
                                    {% endif %}
                                </tr>
                            {% endfor %}
                            <tr><td colspan="4"><hr/></td></tr>
                            {% for posfrm in setting_list.position_forms %}
                                <tr>
                                    <td style="padding: 3px; margin-bottom: 5px;">{{ posfrm.position_tag }}</td>
                                    <td title="Current Value: {{ posfrm.position_frm.pos_inch.value }}"
                                        style="padding: 3px; margin-bottom: 5px;">
                                        {{ posfrm.position_desc }}:
                                    </td>
                                    <td style="padding: 3px; margin-bottom: 5px;">{{ posfrm.position_frm.pos_inch }}</td>
                                    <td style="padding: 3px; margin-bottom: 5px;">{% if posfrm.show_encoder %} (
                                        {{ posfrm.position_encoder }}){% endif %}</td>
                                    <td><button class="btn" type="button" id="updbtn-{{ posfrm.position_frm.pos_inch.html_name }}"
                                                name="updbtn-{{ posfrm.position_frm.pos_inch.html_name }}" value="{{ posfrm.position_frm.pos_inch.html_name }}">Update</button></td>
                                </tr>
                            {% endfor %}
                        </table>
                    </div>
                </div>
                {% else %}
                    <div>
                        <table class="table table-bordered">
                            {% for posfrm in setting_list.position_forms %}
                                {% if forloop.counter in start_row_loop %}
                                    <tr>
                                    <td>
                                        <div style="margin: 0; padding: 0; width: 100%;">Mean:</div>
                                        <div id="{{ posfrm.position_tag|slice:"4:" }}_X_mean"
                                             style="width: 100%; height: 31px; padding-top: 5px;">0
                                        </div>
                                        <div id="{{ posfrm.position_tag|slice:"4:" }}_Y_mean"
                                             style="width: 100%; height: 31px; padding-top: 5px;">0
                                        </div>
                                        <div id="{{ posfrm.position_tag|slice:"4:" }}_Z_mean"
                                             style="width: 100%; height: 31px; padding-top: 5px;">0
                                        </div>
                                    </td>{% endif %}
                            {% if forloop.counter in start_can_loop %}
                                <td style="text-align: center; padding: 0;">
                                <div style="background-color: #0096c3; margin: 0; padding: 0; width: 100%;" title="">
                                    <b>{{ posfrm.position_tag|slice:"4:" }}</b></div>{% endif %}
                            <div id="div_can_{{ posfrm.axis_abbr }}_{{ posfrm.position_tag|slice:"4:5" }}_{{ posfrm.position_tag|slice:"5:" }}"
                                 style="background-color: {% if posfrm.axis_abbr == 'X' %}white{% elif posfrm.axis_abbr == 'Y' %}orange{% elif posfrm.axis_abbr == 'Z' %}lightgreen{% endif %};
                                         margin-right: 3px; padding-top: 2px; width: 100%;">{{ posfrm.axis_abbr }}: {{ posfrm.position_frm.pos_inch }}</div>
                            {% if forloop.counter in end_can_loop %}
                                </td>{% endif %}
                            {% if forloop.counter in end_row_loop %}
                                <td>
                                    <div style="text-align: right; margin: 0; padding: 0; width: 100%;">Mean:</div>
                                    <div id="{{ posfrm.position_tag|slice:"4:" }}_X_mean"
                                         style="text-align: right; width: 100%; height: 31px; padding-top: 5px;">0
                                    </div>
                                    <div id="{{ posfrm.position_tag|slice:"4:" }}_Y_mean"
                                         style="text-align: right; width: 100%; height: 31px; padding-top: 5px;">0
                                    </div>
                                    <div id="{{ posfrm.position_tag|slice:"4:" }}_Z_mean"
                                         style="text-align: right; width: 100%; height: 31px; padding-top: 5px;">0
                                    </div>
                                </td></tr>{% endif %}
                            {% endfor %}
                        </table>
                    </div>
                </div>
                <button class="btn" type="button" id="apply-axis-settings" name="apply-axis-settings" value="apply">Apply</button>
                {% endif %}
                <input type="hidden" id="submitval" name="submitval" value=""/>
            {% endif %}
    </form>
{% endblock %}