API & Client: add an activity w/o gpx

mpwo_client/src/actions/activities.js

@@ -19,6 +19,18 @@ export const addActivity = form => dispatch => mpwoApi
   .catch(error => dispatch(setError(`activities: ${error}`)))
 
 
+export const addActivityWithoutGpx = form => dispatch => mpwoApi
+  .addActivityWithoutGpx(form)
+  .then(ret => {
+    if (ret.status === 'created') {
+      history.push('/')
+    } else {
+      dispatch(setError(`activities: ${ret.message}`))
+    }
+  })
+  .catch(error => dispatch(setError(`activities: ${error}`)))
+
+
 export const getActivityGpx = activityId => dispatch => {
   if (activityId) {
     return mpwoApi

mpwo_client/src/components/Activities/ActivityAdd.jsx

@@ -3,16 +3,33 @@ import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
 
 import FormWithGpx from './ActivityForms/FormWithGpx'
+import FormWithoutGpx from './ActivityForms/FormWithoutGpx'
 import { getData } from '../../actions/index'
 
 
 class AddActivity extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      withGpx: true,
+    }
+  }
+
   componentDidMount() {
       this.props.loadSports()
   }
 
+  handleRadioChange (changeEvent) {
+    this.setState({
+      withGpx:
+        changeEvent.target.name === 'withGpx'
+          ? changeEvent.target.value : !changeEvent.target.value
+    })
+  }
+
   render() {
     const { message, sports } = this.props
+    const { withGpx } = this.state
     return (
       <div>
         <Helmet>
@@ -32,7 +49,37 @@ class AddActivity extends React.Component {
                   Add a sport
                 </h2>
                 <div className="card-body">
-                  <FormWithGpx sports={sports} />
+                  <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>

mpwo_client/src/components/Activities/ActivityDisplay.jsx

@@ -43,7 +43,8 @@ class ActivityDisplay extends React.Component {
                   <p>
                     <i className="fa fa-clock-o" aria-hidden="true" />{' '}
                     Duration: {activity.duration} {' '}
-                    {activity.pauses !== '0:00:00' && (
+                    {activity.pauses !== '0:00:00' &&
+                     activity.pauses !== null && (
                         `(pauses: ${activity.pauses})`
                     )}
                   </p>
@@ -56,14 +57,18 @@ class ActivityDisplay extends React.Component {
                     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" />{' '}
                     Min altitude: {activity.min_alt}m -{' '}
                     Max altitude: {activity.max_alt}m
                   </p>
+                  )}
+                  {activity.ascent && activity.descent && (
                   <p><i className="fa fa-location-arrow" />{' '}
                     Ascent: {activity.ascent}m -{' '}
                     Descent: {activity.descent}m
                   </p>
+                  )}
                 </div>
               </div>
             </div>
@@ -73,7 +78,11 @@ class ActivityDisplay extends React.Component {
                   Map
                 </div>
                 <div className="card-body">
-                  <ActivityMap activity={activity} />
+                  {activity.with_gpx ? (
+                    <ActivityMap activity={activity} />
+                  ) : (
+                    'No map'
+                  )}
                 </div>
               </div>
             </div>

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

@@ -0,0 +1,96 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+import { addActivityWithoutGpx } from '../../../actions/activities'
+import { history } from '../../../index'
+
+
+function FormWithoutGpx (props) {
+  const { onAddSport, sports } = props
+  return (
+    <form
+      onSubmit={event => event.preventDefault()}
+    >
+      <div className="form-group">
+        <label>
+          Sport:
+          <select
+            className="form-control input-lg"
+            name="sport_id"
+            required
+          >
+            <option value="" />
+            {sports.map(sport => (
+              <option key={sport.id} value={sport.id}>
+                {sport.label}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+      <div className="form-group">
+        <label>
+          Activity Date:
+          <input
+            name="activity_date"
+            className="form-control input-lg"
+            type="date"
+          />
+        </label>
+      </div>
+      <div className="form-group">
+        <label>
+          Duration:
+          <input
+            name="duration"
+            className="form-control input-lg"
+            type="text"
+          />
+        </label>
+      </div>
+      <div className="form-group">
+        <label>
+          Distance (km):
+          <input
+            name="distance"
+            className="form-control input-lg"
+            type="number"
+          />
+        </label>
+      </div>
+      <input
+        type="submit"
+        className="btn btn-primary btn-lg btn-block"
+        onClick={event => onAddSport(event)}
+        value="Submit"
+      />
+      <input
+        type="submit"
+        className="btn btn-secondary btn-lg btn-block"
+        onClick={() => history.go(-1)}
+        value="Cancel"
+      />
+    </form>
+  )
+}
+
+export default connect(
+  () => ({ }),
+  dispatch => ({
+    onAddSport: e => {
+      const data = [].slice
+        .call(e.target.form.elements)
+        .reduce(function(map, obj) {
+          if (obj.name) {
+            if (obj.name === 'duration' || obj.name === 'distance') {
+              map[obj.name] = +obj.value
+            } else {
+              map[obj.name] = obj.value
+            }
+          }
+          return map
+        }, {})
+      dispatch(addActivityWithoutGpx(data))
+    },
+  })
+)(FormWithoutGpx)

mpwo_client/src/components/App.css

@@ -64,3 +64,7 @@ input, textarea {
 .leaflet-container {
   height: 240px;
 }
+
+.radioLabel {
+  text-align: center;
+}

mpwo_client/src/mwpoApi/activities.js

@@ -15,6 +15,20 @@ export default class MpwoApi {
       .catch(error => error)
   }
 
+  static addActivityWithoutGpx(data) {
+    const request = new Request(`${apiUrl}activities/no_gpx`, {
+      method: 'POST',
+      headers: new Headers({
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${window.localStorage.getItem('authToken')}`,
+      }),
+      body: JSON.stringify(data)
+    })
+    return fetch(request)
+      .then(response => response.json())
+      .catch(error => error)
+  }
+
   static getActivityGpx(activityId) {
     const request = new Request(`${apiUrl}activities/${activityId}/gpx`, {
       method: 'GET',