Add project/arena pills to course progress tab to TeacherClassView

Also remove templating for deprecated progress tab

app/core/urls.coffee

@@ -3,3 +3,7 @@ module.exports =
     shareURL = "#{window.location.origin}/play/#{level.get('type')}-level/#{level.get('slug')}/#{session.id}"
     shareURL += "?course=#{course.id}" if course
     return shareURL
+
+  courseArenaLadder: ({level, courseInstance}) ->
+    "/play/ladder/#{level.get('slug')}/course/#{courseInstance.id}"
+

app/locale/en.coffee

@@ -1504,6 +1504,9 @@
     status_enrolled: "Expires on {{date}}"
     select_all: "Select All"
     projects: "Projects"
+    project: "Project"
+    view_student_project: "View Student Project"
+    view_arena_ladder: "View Arena Ladder"
 
   sharing:
     game: "Game"

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

@@ -257,19 +257,26 @@
   .progress-dot
     display: inline-block
     margin-right: 6px
-    width: 34px
+    min-width: 34px
     height: 34px
-    border-radius: 50%
+    border-radius: 16px
+    padding: 0 10px
     // margin-top: 23px
     // margin-bottom: 23px
     background: $gray-light
     position: relative
+    a
+      text-decoration: none
+    
     .dot-label
       padding-top: 2px
       .dot-label-inner
         font-size: 11px
         font-weight: bold
         color: white
+      
+  .progress-dot-lg .dot-label .dot-label-inner
+    font-size: 13px
     
   .progress-dot.forest
     background: $forest
@@ -286,6 +293,14 @@
       border-color: $navy
     .tooltip-arrow
       border-top-color: $navy
+      
+  .progress-dot.navy
+    background: $navy
+    .tooltip-inner
+      color: $navy
+      border-color: $navy
+    .tooltip-arrow
+      border-top-color: $navy
 
   // Code copying buttons
 

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

@@ -122,13 +122,6 @@ block content
           li(class=(activeTab === "#enrollment-status-tab" ? 'active' : ''))
             a.course-progress-tab-btn(href='#enrollment-status-tab')
               .small-details.text-center(data-i18n='teacher.enrollment_status')
-          // TODO: Move projects into course progress tab
-          //- var courses = view.classroom.get('courses').map(function(c) { return view.courses.get(c._id); });
-          //if _.find(courses, function(c) { return /dev/.test(c.get('slug')); })
-          //  .tab-spacer
-          //  li(class=(activeTab === "#student-projects-tab" ? 'active' : ''))
-          //    a.course-progress-tab-btn(href='#student-projects-tab')
-          //      .small-details.text-center(data-i18n='teacher.projects')
           .tab-filler
 
         .tab-content
@@ -138,8 +131,6 @@ block content
             +courseProgressTab
           else if activeTab === '#enrollment-status-tab'
             +enrollmentStatusTab
-          else
-            +studentProjectsTab
 
       else
         .text-center.m-t-5.m-b-5
@@ -334,6 +325,7 @@ mixin studentLevelsRow(student)
         - var progress = state.get('progressData').get({ classroom: view.classroom, course: course, level: level, user: student })
         - var levelNumber = view.classroom.getLevelNumber(level.get('original'), index + 1)
         +studentLevelProgressDot(progress, level, levelNumber)
+      
   
 mixin studentCourseProgressDot(progress, levelsTotal, level, label)
   //- TODO: Refactor with TeacherClassesView jade
@@ -347,16 +339,59 @@ mixin allStudentsLevelProgressDot(progress, level, levelNumber)
   - dotClass = progress.completed ? 'forest' : (progress.started ? 'gold' : '');
   - levelName = i18n(level.attributes, 'name')
   - context = _.merge(progress, { levelName: levelName, levelNumber: levelNumber, numStudents: view.students.length })
+  - link = null;
+  - labelText = levelNumber;
+  if level.isLadder()
+    - var course = view.state.get('selectedCourse');
+    - var courseInstance = course && view.classroom ? view.courseInstances.findWhere({ courseID: course.id, classroomID: view.classroom.id }) : null;
+    if courseInstance
+      - link = view.urls.courseArenaLadder({level: level, courseInstance: courseInstance});
+      - labelText = translate('teacher.view_arena_ladder');
+    else
+      - labelText = translate('courses.arena');
+    - dotClass = 'navy progress-dot-lg';
+  else if level.isProject()
+    - labelText = translate('teacher.project')
+    - dotClass += ' progress-dot-lg';
+
   .progress-dot.level-progress-dot(class=dotClass, data-html='true', data-title=view.allStudentsLevelProgressDotTemplate(context))
-    +progressDotLabel(levelNumber)
+    if link
+      a(href=link)
+        +progressDotLabel(labelText)
+    else
+      +progressDotLabel(labelText)
+      
     
 mixin studentLevelProgressDot(progress, level, levelNumber)
   //- TODO: Refactor with TeacherClassesView jade
   - dotClass = progress.completed ? 'forest' : (progress.started ? 'gold' : '');
   - levelName = i18n(level.attributes, 'name')
   - context = _.merge(progress, { levelName: levelName, levelNumber: levelNumber, moment: moment })
+  - link = null;
+  - labelText = levelNumber;
+  if level.isLadder()
+    - var course = view.state.get('selectedCourse');
+    - var courseInstance = view.courseInstances.findWhere({ courseID: course.id, classroomID: view.classroom.id });
+    if courseInstance
+      - link = view.urls.courseArenaLadder({level: level, courseInstance: courseInstance});
+      - labelText = translate('courses.arena');
+    else
+      - labelText = translate('courses.arena');
+    - dotClass += ' progress-dot-lg';
+  else if level.isProject()
+    if progress.started
+      - link = view.urls.playDevLevel({level: level, session: progress.session, course: view.state.get('selectedCourse')});
+      - labelText = translate('teacher.view_student_project');
+      - dotClass = 'navy';
+    else
+      - labelText = translate('teacher.project');
+    - dotClass += ' progress-dot-lg';
   .progress-dot.level-progress-dot(class=dotClass, data-html='true', data-title=view.singleStudentLevelProgressDotTemplate(context))
-    +progressDotLabel(levelNumber)
+    if link
+      a(href=link)
+        +progressDotLabel(labelText)
+    else
+      +progressDotLabel(labelText)
 
 mixin progressDotLabel(label)
   .dot-label.text-center
@@ -439,37 +474,3 @@ mixin enrollmentStatusTab
           td.enroll-col
             if status !== 'enrolled'
               button.enroll-student-button.btn.btn-navy(data-i18n="teacher.enroll_student", data-user-id=student.id, data-event-action="Teachers Class Enrollment Enroll Student")
-
-mixin studentProjectsTab
-  #student-projects-tab.m-t-3
-    if state.get('progressData')
-      .render-on-course-sync
-        .student-levels-table
-          +sortButtons
-          each student in state.get('students').models
-            +studentProjectsRow(student)
-
-mixin studentProjectsRow(student)
-  .row.student-levels-row.alternating-background
-    div.student-info.col-sm-3
-      div.student-name= student.broadName()
-      div.student-email.small-details= student.get('email')
-    div.student-levels-progress.col-sm-9
-      each trimCourse in view.classroom.get('courses')
-        - var course = view.courses.get(trimCourse._id);
-        - var levels = view.classroom.getLevels({courseID: course.id, projectLevels: true}).models
-        each level in levels
-          - var progress = state.get('progressData').get({ classroom: view.classroom, course: course, level: level, user: student })
-          - var levelNumber = view.classroom.getLevelNumber(level.get('original'), index + 1)
-          +studentProjectLink(progress, level, levelNumber, course)
-
-mixin studentProjectLink(progress, level, levelNumber, course)
-  - var colorClass = progress.completed ? 'btn-primary' : (progress.started ? 'btn-warning' : 'btn-primary');
-  - var levelName = i18n(level.attributes, 'name')
-  - var context = _.merge(progress, { levelName: levelName, levelNumber: levelNumber, moment: moment })
-  - var title = view.singleStudentLevelProgressDotTemplate(context);
-  if context.session
-    - var url = '/play/' + level.get('type') + '-level/' + level.get('slug') + '/' + context.session.id + '?course=' + course.id;
-    a(class="btn btn-lg btn-view-project-level " + colorClass, href=url, data-title=title)= levelName
-  else
-    btn(class="btn btn-lg btn-view-project-level " + colorClass, data-title=title, disabled=true)= levelName

app/views/courses/TeacherClassView.coffee

@@ -73,6 +73,7 @@ module.exports = class TeacherClassView extends RootView
     @singleStudentCourseProgressDotTemplate = require 'templates/teachers/hovers/progress-dot-single-student-course'
     @singleStudentLevelProgressDotTemplate = require 'templates/teachers/hovers/progress-dot-single-student-level'
     @allStudentsLevelProgressDotTemplate = require 'templates/teachers/hovers/progress-dot-all-students-single-level'
+    @urls = require('core/urls')
 
     @debouncedRender = _.debounce @render