Update /courses/purchase visuals

app/styles/courses/purchase-courses-view.sass

@@ -3,3 +3,9 @@
   .enrollment-count
     font-size: 30px
     width: 120px
+
+  .not-enrolled
+    line-height: 16px
+
+  .uppercase
+    text-transform: uppercase

app/templates/courses/purchase-courses-view.jade

@@ -24,13 +24,46 @@ block content
     if view.state === 'error'
       .alert.alert-danger= view.stateMessage
 
+    - var usedEnrollments = view.prepaids.totalRedeemers();
+    - var totalEnrollments = view.prepaids.totalMaxRedeemers();
+    - var remainingEnrollments = totalEnrollments - usedEnrollments;
+    .row
+      .col-md-4
+      .col-md-3
+        strong.uppercase unused paid enrollments
+      .col-md-1
+        strong= remainingEnrollments
+    br
+    .row
+      .col-md-4
+      .col-md-3
+        strong.uppercase students not enrolled
+    .row
+      .col-md-4
+      .col-md-3
+        each classroom in view.classrooms.models
+          if classroom.get('members').length > 0
+            .not-enrolled= classroom.get('name')
+        .not-enrolled Total Across All Classes
+      .col-md-1
+        - var totalNotEnrolled = 0
+        each classroom in view.classrooms.models
+          if classroom.get('members').length > 0 && view.classroomNotEnrolledMap
+            .not-enrolled
+              strong= view.classroomNotEnrolledMap[classroom.id]
+        .not-enrolled
+          strong= view.totalNotEnrolled
+
+    br
+    br
+
     p.text-center
       strong How many additional paid enrollments do you need?
     br
 
     p.text-center
       input#students-input.text-center.enrollment-count(
-        value=view.numberOfStudents
+        value= view.numberOfStudents
         type='number'
       )
     br

app/views/courses/PurchaseCoursesView.coffee

@@ -1,10 +1,13 @@
 app = require 'core/application'
 AuthModal = require 'views/core/AuthModal'
+Classroom = require 'models/Classroom'
 CocoCollection = require 'collections/CocoCollection'
 Course = require 'models/Course'
+Prepaids = require 'collections/Prepaids'
 RootView = require 'views/core/RootView'
 stripeHandler = require 'core/services/stripe'
 template = require 'templates/courses/purchase-courses-view'
+User = require 'models/User'
 utils = require 'core/utils'
 
 module.exports = class PurchaseCoursesView extends RootView
@@ -12,12 +15,22 @@ module.exports = class PurchaseCoursesView extends RootView
   template: template
   numberOfStudents: 30
   pricePerStudent: 4
-  
+
   initialize: (options) ->
     @listenTo stripeHandler, 'received-token', @onStripeReceivedToken
     @fromClassroom = utils.getQueryVariable('from-classroom')
+    @members = new CocoCollection([], { model: User })
+    @listenTo @members, 'sync', @membersSync
+    @classrooms = new CocoCollection([], { url: "/db/classroom", model: Classroom })
+    @classrooms.comparator = '_id'
+    @listenToOnce @classrooms, 'sync', @onceClassroomsSync
+    @supermodel.loadCollection(@classrooms, 'classrooms', {data: {ownerID: me.id}})
+    @prepaids = new Prepaids()
+    @prepaids.comparator = '_id'
+    @prepaids.fetchByCreator(me.id)
+    @supermodel.loadCollection(@prepaids, 'prepaids')
     super(options)
-  
+
   events:
     'input #students-input': 'onInputStudentsInput'
     'click #purchase-btn': 'onClickPurchaseButton'
@@ -25,6 +38,27 @@ module.exports = class PurchaseCoursesView extends RootView
   getPriceString: -> '$' + (@getPrice()).toFixed(2)
   getPrice: -> @pricePerStudent * @numberOfStudents
 
+  onceClassroomsSync: ->
+    for classroom in @classrooms.models
+      @members.fetch({
+        remove: false
+        url: "/db/classroom/#{classroom.id}/members"
+      })
+
+  membersSync: ->
+    @memberEnrolledMap = {}
+    for user in @members.models
+      @memberEnrolledMap[user.id] = user.get('coursePrepaidID')?
+    @classroomNotEnrolledMap = {}
+    @totalNotEnrolled = 0
+    for classroom in @classrooms.models
+      @classroomNotEnrolledMap[classroom.id] = 0
+      for memberID in classroom.get('members')
+        @classroomNotEnrolledMap[classroom.id]++ unless @memberEnrolledMap[memberID]
+      @totalNotEnrolled += @classroomNotEnrolledMap[classroom.id]
+    @numberOfStudents = @totalNotEnrolled
+    @render?()
+
   onInputStudentsInput: ->
     @numberOfStudents = Math.max(parseInt(@$('#students-input').val()) or 0, 0)
     @updatePrice()
@@ -54,14 +88,14 @@ module.exports = class PurchaseCoursesView extends RootView
   onStripeReceivedToken: (e) ->
     @state = 'purchasing'
     @render?()
-    
+
     data =
       maxRedeemers: @numberOfStudents
       type: 'course'
       stripe:
         token: e.token.id
         timestamp: new Date().getTime()
-      
+
     $.ajax({
       url: '/db/prepaid/-/purchase',
       data: data,
@@ -71,7 +105,7 @@ module.exports = class PurchaseCoursesView extends RootView
         application.tracker?.trackEvent 'Finished course prepaid purchase', {price: @pricePerStudent, seats: @numberOfStudents}
         @state = 'purchased'
         @render?()
-        
+
       error: (jqxhr, textStatus, errorThrown) ->
         application.tracker?.trackEvent 'Failed course prepaid purchase', status: textStatus
         if jqxhr.status is 402
@@ -82,4 +116,3 @@ module.exports = class PurchaseCoursesView extends RootView
           @stateMessage = "#{jqxhr.status}: #{jqxhr.responseText}"
         @render?()
     })
-