subordinates_setup.html.j2

{% extends 'config/base.html.j2' %}

{% block config_base %}
{% if is_xhr is not defined %}
<div id="page-config" class="config-page">
{% endif %}
    <p>
    {%- trans %}
        On this tab, you can set up other Turris devices which can be controlled
        by this device. You need to generate a token on the remote tab on the device
        you want to control and insert the token here.
    {% endtrans -%}
    </p>
    <h3>{% trans %}Add device{% endtrans %}</h3>
    <form id="main-form" class="config-form" action="{{ request.fullpath }}" method="post" enctype="multipart/form-data" autocomplete="off" novalidate>
        {% include '_messages.html.j2' %}
        <input type="hidden" name="csrf_token" value="{{ get_csrf_token() }}">
        {% for field in form.active_fields %}
            {% include '_field.html.j2' %}
        {% endfor %}
        <div id="{{ 'form-%s-buttons' % form.name }}" class="form-buttons">
            <button type="submit" name="send" class="button"><i class="fas fa-upload"></i> {% trans %}Upload token{% endtrans %}</button>
        </div>
    </form>
{% if is_xhr is not defined %}
    <h3>{% trans %}Device list{% endtrans %}</h3>
    <div id="subordinates-message"></div>
    <div id="subordinates-table">
    {% trans %}Loading managed devices...{% endtrans %}
    </div>
    <br />
    <div id="subordinates-edit">
    </div>
    <script>
        Foris.loadSubordinatesList = async () => {
            let resp = await $.get('{{ url("config_ajax", page_name="subordinates-setup") }}', {action: "list"});
            $("#subordinates-table").replaceWith(resp);
            await Foris.overrideSubordinatesButtons();
            Foris.setSubordinatesTimeouts();
        }
        Foris.setSubordinatesTimeouts = () => {
            for (timeout in Foris.subordinateKeepAliveTimeouts) {
                clearTimeout(Foris.subordinateKeepAliveTimeouts[timeout]);
            }
            Foris.subordinateKeepAliveTimeouts = {};
            $(".sub-connection").each((idx, val) => {
                let id = $(val).attr("id");
                if (id) {
                    Foris.subordinateSetKeepAliveTimeout(id.replace('sub-', ''));
                }
            });
        };
        Foris.overrideSubordinatesEditButton = async () => {
            $("#subordinates-edit form").submit(async (e) => {
                e.preventDefault();
                let form = $(e.currentTarget);
                resp = $.ajax({
                    type: "POST",
                    url: form.attr('action'),
                    data: form.serialize()
                });
                form.find("input, select, button").attr("disabled", "disabled");
                try {
                    let new_form = await resp;
                    $("#subordinates-edit").replaceWith(new_form);
                    await Foris.suboridnatesOverrideEditClose();
                    await Foris.overrideSubordinatesEditButton();
                    await Foris.loadSubordinatesList();
                    $(".subordinate-buttons button").hide();
                } catch(err) {
                    alert(err);
                }
            });
        };
        Foris.overrideSubordinatesButtons = async () => {
            $(".subordinate-buttons").submit(async (e) => {
                e.preventDefault();
                let form = $(e.currentTarget);
                let button = $(document.activeElement);
                while ("button" != button[0].localName) {
                    button = button.parent();
                }
                let action = button.val();
                let form_data = {};
                let serialized = form.serializeArray();
                for (record in serialized) {
                    form_data[serialized[record].name] = serialized[record].value;
                }
                let controller_id = form_data.controller_id;
                let renderResponse = (resp) => {
                    $("#subordinates-message").replaceWith(resp);
                };
                let resp = null;
                switch (action) {
                    case "enable":
                        resp = await $.ajax({
                            type: "POST",
                            url: form.attr('action'),
                            data: `${form.serialize()}&action=${action}`
                        });
                        renderResponse(resp);
                        break;
                    case "disable":
                        resp = $.ajax({
                            type: "POST",
                            url: form.attr('action'),
                            data: `${form.serialize()}&action=${action}`
                        });
                        renderResponse(resp);
                        break;
                    case "delete":
                        resp = $.ajax({
                            type: "POST",
                            url: form.attr('action'),
                            data: `&csrf_token=${form_data["csrf_token"]}&controller_id=${form_data["controller_id"]}&action=${action}`
                        });
                        renderResponse(resp);
                        break;
                    case "edit":
                        if (form.attr("class").includes("subsub-form")) {
                            resp = await $.ajax({
                                type: "POST",
                                url: '{{ url("config_ajax_form", page_name="subordinates-setup", form_name="subsub-form") }}',
                                data: `&csrf_token=${form_data["csrf_token"]}&controller_id=${form_data["controller_id"]}&_update=1`,
                            });
                        } else {
                            resp = await $.ajax({
                                type: "POST",
                                url: '{{ url("config_ajax_form", page_name="subordinates-setup", form_name="sub-form") }}',
                                data: `&csrf_token=${form_data["csrf_token"]}&controller_id=${form_data["controller_id"]}&_update=1`,
                            });
                        }
                        await $("#subordinates-edit").promise();
                        $("#subordinates-edit").replaceWith(resp);
                        $(".subordinate-buttons button").hide('slow');
                        await $(".subordinate-buttons button").promise();
                        $("#subordinates-edit").show('slow');
                        await $("#subordinates-edit").promise();
                        await Foris.suboridnatesOverrideEditClose();
                        Foris.overrideSubordinatesEditButton();
                        return;
                }
                $(".subordinate-buttons button").prop('disabled', true);
            });
        };
        Foris.suboridnatesOverrideEditClose = async () => {
            $("#subordinates-edit").find("a.button").click(async (e) => {
                e.preventDefault();
                $("#subordinates-edit").hide('slow');
                await $("#subordinates-edit").promise();
                $("#subordinates-edit").replaceWith("<div id='subordinates-edit'></div>");
                $(".subordinate-buttons button").show('slow');
                await $(".subordinate-buttons button").promise();
            });
        };
        Foris.subordinatesAlive = {};
        Foris.subordinateKeepAliveTimeouts = {};
        Foris.subordinateSetKeepAliveTimeout = (controller_id) => {
            let element = $(`#sub-${controller_id}`);
            let state_element = element.find(".state");
            Foris.subordinateKeepAliveTimeouts[controller_id] = setTimeout(() => {
                Foris.subordinatesAlive[controller_id] = false;
                state_element.removeClass();
                state_element.addClass("state fas fa-exclamation-circle");
                delete Foris.subordinateKeepAliveTimeouts[controller_id];
                $(`div[data-controller-id=${controller_id}]`).replaceWith(`<div id='subordinates-edit' class='message error' data-controller-id='${controller_id}'>${Foris.messages.subordinatesSubordinatesFailed(controller_id)}</div>`);
            }, 3000);
        };
        Foris.updateSubordinateState = async (data) => {
            let element = $(`#sub-${data.id}`);
            let state_element = element.find(".state");
            if (!document.hidden) {
                await state_element.animate({opacity: '0.2'}, 50);
            }
            state_element.removeClass();
            switch (data.state) {
                case 'started':
                    state_element.addClass("state fas fa-circle");
                    break;
                case 'running':
                    if (data.id in Foris.subordinateKeepAliveTimeouts) {
                        clearTimeout(Foris.subordinateKeepAliveTimeouts[data.id]);
                    }
                    state_element.addClass("state fas fa-check-circle");
                    Foris.subordinateSetKeepAliveTimeout(data.id);
                    if (!Foris.subordinatesAlive[data.id]) {  // query backend if needed
                    }
                    Foris.subordinatesAlive[data.id] = true;
                    let message = $(`div[data-controller-id=${data.id}].message`);
                    message.hide("slow");
                    await message.promise();
                    message.replaceWith("<div id='subordinates-edit'></div>");
                    break;
                case 'exitted':
                    state_element.addClass("state fas fa-exclamation-circle");
                    break;
                default:
                    state_element.addClass("state fas fa-question-circle");
                    break;
            }
            if (!document.hidden) {
                await state_element.animate({opacity: '1.0'}, 50);
            }
        };
        Foris.addWsHanlder("subordinates", async (msg) => {
            switch(msg.action) {
              case "add_sub":
              case "add_subsub":
              case "del":
              case "set_enabled":
                await Foris.loadSubordinatesList();
                break;
            }
        });
        Foris.addWsHanlder("remote", async (msg) => {
            switch(msg.action) {
                case "advertize":
                    Foris.updateSubordinateState(msg.data);
                    break;
            };
        }, '+');
        $(document).ready(function() {
            Foris.loadSubordinatesList();
            Foris.afterAjaxUpdateFunctions.push(Foris.suboridnatesOverrideEditClose);
            Foris.afterAjaxUpdateFunctions.push(Foris.overrideSubordinatesEditButton);
            
            // Workaround to get document.activeElement worked similar on Safari and Firefox on MacOS
            // https://zellwk.com/blog/inconsistent-button-behavior/
            document.addEventListener('click', function (event) {
                if (event.target.matches('button')) {
                    event.target.focus()
                }
            })
        });
    </script>
    <style>
    #subordinates-table .sub-line .state {
        font-size: 1.5rem;
    };
    #subordinates-table td {
        vertical-align: top;
    };
    </style>
</div>
{% endif %}
{% endblock %}