Merge pull request #101 from hotosm/develop

Update master

app/assets/scripts/actions/actions.js

@@ -11,6 +11,23 @@ module.exports = Reflux.createActions({
 
   'resultsChange': {},
 
+  // Filter actios
+  'setDateFilter': {
+    shouldEmit: function (val) {
+      return [ 'all', 'week', 'month', 'year' ].indexOf(val) >= 0;
+    }
+  },
+  'setResolutionFilter': {
+    shouldEmit: function (val) {
+      return [ 'all', 'low', 'medium', 'high' ].indexOf(val) >= 0;
+    }
+  },
+  'setDataTypeFilter': {
+    shouldEmit: function (val) {
+      return [ 'all', 'service' ].indexOf(val) >= 0;
+    }
+  },
+
   // Results pane related actions.
   'resultItemSelect': {},
   'resultItemView': {},
@@ -29,4 +46,7 @@ module.exports = Reflux.createActions({
   'goToLatest': {},
 
   'geocoderResult': {},
-});
+
+
+  'miniMapClick': {},
+});

app/assets/scripts/components/app.js

@@ -4,13 +4,31 @@ var Router = require('react-router');
 var RouteHandler = Router.RouteHandler;
 var InfoModal = require('./modals/info_modal');
 var WelcomeModal = require('./modals/welcome_modal');
+var MessageModal = require('./modals/message_modal');
 var Header = require('./header');
+var actions = require('../actions/actions');
 
 var App = React.createClass({
+  mixins: [ Router.State ],
 
-  aboutClickHandler: function(e) {
-    e.preventDefault();
-    actions.openModal('about');
+  componentDidMount: function () {
+    // Pull the search filter state from the URL.  Why is this here instead
+    // of in the Filters component?  Because we want to ensure that we set
+    // these filter parameters BEFORE the map component loads, since that is
+    // where the map move action will get fired, triggering the first API load.
+    //
+    // TODO: this is really a stopgap until we integrate the router more
+    // fully.  (See routes.js for more.)
+    var params = this.getQuery();
+    if (params.date) {
+      actions.setDateFilter(params.date);
+    }
+    if (params.resolution) {
+      actions.setResolutionFilter(params.resolution);
+    }
+    if (params.type) {
+      actions.setDataTypeFilter(params.type);
+    }
   },
 
   render: function() {
@@ -22,6 +40,7 @@ var App = React.createClass({
         </main>
         <WelcomeModal />
         <InfoModal />
+        <MessageModal />
       </div>
     );
   }

app/assets/scripts/components/filters.js

@@ -0,0 +1,97 @@
+'use strict';
+var React = require('react/addons');
+var Reflux = require('reflux');
+var Router = require('react-router');
+var Dropdown = require('./shared/dropdown');
+var actions = require('../actions/actions');
+var searchQuery = require('../stores/search_query_store');
+
+var Filters = module.exports = React.createClass({
+  mixins: [
+    Reflux.listenTo(searchQuery, 'onSearchQuery'),
+    Router.Navigation,
+    Router.State
+  ],
+
+  getInitialState: function () {
+    return {
+      date: 'all',
+      resolution: 'all',
+      dataType: 'all'
+    }
+  },
+
+  onSearchQuery: function (data) {
+    this.setState(data);
+  },
+
+  setDate: function (d) {
+    actions.setDateFilter(d.key);
+    this._updateUrl('date', d.key);
+  },
+
+  setResolution: function (d) {
+    actions.setResolutionFilter(d.key);
+    this._updateUrl('resolution', d.key)
+  },
+
+  setDataType: function (d) {
+    actions.setDataTypeFilter(d.key);
+    this._updateUrl('type', d.key);
+  },
+
+  _updateUrl: function (prop, value) {
+    var query = this.getQuery();
+    if (value === 'all') {
+      delete query[prop]
+    } else {
+      query[prop] = value;
+    }
+    var routes = this.getRoutes();
+    this.replaceWith(routes[routes.length - 1].name, this.getParams(), query);
+  },
+
+
+  render: function() {
+    function filterItem (property, clickHandler, d) {
+      var klass = this.state[property] === d.key ? 'active' : '';
+      var click = clickHandler.bind(this, d);
+      return (
+        <dd key={property + '-filter-' + d.key} className={klass}>
+          <a onClick={click} title={d.title}>{d.title}</a>
+        </dd>);
+    }
+
+    var dates = [
+      {key: 'all', title: 'All'},
+      {key: 'week', title: 'Last week'},
+      {key: 'month', title: 'Last month'},
+      {key: 'year', title: 'Last year'}
+    ].map(filterItem.bind(this, 'date', this.setDate));
+
+    var resolutions = [
+      {key: 'all', title: 'All'},
+      {key: 'low', title: 'Low'},
+      {key: 'medium', title: 'Medium'},
+      {key: 'high', title: 'High'}
+    ].map(filterItem.bind(this, 'resolution', this.setResolution));
+
+    var dataTypes = [
+      {key: 'all', title: 'All Images'},
+      {key: 'service', title: 'Image + Map Layer'}
+    ].map(filterItem.bind(this, 'dataType', this.setDataType));
+
+    return (
+      <Dropdown element="li" className="drop dropdown center" triggerTitle="Settings" triggerClassName="bttn-settings" triggerText="Settings">
+        <dl className="drop-menu filters-options-menu" role="menu">
+          <dt className="drop-menu-sectitle">Time</dt>
+          {dates}
+          <dt className="drop-menu-sectitle">Resolution</dt>
+          {resolutions}
+          <dt className="drop-menu-sectitle">Data Type</dt>
+          {dataTypes}
+        </dl>
+      </Dropdown>
+    );
+  }
+});

app/assets/scripts/components/header.js

@@ -1,9 +1,27 @@
 'use strict';
 var React = require('react/addons');
+var Keys = require('react-keybinding');
 var actions = require('../actions/actions');
-var actions = require('../actions/actions');
+var Filters = require('./filters');
 
 var Header = React.createClass({
+  mixins: [
+    Keys
+  ],
+
+  keybindings: {
+    'i': function() {
+      actions.openModal('info');
+    },
+    's': function() {
+      var geocoder = this.getDOMNode().querySelector('[data-hook="geocoder"]');
+      geocoder.focus();
+      // Prevent the 's' from being typed in the search box.
+      setTimeout(function() {
+        geocoder.value = '';
+      }, 1);
+    }
+  },
 
   aboutClickHandler: function(e) {
     e.preventDefault();
@@ -35,12 +53,7 @@ var Header = React.createClass({
               </div>
             </form>
             <ul className="app-menu">
-              <li className="drop dropdown center" data-title="Coming soon!">
-                <a href="#" title="Settings" className="bttn-settings disabled" data-toggle="drop"><span>Settings</span></a>
-                <div className="drop-content">
-                  <p>Settings go here.</p>
-                </div>
-              </li>
+              <Filters />
             </ul>
           </div>
           <div className="nav-block-sec">

app/assets/scripts/components/home.js

@@ -1,13 +1,15 @@
 'use strict';
 var React = require('react/addons');
 var MapBoxMap = require('./map');
+var MiniMap = require('./minimap');
 var ResultsPane = require('./results_pane');
 
 var Home = React.createClass({
   render: function() {
     return (
       <div>
         <MapBoxMap />
+        <MiniMap />
         <ResultsPane />
       </div>
     );