FitTrackee/mpwo_client/src/components/Activity/ActivityAddOrEdit.jsx

107 lines
3.3 KiB
React
Raw Normal View History

2018-05-10 16:56:45 +02:00
import React from 'react'
import { Helmet } from 'react-helmet'
import { connect } from 'react-redux'
2018-05-10 16:56:45 +02:00
import FormWithGpx from './ActivityForms/FormWithGpx'
import FormWithoutGpx from './ActivityForms/FormWithoutGpx'
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() {
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 ? (
<FormWithGpx activity={activity} sports={sports} />
2018-05-10 16:56:45 +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"
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"
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>
)
}
}
export default connect(
state => ({
loading: state.loading
}),
)(ActivityAddEdit)