Add basic, ugly mybadges details page

controllers/backpack.js

@@ -69,7 +69,10 @@ module.exports = function (app) {
     });
   });
 
-  app.get('/mybadges', [loggedIn], openbadger.middleware('getUserBadges'), function (req, res, next) {
+  app.get('/mybadges', [
+    loggedIn, 
+    openbadger.middleware('getUserBadges')
+  ], function (req, res, next) {
     var data = req.remote;
 
     res.render('user/backpack.html', {
@@ -77,6 +80,18 @@ module.exports = function (app) {
     });
   });
 
+  app.get('/mybadges/:id', [
+    loggedIn,
+    openbadger.middleware('getUserBadge')
+  ], function (req, res, next) {
+    var data = req.remote;
+
+    console.log(data.badge);
+    res.render('user/badge.html', {
+      badge: data.badge
+    });
+  });
+
   app.get('/favorites/:view?', function (req, res, next) {
     var badge = {
       thumbnail: '/media/images/badge.png',

openbadger.js

@@ -25,6 +25,17 @@ function normalizeBadge (badge, id) {
   return badge;
 }
 
+function normalizeBadgeInstance (badge, id) {
+  /*  This is dumb, but let's us reuse current templates to
+      build out a single-level object. */
+  _.extend(badge, badge.badgeClass);    
+
+  if (!badge.url)
+    badge.url = '/mybadges/' + id;
+
+  return badge;  
+}
+
 function normalizeProgram(program, id) {
   if (!id)
     id = program.shortname;
@@ -149,7 +160,6 @@ var openbadger = new Api(ENDPOINT, {
   getUserBadges: {
     func: function getUserBadges (query, callback) {
       var email = query.session.user.email;
-      var code = query.code;
       var params = {
         auth: getJWTToken(email),
         email: email
@@ -158,8 +168,14 @@ var openbadger = new Api(ENDPOINT, {
         if (err)
           return callback(err, data);
 
+      
+        console.log(data);
+        badges = _.map(data.badges, normalizeBadgeInstance)
+
         return callback(null, {
-          badges: _.map(data.badges, normalizeBadge)
+          badges: badges.sort(function(a, b) {
+            return b.issuedOn - a.issuedOn;
+          })
         });
       });
     },
@@ -167,6 +183,25 @@ var openbadger = new Api(ENDPOINT, {
     key: 'badges'
   },
 
+  getUserBadge: function getUserBadge (query, callback) {
+    var id = query.id;
+
+    var email = query.session.user.email;
+    var params = {
+      auth: getJWTToken(email),
+      email: email
+    };
+
+    this.get('/user/badge/' + id, { qs: params }, function(err, data) {
+      if (err)
+        return callback(err, data);
+
+      return callback(null, {
+        badge: normalizeBadgeInstance(data.badge, id)
+      });
+    });
+  },
+
   getBadgeFromCode: function getBadgeFromCode (query, callback) {
     var email = query.email;
     var code = query.code;

views/user/badge.html

@@ -3,5 +3,13 @@
 {% set pageTitle = badge.name %}
 
 {% block content %}
-  hooray
+    <div class="row">
+        <div class="span4">
+            <img src="{{ badge.image }}">
+        </div>
+        <div class="span8">
+            <h3>What is this badge about?</h3>
+            <p>{{ badge.description }}</p>
+        </div>
+    </div>
 {% endblock %}