Hook the steps up properly, no longer a mockup.

www/aptui/js/manage_profile.js

@@ -2,7 +2,7 @@ window.APT_OPTIONS.config();
 
 require(['jquery', 'js/quickvm_sup', 
 	 // jQuery modules
-	 'bootstrap','filestyle','marked'],
+	 'bootstrap','filestyle','marked','jquery-ui','jquery-grid'],
 function ($, sup)
 {
     'use strict';
@@ -95,14 +95,29 @@ function ($, sup)
 	    $(this).select();
 	});
 
-	// Prevent submit if the description is empty.
+	//
+	// Sync up the steps when toggling the edit button.
+	//
+	$('#show_rspec_textarea_button').click(function (event) {
+	    SyncSteps();
+	});
+
+	//
+	// Perform actions on the rspec before submit.
+	//
 	$('#profile_submit_button').click(function (event) {
+	    // Prevent submit if the description is empty.
 	    var description = $('#profile_description').val();
 	    if (description === "") {
 		event.preventDefault();
 		alert("Please provide a description. Its handy!");
 		return false;
 	    }
+	    // Add steps to the tour.
+	    if (SyncSteps()) {
+		event.preventDefault();
+		return false;
+	    }
 	    return true;
 	});
 
@@ -154,21 +169,117 @@ function ($, sup)
 	}
     }
 
+    /*
+     * Yank the steps out of the xml and create the editable table.
+     * Before the form is submitted, we have to convert (update the
+     * table data into steps section of the rspec.
+     */
+    function InitStepsTable(xml)
+    {
+	var steps = [];
+	var count = 0;
+	
+	$(xml).find("rspec_tour").each(function() {
+	    $(this).find("steps").each(function() {
+		$(this).find("step").each(function() {
+		    var desc = $(this).find("description").text();
+		    var id   = $(this).attr("point_id");
+		    var type = $(this).attr("point_type");
+		    steps[count++] = {
+			'Type' : type,
+			'ID'   : id,
+			'Description': desc,
+		    };
+		});
+	    });
+	});
+
+	$(function () {
+	    // Initialize appendGrid
+	    $('#profile_steps').appendGrid('init', {
+		// We rewrite these to formfields variables before submit.
+		idPrefix: "StepsTable",
+		caption: null,
+		initRows: 0,
+		hideButtons: {
+		    removeLast: true
+		},
+		columns: [
+                    { name: 'Type', display: 'Type', type: 'text',
+		      ctrlAttr: { maxlength: 100 },
+		      ctrlCss: { width: '80px'}
+		    },
+                    { name: 'ID', display: 'ID', type: 'text',
+		      ctrlAttr: { maxlength: 100,
+				},
+		      ctrlCss: { width: '100px' },
+		    },
+                    { name: 'Description', display: 'Description', type: 'text',
+		      ctrlAttr: { maxlength: 100 },
+		    },
+		],
+		initData: steps
+	    });
+	});
+    }
+
     //
-    // Helper function for instructions/description change handler above.
+    // Sync the steps table to the rspec textarea.
     //
-    function ChangeHandlerAux(which)
+    function SyncSteps()
     {
-	var text    = $('#profile_' + which).val();
 	var rspec   = $('#profile_rspec_textarea').val();
 	if (rspec === "") {
 	    return;
 	}
-	console.log(text);
 	var xmlDoc = $.parseXML(rspec);
 	var xml    = $(xmlDoc);
 
-	// See if we need to add the section to top level.
+	// Add the tour section and the subsection (if needed).
+	xml = AddTourSection(xml);
+
+	// Kill existing steps, we create new ones.
+	var tour  = $(xml).find("rspec_tour");
+	var sub   = $(tour).find("steps");
+	$(sub).remove();
+	xml = AddTourSubSection(xml, "steps");
+	
+	// Get all data rows from the steps tab;e
+	var data = $('#profile_steps').appendGrid('getAllValue');
+
+	// And create each step.
+	for (var i = 0; i < data.length; i++) {
+	    var desc = data[i].Description;
+	    var id   = data[i].ID;
+	    var type = data[i].Type;
+
+	    // Skip completely empty rows.
+	    if (desc == "" && id == "" && type == "") {
+		continue;
+	    }
+	    // But error on partially empty rows.
+	    if (desc == "" || id == "" || type == "") {
+		alert("Partial step data in step " + i);
+		return -1;
+	    }
+	    var newdoc = $.parseXML('<step point_type="' + type + '" ' +
+				    'point_id="' + id + '">' +
+				    '<description type="text">' + desc +
+				    '</description>' +
+				    '</step>');
+	    $(tour).find("steps").append($(newdoc).find("step"));
+	}
+	// Write it back to the text area.
+	var s = new XMLSerializer();
+	var str = s.serializeToString(xml[0]);
+	console.log(str);
+	$('#profile_rspec_textarea').val(str);
+	return 0;
+    }
+
+    // See if we need to add the tour section to top level.
+    function AddTourSection(xml)
+    {
 	var tour = $(xml).find("rspec_tour");
 	if (! tour.length) {
 	    var newdoc = $.parseXML('<rspec_tour xmlns=' +
@@ -176,14 +287,52 @@ function ($, sup)
 				    '</rspec_tour>');
 	    $(xml).find("rspec").prepend($(newdoc).find("rspec_tour"));
 	}
+	return xml;
+    }
+    // See if we need to add the tour sub section.
+    function AddTourSubSection(xml, which)
+    {
+	// Add the tour section (if needed).
+	xml = AddTourSection(xml);
+
 	var tour = $(xml).find("rspec_tour");
-	// Ditto the subsection.
 	var sub  = $(tour).find(which);
 	if (!sub.length) {
-	    var newdoc = $.parseXML('<'  + which + ' type="text">' +
-				    '</' + which + '>');
+	    var text;
+	    
+	    if (which == "description") {
+		text = "<description type='text'></description>";
+	    }
+	    else if (which == "description") {
+		text = "<instructions type='markdown'></instructions>";
+	    }
+	    else if (which == "steps") {
+		text = "<steps></steps>";
+	    }
+	    var newdoc = $.parseXML(text);
 	    $(xml).find("rspec_tour").append($(newdoc).find(which));
 	}
+
+	return xml;
+    }
+    //
+    // Helper function for instructions/description change handler above.
+    //
+    function ChangeHandlerAux(which)
+    {
+	var text    = $('#profile_' + which).val();
+	var rspec   = $('#profile_rspec_textarea').val();
+	if (rspec === "") {
+	    return;
+	}
+	console.log(text);
+	var xmlDoc = $.parseXML(rspec);
+	var xml    = $(xmlDoc);
+
+	// Add the tour section and the subsection (if needed).
+	xml = AddTourSection(xml);
+	xml = AddTourSubSection(xml, which);
+
 	var sub  = $(tour).find(which);
 	$(sub).text(text);
 
@@ -202,16 +351,15 @@ function ($, sup)
      */
     function ExtractFromRspec(xml)
     {
-	$(xml).find("rspec_tour").each(function() {
-	    $(this).find("description").each(function() {
-		var text = $(this).text();
-		$('#profile_description').val(text);
-	    });
-	    $(this).find("instructions").each(function() {
-		var text = $(this).text();
-		$('#profile_instructions').val(text);
-	    });
+	$(xml).find("rspec_tour > description").each(function() {
+	    var text = $(this).text();
+	    $('#profile_description').val(text);
+	});
+	$(xml).find("rspec_tour > instructions").each(function() {
+	    var text = $(this).text();
+	    $('#profile_instructions').val(text);
 	});
+	InitStepsTable(xml);
     }
 
     //

www/aptui/manage_profile.php

@@ -108,6 +108,11 @@ function SPITFORM($formfields, $errors)
 
     SPITHEADER(1);
 
+    echo "<link rel='stylesheet'
+            href='jquery-ui/css/smoothness/jquery-ui-1.10.4.custom.min.css'>\n";
+    echo "<link rel='stylesheet'
+            href='jquery.appendGrid/css/jquery.appendGrid-1.3.1.min.css'>\n";
+
     echo "<div class='row'>
            <div class='col-lg-8  col-lg-offset-2
                        col-md-10 col-md-offset-1
@@ -276,6 +281,12 @@ function SPITFORM($formfields, $errors)
 	       "Briefly describe how to use this profile after it starts. ".
 	       "Double click to see it rendered.");
 
+    echo "<div class='row'>\n";
+    $format_label("profile_steps", "Steps");
+    echo "<div class='col-sm-10'>\n";
+    echo "<table id='profile_steps' class='col-sm-12'></table>\n";
+    echo "</div></div>\n";
+
     $formatter("profile_listed", "Listed?",
 	       "<div class='checkbox'>
                 <label><input name=\"formfields[profile_listed]\" ".