Use EJS templates for notes

diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb
index 674aa92040ab6eeb790acd26a7c896e736cc9504..0161301e9e3521218f926acaf30c47ba3ac0d18f 100644 (file)
--- a/app/assets/javascripts/index/notes.js.erb
+++ b/app/assets/javascripts/index/notes.js.erb
@@ -1,3 +1,6 @@
+//= require templates/notes/show
+//= require templates/notes/new
+
 $(document).ready(function () {
   var params = OSM.mapParams();
   var newNotes;
@@ -14,36 +17,35 @@ $(document).ready(function () {
     newNotes = undefined;
   }
 
-  function describeNote(n) {
-    var description = "<h2>Note " + n.id + "</h2>";
-
-    n.comments.forEach(function (c) {
-      description += "<p><small class='deemphasize'>" + c.action + " by ";
-      description += c.user + " at " + c.date + "</small><br/>" + c.text + "</p>";
-    });
-
-    return description;
-  }
-
   function noteSelected(o) {
     var feature = o.feature;
     var location = feature.geometry.getBounds().getCenterLonLat();
     var content;
-    var close;
+    var onClose;
 
     if (feature.attributes.status === "new") {
-      var form = $("#new-note").clone();
-      form.removeClass("hidden");
-      content = form.html();
-      close = false;
+      content = JST["templates/notes/new"]();
+
+      onClose = function (e) {
+        feature.attributes.status = "cancelled";
+
+        map.noteSelector.unselect(feature);
+        map.noteLayer.removeFeatures(feature);
+
+        feature.destroy();
+
+        map.noteMover.deactivate();
+      };
     } else {
-      content = describeNote(feature.attributes);
-      close = true;
+      content = JST["templates/notes/show"]({ note: feature.attributes });
+
+      onClose = function (e) {
+        map.noteSelector.unselect(feature)
+      };
     };
 
     feature.popup = new OpenLayers.Popup.FramedCloud(
-      feature.attributes.id, location, null, content, null, close,
-      function (e) { map.noteSelector.unselect(feature) }
+      feature.attributes.id, location, null, content, null, true, onClose
     );
 
     map.addPopup(feature.popup);
@@ -51,16 +53,18 @@ $(document).ready(function () {
 
     $(feature.popup.contentDiv).find("textarea").autoGrow();
 
-    $(feature.popup.contentDiv).find("input#note-submit").click(function (e) {
+    $(feature.popup.contentDiv).find("input#note-add").click(function (e) {
       var location = unproj(feature.geometry.getBounds().getCenterLonLat());
-      var form = $(e.target).parents("form").first();
+      var form = e.target.form;
+
+      e.preventDefault();
 
-      $.ajax(form.prop("action"), {
-        type: form.prop("method"),
+      $.ajax($("#createnoteanchor").attr("href"), {
+        type: "POST",
         data: {
           lon: location.lon,
           lat: location.lat,
-          text: form.find("textarea#comment").val()
+          text: $(form.comment).val()
         },
         success: function (data) {
           map.noteSelector.unselect(feature);
@@ -77,19 +81,6 @@ $(document).ready(function () {
       e.preventDefault();
     });
 
-    $(feature.popup.contentDiv).find("input#note-cancel").click(function (e) {
-      feature.attributes.status = "cancelled";
-
-      map.noteSelector.unselect(feature);
-      map.noteLayer.removeFeatures(feature);
-
-      feature.destroy();
-
-      map.noteMover.deactivate();
-
-      e.preventDefault();
-    });
-
     feature.popup.updateSize();
   }
 

diff --git a/app/assets/javascripts/templates/notes/new.jst.ejs b/app/assets/javascripts/templates/notes/new.jst.ejs
new file mode 100644 (file)
index 0000000..9ccfab4
--- /dev/null
+++ b/app/assets/javascripts/templates/notes/new.jst.ejs
@@ -0,0 +1,11 @@
+<p>
+  Move the marker to the correct position and<br/>
+  describe the problem in the box below:
+</p>
+<form action="#">
+  <input type="hidden" name="lon">
+  <input type="hidden" name="lat">
+  <textarea name="comment" cols="40" rows="10"></textarea>
+  <br/>
+  <input type="submit" name="add" value="Add Note" id="note-add">
+</form>

diff --git a/app/assets/javascripts/templates/notes/show.jst.ejs b/app/assets/javascripts/templates/notes/show.jst.ejs
new file mode 100644 (file)
index 0000000..cf5d901
--- /dev/null
+++ b/app/assets/javascripts/templates/notes/show.jst.ejs
@@ -0,0 +1,10 @@
+<h2>Note <%- note.id %></h2>
+<% note.comments.forEach(function (comment) { %>
+<p>
+  <small class="deemphasize">
+    <%- comment.action %> by <%- comment.user %> at <%- comment.date %>
+  </small>
+  <br/>
+  <%- comment.text %>
+</p>
+<% }) %>

diff --git a/app/views/notes/_new.html.erb b/app/views/notes/_new.html.erb
deleted file mode 100644 (file)
index 8a34093..0000000
--- a/app/views/notes/_new.html.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<p>
-  Move the marker to the correct position and<br/>
-  describe the problem in the box below:
-</p>
-<%= form_tag notes_path do %>
-  <%= hidden_field_tag "lon" %>
-  <%= hidden_field_tag "lat" %>
-  <%= text_area_tag "comment", "", :cols => 40, :rows => 10 %>
-  <br/>
-  <%= submit_tag "Submit", :id => "note-submit" %>
-  <%= submit_tag "Cancel", :id => "note-cancel" %>
-<% end %>

diff --git a/app/views/site/index.html.erb b/app/views/site/index.html.erb
index ab1eaa1dc48833cee1625d00ca8eaa0db54c2004..39e54c7f6c13e8fcd5589b2489a905cd10900d18 100644 (file)
--- a/app/views/site/index.html.erb
+++ b/app/views/site/index.html.erb
@@ -51,5 +51,3 @@
     </tr>
   </table>
 </div>
-
-<div id="new-note" class="hidden"><%= render :partial => "notes/new" %></div>