Somewhat done control page

[matches/MCTX3420.git] / testing / MCTXWeb / public_html / static / mctx.graph.js

diff --git a/testing/MCTXWeb/public_html/static/mctx.graph.js b/testing/MCTXWeb/public_html/static/mctx.graph.js
index 687db84..22d14d7 100644 (file)
--- a/testing/MCTXWeb/public_html/static/mctx.graph.js
+++ b/testing/MCTXWeb/public_html/static/mctx.graph.js
@@ -15,6 +15,7 @@ mctx.graph.dependent = null;
 mctx.graph.independent = null;
 mctx.graph.timer = null;
 mctx.graph.running = false;
+mctx.graph.chart = null;
 
 /**
  * Helper - Calculate pairs of (dependent, independent) values
@@ -22,6 +23,15 @@ mctx.graph.running = false;
  * Appends each value pair to the result
  * @returns result
  */
+/**
+ * Helper - Calculate pairs of (dependent, independent) values
+ * Given input as (time, value) pairs for dependent and independent
+ * Appends each value pair to the result
+ * @param {array[][]} dependent Dependent data to be correlated with independent
+ * @param {array[][]} independent Independent data
+ * @param {array[][]} result Storage location
+ * @returns {dataMerge.result}
+ */
 function dataMerge(dependent, independent, result) {
        var j = 0;
        for (var i = 0; i < dependent.length-1; ++i) {
@@ -89,13 +99,29 @@ $.fn.setDevices = function() {
     $("#xaxis").deployDevices("radio", false, 'xaxis');
     $("#yaxis").deployDevices("checkbox", true, 'yaxis');
     $("#current_time").val(data.running_time);
-    //Add event listeners for when the inputs are changed
+    //Add event listeners for when the
     $(".change input").change(function () {
       $("#graph").setGraph();
     });
   });
 };
 
+function setGraphStatus(on, failText, keep) {
+  if (on) {
+    mctx.graph.running = true;
+    $("#status-text").html("&nbsp;");
+    $("#graph-run").prop("value", "Pause");
+  } else {
+    mctx.graph.running = false;
+    if (failText) {
+      $("#status-text").text(failText).addClass("fail");
+    } else if (!keep) {
+      $("#status-text").text("Graph stopped").removeClass("fail");
+    }
+    $("#graph-run").prop("value", "Run");
+  }
+}
+
 function graphUpdater() {
   var urls = {
     'sensors' : mctx.graph.api.sensors,
@@ -103,7 +129,6 @@ function graphUpdater() {
   }
   
   var updater = function () {
-    var time_limit = 20;
     var responses = [];
     var ctime =  $("#current_time");
     
@@ -114,22 +139,27 @@ function graphUpdater() {
     var devices = mctx.graph.devices;
     
     if (xaxis.size() < 1 || yaxis.size() < 1) {
-      mctx.graph.running = false;
+      setGraphStatus(false, "No x or y axis selected.");
       return;
     }
     
     $.each(devices, function(key, val) {
       if (val.urltype in urls) {
         var parameters = {id : val.id};
-        if (start_time != null) {
+        if (start_time !== null) {
           parameters.start_time = start_time;
         }
-        if (end_time != null) {
+        if (end_time !== null) {
           parameters.end_time = end_time;
         }
         responses.push($.ajax({url : urls[val.urltype], data : parameters})
         .done(function(json) {
           //alert("Hi from " + json.name);
+          if (!$("#status-text").checkStatus(json)) {
+            setGraphStatus(false, null, true); //Don't reset text, checkstatus just set it.
+            return;
+          }
+          
           var dev = val.data;
           for (var i = 0; i < json.data.length; ++i) {
             if (dev.length <= 0 || json.data[i][0] > dev[dev.length-1][0]) {
@@ -144,34 +174,39 @@ function graphUpdater() {
 
     //... When the response is received, then() will happen (I think?)
     $.when.apply(this, responses).then(function () {
-      var plot_data = [];
-      yaxis.each(function() {
-        //alert("Add " + $(this).val() + " to plot");
-        if (xaxis.attr("alt") === "time") {
-          //alert("Against time");
-          plot_data.push(devices[$(this).attr("alt")].data);
+      if (mctx.graph.running) {
+        var plot_data = [];
+        
+        yaxis.each(function() {
+          //alert("Add " + $(this).val() + " to plot");
+          if (xaxis.attr("alt") === "time") {
+            //alert("Against time");
+            plot_data.push(devices[$(this).attr("alt")].data);
+          } else {
+            var result = []
+            dataMerge(devices[xaxis.attr("alt")].data, 
+                      devices[$(this).attr("alt")].data, result);
+            plot_data.push(result);
+          }
+        });
+        
+        if (mctx.graph.chart !== null) {
+          mctx.graph.chart.setData(plot_data);
+          mctx.graph.chart.setupGrid(); 
+          mctx.graph.chart.draw();
         } else {
-          var result = []
-          dataMerge(devices[xaxis.attr("alt")].data, devices[$(this).attr("alt")].data, result);
-          /*
-          var astr = "[";
-          for (var i = 0; i < result.length; ++i)
-            astr += "[" + result[i][0] + "," + result[i][1] + "]" + ",";
-          astr += "]";
-          alert(astr);
-          */
-          plot_data.push(result);
+          mctx.graph.chart = $.plot("#graph", plot_data);
         }
-      });
-      
-      $.plot("#graph", plot_data);
-      if (mctx.graph.running) {
         mctx.graph.timer = setTimeout(updater, 1000);
       }
-    }, function () {mctx.graph.running=false; alert("Graph crashed");});
+    }, function () {
+      setGraphStatus("Connection issue - graph stopped.");
+      //This will always happen when a user closes the page
+      //alert("Graph crashed"); 
+    });
   };
   
-  mctx.graph.running = true;
+  setGraphStatus(true);
   updater();
   return this;
 }
@@ -186,6 +221,7 @@ $.fn.setGraph = function () {
   var yaxis = $("#yaxis input[name=yaxis]:checked");
   if (xaxis.size() < 1 || yaxis.size() < 1) {
     //nothing to plot...
+    setGraphStatus(false, "No x or y axis selected.");
     return;
   }
   
@@ -219,6 +255,7 @@ $.fn.setGraph = function () {
   
   if (!mctx.graph.running) {
     $("#graph-run").val("Pause");
+    $("#status-text").text("")
     graphUpdater();
   }
   
@@ -226,14 +263,10 @@ $.fn.setGraph = function () {
 };
 
 $.fn.runButton = function() {
-  //alert($(this).val());
-  if ($(this).val() === "Run") {
-    $("#graph").setGraph();
-    $(this).val("Pause");
-  }
-  else {
-    mctx.graph.running = false;
+  if (mctx.graph.running) {
+    setGraphStatus(false);
     clearTimeout(mctx.graph.timer);
-    $(this).val("Run");
+  } else {
+    $("#graph").setGraph();
   }
 };