74 lines
2.3 KiB
JavaScript
74 lines
2.3 KiB
JavaScript
import React from 'react'
|
|
|
|
import ActivityWeather from './ActivityWeather'
|
|
|
|
export default function ActivityDetails(props) {
|
|
const { activity } = props
|
|
const withPauses = activity.pauses !== '0:00:00' && activity.pauses !== null
|
|
return (
|
|
<div className="activity-details">
|
|
<p>
|
|
<i className="fa fa-clock-o custom-fa" aria-hidden="true" />
|
|
Duration: {activity.moving}
|
|
{activity.records &&
|
|
activity.records.find(r => r.record_type === 'LD') && (
|
|
<sup>
|
|
<i className="fa fa-trophy custom-fa" aria-hidden="true" />
|
|
</sup>
|
|
)}
|
|
{withPauses && (
|
|
<span>
|
|
<br />
|
|
(pauses: {activity.pauses}, total duration: {activity.duration})
|
|
</span>
|
|
)}
|
|
</p>
|
|
<p>
|
|
<i className="fa fa-road custom-fa" aria-hidden="true" />
|
|
Distance: {activity.distance} km
|
|
{activity.records &&
|
|
activity.records.find(r => r.record_type === 'FD') && (
|
|
<sup>
|
|
<i className="fa fa-trophy custom-fa" aria-hidden="true" />
|
|
</sup>
|
|
)}
|
|
</p>
|
|
<p>
|
|
<i className="fa fa-tachometer custom-fa" aria-hidden="true" />
|
|
Average speed: {activity.ave_speed} km/h
|
|
{activity.records &&
|
|
activity.records.find(r => r.record_type === 'AS') && (
|
|
<sup>
|
|
<i className="fa fa-trophy custom-fa" aria-hidden="true" />
|
|
</sup>
|
|
)}
|
|
<br />
|
|
Max speed : {activity.max_speed} km/h
|
|
{activity.records &&
|
|
activity.records.find(r => r.record_type === 'MS') && (
|
|
<sup>
|
|
<i className="fa fa-trophy custom-fa" aria-hidden="true" />
|
|
</sup>
|
|
)}
|
|
</p>
|
|
{activity.min_alt && activity.max_alt && (
|
|
<p>
|
|
<i className="fi-mountains custom-fa" />
|
|
Min altitude: {activity.min_alt}m
|
|
<br />
|
|
Max altitude: {activity.max_alt}m
|
|
</p>
|
|
)}
|
|
{activity.ascent && activity.descent && (
|
|
<p>
|
|
<i className="fa fa-location-arrow custom-fa" />
|
|
Ascent: {activity.ascent}m
|
|
<br />
|
|
Descent: {activity.descent}m
|
|
</p>
|
|
)}
|
|
<ActivityWeather activity={activity} />
|
|
</div>
|
|
)
|
|
}
|