Separate boxes by lane

2 files changed, 73 insertions, 10 deletions

diff --git a/js/main.js b/js/main.js
index e7d2090..98c7c31 100644
--- a/js/main.js
+++ b/js/main.js
@@ -35,6 +35,10 @@ app.controller('VisualisationController', function($scope, $http, $q, $interval)
 
         function load() {
             $scope.steps = [];
+            $scope.integrations = [];
+            $scope.builds = [];
+            $scope.deploys = [];
+            $scope.tests = [];
             $http.get(apiBase + '/builders')
                 .then(function(builders) {
                     angular.forEach(builders.data, function(value, key) {
@@ -55,11 +59,38 @@ app.controller('VisualisationController', function($scope, $http, $q, $interval)
                                 sourceStamps: response.data.sourceStamps,
                                 number: response.data.number
                             };
-                            $scope.steps.push({
-                                name: key,
-                                lastBuild: details,
-                                data: value
-                            });
+
+                            if (key.indexOf("Integration") > -1) {
+                                $scope.integrations.push({
+                                    name: key,
+                                    lastBuild: details,
+                                    data: value
+                                });
+                            }
+                            else if (key.indexOf("Build") > -1) {
+                                $scope.builds.push({
+                                    name: key,
+                                    lastBuild: details,
+                                    data: value
+                                });
+                            }
+                            else if(key.indexOf("Deploy") > -1) {
+                                $scope.deploys.push({
+                                    name: key,
+                                    lastBuild: details,
+                                    data: value
+                                });
+                            }
+                            else if(key.indexOf("Test") > -1) {
+                                $scope.tests.push({
+                                    name: key,
+                                    lastBuild: details,
+                                    data: value
+                                });
+                            }
+
+
+
                             $scope.steps.sort(function(a, b) {
                                 var left = parseInt(a.name.split('.', 1));
                                 var right = parseInt(b.name.split('.', 1));
diff --git a/partials/visualisation.html b/partials/visualisation.html
index f7a4555..ae310fa 100644
--- a/partials/visualisation.html
+++ b/partials/visualisation.html
@@ -1,11 +1,43 @@
 <div class="visualisation"
      ng-style="selected && {'top': '35%'}">
-    <div class="box"
-         ng-class="{'pass': step.lastBuild.success, 'active': step.data.state == 'building', 'fail': step.lastBuild.failed}"
-         ng-repeat="step in steps"
-         ng-click="select(step, $event)">
-        {{step.name}}
+
+
+    <div class="lane">
+        <div class="box"
+             ng-class="{'pass': step.lastBuild.success, 'active': step.data.state == 'building', 'fail': step.lastBuild.failed}"
+             ng-repeat="step in integrations"
+             ng-click="select(step, $event)">
+            {{step.name}}
+        </div>
+    </div>
+
+    <div class="lane">
+        <div class="box"
+             ng-class="{'pass': step.lastBuild.success, 'active': step.data.state == 'building', 'fail': step.lastBuild.failed}"
+             ng-repeat="step in builds"
+             ng-click="select(step, $event)">
+            {{step.name}}
+        </div>
+    </div>
+
+    <div class="lane">
+        <div class="box"
+             ng-class="{'pass': step.lastBuild.success, 'active': step.data.state == 'building', 'fail': step.lastBuild.failed}"
+             ng-repeat="step in deploys"
+             ng-click="select(step, $event)">
+            {{step.name}}
+        </div>
+    </div>
+
+    <div class="lane">
+        <div class="box"
+             ng-class="{'pass': step.lastBuild.success, 'active': step.data.state == 'building', 'fail': step.lastBuild.failed}"
+             ng-repeat="step in tests"
+             ng-click="select(step, $event)">
+            {{step.name}}
+        </div>
     </div>
+
     <br />
     <div class="detail"
          ng-show="selected"