[#1716] use ui-router to collapse challenge participants (WIP)

bower.json

@@ -33,7 +33,7 @@
     "angular-sanitize": "1.2.0-rc.2",
     "marked": "~0.2.9",
     "JavaScriptButtons": "git://github.com/paypal/JavaScriptButtons.git#master",
-    "angular-ui-router": "eda67d2da08cbe2aa1aa39ef154a87c7afe480ec",
+    "angular-ui-router": "ca3b4777a603df8f86cfd653c8f6c38b2ae05d89",
     "angular-loading-bar": "~0.0.5"
   },
   "resolutions": {

public/js/app.js

@@ -94,21 +94,7 @@ window.habitrpg = angular.module('habitrpg',
           }]
         })
 
-        // Options > Inventory
+        // Options > Social > Challenges
-        .state('options.inventory', {
-          url: '/inventory',
-          templateUrl: "partials/options.inventory.html"
-        })
-        .state('options.inventory.inventory', {
-          url: '/inventory',
-          templateUrl: "partials/options.inventory.inventory.html"
-        })
-        .state('options.inventory.stable', {
-          url: '/stable',
-          templateUrl: "partials/options.inventory.stable.html"
-        })
-
-        // Options > Challenges
         .state('options.social.challenges', {
           url: "/challenges",
           controller: 'ChallengesCtrl',
@@ -124,6 +110,31 @@ window.habitrpg = angular.module('habitrpg',
               });
             }]
         })
+        .state('options.social.challenges.detail.member', {
+          url: '/:uid',
+          templateUrl: 'partials/options.social.challenges.detail.member.html',
+          controller: ['$scope', 'Challenges', '$stateParams',
+            function($scope, Challenges, $stateParams){
+              alert("Why is this controller not being instantiated?");
+              $scope.obj = Challenges.Challenge.getMember({cid:$stateParams.cid, uid:$stateParams.uid}, function(){
+                $scope.obj._locked = true;
+              });
+            }]
+        })
+
+        // Options > Inventory
+        .state('options.inventory', {
+          url: '/inventory',
+          templateUrl: "partials/options.inventory.html"
+        })
+        .state('options.inventory.inventory', {
+          url: '/inventory',
+          templateUrl: "partials/options.inventory.inventory.html"
+        })
+        .state('options.inventory.stable', {
+          url: '/stable',
+          templateUrl: "partials/options.inventory.stable.html"
+        })
 
         // Options > Settings
         .state('options.settings', {

public/js/controllers/challengesCtrl.js

@@ -140,6 +140,14 @@ habitrpg.controller("ChallengesCtrl", ['$scope', 'User', 'Challenges', 'Notifica
       }
     }
 
+    $scope.toggleMember = function(cid, uid){
+      if($state.includes('options.social.challenges.detail.member', {cid: cid, uid: uid})){
+        $state.go('options.social.challenges.detail')
+      }else{
+        $state.go('options.social.challenges.detail.member', {cid: cid, uid: uid});
+      }
+    }
+
     //------------------------------------------------------------
     // Tasks
     //------------------------------------------------------------

public/js/services/challengeServices.js

@@ -13,7 +13,8 @@ angular.module('challengeServices', ['ngResource']).
             //'query': {method: "GET", isArray:false}
             join: {method: "POST", url: API_URL + '/api/v1/challenges/:cid/join'},
             leave: {method: "POST", url: API_URL + '/api/v1/challenges/:cid/leave'},
-            close: {method: "POST", params: {uid:''}, url: API_URL + '/api/v1/challenges/:cid/close'}
+            close: {method: "POST", params: {uid:''}, url: API_URL + '/api/v1/challenges/:cid/close'},
+            getMember: {method: "GET", url: API_URL + '/api/v1/challenges/:cid/member/:uid'}
           });
 
         //var challenges = [];

src/controllers/challenges.js

@@ -95,21 +95,27 @@ api.list = function(req, res) {
 api.get = function(req, res) {
   var user = res.locals.user;
   Challenge.findById(req.params.cid)
-    .populate('members', 'profile.name habits dailys rewards todos')
+    .populate('members', 'profile.name _id')
     .exec(function(err, challenge){
       if(err) return res.json(500, {err:err});
       if (!challenge) return res.json(404, {err: 'Challenge ' + req.params.cid + ' not found'});
+      res.json(challenge);
+    })
+}
+
+api.getMember = function(req, res) {
+  var cid = req.params.cid, uid = req.params.uid;
+  User.findById(uid).select('profile.name habits dailys rewards todos')
+    .exec(function(err, member){
+      if(err) return res.json(500, {err:err});
+      if (!member) return res.json(404, {err: 'Member '+uid+' for challenge '+cid+' not found'});
       // slim down the return members' tasks to only the ones in the challenge
-      _.each(challenge.members, function(member){
+      _.each(['habits', 'dailys', 'todos', 'rewards'], function(type){
-        if (member._id == user._id)
+        member[type] = _.where(member[type], function(task){
-          challenge._isMember = true;
+          return task.challenge && task.challenge.id == cid;
-        _.each(['habits', 'dailys', 'todos', 'rewards'], function(type){
-          member[type] = _.where(member[type], function(task){
-            return task.challenge && task.challenge.id == challenge._id;
-          })
         })
       });
-      res.json(challenge);
+      res.json(member);
     })
 }
 

src/routes/api.js

@@ -95,5 +95,6 @@ router['delete']('/challenges/:cid', auth.auth, challenges['delete'])
 router.post('/challenges/:cid/close', auth.auth, challenges.selectWinner)
 router.post('/challenges/:cid/join', auth.auth, challenges.join)
 router.post('/challenges/:cid/leave', auth.auth, challenges.leave)
+router.get('/challenges/:cid/member/:uid', auth.auth, challenges.getMember)
 
 module.exports = router;

views/options/social/challenges.jade

@@ -6,6 +6,10 @@ script(type='text/ng-template', id='partials/options.social.challenges.detail.cl
   small.pull-right
     a(ng-click='cancelClosing(closingChal)') cancel
 
+script(type='text/ng-template', id='partials/options.social.challenges.detail.member.html')
+  h4 {{member.profile.name}}
+  habitrpg-tasks(main=false)
+
 script(type='text/ng-template', id='partials/options.social.challenges.detail.html')
   // Edit button
   div(ng-if='challenge.leader==user._id')
@@ -28,16 +32,25 @@ script(type='text/ng-template', id='partials/options.social.challenges.detail.ht
   .well(ng-if='challenge.description') {{challenge.description}}
   i.icon-question-sign(popover="These are the challenge's tasks. As users participate, they will change color and gain graphs to show you the overall progress of the group.", popover-trigger='mouseenter', popover-placement='right')
   habitrpg-tasks(obj='challenge', main=false)
-  .accordion(ng-if='challenge.members')
+
-    .accordion-group
+  // Member List
+  div(ng-if='challenge.members.length > 0')
+    h3 Participants
+    small.
+      (stats coming soon, see <a href='https://github.com/HabitRPG/habitrpg/issues/1716' target='_blank'>this issue</a>.)
+    table.table
+      tr(ng-repeat='member in challenge.members')
+        td {{member.profile.name}}
+
+  // FIXME, get this working - see https://github.com/HabitRPG/habitrpg/issues/1716
+  //-div(ng-if='challenge.members')
+    h4 How's Everyone Doing?
+    .accordion-group(ng-repeat='member in challenge.members')
       .accordion-heading
-        a.accordion-toggle(data-toggle='collapse', data-target='#collapse-members-{{challenge._id}}')
+        a.accordion-toggle(ng-click='toggleMember(challenge._id, member._id)') {{member.profile.name}}
-          h4 How's everyone doing?
+      .accordion-body(ng-class='{collapse: $stateParams.uid != member._id}')
-      .accordion-body.collapse(id='collapse-members-{{challenge._id}}')
+        .accordion-inner(ng-if='$stateParams.uid == member._id')
-        .accordion-inner
+          div(ng-view)
-          div(ng-repeat='member in challenge.members', ng-init='member._locked = true; obj=member')
-            h4 {{member.profile.name}}
-            habitrpg-tasks(main=false)
 
 script(type='text/ng-template', id='partials/options.social.challenges.html')
   .row-fluid