Switch to out of band description to new rspec_tour section

of the rspec.

apt/APT_Profile.pm.in

@@ -194,7 +194,6 @@ sub Create($$$$$)
     }
     
     my $uuid  = NewUUID();
-    my $desc  = DBQuoteSpecial($argref->{'description'});
     my $rspec = DBQuoteSpecial($argref->{'rspec'});
 
 
@@ -205,7 +204,8 @@ sub Create($$$$$)
     $query .= ",uuid='$uuid'";
     $query .= ",pid='$pid',pid_idx='$pid_idx'";
     $query .= ",creator='$uid',creator_idx='$uid_idx'";
-    $query .= ",description=$desc";
+    # This is temporary until all rspecs using tour format.
+    $query .= ",description=''";
     $query .= ",rspec=$rspec";
     $query .= ",public=1"
 	if (exists($argref->{'public'}) && $argref->{'public'});

www/aptui/js/common.js

@@ -13,6 +13,7 @@ window.APT_OPTIONS.config = function ()
 	    'filestyle': 'js/lib/filestyle',
 	    'tablesorter': 'js/lib/jquery.tablesorter.min',
 	    'tablesorterwidgets': 'js/lib/jquery.tablesorter.widgets.min',
+	    'marked': 'js/lib/marked',
 	},
 	shim: {
 	    'bootstrap': { deps: ['jquery'] },
@@ -22,6 +23,7 @@ window.APT_OPTIONS.config = function ()
 	    'filestyle': { deps: ['bootstrap']},
 	    'tablesorter': { deps: ['jquery'] },
 	    'tablesorterwidgets': { deps: ['tablesorter'] },
+	    'marked' : { exports: 'marked' },
 	},
     });
 }

www/aptui/js/manage_profile.js

@@ -6,24 +6,43 @@ require(['jquery', 'js/quickvm_sup',
 function ($, sup)
 {
     'use strict';
+    var editing = 0;
 
     function initialize()
     {
 	window.APT_OPTIONS.initialize(sup);
-	try {
-	    $('#rspecfile').change(function() {
+	editing = window.EDITING;
+	
+	// This activates the popover subsystem.
+	$('[data-toggle="popover"]').popover({
+	    trigger: 'hover',
+	    container: 'body'
+	});
+	$('body').show();
+
+	$('#rspecfile').change(function() {
 		var reader = new FileReader();
 		reader.onload = function(event) {
 		    var content = event.target.result;
+		    var xmlDoc  = $.parseXML(content);
+		    var xml     = $(xmlDoc);
+
+		    // Allow editing the boxes now that we have an rspec.
+		    $('#profile_instructions').prop("disabled", false);
+		    $('#profile_description').prop("disabled", false);
+
+		    // Show the hidden buttons (in new profile mode)
+		    $('#showtopo_modal_button').removeClass("invisible");
+		    $('#show_rspec_textarea_button').removeClass("invisible");
+
+		    // Stick html into the textarea
+		    $('#profile_rspec_textarea').val(content);
 
-		    ShowRspecContent(content);
+		    ExtractFromRspec(xml);
+		    //ShowRspecTopo(xml);
 		};
 		reader.readAsText(this.files[0]);
-	    });
-	}
-	catch (e) {
-	    alert(e);
-	}
+	});
 
 	$.fn.animateBackgroundHighlight = function(highlightColor, duration) {
 	    var highlightBg = highlightColor || "#FFFF9C";
@@ -35,7 +54,10 @@ function ($, sup)
 	$('#showtopo_modal_button').click(function (event) {
 	    event.preventDefault();
 	    // The rspec is taken from the text area.
-	    ShowRspecContent($('#profile_rspec_textarea').val());
+	    var xmlDoc  = $.parseXML($('#profile_rspec_textarea').val());
+	    var xml     = $(xmlDoc);
+	    
+	    ShowRspecTopo(xml);
 	});
 	$('#expand_rspec_modal_button').click(function (event) {
 	    $('#modal_profile_rspec_textarea').val(
@@ -53,6 +75,7 @@ function ($, sup)
 	    $('#profile_rspec_textarea').css({"opacity":"0.2"});
 	    $('#profile_rspec_textarea').animate({"opacity":"1.0"}, 1500);
 	});
+	if (0) {
 	// Enable the Modify button if the form changes.
         $('#quickvm_create_profile_form :input').each(function() {
 	    // Need to use keyup since an input does not "change"
@@ -65,20 +88,124 @@ function ($, sup)
         $('#quickvm_create_profile_form').change(function() {
 	    $('#profile_submit_button').prop('disabled', false);
 	});
+	}
 	// Auto select the URL if the user clicks in the box.
 	$('#profile_url').click(function() {
 	    $(this).focus();
 	    $(this).select();
 	});
+
+	// Prevent submit if the description is empty.
+	$('#profile_submit_button').click(function (event) {
+	    var description = $('#profile_description').val();
+	    if (description === "") {
+		event.preventDefault();
+		alert("Please provide a description. Its handy!");
+		return false;
+	    }
+	    return true;
+	});
+
+	/*
+	 * If the description/instructions textarea are edited, copy
+	 * the text back into the rspec since that is what actually
+	 * gets submitted; the rspec is authoritative.
+	 */
+	$('#profile_instructions').change(function() {
+	    ChangeHandlerAux("instructions");
+	});
+	$('#profile_description').change(function() {
+	    ChangeHandlerAux("description");
+	});
+
+	/*
+	 * If editing, need to suck the description and instructions
+	 * out of the rspec and put them into the text boxes. But
+	 * watch for some already in the description box, it is an old
+	 * one and we want to use it if no description in the rspec.
+	 */
+	if (editing) {
+	    var old_text = $('#profile_description').val();
+	    if (old_text != "") {
+		ChangeHandlerAux("description");
+	    }
+	    var xmlDoc  = $.parseXML($('#profile_rspec_textarea').val());
+	    var xml     = $(xmlDoc);
+	    ExtractFromRspec(xml);
+	}
+	else {
+	    /*
+	     * Not editing, so disable the text boxes until we get
+	     * an rspec.
+	     */
+	    $('#profile_instructions').prop("disabled", true);
+	    $('#profile_description').prop("disabled", true);
+	}
+    }
+
+    //
+    // 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);
+
+	// See if we need to add the section to top level.
+	var tour = $(xml).find("rspec_tour");
+	if (! tour.length) {
+	    $(xml).find("rspec").prepend($('<rspec_tour xmlns=' +
+                 '"http://www.protogeni.net/resources/rspec/ext/apt-tour/1">' +
+					  '</rspec_tour>'));
+	}
+	var tour = $(xml).find("rspec_tour");
+	// Ditto the subsection.
+	var sub  = $(tour).find(which);
+	if (!sub.length) {
+	    $(xml).find("rspec_tour").append($('<'  + which + ' type="text">' +
+					       '</' + which + '>'));
+	}
+	var sub  = $(tour).find(which);
+	$(sub).text(text);
+
+	console.log(xml);
+	var s = new XMLSerializer();
+	var str = s.serializeToString(xml[0]);
+	console.log(str);
+	$('#profile_rspec_textarea').val(str);
+    }
+
+    /*
+     * We want to look for and pull out the introduction and overview text,
+     * and put them into the text boxes. The user can edit them in the
+     * boxes. More likely, they will not be in the rspec, and we have to
+     * add them to the rspec_tour section.
+     */
+    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);
+	    });
+	});
     }
 
     //
     // Show the rspec text in the modal.
     //
-    function ShowRspecContent(content)
+    function ShowRspecTopo(xml)
     {
-	var xmlDoc = $.parseXML(content);
-	var xml    = $(xmlDoc);
 	var topo   = sup.ConvertManifestToJSON(null, xml);
 	console.info(topo);
 

www/aptui/js/quickvm_sup.js

-define(['jquery', 'd3', 'dateformat'],
+define(['jquery', 'd3', 'dateformat', 'marked'],
 function ($, d3) {
 
 var myuuid = null;
@@ -127,8 +127,24 @@ function ShowTopo(uuid)
 	var xmlDoc = $.parseXML(json.value);
 	var xml    = $(xmlDoc);
 	var topo   = ConvertManifestToJSON(null, xml);
-	console.info(topo);
 
+	console.log(json.value);
+
+	// Deal with the instructions.
+	$(xml).find("rspec_tour").each(function() {
+	    $(this).find("instructions").each(function() {
+		var marked = require('marked');
+		marked.setOptions({"sanitize" : true});
+		
+		var text = $(this).text();
+		console.log(text);
+		// Make the div visible.
+		$('#instructions_panel').removeClass("invisible");
+		// And stick the text in
+		$('#instructions_text').html(marked(text));
+	    });
+	});
+	
 	$("#showtopo_container").removeClass("invisible");
 	// Subtract -2 cause of the border. 
 	maketopmap("#showtopo_statuspage",
@@ -179,10 +195,30 @@ function ShowProfileList(selectedElement)
 	var xmlDoc = $.parseXML(json.value.rspec);
 	var xml    = $(xmlDoc);
 	var topo   = ConvertManifestToJSON(profile, xml);
-	console.info(topo);
     
 	$('#showtopo_title').html("<h3>" + json.value.name + "</h3>");
-	$('#showtopo_description').html(json.value.description);
+
+	/*
+	 * We now use the desciption from inside the rspec, unless there
+	 * is none, in which case look to see if the we got one in the
+	 * rpc reply, which we will until all profiles converted over to
+	 * new format rspecs.
+	 */
+	var description = null;
+	$(xml).find("rspec_tour").each(function() {
+	    $(this).find("description").each(function() {
+		description = $(this).text();
+	    });
+	});
+	if (!description) {
+	    if (json.value.description != "") {
+		description = json.value.description;
+	    }
+	    else {
+		description = "Hmm, no description for this profile";
+	    }
+	}
+	$('#showtopo_description').html(description);
 
 	maketopmap("#showtopo_div",
 		   ($("#showtopo_div").outerWidth()),
@@ -271,11 +307,6 @@ function RegisterAccount(uid, email)
 
 function InitQuickVM(uuid, slice_expires)
 {
-    // This activates the popover subsystem.
-    $('[data-toggle="popover"]').popover({
-	trigger: 'hover',
-	'placement': 'top'
-    });
     // Use an unload event to terminate any shells.
     $(window).bind("unload", function() {
 	console.info("Unload function called");

www/aptui/js/status.js

@@ -10,6 +10,13 @@ function ($, sup)
     function initialize()
     {
 	window.APT_OPTIONS.initialize(sup);
+
+	// This activates the popover subsystem.
+	$('[data-toggle="popover"]').popover({
+	    trigger: 'hover',
+	    'placement': 'top'
+	});
+	
 	sup.InitQuickVM(window.APT_OPTIONS.uuid,
 			window.APT_OPTIONS.sliceExpires);
 	$('button#register-account').click(function (event) {

www/aptui/status.php

@@ -270,6 +270,34 @@ echo "</div>\n";
 echo "</div>\n";
 echo "</div>\n";
 
+#
+# Add a div for the instructions if there are instructions. The client
+# will actually fill in the div though, since it is markdown and that
+# is more easily done on the client side for now.
+#
+$parsed_xml = simplexml_load_string($instance->manifest());
+if ($parsed_xml &&
+    $parsed_xml->rspec_tour && $parsed_xml->rspec_tour->instructions) {
+    
+    echo "<div class='row invisible' id='instructions_panel'>
+          <div class='col-lg-6  col-lg-offset-3
+                      col-md-8  col-md-offset-2
+                      col-sm-8  col-sm-offset-2
+                      col-xs-12 col-xs-offset-0'>\n";
+    echo "<div class='panel panel-default'>\n";
+    echo "<div class='panel-heading'>
+            <a data-toggle='collapse' data-target='#instructions_collapse'
+               href='#'>Usage Instructions</a>
+          </div>\n";
+    echo "<div class='panel-collapse collapse' id='instructions_collapse'>\n";
+    echo "<div class='panel-body' id='instructions_text'>\n";
+    echo "</div>\n"; # panel-body
+    echo "</div>\n"; # collapse
+    echo "</div>\n"; # panel
+    echo "</div>\n"; # cols
+    echo "</div>\n"; # row
+}
+
 #
 # The topo diagram goes inside this div, when it becomes available.
 #