diff --git a/app/styles/courses/teacher-courses-view.sass b/app/styles/courses/teacher-courses-view.sass index 770710c90..f0bcbabf9 100644 --- a/app/styles/courses/teacher-courses-view.sass +++ b/app/styles/courses/teacher-courses-view.sass @@ -1,6 +1,9 @@ #teacher-courses-view margin-bottom: 50px + img.media-object + width: 300px + #fixed-area position: fixed bottom: 0 diff --git a/app/templates/courses/teacher-courses-view.jade b/app/templates/courses/teacher-courses-view.jade index 2c03fbe1e..191a1cede 100644 --- a/app/templates/courses/teacher-courses-view.jade +++ b/app/templates/courses/teacher-courses-view.jade @@ -4,89 +4,147 @@ block content span *UNDER CONSTRUCTION, please send feedback to a.spl(href='mailto:team@codecombat.com') team@codecombat.com - hr - p Create a class and add students to it. - - - var totalRedeemers = view.prepaids.totalRedeemers(); - - var totalMaxRedeemers = view.prepaids.totalMaxRedeemers(); - - .text-right - span.spr Available paid seats: #{totalRedeemers}/#{totalMaxRedeemers} - a.btn.btn-default.btn-xs(href="/courses/purchase") Add - - for classroom in view.classrooms.models - h2= classroom.get('name') + ul.nav.nav-tabs(role='tablist') + li.active(role='presentation') + a(href="#courses-tab-pane" aria-controls="courses" role="tab" data-toggle="tab") Courses + li(role='presentation') + a(href="#manage-tab-pane" aria-controls="manage" role="tab" data-toggle="tab") Manage - - var courseInstances = view.courseInstances.where({classroomID: classroom.id}) - - if classroom.saving - .progress - .progress-bar(style="width: 100%") - - table.table - tr - th Student - for courseInstance in courseInstances - th - if courseInstance.course - | #{courseInstance.course.get('name')} + .tab-content + #courses-tab-pane.tab-pane.active.well + h3 Your Courses + - var courseInstances = view.courseInstances.sliceWithMembers(); + if !_.size(courseInstances) + .alert.alert-info + span.spr You currently have no students assigned to courses. + a#manage-tab-link Go to the manage tab to get set up. - if !_.size(classroom.get('members')) - tr - td(colspan=1+view.courses.size()) - em No students in this class yet. - - for member in classroom.get('members') || [] - - var user = view.members.get(member); - if !user - - continue; - tr - td= user.get('name') + else + table.table + tr + th Class + th Course + th Size + th for courseInstance in courseInstances - td - if _.contains(courseInstance.get('members'), user.id) - span.glyphicon.glyphicon-ok - else - input.course-instance-membership-checkbox( - type='checkbox' - data-course-instance-id=courseInstance.id - data-user-id=user.id - ) + - console.log('course instance!', courseInstance) + tr + td + - var classroom = view.classrooms.get(courseInstance.get('classroomID')); + if classroom + | #{classroom.get('name')} + td + if courseInstance.course + | #{courseInstance.course.get('name')} + td= _.size(courseInstance.get('members')) + td + a.btn.btn-primary.btn-sm(href='/courses/#{courseInstance.get("courseID")}/#{courseInstance.id}') Enter + + h3 Available Courses - button.add-students-btn.btn.btn-sm(data-classroom-id=classroom.id) Add Students + for course in view.courses.models + .media + .pull-left + img.media-object(src=course.get('screenshot')) + .media-body + h3.media-heading + span.spr= course.get('name') + if course.get('free') + em (free!) + p= course.get('description') + p + strong.spr Concepts: + span= (course.get('concepts') || []).join(', ') + p + strong.spr Length: + span #{course.get('duration') || 0} hours + + + + #manage-tab-pane.tab-pane.well - hr - - .row - .col-sm-3.col-sm-offset-3 - button#create-new-class-btn.btn.btn-default.btn-block Create New Class - .col-sm-3 - input#new-classroom-name-input.form-control(placeholder='new class name') + p Create a class and add students to it. - #fixed-area - .container - .row.well - if view.state === 'saving-changes' - p Saving changes - - var total = view.membershipAdditions.originalSize + view.usersToRedeem.originalSize; - - var left = view.membershipAdditions.size() + view.usersToRedeem.size(); - - var pct = Math.max(10, (100 * (total - left) / total)).toFixed(1) + '%'; - .progress.progress-striped.active - .progress-bar(style="width: #{pct}") - else - - var seatsLeft = totalMaxRedeemers - totalRedeemers - view.usersToRedeem.size(); - if seatsLeft < 0 - .alert.alert-danger - span.spr You do not have enough seats to accommodate all students you have selected. - a(href="/courses/purchase") Buy more seats. - else - .col-sm-2 - button#save-changes-btn.btn.btn-primary.btn-block(disabled=!view.numCourseInstancesToAddTo) Save Changes - .col-sm-5 - | Students to add to courses: #{view.numCourseInstancesToAddTo || 0} - .col-sm-5 - | Seats to expend: #{view.usersToRedeem.size()} (will have #{seatsLeft} seats left) + - var totalRedeemers = view.prepaids.totalRedeemers(); + - var totalMaxRedeemers = view.prepaids.totalMaxRedeemers(); + + .text-right + span.spr Available paid seats: #{totalRedeemers}/#{totalMaxRedeemers} + a.btn.btn-default.btn-xs(href="/courses/purchase") Add + + for classroom in view.classrooms.models + h2= classroom.get('name') + + - var courseInstances = view.courseInstances.where({classroomID: classroom.id}) + + if classroom.saving + .progress + .progress-bar(style="width: 100%") + + table.table + tr + th Student + for courseInstance in courseInstances + th + if courseInstance.course + | #{courseInstance.course.get('name')} + + if !_.size(classroom.get('members')) + tr + td(colspan=1+view.courses.size()) + em No students in this class yet. + + for member in classroom.get('members') || [] + - var user = view.members.get(member); + if !user + - continue; + tr + td= user.get('name') + for courseInstance in courseInstances + td + if _.contains(courseInstance.get('members'), user.id) + span.glyphicon.glyphicon-ok + else + input.course-instance-membership-checkbox( + type='checkbox' + data-course-instance-id=courseInstance.id + data-user-id=user.id + ) + + button.add-students-btn.btn.btn-sm(data-classroom-id=classroom.id) Add Students + + hr + + .row + .col-sm-3.col-sm-offset-3 + button#create-new-class-btn.btn.btn-default.btn-block Create New Class + .col-sm-3 + input#new-classroom-name-input.form-control(placeholder='new class name') + + #fixed-area + .container + .row.well + if view.state === 'saving-changes' + p Saving changes + - var total = view.membershipAdditions.originalSize + view.usersToRedeem.originalSize; + - var left = view.membershipAdditions.size() + view.usersToRedeem.size(); + - var pct = Math.max(10, (100 * (total - left) / total)).toFixed(1) + '%'; + .progress.progress-striped.active + .progress-bar(style="width: #{pct}") + else + - var seatsLeft = totalMaxRedeemers - totalRedeemers - view.usersToRedeem.size(); + if seatsLeft < 0 + .alert.alert-danger + span.spr You do not have enough seats to accommodate all students you have selected. + a(href="/courses/purchase") Buy more seats. + else + .col-sm-2 + button#save-changes-btn.btn.btn-primary.btn-block(disabled=!view.numCourseInstancesToAddTo) Save Changes + .col-sm-5 + | Students to add to courses: #{view.numCourseInstancesToAddTo || 0} + .col-sm-5 + | Seats to expend: #{view.usersToRedeem.size()} (will have #{seatsLeft} seats left) block footer \ No newline at end of file diff --git a/app/views/courses/TeacherCoursesView.coffee b/app/views/courses/TeacherCoursesView.coffee index 4a2e252a7..c6f62c3cc 100644 --- a/app/views/courses/TeacherCoursesView.coffee +++ b/app/views/courses/TeacherCoursesView.coffee @@ -21,6 +21,7 @@ module.exports = class TeacherCoursesView extends RootView 'click .add-students-btn': 'onClickAddStudentsButton' 'click .course-instance-membership-checkbox': 'onClickCourseInstanceMembershipCheckbox' 'click #save-changes-btn': 'onClickSaveChangesButton' + 'click #manage-tab-link': 'onClickManageTabLink' constructor: (options) -> super(options) @@ -32,12 +33,13 @@ module.exports = class TeacherCoursesView extends RootView @supermodel.loadCollection(@classrooms, 'classrooms', {data: {ownerID: me.id}}) @courseInstances = new CocoCollection([], { url: "/db/course_instance", model: CourseInstance }) @courseInstances.comparator = 'courseID' + @courseInstances.sliceWithMembers = -> return @filter (courseInstance) -> _.size(courseInstance.get('members')) @supermodel.loadCollection(@courseInstances, 'course_instances', {data: {ownerID: me.id}}) @members = new CocoCollection([], { model: User }) @prepaids = new CocoCollection([], { url: "/db/prepaid", model: Prepaid }) sum = (numbers) -> _.reduce(numbers, (a, b) -> a + b) - @prepaids.totalMaxRedeemers = -> sum((prepaid.get('maxRedeemers') for prepaid in @models)) - @prepaids.totalRedeemers = -> sum((_.size(prepaid.get('redeemers')) for prepaid in @models)) + @prepaids.totalMaxRedeemers = -> sum((prepaid.get('maxRedeemers') for prepaid in @models)) or 0 + @prepaids.totalRedeemers = -> sum((_.size(prepaid.get('redeemers')) for prepaid in @models)) or 0 @prepaids.comparator = '_id' @supermodel.loadCollection(@prepaids, 'prepaids', {data: {creator: me.id}}) @listenTo @members, 'sync', @render @@ -186,4 +188,7 @@ module.exports = class TeacherCoursesView extends RootView @state = 'error' @stateMessage = "#{jqxhr.status}: #{jqxhr.responseText}" @renderSelectors '#fixed-area' - }) \ No newline at end of file + }) + + onClickManageTabLink: -> + @$('.nav-tabs a[href="#manage-tab-pane"]').tab('show') \ No newline at end of file