Add ChangeCourseLanguageModal to CoursesView

app/templates/courses/change-course-language-modal.jade

@@ -0,0 +1,27 @@
+extends /templates/core/modal-base
+
+block modal-header-content
+  .clearfix
+
+block modal-body-content
+  #choice-area.text-center
+    - var currentLanguage = (me.get('aceConfig') || {}).language || 'python';
+    button.lang-choice-btn.btn.btn-success.btn-lg(data-language='python')
+      if currentLanguage === 'python'
+        | Keep Using Python
+      else
+        | Switch To Python
+        
+    p - OR -
+    
+    if currentLanguage === 'javascript'
+      button.lang-choice-btn.btn.btn-default(data-language='javascript')
+        if currentLanguage === 'javascript'
+          | Keep Using JavaScript
+        else
+          | Switch to JavaScript
+  #saving-progress.progress.progress-striped.active.hide
+    .progress-bar(style="width: 100%")
+
+block modal-footer-content
+  

app/templates/courses/courses-view.jade

@@ -51,7 +51,7 @@ block content
         .course-instance-entry
           h2
             span.spr Hour of Code: Course 1
-            span.spr= (view.hocCourseInstance.get('aceConfig') || {}).language === 'python' ? 'Python' : 'JavaScript'
+            span.spr= (me.get('aceConfig') || {}).language === 'python' ? 'Python' : 'JavaScript'
             small
               a#change-language-link change language
           +course-instance-body(hocCourseInstance)

app/views/courses/ChangeCourseLanguageModal.coffee

@@ -0,0 +1,26 @@
+ModalView = require 'views/core/ModalView'
+template = require 'templates/courses/change-course-language-modal'
+
+module.exports = class ChangeCourseLanguageModal extends ModalView
+  id: 'change-course-language-modal'
+  template: template
+
+  events:
+    'click .lang-choice-btn': 'onClickLanguageChoiceButton'
+
+  onClickLanguageChoiceButton: (e) ->
+    @chosenLanguage = $(e.target).data('language')
+    aceConfig = _.clone(me.get('aceConfig') or {})
+    aceConfig.language = @chosenLanguage
+    me.set('aceConfig', aceConfig)
+    res = me.patch()
+    if res
+      @$('#choice-area').hide()
+      @$('#saving-progress').removeClass('hide')
+      @listenToOnce me, 'sync', @onLanguageSettingSaved
+    else
+      @onLanguageSettingSaved()
+
+  onLanguageSettingSaved: ->
+    @trigger('set-language')
+    @hide()

app/views/courses/CoursesView.coffee

@@ -4,6 +4,7 @@ RootView = require 'views/core/RootView'
 template = require 'templates/courses/courses-view'
 StudentLogInModal = require 'views/courses/StudentLogInModal'
 StudentSignUpModal = require 'views/courses/StudentSignUpModal'
+ChangeCourseLanguageModal = require 'views/courses/ChangeCourseLanguageModal'
 CourseInstance = require 'models/CourseInstance'
 CocoCollection = require 'collections/CocoCollection'
 Course = require 'models/Course'
@@ -22,6 +23,7 @@ module.exports = class CoursesView extends RootView
     'click #start-new-game-btn': 'onClickStartNewGameButton'
     'click #join-class-btn': 'onClickJoinClassButton'
     'submit #join-class-form': 'onSubmitJoinClassForm'
+    'click #change-language-link': 'onClickChangeLanguageLink'
   
   initialize: ->
     @courseInstances = new CocoCollection([], { url: "/db/user/#{me.id}/course_instances", model: CourseInstance})
@@ -124,4 +126,8 @@ module.exports = class CoursesView extends RootView
       $.when(jqxhrs...).done =>
         @state = ''
         @render()
-        delete newClassroom.justAdded
+        delete newClassroom.justAdded
+        
+  onClickChangeLanguageLink: ->
+    modal = new ChangeCourseLanguageModal()
+    @openModalView(modal)