Commit 814624d0 authored by Leigh B Stoller's avatar Leigh B Stoller

Hook the steps up properly, no longer a mockup.

parent cc7d2429
......@@ -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);
}
//
......
......@@ -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]\" ".
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment