nitweb: rewrite stars display

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

diff --git a/share/nitweb/directives/entity/rating.html b/share/nitweb/directives/entity/rating.html
new file mode 100644 (file)
index 0000000..25d58ef
--- /dev/null
+++ b/share/nitweb/directives/entity/rating.html
@@ -0,0 +1,54 @@
+<h4>Grade this entity</h4>
+
+<div class='container-fluid'>
+       <div class='col-xs-8'>
+               <dl class='dl-horizontal'>
+                       <dt>Feature</dt>
+                       <dd>
+                               <entity-stars mentity='mentity' dimension='feature' mean='ratings.feature.mean' list='ratings.feature.ratings' user='ratings.feature.user' ratings='ratings' />
+                               <p class='text-muted'><i>This entity is useful, usable and has a good API. It helps me getting things done.</i></p>
+                       </dd>
+                       <dt>Documentation</dt>
+                       <dd>
+                               <entity-stars mentity='mentity' dimension='doc' mean='ratings.doc.mean' list='ratings.doc.ratings' user='ratings.doc.user' ratings='ratings' />
+                               <p class='text-muted'><i>This entity is well documented, the explanations are clear and useful. They help me understand the feature and how to use it.</i></p>
+                       </dd>
+                       <dt>Examples</dt>
+                       <dd>
+                               <entity-stars mentity='mentity' dimension='examples' mean='ratings.examples.mean' list='ratings.examples.ratings' user='ratings.examples.user' ratings='ratings' />
+                               <p class='text-muted'><i>This entity is provided with examples, they are runnable and free of bugs. They help me understand the feature behavior and how to use it.</i></p>
+                       </dd>
+                       <dt>Code</dt>
+                       <dd>
+                               <entity-stars mentity='mentity' dimension='code' mean='ratings.code.mean' list='ratings.code.ratings' user='ratings.code.user' ratings='ratings' />
+                               <p class='text-muted'><i>This entity is well coded and respects the Nit standards.</i></p>
+                       </dd>
+               </dl>
+       </div>
+       <div class='col-xs-4'>
+               <h1 class='text-center'>
+                       <span class='text-danger'>{{ratings.feature.mean + ratings.doc.mean + ratings.examples.mean + ratings.code.mean | number: 1}} / 20</span><br><small>{{ratings.ratings.length}} votes</small>
+               </h1>
+       </div>
+</div>
+
+<h4>History</h4>
+
+<table class='table'>
+       <tr ng-repeat='rating in ratings.ratings | orderBy: "-timestamp"'>
+               <td>{{rating.timestamp * 1000 | date: 'yy/MM/dd hh:mm a'}}</td>
+               <td>
+                       <i>{{rating.user ? rating.user : "anon"}}<i>
+               </td>
+               <td>
+                       rated the <b>{{rating.dimension}}</b>
+               </td>
+               <td>
+                       <span class='stars' ng-repeat='star in [1, 2, 3, 4, 5]'>
+                               <span
+                                       class='star glyphicon'
+                                       ng-class='star <= rating.rating? "glyphicon-star": "glyphicon-star-empty"' />
+                       </span>
+               </td>
+       </tr>
+</table>

diff --git a/share/nitweb/directives/entity/stars.html b/share/nitweb/directives/entity/stars.html
index 796bc3b..8af294f 100644 (file)
--- a/share/nitweb/directives/entity/stars.html
+++ b/share/nitweb/directives/entity/stars.html
@@ -1,6 +1,6 @@
-<span class='stars' ng-repeat='star in [1, 2, 3, 4, 5]' ng-if='ratings' title='mean: {{ratings.mean}} ({{ratings.ratings.length}} stars)'>
+<span class='stars editable' ng-repeat='star in [1, 2, 3, 4, 5]' title='mean: {{mean ? mean : 0 | number: 1}} ({{ratings ? ratings.length : 0}} stars)'>
        <span
                class='star glyphicon'
-               ng-class='star <= ratings.mean? "glyphicon-star": "glyphicon-star-empty"'
-               ng-click='postStar(star)' />
+               ng-class='[star <= mean? "glyphicon-star": "glyphicon-star-empty", user.rating == star? "active": ""]'
+               ng-click='starsCtrl.postStar(star)' />
 </span>

diff --git a/share/nitweb/javascripts/entities.js b/share/nitweb/javascripts/entities.js
index 98903e7..e48b40a 100644 (file)
--- a/share/nitweb/javascripts/entities.js
+++ b/share/nitweb/javascripts/entities.js
@@ -18,7 +18,7 @@
        angular
                .module('entities', ['ngSanitize', 'ui', 'model'])
 
-               .controller('EntityCtrl', ['Model', 'Metrics', '$routeParams', '$scope', '$sce', function(Model, Metrics, $routeParams, $scope, $sce) {
+               .controller('EntityCtrl', ['Model', 'Metrics', 'Feedback', '$routeParams', '$scope', '$sce', function(Model, Metrics, Feedback, $routeParams, $scope, $sce) {
                        $scope.entityId = $routeParams.id;
 
                        this.loadEntityLinearization = function() {
@@ -158,7 +158,7 @@
                        };
                })
 
-               .directive('entityCard', function() {
+               .directive('entityCard', ['Feedback', function(Feedback) {
                        return {
                                restrict: 'E',
                                scope: {
@@ -170,9 +170,18 @@
                                templateUrl: '/directives/entity/card.html',
                                link: function ($scope, element, attrs) {
                                        $scope.currentTab = $scope.defaultTab ? $scope.defaultTab : 'signature';
+
+                                       $scope.loadEntityStars = function() {
+                                               Feedback.loadEntityStars($scope.mentity.full_name,
+                                                       function(data) {
+                                                               $scope.ratings = data;
+                                                       }, function(message, status) {
+                                                               $scope.error = {message: message, status: status};
+                                                       });
+                                       };
                                }
                        };
-               })
+               }])
 
                .directive('entityList', function() {
                        return {
@@ -255,30 +264,60 @@
                        };
                }])
 
-               .directive('entityRating', ['Feedback', function(Feedback, Code) {
+               .controller('StarsCtrl', ['Feedback', '$scope', function(Feedback, $scope) {
+                       $ctrl = this;
+
+                       this.postStar = function(rating) {
+                               Feedback.postEntityStarDimension($scope.mentity.full_name,
+                               $scope.dimension, rating,
+                               function(data) {
+                                       $scope.mean = data.mean;
+                                       $scope.list = data.ratings;
+                                       $scope.user = data.user;
+                                       $ctrl.loadEntityStars($scope);
+                               }, function(err) {
+                                       $scope.err = err;
+                               });
+                       }
+
+                       this.loadEntityStars = function($scope) {
+                               Feedback.loadEntityStars($scope.mentity.full_name,
+                                       function(data) {
+                                               $scope.ratings = data;
+                                       }, function(message, status) {
+                                               $scope.error = {message: message, status: status};
+                                       });
+                       };
+               }])
+
+               .directive('entityRating', ['Feedback', function(Feedback) {
                        return {
                                restrict: 'E',
                                scope: {
-                                       mentity: '='
+                                       mentity: '=',
+                                       ratings: '='
                                },
-                               templateUrl: '/directives/entity/stars.html',
-                               link: function ($scope, element, attrs) {
-                                       $scope.postStar = function(rating) {
-                                               Feedback.postEntityStar($scope.mentity.full_name, rating,
-                                               function(data) {
-                                                       $scope.ratings = data;
-                                               }, function(err) {
-                                                       $scope.err = err;
-                                               });
-                                       }
+                               controller: 'StarsCtrl',
+                               controllerAs: 'ratingsCtrl',
+                               templateUrl: '/directives/entity/rating.html'
+                       };
+               }])
 
-                                       Feedback.loadEntityStars($scope.mentity.full_name,
-                                               function(data) {
-                                                       $scope.ratings = data;
-                                               }, function(err) {
-                                                       $scope.err = err;
-                                               });
-                               }
+               .directive('entityStars', ['Feedback', function(Feedback) {
+                       return {
+                               restrict: 'E',
+                               scope: {
+                                       mentity: '=',
+                                       dimension: '@',
+                                       mean: '=',
+                                       list: '=',
+                                       user: '=',
+                                       refresh: '=',
+                                       ratings: '='
+                               },
+                               controller: 'StarsCtrl',
+                               controllerAs: 'starsCtrl',
+                               templateUrl: '/directives/entity/stars.html'
                        };
                }])
 })();

diff --git a/share/nitweb/javascripts/model.js b/share/nitweb/javascripts/model.js
index 8ec516c..8d05de0 100644 (file)
--- a/share/nitweb/javascripts/model.js
+++ b/share/nitweb/javascripts/model.js
@@ -102,8 +102,14 @@
                                                .success(cb)
                                                .error(cbErr);
                                },
-                               postEntityStar: function(id, rating, cb, cbErr) {
-                                       $http.post(apiUrl + '/feedback/stars/' + id, {rating: rating})
+                               loadEntityStarsDimension: function(id, dimension, cb, cbErr) {
+                                       $http.get(apiUrl + '/feedback/stars/' + id + '/dimension/' + dimension)
+                                               .success(cb)
+                                               .error(cbErr);
+                               },
+                               postEntityStarDimension: function(id, dimension, rating, cb, cbErr) {
+                                       $http.post(apiUrl + '/feedback/stars/' + id + '/dimension/' + dimension,
+                                               {rating: rating})
                                                .success(cb)
                                                .error(cbErr);
                                }

diff --git a/share/nitweb/stylesheets/nitweb.css b/share/nitweb/stylesheets/nitweb.css
index 23facdf..ca15a6f 100644 (file)
--- a/share/nitweb/stylesheets/nitweb.css
+++ b/share/nitweb/stylesheets/nitweb.css
@@ -228,20 +228,15 @@ entity-list:hover .btn-filter {
  * Ratings
  */
 
-.card .stars {
-       visibility: hidden
-}
-
-.card:hover .stars {
-       visibility: visible
-}
-
 .star {
        color: grey;
+}
+
+.editable .star {
        cursor: pointer;
 }
 
-.star:hover, .star.active:hover {
+.editable .star:hover, .editable .star.active:hover {
        color: #FF8100
 }