Pick options on the tab
Agency
+ + New agency + +
- Route + Route new
all diff --git a/src/components/StopForm.js b/src/components/StopForm.js new file mode 100644 index 0000000..c1887e3 --- /dev/null +++ b/src/components/StopForm.js @@ -0,0 +1,198 @@ +import React, { Component } from 'react' +import styled from 'styled-components' +import { connect } from 'react-redux' +import { Redirect, Link } from 'react-router-dom' + +import HorizontalInput from './parts/HorizontalInput' +import { mapCenterUpdate } from '../actions' +import { updateStop, createStop, deleteStop } from '../actions/stop' +import store from '../store' + +const StyledStopForm = styled.div` +padding: 1rem; +background: #fafafa; +` + +// TODO: need to deal with shapes + +class StopForm extends Component { + + state = { + id: null, + stop_id: null, + name: '', + stop_code: '', + stop_desc: '', + zone_id: '', + location_type: '0', + stop_timezone: 'Asia/Bangkok', + wheelchair_boarding: '0', + // parent_station: null, + } + + constructor() { + super() + this.handleChange = this.handleChange.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + this.handleDelete = this.handleDelete.bind(this) + this.renderForm = this.renderForm.bind(this) + } + + handleChange(evt) { + let updated = {} + updated[evt.target.name] = evt.target.value + this.setState(updated) + } + + handleSubmit() { + const { id } = this.state + let body = { ...this.state } + delete body.id + delete body.geojson + if (id !== null) { + store.dispatch(updateStop(id, body)) + } else { + store.dispatch(createStop(body)) + } + this.setState({justSubmit: true}) + } + + handleDelete() { + const { id } = this.state + store.dispatch(deleteStop(id)) + this.setState({justSubmit: true}) + } + + componentWillMount() { + const { props } = this + const { stopId } = props.match.params + const { results } = props.stop + const ones = results.filter(ele => ele.stop_id === stopId) + if (ones.length > 0) { + this.setState(ones[0]) + props.updateBreadcrumb({ stopId }) + const { coordinates } = ones[0].geojson + store.dispatch(mapCenterUpdate(coordinates[1], coordinates[0])) + } + } + + renderForm() { + const one = this.state + const { stopId } = this.props.match.params + const { results, fetching } = this.props.stop + const stops = results.filter(ele => ele.stop_id === stopId) + return ( + + {one.stop_id || 'New Stop'} + + + + + + + + + + + + + + + + + + {/* */} + + + + + + Save + + {one.id !== null && + + DELETE + } + + {results && + Cancel} + + + + ) + } + + render () { + const one = this.state + const { fetching } = this.props.stop + // redirect to view page if no data + const { stopId } = this.props.match.params + // redirect to agency list if submitted + if (one.justSubmit === true && !fetching) { + return + } + return this.renderForm() + } + +} + + +const mapStateToProps = state => ({ + stop: state.stop, +}) + +const connectStopForm = connect( + mapStateToProps, +)(StopForm) +export default connectStopForm diff --git a/src/components/StopList.js b/src/components/StopList.js new file mode 100644 index 0000000..5e026e7 --- /dev/null +++ b/src/components/StopList.js @@ -0,0 +1,67 @@ +import React, { Component } from 'react' +import styled from 'styled-components' +import { connect } from 'react-redux' +import { Link } from 'react-router-dom' + +import { getStop } from '../actions/stop' +import store from '../store' + +const StyledBox = styled.div` +background: #fafafa; +` + + +class StopList extends Component { + + componentWillMount() { + const { count } = this.props.stop + if (count === 0) + store.dispatch(getStop()) + } + + render() { + const { results } = this.props.stop + return ( + + + + Stop + + + + New stop + + + + + + + + + + + {results.map(ele => ( + + {ele.stop_id} - {ele.name} + + ))} + {this.props.stop.length === 0 && + No stop yet} + + + ) + } +} + +const mapStateToProps = state => ({ + stop: state.stop +}) +const connectStopList = connect( + mapStateToProps, + {}, +)(StopList) + +export default styled(connectStopList)` + color: palevioletred; + font-weight: bold; +` diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js index 5d92150..37f6e2d 100644 --- a/src/constants/ActionTypes.js +++ b/src/constants/ActionTypes.js @@ -8,6 +8,8 @@ export const GEO_MARKER_ADD = 'GEO_MARKER_ADD' export const GEO_MARKER_RESET = 'GEO_MARKER_RESET' export const GEO_MARKER_UPDATE = 'GEO_MARKER_UPDATE' +export const GEO_MAPCENTER_UPDATE = 'GEO_MAPCENTER_UPDATE' + export const REQUEST_LOGIN = 'REQUEST_LOGIN' export const SUCCESS_LOGIN = 'SUCCESS_LOGIN' export const FAILED_LOGIN = 'FAILED_LOGIN' @@ -38,6 +40,13 @@ export const ROUTE_CREATE = 'ROUTE_CREATE' export const ROUTE_DELETE = 'ROUTE_DELETE' export const ROUTE_UPDATE = 'ROUTE_UPDATE' +export const STOP_REQUEST = 'STOP_REQUEST' +export const STOP_FAILURE = 'STOP_FAILURE' +export const STOP_SUCCESS = 'STOP_SUCCESS' +// below items are SUCCESS for other tasks +export const STOP_CREATE = 'STOP_CREATE' +export const STOP_DELETE = 'STOP_DELETE' +export const STOP_UPDATE = 'STOP_UPDATE' export const CALENDAR_REQUEST = 'CALENDAR_REQUEST' export const CALENDAR_FAILURE = 'CALENDAR_FAILURE' diff --git a/src/container/Geo.js b/src/container/Geo.js index 07bdf48..ef867d9 100644 --- a/src/container/Geo.js +++ b/src/container/Geo.js @@ -4,9 +4,9 @@ import styled from 'styled-components' // import { Redirect, Route, Switch } from 'react-router-dom' import { Map, TileLayer, CircleMarker, ZoomControl, - FeatureGroup, GeoJSON } from 'react-leaflet' + FeatureGroup, GeoJSON, Marker } from 'react-leaflet' // import { EditControl } from 'react-leaflet-draw' -// import L from 'leaflet' +import L from 'leaflet' import { loggedIn } from '../reducers/auth' import { geoLocationFailed, geoLocationUpdate, getAgency } from '../actions' @@ -23,17 +23,31 @@ display: flex; flex-direction: column; ` + +// TODO: filter for existing polygons +// TODO: update mapCenter to recent active route/trip or current location + +const stopIcon = L.divIcon({ + className: 'divIcon', + html: '
+ Stop +
+ + New stop + +
+ + + + +