Edits

config.json

@@ -6,6 +6,7 @@
   },
   "map": {
     "preview_attribute": "organization_name",
+    "new_point_address_attribute": "address",
     "center":[42.3725, -71.1266],
     "zoom":13,
     "maxZoom":16,
@@ -62,5 +63,48 @@
     "hostname": "auto",
     "detail_enabled": true
   },
-  "geojson_source": "data.geojson"
+  "geojson_source": "data.geojson",
+  "edit_mode": true,
+  "new_feature_popup_label": "Add service provider named...",
+  "feature_property_json_schema": {
+    "title": "Organization",
+    "type": "object",
+    "id": "properties",
+    "properties": {
+      "organization_name": { "title": "Name", "type": "string" },
+      "address": { "title": "Address", "type": "string", "format": "textarea" },
+      "city": { "title": "City", "type": "string" },
+      "web_url": { "title": "Web URL", "type": "string", "format": "url" },
+      "phone_numbers": {
+        "title": "Phone numbers",
+        "type": "array", "format": "table", "items": { "type": "string" }
+      },
+      "contact_emails": {
+        "title": "Email addresses",
+        "type": "array", "format": "table", "items": { "type": "string" }
+      },
+      "contact_names": {
+        "title": "Contact names",
+        "type": "array", "format": "table", "items": { "type": "string" }
+      },
+      "target_populations": {
+        "title": "Target Populations",
+        "type": "array", "format": "table", "items": { "type": "string" }
+      },
+      "youth_category": {
+        "title": "Youth category",
+        "type": "array", "format": "table", "items": { "type": "string" }
+      },
+      "service_class_level_1": {
+        "title": "Service class lvl 1",
+        "type": "array", "format": "table", "items": { "type": "string" }
+      },
+      "service_class_level_2": {
+        "title": "Service class lvl 2",
+        "type": "array", "format": "table", "items": { "type": "string" }
+      },
+      "age_range": { "title": "Age Range", "type": "string" },
+      "additional_notes": { "title": "Further Notes", "type": "string" }
+    }
+  }
 }

index.html

@@ -31,8 +31,13 @@
         <div class="collapse navbar-collapse" id="finda-navbar-collapse">
           <ul class="nav navbar-nav navbar-right">
             <li><a href="#" data-toggle="modal" data-target="#about">About</a></li>
+            <li id="editing-help-link"><a href="#" data-toggle="modal" data-target="#editing-how-to">Help</a></li>
           </ul>
           <form id="search" class="navbar-form dropdown" role="search">
+            <!-- VERY awkward to have export button as part of this form
+                 semantically, but it's a kludge to get quarter-decent display.
+             -->
+            <button id="export" type="submit" class="btn btn-default" title="export">Export Data</button>
             <div class="form-group">
               <input type="text" class="address form-control" placeholder="Enter an address..." title="Data © OpenStreetMap contributors, ODbL 1.0. http://www.openstreetmap.org/copyright">
             </div>
@@ -42,6 +47,7 @@
               <p class="suggested">Suggested results:</p>
               <ul></ul>
             </div>
+            <button id="add-site" type="submit" class="btn btn-default" title="Add Site">Add Site</button>
           </form>
         </div><!-- /.navbar-collapse -->
       </div><!-- /.container-fluid -->
@@ -54,6 +60,9 @@
       <div id="info" class="control">
         <button type="button" class="close">&times;</button>
       </div>
+      <div id="infoedits" class="control">
+        <button type="button" class="close">&times;</button>
+      </div>
     </div>
 
     <div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="aboutLabel" aria-hidden="true">
@@ -79,6 +88,39 @@ <h4>About Code for Boston</h4>
       </div>
     </div>
 
+    <div class="modal fade" id="editing-how-to" tabindex="-1" role="dialog" aria-labelledby="editing-how-to-label" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+            <h4 class="modal-title" id="editing-how-to-label">How to edit</h4>
+          </div>
+          <div class="modal-body">
+            <h4>How to edit</h4>
+            <p>
+              Finda is currently running in "edit mode", which allows you
+              to produce a changed copy of the map.  If you hit "export data",
+              this copy will appear in a separate browser window, from where
+              you can save it (via browser "Save as"), and move it where you
+              like.
+            </p>
+            <p>To make changes to the copy in your browser:</p>
+            <ul>
+              <li>Selecting a site lets you change its properties,
+                in the property-edit pane that appears on the left of the map.
+              </li>
+              <li>To add a new site, double-click on the map.</li>
+              <li>To delete a site, select it and hit the "delete"
+                button.  It isn't actually gone until you export (though
+                the map marker turns ghostly), and can be restored by
+                selecting it again, and hitting the button now marked
+                "restore".</li>
+              <li>To export the altered data, once again, push the "Export
+                Data" button</li>
+            </ul>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     <div class="modal" id="loading" tabindex="-1" role="dialog" aria-hidden="true">
       <div class="modal-dialog modal-sm">
         <div class="modal-content">
@@ -88,6 +130,18 @@ <h4></h4>
         </div>
       </div>
     </div>
+
+    <div id="new-feature-popup" class="hidden">
+      <form class="create-feature-popup-form">
+        <div class="form-group">
+          <label id="new-feature-popup-label">Creating new item named...</label>
+          <input name="new_feature_name"
+                 type="text" class="form-control input-sm"/>
+          <button type="submit" class="btn btn-xs">Create</button>
+        </div>
+      </form>
+    </div>
+
     <!--[if lt IE 9]>
     <script src="lib/es5-shim.min.js"></script>
     <script src="lib/es5-sham.min.js"></script>

karma.conf.js

@@ -17,6 +17,7 @@ module.exports = function(config) {
       'lib/es5-shim.min.js',
       'lib/es5-sham.min.js',
       'lib/jquery-1.11.1.min.js',
+      'lib/jsoneditor.min.js',
 
       'test/lib/jasmine-jquery.js',
       'test/lib/jasmine-flight.js',

readme.edit_mode

@@ -0,0 +1,103 @@
+How to configure edit mode:
+
+  Editing mode is controlled by several entries in config.json.
+
+  First off is "edit_mode".  If this isn't set to "true", then
+  all edit-related features are erased.
+
+  If "edit_mode" is set, then there are a couple of other config
+  entries that probably ought to be customized:
+
+    new_feature_popup_label is the prompt that the user will see
+      when creating a new feature, by double-clicking on the map.
+
+    feature_property_json_schema is the JSON schema describing
+      the properties of each feature, the data types, and display.
+      For more on what this ought to be like, see the documentation
+      for the JSON editor, which is what actually manages the 'info'
+      pane in edit mode:
+
+        https://github.com/jdorn/json-editor
+
+      and the official JSON schema spec:
+
+        http://json-schema.org/
+
+Innards -- Expected protocol:
+
+  A flight component can either listen for incremental changes to
+  data items, or wait for the edit state to pump out an 'reindex'
+  event.  The latter is for things that need to rebuild the world,
+  and we may want to put some hysteresis on it.  (Current components
+  that do that, for the moment: the fuse index for data/typeahead,
+  and the facets data component.)
+
+  If you're listening for incremental changes, you need to listen
+  for all of 'em.  So, map should be listening for selectedFeatureMoved
+  as well as sending it, lest something else start sending it as well
+  (in which case, it'll need to move the icon -- plausible case:
+  changes to address moving the icon as well).
+
+  Incremental changes:
+
+     selectFeature
+     deselectFeature
+
+     selectedFeatureMoved [carries an array of properties, as a GeoJSON
+                           lng, lat coordinate pair]
+     selectedFeaturePropsChanged [carries new props; 
+                                  those not mentioned to be left alone]
+
+     selectedFeatureDeleted [sets a flag; actual cull happens at export]
+     selectedFeatureUndeleted [clears the flag]
+
+     newFeature [carries a latlng *and* properties]
+
+  Additionally, there may be components (most notably, the typeahead
+  search engine with its Fuse index) which want to completely rebuild
+  periodically based on changed data.  We don't necessarily want to be
+  running these large computations on every one of a quick succession
+  of changes, only to immediately toss the result.  So, the edit-state
+  manager will send out a 'reindex' event, with a full copy of new data,
+  ten seconds after a series of local change events stops.
+
+TODO:
+
+ +) decide what we're doing about list features.  Set '"list": true' in
+    config for 'em to get off the dime.
+
+ For next three: jdorn/json-editor
+
+ +) alternative infotemplates that render form inputs,
+    with '"data-property": "foo"'
+
+ +) code to scrape property values *out* of the form inputs
+
+ +) code to add and remove list items from list-valued props
+
+ +) glue code to send and process changedProperty events
+
+ +) newFeature event support
+    +) double click sets preliminary marker, and pops up a form asking
+       for a value for the preview_attribute.
+    +) cancel on that form is a no-op; prelim marker goes away.
+       may need startCreate/cancelCreate events to mediate this
+    +) submit sends a newFeature event
+
+ +) delete event support
+    +) editState sets flag on item, and culls from export
+    +) map turns opacity on icon to 50%
+    +) "delete/undelete" button on above forms to show status & trigger changes
+
+ +) Edit help text and display, similar to current "About"
+
+ +) glue code to send the editedData events from edit_state, and
+    have typeahead.js update the FUSE index.
+
+ *) Undo mechanism:
+    items have an undo state which can be null or "revert properties"
+    for pre-exisiting items, edit_state caches properties at first
+      change
+
+ *) UI for filtering to only edited items, for quick review of current
+    change set.  Could possibly use undo-state info.