Make graphs work, update flot to v0.8.3

src/Makefile.in

@@ -113,7 +113,9 @@ WEBFILES = \
 	src/web/angular.min.js \
  	src/web/jquery.min.js \
 	src/web/jquery.flot.min.js \
+	src/web/jquery.flot.time.min.js \
 	src/web/jquery.flot.selection.min.js \
+	src/web/jquery.flot.resize.min.js \
 	src/web/bootstrap/css/bootstrap.min.css
  	
 testinstall:

src/http.c

@@ -90,7 +90,9 @@ static struct http_static_t http_static_files[] = {
 	{ "/aprsc-joulukissa.jpg", "aprsc-joulukissa.jpg" },
 	{ "/excanvas.min.js", "excanvas.min.js" },
 	{ "/jquery.flot.min.js", "jquery.flot.min.js" },
+	{ "/jquery.flot.time.min.js", "jquery.flot.time.min.js" },
 	{ "/jquery.flot.selection.min.js", "jquery.flot.selection.min.js" },
+	{ "/jquery.flot.resize.min.js", "jquery.flot.resize.min.js" },
 	{ "/motd.html", "motd.html" },
 	{ "/jquery.min.js", "jquery.min.js" },
 	{ "/angular.min.js", "angular.min.js" },

src/web/aprsc.js

@@ -521,8 +521,6 @@ function render_clients(element, d, cols)
 	return;
 }
 
-var graph_selected = '';
-
 function render_block(graph_tree, element, d)
 {
 	var s = '<table>';
@@ -829,6 +827,8 @@ function update_status()
 	});
 }
 
+var graph_selected = '';
+
 var graph_opt;
 var graph_data;
 
@@ -1048,6 +1048,12 @@ function init()
 	check_for_easter();
 	
 	update_status();
+}
+
+/* ******** NEW angular.js ********* */
+
+function graph_setup()
+{
 	gr_switch('totals.tcp_bytes_rx');
 	
 	$('#graph').bind('plotselected', function(event,ranges) {
@@ -1066,8 +1072,6 @@ function init()
 	});
 }
 
-/* ******** NEW angular.js ********* */
-
 function ratestr(rate)
 {
 	var prefix = '';
@@ -1227,6 +1231,8 @@ app.controller('aprscc', [ '$scope', '$http', function($scope, $http) {
 	};
 	
 	full_load($scope, $http);
+	
+	graph_setup();
 
 }]);
 

src/web/index.html

@@ -27,7 +27,8 @@
  </div>
 
 <div class='row' ng-cloak>
-<h3>Server</h3>
+<div class='col-md-4 col-sm-12'>
+<h4>Server</h4>
 <div class='table-responsive'>
 <table class='table table-hover table-condensed table-striped'>
   <tr><td>Server ID</td> <td class="ar">{{ status.server.server_id }}</td></tr>
@@ -41,8 +42,17 @@
 </div>
 </div>
 
+<div class='col-md-8 col-sm-12'>
+<div style='height: 230px;' id='graph'></div>
+<div style='padding: 5px 0 0 0;'>
+<button onclick='graphZoom(1)' disabled='1' id='g_zoom_in'>Zoom</button>
+<button onclick='graphZoom(0)' class='hide' id='g_zoom_out'>Zoom out</button>
+</div>
+</div>
+</div>
+
 <div class='row' ng-cloak>
-<h3>Totals</h3>
+<h4>Totals</h4>
 <div class='table-responsive'>
 <table class='table table-hover table-condensed table-striped'>
 <tr ng-repeat="k in setup.keys_totals">
@@ -55,13 +65,13 @@
 </div>
 
 <div class='row' ng-cloak>
-<h3>Duplicate filter
+<h4>Duplicate filter
 <span class='link' id='dupecheck_more_show' ng-click='dupe_vars_visible = !(dupe_vars_visible)' ng-show='!(dupe_vars_visible)'>
 	<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAMCAIAAADkharWAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wKHQcqC7wd4jIAAABtSURBVCjPY/z//z8DKYAJU+jFA4YbNxh+4NLxHxV8//7fX/4/O/v//e//YwVMDCQCkjUgnLS//7+4+H9+/v/8/P8ZGP4zMPxn54dyzeMRTmKB6/zwgOHlSxSzfn5k+AkJhheD2tMka2AkNWkAAOhriTYQTgMEAAAAAElFTkSuQmCC" />
 	</span>
 <span class='link' id='dupecheck_more_hide' ng-click='dupe_vars_visible = !(dupe_vars_visible)' ng-show='dupe_vars_visible'>
 	<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAMCAIAAADkharWAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wKHQcqE69xemQAAABMSURBVCjPY/z//z8DKYCJgUQwqDUcmMAgIcEgIMAgIMDAyMjAyMjAIQDlWiQgNLDAWR8eMLx8iWLYz48MPxkYGBgYXrxACDKOxGAFAAP1ERwzsIoPAAAAAElFTkSuQmCC" />
-	</span></h3>
+	</span></h4>
 <div class='table-responsive'>
 <table class='table table-hover table-condensed table-striped'>
 <tr ng-repeat="k in setup.keys_dupecheck">
@@ -84,7 +94,7 @@
 </div>
 
 <div class='row' ng-cloak>
-<h3>Port listeners</h3>
+<h4>Port listeners</h4>
 <div class='table-responsive' ng-show='status'>
 <table class='table table-hover table-condensed table-striped'>
 <tr><th ng-repeat="title in setup.cols_listener">{{ title }}</th></tr>
@@ -96,7 +106,7 @@
 </div>
 
 <div class='row' ng-cloak>
-<h3>Peers</h3>
+<h4>Peers</h4>
 <div class='table-responsive' ng-show='status.peers'>
 <table class='table table-hover table-condensed table-striped'>
 <tr><th ng-repeat="title in setup.cols_peers">{{ title }}</th></tr>
@@ -108,7 +118,7 @@
 </div>
 
 <div class='row' ng-cloak>
-<h3>Clients</h3>
+<h4>Clients</h4>
 <div class='table-responsive' ng-show='status'>
 <table class='table table-hover table-condensed table-striped'>
 <tr>
@@ -154,7 +164,9 @@
 
 <script type='text/JavaScript' src='jquery.min.js'></script>
 <script type='text/JavaScript' src='jquery.flot.min.js'></script>
+<script type='text/JavaScript' src='jquery.flot.time.min.js'></script>
 <script type='text/JavaScript' src='jquery.flot.selection.min.js'></script>
+<script type='text/JavaScript' src='jquery.flot.resize.min.js'></script>
 <script type='text/JavaScript' src='aprsc.js'></script>
 
 </body>

src/web/jquery.flot.resize.min.js

@@ -0,0 +1,7 @@
+/* Javascript plotting library for jQuery, version 0.8.3.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+*/
+(function($,e,t){"$:nomunge";var i=[],n=$.resize=$.extend($.resize,{}),a,r=false,s="setTimeout",u="resize",m=u+"-special-event",o="pendingDelay",l="activeDelay",f="throttleWindow";n[o]=200;n[l]=20;n[f]=true;$.event.special[u]={setup:function(){if(!n[f]&&this[s]){return false}var e=$(this);i.push(this);e.data(m,{w:e.width(),h:e.height()});if(i.length===1){a=t;h()}},teardown:function(){if(!n[f]&&this[s]){return false}var e=$(this);for(var t=i.length-1;t>=0;t--){if(i[t]==this){i.splice(t,1);break}}e.removeData(m);if(!i.length){if(r){cancelAnimationFrame(a)}else{clearTimeout(a)}a=null}},add:function(e){if(!n[f]&&this[s]){return false}var i;function a(e,n,a){var r=$(this),s=r.data(m)||{};s.w=n!==t?n:r.width();s.h=a!==t?a:r.height();i.apply(this,arguments)}if($.isFunction(e)){i=e;return a}else{i=e.handler;e.handler=a}}};function h(t){if(r===true){r=t||1}for(var s=i.length-1;s>=0;s--){var l=$(i[s]);if(l[0]==e||l.is(":visible")){var f=l.width(),c=l.height(),d=l.data(m);if(d&&(f!==d.w||c!==d.h)){l.trigger(u,[d.w=f,d.h=c]);r=t||true}}else{d=l.data(m);d.w=0;d.h=0}}if(a!==null){if(r&&(t==null||t-r<1e3)){a=e.requestAnimationFrame(h)}else{a=setTimeout(h,n[o]);r=false}}}if(!e.requestAnimationFrame){e.requestAnimationFrame=function(){return e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(t,i){return e.setTimeout(function(){t((new Date).getTime())},n[l])}}()}if(!e.cancelAnimationFrame){e.cancelAnimationFrame=function(){return e.webkitCancelRequestAnimationFrame||e.mozCancelRequestAnimationFrame||e.oCancelRequestAnimationFrame||e.msCancelRequestAnimationFrame||clearTimeout}()}})(jQuery,this);(function($){var options={};function init(plot){function onResize(){var placeholder=plot.getPlaceholder();if(placeholder.width()==0||placeholder.height()==0)return;plot.resize();plot.setupGrid();plot.draw()}function bindEvents(plot,eventHolder){plot.getPlaceholder().resize(onResize)}function shutdown(plot,eventHolder){plot.getPlaceholder().unbind("resize",onResize)}plot.hooks.bindEvents.push(bindEvents);plot.hooks.shutdown.push(shutdown)}$.plot.plugins.push({init:init,options:options,name:"resize",version:"1.0"})})(jQuery);