comments + more reading info

public/js/data.js

@@ -264,7 +264,7 @@ function getReadings(spot_id){
             query_data = readings;
 
             createPoints([readings[0]], color);
-            createGraphReading(readings, "DATE",  color);
+            createGraphReading(readings, query_selection,  color);
 
             var dataview = document.getElementById("dataView")
             dataview.querySelector("#nav-button-graph").classList.add("new_data_button");

public/js/graph.js

@@ -24,7 +24,7 @@ $( document ).ready(function() {
         }
     });
 });
-function createGraphReading(dataset, title, color){
+function createGraphReading(dataset, q_arr, color){
     //reset containers
     document.getElementById('readingStats').style.display = 'block';
     document.getElementById('line-chart').style.display = 'none';
@@ -33,9 +33,34 @@ function createGraphReading(dataset, title, 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 spot = q_arr[3];
+
+    var title = document.createElement('h');
+    title.innerHTML = "Trip " + trip + ", Site " + site + ", Sector " + sector + ", Spot " + spot; 
+    parent.append(title);
+
     //fill with content
+    var textElem = document.createElement('p');
+    textElem.innerHTML = "Latitude: " + dataset[x].latitude;
+    parent.append(textElem);
+
+    var textElem = document.createElement('p');
+    textElem.innerHTML = "Longitude: " + dataset[x].longitude;
+    parent.append(textElem);
+
+    var textElem = document.createElement('p');
+    textElem.innerHTML = "Elevation: " + dataset[x].elevation;
+    parent.append(textElem);
+
+    var textElem = document.createElement('p');
+    textElem.innerHTML = "Accuracy: " + dataset[x].accuracy;
+    parent.append(textElem);
+    
     for (x=0;x<dataset.length;x++){
-        console.log(dataset[x]);
         var textElem = document.createElement('p');
         textElem.innerHTML = dataset[x].sensorid + ": " + dataset[x].value;
         parent.append(textElem);

public/js/util.js

@@ -43,6 +43,8 @@ function switchToData(){
     setTimeout(function(){ document.getElementById("loading").style.display = "none"; }, 10);}
 
 // TEAMPLATES FOR DOM PIECES
+
+// generalized formula
 function createRadioElement(name, id, label, f){
     console.log(name,id,label);
     var radioHtml = '<div class="elem-div elem-0">'
@@ -60,6 +62,8 @@ function createRadioElement(name, id, label, f){
 
     return radioHtml;
 }
+
+// take information from data.js and write it into html
 function createRadioElementTrips( mode, name, checked, label, id ) {
     var f = "getSites";
     return createRadioElement(name, id, label, f);
@@ -69,9 +73,10 @@ function createRadioElementSites( mode, name, checked, label, id ) {
     var f = "getSectors";
     return createRadioElement(name, id, label, f);
 }
+// this one is different since it changes for reading and streaming
 function createRadioElementSectors( mode, name, checked, label, id ) {
-    var f = "getSpots";
-    if (query_type == 1){
+    var f = "getSpots"; // if reading
+    if (query_type == 1){ // if streaming
         f = "getStreamingsPlatforms";
     }
     return createRadioElement(name, id, label, f);
@@ -85,6 +90,7 @@ function createRadioElementStreamingsPlatforms( mode, name, checked, id, label )
     var f = "getStreamingsDates";   
     return createRadioElement(name, id, label, f);
 }
+// this one doesnt use the general formula.
 function createRadioElementStreamingsDates( mode, name, checked, date ) {
     var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" onchange="getStreamings('+ "'" + date + "'" +')"type="radio" name="' + name + '" id="' + date + '"';
     if ( checked ) {