Disable setting course pacing during course run.

Also adds improved styling for course pacing settings, and unit tests
around query counts for self-paced courses.

ECOM-2650

cms/static/js/models/settings/course_details.js

@@ -70,6 +70,7 @@ var CourseDetails = Backbone.Model.extend({
     },
 
     _videokey_illegal_chars : /[^a-zA-Z0-9_-]/g,
+
     set_videosource: function(newsource) {
         // newsource either is <video youtube="speed:key, *"/> or just the "speed:key, *" string
         // returns the videosource for the preview which iss the key whose speed is closest to 1
@@ -81,9 +82,16 @@ var CourseDetails = Backbone.Model.extend({
 
         return this.videosourceSample();
     },
+
     videosourceSample : function() {
         if (this.has('intro_video')) return "//www.youtube.com/embed/" + this.get('intro_video');
         else return "";
+    },
+
+    // Whether or not the course pacing can be toggled. If the course
+    // has already started, returns false; otherwise, returns true.
+    canTogglePace: function () {
+        return new Date() <= new Date(this.get('start_date'));
     }
 });
 

cms/static/js/views/pages/container_subviews.js

@@ -115,7 +115,8 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "common/js/compo
                     releaseDateFrom: this.model.get('release_date_from'),
                     hasExplicitStaffLock: this.model.get('has_explicit_staff_lock'),
                     staffLockFrom: this.model.get('staff_lock_from'),
-                    hasContentGroupComponents: this.model.get('has_content_group_components')
+                    hasContentGroupComponents: this.model.get('has_content_group_components'),
+                    course: window.course,
                 }));
 
                 return this;

cms/static/js/views/settings/main.js

@@ -1,8 +1,9 @@
 define(["js/views/validation", "codemirror", "underscore", "jquery", "jquery.ui", "js/utils/date_utils", "js/models/uploads",
     "js/views/uploads", "js/utils/change_on_enter", "js/views/license", "js/models/license",
-    "common/js/components/views/feedback_notification", "jquery.timepicker", "date"],
-    function(ValidatingView, CodeMirror, _, $, ui, DateUtils, FileUploadModel,
-        FileUploadDialog, TriggerChangeEventOnEnter, LicenseView, LicenseModel, NotificationView) {
+    "common/js/components/views/feedback_notification", "jquery.timepicker", "date", "gettext"],
+       function(ValidatingView, CodeMirror, _, $, ui, DateUtils, FileUploadModel,
+                FileUploadDialog, TriggerChangeEventOnEnter, LicenseView, LicenseModel, NotificationView,
+                timepicker, date, gettext) {
 
 var DetailsView = ValidatingView.extend({
     // Model class is CMS.Models.Settings.CourseDetails
@@ -99,11 +100,19 @@ var DetailsView = ValidatingView.extend({
         }
         this.$('#' + this.fieldToSelectorMap['entrance_exam_minimum_score_pct']).val(this.model.get('entrance_exam_minimum_score_pct'));
 
-        if (this.model.get('self_paced')) {
-            this.$('#course-pace-self-paced').attr('checked', true);
+        var selfPacedButton = this.$('#course-pace-self-paced'),
+            instructorLedButton = this.$('#course-pace-instructor-led'),
+            paceToggleTip = this.$('#course-pace-toggle-tip');
+        (this.model.get('self_paced') ? selfPacedButton : instructorLedButton).attr('checked', true);
+        if (this.model.canTogglePace()) {
+            selfPacedButton.removeAttr('disabled');
+            instructorLedButton.removeAttr('disabled');
+            paceToggleTip.text('');
         }
         else {
-            this.$('#course-pace-instructor-led').attr('checked', true);
+            selfPacedButton.attr('disabled', true);
+            instructorLedButton.attr('disabled', true);
+            paceToggleTip.text(gettext('Course pacing cannot be changed once a course has started.'));
         }
 
         this.licenseView.render()

cms/static/js/views/validation.js

@@ -157,6 +157,7 @@ var ValidatingView = BaseView.extend({
             {
                 success: function() {
                     self.showSavedBar();
+                    self.render();
                 },
                 silent: true
             }

cms/static/sass/views/_settings.scss

@@ -1039,4 +1039,29 @@
       }
     }
   }
+
+  // UI: course pacing options
+  .group-settings.pacing {
+    .list-input {
+      margin-top: $baseline/2;
+      background-color: $gray-l4;
+      border-radius: 3px;
+      padding: ($baseline/2);
+    }
+
+    .field {
+      @include margin(0, 0, $baseline, 0);
+
+      .field-radio {
+        display: inline-block;
+        @include margin-right($baseline/4);
+        width: auto;
+        height: auto;
+
+        & + .course-pace-label {
+          display: inline-block;
+        }
+      }
+    }
+  }
 }