Voting on posts

ryanyogan · Feb 23, 2014 · a4f68b1 · a4f68b1
1 parent 4a3e847
commit a4f68b1
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 4 deletions.
diff --git a/app/index.html b/app/index.html
@@ -74,6 +74,7 @@
         <script src="scripts/services/auth.js"></script>
         <script src="scripts/services/user.js"></script>
         <script src="scripts/filters/url.js"></script>
+        <script src="scripts/directives/checkusername.js"></script>
         <!-- endbuild -->
 </body>
 </html>
diff --git a/app/scripts/controllers/posts.js b/app/scripts/controllers/posts.js
@@ -11,4 +11,27 @@ app.controller('PostsCtrl', function($scope, $location, Post) {
     Post.delete(postId);
   };
 
+  $scope.upVotePost = function(postId, upVoted) {
+    if (upVoted) {
+      Post.clearVote(postId, upVoted);
+    } else {
+      Post.upVote(postId);
+    }
+  };
+
+  $scope.downVotePost = function(postId, downVoted) {
+    if (downVoted) {
+      Post.clearVote(postId, !downVoted);
+    } else {
+      Post.downVote(postId);
+    }
+  };
+
+  $scope.upVoted = function(post) {
+    return Post.upVoted(post);
+  };
+
+  $scope.downVoted = function(post) {
+    return Post.downVoted(post);
+  }
 });
diff --git a/app/scripts/controllers/postview.js b/app/scripts/controllers/postview.js
@@ -11,4 +11,28 @@ app.controller('PostViewCtrl', function($scope, $routeParams, Post) {
   $scope.removeComment = function(comment, commentId) {
     Post.deleteComment($scope.post, comment, commentId);
   };
+
+  $scope.upVotePost = function (upVoted) {
+    if (upVoted) {
+      Post.clearVote($routeParams.postId, true);
+    } else {
+      Post.upVote($routeParams.postId);
+    }
+  };
+
+  $scope.downVotePost = function (downVoted) {
+    if (downVoted) {
+      Post.clearVote($routeParams.postId, false);
+    } else {
+      Post.downVote($routeParams.postId);
+    }
+  };
+
+  $scope.upVoted = function () {
+    return Post.upVoted($scope.post);
+  };
+
+  $scope.downVoted = function () {
+    return Post.downVoted($scope.post);
+  };
 });
diff --git a/app/scripts/directives/checkusername.js b/app/scripts/directives/checkusername.js
@@ -0,0 +1,31 @@
+'use strict';
+
+app.directive('checkUsername', function(User) {
+  var usernameRegexp = /^[^.$\[\]#\/\s]+$/;
+
+  return {
+    require: 'ngModel',
+  link: function(scope, elm, attrs, ctrl) {
+    ctrl.$parsers.unshift(function(viewValue) {
+      if (usernameRegexp.test(viewValue)) {
+        if (User.findByUsername(viewValue).$getIndex().length === 0) {
+          ctrl.$setValidity('taken', true);
+          ctrl.$setValidity('invalid', true);
+
+          return viewValue;
+        } else {
+          ctrl.$setValidity('taken', false);
+          ctrl.$setValidity('invalid', true);
+
+          return undefined;
+        }
+      } else {
+        ctrl.$setValidity('taken', true);
+        ctrl.$setValidity('invalid', false);
+
+        return undefined;
+      }
+    });
+  }
+  };
+});
diff --git a/app/scripts/services/post.js b/app/scripts/services/post.js
@@ -35,6 +35,74 @@ app.factory('Post', function($firebase, FIREBASE_URL, User) {
     find: function(postId) {
       return posts.$child(postId);
     },
+    upVote: function(postId) {
+      if (User.signedIn()) {
+        var user = User.getCurrent();
+        var post = posts.$child(postId);
+
+        post.$child('upvotes').$child(user.username).$set(user.username).then(function() {
+          user.$child('upvotes').$child(postId).$set(postId);
+          post.$child('downvotes').$remove(user.username);
+          user.$child('downvotes').$remove(postId);
+
+          post.$child('score').$transaction(function(score) {
+            if (!score) {
+              return 1;
+            }
+
+            return score + 1;
+          });
+        });
+      }
+    },
+    downVote: function(postId) {
+      if (User.signedIn()) {
+        var user = User.getCurrent();
+        var post = posts.$child(postId);
+
+        post.$child('downvotes').$child(user.username).$set(user.username).then(function() {
+          user.$child('downvotes').$child(postId).$set(postId);
+          post.$child('upvotes').$remove(user.username);
+          user.$child('upvotes').$remove(postId);
+
+          post.$child('score').$transaction(function(score) {
+            if (score === undefined || score === null) {
+              return -1;
+            }
+            return score - 1;
+          });
+        });
+      }
+    },
+    clearVote: function(postId, upVoted) {
+      if (User.signedIn()) {
+        var user = User.getCurrent();
+        var username = user.username;
+        var post = posts.$child(postId);
+
+        post.$child('upvotes').$remove(username);
+        post.$child('downvotes').$remove(username);
+        user.$child('upvotes').$remove(postId);
+        user.$child('downvotes').$remove(postId);
+        post.$child('score').$transaction(function(score) {
+          if (upVoted) {
+            return score - 1;
+          } else {
+            return score + 1;
+          }
+        });
+      }
+    },
+    upVoted: function(post) {
+      if (User.signedIn() && post.upvotes) {
+        return post.upvotes.hasOwnProperty(User.getCurrent().username);
+      }
+    },
+    downVoted: function(post) {
+      if (User.signedIn() && post.downvotes) {
+        return post.downvotes.hasOwnProperty(User.getCurrent().username);
+      }
+    },
     deleteComment: function(post, comment, commentId) {
       if (User.signedIn()) {
         var user = User.findByUsername(comment.username);

diff --git a/app/views/posts.html b/app/views/posts.html
@@ -1,6 +1,8 @@
 <div class="container posts-page">
   <div class="post row" ng-repeat="(postId, post) in posts">
     <div class="col-xs-1">
+      <div class="vote up"><span ng-hide="downVoted(post)" ng-click="upVotePost(postId, upVoted(post))">▲</span></div>
+      <div class="vote down"><span ng-hide="upVoted(post)" ng-click="downVotePost(postId, downVoted(post))">▼</span></div>
     </div>
     <div class="col-md-9 col-xs-11">
       <div class="info">
@@ -10,6 +12,7 @@
         </a>
       </div>
       <div>
+        <span>{{ post.score || 0 }} votes</span>
         <span>submitted by <a href="#/users/{{ post.owner }}">{{ post.owner }}</a></span>
         -
         <a href="#/posts/{{ postId }}">comments</a>

diff --git a/app/views/register.html b/app/views/register.html
@@ -2,8 +2,12 @@
   <h2>Register</h2>
 
   <form ng-submit="register()">
-    <p ng-show="error" class="text-danger">{{ error }}</p>
-    <input type="text" ng-model="user.username" placeholder="Username" class="form-control"><br />
+    <div ng-show="error || form.username.$error">
+      <p ng-show="error" class="text-danger">{{ error }}</p>
+      <p ng-show="form.username.$error.taken" class="text-danger">Username is already taken.</p>
+      <p ng-show="form.username.$error.invalid" class="text-danger">Username contains invalid characters</p>
+    </div>
+    <input type="text" ng-model="user.username" name="username" check-username placeholder="Username" class="form-control"><br />
     <input type="email" ng-model="user.email" placeholder="Email" class="form-control"><br />
     <input type="password" ng-model="user.password" placeholder="Password" class="form-control"><br />
     <input type="submit" value="Register" class="btn btn-primary">

diff --git a/app/views/showpost.html b/app/views/showpost.html
@@ -1,8 +1,8 @@
 <div class="container posts-page">
   <div class="post row">
     <div class="col-xs-1">
-      <div class="vote up"><span ng-hide="downVoted(post)" ng-click="upVotePost(postId, upVoted(post))">&#x25B2;</span></div>
-      <div class="vote down"><span ng-hide="upVoted(post)" ng-click="downVotePost(postId, downVoted(post))">&#x25BC;</span></div>
+      <div class="vote up"><span ng-hide="downVoted(post)" ng-click="upVotePost(upVoted())">&#x25B2;</span></div>
+      <div class="vote down"><span ng-hide="upVoted(post)" ng-click="downVotePost(downVoted())">&#x25BC;</span></div>
     </div>
     <div class="col-md-9 col-xs-11">
       <div class="info">
@@ -12,6 +12,8 @@
         </a>
       </div>
       <div>
+        <span>{{ post.score || 0 }} votes</span>
+        &dash;
         <span>submitted by <a href="#/users/{{ post.owner }}">{{ post.owner }}</a></span>
       </div>
     </div>