added Toastr

app.js

@@ -34,8 +34,8 @@ api.on('connection', function(spark) {
     console.log(spark.address);
     console.log(spark.query);
 
-    spark.on('hello', function(data){
-        console.log('got hello data from ' + spark.id);
+    spark.on('hello', function(data) {
+        console.log('got hello data from ', spark.id);
         console.log(data);
 
         if(typeof data.id !== 'undefined' && typeof data.info !== 'undefined')
@@ -49,7 +49,7 @@ api.on('connection', function(spark) {
         }
     });
 
-    spark.on('update', function(data){
+    spark.on('update', function(data) {
         console.log('got update from ' + spark.id);
         console.log(data);
 
@@ -60,6 +60,10 @@ api.on('connection', function(spark) {
             client.write({action: 'update', data: stats});
         }
     });
+
+    spark.on('end', function(data) {
+        //
+    });
 });
 
 client.on('connection', function(spark) {

public/js/controllers.js

@@ -2,7 +2,7 @@
 
 /* Controllers */
 
-function StatsCtrl($scope, $filter, socket, _) {
+function StatsCtrl($scope, $filter, socket, _, toastr) {
 
 	// Main Stats init
 	// ---------------
@@ -13,6 +13,7 @@ function StatsCtrl($scope, $filter, socket, _) {
 	$scope.lastBlock = 0;
 	$scope.upTimeTotal = 0;
 
+	$scope.nodes = [];
 	$scope.map = [];
 
 	// Socket listeners
@@ -25,7 +26,7 @@ function StatsCtrl($scope, $filter, socket, _) {
 		console.log('The connection has been opened.');
 	})
 	.on('end', function end() {
-		self._socket = false;
+		console.log('Socket connection ended.')
 	})
 	.on('error', function error(err) {
 		console.log(err);
@@ -34,35 +35,39 @@ function StatsCtrl($scope, $filter, socket, _) {
 		console.log('We are scheduling a reconnect operation', opts);
 	})
 	.on('data', function incoming(data) {
-		console.log('Received some data', data);
 		socketAction(data.action, data.data);
 	});
 
 	socket.on('init', function(data)
 	{
-		console.log(data);
-
-		$scope.nodes = data.nodes;
-
-		updateStats();
+		socketAction("init", data.nodes);
 	});
 
 	function socketAction(action, data)
 	{
+		console.log('Action: ', action);
+		console.log('Data: ', data);
+
 		switch(action) {
+			case "init":
+				$scope.nodes = data;
+				if($scope.nodes.length > 0){
+					toastr['success']("Got nodes list", "Got nodes!");
+				}
+				break;
+
 			case "add":
-				console.log(data);
 				$scope.nodes.push(data);
+				toastr['success']("New node connected!", "New node!");
 				break;
 
 			case "update":
-				console.log(data);
 				$scope.nodes[findIndex({id: data.id})].stats = data.stats;
 				break;
 
 			case "info":
-				console.log(data);
 				$scope.nodes[findIndex({id: data.id})].info = data.info;
+				break;
 		}
 
 		updateStats();

public/js/lib/toastr.min.js

@@ -0,0 +1 @@
+!function(e){e(["jquery"],function(e){return function(){function t(e,t,n){return f({type:O.error,iconClass:g().iconClasses.error,message:e,optionsOverride:n,title:t})}function n(t,n){return t||(t=g()),v=e("#"+t.containerId),v.length?v:(n&&(v=c(t)),v)}function i(e,t,n){return f({type:O.info,iconClass:g().iconClasses.info,message:e,optionsOverride:n,title:t})}function o(e){w=e}function s(e,t,n){return f({type:O.success,iconClass:g().iconClasses.success,message:e,optionsOverride:n,title:t})}function a(e,t,n){return f({type:O.warning,iconClass:g().iconClasses.warning,message:e,optionsOverride:n,title:t})}function r(e){var t=g();v||n(t),l(e,t)||u(t)}function d(t){var i=g();return v||n(i),t&&0===e(":focus",t).length?void h(t):void(v.children().length&&v.remove())}function u(t){for(var n=v.children(),i=n.length-1;i>=0;i--)l(e(n[i]),t)}function l(t,n){return t&&0===e(":focus",t).length?(t[n.hideMethod]({duration:n.hideDuration,easing:n.hideEasing,complete:function(){h(t)}}),!0):!1}function c(t){return v=e("<div/>").attr("id",t.containerId).addClass(t.positionClass).attr("aria-live","polite").attr("role","alert"),v.appendTo(e(t.target)),v}function p(){return{tapToDismiss:!0,toastClass:"toast",containerId:"toast-container",debug:!1,showMethod:"fadeIn",showDuration:300,showEasing:"swing",onShown:void 0,hideMethod:"fadeOut",hideDuration:1e3,hideEasing:"swing",onHidden:void 0,extendedTimeOut:1e3,iconClasses:{error:"toast-error",info:"toast-info",success:"toast-success",warning:"toast-warning"},iconClass:"toast-info",positionClass:"toast-top-right",timeOut:5e3,titleClass:"toast-title",messageClass:"toast-message",target:"body",closeHtml:"<button>&times;</button>",newestOnTop:!0,preventDuplicates:!1,progressBar:!1}}function m(e){w&&w(e)}function f(t){function i(t){return!e(":focus",l).length||t?(clearTimeout(O.intervalId),l[r.hideMethod]({duration:r.hideDuration,easing:r.hideEasing,complete:function(){h(l),r.onHidden&&"hidden"!==b.state&&r.onHidden(),b.state="hidden",b.endTime=new Date,m(b)}})):void 0}function o(){(r.timeOut>0||r.extendedTimeOut>0)&&(u=setTimeout(i,r.extendedTimeOut),O.maxHideTime=parseFloat(r.extendedTimeOut),O.hideEta=(new Date).getTime()+O.maxHideTime)}function s(){clearTimeout(u),O.hideEta=0,l.stop(!0,!0)[r.showMethod]({duration:r.showDuration,easing:r.showEasing})}function a(){var e=(O.hideEta-(new Date).getTime())/O.maxHideTime*100;f.width(e+"%")}var r=g(),d=t.iconClass||r.iconClass;if(r.preventDuplicates){if(t.message===C)return;C=t.message}"undefined"!=typeof t.optionsOverride&&(r=e.extend(r,t.optionsOverride),d=t.optionsOverride.iconClass||d),T++,v=n(r,!0);var u=null,l=e("<div/>"),c=e("<div/>"),p=e("<div/>"),f=e("<div/>"),w=e(r.closeHtml),O={intervalId:null,hideEta:null,maxHideTime:null},b={toastId:T,state:"visible",startTime:new Date,options:r,map:t};return t.iconClass&&l.addClass(r.toastClass).addClass(d),t.title&&(c.append(t.title).addClass(r.titleClass),l.append(c)),t.message&&(p.append(t.message).addClass(r.messageClass),l.append(p)),r.closeButton&&(w.addClass("toast-close-button").attr("role","button"),l.prepend(w)),r.progressBar&&(f.addClass("toast-progress"),l.prepend(f)),l.hide(),r.newestOnTop?v.prepend(l):v.append(l),l[r.showMethod]({duration:r.showDuration,easing:r.showEasing,complete:r.onShown}),r.timeOut>0&&(u=setTimeout(i,r.timeOut),O.maxHideTime=parseFloat(r.timeOut),O.hideEta=(new Date).getTime()+O.maxHideTime,r.progressBar&&(O.intervalId=setInterval(a,10))),l.hover(s,o),!r.onclick&&r.tapToDismiss&&l.click(i),r.closeButton&&w&&w.click(function(e){e.stopPropagation?e.stopPropagation():void 0!==e.cancelBubble&&e.cancelBubble!==!0&&(e.cancelBubble=!0),i(!0)}),r.onclick&&l.click(function(){r.onclick(),i()}),m(b),r.debug&&console&&console.log(b),l}function g(){return e.extend({},p(),b.options)}function h(e){v||(v=n()),e.is(":visible")||(e.remove(),e=null,0===v.children().length&&v.remove())}var v,w,C,T=0,O={error:"error",info:"info",success:"success",warning:"warning"},b={clear:r,remove:d,error:t,getContainer:n,info:i,options:{},subscribe:o,success:s,version:"2.1.0",warning:a};return b}()})}("function"==typeof define&&define.amd?define:function(e,t){"undefined"!=typeof module&&module.exports?module.exports=t(require("jquery")):window.toastr=t(window.jQuery)});

public/js/services.js

@@ -27,6 +27,28 @@ app.factory('socket', function ($rootScope) {
   // };
 });
 
+app.factory('toastr', function ($rootScope) {
+  toastr = window.toastr;
+  toastr.options = {
+    "closeButton": false,
+    "debug": false,
+    "newestOnTop": true,
+    "progressBar": false,
+    "positionClass": "toast-top-right",
+    "preventDuplicates": false,
+    "onclick": null,
+    "showDuration": "300",
+    "hideDuration": "1000",
+    "timeOut": "5000",
+    "extendedTimeOut": "1000",
+    "showEasing": "swing",
+    "hideEasing": "linear",
+    "showMethod": "fadeIn",
+    "hideMethod": "fadeOut"
+  };
+  return toastr;
+});
+
 var lodash = angular.module('lodash', []);
 lodash.factory('_', function() {
   return window._;

views/layout.jade

@@ -5,6 +5,7 @@ html(ng-app="netStatsApp")
     title= title
     link(rel='stylesheet', href='//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700')
     link(rel='stylesheet', href='/css/bootstrap.min.css')
+    link(rel='stylesheet', href='/css/toastr.min.css')
     link(rel='stylesheet', href='/css/minimal-icons.css')
     link(rel='stylesheet', href='/css/animation.css')
     link(rel='stylesheet', href='/css/style.css')
@@ -19,6 +20,7 @@ html(ng-app="netStatsApp")
     script(src="/js/lib/topojson.v1.min.js")
     script(src="/js/lib/datamaps.min.js")
     script(src="/js/lib/moment.min.js")
+    script(src="/js/lib/toastr.min.js")
     script(src="/js/lib/locale/en-gb.js")
     script(src="/js/lib/angular-moment.min.js")
     script(src="/js/lib/bootstrap.min.js")