Skip to content
GitLab

Update dynamic drop-down list

Merged Pithon Kabiro requested to merge wip_select-sensors-dropdown-list-3 into master
Compare
and
2 files
+ 94
- 162
publ‎ic/js‎
dropDow‎nList.js‎ +25 -155
index‎.html‎ +69 -7
public/js/dropDownList.js
+ 25
- 155
@@ -29,165 +29,42 @@ import {
@@ -29,165 +29,42 @@ import {
import { vanillaSelectBox } from "./thirdparty/vanillaSelectBox.mjs";
import { vanillaSelectBox } from "./thirdparty/vanillaSelectBox.mjs";
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 {Object} element HTMLElement object of a drop down list 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 {Array} dataArr Input array
* @param {Array} 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 {Array} dataArr Input array
* @param {Array} filtersAsArray An array of strings tp be used as filters
* @param {Object} targetElement HTMLElement object of a drop down list element
* @returns {undefined}
*/
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
* Use the `vanillaDropDown` library to style the first level drop down list
 
*
* @returns {undefined}
* @returns {undefined}
*/
*/
const applyDropDownLevelOneTwo = function () {
const styleLevelOneDropDown = function () {
const selectLevel1Value = document.querySelector("#drop-down--bldg").value;
// Create our dropdown list using `vanillaSelectBox`; supports the selection of multiple options
const selectLevel2DOMString = "#drop-down--sensor";
new vanillaSelectBox("#drop-down--bldg-data-point", {
const selectLevel2 = document.querySelector(selectLevel2DOMString);
"disableSelectAll": true,
makeDropDown(buildingsAvailableSensorsArr, [selectLevel1Value], selectLevel2);
"maxSelect": 5,
applyDropDownLevelThree();
// Create our dropdown list using `vanillaSelectBox`
new vanillaSelectBox(selectLevel2DOMString, {
"placeHolder": "--Select--",
"placeHolder": "--Select--",
 
"search": false,
});
});
};
};
/**
/**
* Use the `makeDropDown` function to create the third level of the linked drop down lists
* Use the `vanillaDropDown` library to style the second level drop down list
 
*
* @returns {undefined}
* @returns {undefined}
*/
*/
const applyDropDownLevelThree = function () {
const styleLevelTwoDropDown = function () {
const selectLevel1Value = document.querySelector("#drop-down--bldg").value;
const selectLevel2Value = document.querySelector("#drop-down--sensor").value;
const selectLevel3DOMString = "#drop-down--sampling-rate";
const selectLevel3 = document.querySelector(selectLevel3DOMString);
makeDropDown(
buildingsAvailableSensorsArr,
[selectLevel1Value, selectLevel2Value],
selectLevel3
);
// Create our dropdown list using `vanillaSelectBox`
// Create our dropdown list using `vanillaSelectBox`
new vanillaSelectBox(selectLevel3DOMString, {
new vanillaSelectBox("#drop-down--aggregation-type", {
"placeHolder": "--Select--",
"placeHolder": "--Select--",
});
});
// Create our fourth level dropdown
styleFourthLevelDropDown();
};
};
/**
/**
* Use the `populateDropDown` function to populate the first level drop down
* Use the `vanillaDropDown` library to style the third level drop down list
 
*
* @returns {undefined}
* @returns {undefined}
*/
*/
const populateFirstLevelDropDown = function () {
const styleLevelThreeDropDown = function () {
const selectLevel1DOMString = "#drop-down--bldg";
// Create our dropdown list using `vanillaSelectBox`
const selectLevel1 = document.querySelector(selectLevel1DOMString);
new vanillaSelectBox("#drop-down--sampling-rate", {
const uniqueList = getUniqueValues(buildingsAvailableSensorsArr, 0);
populateDropDown(selectLevel1, uniqueList);
// Create our dropdown list using `vanillaSelectBox`; supports the selection of multiple options
new vanillaSelectBox(selectLevel1DOMString, {
"disableSelectAll": true,
"maxSelect": 3,
"placeHolder": "--Select--",
"placeHolder": "--Select--",
"search": false,
});
});
};
};
@@ -196,22 +73,13 @@ const populateFirstLevelDropDown = function () {
@@ -196,22 +73,13 @@ const populateFirstLevelDropDown = function () {
*
*
* @returns {undefined}
* @returns {undefined}
*/
*/
const styleFourthLevelDropDown = function () {
const styleLevelFourDropDown = function () {
const selectLevel4DOMString = "#drop-down--chart-type";
// Create our dropdown list using `vanillaSelectBox`
// Create our dropdown list using `vanillaSelectBox`
new vanillaSelectBox(selectLevel4DOMString, {
new vanillaSelectBox("#drop-down--chart-type", {
"placeHolder": "--Select--",
"placeHolder": "--Select--",
});
});
};
};
document
.querySelector("#drop-down--bldg")
.addEventListener("change", applyDropDownLevelOneTwo);
document
.querySelector("#drop-down--sensor")
.addEventListener("change", applyDropDownLevelThree);
/**
/**
* Callback function that wraps the logic of populating the linked drop down lists.
* Callback function that wraps the logic of populating the linked drop down lists.
* Will run on `DOMContentLoaded` event
* Will run on `DOMContentLoaded` event
@@ -219,12 +87,12 @@ document
@@ -219,12 +87,12 @@ document
* @returns {undefined}
* @returns {undefined}
*/
*/
const afterDocumentLoads = function () {
const afterDocumentLoads = function () {
populateFirstLevelDropDown();
styleLevelOneDropDown();
applyDropDownLevelOneTwo();
styleLevelTwoDropDown();
 
styleLevelThreeDropDown();
 
styleLevelFourDropDown();
};
};
document.addEventListener("DOMContentLoaded", afterDocumentLoads);
/**
/**
* Get the values from the currently selected options in the linked drop dpwn lists
* 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
* @returns {Array} An array containing the values of the selected options
@@ -373,6 +241,8 @@ const selectChartTypeFromDropDown = async function () {
@@ -373,6 +241,8 @@ const selectChartTypeFromDropDown = async function () {
}
}
};
};
 
document.addEventListener("DOMContentLoaded", afterDocumentLoads);
 
document
document
.querySelector("#drop-down--chart-type")
.querySelector("#drop-down--chart-type")
.addEventListener("change", selectChartTypeFromDropDown);
.addEventListener("change", selectChartTypeFromDropDown);
index.html
+ 69
- 7
@@ -131,24 +131,82 @@
@@ -131,24 +131,82 @@
<label for="droneMode">Drone View</label>
<label for="droneMode">Drone View</label>
</div>
</div>
<br /> -->
<br /> -->
<div id="drop-down--bldg-parent">
<div id="drop-down--bldg-data-point-parent">
<span><strong>Building</strong></span>
<span><strong>Building(s), Data Point(s)</strong></span>
<div class="nowrap">
<div class="nowrap">
<select id="drop-down--bldg" multiple></select>
<select
 
id="drop-down--bldg-data-point"
 
multiple
 
size="5"
 
>
 
<!-- Note: The values of the option elements have to be unique -->
 
<optgroup label="Bau 101">
 
<option>101/VL</option>
 
<option>101/RL</option>
 
<option>101/dT</option>
 
</optgroup>
 
<optgroup label="Bau 102">
 
<option>102/VL</option>
 
<option>102/RL</option>
 
<option>102/dT</option>
 
</optgroup>
 
<optgroup label="Bau 107">
 
<option>107/VL</option>
 
<option>107/RL</option>
 
<option>107/dT</option>
 
</optgroup>
 
<optgroup label="Bau 112">
 
<option>112/VL</option>
 
<option>112/RL</option>
 
<option>112/dT</option>
 
</optgroup>
 
<optgroup label="Bau 125">
 
<option>125/VL</option>
 
<option>125/RL</option>
 
<option>125/dT</option>
 
</optgroup>
 
<optgroup label="Bau 225">
 
<option>225/VL</option>
 
<option>225/RL</option>
 
<option>225/dT</option>
 
<option>225/Durchfluss</option>
 
<option>225/Leistung</option>
 
<option>225/Energie</option>
 
<option>225/Energie_VERBR</option>
 
</optgroup>
 
<optgroup label="Other">
 
<option>Außentemp</option>
 
</optgroup>
 
</select>
</div>
</div>
</div>
</div>
<br />
<br />
<div id="drop-down--sensor-parent">
<div id="drop-down--aggregation-type-parent">
<span><strong>Sensor</strong></span>
<span
 
><strong>Aggregation (Type, Duration)</strong></span
 
>
<div class="nowrap">
<div class="nowrap">
<select id="drop-down--sensor"></select>
<select id="drop-down--aggregation-type">
 
<option>None (raw data)</option>
 
<option>Sum/Daily</option>
 
<option>Sum/Monthly</option>
 
<option>Maximum/Daily</option>
 
<option>Maximum/Monthly</option>
 
<option>Minimum/Daily</option>
 
<option>Minimum/Monthly</option>
 
<option>Average/Daily</option>
 
<option>Average/Monthly</option>
 
</select>
</div>
</div>
</div>
</div>
<br />
<br />
<div id="drop-down--sampling-rate-parent">
<div id="drop-down--sampling-rate-parent">
<span><strong>Sampling rate</strong></span>
<span><strong>Sampling rate</strong></span>
<div class="nowrap">
<div class="nowrap">
<select id="drop-down--sampling-rate"></select>
<select id="drop-down--sampling-rate">
 
<option>15 min</option>
 
<option>60 min</option>
 
</select>
</div>
</div>
</div>
</div>
<br />
<br />
@@ -156,11 +214,15 @@
@@ -156,11 +214,15 @@
<span><strong>Chart type</strong></span>
<span><strong>Chart type</strong></span>
<div class="nowrap">
<div class="nowrap">
<select id="drop-down--chart-type">
<select id="drop-down--chart-type">
 
<option>Column</option>
<option>Line</option>
<option>Line</option>
<option>Heatmap</option>
<option>Heatmap</option>
 
<option>Scatter Plot</option>
</select>
</select>
</div>
</div>
</div>
</div>
 
<br />
 
<button id="btn-draw-chart">Draw Chart</button>
<!-- <span><strong>Display Options</strong></span>
<!-- <span><strong>Display Options</strong></span>
<div class="nowrap">
<div class="nowrap">
<input id="shadows" type="checkbox" />
<input id="shadows" type="checkbox" />

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal