JogoShugh/gist:4685001

## gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
  <title>Barebones Story Editor</title>
</head>

<body>
  <h1>Barebones Story Editor</h1><br>
  <label for="StoryId">Enter a Story ID:</label>

  <form>
    <input id="StoryId" type="text" value="1154">
    <input id="storyGet" type="button" value="Load Story">
    <br/>
    <br/>
  </form>

  <div id="editor">
    <form id="editorForm" name="editorForm">
      <label for="Name">Story Name:</label><br>
      <input id="Name" name="Name" type="text"><br>
      <label for="Name">Description:</label><br>
      <textarea id="Description" name="Description">
</textarea><br>
      <label for="Estimate">Estimate:</label><br>
      <input id="Estimate" name="Estimate" type="text"><br>
    </form>
    <input id="save" type="button" value="Save Story">
  </div>

  <div id="message"></div>
</body>
</html>

## gistfile2.css
body {
  padding: 5px;
  font-family: sans-serif;
}

#editor {
  padding: 10px;
  border: 1px solid #00008B;
  background: #F5F5F5;
  display: none;
}

label {
  color: #00008B;
}

textarea {
  height: 100px;
}

#message {
  margin-top: 5px;
  color: #006400;
}

## gistfile3.js
var url = "http://eval.versionone.net/platformtest/rest-1.v1/Data/Story/";
var select = "?sel=Name,Description,Estimate"
var headers = { Authorization: "Basic " + btoa("admin:admin"), Accept: 'haljson' };

$(function () {
  var storyId = '';
  $("#storyGet").click(function (e) {
    storyId = $('#StoryId').val();
    if (storyId == '') {
      return;
    }
    var storyUrl = url + storyId + select
    $.ajax({
      url: storyUrl,
      type: 'GET',
      dataType: 'json',
      headers: headers
    }).done(function (data) {
      bindDtoToForm(data);
      $("#editor").show();
    }).fail(function (jqXHR) {
      alert('Error during get. See console for details.');
      console.log('Error:');
      console.log(jqXHR.responseText);
    });
  });

  $('#save').click(function () {
    var storyDto = createDtoFromForm("#editorForm input, #editorForm textarea");
    $.ajax({
      url: url + storyId,
      type: 'POST',
      data: JSON.stringify(storyDto),
      dataType: 'json',
      contentType: 'haljson',
      headers: headers
    }).done(function (data) {
      $('#message').text('Save successful! You can load it in VersionOne and see the results of your labor.');
      console.log(data);
    }).fail(function (jqXHR) {
      alert('Error during save. See console for message.');
      console.log('Error on save:');
      console.log(jqXHR.responseText);
    });
  });
});

function bindDtoToForm(data) {
  for (var key in data) {
    $("#" + key).val(data[key]);
  }
}

function createDtoFromForm(selector) {
  var dto = {};
  $(selector).each(function () {
    var item = $(this);
    var id = item.attr('id');
    dto[id] = item.val();
  });
  return dto;
}
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

	<html>
	<head>
	<title>Barebones Story Editor</title>
	</head>

	<body>
	<h1>Barebones Story Editor</h1><br>
	<label for="StoryId">Enter a Story ID:</label>

	<form>
	<input id="StoryId" type="text" value="1154">
	<input id="storyGet" type="button" value="Load Story">
	<br/>
	<br/>
	</form>

	<div id="editor">
	<form id="editorForm" name="editorForm">
	<label for="Name">Story Name:</label><br>
	<input id="Name" name="Name" type="text"><br>
	<label for="Name">Description:</label><br>
	<textarea id="Description" name="Description">
	</textarea><br>
	<label for="Estimate">Estimate:</label><br>
	<input id="Estimate" name="Estimate" type="text"><br>
	</form>
	<input id="save" type="button" value="Save Story">
	</div>

	<div id="message"></div>
	</body>
	</html>
	body {
	padding: 5px;
	font-family: sans-serif;
	}

	#editor {
	padding: 10px;
	border: 1px solid #00008B;
	background: #F5F5F5;
	display: none;
	}

	label {
	color: #00008B;
	}

	textarea {
	height: 100px;
	}

	#message {
	margin-top: 5px;
	color: #006400;
	}
	var url = "http://eval.versionone.net/platformtest/rest-1.v1/Data/Story/";
	var select = "?sel=Name,Description,Estimate"
	var headers = { Authorization: "Basic " + btoa("admin:admin"), Accept: 'haljson' };

	$(function () {
	var storyId = '';
	$("#storyGet").click(function (e) {
	storyId = $('#StoryId').val();
	if (storyId == '') {
	return;
	}
	var storyUrl = url + storyId + select
	$.ajax({
	url: storyUrl,
	type: 'GET',
	dataType: 'json',
	headers: headers
	}).done(function (data) {
	bindDtoToForm(data);
	$("#editor").show();
	}).fail(function (jqXHR) {
	alert('Error during get. See console for details.');
	console.log('Error:');
	console.log(jqXHR.responseText);
	});
	});

	$('#save').click(function () {
	var storyDto = createDtoFromForm("#editorForm input, #editorForm textarea");
	$.ajax({
	url: url + storyId,
	type: 'POST',
	data: JSON.stringify(storyDto),
	dataType: 'json',
	contentType: 'haljson',
	headers: headers
	}).done(function (data) {
	$('#message').text('Save successful! You can load it in VersionOne and see the results of your labor.');
	console.log(data);
	}).fail(function (jqXHR) {
	alert('Error during save. See console for message.');
	console.log('Error on save:');
	console.log(jqXHR.responseText);
	});
	});
	});

	function bindDtoToForm(data) {
	for (var key in data) {
	$("#" + key).val(data[key]);
	}
	}

	function createDtoFromForm(selector) {
	var dto = {};
	$(selector).each(function () {
	var item = $(this);
	var id = item.attr('id');
	dto[id] = item.val();
	});
	return dto;
	}