improvemed ability to display the html5 notifications for commits

server/app/scripts/app.js

@@ -319,7 +319,7 @@ app.controller("BranchController", function($scope, $http, $routeParams, user) {
 		});
 });
 
-app.controller("CommitController", function($scope, $http, $routeParams, stdout, feed) {
+app.controller("CommitController", function($scope, $http, $routeParams, stdout, feed, notify) {
 
 	var remote = $routeParams.remote;
 	var owner  = $routeParams.owner;
@@ -327,10 +327,19 @@ app.controller("CommitController", function($scope, $http, $routeParams, stdout,
 	var branch = $routeParams.branch;
 	var commit = $routeParams.commit;
 
-	feed.subscribe(function(event) {
-		if (event.commit.sha == commit
-				&& event.commit.branch == branch) {
-			$scope.commit = event.commit;
+	feed.subscribe(function(item) {
+		// if the
+		if (item.commit.sha == commit
+				&& item.commit.branch == branch) {
+			$scope.commit = item.commit;
+			$scope.$apply();
+		} else {
+			// we trigger an html5 notification so the
+			// user is aware another build started
+			notify.sendCommit(
+				item.repo,
+				item.commit
+			);
 		}
 	});
 
@@ -347,8 +356,6 @@ app.controller("CommitController", function($scope, $http, $routeParams, stdout,
 	$http({method: 'GET', url: '/v1/repos/'+remote+'/'+owner+"/"+name+"/branches/"+branch+"/commits/"+commit}).
 		success(function(data, status, headers, config) {
 			$scope.commit = data;
-			$scope.coverage=45;
-			$scope.passing=100;
 
 			if (data.status!='Started' && data.status!='Pending') {
 				return;

server/app/scripts/controllers/home.js

@@ -2,8 +2,11 @@
 
 angular.module('app').controller("HomeController", function($scope, $http, feed, notify) {
 
-	feed.subscribe(function(message) {
-		notify.send(message.repo.name);
+	feed.subscribe(function(item) {
+		notify.sendCommit(
+			item.repo,
+			item.commit
+		);
 	});
 
 	$http({method: 'GET', url: '/v1/user/feed'}).

server/app/scripts/services/notify.js

@@ -1,23 +1,67 @@
 'use strict';
 
-angular.module('app').service('notify', ['$window', '$timeout', function($window, $timeout) {
+angular.module('app').service('notify', ['$window', '$timeout', '$location', function($window, $timeout, $location) {
 
+	// returns true if the HTML5 Notifications API is supported.
 	this.supported = function() {
 		return ("Notification" in $window)
 	}
 
+	// returns true if the user has granted permission to 
+	// display HTML5 notifications.
 	this.granted = function() {
 		return ("Notification" in $window) && Notification.permission === "granted";
 	}
 
+	// instructs the browser to request permission to
+	// display HTML5 notifications.
 	this.requestPermission = function() {
 		Notification.requestPermission();
 	}
 
+	// sends an HTML5 desktop notification using the specified
+	// title and notification options (optional).
 	this.send = function(title, opts) {
 		if ("Notification" in $window) {
-			var n = new Notification(title, opts);
-			$timeout(function() { n.close(); }, 10000);
+			var notification = new Notification(title, opts);
+
+			// automatically close the notification after
+			// 10 seconds of being open.
+			$timeout(function() {
+				notification.close();
+			}, 5000);
+
+			// if a hyperlink was specified, open the link
+			// when the notification is clicked.
+			notification.onclick = function() {
+				if (opts.href == undefined) {
+					return;
+				}
+				// not exactly sure why this is even necessary:
+				// http://stackoverflow.com/questions/11784656/angularjs-location-not-changing-the-path
+				$timeout(function(){ 
+					$location.path(opts.href);
+				}, 1);
+			};
 		}
 	};
+
+	// sends an HTML5 desktop notification for a Commit.
+	this.sendCommit = function(repo, commit) {
+		// ignore 'Pending' messages since they are (usually) immediately
+		// followed-up by a 'Started' message, and we don't want to flood
+		// the user with notifications.
+		if (commit.status == 'Pending') {
+			return;
+		}
+
+		var title = repo.owner+'/'+repo.name;
+		var url = '/'+repo.host+'/'+repo.owner+'/'+repo.name+'/'+commit.branch+'/'+commit.sha;
+
+		this.send(title, {
+			icon: 'https://secure.gravatar.com/avatar/'+commit.gravatar,
+			body: commit.message,
+			href: url,
+		});
+	}
 }]);

server/app/views/commit.html

@@ -6,6 +6,9 @@
 	<div class="col-xs-6 col-sm-3">
 		<span>Commit</span>
 		<span>{{ commit.sha }}</span>
+		<br/>
+		<span>Status</span>
+		<span>{{ commit.status }}</span>
 	</div>
 
 	<!-- primary column -->

server/handler/ws.go

@@ -200,8 +200,8 @@ func readWebsocket(ws *websocket.Conn) {
 func (h *WsHandler) Ping(w http.ResponseWriter, r *http.Request) error {
 	channel := h.pubsub.Register("_global")
 	msg := worker.Request{
-		Repo:   &model.Repo{ID: 1, Private: false, Host: "github.com", Owner: "ping", Name: "pong"},
-		Commit: &model.Commit{ID: 1, Sha: "000000000000000000000", Message: "hello world"},
+		Repo:   &model.Repo{ID: 1, Private: false, Host: "github.com", Owner: "drone", Name: "drone"},
+		Commit: &model.Commit{ID: 1, Status: "Started", Branch: "master", Sha: "113f4917ff9174945388d86395f902cd154074cb", Message: "Remove branches by SCM hook", Author: "bradrydzewski", Gravatar: "8c58a0be77ee441bb8f8595b7f1b4e87"},
 	}
 	channel.Publish(&msg)
 	w.WriteHeader(http.StatusOK)