VersionOne API: Barebones Editor Step 5: Putting it all together: The Barebones Editor! (Blog Version)

Puts everything together with the complete Barebones Story Editor. Uses HTML, jQuery, and the VersionOne Data API to load and save changes to a story asset.

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>

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;
}

JavaScript

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;
}