mesareportingservices/ReportingServices.UI/wwwroot/js/site.js

// Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
// for details on configuring this project to bundle and minify static web assets.

// Write your JavaScript code.
window.onload = (event) => {
    initMultiselect();
};

function displayBusyIndicator() {
    document.getElementById("LoadingDisplay").style.display = "block";
}

function initMultiselect() {
    allCheckboxStatusCheck();

    document.addEventListener("click", function (evt) {
        var flyoutElement = document.getElementsByClassName("myMultiselect");
        var targetElement = evt.target; // clicked element
        var myMultiselect = false;

        var count = 0;

        if (flyoutElement.length != 0)
            count = flyoutElement.length
        else
            count = 1

        do {
            for (let i = 0; i < count; i++) {

                if (targetElement == flyoutElement[i] && flyoutElement.length > 0) {
                    myMultiselect = true;
                    break;
                }
            }

            if (myMultiselect)
                break;

            // Go up the DOM
            targetElement = targetElement.parentNode;
        } while (targetElement);

        // This is a click outside
        if (!myMultiselect) {
            toggleCheckboxArea(true);
        }
    });
}

function checkboxStatusChange() {

    var parentNodeId = event.target.parentNode.parentNode.parentNode.parentNode.id;

    var multiselect = document.getElementById(parentNodeId).getElementsByClassName("mySelectLabel")[0];
    var multiselectOption = multiselect.getElementsByTagName('option')[0];

    var values = [];
    var checkboxes = document.getElementById(parentNodeId).getElementsByClassName("mySelectOptions")[0];
    var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');

    for (const item of checkedCheckboxes) {
        var checkboxValue = item.getAttribute('value');
        values.push(checkboxValue);
    }

    var dropdownText = "Nothing is selected";
    var dropdownValue = "";
    if (values.length > 0) {
        dropdownText = values.join(', ');
        dropdownValue = values.join(',');
    }

    multiselectOption.innerText = dropdownText;
    multiselectOption.value = dropdownValue;
}

function allCheckboxStatusCheck() {

    var multiselects = document.getElementsByClassName("myMultiselect");

    for (let i = 0; i < multiselects.length; i++) {
        var multiselectOption = multiselects[i].getElementsByTagName('option')[0];

        var values = [];
        var checkboxes = multiselects[i].getElementsByClassName("mySelectOptions")[0];
        var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');

        for (const item of checkedCheckboxes) {
            var checkboxValue = item.getAttribute('value');
            values.push(checkboxValue);
        }

        var dropdownText = "Nothing is selected";
        var dropdownValue = "";
        if (values.length > 0) {
            dropdownText = values.join(', ');
            dropdownValue = values.join(',');
        }

        multiselectOption.innerText = dropdownText;
        multiselectOption.value = dropdownValue;
    }
}

function clearList() {
    var parentNodeId = event.target.parentNode.parentNode.id;

    var checkboxes = document.getElementById(parentNodeId).getElementsByClassName("mySelectOptions")[0].getElementsByTagName("input");

    for (let j = 0; j < checkboxes.length; j++) {
        if (checkboxes[j].checked)
            checkboxes[j].click();
    }
}

function toggleCheckboxArea(onlyHide = false) {
    var parentNodeId = "";

    if (event.target.parentNode.parentNode.parentNode != null)
        parentNodeId = event.target.parentNode.parentNode.parentNode.id;

    if (parentNodeId != "") {
        var checkboxes = document.getElementById(parentNodeId).getElementsByClassName("mySelectOptions")[0];
        var displayValue = checkboxes.style.display;
    }

    if (displayValue != "block" && parentNodeId != "") {
        if (onlyHide == false) {
            checkboxes.style.display = "block";
        }
    } else {
        var htmlElements = document.getElementsByClassName("mySelectOptions");
        for (let j = 0; j < htmlElements.length; j++) {
            htmlElements[j].style.display = "none";
        }
    }
}

function expandYield() {

    var yieldDivs = document.getElementsByClassName("yield");

    for (let i = 0; i < yieldDivs.length; i++) {
        yieldDivs[i].classList.toggle("hidden");
    }

    var source = document.getElementById("yieldIcon");

    source.classList.toggle("fa-plus-circle");
    source.classList.toggle("fa-minus-circle");
}

function toggleWeek() {
    var rptTableDiv = document.getElementsByClassName("dailyReportTable");

    for (let i = 0; i < rptTableDiv.length; i++) {
        rptTableDiv[i].classList.toggle("hidden");
    }
}

function sortTable(n) {
    var table, rows, switching, i, x, y, shouldSwitch, dir, switchCount = 0;
    table = document.getElementById("sortTable");
    switching = true;
    dir = "asc";

    while (switching) {
        switching = false;
        rows = table.rows;

        for (i = 1; i < rows.length - 1; i++) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName("td")[n];
            y = rows[i + 1].getElementsByTagName("td")[n];

            if (compareStrings(n == 3, dir, x.innerHTML.toLowerCase(), y.innerHTML.toLowerCase())) {
                shouldSwitch = true;
                break;
            }
        }

        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
            switchCount++;
        } else {
            if (switchCount == 0 && dir == "asc") {
                dir = "desc";
                switching = true;
            }
        }
    }

    icon = document.getElementById("i-" + n);

    icon.classList.toggle("fa-arrow-down")
    icon.classList.toggle("fa-arrow-up")
}

function compareStrings(isDate, dir, string1, string2) {
    if (isDate) {
        var date1 = new Date(string1);
        var date2 = new Date(string2);

        console.log(date1);
        console.log(date2);

        if (dir == "asc" && date1 > date2)
            return true;

        if (dir == "desc" && date1 < date2)
            return true;
    }
    else {
        if (dir == "asc" && string1 > string2)
            return true;

        if (dir == "desc" && string1 < string2)
            return true;
    }

    return false;
}