From 73b59c5859ab128f61a456699f3c809bbb15558a Mon Sep 17 00:00:00 2001
From: Tom Hughes <tom@compton.nu>
Date: Sat, 13 Oct 2012 18:06:29 +0100
Subject: [PATCH] Use EJS templates for notes

---
 app/assets/javascripts/index/notes.js.erb     | 67 ++++++++-----------
 .../javascripts/templates/notes/new.jst.ejs   | 11 +++
 .../javascripts/templates/notes/show.jst.ejs  | 10 +++
 app/views/notes/_new.html.erb                 | 12 ----
 app/views/site/index.html.erb                 |  2 -
 5 files changed, 50 insertions(+), 52 deletions(-)
 create mode 100644 app/assets/javascripts/templates/notes/new.jst.ejs
 create mode 100644 app/assets/javascripts/templates/notes/show.jst.ejs
 delete mode 100644 app/views/notes/_new.html.erb

diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb
index 674aa9204..0161301e9 100644
--- 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
index 000000000..9ccfab4f7
--- /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
index 000000000..cf5d9010a
--- /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
index 8a34093c3..000000000
--- 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 ab1eaa1dc..39e54c7f6 100644
--- 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>
-- 
2.43.2