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 hideSensorDropDownListFromBuildingList = function () {
  if (!dropDownSensorParent.classList.contains("hidden")) {
    dropDownSensorParent.classList.toggle("hidden");
  }
};

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

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");
  }
};

dropDownBuilding.addEventListener("change", selectBuildingFromDropDownList);
dropDownSensor.addEventListener("change", selectSensorFromDropDownList);