Add course mock UI for student level progress

app/styles/courses/mock1/course-details.sass

@@ -10,3 +10,60 @@
   .select-session
     width: 300px
     display: inline
+
+  .progress-header
+    margin-right: 14px
+
+  .progress-key
+    cursor: default
+    display: inline-block
+    white-space: nowrap
+    font-size: 9pt
+    font-weight: normal
+    border: 1px solid gray
+    border-radius: 5px
+    margin: 0px
+    padding: 2px
+
+  .progress-key-started
+    background-color: lightgreen
+
+  .progress-key-complete
+    background-color: lightgray
+
+  .expand-progress-checkbox
+    margin-left: 14px
+
+  .expand-progress-label
+    font-weight: normal
+    font-size: 14px
+
+  .progress-cell
+    padding: 2px
+    padding-bottom: 10px
+
+    .level-popup-container
+      display: none
+      position: absolute
+      padding: 10px
+      border: 1px solid black
+      z-index: 3
+      background-color: blanchedalmond
+      font-size: 10pt
+
+  .progress-level-cell
+    display: inline-block
+    white-space: nowrap
+    font-size: 9pt
+    border: 1px solid gray
+    border-radius: 5px
+    margin: 0px
+    padding: 2px
+
+  .progress-level-cell-started
+    cursor: pointer
+    background-color: lightgreen
+
+  .progress-level-cell-complete
+    cursor: pointer
+    background-color: lightgray

app/templates/courses/mock1/course-details.jade

@@ -11,9 +11,11 @@ block content
     input.student-view-checkbox(type='checkbox')
     span.spl Student view
   div TODO: fix ugly tabs
-  div TODO: add student progress monitoring
   div TODO: level concepts, status, working play button
   div TODO: student view
+  div TODO: aggregate student progress
+  div TODO: student level progress popups
+  div TODO: student concept progress
   div(style='border-bottom: 1px solid black;')
 
   h1= course.title
@@ -64,24 +66,48 @@ block content
         table.table.table-condensed
           thead
             tr
-              th Name
+              th
-              th Progress
+              th
+                span.progress-header Progress
+                span.progress-key.progress-key-complete complete
+                span.progress-key.progress-key-started started
+                span.progress-key not started
+                if maxLastStartedIndex > 30
+                  input.expand-progress-checkbox(type='checkbox')
+                  span.spl.expand-progress-label(data-i18n="clans.exp_levels") Expand levels
           tbody
             each student in instance.students
               tr
-              td
+                td
-                a= student
+                  a= student
-              td TODO: level progress
+                td.progress-cell
+                  - var i = 0
+                  each level in course.levels
+                    if i <= userLevelStateMap[student].lastCompletedIndex
+                      span.progress-level-cell.progress-level-cell-complete #{i + 1}
+                        if showExpandedProgress || i === 0 || i === userLevelStateMap[student].lastStartedIndex
+                          span.spl #{level}
+                    else if i <= userLevelStateMap[student].lastStartedIndex
+                      span.progress-level-cell.progress-level-cell-started #{i + 1}
+                        if showExpandedProgress || i === 1 || i === userLevelStateMap[student].lastStartedIndex
+                          span.spl #{level}
+                    else
+                      span.progress-level-cell.level-progression-level-not-started #{i + 1}
+                        if showExpandedProgress || i === 1 || i === userLevelStateMap[student].lastStartedIndex
+                          span.spl #{level}
+                    if i === maxLastStartedIndex
+                      - break
+                    - i++
 
     .tab-pane#invite(role='tabpanel')
       p Invite students to join this class.
       if course.title !== 'Introduction to Computer Science'
         p Student unlock code: #{instance.code}
         p Class capacity: 34/50
-
       textarea.textarea-emails(rows=3, placeholder="Enter student emails to invite, one per line")
       div
         button.btn.btn-success.btn-invite Send Invites
+    
     .tab-pane#levels(role='tabpanel')
       table.table.table-condensed
         thead

app/views/courses/mock1/CourseDetailsView.coffee

@@ -7,9 +7,10 @@ module.exports = class CourseDetailsView extends RootView
   template: template
 
   events:
+    'change .expand-progress-checkbox': 'onExpandedProgressCheckbox'
+    'change .select-session': 'onChangeSession'
     'click .edit-class-name-btn': 'onClickEditClassName'
     'click .edit-description-btn': 'onClickEditClassDescription'
-    'change .select-session': 'onChangeSession'
 
   constructor: (options, @courseID) ->
     super options
@@ -20,21 +21,41 @@ module.exports = class CourseDetailsView extends RootView
     context.course = @course ? {}
     context.instance = @instances?[@currentInstanceIndex] ? {}
     context.instances = @instances ? []
+    context.lastUserLevelMap = @lastUserLevelMap ? {}
+    context.levelProgression = @levelProgression ? []
+    context.maxLastStartedIndex = @maxLastStartedIndex ? 0
+    context.userLevelStateMap = @userLevelStateMap ? {}
+    context.showExpandedProgress = @maxLastStartedIndex <= 30 or @showExpandedProgress
     context
 
   initData: ->
     mockData = require 'views/courses/mock1/CoursesMockData'
     @course = mockData.courses[@courseID]
-    # @instance = mockData.instances[_.random(0, mockData.instances.length - 1)]
     @currentInstanceIndex = 0
     @instances = mockData.instances
 
+    @userLevelStateMap = {}
+    @maxLastStartedIndex = -1
+    for student in @instances?[@currentInstanceIndex].students
+      lastCompletedIndex = _.random(0, @course.levels.length)
+      lastStartedIndex = lastCompletedIndex + 1
+      @userLevelStateMap[student] =
+        lastCompletedIndex: lastCompletedIndex
+        lastStartedIndex: lastStartedIndex
+      @maxLastStartedIndex = lastStartedIndex if lastStartedIndex > @maxLastStartedIndex
+
   onChangeSession: (e) ->
     newSessionValue = $(e.target).val()
     for val, index in @instances when val.name is newSessionValue
       @currentInstanceIndex = index
     @render?()
 
+  onExpandedProgressCheckbox: (e) ->
+    @showExpandedProgress = $('.expand-progress-checkbox').prop('checked')
+    # TODO: why does render reset the checkbox to be unchecked?
+    @render?()
+    $('.expand-progress-checkbox').attr('checked', @showExpandedProgress)
+
   onClickEditClassName: (e) ->
     alert 'TODO: Popup for editing name for this course session'