save display_name and subtitle metadata

cms/static/js/base.js

@@ -25,8 +25,40 @@ $(document).ready(function() {
     $('.upload-modal .close-button').bind('click', hideModal);
     $('.unit .item-actions .delete-button').bind('click', deleteUnit);
     $('.new-unit-item').bind('click', createNewUnit);
+    $('.save-subsection').bind('click', saveSubsection);
 });
 
+function saveSubsection(e) {
+    e.preventDefault();
+    
+    var id = $(this).data('id');
+
+    // pull all metadata editable fields on page
+    var metadata_fields = $('input[data-metadata-name]');
+    
+    metadata = {};
+    for(var i=0; i< metadata_fields.length;i++) {
+	el = metadata_fields[i];
+	metadata[$(el).data("metadata-name")] = el.value;
+    } 
+
+    children =[];
+
+    $.ajax({
+	    url: "/save_item",
+		type: "POST",
+		dataType: "json",
+		contentType: "application/json",
+		data:JSON.stringify({ 'id' : id, 'metadata' : metadata, 'data': null, 'children' : children}),
+		success: function() {
+		alert('Your changes have been saved.');
+	    },
+		error: function() {
+		alert('There has been an error while saving your changes.');
+	    }
+	});
+}
+
 function createNewUnit(e) {
     e.preventDefault();
 

cms/templates/edit_subsection.html

@@ -12,11 +12,11 @@
       <article class="subsection-body window">
 	<div class="subsection-name-input">
 	  <label>Display Name:</label>
-	  <input type="text" value="Welcome to 6.002x" class="subsection-display-name-input" />
+	  <input type="text" value="${subsection.metadata['display_name']}" class="subsection-display-name-input" data-metadata-name="display_name"/>
 	</div>
 	<div>
 	  <label>Subtitle:</label>
-	  <input type="text" value="Lecture Sequence" class="unit-subtitle" />
+	  <input type="text" value="${subsection.metadata['subtitle'] if 'subtitle' in subsection.metadata else ''}" class="unit-subtitle" data-metadata-name="subtitle"/>
 	</div>
 	<div class="unit-list">
 	  <label>Units:</label>
@@ -55,7 +55,7 @@
 	  <a href="#" class="toggle-off">hide</a><a href="#" class="large-toggle"></a><a href="#" class="toggle-on">show</a>
 	</div>
 	<div class="row unit-actions">
-	  <a href="#" class="save-button">Save</a>
+	  <a href="#" class="save-button save-subsection" data-id="${subsection.location}">Save</a>
 	  <a href="preview.html" target="_blank" class="preview-button">Preview</a>
 	</div>
       </div>