mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-04-01 15:50:11 -04:00
Add sorting to course details mock UI
This commit is contained in:
parent
49a75d2d42
commit
e70b8b8652
3 changed files with 61 additions and 2 deletions
app
styles/courses/mock1
templates/courses/mock1
views/courses/mock1
|
@ -1,5 +1,10 @@
|
|||
#course-details-view
|
||||
|
||||
.member-header
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
padding: 2px
|
||||
|
||||
.textarea-emails
|
||||
width: 50%
|
||||
|
||||
|
@ -13,6 +18,7 @@
|
|||
|
||||
.progress-header
|
||||
margin-right: 14px
|
||||
cursor: pointer
|
||||
|
||||
.progress-key
|
||||
cursor: default
|
||||
|
|
|
@ -73,8 +73,19 @@ block content
|
|||
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 Progress
|
||||
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
|
||||
|
|
|
@ -12,9 +12,11 @@ module.exports = class CourseDetailsView extends RootView
|
|||
'change .expand-progress-checkbox': 'onExpandedProgressCheckbox'
|
||||
'change .select-session': 'onChangeSession'
|
||||
'change .student-mode-checkbox': 'onChangeStudent'
|
||||
'click .btn-play-level': 'onClickPlayLevel'
|
||||
'click .edit-class-name-btn': 'onClickEditClassName'
|
||||
'click .edit-description-btn': 'onClickEditClassDescription'
|
||||
'click .btn-play-level': 'onClickPlayLevel'
|
||||
'click .member-header': 'onClickMemberHeader'
|
||||
'click .progress-header': 'onClickProgressHeader'
|
||||
|
||||
constructor: (options, @courseID) ->
|
||||
super options
|
||||
|
@ -32,6 +34,7 @@ module.exports = class CourseDetailsView extends RootView
|
|||
context.instances = @instances ? []
|
||||
context.levelConceptsMap = @levelConceptsMap ? {}
|
||||
context.maxLastStartedIndex = @maxLastStartedIndex ? 0
|
||||
context.memberSort = @memberSort
|
||||
context.userConceptsMap = @userConceptsMap ? {}
|
||||
context.userLevelStateMap = @userLevelStateMap ? {}
|
||||
context.showExpandedProgress = @course.levels.length <= 30 or @showExpandedProgress
|
||||
|
@ -39,6 +42,7 @@ module.exports = class CourseDetailsView extends RootView
|
|||
context
|
||||
|
||||
initData: ->
|
||||
@memberSort = 'nameAsc'
|
||||
mockData = require 'views/courses/mock1/CoursesMockData'
|
||||
@course = mockData.courses[@courseID]
|
||||
@currentInstanceIndex = 0
|
||||
|
@ -62,6 +66,33 @@ module.exports = class CourseDetailsView extends RootView
|
|||
lastStartedIndex = lastCompletedIndex + 1
|
||||
@userLevelStateMap[student][@course.levels[lastStartedIndex]] = 'started'
|
||||
@maxLastStartedIndex = lastStartedIndex if lastStartedIndex > @maxLastStartedIndex
|
||||
@sortMembers()
|
||||
|
||||
sortMembers: ->
|
||||
# Progress sort precedence: most completed concepts, most started concepts, most levels, name sort
|
||||
instance = @instances?[@currentInstanceIndex] ? {}
|
||||
return if _.isEmpty(instance)
|
||||
switch @memberSort
|
||||
when "nameDesc"
|
||||
instance.students.sort (a, b) -> b.localeCompare(a)
|
||||
when "progressAsc"
|
||||
instance.students.sort (a, b) =>
|
||||
for level in @course.levels
|
||||
if @userLevelStateMap[a][level] isnt 'complete' and @userLevelStateMap[b][level] is 'complete'
|
||||
return -1
|
||||
else if @userLevelStateMap[a][level] is 'complete' and @userLevelStateMap[b][level] isnt 'complete'
|
||||
return 1
|
||||
0
|
||||
when "progressDesc"
|
||||
instance.students.sort (a, b) =>
|
||||
for level in @course.levels
|
||||
if @userLevelStateMap[a][level] isnt 'complete' and @userLevelStateMap[b][level] is 'complete'
|
||||
return 1
|
||||
else if @userLevelStateMap[a][level] is 'complete' and @userLevelStateMap[b][level] isnt 'complete'
|
||||
return -1
|
||||
0
|
||||
else
|
||||
instance.students.sort (a, b) -> a.localeCompare(b)
|
||||
|
||||
onCampaignSync: ->
|
||||
return unless @campaigns.loaded
|
||||
|
@ -101,6 +132,7 @@ module.exports = class CourseDetailsView extends RootView
|
|||
for val, index in @instances when val.name is newSessionValue
|
||||
@currentInstanceIndex = index
|
||||
@updateLevelMaps()
|
||||
@onCampaignSync()
|
||||
@render?()
|
||||
|
||||
onExpandedProgressCheckbox: (e) ->
|
||||
|
@ -115,6 +147,16 @@ module.exports = class CourseDetailsView extends RootView
|
|||
onClickEditClassDescription: (e) ->
|
||||
alert 'TODO: Popup for editing description for this course session'
|
||||
|
||||
onClickMemberHeader: (e) ->
|
||||
@memberSort = if @memberSort is 'nameAsc' then 'nameDesc' else 'nameAsc'
|
||||
@sortMembers()
|
||||
@render?()
|
||||
|
||||
onClickProgressHeader: (e) ->
|
||||
@memberSort = if @memberSort is 'progressAsc' then 'progressDesc' else 'progressAsc'
|
||||
@sortMembers()
|
||||
@render?()
|
||||
|
||||
onClickPlayLevel: (e) ->
|
||||
levelName = $(e.target).data('level')
|
||||
levelSlug = @levelNameSlugMap[levelName]
|
||||
|
|
Loading…
Add table
Reference in a new issue