codecombat/app/templates/teachers/teacher-student-view.jade

extends /templates/base-flat

block page_nav
  include ../courses/teacher-dashboard-nav.jade

block content

  if !view.user
    div Loading
  else
    .container
      +breadcrumbs
      if !me.isAnonymous() && me.isTeacher()
      - var isOwner = view.classroom ? view.classroom.get('ownerID') === me.id : false;
          
      if isOwner
          h3.m-t-2
            span(data-i18n="teacher.student_profile")
            span.spr :
            span= view.user.get('name')
          .classroom-info-row.container-fluid.row
            .overview.col-md-4
              h4.student-details(data-i18n="teacher.student_overview")
              if (view.user.get('email'))
                .small-details
                  span(data-i18n="teacher.student_email")
                  span.spr :
                  span= view.user.get('email')
              else
                .small-details
                  i(data-i18n="teacher.no_email")
              .small-details
                span(data-i18n="user.last_played")
                span.spr :
                span= view.lastPlayedString
                
              .small-details 
                - var status = view.user.prepaidStatus()
                span(data-i18n='view.user.status')
                span.spr
                span(data-i18n="teacher.license_status")
                span.spr : 
                strong(class= status === 'expired' ? 'text-danger' : '')= view.studentStatusString()
                
                
            .performance.col-md-8
              h4.student-details
                span Recommendation 
              div.small-details
                span Performance: 
        
        .playtime-charts
          h4(data-i18n="teacher.playtime_detail")
        
          .graphsSelector
            span(data-i18n="teacher.select_course")
            span :
            span.spr
            select#course-dropdown.text-navy
              each versionedCourse in view.classroom.get('courses') || []
                - var course = _.find(view.courses.models, function(c) {return c.id === versionedCourse._id;});
                if !course
                  - continue;
                - var instance = view.courseInstances.findWhere({ courseID: course.id, classroomID: view.classroom.id })
                - if ((instance && instance.hasMember(view.user)))
                  option(value= course.id)= course.get('name')

            div.legend
              svg(width=15, height=15, style="margin: 0 5px 0 0")
                rect(width=15, height=15, fill="rgb(32, 87, 43)")
              span(data-i18n="teacher.student_completed") 
              
              svg(width=15, height=15, style="margin: 0 5px 0 15px")
                rect(width=15, height=15, fill="rgb(242, 190, 25)")
              span(data-i18n="teacher.student_in_progress") 
              
              svg(width=15, height=15, style="margin: 0 5px 0 15px")
                rect(width=15, height=15, fill="rgb(92, 180, 208)")
              span(data-i18n="teacher.class_average") 
          
          .graphs
            each versionedCourse in view.classroom.get('courses') || []
              - var course = _.find(view.courses.models, function(c) {return c.id === versionedCourse._id;});
              if !course
                - continue;
              - var instance = view.courseInstances.findWhere({ courseID: course.id, classroomID: view.classroom.id })
              - if ((instance && instance.hasMember(view.user)))
                svg(id='visualisation-'+versionedCourse._id, width="1142", height="600", class='visualisation')

        
        //- TODO Hookup student management actions:
          // Assign courses from dropdown
          // Export CSV
          // Apply License
          // Edit password
          // Remove Student

        .student-levels 
          h4(data-i18n="teacher.course_progress")
          .student-levels-progress
            each versionedCourse in view.classroom.get('courses') || []
                - var course = _.find(view.courses.models, function(c) {return c.id === versionedCourse._id;});
                if !course
                  - continue;
                - var instance = view.courseInstances.findWhere({ courseID: course.id, classroomID: view.classroom.id })
                - if (instance && instance.hasMember(view.user))
                  if course
                    .course-row.alternating-background
                      .course-info= course.get('name')
                      - var levels = view.classroom.getLevels({courseID: course.id}).models
                      each level, index in levels
                        - var levelNumber = view.classroom.getLevelNumber(level.get('original'), index + 1)
                        - var levelProgress = view.levelProgressMap[level.get('original')]
                        +studentLevelProgressDot(levelProgress, level, levelNumber, course)

      
                      
        if status == 'enrolled'
          div
            h4
              span= view.user.get('name')
              span.spr
              span(data-i18n="teacher.not_assigned")
              span :
            each versionedCourse in view.classroom.get('courses') || []
              - var course = _.find(view.courses.models, function(c) {return c.id === versionedCourse._id;});
              if !course
                - continue;
              - var instance = view.courseInstances.findWhere({ courseID: course.id, classroomID: view.classroom.id })
              - if (!(instance && instance.hasMember(view.user)))
                  div.small-details
                    span=course.get('name')
                
        //- else
        //-   p Apply a license to this student to assign additional courses!
        //-   button.enroll-student-button.btn.btn-navy(data-i18n="teacher.apply_license", data-user-id=view.user.id, data-event-action="Teachers Class Enrollment Enroll Student")
        //-   // this button doesn't work yet
        

mixin studentLevelProgressDot(levelProgress, level, levelNumber, course)
  //- TODO: Refactor with TeacherClassesView jade
  - dotClass = levelProgress == 'complete' ? 'forest' : (levelProgress == 'started' ? 'gold' : '');
  - levelName = level.get('name')
  - var context = { levelName: levelName, levelNumber: levelNumber, moment: moment , started: levelProgress == 'started', completed: levelProgress == 'complete'}; 
  if view.levelSessionMap && view.levelSessionMap[level.get('original')]
    - context.session = view.levelSessionMap[level.get('original')];
  - link = null;
  - labelText = levelNumber;
  if level.isLadder()
    - 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 levelProgress == 'started' || levelProgress == 'complete'
      if view.levelSessionMap && view.levelSessionMap[level.get('original')]
        - link = view.urls.playDevLevel({level: level, session: view.levelSessionMap[level.get('original')], course: course});
      - 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))
    if link
      a(href=link)
        +progressDotLabel(labelText)
    else
      +progressDotLabel(labelText)
        
mixin progressDotLabel(label)
  .dot-label.text-center
    .dot-label-inner
      = label
      
mixin breadcrumbs
  .breadcrumbs
    a(data-i18n='teacher.my_classes' href='/teachers/classes')
    span.spl.spr >
    //- TODO: Use .glyphicon-menu-right when we update bootstrap
    a(href='/teachers/classes/'+view.classroom.id)
      span= view.classroom.get('name')
    span.spl.spr >
    span= view.user.get('name')