diff --git a/app/styles/courses/mock1/course-details.sass b/app/styles/courses/mock1/course-details.sass index bfe5a625a..9c26707c5 100644 --- a/app/styles/courses/mock1/course-details.sass +++ b/app/styles/courses/mock1/course-details.sass @@ -10,3 +10,60 @@ .select-session width: 300px display: inline + + .progress-header + margin-right: 14px + + .progress-key + cursor: default + display: inline-block + white-space: nowrap + font-size: 9pt + font-weight: normal + border: 1px solid gray + border-radius: 5px + margin: 0px + padding: 2px + + .progress-key-started + background-color: lightgreen + + .progress-key-complete + background-color: lightgray + + .expand-progress-checkbox + margin-left: 14px + + .expand-progress-label + font-weight: normal + font-size: 14px + + .progress-cell + padding: 2px + padding-bottom: 10px + + .level-popup-container + display: none + position: absolute + padding: 10px + border: 1px solid black + z-index: 3 + background-color: blanchedalmond + font-size: 10pt + + .progress-level-cell + display: inline-block + white-space: nowrap + font-size: 9pt + border: 1px solid gray + border-radius: 5px + margin: 0px + padding: 2px + + .progress-level-cell-started + cursor: pointer + background-color: lightgreen + + .progress-level-cell-complete + cursor: pointer + background-color: lightgray diff --git a/app/templates/courses/mock1/course-details.jade b/app/templates/courses/mock1/course-details.jade index e37f358af..c3a508f8e 100644 --- a/app/templates/courses/mock1/course-details.jade +++ b/app/templates/courses/mock1/course-details.jade @@ -11,9 +11,11 @@ block content input.student-view-checkbox(type='checkbox') span.spl Student view div TODO: fix ugly tabs - div TODO: add student progress monitoring div TODO: level concepts, status, working play button div TODO: student view + div TODO: aggregate student progress + div TODO: student level progress popups + div TODO: student concept progress div(style='border-bottom: 1px solid black;') h1= course.title @@ -64,24 +66,48 @@ block content table.table.table-condensed thead tr - th Name - th Progress + th + th + span.progress-header Progress + 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 TODO: level progress + td + a= student + td.progress-cell + - var i = 0 + each level in course.levels + if i <= userLevelStateMap[student].lastCompletedIndex + span.progress-level-cell.progress-level-cell-complete #{i + 1} + if showExpandedProgress || i === 0 || i === userLevelStateMap[student].lastStartedIndex + span.spl #{level} + else if i <= userLevelStateMap[student].lastStartedIndex + span.progress-level-cell.progress-level-cell-started #{i + 1} + if showExpandedProgress || i === 1 || i === userLevelStateMap[student].lastStartedIndex + span.spl #{level} + else + span.progress-level-cell.level-progression-level-not-started #{i + 1} + if showExpandedProgress || i === 1 || i === userLevelStateMap[student].lastStartedIndex + span.spl #{level} + if i === maxLastStartedIndex + - break + - 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') table.table.table-condensed thead diff --git a/app/views/courses/mock1/CourseDetailsView.coffee b/app/views/courses/mock1/CourseDetailsView.coffee index 328b1c2fa..f551ef721 100644 --- a/app/views/courses/mock1/CourseDetailsView.coffee +++ b/app/views/courses/mock1/CourseDetailsView.coffee @@ -7,9 +7,10 @@ module.exports = class CourseDetailsView extends RootView template: template events: + 'change .expand-progress-checkbox': 'onExpandedProgressCheckbox' + 'change .select-session': 'onChangeSession' 'click .edit-class-name-btn': 'onClickEditClassName' 'click .edit-description-btn': 'onClickEditClassDescription' - 'change .select-session': 'onChangeSession' constructor: (options, @courseID) -> super options @@ -20,21 +21,41 @@ module.exports = class CourseDetailsView extends RootView context.course = @course ? {} context.instance = @instances?[@currentInstanceIndex] ? {} context.instances = @instances ? [] + context.lastUserLevelMap = @lastUserLevelMap ? {} + context.levelProgression = @levelProgression ? [] + context.maxLastStartedIndex = @maxLastStartedIndex ? 0 + context.userLevelStateMap = @userLevelStateMap ? {} + context.showExpandedProgress = @maxLastStartedIndex <= 30 or @showExpandedProgress context initData: -> mockData = require 'views/courses/mock1/CoursesMockData' @course = mockData.courses[@courseID] - # @instance = mockData.instances[_.random(0, mockData.instances.length - 1)] @currentInstanceIndex = 0 @instances = mockData.instances + @userLevelStateMap = {} + @maxLastStartedIndex = -1 + for student in @instances?[@currentInstanceIndex].students + lastCompletedIndex = _.random(0, @course.levels.length) + lastStartedIndex = lastCompletedIndex + 1 + @userLevelStateMap[student] = + lastCompletedIndex: lastCompletedIndex + lastStartedIndex: lastStartedIndex + @maxLastStartedIndex = lastStartedIndex if lastStartedIndex > @maxLastStartedIndex + onChangeSession: (e) -> newSessionValue = $(e.target).val() for val, index in @instances when val.name is newSessionValue @currentInstanceIndex = index @render?() + onExpandedProgressCheckbox: (e) -> + @showExpandedProgress = $('.expand-progress-checkbox').prop('checked') + # TODO: why does render reset the checkbox to be unchecked? + @render?() + $('.expand-progress-checkbox').attr('checked', @showExpandedProgress) + onClickEditClassName: (e) -> alert 'TODO: Popup for editing name for this course session'