Add courses tab to teacher courses page

app/styles/courses/teacher-courses-view.sass

@@ -1,6 +1,9 @@
 #teacher-courses-view
   margin-bottom: 50px
   
+  img.media-object
+    width: 300px
+  
   #fixed-area
     position: fixed
     bottom: 0

app/templates/courses/teacher-courses-view.jade

@@ -4,89 +4,147 @@ block content
 
   span *UNDER CONSTRUCTION, please send feedback to
   a.spl(href='mailto:team@codecombat.com') team@codecombat.com
-  
   hr
   
-  p Create a class and add students to it.
-  
-  - var totalRedeemers = view.prepaids.totalRedeemers();
-  - var totalMaxRedeemers = view.prepaids.totalMaxRedeemers();
-  
-  .text-right
-    span.spr Available paid seats: #{totalRedeemers}/#{totalMaxRedeemers}
-    a.btn.btn-default.btn-xs(href="/courses/purchase") Add
-
-  for classroom in view.classrooms.models
-    h2= classroom.get('name')
+  ul.nav.nav-tabs(role='tablist')
+    li.active(role='presentation')
+      a(href="#courses-tab-pane" aria-controls="courses" role="tab" data-toggle="tab") Courses
+    li(role='presentation')
+      a(href="#manage-tab-pane" aria-controls="manage" role="tab" data-toggle="tab") Manage
     
-    - var courseInstances = view.courseInstances.where({classroomID: classroom.id})
-
-    if classroom.saving
-      .progress
-        .progress-bar(style="width: 100%")
-      
-    table.table
-      tr
-        th Student
-        for courseInstance in courseInstances
-          th
-            if courseInstance.course
-            | #{courseInstance.course.get('name')}
+  .tab-content
+    #courses-tab-pane.tab-pane.active.well
+      h3 Your Courses
+      - var courseInstances = view.courseInstances.sliceWithMembers();
+      if !_.size(courseInstances)
+        .alert.alert-info
+          span.spr You currently have no students assigned to courses.
+          a#manage-tab-link Go to the manage tab to get set up.
         
-      if !_.size(classroom.get('members'))
-        tr
-          td(colspan=1+view.courses.size())
-            em No students in this class yet.
-        
-      for member in classroom.get('members') || []
-        - var user = view.members.get(member);
-        if !user
-          - continue;
-        tr
-          td= user.get('name')
+      else
+        table.table
+          tr
+            th Class
+            th Course
+            th Size
+            th
           for courseInstance in courseInstances
-            td
-              if _.contains(courseInstance.get('members'), user.id)
-                span.glyphicon.glyphicon-ok
-              else
-                input.course-instance-membership-checkbox(
-                  type='checkbox'
-                  data-course-instance-id=courseInstance.id
-                  data-user-id=user.id
-                )
+            - console.log('course instance!', courseInstance)
+            tr
+              td
+                - var classroom = view.classrooms.get(courseInstance.get('classroomID'));
+                if classroom
+                  | #{classroom.get('name')}
+              td
+                if courseInstance.course
+                  | #{courseInstance.course.get('name')}
+              td= _.size(courseInstance.get('members'))
+              td
+                a.btn.btn-primary.btn-sm(href='/courses/#{courseInstance.get("courseID")}/#{courseInstance.id}') Enter
+            
+      h3 Available Courses
       
-    button.add-students-btn.btn.btn-sm(data-classroom-id=classroom.id) Add Students
+      for course in view.courses.models
+        .media
+          .pull-left
+            img.media-object(src=course.get('screenshot'))
+          .media-body
+            h3.media-heading
+              span.spr= course.get('name')
+              if course.get('free')
+                em (free!)
+            p= course.get('description')
+            p
+              strong.spr Concepts:
+              span= (course.get('concepts') || []).join(', ')
+            p
+              strong.spr Length:
+              span #{course.get('duration') || 0} hours
+          
+        
+      
+    #manage-tab-pane.tab-pane.well
 
-    hr
-  
-  .row
-    .col-sm-3.col-sm-offset-3
-      button#create-new-class-btn.btn.btn-default.btn-block Create New Class
-    .col-sm-3
-      input#new-classroom-name-input.form-control(placeholder='new class name')
+      p Create a class and add students to it.
       
-  #fixed-area
-    .container
-      .row.well
-        if view.state === 'saving-changes'
-          p Saving changes
-          - var total = view.membershipAdditions.originalSize + view.usersToRedeem.originalSize;
-          - var left = view.membershipAdditions.size() + view.usersToRedeem.size();
-          - var pct = Math.max(10, (100 * (total - left) / total)).toFixed(1) + '%';
-          .progress.progress-striped.active
-            .progress-bar(style="width: #{pct}")
-        else
-          - var seatsLeft = totalMaxRedeemers - totalRedeemers - view.usersToRedeem.size();
-          if seatsLeft < 0
-            .alert.alert-danger
-              span.spr You do not have enough seats to accommodate all students you have selected.
-              a(href="/courses/purchase") Buy more seats.
-          else
-            .col-sm-2
-              button#save-changes-btn.btn.btn-primary.btn-block(disabled=!view.numCourseInstancesToAddTo) Save Changes
-            .col-sm-5
-              | Students to add to courses: #{view.numCourseInstancesToAddTo || 0}
-            .col-sm-5
-              | Seats to expend: #{view.usersToRedeem.size()} (will have #{seatsLeft} seats left)
+      - var totalRedeemers = view.prepaids.totalRedeemers();
+      - var totalMaxRedeemers = view.prepaids.totalMaxRedeemers();
+      
+      .text-right
+        span.spr Available paid seats: #{totalRedeemers}/#{totalMaxRedeemers}
+        a.btn.btn-default.btn-xs(href="/courses/purchase") Add
+    
+      for classroom in view.classrooms.models
+        h2= classroom.get('name')
+        
+        - var courseInstances = view.courseInstances.where({classroomID: classroom.id})
+    
+        if classroom.saving
+          .progress
+            .progress-bar(style="width: 100%")
+          
+        table.table
+          tr
+            th Student
+            for courseInstance in courseInstances
+              th
+                if courseInstance.course
+                | #{courseInstance.course.get('name')}
+            
+          if !_.size(classroom.get('members'))
+            tr
+              td(colspan=1+view.courses.size())
+                em No students in this class yet.
+            
+          for member in classroom.get('members') || []
+            - var user = view.members.get(member);
+            if !user
+              - continue;
+            tr
+              td= user.get('name')
+              for courseInstance in courseInstances
+                td
+                  if _.contains(courseInstance.get('members'), user.id)
+                    span.glyphicon.glyphicon-ok
+                  else
+                    input.course-instance-membership-checkbox(
+                      type='checkbox'
+                      data-course-instance-id=courseInstance.id
+                      data-user-id=user.id
+                    )
+          
+        button.add-students-btn.btn.btn-sm(data-classroom-id=classroom.id) Add Students
+    
+        hr
+      
+      .row
+        .col-sm-3.col-sm-offset-3
+          button#create-new-class-btn.btn.btn-default.btn-block Create New Class
+        .col-sm-3
+          input#new-classroom-name-input.form-control(placeholder='new class name')
+          
+      #fixed-area
+        .container
+          .row.well
+            if view.state === 'saving-changes'
+              p Saving changes
+              - var total = view.membershipAdditions.originalSize + view.usersToRedeem.originalSize;
+              - var left = view.membershipAdditions.size() + view.usersToRedeem.size();
+              - var pct = Math.max(10, (100 * (total - left) / total)).toFixed(1) + '%';
+              .progress.progress-striped.active
+                .progress-bar(style="width: #{pct}")
+            else
+              - var seatsLeft = totalMaxRedeemers - totalRedeemers - view.usersToRedeem.size();
+              if seatsLeft < 0
+                .alert.alert-danger
+                  span.spr You do not have enough seats to accommodate all students you have selected.
+                  a(href="/courses/purchase") Buy more seats.
+              else
+                .col-sm-2
+                  button#save-changes-btn.btn.btn-primary.btn-block(disabled=!view.numCourseInstancesToAddTo) Save Changes
+                .col-sm-5
+                  | Students to add to courses: #{view.numCourseInstancesToAddTo || 0}
+                .col-sm-5
+                  | Seats to expend: #{view.usersToRedeem.size()} (will have #{seatsLeft} seats left)
     
 block footer

app/views/courses/TeacherCoursesView.coffee

@@ -21,6 +21,7 @@ module.exports = class TeacherCoursesView extends RootView
     'click .add-students-btn': 'onClickAddStudentsButton'
     'click .course-instance-membership-checkbox': 'onClickCourseInstanceMembershipCheckbox'
     'click #save-changes-btn': 'onClickSaveChangesButton'
+    'click #manage-tab-link': 'onClickManageTabLink'
 
   constructor: (options) ->
     super(options)
@@ -32,12 +33,13 @@ module.exports = class TeacherCoursesView extends RootView
     @supermodel.loadCollection(@classrooms, 'classrooms', {data: {ownerID: me.id}})
     @courseInstances = new CocoCollection([], { url: "/db/course_instance", model: CourseInstance })
     @courseInstances.comparator = 'courseID'
+    @courseInstances.sliceWithMembers = -> return @filter (courseInstance) -> _.size(courseInstance.get('members'))
     @supermodel.loadCollection(@courseInstances, 'course_instances', {data: {ownerID: me.id}})
     @members = new CocoCollection([], { model: User })
     @prepaids = new CocoCollection([], { url: "/db/prepaid", model: Prepaid })
     sum = (numbers) -> _.reduce(numbers, (a, b) -> a + b)
-    @prepaids.totalMaxRedeemers = -> sum((prepaid.get('maxRedeemers') for prepaid in @models)) 
-    @prepaids.totalRedeemers = -> sum((_.size(prepaid.get('redeemers')) for prepaid in @models))
+    @prepaids.totalMaxRedeemers = -> sum((prepaid.get('maxRedeemers') for prepaid in @models)) or 0
+    @prepaids.totalRedeemers = -> sum((_.size(prepaid.get('redeemers')) for prepaid in @models)) or 0
     @prepaids.comparator = '_id'
     @supermodel.loadCollection(@prepaids, 'prepaids', {data: {creator: me.id}})
     @listenTo @members, 'sync', @render
@@ -186,4 +188,7 @@ module.exports = class TeacherCoursesView extends RootView
           @state = 'error'
           @stateMessage = "#{jqxhr.status}: #{jqxhr.responseText}"
         @renderSelectors '#fixed-area'
-    })
+    })
+
+  onClickManageTabLink: ->
+    @$('.nav-tabs a[href="#manage-tab-pane"]').tab('show')