Move chart drawing logic to drop down list module

b8e74352 · Pithon Kabiro · fa11200b · b8e74352 · b8e74352 · b8e74352
Commit b8e74352 authored 4 years ago by Pithon Kabiro
Hide whitespace changes
Inline Side-by-side

Showing

with 68 additions and 62 deletions
+68 -62
--- a/index.html
+++ b/index.html
@@ -72,7 +72,7 @@
    Custom JS -->
    <script defer type="module" src="js/appCesium.js"></script>
    <script defer type="module" src="js/appChart.js"></script>
-    <script defer src="js/dropDownList.js"></script>
+    <script defer type="module" src="js/dropDownList.js"></script>
  </head>
  <body class="sb-nav-fixed">
    <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">

--- a/public/js/appCesium.js
+++ b/public/js/appCesium.js
 "use strict";

-import {
-  BASE_URL,
-  QUERY_PARAMS_COMBINED,
-  getDatastreamIdFromBuildingNumber,
-  getDatastreamUrl,
-  getObservationsUrl,
-  axiosGetRequest,
-  getDatastreamMetadata,
-  formatDatastreamMetadataForChart,
-  formatSTAResponseForHeatMap,
-  drawHeatMapHC,
-  formatSTAResponseForLineChart,
-  drawLineChartHC,
-  getCombinedObservationsFromAllNextLinks,
-  getMetadataPlusObservationsForChart,
-} from "./appChart.js";
-
 Cesium.Ion.defaultAccessToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyODgxYzJlNi1kNDZiLTQ3ZmQtYmUxYy0yMWI0OGM3NDA5MzAiLCJpZCI6NDczOSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MTUyMzU0MX0.shj2hM3pvsvcmE_wMb2aBDuk_cKWmFmbolltInGImwU";

@@ -296,50 +279,6 @@ const activate3DTileFeaturePicking = function () {
    `;

    const clickedBuilding = pickedFeature.getProperty("_gebaeude");
-    const clickedBuildingDatastreamId = getDatastreamIdFromBuildingNumber(
-      clickedBuilding,
-      "vl",
-      "60min"
-    );
-
-    const URL_DATASTREAM = getDatastreamUrl(
-      BASE_URL,
-      clickedBuildingDatastreamId
-    );
-
-    const URL_OBSERVATIONS = getObservationsUrl(
-      BASE_URL,
-      clickedBuildingDatastreamId
-    );
-
-    // Create promises
-    const promiseDatastreamMetadata = getDatastreamMetadata(URL_DATASTREAM);
-    const promiseCombinedObservations = getCombinedObservationsFromAllNextLinks(
-      axiosGetRequest(URL_OBSERVATIONS, QUERY_PARAMS_COMBINED)
-    );
-    // Pass promises to our async function
-    getMetadataPlusObservationsForChart([
-      promiseCombinedObservations,
-      promiseDatastreamMetadata,
-    ])
-      .then((metadataAndObs) => {
-        // Extract the metadata and the observations from resulting array
-        const combinedObs = metadataAndObs[0];
-        const datastreamMetadata = metadataAndObs[1];
-
-        drawLineChartHC(
-          formatSTAResponseForLineChart(combinedObs),
-          formatDatastreamMetadataForChart(datastreamMetadata)
-        );
-
-        drawHeatMapHC(
-          formatSTAResponseForHeatMap(combinedObs),
-          formatDatastreamMetadataForChart(datastreamMetadata)
-        );
-      })
-      .catch((err) => {
-        console.error(err);
-      });
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 };


--- a/public/js/dropDownList.js
+++ b/public/js/dropDownList.js
 "use strict";

+import {
+  BASE_URL,
+  QUERY_PARAMS_COMBINED,
+  getDatastreamIdFromBuildingNumber,
+  getDatastreamUrl,
+  getObservationsUrl,
+  axiosGetRequest,
+  getDatastreamMetadata,
+  formatDatastreamMetadataForChart,
+  formatSTAResponseForHeatMap,
+  drawHeatMapHC,
+  formatSTAResponseForLineChart,
+  drawLineChartHC,
+  getCombinedObservationsFromAllNextLinks,
+  getMetadataPlusObservationsForChart,
+} from "./appChart.js";
+
 const buildingsAvailableSensorsArr = [
  ["--Select--", "", ""],

@@ -205,3 +222,53 @@ const getBuildingSensorSamplingRateAbbreviation = function (

  return [buildingAbbrev, phenomenonAbbrev, samplingRateAbbrev];
 };
+
+const runFromOptionThree = async function () {
+  try {
+    const selectedOptions = getSelectedOptionsFromDropDownLists();
+
+    const abbreviationsArr = getBuildingSensorSamplingRateAbbreviation(
+      ...selectedOptions
+    );
+
+    const selectedDatastream = getDatastreamIdFromBuildingNumber(
+      ...abbreviationsArr
+    );
+
+    const URL_DATASTREAM = getDatastreamUrl(BASE_URL, selectedDatastream);
+
+    const URL_OBSERVATIONS = getObservationsUrl(BASE_URL, selectedDatastream);
+
+    // Create promises
+    const promiseDatastreamMetadata = getDatastreamMetadata(URL_DATASTREAM);
+    const promiseCombinedObservations = getCombinedObservationsFromAllNextLinks(
+      axiosGetRequest(URL_OBSERVATIONS, QUERY_PARAMS_COMBINED)
+    );
+
+    // Pass promises to our async function
+    const metadataPlusObservations = await getMetadataPlusObservationsForChart([
+      promiseCombinedObservations,
+      promiseDatastreamMetadata,
+    ]);
+
+    // Extract the metadata and the observations from resulting array
+    const combinedObs = metadataPlusObservations[0];
+    const datastreamMetadata = metadataPlusObservations[1];
+
+    drawLineChartHC(
+      formatSTAResponseForLineChart(combinedObs),
+      formatDatastreamMetadataForChart(datastreamMetadata)
+    );
+
+    drawHeatMapHC(
+      formatSTAResponseForHeatMap(combinedObs),
+      formatDatastreamMetadataForChart(datastreamMetadata)
+    );
+  } catch (err) {
+    console.error(err);
+  }
+};
+
+document
+  .querySelector("#drop-down--sampling-rate")
+  .addEventListener("change", runFromOptionThree);