122 lines
4.0 KiB
JavaScript

import React from 'react'
import { Helmet } from 'react-helmet'
import { withTranslation } from 'react-i18next'
import { connect } from 'react-redux'
import FormWithGpx from './ActivityForms/FormWithGpx'
import FormWithoutGpx from './ActivityForms/FormWithoutGpx'
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, loading, message, sports, t } = this.props
const { withGpx } = this.state
return (
<div>
<Helmet>
<title>
FitTrackee -{' '}
{activity
? t('activities:Edit a workout')
: t('activities:Add a workout')}
</title>
</Helmet>
<br />
<br />
{message && <code>{message}</code>}
<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
? t('activities:Edit a workout')
: t('activities:Add a workout')}
</h2>
<div className="card-body">
{activity ? (
activity.with_gpx ? (
<FormWithGpx activity={activity} sports={sports} t={t} />
) : (
<FormWithoutGpx
activity={activity}
sports={sports}
t={t}
/>
)
) : (
<div>
<form>
<div className="form-group row">
<div className="col">
<label className="radioLabel">
<input
className="add-activity-radio"
type="radio"
name="withGpx"
disabled={loading}
checked={withGpx}
onChange={event =>
this.handleRadioChange(event)
}
/>
{t('activities:with gpx file')}
</label>
</div>
<div className="col">
<label className="radioLabel">
<input
className="add-activity-radio"
type="radio"
name="withoutGpx"
disabled={loading}
checked={!withGpx}
onChange={event =>
this.handleRadioChange(event)
}
/>
{t('activities:without gpx file')}
</label>
</div>
</div>
</form>
{withGpx ? (
<FormWithGpx sports={sports} t={t} />
) : (
<FormWithoutGpx sports={sports} t={t} />
)}
</div>
)}
</div>
</div>
</div>
<div className="col-md-2" />
</div>
</div>
</div>
)
}
}
export default withTranslation()(
connect(state => ({
loading: state.loading,
}))(ActivityAddEdit)
)