Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

API & Client: display map image for activities w/ gpx on dashboard

Browse Source
This commit is contained in:
Sam
2018-05-30 13:35:27 +02:00
parent 2c5c7f609a
commit 7d410956b5
7 changed files with 187 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
mpwo_client/src/components/Dashboard/ActivityCard.jsx
View File

@ -1,6 +1,8 @@
import React from 'react'
import { Link } from 'react-router-dom'
import { apiUrl } from '../../utils'
export default function ActivityCard (props) {
const { activity, sports } = props
@ -14,16 +16,35 @@ export default function ActivityCard (props) {
</Link>
</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} -{' '}
<i className="fa fa-road" aria-hidden="true" />{' '}
Distance: {activity.distance} km
</p>
<div className="row">
{activity.map && (
<div className="col">
<img
alt="Map"
src={`${apiUrl}activities/map/${activity.map}` +
`?${Date.now()}`}
className="img-fluid"
/>
</div>
)}
<div className="col">
<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.map ? (
<span><br /><br /></span>
) : (
' - '
)}
<i className="fa fa-road" aria-hidden="true" />{' '}
Distance: {activity.distance} km
</p>
</div>
</div>
</div>
</div>
)