nitweb/angular: display Catalog as homepage

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

diff --git a/share/nitweb/directives/contributor-list.html b/share/nitweb/directives/contributor-list.html
new file mode 100644 (file)
index 0000000..a46cce9
--- /dev/null
+++ b/share/nitweb/directives/contributor-list.html
@@ -0,0 +1,11 @@
+<div ng-if='listContributors.length > 0'>
+       <h3 id={{listId}}>
+               <span>{{listTitle}}</span>
+       </h3>
+       <ul class='list-unstyled user-list'>
+               <li ng-repeat='contributor in listContributors'>
+                       <img class='avatar' src="https://secure.gravatar.com/avatar/{{contributor.hash}}?size=20&amp;default=retro">
+                       {{contributor.name}}
+               </li>
+       </ul>
+</div>

diff --git a/share/nitweb/index.html b/share/nitweb/index.html
index 17bcd23..1b99a81 100644 (file)
--- a/share/nitweb/index.html
+++ b/share/nitweb/index.html
@@ -56,5 +56,6 @@
                <script src='/javascripts/model.js'></script>
                <script src='/javascripts/entities.js'></script>
                <script src='/javascripts/ui.js'></script>
+               <script src='/javascripts/index.js'></script>
        </body>
 </html>

diff --git a/share/nitweb/javascripts/entities.js b/share/nitweb/javascripts/entities.js
index 255602c..9d9a452 100644 (file)
--- a/share/nitweb/javascripts/entities.js
+++ b/share/nitweb/javascripts/entities.js
@@ -94,6 +94,7 @@
                                restrict: 'E',
                                scope: {
                                        listEntities: '=',
+                                       listId: '@',
                                        listTitle: '@',
                                        listObjectFilter: '=',
                                },

diff --git a/share/nitweb/javascripts/index.js b/share/nitweb/javascripts/index.js
new file mode 100644 (file)
index 0000000..534f462
--- /dev/null
+++ b/share/nitweb/javascripts/index.js
@@ -0,0 +1,92 @@
+/*
+ * Copyright 2016 Alexandre Terrasa <alexandre@moz-code.org>.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function() {
+       angular
+               .module('index', ['model', 'ngSanitize'])
+
+               .run(['$anchorScroll', function($anchorScroll) {
+                       $anchorScroll.yOffset = 80;
+               }])
+
+               .controller('IndexCtrl', ['Catalog', '$routeParams', '$sce', '$scope', '$location', '$anchorScroll', function(Catalog, $routeParams, $sce, $scope, $location, $anchorScroll) {
+                       this.loadHighlighted = function() {
+                               Catalog.loadHightlighted(
+                                       function(data) {
+                                               $scope.highlighted = data;
+                                       }, function(err) {
+                                               $scope.error = err;
+                                       });
+                       };
+
+                       this.loadMostRequired = function() {
+                               Catalog.loadMostRequired(
+                                       function(data) {
+                                               $scope.required = data;
+                                       }, function(err) {
+                                               $scope.error = err;
+                                       });
+                       };
+
+                       this.loadByTags = function() {
+                               Catalog.loadByTags(
+                                       function(data) {
+                                               $scope.bytags = data;
+                                       }, function(err) {
+                                               $scope.error = err;
+                                       });
+                       };
+
+                       this.loadStats = function() {
+                               Catalog.loadStats(
+                                       function(data) {
+                                               $scope.stats = data;
+                                       }, function(err) {
+                                               $scope.error = err;
+                                       });
+                       };
+
+                       this.loadContributors = function() {
+                               Catalog.loadContributors(
+                                       function(data) {
+                                               $scope.contributors = data;
+                                       }, function(err) {
+                                               $scope.error = err;
+                                       });
+                       };
+
+
+                       this.scrollTo = function(hash) {
+                               $anchorScroll(hash);
+                       }
+
+                       this.loadHighlighted();
+                       this.loadStats();
+                       this.loadContributors();
+               }])
+
+               .directive('contributorList', ['Model', function(Model) {
+                       return {
+                               restrict: 'E',
+                               scope: {
+                                       listId: '@',
+                                       listTitle: '@',
+                                       listContributors: '='
+                               },
+                               templateUrl: '/directives/contributor-list.html'
+                       };
+               }])
+})();

diff --git a/share/nitweb/javascripts/nitweb.js b/share/nitweb/javascripts/nitweb.js
index 28291fb..93b7c3a 100644 (file)
--- a/share/nitweb/javascripts/nitweb.js
+++ b/share/nitweb/javascripts/nitweb.js
@@ -15,12 +15,14 @@
  */
 
 (function() {
-       angular.module('nitweb', ['ngRoute', 'ngSanitize', 'entities'])
+       angular.module('nitweb', ['ngRoute', 'ngSanitize', 'entities', 'index'])
 
        .config(function($routeProvider, $locationProvider) {
                $routeProvider
                        .when('/', {
-                               templateUrl: 'views/index.html'
+                               templateUrl: 'views/index.html',
+                               controller: 'IndexCtrl',
+                               controllerAs: 'indexCtrl'
                        })
                        .when('/package/:id', {
                                templateUrl: 'views/package.html',

diff --git a/share/nitweb/stylesheets/nitweb.css b/share/nitweb/stylesheets/nitweb.css
index 2d38457..eb82ee6 100644 (file)
--- a/share/nitweb/stylesheets/nitweb.css
+++ b/share/nitweb/stylesheets/nitweb.css
@@ -206,6 +206,14 @@ entity-list:hover .btn-filter {
        margin-bottom: 0px;
 }
 /*
+ * Users
+ */
+
+.avatar {
+       border-radius: 2px;
+}
+
+/*
  * Code Highlighting
  */
 

diff --git a/share/nitweb/views/index.html b/share/nitweb/views/index.html
index 9f9b93d..b7bee8e 100644 (file)
--- a/share/nitweb/views/index.html
+++ b/share/nitweb/views/index.html
@@ -1 +1,70 @@
-<h1>Hello nitweb!</h1>
+<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>