ohtu2021-kvantti/WebMark

{% extends 'base.html' %}

{% load render_table from django_tables2 %}
{% load bootstrap4 %}

{% block title %}Main page{% endblock %}

{% block content %}

    {% if filter %}
        <form action="" method="get" name="filterForm" class="form form-inline"
              onchange="document.getElementsByName('filterForm')[0].submit();">
            {% bootstrap_form filter.form layout='inline' %}
        </form>
    {% endif %}

    {% render_table table 'django_tables2/bootstrap4.html' %}
    <div class="d-flex flex-row">
        <a id="compare" href="" class="btn btn-primary mr-2">Compare</a>
        <button class="btn btn-danger" id="clearSelections" onclick="clearStorageAndReload()">
            Clear selections
        </button>
    </div>
    <script>
        const checkboxes = document.getElementsByName("checkbox");
        const checkedJSON = window.sessionStorage.getItem("checked") || "[]";
        const checked = JSON.parse(checkedJSON);
        let checkboxesDisabled = false;

        updateButtonStates();
        initializeCheckboxes();
        updateCheckboxStates();

        function initializeCheckboxes() {
            for (const checkbox of checkboxes) {
                // making sure that checkboxes are not checked after reload on all browsers
                checkbox.checked = false;

                // check checkboxes again after a reload
                if (checked.includes(checkbox.getAttribute("algorithm"))) {
                    checkbox.checked = true;
                }

                checkbox.onclick = function () {
                    const algorithm_id = this.getAttribute('algorithm');
                    if (checked.includes(algorithm_id)) {
                        checked.splice(checked.indexOf(algorithm_id), 1);
                    } else if (checked.length < 2) {
                        checked.push(algorithm_id);
                    }
                    window.sessionStorage.setItem("checked", JSON.stringify(checked));
                    updateButtonStates();
                    updateCheckboxStates();
                }, { passive: true };
            }
        }

        function updateCheckboxStates() {
            if (checkboxesDisabled && checked.length !== 2) {
                checkboxesDisabled = false;
                enableCheckboxes();
            }
            if (!checkboxesDisabled && checked.length === 2) {
                checkboxesDisabled = true;
                disableCheckboxes();
            }
        }

        // disables all checkboxes except the ones that are currently selected
        function disableCheckboxes() {
            checkboxesDisabled = true;
            for (const checkbox of checkboxes) {
                checkbox.disabled = !checkbox.checked;
            };
        }

        function enableCheckboxes() {
            for (const checkbox of checkboxes) {
                checkbox.disabled = false;
            }
        }

        // enables and disables compare and clear selections
        // buttons based on how many algorithms are currently selected
        function updateButtonStates() {
            const compareButton = document.getElementById("compare");
            const clearButton = document.getElementById("clearSelections");

            if (checked.length !== 2) {
                compareButton.href = ""; // disables the link
                compareButton.classList.add('disabled');
            } else {
                compareButton.href = "/{{ root_dir }}" + "compare/" + checked[0] + "/" + checked[1];
                compareButton.classList.remove("disabled");
            }
            clearButton.disabled = checked.length === 0;
        }

        // clears storage and reloads the page to initialize everything again
        function clearStorageAndReload() {
            window.sessionStorage.removeItem("checked");
            window.location.reload();
        }
    </script>
{% endblock %}