Handling polyline & adjust Fare UI

package.json

@@ -9,6 +9,7 @@
     "leaflet-draw": "^1.0.2",
     "lodash": "^4.17.10",
     "moment": "^2.22.2",
+    "polyline-encoded": "0.0.8",
     "raven-js": "^3.26.4",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",

src/components/FareList.js

@@ -55,7 +55,7 @@ class FareList extends Component {
             <div className="level-item has-text-centered">
               <div>
                 <p className="heading">Fare ID</p>
-                <p className="title"><Link to={`${match.url}/attributes/${fareattr.results[i].id}`}>{fareattr.results[i].fare_id}</Link></p>
+                <Link to={`${match.url}/attributes/${fareattr.results[i].id}`}>{fareattr.results[i].fare_id}</Link>
               </div>
             </div>
             <div className="level-item has-text-centered">
@@ -79,7 +79,7 @@ class FareList extends Component {
             <div className="level-item has-text-centered">
               <div>
                 <p className="heading">Agency</p>
-                <p className="title">{fareattr.results[i].agency.name}</p>
+                <Link to={`/agency/${fareattr.results[i].agency.agency_id}`} >{fareattr.results[i].agency.name}</Link>
               </div>
             </div>
           </FakeRow>
@@ -99,7 +99,7 @@ class FareList extends Component {
             <div className="level-item has-text-centered">
               <div>
                 <p className="heading">Fare ID</p>
-                <p className="title"><Link to={`${match.url}/rules/${farerule.results[i].id}`}>{farerule.results[i].fare.fare_id}</Link></p>
+                <Link to={`${match.url}/rules/${farerule.results[i].id}`}>{farerule.results[i].fare.fare_id}</Link>
               </div>
             </div>
             <div className="level-item has-text-centered">
@@ -121,7 +121,7 @@ class FareList extends Component {
               <div>
                 <p className="heading">Route ID</p>
                 <p className="title">
-                  {farerule.results[i].route_id}
+                  {farerule.results[i].route_id || '-'}
                 </p>
               </div>
             </div>

src/components/FareRulesForm.js

@@ -12,7 +12,11 @@ import store from '../store'
 import Input from './parts/Input'
 import AsyncSelect from 'react-select/lib/Async'
 import { components } from 'react-select'
-import { getStopsAsyncSelect, getFareAttrAsyncSelect } from '../utils'
+import {
+  getStopsAsyncSelect,
+  getFareAttrAsyncSelect,
+  getRouteAsyncSelect
+} from '../utils'
 
 const StyledFareRulesForm = styled.div`
 padding: 1rem;
@@ -37,6 +41,16 @@ const FareAttrOption = (props) => {
   )
 }
 
+const RouteOption = (props) => {
+  const { route_id, short_name, long_name} = props.data
+  return (
+    <components.Option {...props}>
+      <code>{route_id}</code> {short_name}
+      <br/>{long_name}
+    </components.Option>
+  )
+}
+
 
 class FareRulesForm extends Component {
 
@@ -121,12 +135,26 @@ class FareRulesForm extends Component {
               />
           </div>
 
-          <Input
-            label="Route ID"
-            type="text"
-            fieldName="route_id"
-            value={one.route_id || ''}
-            handleChange={this.handleChange} />
+          <div className="field">
+            <label className="label">Route</label>
+            <AsyncSelect
+              cacheOptions={true}
+              defaultOptions
+              defaultValue={one.route_id && {value: one.route_id, label: one.route_id}}
+              loadOptions={getRouteAsyncSelect}
+              components={{ Option: RouteOption }}
+              onChange={(resp, evt) => {
+                if (evt.action === 'select-option') {
+                  let evt = {
+                    target: {
+                      name: 'route_id',
+                      value: resp.route_id,
+                    }}
+                  this.handleChange(evt)
+                }
+              }}
+              />
+          </div>
 
           <div className="field">
             <label className="label">Origin ID</label>
@@ -170,13 +198,26 @@ class FareRulesForm extends Component {
               />
           </div>
 
-          <Input
-            label="Contains ID"
-            type="text"
-            fieldName="contains_id"
-            value={one.contains_id || ''}
-            handleChange={this.handleChange} />
-
+          <div className="field">
+            <label className="label">Contains ID</label>
+            <AsyncSelect
+              cacheOptions={true}
+              defaultOptions
+              defaultValue={one.contains_id && {value: one.contains_id, label: one.contains_id}}
+              loadOptions={getStopsAsyncSelect}
+              components={{ Option: StopOption }}
+              onChange={(resp, evt) => {
+                if (evt.action === 'select-option') {
+                  let evt = {
+                    target: {
+                      name: 'contains_id',
+                      value: resp.stop_id,
+                    }}
+                  this.handleChange(evt)
+                }
+              }}
+              />
+          </div>
         </div>
 
         <div className="field is-grouped">

src/container/Geo.js

@@ -16,6 +16,7 @@ import {
 } from '../actions'
 import FloatPane from '../components/FloatPane'
 import store from '../store'
+import { decodeGeoJson } from '../utils'
 
 
 const FullPageBox = styled.div`
@@ -158,7 +159,7 @@ class Geo extends Component {
         {polygons && polygons.filter(ele => ele.geojson).map(ele => (
           <GeoJSON
             key={`geojson-${ele.id}`}
-            data={ele.geojson}
+            data={decodeGeoJson(ele.geojson)}
             style={{...style, ...ele.style}} />
         ))}
       </FeatureGroup>

src/utils/index.js

@@ -1,5 +1,13 @@
 import { CancelToken } from 'axios'
 import { apiClient } from './ApiClient'
+import polyUtil from 'polyline-encoded'
+
+export const decodeGeoJson = (encodedOne) => {
+  if (typeof encodedOne.coordinates === "string")
+    encodedOne.coordinates = polyUtil.decode(encodedOne.coordinates)
+  return encodedOne
+}
+
 
 export const getItemFromList = (targetValue, list, defaultValue) => {
   if (!targetValue && defaultValue === undefined)
@@ -51,6 +59,24 @@ export const getFareAttrAsyncSelect = (inputValue, callback) => {
 }
 
 
+export const getRouteAsyncSelect = (inputValue, callback) => {
+  const that = this
+  const cancelToken = new CancelToken(function executor(c) {
+    // An executor function receives a cancel function as a parameter
+    if (that.cancel)
+      that.cancel()
+    that.cancel = c
+  })
+  apiClient(`/route/?search=${inputValue}`, { cancelToken })
+    .then((resp) => {
+      callback(resp.data.results.map(i => ({
+        ...i,
+        label: i.route_id
+      })))
+    })
+}
+
+
 export const getAgencyAsyncSelect = (inputValue, callback) => {
   const that = this
   const cancelToken = new CancelToken(function executor(c) {