diff --git a/public/js/dropDownList.js b/public/js/dropDownList.js index f02ff4bb39b4ff14256282fa2221e59104e7df55..8b72d4489d87637f3c1a2bba7f7f1cda3a2c9ec2 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(); } };