2018-05-08 16:42:10 +02:00
|
|
|
import React from 'react'
|
|
|
|
import { connect } from 'react-redux'
|
|
|
|
|
2018-05-29 20:08:34 +02:00
|
|
|
import { setLoading } from '../../../actions/index'
|
2018-05-11 17:55:46 +02:00
|
|
|
import { addActivity, editActivity } from '../../../actions/activities'
|
2018-05-08 16:42:10 +02:00
|
|
|
import { history } from '../../../index'
|
|
|
|
|
|
|
|
|
|
|
|
function FormWithGpx (props) {
|
2018-05-29 20:08:34 +02:00
|
|
|
const {
|
|
|
|
activity, loading, onAddActivity, onEditActivity, sports
|
|
|
|
} = props
|
2018-05-11 17:55:46 +02:00
|
|
|
const sportId = activity ? activity.sport_id : ''
|
2018-05-08 16:42:10 +02:00
|
|
|
return (
|
|
|
|
<form
|
|
|
|
encType="multipart/form-data"
|
|
|
|
method="post"
|
|
|
|
onSubmit={event => event.preventDefault()}
|
|
|
|
>
|
|
|
|
<div className="form-group">
|
|
|
|
<label>
|
|
|
|
Sport:
|
|
|
|
<select
|
|
|
|
className="form-control input-lg"
|
2018-05-11 17:55:46 +02:00
|
|
|
defaultValue={sportId}
|
2018-05-29 20:08:34 +02:00
|
|
|
disabled={loading}
|
2018-05-08 16:42:10 +02:00
|
|
|
name="sport"
|
|
|
|
required
|
|
|
|
>
|
|
|
|
<option value="" />
|
|
|
|
{sports.map(sport => (
|
|
|
|
<option key={sport.id} value={sport.id}>
|
|
|
|
{sport.label}
|
|
|
|
</option>
|
|
|
|
))}
|
|
|
|
</select>
|
|
|
|
</label>
|
|
|
|
</div>
|
2018-05-13 12:52:22 +02:00
|
|
|
{activity ? (
|
|
|
|
<div className="form-group">
|
|
|
|
<label>
|
|
|
|
Title:
|
|
|
|
<input
|
|
|
|
name="title"
|
|
|
|
defaultValue={activity ? activity.title : ''}
|
2018-05-29 20:08:34 +02:00
|
|
|
disabled={loading}
|
2018-05-13 12:52:22 +02:00
|
|
|
className="form-control input-lg"
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
) : (
|
2018-05-11 17:55:46 +02:00
|
|
|
<div className="form-group">
|
|
|
|
<label>
|
2018-05-29 20:08:34 +02:00
|
|
|
<strong>gpx</strong> file or <strong>zip</strong>{' '}
|
|
|
|
file containing <strong>gpx</strong> (no folder inside):
|
2018-05-11 17:55:46 +02:00
|
|
|
<input
|
2018-05-29 20:08:34 +02:00
|
|
|
accept=".gpx, .zip"
|
2018-05-11 17:55:46 +02:00
|
|
|
className="form-control input-lg"
|
2018-05-29 20:08:34 +02:00
|
|
|
disabled={loading}
|
2018-05-11 17:55:46 +02:00
|
|
|
name="gpxFile"
|
|
|
|
required
|
|
|
|
type="file"
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
)}
|
2018-05-29 20:08:34 +02:00
|
|
|
{loading ? (
|
|
|
|
<div className="loader" />
|
|
|
|
) : (
|
|
|
|
<div>
|
|
|
|
<input
|
|
|
|
type="submit"
|
|
|
|
className="btn btn-primary btn-lg btn-block"
|
|
|
|
onClick={
|
|
|
|
event => activity
|
|
|
|
? onEditActivity(event, activity)
|
|
|
|
: onAddActivity(event)
|
|
|
|
}
|
|
|
|
value="Submit"
|
|
|
|
/>
|
|
|
|
<input
|
|
|
|
type="submit"
|
|
|
|
className="btn btn-secondary btn-lg btn-block"
|
|
|
|
onClick={() => history.go(-1)}
|
|
|
|
value="Cancel"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)}
|
2018-05-08 16:42:10 +02:00
|
|
|
</form>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default connect(
|
2018-05-29 20:08:34 +02:00
|
|
|
state => ({
|
|
|
|
loading: state.loading
|
|
|
|
}),
|
2018-05-08 16:42:10 +02:00
|
|
|
dispatch => ({
|
2018-05-11 17:55:46 +02:00
|
|
|
onAddActivity: e => {
|
2018-06-11 19:15:38 +02:00
|
|
|
dispatch(setLoading(true))
|
2018-05-08 16:42:10 +02:00
|
|
|
const form = new FormData()
|
2018-05-11 17:55:46 +02:00
|
|
|
form.append('file', e.target.form.gpxFile.files[0])
|
2018-05-08 16:42:10 +02:00
|
|
|
form.append(
|
2018-05-11 17:55:46 +02:00
|
|
|
'data', `{"sport_id": ${e.target.form.sport.value}}`
|
2018-05-08 16:42:10 +02:00
|
|
|
)
|
|
|
|
dispatch(addActivity(form))
|
|
|
|
},
|
2018-05-11 17:55:46 +02:00
|
|
|
onEditActivity: (e, activity) => {
|
|
|
|
dispatch(editActivity({
|
|
|
|
id: activity.id,
|
2018-05-13 12:52:22 +02:00
|
|
|
sport_id: +e.target.form.sport.value,
|
|
|
|
title: e.target.form.title.value,
|
2018-05-11 17:55:46 +02:00
|
|
|
}))
|
|
|
|
},
|
2018-05-08 16:42:10 +02:00
|
|
|
})
|
|
|
|
)(FormWithGpx)
|