X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/e3d5e3da52ffdf10445f2d9cdcc8c67633f2dd82..e54f9ed6af7ab3475948ab47b45ccdcc283cd49b:/app/assets/javascripts/index/notes.js.erb

diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb
index 674aa9204..8b440910c 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,75 @@ $(document).ready(function () {
     newNotes = undefined;
   }
 
-  function describeNote(n) {
-    var description = "<h2>Note " + n.id + "</h2>";
+  function createNote(feature, form) {
+    var location = unproj(feature.geometry.getBounds().getCenterLonLat());
+
+    $.ajax($("#createnoteanchor").attr("href"), {
+      type: "POST",
+      data: {
+        lon: location.lon,
+        lat: location.lat,
+        text: $(form.text).val()
+      },
+      success: function (data) {
+        map.noteSelector.unselect(feature);
+
+        feature.attributes = data.properties;
 
-    n.comments.forEach(function (c) {
-      description += "<p><small class='deemphasize'>" + c.action + " by ";
-      description += c.user + " at " + c.date + "</small><br/>" + c.text + "</p>";
+        map.noteLayer.drawFeature(feature);
+
+        map.noteMover.deactivate();
+      }
     });
+  }
 
-    return description;
+  function updateNote(feature, form, close) {
+    var url = close ? feature.attributes.close_url : feature.attributes.comment_url;
+
+    $.ajax(url, {
+      type: "POST",
+      data: {
+        text: $(form.text).val()
+      },
+      success: function (data) {
+        map.noteSelector.unselect(feature)
+        
+        feature.attributes = data.properties;
+        
+        map.noteSelector.select(feature)
+      }
+    });
   }
 
   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,43 +93,32 @@ $(document).ready(function () {
 
     $(feature.popup.contentDiv).find("textarea").autoGrow();
 
-    $(feature.popup.contentDiv).find("input#note-submit").click(function (e) {
-      var location = unproj(feature.geometry.getBounds().getCenterLonLat());
-      var form = $(e.target).parents("form").first();
-
-      $.ajax(form.prop("action"), {
-        type: form.prop("method"),
-        data: {
-          lon: location.lon,
-          lat: location.lat,
-          text: form.find("textarea#comment").val()
-        },
-        success: function (data) {
-          map.noteSelector.unselect(feature);
-
-          feature.attributes.status = "open";
-          feature.attributes.id = data;
-
-          map.noteLayer.drawFeature(feature);
-
-          map.noteMover.deactivate();
-        }
-      });
+    $(feature.popup.contentDiv).find("textarea").on("input", function (e) {
+      var form = e.target.form;
 
-      e.preventDefault();
+      if ($(e.target).val() == "") {
+        $(form.close).val(I18n.t("javascripts.notes.show.close"));
+      } else {
+        $(form.close).val(I18n.t("javascripts.notes.show.comment_and_close"));
+      }
     });
 
-    $(feature.popup.contentDiv).find("input#note-cancel").click(function (e) {
-      feature.attributes.status = "cancelled";
+    $(feature.popup.contentDiv).find("input#note-add").click(function (e) {
+      e.preventDefault();
 
-      map.noteSelector.unselect(feature);
-      map.noteLayer.removeFeatures(feature);
+      createNote(feature, e.target.form);
+    });
 
-      feature.destroy();
+    $(feature.popup.contentDiv).find("input#note-comment").click(function (e) {
+      e.preventDefault();
 
-      map.noteMover.deactivate();
+      updateNote(feature, e.target.form, false);
+    });
 
+    $(feature.popup.contentDiv).find("input#note-close").click(function (e) {
       e.preventDefault();
+
+      updateNote(feature, e.target.form, true);
     });
 
     feature.popup.updateSize();