codecombat/app/templates/courses/mock1/course-details.jade

extends /templates/base

block content

  //- DO NOT localize / i18n

  div TODO: fix ugly tabs
  div TODO: not enrolled yet
  div
    span *UNDER CONSTRUCTION, send feedback to
    a.spl(href='mailto:team@codecombat.com') team@codecombat.com
  div
    input.student-mode-checkbox(type='checkbox', checked=studentMode)
    span.spl Student view
  div(style='border-bottom: 1px solid black;')

  .modal#editNameModal
    .modal-dialog
      .modal-header
        button.close(data-dismiss='modal')
          span ×
        h3.modal-title Edit Class Name
      .modal-body
        p This title will be displayed to everyone enrolled in this class.
        input.edit-name-input(type='text', value="#{instance.name}")
      .modal-footer
        button.btn.edit-name-save-btn(data-i18n="common.save_changes")

  .modal#editDescriptionModal
    .modal-dialog
      .modal-header
        button.close(data-dismiss='modal')
          span ×
        h3.modal-title Edit Class Description
      .modal-body
        p This description will be displayed to everyone enrolled in this class.
        textarea.edit-description-input(rows=2)= instance.description
      .modal-footer
        button.btn.edit-description-save-btn(data-i18n="common.save_changes")

  h1= course.title
  p= course.description

  h3= instance.name
    if !studentMode
      span.spl
        button.btn.btn-xs.edit-class-name-btn(data-toggle='modal', data-target='#editNameModal') edit class name

  p
    if instance.description
      each line in instance.description.split('\n')
        div= line
    if !studentMode
      span.spl
        button.btn.btn-xs.edit-description-btn(data-toggle='modal', data-target='#editDescriptionModal') edit class description
    else if !studentMode
      div
        button.btn.btn-xs.edit-description-btn add class description

  if !studentMode
    .form-group
      span.spr Select language
      select.form-control.select-language
        option(value="Python") Python
        option(value="JavaScript") JavaScript
        option(value="All Languages") All Languages

  div(role='tabpanel')
    ul.nav.nav-tabs(role='tablist')
      if !studentMode
        li.active(role='presentation')
          a(href='#progress', aria-controls='progress', role='tab', data-toggle='tab') Class
        li(role='presentation')
          a(href='#invite', aria-controls='invite', role='tab', data-toggle='tab') Add Students
      li(role='presentation')
        a(href='#levels', aria-controls='levels', role='tab', data-toggle='tab') Levels

  .tab-content
    if !studentMode
      .tab-pane.active#progress(role='tabpanel')
        if instance.students
          h3 Summary
          - var averagePlaytime = Math.round(Math.random() * 30) + 30
          p
            strong(style='font-size:12pt;') Average Play Time
          p #{averagePlaytime} minutes
          p
            strong(style='font-size:12pt;') Concepts Covered
          table.table.table-condensed
            each concept in courseConcepts
              - var conceptCompletion = Math.round(parseFloat(conceptsCompleted[concept]) / instance.students.length * 100)
              if isNaN(conceptCompletion)
                - conceptCompletion = 0
              tr
                td.concept-completion-container
                    span.concept-completed-foreground(data-i18n="concepts." + concept)
                    span.spl - #{conceptCompletion}%
                    span.concept-completion-background(style="width:#{conceptCompletion}%;")
          h3 Students
          table.table.table-condensed
            thead
              tr
                th
                  span.member-header.spr Name
                  if memberSort === 'nameAsc'
                    span.member-header.glyphicon.glyphicon-chevron-up
                  else if memberSort === 'nameDesc'
                    span.member-header.glyphicon.glyphicon-chevron-down
                th
                  span.progress-header.spr Progress
                  if memberSort === 'progressAsc'
                    span.progress-header.glyphicon.glyphicon-chevron-up
                  else if memberSort === 'progressDesc'
                    span.progress-header.glyphicon.glyphicon-chevron-down
                  else
                    span(style='padding-left:16px;')
                  span.progress-key.progress-key-complete complete
                  span.progress-key.progress-key-started started
                  span.progress-key not started
                  if maxLastStartedIndex > 30
                    input.expand-progress-checkbox(type='checkbox')
                    span.spl.expand-progress-label(data-i18n="clans.exp_levels") Expand levels
            tbody
              each student in instance.students
                tr
                  td
                    a= student
                  td.progress-cell
                    .level-progression-concepts Concepts
                    each concept in courseConcepts
                      if userConceptsMap[student] && userConceptsMap[student][concept] === 'complete'
                        span.spr.progress-concept-cell.progress-concept-cell-complete(data-i18n="concepts." + concept)
                      else if userConceptsMap[student] && userConceptsMap[student][concept] === 'started'
                        span.spr.progress-concept-cell.progress-concept-cell-started(data-i18n="concepts." + concept)
                      else
                        span.spr.progress-concept-cell.progress-concept-cell-not-started(data-i18n="concepts." + concept)

                    .level-progression-levels Levels
                    - var i = 0
                    each level in course.levels
                      if userLevelStateMap[student][level] === 'complete'
                        span.progress-level-cell.progress-level-cell-complete #{i + 1}
                          if showExpandedProgress || i === 0 || i === course.levels.length - 1
                            span.spl #{level}
                          .level-popup-container
                            h3 #{i + 1}. #{level}
                            p
                              div
                                - var playTime = Math.round(Math.random() * 600)
                                span Time to solve
                                span : #{playTime} seconds
                              div
                                - var completionDate = new Date()
                                - completionDate.setUTCDate(completionDate.getUTCDate() - Math.round(Math.random() * 60))
                                span Completed on
                                span : #{moment(completionDate).format('MMMM Do YYYY, h:mm:ss a')}
                            strong(data-i18n="clans.view_solution") Click to view solution.
                      else if userLevelStateMap[student][level] === 'started'
                        span.progress-level-cell.progress-level-cell-started #{i + 1} #{level}
                      else
                        span.progress-level-cell.level-progression-level-not-started #{i + 1}
                          if showExpandedProgress || i === 0
                            span.spl #{level}
                      - i++

      .tab-pane#invite(role='tabpanel')
        p Invite students to join this class.
        if course.title !== 'Introduction to Computer Science'
          p Student unlock code: #{instance.code}
          p Class capacity: 34/50
        textarea.textarea-emails(rows=3, placeholder="Enter student emails to invite, one per line")
        div
          button.btn.btn-success.btn-invite Send Invites

      .tab-pane#levels(role='tabpanel')
        +levels-tab
    else
      .tab-pane.active#levels(role='tabpanel')
        +levels-tab

mixin levels-tab
  table.table.table-striped.table-condensed
    thead
      tr
        th
        th Status
        th Level
        th Concepts
    tbody
      - var student = instance.students[0]
      each level in course.levels
        tr
          td
            button.btn.btn-success.btn-play-level(data-level=level) Play
          td= userLevelStateMap[student][level]
          td= level
          td
            each concept in courseConcepts
              if levelConceptsMap[level] && levelConceptsMap[level][concept]
                span.spr.progress-level-cell.level-progression-level-not-started(data-i18n="concepts." + concept)