From 6fc01344f77a198cc0f3374301d2b4c10a810a7d Mon Sep 17 00:00:00 2001
From: Pithon Kabiro <pithon.kabiro@hft-stuttgart.de>
Date: Wed, 21 Jul 2021 21:42:11 +0200
Subject: [PATCH] New functions: show and hide loading indicator
---
public/js/dropDownList.js | 39 ++++++++++++++++++++++++++++++++++++++-
1 file changed, 38 insertions(+), 1 deletion(-)
diff --git a/public/js/dropDownList.js b/public/js/dropDownList.js
index f02ff4b..8b72d44 100644
--- a/public/js/dropDownList.js
+++ b/public/js/dropDownList.js
@@ -106,6 +106,7 @@ const filterArray = function (dataArr, filtersAsArray) {
* @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
+ * @returns {undefined}
*/
const makeDropDown = function (dataArr, filtersAsArray, targetElement) {
const filteredArr = filterArray(dataArr, filtersAsArray);
@@ -119,6 +120,7 @@ const makeDropDown = function (dataArr, filtersAsArray, targetElement) {
/**
* Use the `makeDropDown` function to create the first two levels of the linked drop down lists
+ * @returns {undefined}
*/
const applyDropDown = function () {
const selectLevel1Value = document.querySelector("#drop-down--bldg").value;
@@ -130,6 +132,7 @@ const applyDropDown = function () {
/**
* Use the `makeDropDown` function to create the third level of the linked drop down lists
+ * @returns {undefined}
*/
const applyDropDown2 = function () {
const selectLevel1Value = document.querySelector("#drop-down--bldg").value;
@@ -144,6 +147,7 @@ const applyDropDown2 = function () {
/**
* Use the `populateDropDown` function to populate the first level drop down
+ * @returns {undefined}
*/
const populateFirstLevelDropDown = function () {
const el = document.querySelector("#drop-down--bldg");
@@ -230,6 +234,34 @@ const getBuildingSensorSamplingRateAbbreviation = function (
return [buildingAbbrev, phenomenonAbbrev, samplingRateAbbrev];
};
+/**
+ * Show a loading indicator at the start of an async task. The indicator consists of a spinner and a transluscent mask placed on top of page elements
+ * @returns {undefined}
+ */
+const showLoadingSpinner = function () {
+ const loadingIndicatorMask = document.querySelector("#loadingIndicator");
+ const loadingIconSpinner = document.querySelector("#loadingIcon");
+
+ loadingIndicatorMask.style.display = "block";
+ loadingIconSpinner.style.display = "block";
+};
+
+/**
+ * Hide the loading indicator after completion of the async tasks
+ * @returns {undefined}
+ */
+const hideLoadingSpinner = function () {
+ const loadingIndicatorMask = document.querySelector("#loadingIndicator");
+ const loadingIconSpinner = document.querySelector("#loadingIcon");
+
+ loadingIndicatorMask.style.display = "none";
+ loadingIconSpinner.style.display = "none";
+};
+
+/**
+ * Callback function for chart selection using drop down list
+ * @returns {undefined}
+ */
const selectChartTypeFromDropDown = async function () {
try {
const selectedOptions = getSelectedOptionsFromDropDownLists();
@@ -250,8 +282,10 @@ const selectChartTypeFromDropDown = async function () {
if (selectedChartType === "--Select--") return;
- const URL_DATASTREAM = getDatastreamUrl(BASE_URL, selectedDatastream);
+ // Display the loading indicator
+ showLoadingSpinner();
+ const URL_DATASTREAM = getDatastreamUrl(BASE_URL, selectedDatastream);
const URL_OBSERVATIONS = getObservationsUrl(BASE_URL, selectedDatastream);
// Create promises
@@ -283,6 +317,9 @@ const selectChartTypeFromDropDown = async function () {
}
} catch (err) {
console.error(err);
+ } finally {
+ // Hide the loading indicator
+ hideLoadingSpinner();
}
};
--
GitLab