Client: activities navigation
This commit is contained in:
Sam
parent
f744eb0769
commit
948e49beef
@ -21,6 +21,13 @@ class ActivityDisplay extends React.Component {
|
||||
this.props.loadActivity(this.props.match.params.activityId)
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.match.params.activityId !==
|
||||
this.props.match.params.activityId) {
|
||||
this.props.loadActivity(this.props.match.params.activityId)
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { activities, message, onDeleteActivity, sports } = this.props
|
||||
const { displayModal } = this.state
|
||||
@ -41,7 +48,7 @@ class ActivityDisplay extends React.Component {
|
||||
<code>{message}</code>
|
||||
) : (
|
||||
<div className="container">
|
||||
{ displayModal &&
|
||||
{displayModal &&
|
||||
<CustomModal
|
||||
title="Confirmation"
|
||||
text="Are you sure you want to delete this activity?"
|
||||
@ -57,6 +64,24 @@ class ActivityDisplay extends React.Component {
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<div className="row">
|
||||
<div className="col-auto">
|
||||
{activity.previous_activity ? (
|
||||
<Link
|
||||
className="unlink"
|
||||
to={`/activities/${activity.previous_activity}`}
|
||||
>
|
||||
<i
|
||||
className="fa fa-chevron-left"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Link>
|
||||
) : (
|
||||
<i
|
||||
className="fa fa-chevron-left inactive-link"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-auto col-activity-logo">
|
||||
<img
|
||||
className="sport-img-medium"
|
||||
@ -78,7 +103,9 @@ class ActivityDisplay extends React.Component {
|
||||
<i
|
||||
className="fa fa-trash custom-fa"
|
||||
aria-hidden="true"
|
||||
onClick={() => this.setState({ displayModal: true })}
|
||||
onClick={
|
||||
() => this.setState({ displayModal: true })
|
||||
}
|
||||
/><br />
|
||||
{activityDate && (
|
||||
<span className="activity-date">
|
||||
@ -87,6 +114,24 @@ class ActivityDisplay extends React.Component {
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
{activity.next_activity ? (
|
||||
<Link
|
||||
className="unlink"
|
||||
to={`/activities/${activity.next_activity}`}
|
||||
>
|
||||
<i
|
||||
className="fa fa-chevron-right"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Link>
|
||||
) : (
|
||||
<i
|
||||
className="fa fa-chevron-right inactive-link"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
@ -103,7 +148,8 @@ class ActivityDisplay extends React.Component {
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Duration: {activity.duration}
|
||||
{activity.records.find(r => r.record_type === 'LD') && (
|
||||
{activity.records.find(r => r.record_type === 'LD'
|
||||
) && (
|
||||
<sup>
|
||||
<i
|
||||
className="fa fa-trophy custom-fa"
|
||||
@ -122,7 +168,8 @@ class ActivityDisplay extends React.Component {
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Distance: {activity.distance} km
|
||||
{activity.records.find(r => r.record_type === 'FD') && (
|
||||
{activity.records.find(r => r.record_type === 'FD'
|
||||
) && (
|
||||
<sup>
|
||||
<i
|
||||
className="fa fa-trophy custom-fa"
|
||||
@ -137,7 +184,8 @@ class ActivityDisplay extends React.Component {
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Average speed: {activity.ave_speed} km/h
|
||||
{activity.records.find(r => r.record_type === 'AS') && (
|
||||
{activity.records.find(r => r.record_type === 'AS'
|
||||
) && (
|
||||
<sup>
|
||||
<i
|
||||
className="fa fa-trophy custom-fa"
|
||||
@ -147,7 +195,8 @@ class ActivityDisplay extends React.Component {
|
||||
)}
|
||||
<br />
|
||||
Max speed : {activity.max_speed} km/h
|
||||
{activity.records.find(r => r.record_type === 'MS') && (
|
||||
{activity.records.find(r => r.record_type === 'MS'
|
||||
) && (
|
||||
<sup>
|
||||
<i
|
||||
className="fa fa-trophy custom-fa"
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import hash from 'object-hash'
|
||||
import React from 'react'
|
||||
import { GeoJSON, Map, TileLayer } from 'react-leaflet'
|
||||
import { connect } from 'react-redux'
|
||||
@ -18,6 +19,13 @@ class ActivityMap extends React.Component {
|
||||
this.props.loadActivityGpx(this.props.activity.id)
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.activity.id !==
|
||||
this.props.activity.id) {
|
||||
this.props.loadActivityGpx(this.props.activity.id)
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.props.loadActivityGpx(null)
|
||||
}
|
||||
@ -44,7 +52,11 @@ class ActivityMap extends React.Component {
|
||||
// eslint-disable-next-line max-len
|
||||
url={`https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=${thunderforestApiKey}`}
|
||||
/>
|
||||
<GeoJSON data={jsonData} />
|
||||
<GeoJSON
|
||||
// hash as a key to force re-rendering
|
||||
key={hash(jsonData)}
|
||||
data={jsonData}
|
||||
/>
|
||||
</Map>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -124,6 +124,10 @@ input, textarea {
|
||||
max-height: 35px;
|
||||
}
|
||||
|
||||
.inactive-link {
|
||||
color: lightgrey;
|
||||
}
|
||||
|
||||
.sport-img-medium {
|
||||
max-width: 45px;
|
||||
max-height: 45px;
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
"date-fns": "^1.29.0",
|
||||
"history": "^4.7.2",
|
||||
"leaflet": "^1.3.1",
|
||||
"object-hash": "^1.3.0",
|
||||
"react": "^16.3.2",
|
||||
"react-dom": "^16.3.2",
|
||||
"react-helmet": "^5.2.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user