o Creating a little component to create and maintain a Bootstrap navbar.

3 files changed, 122 insertions, 56 deletions

diff --git a/src/main/resources/webapp/apps/frontPageApp/frontPageApp.js b/src/main/resources/webapp/apps/frontPageApp/frontPageApp.js
index 4633892..6a3e6a6 100755
--- a/src/main/resources/webapp/apps/frontPageApp/frontPageApp.js
+++ b/src/main/resources/webapp/apps/frontPageApp/frontPageApp.js
@@ -11,11 +11,6 @@ var frontPageApp = angular.module('frontPageApp', ['ngGrid', 'person', 'badge',
       when('/build/:buildUuid', {controller: BuildCtrl, templateUrl: '/apps/frontPageApp/build.html?noCache=' + noCache});
 });
 
-function FrontPageCtrl($scope, Person, Badge) {
-  $scope.persons = Person.query();
-  $scope.recentBadges = Badge.query();
-}
-
 function groupBy(array, size) {
   var group = [];
   var groups = [];
@@ -50,6 +45,11 @@ function groupByDay(array, accessor) {
   return byDay;
 }
 
+function FrontPageCtrl($scope, Person, Badge) {
+  $scope.persons = Person.query();
+  $scope.recentBadges = Badge.query();
+}
+
 function BadgeListCtrl($scope, Badge, PagingTableService) {
   var personsWatcher = function () {
     $scope.badgeGroups = groupByDay($scope.badges.rows, function (badge) { return badge.badge.createdDate });
diff --git a/src/main/resources/webapp/apps/jenkinsApp/jenkinsApp.js b/src/main/resources/webapp/apps/jenkinsApp/jenkinsApp.js
index 7d0a90c..d632aaf 100755
--- a/src/main/resources/webapp/apps/jenkinsApp/jenkinsApp.js
+++ b/src/main/resources/webapp/apps/jenkinsApp/jenkinsApp.js
@@ -1,6 +1,43 @@
 'use strict';
 
-var jenkinsApp = angular.module('jenkinsApp', ['jenkinsServer', 'jenkinsJob', 'jenkinsBuild', 'core.directives', 'pagingTableService']).config(function ($routeProvider) {
+function NavbarService() {
+  var create = function(tabs) {
+    console.log("create", tabs);
+    var currentIndex = 0;
+    var currentTab = tabs[currentIndex];
+
+    var onClick = function(tab) {
+      console.log("onClick", arguments);
+      currentTab = tab;
+      currentIndex = _.indexOf(tabs, tab);
+    };
+
+    var selected = function() {
+      return currentTab;
+    };
+
+    var selectedIndex = function() {
+      return currentIndex;
+    };
+
+    return {
+      onClick: onClick,
+      selected: selected,
+      selectedIndex: selectedIndex,
+      tabs: tabs
+    }
+  };
+
+  return {
+    create: create
+  }
+}
+
+angular.
+    module('navbarService', ['ngResource']).
+    factory('NavbarService', NavbarService);
+
+var jenkinsApp = angular.module('jenkinsApp', ['jenkinsServer', 'jenkinsJob', 'jenkinsBuild', 'core.directives', 'navbarService', 'pagingTableService']).config(function ($routeProvider) {
   $routeProvider.
       when('/', {controller: ServerListCtrl, templateUrl: '/apps/jenkinsApp/server-list.html?noCache=' + noCache}).
       when('/server/:serverUuid', {controller: ServerCtrl, templateUrl: '/apps/jenkinsApp/server.html?noCache=' + noCache}).
@@ -14,7 +51,7 @@ function ServerListCtrl($scope, $location, JenkinsServer) {
   });
 }
 
-function ServerCtrl($scope, $location, $routeParams, JenkinsServer, JenkinsJob, PagingTableService) {
+function ServerCtrl($scope, $routeParams, JenkinsServer, JenkinsJob, PagingTableService, NavbarService) {
   $scope.serverUuid = $routeParams.serverUuid;
 
   JenkinsServer.get({uuid: $scope.serverUuid}, function (server) {
@@ -22,6 +59,8 @@ function ServerCtrl($scope, $location, $routeParams, JenkinsServer, JenkinsJob,
   });
 
   $scope.jobs = PagingTableService.create($scope, PagingTableService.defaultCallback(JenkinsJob, {server: $scope.serverUuid}));
+
+  $scope.navbar = NavbarService.create(["Overview", "Jobs", "Recent Builds"]);
 }
 
 function JobCtrl($scope, $location, $routeParams, JenkinsJob, JenkinsBuild, PagingTableService) {
diff --git a/src/main/resources/webapp/apps/jenkinsApp/server.html b/src/main/resources/webapp/apps/jenkinsApp/server.html
index 88948b5..2a220db 100755
--- a/src/main/resources/webapp/apps/jenkinsApp/server.html
+++ b/src/main/resources/webapp/apps/jenkinsApp/server.html
@@ -12,55 +12,82 @@
     <li class="active">Server</li>
   </ul>
 
-  <h3>Overview</h3>
-  <table class="table">
-    <tbody>
-    <tr>
-      <th>URL</th>
-      <td><a href="{{server.url}}">{{server.url}}</a></td>
-    </tr>
-    <tr>
-      <th>Enabled</th>
-      <td>{{server.enabled}}</td>
-    </tr>
-    <tr>
-      <th>Number of jobs</th>
-      <td>{{server.jobCount}}</td>
-    </tr>
-    <tr>
-      <th>Number of builds</th>
-      <td>{{server.buildCount}}</td>
-    </tr>
-    <tr>
-      <th>Most recent build</th>
-      <td>{{server.lastBuildTimestamp | date:'medium'}}</td>
-    </tr>
-    </tbody>
-  </table>
+<!--
+  <ul class="nav nav-tabs">
+    <li ng-class="{active: mode == 'overview'}"><a ng-click="setMode('overview')">Overview</a></li>
+    <li ng-class="{active: mode == 'jobs'}"><a ng-click="setMode('jobs')">Jobs</a></li>
+    <li ng-class="{active: mode == 'recentBuilds'}"><a ng-click="setMode('recentBuilds')">Recent Builds</a></li>
+  </ul>
+-->
+  <ul class="nav nav-tabs">
+    <li ng-repeat="tab in navbar.tabs" ng-class="{active: navbar.selected() == tab}">
+      <a ng-click="navbar.onClick(tab)">{{tab}}</a>
+    </li>
+  </ul>
+
+  <div ng-show="navbar.selectedIndex() == 0" class="row">
+    <div class="span12">
+      <h3>Overview</h3>
+      <table class="table">
+        <tbody>
+        <tr>
+          <th>URL</th>
+          <td><a href="{{server.url}}">{{server.url}}</a></td>
+        </tr>
+        <tr>
+          <th>Enabled</th>
+          <td>{{server.enabled}}</td>
+        </tr>
+        <tr>
+          <th>Number of jobs</th>
+          <td>{{server.jobCount}}</td>
+        </tr>
+        <tr>
+          <th>Number of builds</th>
+          <td>{{server.buildCount}}</td>
+        </tr>
+        <tr>
+          <th>Most recent build</th>
+          <td>{{server.lastBuildTimestamp | date:'medium'}}</td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
 
-  <h3>Recent Jobs</h3>
-  <table class="table">
-    <tbody>
-    <tr ng-repeat="job in jobs.rows">
-      <td>{{job.displayName}}</td>
-      <td>{{job.createdDate | date:'medium'}}</td>
-      <td><a class="btn" href="/jenkins/#/server/{{server.uuid}}/job/{{job.uuid}}"><i class="icon-chevron-right"></i></a></td>
-    </tr>
-    </tbody>
-    <tfoot>
-    <tr>
-      <td colspan="3">
-        <ul class="pager">
-          <li class="previous" ng-class="{disabled: jobs.startIndex == 0}">
-            <a ng-click="jobs.prev()">&larr; Older</a>
-          </li>
-          <li class="next">
-            <a ng-click="jobs.next()">Newer &rarr;</a>
-          </li>
-        </ul>
-      </td>
-    </tr>
-    </tfoot>
-  </table>
+  <div ng-show="navbar.selectedIndex() == 1" class="row">
+    <div class="span12">
+      <h3>Jobs</h3>
+      <table class="table">
+        <tbody>
+        <tr ng-repeat="job in jobs.rows">
+          <td>{{job.displayName}}</td>
+          <td>{{job.createdDate | date:'medium'}}</td>
+          <td><a class="btn" href="/jenkins/#/server/{{server.uuid}}/job/{{job.uuid}}"><i class="icon-chevron-right"></i></a></td>
+        </tr>
+        </tbody>
+        <tfoot>
+        <tr>
+          <td colspan="3">
+            <ul class="pager">
+              <li class="previous" ng-class="{disabled: jobs.startIndex == 0}">
+                <a ng-click="jobs.prev()">&larr; Older</a>
+              </li>
+              <li class="next">
+                <a ng-click="jobs.next()">Newer &rarr;</a>
+              </li>
+            </ul>
+          </td>
+        </tr>
+        </tfoot>
+      </table>
+    </div>
+  </div>
+
+  <div ng-show="navbar.selectedIndex() == 2" class="row">
+    <div class="span12">
+      <h3>Recent builds</h3>
+    </div>
+  </div>
 
 </div>