dropDownList.js

"use strict";

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];
};

/**
 * 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);
  });
};

/**
 * 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])
  );
};

/**
 * 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();
};

/**
 * 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();

/**
 * Get the values from the currently selected options in the linked drop dpwn lists
 * @returns {Array} An array containing the values of the selected options
 */
const getSelectedOptionsFromDropDownLists = function () {
  const selectedBuilding = document.querySelector("#drop-down--bldg").value;
  const selectedSensor = document.querySelector("#drop-down--sensor").value;
  const selectedSamplingRate = document.querySelector(
    "#drop-down--sampling-rate"
  ).value;

  return [selectedBuilding, selectedSensor, selectedSamplingRate];
};