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,9 +4,67 @@ block content
 
   span *UNDER CONSTRUCTION, please send feedback to
   a.spl(href='mailto:team@codecombat.com') team@codecombat.com
-  
   hr
   
+  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
+    
+  .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.
+        
+      else
+        table.table
+          tr
+            th Class
+            th Course
+            th Size
+            th
+          for courseInstance in courseInstances
+            - 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
+      
+      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
+
       p Create a class and add students to it.
       
       - var totalRedeemers = view.prepaids.totalRedeemers();

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
@@ -187,3 +189,6 @@ module.exports = class TeacherCoursesView extends RootView
           @stateMessage = "#{jqxhr.status}: #{jqxhr.responseText}"
         @renderSelectors '#fixed-area'
     })
+
+  onClickManageTabLink: ->
+    @$('.nav-tabs a[href="#manage-tab-pane"]').tab('show')