X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/74543b630eaff87f9c7013a933927fa8785e6497..0b981e4b7fd1aa85ac635fdb6d2cb58d9a2fd81d:/app/assets/javascripts/notes.js.erb

diff --git a/app/assets/javascripts/notes.js.erb b/app/assets/javascripts/notes.js.erb
index 72b7b2118..c55c11ec9 100644
--- a/app/assets/javascripts/notes.js.erb
+++ b/app/assets/javascripts/notes.js.erb
@@ -1,12 +1,6 @@
-function addNoteLayer(map, notesUrl, newNoteControls, minZoom) {
+function addNoteLayer(map, notesUrl, newNoteControls, newNoteForm, minZoom) {
   var newNotes;
 
-  var noteCallback = function (scope, response) {
-    for (var f = 0; f < response.features.length; f++) {
-      var feature = response.features[f];
-    }
-  };
-
   var saveNewNotes = function (o) {
     var layer = o.object;
     newNotes = layer.getFeaturesByAttribute("status", "new")
@@ -19,20 +13,83 @@ function addNoteLayer(map, notesUrl, newNoteControls, minZoom) {
     newNotes = undefined;
   };
 
+  var describeNote = function (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;
+  }
+
   var noteSelected = function (o) {
     var feature = o.feature;
     var location = feature.geometry.getBounds().getCenterLonLat();
+    var content;
+    var close;
+
+    if (feature.attributes.status === "new") {
+      var form = newNoteForm.clone();
+      form.removeClass("hidden");
+      content = form.html();
+      close = false;
+    } else {
+      content = describeNote(feature.attributes);
+      close = true;
+    };
 
     feature.popup = new OpenLayers.Popup.FramedCloud(
-      feature.attributes.id, location, null,
-      "<p>" + feature.attributes.id + "</p>",
-      null, 
-      feature.attributes.status !== "new",
+      feature.attributes.id, location, null, content, null, close,
       function (e) { map.noteSelector.unselect(feature) }
     );
 
     map.addPopup(feature.popup);
     // feature.popup.show();
+
+    $(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();
+        }
+      });
+
+      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();
   };
 
   var noteUnselected = function (o) {
@@ -115,8 +172,7 @@ function addNoteLayer(map, notesUrl, newNoteControls, minZoom) {
     ],
     protocol: new OpenLayers.Protocol.HTTP({
       url: notesUrl,
-      format: new OpenLayers.Format.GeoJSON(),
-      callback: noteCallback
+      format: new OpenLayers.Format.GeoJSON()
     })
   });