Stop Aura WIP

src/actions/index.js

@@ -71,6 +71,12 @@ export const geoStopToggler = () => {
   }
 }
 
+export const geoStopAuraToggler = () => {
+  return {
+    type: types.GEO_STOP_AURA_TOGGLE,
+  }
+}
+
 export const geoLocationFailed = (positionErr) => {
   // PositionError {code: 3, message: "Timeout expired"}
   return {

src/constants/ActionTypes.js

@@ -15,6 +15,7 @@ export const GEO_DRAGMARKER_CHANGE = 'GEO_DRAGMARKER_CHANGE'
 export const GEO_MAPCENTER_UPDATE = 'GEO_MAPCENTER_UPDATE'
 export const GEO_LASTCENTER_UPDATE = 'GEO_LASTCENTER_UPDATE'
 export const GEO_STOPMARKER_TOGGLE = 'GEO_STOPMARKER_TOGGLE'
+export const GEO_STOP_AURA_TOGGLE = 'GEO_STOP_AURA_TOGGLE'
 
 export const REQUEST_LOGIN = 'REQUEST_LOGIN'
 export const SUCCESS_LOGIN = 'SUCCESS_LOGIN'

src/container/Geo.js

@@ -12,6 +12,7 @@ import { loggedIn } from '../reducers/auth'
 import {
   geoLocationFailed, geoLocationUpdate, getAgency,
   draggableMarkerUpdate, lastCenterUpdate, geoStopToggler,
+  geoStopAuraToggler,
 } from '../actions'
 import FloatPane from '../components/FloatPane'
 import store from '../store'
@@ -36,7 +37,7 @@ position: fixed;
 text-align: center;
 padding-top: 10px;
 right: 0;
-bottom: 100px;
+bottom: 150px;
 z-index: 30;
 `
 
@@ -50,10 +51,23 @@ position: fixed;
 text-align: center;
 padding-top: 10px;
 right: 0;
-bottom: 50px;
+bottom: 110px;
 z-index: 30;
 `
 
+const StopAuraToggler = styled.div`
+width: 80px
+height: 40px;
+background: #fefefebb;
+border-radius: 10px;
+color: #209cee;
+position: fixed;
+text-align: center;
+padding-top: 10px;
+right: 0;
+bottom: 70px;
+z-index: 30;
+`
 
 // TODO: filter for existing polygons
 
@@ -214,6 +228,10 @@ class Geo extends Component {
       }} />
   }
 
+  renderStopAura() {
+
+  }
+
   forceSetMapCenterToCurrent() {
     const { geo } = this.props
     const { leafletElement } = this.refs.map
@@ -275,6 +293,9 @@ class Geo extends Component {
         <StopToggler onClick={_ => store.dispatch(geoStopToggler())}>
           {geo.showStopMarker ? <p>show</p> : <p>hide</p>}
         </StopToggler>
+        <StopAuraToggler onClick={_ => store.dispatch(geoStopAuraToggler())}>
+          {geo.showStopAura ? <p>A ON</p> : <p>A OFF</p>}
+        </StopAuraToggler>
         <Map
           center={this.state.mapCenter}
           zoom={geo.zoom}
@@ -300,6 +321,9 @@ class Geo extends Component {
           {this.renderGeoJSON()}
           {this.renderStopTime()}
           {geo.showStopMarker && this.renderStopMarkers()}
+          {geo.showStopAura && this.renderStopAura()}
+          <span>
+          </span>
         </Map>
       </FullPageBox>
     )

src/reducers/geo.js

@@ -2,8 +2,9 @@ import {
   GEO_LOCATION_SUCCESS, GEO_LOCATION_FAILURE,
   GEO_MARKER_ADD, GEO_MARKER_RESET, GEO_MARKER_UPDATE,
   GEO_POLYGON_ADD, GEO_POLYGON_RESET, GEO_POLYGON_UPDATE,
-  GEO_MAPCENTER_UPDATE, GEO_LASTCENTER_UPDATE, GEO_STOPMARKER_TOGGLE,
+  GEO_MAPCENTER_UPDATE, GEO_LASTCENTER_UPDATE,
   GEO_DRAGMARKER_CHANGE, GEO_DRAGMARKER_DISABLE, GEO_DRAGMARKER_ENABLE,
+  GEO_STOPMARKER_TOGGLE, GEO_STOP_AURA_TOGGLE,
 } from '../constants/ActionTypes'
 
 const initialState = {
@@ -16,12 +17,18 @@ const initialState = {
   mapCenter: [13.84626739, 100.538],
   zoom: 13,
   showStopMarker: false,
+  showStopAura: false,
   draggableMarker: false,
   draggableMarkerLatlon: [13.8462745, 100.5382592],
 }
 
 const geo = (state = initialState, action) => {
   switch (action.type) {
+    case GEO_STOP_AURA_TOGGLE:
+      return {
+        ...state,
+        showStopAura: !state.showStopAura,
+      }
       case GEO_STOPMARKER_TOGGLE:
         return {
           ...state,