VersionOne API: Barebones Editor Step 5: Putting it all together: The Barebones Editor in CoffeeScript!

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

by JoshGough

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

CoffeeScript

host = "http://eval.versionone.net"
service = host + "/platformtest/rest-1.v1/Data/"
assetPath = "Story/"
select = "?sel=Name,Description,Estimate"
headers =
  Authorization: "Basic " + btoa("admin:admin")
  Accept: "haljson"

$ ->
  storyId = ""
  $("#storyGet").click (e) ->
    storyId = $("#StoryId").val()
    return  if storyId is ""
    url = service + assetPath + storyId + select
    $.ajax(
      url: url
      type: "GET"
      dataType: "json"
      headers: headers
    ).done((data) ->
      bindDtoToForm data
      $("#editor").show()
    ).fail (jqXHR) ->
      alert "Error during get. See console for details."
      console.log "Error:"
      console.log jqXHR.responseText

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

bindDtoToForm = (data) ->
  for key of data
    $("#" + key).val data[key]
    
createDtoFromForm = (selector) ->
  dto = {}
  $(selector).each ->
    item = $(this)
    id = item.attr("id")
    dto[id] = item.val()
  dto