2018-05-10 16:56:45 +02:00
|
|
|
import React from 'react'
|
|
|
|
import { Helmet } from 'react-helmet'
|
2018-05-29 20:08:34 +02:00
|
|
|
import { connect } from 'react-redux'
|
2018-05-10 16:56:45 +02:00
|
|
|
|
|
|
|
import FormWithGpx from './ActivityForms/FormWithGpx'
|
|
|
|
import FormWithoutGpx from './ActivityForms/FormWithoutGpx'
|
|
|
|
|
2018-05-29 20:08:34 +02:00
|
|
|
class ActivityAddEdit extends React.Component {
|
2018-05-10 16:56:45 +02:00
|
|
|
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() {
|
2018-05-29 20:08:34 +02:00
|
|
|
const { activity, loading, message, sports } = this.props
|
2018-05-10 16:56:45 +02:00
|
|
|
const { withGpx } = this.state
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<Helmet>
|
2018-05-10 17:21:19 +02:00
|
|
|
<title>mpwo - {activity
|
2018-05-20 19:45:18 +02:00
|
|
|
? 'Edit a workout'
|
|
|
|
: 'Add a workout'}
|
2018-05-10 17:21:19 +02:00
|
|
|
</title>
|
2018-05-10 16:56:45 +02:00
|
|
|
</Helmet>
|
|
|
|
<br /><br />
|
2018-05-10 17:21:19 +02:00
|
|
|
{message && (
|
|
|
|
<code>{message}</code>
|
|
|
|
)}
|
2018-05-10 16:56:45 +02:00
|
|
|
<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">
|
2018-05-20 19:45:18 +02:00
|
|
|
{activity ? 'Edit a workout' : 'Add a workout'}
|
2018-05-10 16:56:45 +02:00
|
|
|
</h2>
|
|
|
|
<div className="card-body">
|
|
|
|
{activity ? (
|
|
|
|
activity.with_gpx ? (
|
2018-05-11 17:55:46 +02:00
|
|
|
<FormWithGpx activity={activity} sports={sports} />
|
2018-05-10 16:56:45 +02:00
|
|
|
) : (
|
2018-05-11 17:55:46 +02:00
|
|
|
<FormWithoutGpx activity={activity} sports={sports} />
|
2018-05-10 16:56:45 +02:00
|
|
|
)
|
|
|
|
) : (
|
|
|
|
<div>
|
|
|
|
<form>
|
|
|
|
<div className="form-group row">
|
|
|
|
<div className="col">
|
|
|
|
<label className="radioLabel">
|
|
|
|
<input
|
|
|
|
type="radio"
|
|
|
|
name="withGpx"
|
2018-05-29 20:08:34 +02:00
|
|
|
disabled={loading}
|
2018-05-10 16:56:45 +02:00
|
|
|
checked={withGpx}
|
|
|
|
onChange={event => this.handleRadioChange(event)}
|
|
|
|
/>
|
|
|
|
with gpx file
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div className="col">
|
|
|
|
<label className="radioLabel">
|
|
|
|
<input
|
|
|
|
type="radio"
|
|
|
|
name="withoutGpx"
|
2018-05-29 20:08:34 +02:00
|
|
|
disabled={loading}
|
2018-05-10 16:56:45 +02:00
|
|
|
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>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-05-29 20:08:34 +02:00
|
|
|
export default connect(
|
|
|
|
state => ({
|
|
|
|
loading: state.loading
|
|
|
|
}),
|
|
|
|
)(ActivityAddEdit)
|