Create new trip

src/components/RouteDetail.js

@@ -47,7 +47,6 @@ const RouteDesc = (props) => (
   </div>
 )
 
-
 const TripList = (props) => (
   <div>
     {props.trips.map(ele => (
@@ -69,6 +68,10 @@ const TripList = (props) => (
     {props.trips.length === 0 && <span key="empty-trips" className="panel-block">
       No trip set
     </span>}
+    <span key="trip-list-0" className="panel-block">
+      <Link className="button is-outlined"
+        to={`/trip/${props.agencyId}/${props.routeId}/new`}>new Trip</Link>
+    </span>
   </div>
 )
 

src/components/TripForm.js

@@ -28,13 +28,8 @@ class TripForm extends Component {
   state = {
     id: null,
     trip_id: "",
-    email: "",
-    fare_url: "",
-    lang: "",
-    name: "",
-    phone: "",
-    timezone: "",
-    url: "",
+    service: null,
+    frequency_set: [],
     newStopTime: false,
   }
 
@@ -79,6 +74,15 @@ class TripForm extends Component {
     const { agencyId, routeId, tripId } = props.match.params
     if (!props.calendar.fetching && props.calendar.count === 0)
       store.dispatch(getCalendar())
+    if (tripId === undefined) {
+      const { route } = props
+      const tRoute = route.results.filter(ele => ele.route_id === routeId)
+      if (tRoute.length > 0) {
+        return { route: tRoute[0].id }
+      } else {
+        store.dispatch(getRoute(`agency=${agencyId}`))
+      }
+    }
     if (tripId !== undefined && state.id === null) {
       const { route } = props
       const tRoute = route.results.filter(ele => ele.route_id === routeId)
@@ -130,7 +134,7 @@ class TripForm extends Component {
               label="Service"
               type="text"
               fieldName="service"
-              value={one.service ? one.service.id : ''}
+              value={one.service}
               handleChange={this.handleChange}
               choices={calendar.results.map(ele => ({ value: ele.id, label: ele.service_id }))} />}
 
@@ -201,7 +205,7 @@ class TripForm extends Component {
     const one = this.state
     const { fetching } = this.props.trip
     // redirect to view page if no data
-    const { agencyId, routeId, tripId } = this.props.match.params
+    const { agencyId, routeId } = this.props.match.params
     // this is a create form
     // if (tripId === undefined) {
     //   if (one.justSubmit === true && !fetching) {
@@ -217,12 +221,10 @@ class TripForm extends Component {
     if (one.justSubmit === true && !fetching) {
       return <Redirect to={`/map/${agencyId}/route/${routeId}/trip`} />
     }
-    return (
-      <div className="columns">
-      <div className="column is-half">
-        {this.renderForm()}
-      </div>
-      <div className="column is-half">
+    let StopTimePane = null
+    if (this.state.id !== null) {
+      StopTimePane = (
+        <div className="column is-half">
         <StyleBox>
           {!this.state.newStopTime && <button className="button is-outlined" onClick={this.toggleNewStopTime}>new StopTime</button>}
           {this.state.newStopTime && <StopTimeForm {...this.props}
@@ -232,6 +234,15 @@ class TripForm extends Component {
         {this.props.stoptime.results.map(
           ele => <StopTimeOne key={`stb-${ele.id}`} item={ele} />)}
       </div>
+      )
+    }
+
+    return (
+      <div className="columns">
+      <div className="column is-half">
+        {this.renderForm()}
+      </div>
+      {StopTimePane}
       </div>
     )
   }

src/container/Main.js

@@ -39,6 +39,7 @@ class Main extends Component {
         <Nav loggedIn={loggedIn} />
         <div className="container is-widescreen">
           <Switch>
+          <Route exact path={`${match.url}trip/:agencyId/:routeId/new`} component={TripForm} />
           <Route exact path={`${match.url}trip/:agencyId/:routeId/:tripId`} component={TripForm} />
           <Route exact path={`${match.url}agency/new`} component={AgencyForm} />
           <Route exact path={`${match.url}agency/:agencyId`} component={AgencyItem} />