sidebar.js

var chartButton = document.getElementById('chartButton');
var heatingdemand = document.getElementById('filterswitch2');
var radio = document.getElementById('radio-group');
var filterswitches = document.getElementById('filterswitches');

//Show / hide chart
chartButton.addEventListener('click', function() {
    //sets as default attribute building function
    myChartArea("bar", "Building Function", 1, "Building Type", "Frequency", coloR);
    addGlobalData(areaChart, buildingType, btFrequency, btFrequency.length)

    if (drawBox === false) {
        swal("CAN'T LOAD DATA!", "mark an area first!", "error");
    } else {
        var x = document.getElementById('areaChartContainer');

        if (x.style.visibility === 'visible') {
            //button.firstChild.data = "Show chart";
            x.style.visibility = 'hidden';
        } else {
            //button.firstChild.data = "Hide chart";
            x.style.visibility = 'visible';
        }
    }
}, false);

heatingdemand.addEventListener('click', function() {
    var x = document.getElementById('heat-demand-legend');
    if (!document.getElementById('checkbox2').checked) {
        x.style.visibility = 'hidden';
    } else {
        x.style.visibility = 'visible';
    }
}, false);

radio.addEventListener('click', function() {
    if (document.getElementById("surface").checked) {
        document.getElementById("checkbox1").disabled = false;
        document.getElementById("checkbox2").disabled = true;
        if (document.getElementById("checkbox2").checked) {
            document.getElementById("checkbox2").checked = false;
            document.getElementById('heat-demand-legend').style.visibility = 'hidden';
            tileContent.forEach(t => t.color = new Cesium.Color(1, 1, 1, 1))
        }
    } else {
        document.getElementById("checkbox1").disabled = true;
        document.getElementById("checkbox2").disabled = false;
        if (document.getElementById("checkbox1").checked) {
            document.getElementById("checkbox1").checked = false;
            tileContent.forEach(t => t.color = new Cesium.Color(1, 1, 1, 1))
        }
    }
}, false);

filterswitches.addEventListener('click', function() {
    if (drawBox === false) {
        swal("CAN'T LOAD DATA!", "mark an area first!", "error");
        document.getElementById("checkbox2").disabled = true;
        document.getElementById("checkbox1").disabled = true;
    } else {
        if (document.getElementById("surface").checked) {
            document.getElementById("checkbox1").disabled = false;
            document.getElementById("checkbox2").disabled = true;
        } else {
            document.getElementById("checkbox1").disabled = true;
            document.getElementById("checkbox2").disabled = false;
        }
    }

}, false);

function toggleSidebar(ref) {
    document.getElementById("sidebar").classList.toggle('active');
}

//loop through all dropdown buttons to toggle between hiding and showing its dropdown content
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
    dropdown[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var dropdownContent = this.nextElementSibling;
        if (dropdownContent.style.display === "block") {
            dropdownContent.style.display = "none";
        } else {
            dropdownContent.style.display = "block";
        }
    });
}