103 lines
3.2 KiB
JavaScript
103 lines
3.2 KiB
JavaScript
import React from 'react'
|
|
import { Helmet } from 'react-helmet'
|
|
import { connect } from 'react-redux'
|
|
|
|
import ActivityMap from './ActivityMap'
|
|
import { getData } from '../../actions/index'
|
|
|
|
class ActivityDisplay extends React.Component {
|
|
componentDidMount() {
|
|
this.props.loadActivity(
|
|
this.props.location.pathname.replace('/activities/', '')
|
|
)
|
|
}
|
|
render() {
|
|
const { activities, message, sports } = this.props
|
|
const [activity] = activities
|
|
return (
|
|
<div>
|
|
<Helmet>
|
|
<title>mpwo - Activity</title>
|
|
</Helmet>
|
|
<h1 className="page-title">
|
|
Activity
|
|
</h1>
|
|
{message ? (
|
|
<code>{message}</code>
|
|
) : (
|
|
<div className="container">
|
|
{activity && sports.length > 0 && (
|
|
<div className="row">
|
|
<div className="col-md-6">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
{sports.filter(sport => sport.id === activity.sport_id)
|
|
.map(sport => sport.label)} -{' '}
|
|
{activity.activity_date}
|
|
</div>
|
|
<div className="card-body">
|
|
<p>
|
|
<i className="fa fa-calendar" aria-hidden="true" />{' '}
|
|
Start at {activity.activity_date}
|
|
</p>
|
|
<p>
|
|
<i className="fa fa-clock-o" aria-hidden="true" />{' '}
|
|
Duration: {activity.duration} {' '}
|
|
{activity.pauses !== '0:00:00' && (
|
|
`(pauses: ${activity.pauses})`
|
|
)}
|
|
</p>
|
|
<p>
|
|
<i className="fa fa-road" aria-hidden="true" />{' '}
|
|
Distance: {activity.distance} km</p>
|
|
<p>
|
|
<i className="fa fa-tachometer" aria-hidden="true" />
|
|
{' '}
|
|
Average speed: {activity.ave_speed} km/h -{' '}
|
|
Max speed : {activity.max_speed} km/h
|
|
</p>
|
|
<p><i className="fi-mountains" />{' '}
|
|
Min altitude: {activity.min_alt}m -{' '}
|
|
Max altitude: {activity.max_alt}m
|
|
</p>
|
|
<p><i className="fa fa-location-arrow" />{' '}
|
|
Ascent: {activity.ascent}m -{' '}
|
|
Descent: {activity.descent}m
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
Map
|
|
</div>
|
|
<div className="card-body">
|
|
<ActivityMap />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default connect(
|
|
state => ({
|
|
activities: state.activities.data,
|
|
message: state.message,
|
|
sports: state.sports.data,
|
|
user: state.user,
|
|
}),
|
|
dispatch => ({
|
|
loadActivity: activityId => {
|
|
dispatch(getData('activities', activityId))
|
|
dispatch(getData('sports'))
|
|
},
|
|
})
|
|
)(ActivityDisplay)
|