sipp11
/
grunt-front
1
0
Fork 0
Code Issues Pull Requests Releases Activity
Browse Source

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
master
sipp11 6 years ago
parent
9713879fe7
commit
93c49f8be5
10 changed files with 110 additions and 54 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/App.js
  2. 6
      src/components/AgencyForm.js
  3. 7
      src/components/FloatPane.js
  4. 3
      src/components/Footer.js
  5. 38
      src/components/RouteForm.js
  6. 47
      src/components/StopForm.js
  7. 1
      src/components/StopList.js
  8. 2
      src/constants/Api.js
  9. 27
      src/container/Geo.js
  10. 7
      src/reducers/stop.js

2
src/App.js
Unescape View File

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

6
src/components/AgencyForm.js
Unescape View File

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

7
src/components/FloatPane.js
Unescape View File

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

3
src/components/Footer.js
Unescape View File

@ -4,7 +4,8 @@ const Footer = () =>
<footer className="footer"> <footer className="footer">
<div className="content has-text-centered"> <div className="content has-text-centered">
<img src="https://static.10ninox.com/goth-rect-640x160.svg" alt="GoTH" width="168" height="42" /> <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> </div>
</footer> </footer>

38
src/components/RouteForm.js
Unescape View File

@ -3,7 +3,8 @@ import styled from 'styled-components'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { Redirect, Link } from 'react-router-dom' 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 { updateRoute, createRoute, deleteRoute } from '../actions/route';
import store from '../store' import store from '../store'
@ -23,7 +24,7 @@ class RouteForm extends Component {
short_name: "", short_name: "",
long_name: "", long_name: "",
desc: "", desc: "",
route_type: "2", route_type: "3",
route_url: "", route_url: "",
route_color: "", route_color: "",
route_text_color: "", route_text_color: "",
@ -94,63 +95,72 @@ class RouteForm extends Component {
<StyledRouteForm> <StyledRouteForm>
<h1 className="title">{one.route_id || 'New Route'}&nbsp;&nbsp;</h1> <h1 className="title">{one.route_id || 'New Route'}&nbsp;&nbsp;</h1>
<div className="content"> <div className="content">
<HorizontalInput <Input
label="Route ID" label="Route ID"
type="text" type="text"
fieldName="route_id" fieldName="route_id"
value={one.route_id || ''} value={one.route_id || ''}
handleChange={this.handleChange} /> handleChange={this.handleChange} />
<HorizontalInput <Input
label="Short Name" label="Short Name"
type="text" type="text"
fieldName="short_name" fieldName="short_name"
value={one.short_name || ''} value={one.short_name || ''}
handleChange={this.handleChange} /> handleChange={this.handleChange} />
<HorizontalInput <Input
label="Long Name" label="Long Name"
type="text" type="text"
fieldName="long_name" fieldName="long_name"
value={one.long_name || ''} value={one.long_name || ''}
handleChange={this.handleChange} /> handleChange={this.handleChange} />
<HorizontalInput <Input
label="Description" label="Description"
type="text" type="text"
fieldName="desc" fieldName="desc"
value={one.desc || ''} value={one.desc || ''}
handleChange={this.handleChange} /> handleChange={this.handleChange} />
<HorizontalInput <Select
label="Route Type" label="Route Type"
type="text"
fieldName="route_type" fieldName="route_type"
value={one.route_type || ''} value={one.route_type || ''}
handleChange={this.handleChange} /> handleChange={this.handleChange}
choices={[
<HorizontalInput { 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" label="Route URL"
type="text" type="text"
fieldName="route_url" fieldName="route_url"
value={one.route_url || ''} value={one.route_url || ''}
handleChange={this.handleChange} /> handleChange={this.handleChange} />
<HorizontalInput <Input
label="Route Color" label="Route Color"
type="text" type="text"
fieldName="route_color" fieldName="route_color"
value={one.route_color || ''} value={one.route_color || ''}
handleChange={this.handleChange} /> handleChange={this.handleChange} />
<HorizontalInput <Input
label="Route Text Color" label="Route Text Color"
type="text" type="text"
fieldName="route_text_color" fieldName="route_text_color"
value={one.route_text_color || ''} value={one.route_text_color || ''}
handleChange={this.handleChange} /> handleChange={this.handleChange} />
<HorizontalInput <Input
label="Route Sort Order" label="Route Sort Order"
type="text" type="text"
fieldName="route_sort_order" fieldName="route_sort_order"

47
src/components/StopForm.js
Unescape View File

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

1
src/components/StopList.js
Unescape View File

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

2
src/constants/Api.js
Unescape View File

@ -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_PREFIX = process.env.API_PREFIX || '/v1'
export const API_URL = `${URL}${API_PREFIX}` export const API_URL = `${URL}${API_PREFIX}`
export const LOGIN = '/api-token-auth/' export const LOGIN = '/api-token-auth/'

27
src/container/Geo.js
Unescape View File

@ -26,6 +26,20 @@ display: flex;
flex-direction: column; 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: filter for existing polygons
// TODO: update mapCenter to recent active route/trip or current location // 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() { render() {
const { loggedIn, geo } = this.props const { loggedIn, geo } = this.props
const myLocationMarker = geo.coords ? ( const myLocationMarker = geo.coords ? (
@ -190,6 +212,11 @@ class Geo extends Component {
<FullPageBox> <FullPageBox>
{/* <Nav loggedIn={loggedIn} /> */} {/* <Nav loggedIn={loggedIn} /> */}
<FloatPane loggedIn={loggedIn} {...this.props} /> <FloatPane loggedIn={loggedIn} {...this.props} />
{geo.coords && <a onClick={this.forceSetMapCenterToCurrent.bind(this)}>
<FollowMyLocation>
<i className="far fa-dot-circle"></i>
</FollowMyLocation>
</a>}
<Map <Map
center={this.state.mapCenter} center={this.state.mapCenter}
zoom={13} zoom={13}

7
src/reducers/stop.js
Unescape View File

@ -1,6 +1,7 @@
import { import {
STOP_CREATE, STOP_DELETE, STOP_UPDATE, STOP_CREATE, STOP_DELETE, STOP_UPDATE,
STOP_REQUEST, STOP_SUCCESS, STOP_FAILURE, STOP_REQUEST, STOP_SUCCESS, STOP_FAILURE,
GEO_POLYGON_RESET,
} from '../constants/ActionTypes' } from '../constants/ActionTypes'
@ -12,6 +13,12 @@ const stopInitState = {
} }
const stop = (state = stopInitState, action) => { const stop = (state = stopInitState, action) => {
switch(action.type) { 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: case STOP_REQUEST:
return { return {
...state, ...state,

Write Preview
Loading…
Cancel
Save