implements an interface for new notifications feature

MaxBlaushild · Sep 20, 2015 · b0719f5 · b0719f5
1 parent 9a468d6
commit b0719f5
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 4 deletions.
diff --git a/app/index.html b/app/index.html
@@ -56,6 +56,7 @@
         <script src="scripts/factories/comment-factory.js"></script>
         <script src="scripts/factories/picture-factory.js"></script>
         <script src="scripts/factories/like-factory.js"></script>
+        <script src="scripts/factories/notification-factory.js"></script>
 
         <!-- services -->
         <script src="scripts/services/four-oh-one-interceptor.js"></script>

diff --git a/app/scripts/controllers/navbar-controller.js b/app/scripts/controllers/navbar-controller.js
@@ -5,20 +5,28 @@
   angular.module('MainController').controller('NavbarCtrl', NavbarCtrl);
 
 
-  NavbarCtrl.$inject = ['$location', 'UserFactory', 'AuthFactory', '$scope'];
+  NavbarCtrl.$inject = ['$location', 'UserFactory', 'AuthFactory', '$scope', 'NotificationFactory'];
 
-  function NavbarCtrl($location, UserFactory, AuthFactory, $scope){
+  function NavbarCtrl($location, UserFactory, AuthFactory, $scope, NotificationFactory){
     var vm = this;
     vm.searchString = '';
     vm.currentUser = AuthFactory.currentUser;
 
+    function findNotificationIndexById(id){
+      for (var i = 0; i < vm.currentUser.notifications.length; i++) {
+        if (vm.currentUser.notifications[i].id === id) {
+           return i;
+        }
+      }
+    }
+
     vm.isLoggedIn = function(){
       return AuthFactory.isLoggedIn();
-    };
+    }
 
     vm.logOut = function(){
       AuthFactory.logOut();
-    };
+    }
 
     vm.searchUsers = function(searchString){
       UserFactory.getUsers(searchString).then(function(response){
@@ -28,10 +36,19 @@
       });
     }
 
+    vm.followNotification = function(notificationId, pictureId){
+      NotificationFactory.deactivateNotification(notificationId).then(function(){
+        var index = findNotificationIndexById(notificationId);
+        getProfile();
+        $location.path('/pictures/' + pictureId);
+      });
+    }
+
     var getProfile = function(){
       AuthFactory.getProfile();
     }
 
+
     $scope.$watch(function () { return self.currentUser; }, function(user){
         if (!user && simpleStorage.get('gl-user-token')) {
           getProfile();

diff --git a/app/scripts/factories/notification-factory.js b/app/scripts/factories/notification-factory.js
@@ -0,0 +1,22 @@
+'use strict';
+
+(function(){
+
+  function NotificationFactory($http, appSettings) {
+
+    var deactivateNotification = function(notificationId){
+      var notification = { notification: {  }  };
+      return $http.patch(appSettings.apiUrl + '/notifications/' + notificationId + '/deactivate', notification);
+    }
+
+    return {
+      deactivateNotification: deactivateNotification
+    };
+
+  };
+
+  angular.module('frontendApp').factory('NotificationFactory', NotificationFactory);
+
+  NotificationFactory.$inject = ['$http', 'appSettings'];
+
+})();
diff --git a/app/styles/views/navbar.scss b/app/styles/views/navbar.scss
@@ -31,5 +31,24 @@
     }
   }
 
+  a:focus {
+    background-color: $blue;
+  }
+
+  .active {
+    @include stroke(2, $blue);
+  }
+
+  .notification-count {
+    color: $blue;
+  }
+
+  .dropdown-menu {
+    background-color: $orange;
+
+    a:hover {
+      background-color: $blue;
+    }
+  }
 
 }
diff --git a/app/views/navbar.html b/app/views/navbar.html
@@ -15,6 +15,12 @@
             <li ng-if="NavbarCtrl.isLoggedIn()"><a class="nav-not-pic" href='#/glitch-a-pic'>Add Pic</a></li>
             <li ng-if="NavbarCtrl.isLoggedIn()"><a class="nav-not-pic" href='#/discover'>Discover</a></li>
             <li ng-if="NavbarCtrl.isLoggedIn()"><a class="nav-not-pic" href='javascript:void(0)' ng-click="NavbarCtrl.logOut()">Logout</a></li>
+            <li ng-if="NavbarCtrl.isLoggedIn()" class="dropdown">
+                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Notifications <span class="notification-count" ng-show="NavbarCtrl.currentUser.active_notifications > 0">{{NavbarCtrl.currentUser.active_notifications}} </span><span class="caret"></span></a>
+                <ul class="dropdown-menu">
+                    <li ng-repeat="noti in NavbarCtrl.currentUser.notifications"><a ng-class="{'active': noti.active }" href="javascript:void(0)" ng-click="NavbarCtrl.followNotification(noti.id, noti.picture_id)">{{noti.description}}</a></li>
+                </ul>
+            </li>
             <li ng-if="!NavbarCtrl.isLoggedIn()" pulsing-nav><a class="nav-not-pic" href='#/login'>Login</a></li>
             <li ng-if="!NavbarCtrl.isLoggedIn()" pulsing-nav><a class="nav-not-pic" href='#/sign-up'>Sign Up</a></li>
           </ul>