nitweb: index use ui-router and views for tabs

Signed-off-by: Alexandre Terrasa <alexandre@moz-code.org>

diff --git a/share/nitweb/javascripts/index.js b/share/nitweb/javascripts/index.js
index 3c905b5..104d627 100644 (file)
--- a/share/nitweb/javascripts/index.js
+++ b/share/nitweb/javascripts/index.js
@@ -20,11 +20,30 @@
 
                .config(function($stateProvider, $locationProvider) {
                        $stateProvider
-                               .state('index', {
+                               .state('catalog', {
                                        url: '/',
-                                       templateUrl: 'views/index.html',
-                                       controller: 'IndexCtrl',
-                                       controllerAs: 'indexCtrl'
+                                       templateUrl: 'views/catalog/index.html',
+                                       controller: 'CatalogCtrl',
+                                       controllerAs: 'vm',
+                                       abstract: true
+                               })
+                               .state('catalog.highlighted', {
+                                       url: '',
+                                       templateUrl: 'views/catalog/highlighted.html',
+                                       controller: 'CatalogHighlightedCtrl',
+                                       controllerAs: 'vm'
+                               })
+                               .state('catalog.required', {
+                                       url: 'required',
+                                       templateUrl: 'views/catalog/most_required.html',
+                                       controller: 'CatalogRequiredCtrl',
+                                       controllerAs: 'vm'
+                               })
+                               .state('catalog.tags', {
+                                       url: 'tags',
+                                       templateUrl: 'views/catalog/by_tags.html',
+                                       controller: 'CatalogTagsCtrl',
+                                       controllerAs: 'vm'
                                })
                })
 
@@ -62,60 +81,61 @@
                        }
                }])
 
-               .controller('IndexCtrl', function(Catalog, $sce, $scope, $location, $anchorScroll) {
-                       this.loadHighlighted = function() {
-                               Catalog.loadHightlighted(
-                                       function(data) {
-                                               $scope.highlighted = data;
-                                       }, function(err) {
-                                               $scope.error = err;
-                                       });
-                       };
+               .controller('CatalogCtrl', function(Catalog) {
+                       var vm = this;
+
+                       Catalog.loadContributors(
+                               function(data) {
+                                       vm.contributors = data;
+                               }, function(err) {
+                                       vm.error = err;
+                               });
+
+                       Catalog.loadStats(
+                               function(data) {
+                                       vm.stats = data;
+                               }, function(err) {
+                                       vm.error = err;
+                               });
+               })
 
-                       this.loadMostRequired = function() {
-                               Catalog.loadMostRequired(
-                                       function(data) {
-                                               $scope.required = data;
-                                       }, function(err) {
-                                               $scope.error = err;
-                                       });
-                       };
+               .controller('CatalogHighlightedCtrl', function(Catalog) {
+                       var vm = this;
 
-                       this.loadByTags = function() {
-                               Catalog.loadByTags(
-                                       function(data) {
-                                               $scope.bytags = data;
-                                       }, function(err) {
-                                               $scope.error = err;
-                                       });
-                       };
+                       Catalog.loadHightlighted(
+                               function(data) {
+                                       vm.highlighted = data;
+                               }, function(err) {
+                                       vm.error = err;
+                               });
+               })
 
-                       this.loadStats = function() {
-                               Catalog.loadStats(
-                                       function(data) {
-                                               $scope.stats = data;
-                                       }, function(err) {
-                                               $scope.error = err;
-                                       });
-                       };
+               .controller('CatalogRequiredCtrl', function(Catalog) {
+                       var vm = this;
 
-                       this.loadContributors = function() {
-                               Catalog.loadContributors(
-                                       function(data) {
-                                               $scope.contributors = data;
-                                       }, function(err) {
-                                               $scope.error = err;
-                                       });
-                       };
+                       Catalog.loadMostRequired(
+                               function(data) {
+                                       vm.required = data;
+                               }, function(err) {
+                                       vm.error = err;
+                               });
+               })
 
+               .controller('CatalogTagsCtrl', function(Catalog, $anchorScroll, $location) {
+                       var vm = this;
+
+                       Catalog.loadByTags(
+                               function(data) {
+                                       vm.bytags = data;
+                               }, function(err) {
+                                       vm.error = err;
+                               });
 
-                       this.scrollTo = function(hash) {
-                               $anchorScroll(hash);
-                       }
 
-                       this.loadHighlighted();
-                       this.loadStats();
-                       this.loadContributors();
+                       vm.scrollTo = function(hash) {
+                               $location.hash(hash);
+                               $anchorScroll();
+                       }
                })
 
                .directive('contributorList', function(Model) {

diff --git a/share/nitweb/views/catalog/by_tags.html b/share/nitweb/views/catalog/by_tags.html
new file mode 100644 (file)
index 0000000..31ca905
--- /dev/null
+++ b/share/nitweb/views/catalog/by_tags.html
@@ -0,0 +1,14 @@
+<div>
+       <h3>Tags</h3>
+       <div class='container-fluid'>
+               <div class='col-xs-3' ng-repeat='(tag, packages) in vm.bytags'>
+                       <span class='badge'>{{packages.length}}</span>
+                       <a ng-click='vm.scrollTo(tag)'>{{tag}}</a>
+               </div>
+       </div>
+       <div ng-repeat='(tag, packages) in vm.bytags'>
+               <entity-list list-id='{{tag}}' list-title='{{tag}}'
+                       list-entities='packages'
+                       list-object-filter='{}' />
+       </div>
+</div>

diff --git a/share/nitweb/views/catalog/highlighted.html b/share/nitweb/views/catalog/highlighted.html
new file mode 100644 (file)
index 0000000..5607bd5
--- /dev/null
+++ b/share/nitweb/views/catalog/highlighted.html
@@ -0,0 +1,5 @@
+<div>
+       <entity-list list-title='Highlighted packages'
+               list-entities='vm.highlighted'
+               list-object-filter='{}' />
+</div>

diff --git a/share/nitweb/views/catalog/index.html b/share/nitweb/views/catalog/index.html
new file mode 100644 (file)
index 0000000..877db4a
--- /dev/null
+++ b/share/nitweb/views/catalog/index.html
@@ -0,0 +1,47 @@
+<div class='container-fluid'>
+       <div class='page-header'>
+               <h2>Welcome to NitWeb!</h2>
+               <p class='text-muted'>The Nit knowledge base.</p>
+       </div>
+
+       <ul class='nav nav-tabs' role='tablist'>
+               <li role='presentation' ui-sref-active='active'>
+                       <a ui-sref='catalog.highlighted'>
+                               <span class='glyphicon glyphicon-book'/> Highlighed
+                       </a>
+               </li>
+               <li role='presentation' ui-sref-active='active'>
+                       <a ui-sref='catalog.required'>
+                               <span class='glyphicon glyphicon-book'/> Most required
+                       </a>
+               </li>
+               <li role='presentation' ui-sref-active='active'>
+                       <a ui-sref='catalog.tags'>
+                               <span class='glyphicon glyphicon-book'/> By tags
+                       </a>
+               </li>
+       </ul>
+       <table class='table'>
+               <tr>
+                       <td ng-repeat='(key, value) in vm.stats'>
+                               <h5><strong>{{value}}</strong>&nbsp;<span>{{key}}</span></h5>
+                       </td>
+               </tr>
+       </table>
+
+       <div class='container-fluid'>
+               <div class='col-xs-9'>
+                       <div class='tab-content'>
+                               <div role='tabpanel' class='tab-pane fade in active'>
+                                       <ui-view />
+                               </div>
+                       </div>
+               </div>
+               <div class='col-xs-3'>
+                       <contributor-list list-title='Maintainers'
+                                       list-contributors='vm.contributors.maintainers' />
+                       <contributor-list list-title='Contributors'
+                                       list-contributors='vm.contributors.contributors' />
+               </div>
+       </div>
+</div>

diff --git a/share/nitweb/views/catalog/most_required.html b/share/nitweb/views/catalog/most_required.html
new file mode 100644 (file)
index 0000000..93bf2e1
--- /dev/null
+++ b/share/nitweb/views/catalog/most_required.html
@@ -0,0 +1,5 @@
+<div>
+       <entity-list list-title='Most required'
+               list-entities='vm.required'
+               list-object-filter='{}' />
+</div>

diff --git a/share/nitweb/views/index.html b/share/nitweb/views/index.html
deleted file mode 100644 (file)
index b7bee8e..0000000
--- a/share/nitweb/views/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<div class='container-fluid'>
-       <div class='page-header'>
-               <h2>Welcome to NitWeb!</h2>
-               <p class='text-muted'>The Nit knowledge base.</p>
-       </div>
-
-       <ul class='nav nav-tabs' role='tablist'>
-               <li role='presentation' class='active'>
-                       <a data-toggle='tab' role='tab' data-target='#highlighted' aria-controls='highlighted'>
-                               <span class='glyphicon glyphicon-book'/> Highlighed
-                       </a>
-               </li>
-               <li role='presentation'>
-                       <a data-toggle='tab' role='tab' data-target='#required' aria-controls='required'
-                               ng-click='indexCtrl.loadMostRequired()'>
-                               <span class='glyphicon glyphicon-book'/> Most required
-                       </a>
-               </li>
-               <li role='presentation'>
-                       <a data-toggle='tab' role='tab' data-target='#bytags' aria-controls='bytags'
-                               ng-click='indexCtrl.loadByTags()'>
-                               <span class='glyphicon glyphicon-book'/> By tags
-                       </a>
-               </li>
-       </ul>
-       <table class='table'>
-               <tr>
-                       <td ng-repeat='(key, value) in stats'>
-                               <h5><strong>{{value}}</strong>&nbsp;<span>{{key}}</span></h5>
-                       </td>
-               </tr>
-       </table>
-
-       <div class='container-fluid'>
-               <div class='col-xs-9'>
-                       <div class='tab-content'>
-                               <div role='tabpanel' class='tab-pane fade in active' id='highlighted'>
-                                       <entity-list list-title='Highlighted packages'
-                                               list-entities='highlighted'
-                                               list-object-filter='{}' />
-                               </div>
-                               <div role='tabpanel' class='tab-pane fade' id='required'>
-                                       <entity-list list-title='Most required'
-                                               list-entities='required'
-                                               list-object-filter='{}' />
-                               </div>
-                               <div role='tabpanel' class='tab-pane fade' id='bytags'>
-                                       <h3>Tags</h3>
-                                       <div class='container-fluid'>
-                                               <div class='col-xs-3' ng-repeat='(tag, packages) in bytags'>
-                                                       <span class='badge'>{{packages.length}}</span>
-                                                       <a ng-click='indexCtrl.scrollTo(tag)'>{{tag}}</a>
-                                               </div>
-                                       </div>
-                                       <div ng-repeat='(tag, packages) in bytags'>
-                                               <entity-list list-id='{{tag}}' list-title='{{tag}}'
-                                                       list-entities='packages'
-                                                       list-object-filter='{}' />
-                                       </div>
-                               </div>
-                       </div>
-               </div>
-               <div class='col-xs-3'>
-                       <contributor-list list-title='Maintainers'
-                                       list-contributors='contributors.maintainers' />
-                       <contributor-list list-title='Contributors'
-                                       list-contributors='contributors.contributors' />
-               </div>
-       </div>
-</div>