From 5cfebe1aa14d75b9b722c65afc91eb2f6f535830 Mon Sep 17 00:00:00 2001
From: oleg <oleg.korobenko@gmail.com>
Date: Mon, 4 May 2015 12:14:37 +0300
Subject: [PATCH] separate projects, builds, build console blocks at the client

---
 projects/project1/config.json |  6 +++--
 projects/project2/config.json |  4 ++-
 static/js/app/app.js          | 47 ++++++++++++++++++++---------------
 views/index.jade              | 22 ++++++++++++++--
 4 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/projects/project1/config.json b/projects/project1/config.json
index 872ff50..20749f9 100644
--- a/projects/project1/config.json
+++ b/projects/project1/config.json
@@ -7,8 +7,10 @@
 	},
 	"steps": [
 		{"type": "shell", "cmd": "echo \"hello, cur dir is `pwd`\""},
-		{"type": "shell", "cmd": "sleep 3"},
+		{"type": "shell", "cmd": "sleep 4"},
 		{"type": "shell", "cmd": "echo 1 > 1.txt"},
-		{"type": "shell", "cmd": "echo 2 > 2.txt"}
+		{"type": "shell", "cmd": "sleep 4"},
+		{"type": "shell", "cmd": "echo 2 > 2.txt"},
+		{"type": "shell", "cmd": "cat 1.txt 2.txt"}
 	]
 }
\ No newline at end of file
diff --git a/projects/project2/config.json b/projects/project2/config.json
index 91b2c61..9661323 100644
--- a/projects/project2/config.json
+++ b/projects/project2/config.json
@@ -7,6 +7,8 @@
 	},
 	"steps": [
 		{"type": "shell", "cmd": "echo 11 > 11.txt"},
-		{"type": "shell", "cmd": "echo 22 > 22.txt"}
+		{"type": "shell", "cmd": "sleep 4"},
+		{"type": "shell", "cmd": "echo 22 > 22.txt"},
+		{"type": "shell", "cmd": "cat 11.txt 22.txt"}
 	]
 }
\ No newline at end of file
diff --git a/static/js/app/app.js b/static/js/app/app.js
index 8c8e91d..488ee41 100644
--- a/static/js/app/app.js
+++ b/static/js/app/app.js
@@ -7,37 +7,44 @@ define([
 ) {
 	var connect = dataio(socketio.connect());
 
-	var projects = connect.resource('projects');
-	var builds = connect.resource('builds');
+	var projects = connect.resource('projects'),
+		projectsTemplate = _($('#projects-template').html()).template();
 
-	var projectsTemplate = _($('#projects-template').html()).template();
-	$('#content').on('click', '.js-projects .js-run', function() {
+	$('#projects').on('click', '.js-projects .js-run', function() {
 		var projectName = $(this).parent('.js-project').data('name');
 		projects.sync('run', {projectName: projectName}, function(err, result) {
-			$('#content').append(
-				(err && err.message)
-			);
+			$('#content').append(err && err.message);
 		});
 	});
 
 	projects.sync('read', function(err, projects) {
-		$('#content').html(
+		$('#projects').html(
 			(err && err.message) ||
 			projectsTemplate({projects: projects})
 		);
 	});
 
-	builds.subscribe(function(data, action) {
-		$('#content').append(
-			action.action + ': ' + JSON.stringify(data) + '<br>'
-		);
-		if (action.action === 'create') {
-			var name = 'build' + data.id;
-			connect.resource(name).subscribe(function(data, action) {
-				$('#content').append(
-					'<br>' + name + ': ' + data + '<br>'
-				);
-			});
-		}
+
+	var builds = connect.resource('builds'),
+		buildsTemplate = _($('#builds-template').html()).template(),
+		buildsHash = {};
+
+	$('#builds').on('click', '.js-builds .js-show-console', function() {
+		var buildId = $(this).parent('.js-build').data('id'),
+			resourceName = 'build' + buildId;;
+
+		$('#build-console').prev('h2').html('Build #' + buildId + ' console');
+		$('#build-console').html('');
+
+		connect.resource(resourceName).subscribe(function(data) {
+			$('#build-console').append('<div>' + data + '</div>');
+		});
+	});
+
+	builds.subscribe(function(build, action) {
+		buildsHash[build.id] = build;
+		$('#builds').html(buildsTemplate({
+			builds: _(buildsHash).values().reverse()
+		}));
 	});
 });
diff --git a/views/index.jade b/views/index.jade
index 081c93f..0151c39 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -7,8 +7,6 @@ html
 			require(['app/app']);
 
 	body
-		h1 hello world
-
 
 		script#projects-template(type="text/template")
 			| <div class="js-projects">
@@ -20,5 +18,25 @@ html
 			|	 <% }); %>
 			| </div>
 
+		script#builds-template(type="text/template")
+			| <div class="js-builds">
+			|	 <% _(builds).each(function(build) { %>
+			|	 	<div class="js-build" data-id="<%= build.id %>">
+			|	 		<span>#<%= build.id %></span>
+			|	 		<span><%= build.project.name %></span>
+			|	 		<span><%= build.status %></span>
+			|	 		<span class="js-show-console">&rarr;</span>
+			|	 	</div>
+			|	 <% }); %>
+			| </div>
+
+		h2 Projects
+		#projects
+
+		h2 Builds
+		#builds
+
+		h2 Build console
+		#build-console
 
 		#content