Add working linked drop down lists

public/js/dropDownList.js

 "use strict";
 
-const dropDownBuilding = document.querySelector("#drop-down--bldg");
-const dropDownSensorParent = document.querySelector(
-  "#drop-down--sensor-parent"
-);
-const dropDownSensor = document.querySelector("#drop-down--sensor");
-
-const showSensorDropDownListFromBuildingList = function () {
-  if (dropDownSensorParent.classList.contains("hidden")) {
-    dropDownSensorParent.classList.toggle("hidden");
-  }
+const buildingsAvailableSensorsArr = [
+  ["--Select--", "", ""],
+
+  ["Bau 101", "Vorlauftemperatur", "15 min"],
+  ["Bau 101", "Vorlauftemperatur", "60 min"],
+  ["Bau 101", "Rücklauftemperatur", "15 min"],
+  ["Bau 101", "Rücklauftemperatur", "60 min"],
+
+  ["Bau 102", "Vorlauftemperatur", "15 min"],
+  ["Bau 102", "Vorlauftemperatur", "60 min"],
+  ["Bau 102", "Rücklauftemperatur", "15 min"],
+  ["Bau 102", "Rücklauftemperatur", "60 min"],
+
+  ["Bau 107", "Vorlauftemperatur", "15 min"],
+  ["Bau 107", "Vorlauftemperatur", "60 min"],
+  ["Bau 107", "Rücklauftemperatur", "15 min"],
+  ["Bau 107", "Rücklauftemperatur", "60 min"],
+
+  ["Bau 112", "Vorlauftemperatur", "15 min"],
+  ["Bau 112", "Vorlauftemperatur", "60 min"],
+  ["Bau 112", "Rücklauftemperatur", "15 min"],
+  ["Bau 112", "Rücklauftemperatur", "60 min"],
+
+  ["Bau 125", "Vorlauftemperatur", "15 min"],
+  ["Bau 125", "Vorlauftemperatur", "60 min"],
+  ["Bau 125", "Rücklauftemperatur", "15 min"],
+  ["Bau 125", "Rücklauftemperatur", "60 min"],
+
+  ["Bau 225", "Vorlauftemperatur", "15 min"],
+  ["Bau 225", "Vorlauftemperatur", "60 min"],
+  ["Bau 225", "Rücklauftemperatur", "15 min"],
+  ["Bau 225", "Rücklauftemperatur", "60 min"],
+  ["Bau 225", "Durchfluss", "15 min"],
+  ["Bau 225", "Durchfluss", "60 min"],
+  ["Bau 225", "Leistung", "15 min"],
+  ["Bau 225", "Leistung", "60 min"],
+  ["Bau 225", "Energie", "15 min"],
+  ["Bau 225", "Energie", "60 min"],
+  ["Bau 225", "Energie_VERBR", "15 min"],
+  ["Bau 225", "Energie_VERBR", "60 min"],
+];
+
+/**
+ * Get the unique values from an array
+ * @param {Array} dataArr Input array
+ * @param {Number} index Integer representing a zero-based index of the columns in the array
+ * @returns {Array} An array of unique options
+ */
+const getUniqueValues = function (dataArr, index) {
+  const uniqueOptions = new Set();
+
+  dataArr.forEach((row) => uniqueOptions.add(row[index]));
+
+  return [...uniqueOptions];
 };
 
-const hideSensorDropDownListFromBuildingList = function () {
-  if (!dropDownSensorParent.classList.contains("hidden")) {
-    dropDownSensorParent.classList.toggle("hidden");
-  }
+/**
+ * Populate the HTML elements that make up a drop down list
+ * @param {String} element String corresponding to the ID of a drop down HTML element
+ * @param {Array} uniqueValuesArr An array of unique values
+ * @returns {undefined}
+ */
+const populateDropDown = function (element, uniqueValuesArr) {
+  element.innerHTML = "";
+
+  uniqueValuesArr.forEach((item) => {
+    const option = document.createElement("option");
+    option.textContent = item;
+    element.appendChild(option);
+  });
 };
 
-// SET THE INITIAL STATE OF THE DROPDOWN
-hideSensorDropDownListFromBuildingList();
-
-const selectBuildingFromDropDownList = function () {
-  const selectedBuilding =
-    dropDownBuilding.options[dropDownBuilding.selectedIndex].value;
-
-  switch (selectedBuilding) {
-    case "none":
-      hideSensorDropDownListFromBuildingList();
-      break;
-    case "101":
-      console.log("Building 101");
-      showSensorDropDownListFromBuildingList();
-      break;
-    case "102":
-      console.log("Building 102");
-      showSensorDropDownListFromBuildingList();
-      break;
-    case "107":
-      console.log("Building 107");
-      showSensorDropDownListFromBuildingList();
-      break;
-    case "112":
-      console.log("Building 112");
-      showSensorDropDownListFromBuildingList();
-      break;
-    case "125":
-      console.log("Building 125");
-      showSensorDropDownListFromBuildingList();
-      break;
-    case "225":
-      console.log("Building 225");
-      showSensorDropDownListFromBuildingList();
-      break;
-    default:
-      console.log("Default case");
-  }
+/**
+ * Filter an array using filter strings of variable length
+ * @param {*} dataArr Input array
+ * @param {*} filtersAsArray An array of filter strings
+ * @returns {Array} An array that contains the filter result
+ */
+const filterArray = function (dataArr, filtersAsArray) {
+  return dataArr.filter((row) =>
+    filtersAsArray.every((filterItem, i) => filterItem === row[i])
+  );
 };
 
-const selectSensorFromDropDownList = function () {
-  const selectedSensor =
-    dropDownSensor.options[dropDownSensor.selectedIndex].value;
-
-  switch (selectedSensor) {
-    case "none":
-      break;
-    case "vorlauf":
-      console.log("VORLAUF");
-      break;
-    case "ruecklauf":
-      console.log("RUECKLAUF");
-      break;
-    case "durchfluss":
-      console.log("DURCHFLUSS");
-      break;
-    case "leistung":
-      console.log("LEISTUNG");
-      break;
-    case "energie":
-      console.log("ENERGIE");
-      break;
-    case "energieVerbr":
-      console.log("ENERGIE_VERBR");
-      break;
-    default:
-      console.log("Default case");
-  }
+/**
+ * Create a drop down list in the HTML document
+ * @param {*} dataArr Input array
+ * @param {*} filtersAsArray An array of strings tp be used as filters
+ * @param {*} targetElement String corresponding to the ID of a drop down HTML element
+ */
+const makeDropDown = function (dataArr, filtersAsArray, targetElement) {
+  const filteredArr = filterArray(dataArr, filtersAsArray);
+
+  const uniqueList = getUniqueValues(filteredArr, filtersAsArray.length);
+
+  getUniqueValues(dataArr);
+
+  populateDropDown(targetElement, uniqueList);
+};
+
+/**
+ * Use the `makeDropDown` function to create the first two levels of the linked drop down lists
+ */
+const applyDropDown = function () {
+  const selectLevel1Value = document.querySelector("#drop-down--bldg").value;
+  const selectLevel2 = document.querySelector("#drop-down--sensor");
+  makeDropDown(buildingsAvailableSensorsArr, [selectLevel1Value], selectLevel2);
+
+  applyDropDown2();
 };
 
-dropDownBuilding.addEventListener("change", selectBuildingFromDropDownList);
-dropDownSensor.addEventListener("change", selectSensorFromDropDownList);
+/**
+ * Use the `makeDropDown` function to create the third level of the linked drop down lists
+ */
+const applyDropDown2 = function () {
+  const selectLevel1Value = document.querySelector("#drop-down--bldg").value;
+  const selectLevel2Value = document.querySelector("#drop-down--sensor").value;
+  const selectLevel3 = document.querySelector("#drop-down--sampling-rate");
+  makeDropDown(
+    buildingsAvailableSensorsArr,
+    [selectLevel1Value, selectLevel2Value],
+    selectLevel3
+  );
+};
+
+/**
+ * Use the `populateDropDown` function to populate the first level drop down
+ */
+const populateFirstLevelDropDown = function () {
+  const el = document.querySelector("#drop-down--bldg");
+  const uniqueList = getUniqueValues(buildingsAvailableSensorsArr, 0);
+  populateDropDown(el, uniqueList);
+};
+
+document
+  .querySelector("#drop-down--bldg")
+  .addEventListener("change", applyDropDown);
+document
+  .querySelector("#drop-down--sensor")
+  .addEventListener("change", applyDropDown2);
+
+// These functions run after "DOMContentLoaded" event
+populateFirstLevelDropDown();
+applyDropDown();