From b8e7435284f9e5b7e27cd1391c9c45176f38d30e Mon Sep 17 00:00:00 2001
From: Pithon Kabiro <pithon.kabiro@hft-stuttgart.de>
Date: Mon, 19 Jul 2021 20:09:10 +0200
Subject: [PATCH] Move chart drawing logic to drop down list module

---
 index.html                |  2 +-
 public/js/appCesium.js    | 61 -----------------------------------
 public/js/dropDownList.js | 67 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 68 insertions(+), 62 deletions(-)
diff --git a/index.html b/index.html
index 8b61626..12d8152 100644
--- 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">
diff --git a/public/js/appCesium.js b/public/js/appCesium.js
index eff550b..626cb0d 100644
--- a/public/js/appCesium.js
+++ b/public/js/appCesium.js
@@ -1,22 +1,5 @@
 "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);
 };
 
diff --git a/public/js/dropDownList.js b/public/js/dropDownList.js
index 9f3eaa3..17786fb 100644
--- a/public/js/dropDownList.js
+++ b/public/js/dropDownList.js
@@ -1,5 +1,22 @@
 "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);
-- 
GitLab

