Course details mock UI edit dialogs

app/styles/courses/mock1/course-details.sass

@@ -1,5 +1,18 @@
 #course-details-view
 
+  #editDescriptionModal .modal-dialog
+    background-color: white
+
+  #editNameModal .modal-dialog
+    background-color: white
+    max-width: 400px
+
+  .edit-description-input
+    width: 100%
+
+  .edit-name-input
+    width: 100%
+
   .member-header
     cursor: pointer
     display: inline-block

app/templates/courses/mock1/course-details.jade

@@ -7,7 +7,6 @@ block content
   div TODO: fix ugly tabs
   div TODO: aggregate student progress
   div TODO: student level progress popups
-  div TODO: edit popup dialogs
   div
     span *UNDER CONSTRUCTION, send feedback to
     a.spl(href='mailto:team@codecombat.com') team@codecombat.com
@@ -16,34 +15,56 @@ block content
     span.spl Student view
   div(style='border-bottom: 1px solid black;')
 
+  .modal#editNameModal
+    .modal-dialog
+      .modal-header
+        button.close(data-dismiss='modal')
+          span ×
+        h3.modal-title Edit Class Name
+      .modal-body
+        p This title will be displayed to everyone enrolled in this class.
+        input.edit-name-input(type='text', value="#{instance.name}")
+      .modal-footer
+        button.btn.edit-name-save-btn(data-i18n="common.save_changes")
+
+  .modal#editDescriptionModal
+    .modal-dialog
+      .modal-header
+        button.close(data-dismiss='modal')
+          span ×
+        h3.modal-title Edit Class Description
+      .modal-body
+        p This description will be displayed to everyone enrolled in this class.
+        textarea.edit-description-input(rows=2)= instance.description
+      .modal-footer
+        button.btn.edit-description-save-btn(data-i18n="common.save_changes")
+
   h1= course.title
   p= course.description
-  //- p
-  //-   strong Concepts:
-  //-   ul
-  //-     each concept in courseConcepts
-  //-       li(data-i18n="concepts." + concept)
-  //- strong= course.duration
 
   if !studentMode
     p
       .form-group
         span.spr Select your class
         select.form-control.select-session
-          each instance in instances
-            option= instance.name
+          each inst in instances
+            if instance.name === inst.name
+              option(selected)= inst.name
+            else
+              option= inst.name
 
   h3= instance.name
     if !studentMode
       span.spl
-        button.btn.btn-xs.edit-class-name-btn edit class name
+        button.btn.btn-xs.edit-class-name-btn(data-toggle='modal', data-target='#editNameModal') edit class name
 
   p
     if instance.description
-      span= instance.description
-      if !studentMode
-        span.spl
-          button.btn.btn-xs.edit-description-btn edit class description
+      each line in instance.description.split('\n')
+        div= line
+    if !studentMode
+      span.spl
+        button.btn.btn-xs.edit-description-btn(data-toggle='modal', data-target='#editDescriptionModal') edit class description
     else if !studentMode
       div
         button.btn.btn-xs.edit-description-btn add class description

app/views/courses/mock1/CourseDetailsView.coffee

@@ -13,8 +13,8 @@ module.exports = class CourseDetailsView extends RootView
     '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 .edit-description-save-btn': 'onEditDescriptionSave'
+    'click .edit-name-save-btn': 'onEditNameSave'
     'click .member-header': 'onClickMemberHeader'
     'click .progress-header': 'onClickProgressHeader'
 
@@ -141,7 +141,6 @@ module.exports = class CourseDetailsView extends RootView
       @currentInstanceIndex = index
     @updateLevelMaps()
     @onCampaignSync()
-    @render?()
 
   onExpandedProgressCheckbox: (e) ->
     @showExpandedProgress = $('.expand-progress-checkbox').prop('checked')
@@ -173,3 +172,15 @@ module.exports = class CourseDetailsView extends RootView
       viewClass: 'views/play/level/PlayLevelView'
       viewArgs: [{}, levelSlug]
     }
+
+  onEditDescriptionSave: (e) ->
+    description = $('.edit-description-input').val()
+    @instances[@currentInstanceIndex].description = description
+    $('#editDescriptionModal').modal('hide')
+    @render?()
+
+  onEditNameSave: (e) ->
+    if name = $('.edit-name-input').val()
+      @instances[@currentInstanceIndex].name = name
+    $('#editNameModal').modal('hide')
+    @render?()