nitweb/angular: display stars
authorAlexandre Terrasa <alexandre@moz-code.org>
Thu, 30 Jun 2016 02:35:24 +0000 (22:35 -0400)
committerAlexandre Terrasa <alexandre@moz-code.org>
Mon, 4 Jul 2016 16:30:32 +0000 (12:30 -0400)
Signed-off-by: Alexandre Terrasa <alexandre@moz-code.org>

share/nitweb/directives/entity/doc.html
share/nitweb/directives/entity/stars.html [new file with mode: 0644]
share/nitweb/javascripts/entities.js
share/nitweb/javascripts/model.js
share/nitweb/stylesheets/nitweb.css

index 9d0ffb0..bf271c3 100644 (file)
@@ -1,5 +1,8 @@
 <div class='card' ng-if='mentity.mdoc'>
        <div class='card-body'>
+               <div class='pull-right'>
+                       <entity-rating mentity='mentity' />
+               </div>
                <div ng-bind-html='mentity.mdoc.html_documentation'></div>
        </div>
 </div>
diff --git a/share/nitweb/directives/entity/stars.html b/share/nitweb/directives/entity/stars.html
new file mode 100644 (file)
index 0000000..796bc3b
--- /dev/null
@@ -0,0 +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='star glyphicon'
+               ng-class='star <= ratings.mean? "glyphicon-star": "glyphicon-star-empty"'
+               ng-click='postStar(star)' />
+</span>
index 9333050..2438d84 100644 (file)
                                }
                        };
                }])
+
+               .directive('entityRating', ['Feedback', function(Feedback, Code) {
+                       return {
+                               restrict: 'E',
+                               scope: {
+                                       mentity: '='
+                               },
+                               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;
+                                               });
+                                       }
+
+                                       Feedback.loadEntityStars($scope.mentity.full_name,
+                                               function(data) {
+                                                       $scope.ratings = data;
+                                               }, function(err) {
+                                                       $scope.err = err;
+                                               });
+                               }
+                       };
+               }])
 })();
index 3accab2..efcecd5 100644 (file)
                        }
                }])
 
+               .factory('Feedback', [ '$http', function($http) {
+                       return {
+                               loadEntityStars: function(id, cb, cbErr) {
+                                       $http.get(apiUrl + '/feedback/stars/' + id)
+                                               .success(cb)
+                                               .error(cbErr);
+                               },
+                               postEntityStar: function(id, rating, cb, cbErr) {
+                                       $http.post(apiUrl + '/feedback/stars/' + id, {rating: rating})
+                                               .success(cb)
+                                               .error(cbErr);
+                               }
+                       }
+               }])
+
                .factory('DocDown', [ '$http', function($http) {
                        return {
                                postMarkdown: function(md, cb, cbErr) {
index 9471a5d..db8a03d 100644 (file)
@@ -214,6 +214,32 @@ entity-list:hover .btn-filter {
        margin-top: 8px;
        margin-bottom: 0px;
 }
+
+/*
+ * Ratings
+ */
+
+.card .stars {
+       visibility: hidden
+}
+
+.card:hover .stars {
+       visibility: visible
+}
+
+.star {
+       color: grey;
+       cursor: pointer;
+}
+
+.star:hover, .star.active:hover {
+       color: #FF8100
+}
+
+.star.active {
+       color: #FFC000
+}
+
 /*
  * Users
  */