Update course details progress level cell popups

app/templates/courses/course-details.jade

@@ -186,11 +186,11 @@ mixin progress-members-levels-expanded(memberID)
     - var i = 0
     each level, levelID in campaign.get('levels')
       if userLevelStateMap[memberID][levelID] === 'complete'
-        span.progress-level-cell.progress-level-cell-complete #{i + 1}
+        span.progress-level-cell.progress-level-cell-complete(data-level-id=levelID, data-level-slug=level.slug, data-user-id=memberID) #{i + 1}
           span.spl= level.name.replace('Course: ', '')
           +progress-members-popup-completed(i, level)
       else if userLevelStateMap[memberID][levelID] === 'started'
-        span.progress-level-cell.progress-level-cell-started #{i + 1} #{level.name.replace('Course: ', '')}
+        span.progress-level-cell.progress-level-cell-started(data-level-id=levelID, data-level-slug=level.slug, data-user-id=memberID) #{i + 1} #{level.name.replace('Course: ', '')}
           +progress-members-popup-started(i, level)
       else
         span.progress-level-cell #{i + 1} #{level.name.replace('Course: ', '')}
@@ -205,10 +205,10 @@ mixin progress-members-levels-condensed(memberID)
     - var i = 0
     each level, levelID in campaign.get('levels')
       if userLevelStateMap[memberID][levelID] === 'complete'
-        span.progress-level-cell.progress-level-cell-complete(style="width:#{levelCellWidth}%;") #{i + 1}
+        span.progress-level-cell.progress-level-cell-complete(style="width:#{levelCellWidth}%;", data-level-id=levelID, data-level-slug=level.slug, data-user-id=memberID) #{i + 1}
           +progress-members-popup-completed(i, level)
       else if userLevelStateMap[memberID][levelID] === 'started'
-        span.progress-level-cell.progress-level-cell-started(style="width:#{levelCellWidth}%;") #{i + 1}
+        span.progress-level-cell.progress-level-cell-started(style="width:#{levelCellWidth}%;", data-level-id=levelID, data-level-slug=level.slug, data-user-id=memberID) #{i + 1}
           +progress-members-popup-started(i, level)
       else
         break
@@ -217,15 +217,18 @@ mixin progress-members-levels-condensed(memberID)
 mixin progress-members-popup-completed(i, level)
   .progress-popup-container
     h3 #{i + 1}. #{level.name.replace('Course: ', '')}
-    p TODO: Time to solve
-    p TODO: Completed on
-    strong Click to view solution.
+    p Play time: #{moment.duration(level.playtime, "seconds").humanize()}
+    p Completed: #{moment(level.changed).format('MMMM Do YYYY, h:mm:ss a')}
+    if adminMode
+      strong Click to view solution.
 
 mixin progress-members-popup-started(i, level)
   .progress-popup-container
     h3 #{i + 1}. #{level.name.replace('Course: ', '')}
-    p TODO: last played on
-    strong Click to view solution.
+    p Play time: #{moment.duration(level.playtime, "seconds").humanize()}
+    p Last played: #{moment(level.changed).format('MMMM Do YYYY, h:mm:ss a')}
+    if adminMode
+      strong Click to view solution.
 
 mixin invite-tab
   p Invite students to join this class.

app/views/courses/CourseDetailsView.coffee

@@ -19,6 +19,7 @@ module.exports = class CourseDetailsView extends RootView
     'click .btn-select-instance': 'onClickSelectInstance'
     'click .progress-member-header': 'onClickMemberHeader'
     'click .progress-header': 'onClickProgressHeader'
+    'click .progress-level-cell': 'onClickProgressLevelCell'
     'mouseenter .progress-level-cell': 'onMouseEnterPoint'
     'mouseleave .progress-level-cell': 'onMouseLeavePoint'
 
@@ -123,6 +124,7 @@ module.exports = class CourseDetailsView extends RootView
     @instanceStats = averageLevelsCompleted: 0, furthestLevelCompleted: '', totalLevelsCompleted: 0, totalPlayTime: 0
     @memberStats = {}
     @userConceptStateMap = {}
+    @userLevelSessionMap = {}
     @userLevelStateMap = {}
     levelStateMap = {}
     for levelSession in @levelSessions.models
@@ -142,6 +144,9 @@ module.exports = class CourseDetailsView extends RootView
       for concept of @levelConceptMap[levelID]
         @userConceptStateMap[userID][concept] = state
 
+      @userLevelSessionMap[userID] ?= {}
+      @userLevelSessionMap[userID][levelID] = levelSession
+
       @userLevelStateMap[userID] ?= {}
       @userLevelStateMap[userID][levelID] = state
 
@@ -204,9 +209,24 @@ module.exports = class CourseDetailsView extends RootView
     @noCourseInstanceSelected = false
     @loadCourseInstance(courseInstanceID)
 
+  onClickProgressLevelCell: (e) ->
+    return unless @adminMode
+    levelID = $(e.currentTarget).data('level-id')
+    levelSlug = $(e.currentTarget).data('level-slug')
+    userID = $(e.currentTarget).data('user-id')
+    return unless levelID and levelSlug and userID
+    route = "/play/level/#{levelSlug}"
+    if @userLevelSessionMap[userID]?[levelID]
+      route += "?session=#{@userLevelSessionMap[userID][levelID].id}&observing=true"
+    Backbone.Mediator.publish 'router:navigate', {
+      route: route
+      viewClass: 'views/play/level/PlayLevelView'
+      viewArgs: [{}, levelSlug]
+    }
+
   onMouseEnterPoint: (e) ->
-    $('.level-popup-container').hide()
-    container = $(e.target).find('.level-popup-container').show()
+    $('.progress-popup-container').hide()
+    container = $(e.target).find('.progress-popup-container').show()
     margin = 20
     offset = $(e.target).offset()
     scrollTop = $('#page-container').scrollTop()
@@ -215,7 +235,7 @@ module.exports = class CourseDetailsView extends RootView
     container.css('top', offset.top + scrollTop - height - margin)
 
   onMouseLeavePoint: (e) ->
-    $(e.target).find('.level-popup-container').hide()
+    $(e.target).find('.progress-popup-container').hide()
 
   sortMembers: ->
     # Progress sort precedence: most completed concepts, most started concepts, most levels, name sort