Skip to content
GitLab
Commit 3139fb46 authored by Pithon Kabiro's avatar Pithon Kabiro
Browse files

Edit the markup for drop-down lists

parent 2c9a9354
master
Hide whitespace changes
Inline Side-by-side
Showing
with 94 additions and 162 deletions
+94 -162
index.html
+ 69
- 7
View file @ 3139fb46
......@@ -131,24 +131,82 @@
<label for="droneMode">Drone View</label>
</div>
<br /> -->
<div id="drop-down--bldg-parent">
<span><strong>Building</strong></span>
<div id="drop-down--bldg-data-point-parent">
<span><strong>Building(s), Data Point(s)</strong></span>
<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>
<br />
<div id="drop-down--sensor-parent">
<span><strong>Sensor</strong></span>
<div id="drop-down--aggregation-type-parent">
<span
><strong>Aggregation (Type, Duration)</strong></span
>
<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>
<br />
<div id="drop-down--sampling-rate-parent">
<span><strong>Sampling rate</strong></span>
<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>
<br />
......@@ -156,11 +214,15 @@
<span><strong>Chart type</strong></span>
<div class="nowrap">
<select id="drop-down--chart-type">
<option>Column</option>
<option>Line</option>
<option>Heatmap</option>
<option>Scatter Plot</option>
</select>
</div>
</div>
<br />
<button id="btn-draw-chart">Draw Chart</button>
<!-- <span><strong>Display Options</strong></span>
<div class="nowrap">
<input id="shadows" type="checkbox" />
......
public/js/dropDownList.js
+ 25
- 155
View file @ 3139fb46
......@@ -29,165 +29,42 @@ import {
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}
*/
const applyDropDownLevelOneTwo = function () {
const selectLevel1Value = document.querySelector("#drop-down--bldg").value;
const selectLevel2DOMString = "#drop-down--sensor";
const selectLevel2 = document.querySelector(selectLevel2DOMString);
makeDropDown(buildingsAvailableSensorsArr, [selectLevel1Value], selectLevel2);
applyDropDownLevelThree();
// Create our dropdown list using `vanillaSelectBox`
new vanillaSelectBox(selectLevel2DOMString, {
const styleLevelOneDropDown = function () {
// Create our dropdown list using `vanillaSelectBox`; supports the selection of multiple options
new vanillaSelectBox("#drop-down--bldg-data-point", {
"disableSelectAll": true,
"maxSelect": 5,
"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}
*/
const applyDropDownLevelThree = 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
);
const styleLevelTwoDropDown = function () {
// Create our dropdown list using `vanillaSelectBox`
new vanillaSelectBox(selectLevel3DOMString, {
new vanillaSelectBox("#drop-down--aggregation-type", {
"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}
*/
const populateFirstLevelDropDown = function () {
const selectLevel1DOMString = "#drop-down--bldg";
const selectLevel1 = document.querySelector(selectLevel1DOMString);
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,
const styleLevelThreeDropDown = function () {
// Create our dropdown list using `vanillaSelectBox`
new vanillaSelectBox("#drop-down--sampling-rate", {
"placeHolder": "--Select--",
"search": false,
});
};
......@@ -196,22 +73,13 @@ const populateFirstLevelDropDown = function () {
*
* @returns {undefined}
*/
const styleFourthLevelDropDown = function () {
const selectLevel4DOMString = "#drop-down--chart-type";
const styleLevelFourDropDown = function () {
// Create our dropdown list using `vanillaSelectBox`
new vanillaSelectBox(selectLevel4DOMString, {
new vanillaSelectBox("#drop-down--chart-type", {
"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.
* Will run on `DOMContentLoaded` event
......@@ -219,12 +87,12 @@ document
* @returns {undefined}
*/
const afterDocumentLoads = function () {
populateFirstLevelDropDown();
applyDropDownLevelOneTwo();
styleLevelOneDropDown();
styleLevelTwoDropDown();
styleLevelThreeDropDown();
styleLevelFourDropDown();
};
document.addEventListener("DOMContentLoaded", afterDocumentLoads);
/**
* 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
......@@ -373,6 +241,8 @@ const selectChartTypeFromDropDown = async function () {
}
};
document.addEventListener("DOMContentLoaded", afterDocumentLoads);
document
.querySelector("#drop-down--chart-type")
.addEventListener("change", selectChartTypeFromDropDown);
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

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