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

diff --git a/app/assets/javascripts/notes.js.erb b/app/assets/javascripts/notes.js.erb
index 72b7b2118..63047b3c9 100644
--- a/app/assets/javascripts/notes.js.erb
+++ b/app/assets/javascripts/notes.js.erb
@@ -1,157 +1,227 @@
-function addNoteLayer(map, notesUrl, newNoteControls, minZoom) {
-  var newNotes;
+$(document).ready(function () {
+  var params = OSM.mapParams();
 
-  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")
-    layer.removeFeatures(newNotes, { silent: true });
-  };
-
-  var restoreNewNotes = function (o) {
-    var layer = o.object;
-    layer.addFeatures(newNotes);
-    newNotes = undefined;
-  };
-
-  var noteSelected = function (o) {
-    var feature = o.feature;
-    var location = feature.geometry.getBounds().getCenterLonLat();
-
-    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) }
-    );
-
-    map.addPopup(feature.popup);
-    // feature.popup.show();
-  };
-
-  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.noteLayer = addNoteLayer(map, $("#show_notes").attr("href"), $("#createnoteanchor"), $("#new-note"), 11);
 
-    layer.addFeatures(feature);
-    map.noteSelector.unselectAll();
-    map.noteSelector.select(feature);
-    map.noteMover.activate();
+  $("#show_notes").click(function () {
     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' %>"
+  });
+
+  if (params.notes) {
+    map.noteLayer.setVisibility(true);
+  }
+
+  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>";
+      });
+
+      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, 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();
           }
-        }),
-        new OpenLayers.Rule({
-          filter: new OpenLayers.Filter.Comparison({
-            type: OpenLayers.Filter.Comparison.EQUAL_TO,
-            property: "status",
-            value: "open"
+        });
+
+        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) {
+      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"
+      });
+
+      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' %>"
+            }
           }),
-          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"
+          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' %>"
+            }
           }),
-          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
-    })
-  });
+          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.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.addLayer(map.noteLayer);
 
-  map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, {
-    autoActivate: true
-  });
+    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.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);
+    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;
+  }
+});