Client: update an activity

mpwo_client/src/actions/activities.js

@@ -48,6 +48,7 @@ export const getActivityGpx = activityId => dispatch => {
   dispatch(setGpx(null))
 }
 
+
 export const deleteActivity = id => dispatch => mpwoGenericApi
   .deleteData('activities', id)
   .then(ret => {
@@ -57,3 +58,15 @@ export const deleteActivity = id => dispatch => mpwoGenericApi
       dispatch(setError(`activities: ${ret.status}`))
   })
   .catch(error => dispatch(setError(`activities: ${error}`)))
+
+
+export const editActivity = form => dispatch => mpwoGenericApi
+  .updateData('activities', form)
+  .then(ret => {
+    if (ret.status === 'success') {
+      history.push(`/activities/${ret.data.activities[0].id}`)
+    } else {
+      dispatch(setError(`activities: ${ret.message}`))
+    }
+  })
+  .catch(error => dispatch(setError(`activities: ${error}`)))

mpwo_client/src/components/Activities/ActivityAddOrEdit.jsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+
+import FormWithGpx from './ActivityForms/FormWithGpx'
+import FormWithoutGpx from './ActivityForms/FormWithoutGpx'
+
+export default class ActivityAddEdit extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      withGpx: true,
+    }
+  }
+
+  handleRadioChange (changeEvent) {
+    this.setState({
+      withGpx:
+        changeEvent.target.name === 'withGpx'
+          ? changeEvent.target.value : !changeEvent.target.value
+    })
+  }
+
+  render() {
+    const { activity, sports } = this.props
+    const { withGpx } = this.state
+    return (
+      <div>
+        <Helmet>
+          <title>mpwo - Add an activity</title>
+        </Helmet>
+        <br /><br />
+        <div className="container">
+          <div className="row">
+            <div className="col-md-2" />
+            <div className="col-md-8">
+              <div className="card add-activity">
+                <h2 className="card-header text-center">
+                  {activity ? 'Edit an activity' : 'Add an activity'}
+                </h2>
+                <div className="card-body">
+                  {activity ? (
+                    activity.with_gpx ? (
+                      'You can\'t modify this activity.' +
+                        ' Please delete and re-import gpx file.'
+                    ) : (
+                    <FormWithoutGpx
+                      activity={activity}
+                      sports={sports}
+                    />
+                    )
+                  ) : (
+                    <div>
+                      <form>
+                        <div className="form-group row">
+                          <div className="col">
+                            <label className="radioLabel">
+                            <input
+                              type="radio"
+                              name="withGpx"
+                              checked={withGpx}
+                              onChange={event => this.handleRadioChange(event)}
+                            />
+                              with gpx file
+                            </label>
+                          </div>
+                          <div className="col">
+                            <label className="radioLabel">
+                            <input
+                              type="radio"
+                              name="withoutGpx"
+                              checked={!withGpx}
+                              onChange={event => this.handleRadioChange(event)}
+                            />
+                              without gpx file
+                            </label>
+                          </div>
+                        </div>
+                      </form>
+                      {withGpx ? (
+                        <FormWithGpx sports={sports} />
+                      ) : (
+                        <FormWithoutGpx sports={sports} />
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+            <div className="col-md-2" />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+

mpwo_client/src/components/Activities/ActivityDisplay.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
 
 import ActivityMap from './ActivityMap'
 import CustomModal from './../Others/CustomModal'
@@ -17,7 +18,7 @@ class ActivityDisplay extends React.Component {
 
   componentDidMount() {
     this.props.loadActivity(
-      this.props.location.pathname.replace('/activities/', '')
+      this.props.match.params.activityId
     )
   }
 
@@ -55,20 +56,30 @@ class ActivityDisplay extends React.Component {
                   {sports.filter(sport => sport.id === activity.sport_id)
                          .map(sport => sport.label)} -{' '}
                   {activity.activity_date}{' '}
-                  <i className="fa fa-edit" aria-hidden="true" />{' '}
+                  {!activity.with_gpx && (
+                    <Link
+                      className="unlink"
+                      to={`/activities/${activity.id}/edit`}
+                    >
+                      <i className="fa fa-edit custom-fa" aria-hidden="true" />
+                    </Link>
+                  )}
                   <i
-                    className="fa fa-trash"
+                    className="fa fa-trash custom-fa"
                     aria-hidden="true"
                     onClick={() => this.setState({ displayModal: true })}
-                  />{' '}
+                  />
                 </div>
                 <div className="card-body">
                   <p>
-                    <i className="fa fa-calendar" aria-hidden="true" />{' '}
+                    <i
+                      className="fa fa-calendar custom-fa"
+                      aria-hidden="true"
+                    />
                     Start at {activity.activity_date}
                   </p>
                   <p>
-                    <i className="fa fa-clock-o" aria-hidden="true" />{' '}
+                    <i className="fa fa-clock-o custom-fa" aria-hidden="true" />
                     Duration: {activity.duration} {' '}
                     {activity.pauses !== '0:00:00' &&
                      activity.pauses !== null && (
@@ -76,22 +87,24 @@ class ActivityDisplay extends React.Component {
                     )}
                   </p>
                   <p>
-                    <i className="fa fa-road" aria-hidden="true" />{' '}
+                    <i className="fa fa-road custom-fa" aria-hidden="true" />
                     Distance: {activity.distance} km</p>
                   <p>
-                    <i className="fa fa-tachometer" aria-hidden="true" />
+                    <i
-                    {' '}
+                      className="fa fa-tachometer custom-fa"
+                      aria-hidden="true"
+                    />
                     Average speed: {activity.ave_speed} km/h -{' '}
                     Max speed : {activity.max_speed} km/h
                   </p>
                   {activity.min_alt && activity.max_alt && (
-                  <p><i className="fi-mountains" />{' '}
+                  <p><i className="fi-mountains custom-fa" />
                     Min altitude: {activity.min_alt}m -{' '}
                     Max altitude: {activity.max_alt}m
                   </p>
                   )}
                   {activity.ascent && activity.descent && (
-                  <p><i className="fa fa-location-arrow" />{' '}
+                  <p><i className="fa fa-location-arrow custom-fa" />
                     Ascent: {activity.ascent}m -{' '}
                     Descent: {activity.descent}m
                   </p>

mpwo_client/src/components/Activities/ActivityEdit.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+import { connect } from 'react-redux'
+
+import ActivityAddOrEdit from './ActivityAddOrEdit'
+import { getData } from '../../actions/index'
+
+
+class ActivityEdit extends React.Component {
+  componentDidMount() {
+    this.props.loadActivity(
+      this.props.match.params.activityId
+    )
+  }
+
+  render() {
+    const { activities, message, sports } = this.props
+    const [activity] = activities
+    return (
+      <div>
+        <Helmet>
+          <title>mpwo - Edit activity</title>
+        </Helmet>
+        <br /><br />
+        {message && (
+          <code>{message}</code>
+        )}
+        {sports.length > 0 && (
+          <ActivityAddOrEdit
+            activity={activity}
+            sports={sports}
+          />
+        )}
+      </div>
+    )
+  }
+}
+
+export default connect(
+  state => ({
+    activities: state.activities.data,
+    message: state.message,
+    sports: state.sports.data,
+    user: state.user,
+  }),
+  dispatch => ({
+    loadActivity: activityId => {
+      dispatch(getData('sports'))
+      dispatch(getData('activities', activityId))
+    },
+  })
+)(ActivityEdit)

mpwo_client/src/components/Activities/ActivityForms/FormWithoutGpx.jsx

@@ -1,12 +1,22 @@
 import React from 'react'
 import { connect } from 'react-redux'
 
-import { addActivityWithoutGpx } from '../../../actions/activities'
+import {
+  addActivityWithoutGpx, editActivity
+} from '../../../actions/activities'
 import { history } from '../../../index'
-
+import { formatActivityDate } from '../../../utils'
 
 function FormWithoutGpx (props) {
-  const { onAddSport, sports } = props
+  const { activity, onAddOrEdit, sports } = props
+  let activityDate, activityTime, sportId = ''
+  if (activity) {
+    const activityDateTime = formatActivityDate(activity.activity_date)
+    activityDate = activityDateTime.activity_date
+    activityTime = activityDateTime.activity_time
+    sportId = activity.sport_id
+  }
+
   return (
     <form
       onSubmit={event => event.preventDefault()}
@@ -16,6 +26,7 @@ function FormWithoutGpx (props) {
           Sport:
           <select
             className="form-control input-lg"
+            defaultValue={sportId}
             name="sport_id"
             required
           >
@@ -35,12 +46,14 @@ function FormWithoutGpx (props) {
             <div className="row">
               <input
                 name="activity_date"
+                defaultValue={activityDate}
                 className="form-control col-md"
                 required
                 type="date"
               />
               <input
                 name="activity_time"
+                defaultValue={activityTime}
                 className="form-control col-md"
                 required
                 type="time"
@@ -54,8 +67,9 @@ function FormWithoutGpx (props) {
           Duration:
             <input
               name="duration"
+              defaultValue={activity ? activity.duration : ''}
               className="form-control col-xs-4"
-              pattern="([0-2][0-3]):([0-5][0-9]):([0-5][0-9])"
+              pattern="^([0-9]*[0-9]):([0-5][0-9]):([0-5][0-9])$"
               placeholder="hh:mm:ss"
               required
               type="text"
@@ -67,6 +81,7 @@ function FormWithoutGpx (props) {
           Distance (km):
           <input
             name="distance"
+            defaultValue={activity ? activity.distance : ''}
             className="form-control input-lg"
             min={0}
             required
@@ -77,7 +92,7 @@ function FormWithoutGpx (props) {
       <input
         type="submit"
         className="btn btn-primary btn-lg btn-block"
-        onClick={event => onAddSport(event)}
+        onClick={event => onAddOrEdit(event, activity)}
         value="Submit"
       />
       <input
@@ -93,7 +108,7 @@ function FormWithoutGpx (props) {
 export default connect(
   () => ({ }),
   dispatch => ({
-    onAddSport: e => {
+    onAddOrEdit: (e, activity) => {
       const d = e.target.form.duration.value.split(':')
       const duration = +d[0] * 60 * 60 + +d[1] * 60 + +d[2]
 
@@ -106,7 +121,12 @@ export default connect(
         duration,
         sport_id: +e.target.form.sport_id.value,
       }
-      dispatch(addActivityWithoutGpx(data))
+      if (activity) {
+        data.id = activity.id
+        dispatch(editActivity(data))
+      } else {
+        dispatch(addActivityWithoutGpx(data))
+      }
     },
   })
 )(FormWithoutGpx)

mpwo_client/src/components/Activities/index.jsx

@@ -5,6 +5,7 @@ import { Redirect, Route, Switch } from 'react-router-dom'
 
 import ActivityAdd from './ActivityAdd'
 import ActivityDisplay from './ActivityDisplay'
+import ActivityEdit from './ActivityEdit'
 import NotFound from './../Others/NotFound'
 import { isLoggedIn } from '../../utils'
 
@@ -19,7 +20,14 @@ class Activity extends React.Component {
         {isLoggedIn() ? (
           <Switch>
             <Route exact path="/activities/add" component={ActivityAdd} />
-            <Route path="/activities" component={ActivityDisplay} />
+            <Route
+              exact path="/activities/:activityId"
+              component={ActivityDisplay}
+            />
+            <Route
+              exact path="/activities/:activityId/edit"
+              component={ActivityEdit}
+            />
             <Route component={NotFound} />
           </Switch>
         ) : (<Redirect to="/login" />)}

mpwo_client/src/components/App.css

@@ -91,3 +91,11 @@ input, textarea {
   padding: 50px;
   z-index: 1040;
 }
+
+.custom-fa {
+  margin-right: 5px;
+}
+
+.unlink {
+  color: black;
+}

mpwo_client/src/utils.js

@@ -1,4 +1,5 @@
 import togeojson from '@mapbox/togeojson'
+import { format, parse } from 'date-fns'
 import bbox from 'geojson-bbox'
 
 export const apiUrl = `${process.env.REACT_APP_API_URL}/api/`
@@ -31,3 +32,11 @@ export const getGeoJson = gpxContent => {
   }
   return { jsonData, bounds }
 }
+
+export const formatActivityDate = activityDateTime => {
+  const dateTime = parse(activityDateTime)
+  return {
+    activity_date: format(dateTime, 'YYYY-MM-DD'),
+    activity_time: activityDateTime.match(/[0-2][0-9]:[0-5][0-9]/)[0]
+  }
+}