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;
        // - var validStudent = ...  
        // load all students in this class
        // check if this student is in the class
          
      if isOwner
        // also check if validStudent 
        h3(class="m-t-2")
          span(data-i18n="teacher.student_profile")
          span.spr :
          span= view.user.get('name')
        // this user object doesn't have an email property
        h4(class="student-details" data-i18n="teacher.student_overview")
        if (view.user.get('email'))
          div(class="small-details")
            span(data-i18n="teacher.student_email")
            span.spr :
            span= view.user.get('email')
        else
          div(class="small-details") 
            i(data-i18n="teacher.no_email")
        div(class="small-details")
          span(data-i18n="user.last_played")
          span.spr :
          span= view.lastPlayedString
          
        div(class="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()
        //- 
        //- svg#visualisation(width="1000", height="520")
        //- 
        
        div.playtime-charts
          // i18n needed
          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")

        
        //- - console.log (view.levelData[1].levelIndex)
        
        //- h4 Actions:
          // Assign courses from dropdown
          // Export CSV
          // Apply License
          // Edit password
          // Remove Student
          
          
        //- .student-chart
        //-   div.student-levels-progress
        //-     //- if view.allLevelSessionMap
        //-       //- - console.log (view.allLevelSessionMap)
        //-     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
        //-             div.course-row.alternating-background
        //-               strong
        //-                 div.course-info= course.get('name')
        //-               - var coursePlaytime = 0
        //-               - var levels = view.classroom.getLevels({courseID: course.id}).models
        //-               each level, index in levels
        //-                 - var levelNumber = view.classroom.getLevelNumber(level.get('original'), index + 1)
        //-                 //- - console.log (level)
        //-                 - var levelProgress = view.levelProgressMap[level.get('original')]
        //-                 if view.levelSessionMap && view.levelSessionMap[level.get('original')]
        //-                   - var session = view.levelSessionMap[level.get('original')];
        //-                   - coursePlaytime += session.get('playtime')
        //-                   //- - var levelAverage = view.allLevelSessionMap[level.get('original')]
        //-                   p= levelNumber + ". " + level.get('name') + ": " + session.get('playtime') + " (average: " + ")"
        //-               p= coursePlaytime 

        div.student-levels 
          h4(data-i18n="teacher.course_progress")
          div.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
                    div.course-row.alternating-background
                      div.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)
                        //- - console.log (level)
                        - var levelProgress = view.levelProgressMap[level.get('original')]
                        //- p= levelNumber + ". " + level.name + " Progress: " + view.levelProgressMap[level.original]
                        //- - console.log(level)
                        +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(class="small-details")
                    span=course.get('name')
                  // add a button to assign this course 
                
        //- 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')];
    //- - console.log(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')