trying to change process of adding more data to list. Updated date picker

index.html

@@ -73,10 +73,10 @@
                     </div>
                     <form id="DatePicker">
                         <label>Select Date:</label>
-                        <input type="date" id="DateOfInterest" name="DateOfInterest" min="2020-01-01" max="2020-12-31">
-                        <input type="submit" value="Submit">
+                        <input type="date" id="DateOfInterest" name="DateOfInterest" min="2020-01-01" max="2020-12-31" onchange='DateConvert();'>
+                        <!-- <input type="submit" value="Submit"> -->
                     </form>
-                    <p>Date selected: <span id="DateSelected"></span> </p>
+                    <p>Date selected: <span id="DateSelected">01.01.2020</span> </p>
                 </div>
             </nav>
         </div>
@@ -139,14 +139,33 @@
         </div>
     </div>
     <script>
-        document.getElementById('DatePicker').onsubmit = function() {
-            var dateSelected = document.getElementById('DateOfInterest').value;
-            var asDateType = new Date(dateSelected)
-            console.log(typeof(dateSelected));
+        // document.getElementById('DatePicker').onsubmit = function() {
+        //     var dateSelected = document.getElementById('DateOfInterest').value;
+        //     var asDateType = new Date(dateSelected)
+        //     console.log(typeof(dateSelected));
 
-            document.getElementById('DateSelected').innerHTML = dateSelected;
-            return false;
-        };
+        //     document.getElementById('DateSelected').innerHTML = dateSelected;
+        //     return false;
+        // };
+
+        function DateConvert() {
+            var MyDate = document.getElementById("DateOfInterest").value;
+            //Need to take Raw Date into the moment function or it will be subject to Javascript Date Shifting
+            //Note no time stamp on this one.
+            //Make New Date Object
+            MyDate = new Date(MyDate);
+            //Convert OldSchool
+            ConvertMyDate(MyDate);
+        }
+
+        function ConvertMyDate(MyDate) {
+            MyDate = new Date(MyDate);
+            var Year = String(MyDate.getFullYear());
+            var Month = ("0" + (String(MyDate.getMonth() + 1))).slice(-2);
+            var Day = ("0" + (String(MyDate.getDate() + 0))).slice(-2);
+            MyDate = Day + "." + Month + "." + Year;
+            document.getElementById("DateSelected").innerHTML = MyDate;
+        }
     </script>
 </body>
 

public/js/aggregation.js

-
 /**
  * 
  * @param {JSON} obj JSON object on which to replace a specific key. 
@@ -7,7 +6,7 @@
  * usage: myjson.forEach((obj) => renameKey(obj, "oldkey", "newkey"));
  */
 
- function renameKey(obj, oldKey, newKey) {
+function renameKey(obj, oldKey, newKey) {
     obj[newKey] = obj[oldKey];
     delete obj[oldKey];
 }
@@ -96,7 +95,7 @@ export const aggregateResponse = function(obsArray, hours, method) {
                         aggregatedVals.push(vals.reduce(function(a, b) { return Math.max(a, b); }));
                         break;
                     default:
-                        aggregatedVals.push(vals.reduce(function(a, b) { return a + b / vals.length; },-1));
+                        aggregatedVals.push(vals.reduce(function(a, b) { return a + b / vals.length; }, -1));
                 }
                 vals = []; // clear the daily value vector 
                 vals.push(jsonData[d].temperature); // now push first entry of new day into my temp value vector.
@@ -142,7 +141,7 @@ export const aggregateResponse = function(obsArray, hours, method) {
                         aggregatedVals.push(vals.reduce(function(a, b) { return Math.max(a, b); }, ));
                         break;
                     default:
-                        aggregatedVals.push(vals.reduce(function(a, b) { return a + b / vals.length; },-1));
+                        aggregatedVals.push(vals.reduce(function(a, b) { return a + b / vals.length; }, -1));
                 }
                 vals = []; // clear the daily value vector 
                 vals.push(jsonData[d].temperature); // now push first entry of new day into my temp value vector.
@@ -158,8 +157,10 @@ export const aggregateResponse = function(obsArray, hours, method) {
     } // end else
 
 
-
-
-
-    return newOutput;
+    // return newOutput;
+    return {
+        originalFormat: newOutput,
+        aggDates: aggDates,
+        aggVals: aggregatedVals
+    };
 }
\ No newline at end of file

public/js/appCesium.js

@@ -48,13 +48,13 @@ const viewer = new Cesium.Viewer("cesiumGlobeContainer", {
  * @param {String} urlTiles URL to the 3DTiles to be loaded
  * @returns {undefined} undefined
  */
-const loadTiles = function (urlTiles) {
+const loadTiles = function(urlTiles) {
     const tileset = new Cesium.Cesium3DTileset({
         url: urlTiles,
     });
     viewer.scene.primitives.add(tileset);
 
-    tileset.readyPromise.then(function () {
+    tileset.readyPromise.then(function() {
         viewer
             .zoomTo(
                 tileset,
@@ -63,7 +63,7 @@ const loadTiles = function (urlTiles) {
                     tileset.boundingSphere.radius / 0.5
                 )
             )
-            .otherwise(function (err) {
+            .otherwise(function(err) {
                 throw err;
             });
     });
@@ -74,7 +74,7 @@ const loadTiles = function (urlTiles) {
  * @param{*}
  * @returns {undefined} undefined
  */
-const loadNonDetailed = function () {
+const loadNonDetailed = function() {
     // Paths to data sources
     const URL_3DTILES = "data_3d/3dtiles/1_full/tileset.json";
 
@@ -88,7 +88,7 @@ const loadNonDetailed = function () {
  * @param {String} gltfId Name of the glTF model file without the extension i.e. exclude the `.gltf` suffix
  * @returns {undefined} undefined
  */
-const gltfLoad = function (gltfUrl, gltfId) {
+const gltfLoad = function(gltfUrl, gltfId) {
     const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
         Cesium.Cartesian3.fromDegrees(9.083385, 48.881342, 0)
     );
@@ -108,7 +108,7 @@ const gltfLoad = function (gltfUrl, gltfId) {
  * @param{*}
  * @returns {undefined} undefined
  */
-const loadDetailed = function () {
+const loadDetailed = function() {
     // Paths to data sources
     const URL_3DTILES = "data_3d/3dtiles/2_partial/tileset.json";
     const URL_GLTF = "data_3d/gltf";
@@ -173,7 +173,7 @@ if (!LOAD_DETAILED_BLDG225) {
  * @param {*}
  * @returns {undefined}
  */
-const activate3DTileFeaturePicking = function () {
+const activate3DTileFeaturePicking = function() {
     // HTML overlay for showing feature name on mouseover
     const nameOverlay = document.createElement("div");
     viewer.container.appendChild(nameOverlay);
@@ -319,12 +319,14 @@ const activate3DTileFeaturePicking = function () {
         //     },
         // });
 
-        const buildingIDs = [75, 76, 77, 78, 79, 80];
-        // var ALLDATA = [];
+        const BUILDING_STREAM_ID = [75, 76, 77, 78, 79, 80];
+        const BUILDING_ID = ["101", "102", "107", "112, 118", "125", "225"];
+        // ALLDATA = [];
+        var bld = 0;
 
-        for (var bld = 0; bld < buildingIDs.length; bld++) {
+        for (bld = 0; bld < BUILDING_STREAM_ID.length; bld++) {
 
-            var baseUrlBld = getObservationsUrl(BASE_URL, buildingIDs[bld]);
+            var baseUrlBld = getObservationsUrl(BASE_URL, BUILDING_STREAM_ID[bld]);
             const axiosGetRequest = axios.get(baseUrlBld, {
                 params: {
                     "$resultFormat": PARAM_RESULT_FORMAT,
@@ -361,11 +363,20 @@ const activate3DTileFeaturePicking = function () {
                 })
                 .then((observationArr) => {
                     var agg = aggregateResponse(observationArr, 0, 'mean');
-                    ALLDATA.push(agg);
+                    var tmpObj = {
+                        id: BUILDING_ID[bld],
+                        streamID: BUILDING_STREAM_ID[bld],
+                        timestamp: agg.aggDates,
+                        data: agg.aggVals,
+                    };
+                    ALLDATA.push(tmpObj);
                     // console.log(agg);
-                    drawHeatMapHC(formatSTAResponseForHeatMap(agg));
-                    drawLineChartHC(formatSTAResponseForLineChart(agg));
+                    drawHeatMapHC(formatSTAResponseForHeatMap(agg.originalFormat));
+                    drawLineChartHC(formatSTAResponseForLineChart(agg.originalFormat));
                     console.log(ALLDATA.length);
+                    var selectedDate = document.getElementById("DateSelected").value;
+                    console.log(selectedDate);
+
                     // alert('waiting...');
                 });