hosts merge

public/js/data.js

@@ -255,40 +255,44 @@ function getReadings(spot_id,value){
     document.getElementById("button_csv").disabled = true;
 
     //togglediv('#spots-ls','spots-button');
-    $.ajax({
-        type: 'GET',
-        url: '/readings',
-        data: {spotids: query_selection[3], sectorid: query_selection[2], siteid: query_selection[1], tripid: query_selection[0]},
-        success: function(response) { 
-            var readings = [];
-
-            for(x = 0; x < response.length; x++){
-                readings.push(response[x]);
+    if (query_selection[3].length > 0){
+        $.ajax({
+            type: 'GET',
+            url: '/readings',
+            data: {spotids: query_selection[3], sectorid: query_selection[2], siteid: query_selection[1], tripid: query_selection[0]},
+            success: function(response) { 
+                var readings = [];
+    
+                for(x = 0; x < response.length; x++){
+                    readings.push(response[x]);
+                }
+    
+                console.info('DATA - readings');
+                console.info('Loaded ' + readings.length + " data points.");
+    
+                var color = getRandomColor();
+                query_data = processReadings(readings);
+    
+                createPoints(query_data, color);
+                createGraphReading(query_data, query_selection,  color);
+    
+                var dataview = document.getElementById("dataView")
+                dataview.querySelector("#nav-button-graph").classList.add("new_data_button");
+                dataview.querySelector("#nav-button-map").classList.add("new_data_button");
+    
+                document.getElementById('reading').innerHTML = "";
+                document.getElementById('data-prompt').innerHTML = "Loaded "+query_selection[3].length+" spots to the graph and map! <br> Pick some more?";
+    
+                document.getElementById("button_permalink").disabled = false;
+                document.getElementById("button_csv").disabled = false;
+            },
+            error: function(xhr, status, err) {
+                console.log(xhr.responseText);
             }
-
-            console.info('DATA - readings');
-            console.info('Loaded ' + readings.length + " data points.");
-
-            var color = getRandomColor();
-            query_data = processReadings(readings);
-
-            //createPoints(query_data, color);
-            createGraphReading(query_data, query_selection,  color);
-
-            var dataview = document.getElementById("dataView")
-            dataview.querySelector("#nav-button-graph").classList.add("new_data_button");
-            dataview.querySelector("#nav-button-map").classList.add("new_data_button");
-
-            document.getElementById('reading').innerHTML = "";
-            document.getElementById('data-prompt').innerHTML = "Loaded "+query_selection[3].length+" spots to the graph and map! <br> Pick some more?";
-
-            document.getElementById("button_permalink").disabled = false;
-            document.getElementById("button_csv").disabled = false;
-        },
-        error: function(xhr, status, err) {
-            console.log(xhr.responseText);
-        }
-    });
+        });
+    }else{
+        createGraphReading(null, null,  null);
+    }
 }
 // Streaming-specific routes
 function getStreamingsHosts(sector_id){
@@ -588,6 +592,7 @@ function processReadings(readings){
         }
         if (current_data.length != 0){
             const timestamps = [...new Set(current_data.map(item => item.recordtime))]; // use earlier date to base data on;
+            console.log(timestamps);
             var min = timestamps.reduce(function (a, b) { return a < b ? a : b; }); 
     
             out_node = {};
@@ -595,10 +600,14 @@ function processReadings(readings){
                 if (current_data[j].recordtime = min || !out_node.recordtime){
                     out_node.Spot = current_data[j].spotid;
                     out_node.recordtime = current_data[j].recordtime;
+                    out_node.tripname = current_data[j].tripname;
+                    out_node.sitename = current_data[j].sitename;
+                    out_node.sectorname = current_data[j].sectorname;
                     out_node.elevation = current_data[j].elevation;
                     out_node.longitude = current_data[j].longitude;
                     out_node.latitude = current_data[j].latitude;
-                    out_node.accuracy = current_data[j].accuracy;
+                    out_node.accuracy = current_data[j].accuracy; // 0 to 8
+
                     if (!out_node[current_data[j].sensortype]){
                         out_node[current_data[j].sensortype] = current_data[j].value;
                     }

public/js/graph.js

@@ -33,36 +33,55 @@ function createGraphReading(dataset, q_arr, color){
     var parent = document.getElementById('readingStats');
     parent.innerHTML = "";
 
-    // create title
-    var trip = q_arr[0];
-    var site = q_arr[1];
-    var sector = q_arr[2];
-
-    var title = document.createElement('h');
-    title.innerHTML = "Trip " + trip + ", Site " + site + ", Sector " + sector; 
-    parent.append(title);
-
-    const table = document.createElement('table');
-    var tableHTML = "";
-    var keys = Object.keys(dataset[0]);
-    tableHTML += createTableHeader(keys);
-
-    for ( x = 0 ; x < dataset.length ; x++){
-        prop_arr = [];
-        for (y=0;y<keys.length;y++){
-            prop_arr.push(dataset[x][keys[y]]);
+    if (dataset != null){
+        // create title
+        var trip = dataset[0].tripname;
+        var site = dataset[0].sitename;
+        var sector = dataset[0].sectorname;
+
+        var title = document.createElement('h');
+        title.innerHTML = "Spots from " + trip + ", " + site + ", " + sector; 
+        parent.append(title);
+
+        const table = document.createElement('table');
+        var tableHTML = "";
+        var keys = ["Spot","Date","Time","elevation","longitude","latitude","accuracy"];
+        for(x=9;x<Object.keys(dataset[0]).length;x++){
+            keys.push(Object.keys(dataset[0])[x]);
+        }
+
+        tableHTML += createTableHeader(keys);
+        
+
+        for ( x = 0 ; x < dataset.length ; x++){
+            prop_arr = [];
+            for (y=0;y<keys.length;y++){
+                if (keys[y] == "Date"){
+                    date = new Date(dataset[x]["recordtime"]);
+                    prop_arr.push(date.getFullYear()+'-' + (date.getMonth()+1) + '-'+date.getDate());
+                    prop_arr.push(date.toLocaleTimeString('en-US'));
+                    y++;
+
+                }else{
+                    prop_arr.push(dataset[x][keys[y]]);
+                }
+            }
+            tableHTML += createTableRow(prop_arr);
         }
-        tableHTML += createTableRow(prop_arr);
+        // append table to parent
+        table.innerHTML = tableHTML;
+        parent.append(table);
     }
-    // append table to parent
-    table.innerHTML = tableHTML;
-    parent.append(table);
-    
 }
+
 function createTableRow(arr){
     text = '<tr>';
     for (j=0;j<arr.length;j++){
-        text += "<td>" + arr[j] + "</td>"
+        if(j==0){
+            text += "<th>Spot " + arr[j] + "</th>"
+        }else{
+            text += "<td>" + arr[j] + "</td>"
+        }
     }
     text += '</tr>';
     return text;
@@ -70,7 +89,11 @@ function createTableRow(arr){
 function createTableHeader(arr){
     text = '<tr>';
     for (j=0;j<arr.length;j++){
-        text += "<th>" + arr[j] + "</th>"
+        if(j==0){
+            text += "<th>" + "" + "</th>"
+        }else{
+            text += "<th>" + arr[j] + "</th>"
+        }
     }
     text += '</tr>';
     return text;

views/index.ejs

@@ -35,7 +35,7 @@
                         id='nav-button-map'
                         class='nav-button-select nav-view-button' 
                         type="image" 
-                        src="img/map-icon.png" 
+                        src="img/globe-icon.png" 
                         alt="Submit" 
                         width="24" height="24">
                 </div>
@@ -78,7 +78,7 @@
                         class='nav-button-idle nav-view-button'
                         onclick='switchToMap()' 
                         type="image" 
-                        src="img/map-icon.png" 
+                        src="img/globe-icon.png" 
                         alt="Submit" 
                         width="24" height="24">
                 </div>
@@ -183,7 +183,7 @@
                         class='nav-button-idle nav-view-button' 
                         onclick='switchToMap()' 
                         type="image" 
-                        src="img/map-icon.png" 
+                        src="img/globe-icon.png" 
                         alt="Submit" 
                         width="24" height="24">
                 </div>