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

diff --git a/app/assets/javascripts/notes.js.erb b/app/assets/javascripts/notes.js.erb
index 36eabeaee..c55c11ec9 100644
--- a/app/assets/javascripts/notes.js.erb
+++ b/app/assets/javascripts/notes.js.erb
@@ -1,156 +1,213 @@
-function addNoteLayer(map, notesUrl, newNoteControls, minZoom) {
-    var newNotes;
-
-    var noteCallback = function (scope, response) {
-        for (var f = 0; f < response.features.length; f++) {
-            var feature = response.features[f];
-        }
-    };
+function addNoteLayer(map, notesUrl, newNoteControls, newNoteForm, minZoom) {
+  var newNotes;
+
+  var saveNewNotes = function (o) {
+    var layer = o.object;
+    newNotes = layer.getFeaturesByAttribute("status", "new")
+    layer.removeFeatures(newNotes, { silent: true });
+  };
+
+  var restoreNewNotes = function (o) {
+    var layer = o.object;
+    layer.addFeatures(newNotes);
+    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>";
+    });
 
-    var saveNewNotes = function (o) {
-        var layer = o.object;
-        newNotes = layer.getFeaturesByAttribute("status", "new")
-        layer.removeFeatures(newNotes, { silent: true });
+    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;
     };
 
-    var restoreNewNotes = function (o) {
-        var layer = o.object;
-        layer.addFeatures(newNotes);
-        newNotes = undefined;
-    };
+    feature.popup = new OpenLayers.Popup.FramedCloud(
+      feature.attributes.id, location, null, content, null, close,
+      function (e) { map.noteSelector.unselect(feature) }
+    );
 
-    var noteSelected = function (o) {
-        var feature = o.feature;
-        var location = feature.geometry.getBounds().getCenterLonLat();
+    map.addPopup(feature.popup);
+    // feature.popup.show();
 
-        feature.popup = new OpenLayers.Popup.FramedCloud(
-            feature.attributes.id, location, null,
-            "<p>" + feature.attributes.id + "</p>",
-            null, 
-            feature.attributes.status !== "new",
-            function (e) { map.noteSelector.unselect(feature) }
-        );
+    $(feature.popup.contentDiv).find("textarea").autoGrow();
 
-        map.addPopup(feature.popup);
-        //    feature.popup.show();
-    };
+    $(feature.popup.contentDiv).find("input#note-submit").click(function (e) {
+      var location = unproj(feature.geometry.getBounds().getCenterLonLat());
+      var form = $(e.target).parents("form").first();
 
-    var noteUnselected = function (o) {
-        var feature = o.feature;
+      $.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);
 
-        map.removePopup(feature.popup);
+          feature.attributes.status = "open";
+          feature.attributes.id = data;
 
-        delete feature.popup;
-    };
+          map.noteLayer.drawFeature(feature);
 
-    var allowNoteReports = function () { 
-        if (map.getZoom() > minZoom) {
-            newNoteControls.show();
-        } else {
-            newNoteControls.hide();
+          map.noteMover.deactivate();
         }
-    };
+      });
 
-    var addNote = function () {
-        var lonlat = map.getCenter();
-        var layer = map.noteLayer;
-        var geometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
-        var feature = new OpenLayers.Feature.Vector(geometry, {
-            status: "new"
-        });
-
-        layer.addFeatures(feature);
-        map.noteSelector.unselectAll();
-        map.noteSelector.select(feature);
-        map.noteMover.activate();
-        map.noteLayer.setVisibility(true);
-    };
-
-    map.noteLayer = new OpenLayers.Layer.Vector("Notes", {
-        visibility: false,
-        projection: new OpenLayers.Projection("EPSG:4326"),
-        styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
-            graphicWidth: 22,
-            graphicHeight: 22,
-            graphicOpacity: 0.7,
-            graphicXOffset: -11,
-            graphicYOffset: -11
-        }, {
-            rules: [
-                new OpenLayers.Rule({
-                    filter: new OpenLayers.Filter.Comparison({
-                        type: OpenLayers.Filter.Comparison.EQUAL_TO,
-                        property: "status",
-                        value: "new"
-                    }),
-                    symbolizer: {
-                        externalGraphic: "<%= image_path 'new_note_marker.png' %>"
-                    }
-                }),
-                new OpenLayers.Rule({
-                    filter: new OpenLayers.Filter.Comparison({
-                        type: OpenLayers.Filter.Comparison.EQUAL_TO,
-                        property: "status",
-                        value: "open"
-                    }),
-                    symbolizer: {
-                        externalGraphic: "<%= image_path 'open_note_marker.png' %>"
-                    }
-                }),
-                new OpenLayers.Rule({
-                    filter: new OpenLayers.Filter.Comparison({
-                        type: OpenLayers.Filter.Comparison.EQUAL_TO,
-                        property: "status",
-                        value: "closed"
-                    }),
-                    symbolizer: {
-                        externalGraphic: "<%= image_path 'closed_note_marker.png' %>"
-                    }
-                })
-            ]
-        })),
-        strategies: [
-            new OpenLayers.Strategy.BBOX()
-        ],
-        protocol: new OpenLayers.Protocol.HTTP({
-            url: notesUrl,
-            format: new OpenLayers.Format.GeoJSON(),
-            callback: noteCallback
-        })
+      e.preventDefault();
     });
 
-    map.noteLayer.events.register("beforefeaturesremoved", map, saveNewNotes);
-    map.noteLayer.events.register("featuresremoved", map, restoreNewNotes);
-    map.noteLayer.events.register("featureselected", map, noteSelected);
-    map.noteLayer.events.register("featureunselected", map, noteUnselected);
+    $(feature.popup.contentDiv).find("input#note-cancel").click(function (e) {
+      feature.attributes.status = "cancelled";
 
-    map.addLayer(map.noteLayer);
+      map.noteSelector.unselect(feature);
+      map.noteLayer.removeFeatures(feature);
 
-    map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, {
-        autoActivate: true
+      feature.destroy();
+
+      map.noteMover.deactivate();
+
+      e.preventDefault();
     });
 
-    map.addControl(map.noteSelector);
+    feature.popup.updateSize();
+  };
 
-    map.noteMover = new OpenLayers.Control.DragFeature(map.noteLayer, {
-        onDrag: function (feature, pixel) {
-            feature.popup.lonlat = feature.geometry.getBounds().getCenterLonLat();
-            feature.popup.updatePosition();
-        },
-        featureCallbacks: {
-            over: function (feature) {
-                if (feature.attributes.status === "new") {
-                    map.noteMover.overFeature.apply(map.noteMover, [feature]);
-                }
-            }
-        }
+  var noteUnselected = function (o) {
+    var feature = o.feature;
+
+    map.removePopup(feature.popup);
+
+    delete feature.popup;
+  };
+
+  var allowNoteReports = function () { 
+    if (map.getZoom() > minZoom) {
+      newNoteControls.show();
+    } else {
+      newNoteControls.hide();
+    }
+  };
+
+  var addNote = function () {
+    var lonlat = map.getCenter();
+    var layer = map.noteLayer;
+    var geometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
+    var feature = new OpenLayers.Feature.Vector(geometry, {
+      status: "new"
     });
 
-    map.addControl(map.noteMover);
+    layer.addFeatures(feature);
+    map.noteSelector.unselectAll();
+    map.noteSelector.select(feature);
+    map.noteMover.activate();
+    map.noteLayer.setVisibility(true);
+  };
+
+  map.noteLayer = new OpenLayers.Layer.Vector("Notes", {
+    visibility: false,
+    displayInLayerSwitcher: false,
+    projection: new OpenLayers.Projection("EPSG:4326"),
+    styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
+      graphicWidth: 22,
+      graphicHeight: 22,
+      graphicOpacity: 0.7,
+      graphicXOffset: -11,
+      graphicYOffset: -11
+    }, {
+      rules: [
+        new OpenLayers.Rule({
+          filter: new OpenLayers.Filter.Comparison({
+            type: OpenLayers.Filter.Comparison.EQUAL_TO,
+            property: "status",
+            value: "new"
+          }),
+          symbolizer: {
+            externalGraphic: "<%= image_path 'new_note_marker.png' %>"
+          }
+        }),
+        new OpenLayers.Rule({
+          filter: new OpenLayers.Filter.Comparison({
+            type: OpenLayers.Filter.Comparison.EQUAL_TO,
+            property: "status",
+            value: "open"
+          }),
+          symbolizer: {
+            externalGraphic: "<%= image_path 'open_note_marker.png' %>"
+          }
+        }),
+        new OpenLayers.Rule({
+          filter: new OpenLayers.Filter.Comparison({
+            type: OpenLayers.Filter.Comparison.EQUAL_TO,
+            property: "status",
+            value: "closed"
+          }),
+          symbolizer: {
+            externalGraphic: "<%= image_path 'closed_note_marker.png' %>"
+          }
+        })
+      ]
+    })),
+    strategies: [
+      new OpenLayers.Strategy.BBOX()
+    ],
+    protocol: new OpenLayers.Protocol.HTTP({
+      url: notesUrl,
+      format: new OpenLayers.Format.GeoJSON()
+    })
+  });
+
+  map.noteLayer.events.register("beforefeaturesremoved", map, saveNewNotes);
+  map.noteLayer.events.register("featuresremoved", map, restoreNewNotes);
+  map.noteLayer.events.register("featureselected", map, noteSelected);
+  map.noteLayer.events.register("featureunselected", map, noteUnselected);
+
+  map.addLayer(map.noteLayer);
+
+  map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, {
+    autoActivate: true
+  });
+
+  map.addControl(map.noteSelector);
+
+  map.noteMover = new OpenLayers.Control.DragFeature(map.noteLayer, {
+    onDrag: function (feature, pixel) {
+      feature.popup.lonlat = feature.geometry.getBounds().getCenterLonLat();
+      feature.popup.updatePosition();
+    },
+    featureCallbacks: {
+      over: function (feature) {
+        if (feature.attributes.status === "new") {
+          map.noteMover.overFeature.apply(map.noteMover, [feature]);
+        }
+      }
+    }
+  });
+
+  map.addControl(map.noteMover);
 
-    newNoteControls.click(addNote);
+  newNoteControls.click(addNote);
 
-    map.events.register("zoomend", map, allowNoteReports);
+  map.events.register("zoomend", map, allowNoteReports);
 
-    return map.noteLayer;
+  return map.noteLayer;
 }