Updates: move map to current loc

* bugfixes:
  * Map requires auth
  * Clear polygons to clear fetching stuck at true
* reload button
* default API endpoint to api.goth.app

src/App.js

@@ -11,8 +11,8 @@ import { LOGIN_PATH } from './constants/path'
 const App = () => (
   <Switch>
     {/* both /roster and /roster/:number begin with /roster */}
-    <Route path={LOGIN_PATH} component={Public} />
     <Route path='/map' component={Geo} />
+    <Route path={LOGIN_PATH} component={Public} />
     <Route path='/' component={Main} />
   </Switch>
 )

src/components/AgencyForm.js

@@ -20,10 +20,10 @@ class AgencyForm extends Component {
     agency_id: "",
     email: "",
     fare_url: "",
-    lang: "",
+    lang: "th",
     name: "",
     phone: "",
-    timezone: "",
+    timezone: "Asia/Bangkok",
     url: "",
   }
 
@@ -98,18 +98,18 @@ class AgencyForm extends Component {
               handleChange={this.handleChange} />
 
           <HorizontalInput
-              label="Timezone"
-              type="text"
-              fieldName="timezone"
-              value={one.timezone || ''}
-              handleChange={this.handleChange} />
+            label="Timezone"
+            type="text"
+            fieldName="timezone"
+            value={one.timezone || 'Asia/Bangkok'}
+            handleChange={this.handleChange} />
 
           <HorizontalInput
-              label="Phone"
-              type="text"
-              fieldName="phone"
-              value={one.phone || ''}
-              handleChange={this.handleChange} />
+            label="Phone"
+            type="text"
+            fieldName="phone"
+            value={one.phone || ''}
+            handleChange={this.handleChange} />
 
           <HorizontalInput
               label="Language"

src/components/FloatPane.js

@@ -38,12 +38,13 @@ top: 0px;
 `
 
 const StyledPaneToggler = styled.div`
-width: 20px
-height: 30px;
-background: #fefefefe;
+width: 30px
+height: 40px;
+background: #fefefebb;
 color: #209cee;
 position: fixed;
 text-align: center;
+padding-top: 10px;
 left: ${props => props.hidePane ? 0 : '25vw'};
 top: 30px;
 border-radius: 0 5px 5px 0;

src/components/Footer.js

@@ -4,7 +4,8 @@ const Footer = () =>
   <footer className="footer">
     <div className="content has-text-centered">
       <img src="https://static.10ninox.com/goth-rect-640x160.svg" alt="GoTH" width="168" height="42" />
-      {/* <strong>Go</strong><sup>TH</sup> */}
+      <br/>
+      <a href="javascript:location.reload(true)"><i className="fas fa-sync"></i> reload</a>
     </div>
   </footer>
 

src/components/RouteForm.js

@@ -3,7 +3,8 @@ import styled from 'styled-components'
 import { connect } from 'react-redux'
 import { Redirect, Link } from 'react-router-dom'
 
-import HorizontalInput from './parts/HorizontalInput'
+import Input from './parts/Input'
+import Select from './parts/Select'
 import { updateRoute, createRoute, deleteRoute } from '../actions/route';
 import store from '../store'
 
@@ -23,7 +24,7 @@ class RouteForm extends Component {
     short_name: "",
     long_name: "",
     desc: "",
-    route_type: "2",
+    route_type: "3",
     route_url: "",
     route_color: "",
     route_text_color: "",
@@ -94,63 +95,72 @@ class RouteForm extends Component {
       <StyledRouteForm>
         <h1 className="title">{one.route_id || 'New Route'}&nbsp;&nbsp;</h1>
         <div className="content">
-          <HorizontalInput
+          <Input
               label="Route ID"
               type="text"
               fieldName="route_id"
               value={one.route_id || ''}
             handleChange={this.handleChange} />
 
-          <HorizontalInput
+          <Input
             label="Short Name"
             type="text"
             fieldName="short_name"
             value={one.short_name || ''}
             handleChange={this.handleChange} />
 
-          <HorizontalInput
+          <Input
             label="Long Name"
             type="text"
             fieldName="long_name"
             value={one.long_name || ''}
             handleChange={this.handleChange} />
 
-          <HorizontalInput
+          <Input
               label="Description"
               type="text"
               fieldName="desc"
               value={one.desc || ''}
               handleChange={this.handleChange} />
 
-          <HorizontalInput
-              label="Route Type"
-              type="text"
-              fieldName="route_type"
-              value={one.route_type || ''}
-              handleChange={this.handleChange} />
-
-          <HorizontalInput
+          <Select
+            label="Route Type"
+            fieldName="route_type"
+            value={one.route_type || ''}
+            handleChange={this.handleChange}
+            choices={[
+              { value: '0', label: 'Tram, Light rail' },
+              { value: '1', label: 'Subway (within metro area)' },
+              { value: '2', label: 'Rail' },
+              { value: '3', label: 'Bus' },
+              { value: '4', label: 'Ferry' },
+              { value: '5', label: 'Cable car' },
+              { value: '6', label: 'Gondola' },
+              { value: '7', label: 'Funicular (steep inclines)' },
+            ]} />
+
+          <Input
               label="Route URL"
               type="text"
               fieldName="route_url"
               value={one.route_url || ''}
               handleChange={this.handleChange} />
 
-          <HorizontalInput
+          <Input
               label="Route Color"
               type="text"
               fieldName="route_color"
               value={one.route_color || ''}
               handleChange={this.handleChange} />
 
-          <HorizontalInput
+          <Input
               label="Route Text Color"
               type="text"
               fieldName="route_text_color"
               value={one.route_text_color || ''}
               handleChange={this.handleChange} />
 
-          <HorizontalInput
+          <Input
               label="Route Sort Order"
               type="text"
               fieldName="route_sort_order"

src/components/StopForm.js

@@ -3,7 +3,8 @@ import styled from 'styled-components'
 import { connect } from 'react-redux'
 import { Redirect, Link } from 'react-router-dom'
 
-import HorizontalInput from './parts/HorizontalInput'
+import Input from './parts/Input'
+import Select from './parts/Select'
 import {
   mapCenterUpdate, draggableMarkerEnable, draggableMarkerDisable
 } from '../actions'
@@ -141,14 +142,14 @@ class StopForm extends Component {
       <StyledStopForm>
         <h1 className="title">{one.stop_id || 'New Stop'}&nbsp;&nbsp;</h1>
         <div className="content">
-          <HorizontalInput
+          <Input
             label="Stop ID"
             type="text"
             fieldName="stop_id"
             value={one.stop_id || ''}
             handleChange={this.handleChange} />
 
-          <HorizontalInput
+          <Input
             label="Name"
             type="text"
             fieldName="name"
@@ -161,49 +162,57 @@ class StopForm extends Component {
             {latlon[0] && latlon[0].toFixed(4)}, {latlon[1] && latlon[1].toFixed(4)}
           </p>
 
-          <HorizontalInput
+          <Input
             label="Stop code"
             type="text"
             fieldName="stop_code"
             value={one.stop_code || ''}
             handleChange={this.handleChange} />
 
-          <HorizontalInput
+          <Input
             label="Description"
             type="text"
             fieldName="stop_desc"
             value={one.stop_desc || ''}
             handleChange={this.handleChange} />
 
-          <HorizontalInput
+          <Input
             label="Zone ID"
             type="text"
             fieldName="zone_id"
             value={one.zone_id || ''}
             handleChange={this.handleChange} />
 
-          <HorizontalInput
+          <Select
             label="Location Type"
-            type="text"
             fieldName="location_type"
-            value={one.location_type || ''}
-            handleChange={this.handleChange} />
-
-          <HorizontalInput
+            value={one.location_type || '0'}
+            handleChange={this.handleChange}
+            choices={[
+              { value: '0', label: 'Stop' },
+              { value: '1', label: 'Station' },
+              { value: '2', label: 'Station Entrance/Exit' },
+            ]} />
+
+          <Input
             label="Timezone"
             type="text"
             fieldName="stop_timezone"
-            value={one.stop_timezone || ''}
+            value={one.stop_timezone || 'Asia/Bangkok'}
             handleChange={this.handleChange} />
 
-          <HorizontalInput
+          <Select
             label="Wheelchair"
-            type="text"
             fieldName="wheelchair_boarding"
-            value={one.wheelchair_boarding || ''}
-            handleChange={this.handleChange} />
-
-          {/* <HorizontalInput
+            value={one.wheelchair_boarding || '0'}
+            handleChange={this.handleChange}
+            choices={[
+              { value: '0', label: 'No information' },
+              { value: '1', label: 'Possible (partially or fully)' },
+              { value: '2', label: 'Not possible' },
+            ]} />
+
+          {/* <Input
               label="Parent Station"
               type="text"
               fieldName="parent_station"

src/components/StopList.js

@@ -42,6 +42,7 @@ class StopList extends Component {
               className="input is-small"
               type="text"
               placeholder="search"
+              onChange={(e) => { this.handleStopSearch(e) } }
               onKeyPress={(e) => { (e.key === 'Enter') && this.handleStopSearch(e) }} />
               <span className="icon is-small is-left">
                 <i className="fas fa-search" aria-hidden="true"></i>

src/constants/Api.js

@@ -1,5 +1,5 @@
 
-export const URL = process.env.API_URL || '//localhost:8000'
+export const URL = process.env.API_URL || 'https://api.goth.app'
 export const API_PREFIX = process.env.API_PREFIX || '/v1'
 export const API_URL = `${URL}${API_PREFIX}`
 export const LOGIN = '/api-token-auth/'

src/container/Geo.js

@@ -26,6 +26,20 @@ display: flex;
 flex-direction: column;
 `
 
+const FollowMyLocation = styled.div`
+width: 40px
+height: 40px;
+background: #fefefebb;
+border-radius: 10px;
+color: #209cee;
+position: fixed;
+text-align: center;
+padding-top: 10px;
+right: 0;
+bottom: 100px;
+z-index: 30;
+`
+
 
 // TODO: filter for existing polygons
 // TODO: update mapCenter to recent active route/trip or current location
@@ -142,6 +156,14 @@ class Geo extends Component {
               }}/>
   }
 
+  forceSetMapCenterToCurrent() {
+    const { geo } = this.props
+    const { leafletElement } = this.refs.map
+    const { zoom } = this.refs.map.viewport // another key is 'center'
+    const curLoc = [geo.coords.latitude, geo.coords.longitude]
+    leafletElement.setView(curLoc, zoom < 13 ? 13 : zoom)
+  }
+
   render() {
     const { loggedIn, geo } = this.props
     const myLocationMarker = geo.coords ? (
@@ -190,6 +212,11 @@ class Geo extends Component {
       <FullPageBox>
         {/* <Nav loggedIn={loggedIn} /> */}
         <FloatPane loggedIn={loggedIn} {...this.props} />
+        {geo.coords && <a onClick={this.forceSetMapCenterToCurrent.bind(this)}>
+          <FollowMyLocation>
+            <i className="far fa-dot-circle"></i>
+          </FollowMyLocation>
+        </a>}
         <Map
           center={this.state.mapCenter}
           zoom={13}

src/reducers/stop.js

@@ -1,6 +1,7 @@
 import {
   STOP_CREATE, STOP_DELETE, STOP_UPDATE,
   STOP_REQUEST, STOP_SUCCESS, STOP_FAILURE,
+  GEO_POLYGON_RESET,
 } from '../constants/ActionTypes'
 
 
@@ -12,6 +13,12 @@ const stopInitState = {
 }
 const stop = (state = stopInitState, action) => {
   switch(action.type) {
+    // somehow search fetching stuck we need some way to reset that
+    case GEO_POLYGON_RESET:
+      return {
+        ...state,
+        fetching: false,
+      }
     case STOP_REQUEST:
       return {
         ...state,