2018-06-07 17:06:41 +02:00
|
|
|
import { format } from 'date-fns'
|
|
|
|
import React from 'react'
|
|
|
|
import { Link } from 'react-router-dom'
|
|
|
|
|
2018-06-11 15:24:34 +02:00
|
|
|
import { getDateWithTZ } from '../../utils'
|
|
|
|
|
2018-06-07 17:06:41 +02:00
|
|
|
export default function ActivitiesList (props) {
|
2018-06-11 15:24:34 +02:00
|
|
|
const { activities, sports, user } = props
|
2018-06-07 17:06:41 +02:00
|
|
|
return (
|
2018-06-11 22:42:04 +02:00
|
|
|
<div className="card activity-card">
|
2018-06-07 21:01:46 +02:00
|
|
|
<div className="card-body">
|
2018-06-07 17:06:41 +02:00
|
|
|
<table className="table">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th scope="col" />
|
|
|
|
<th scope="col">Workout</th>
|
|
|
|
<th scope="col">Date</th>
|
|
|
|
<th scope="col">Distance</th>
|
|
|
|
<th scope="col">Duration</th>
|
|
|
|
<th scope="col">Ave. speed</th>
|
2018-06-11 22:42:04 +02:00
|
|
|
<th scope="col">Max. speed</th>
|
2018-06-07 17:06:41 +02:00
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
{ sports && activities.map((activity, idx) => (
|
|
|
|
// eslint-disable-next-line react/no-array-index-key
|
|
|
|
<tr key={idx}>
|
|
|
|
<td >
|
|
|
|
<img
|
|
|
|
className="activity-sport"
|
|
|
|
src={sports
|
|
|
|
.filter(s => s.id === activity.sport_id)
|
|
|
|
.map(s => s.img)}
|
|
|
|
alt="activity sport logo"
|
|
|
|
/>
|
|
|
|
</td>
|
|
|
|
<td >
|
|
|
|
<Link to={`/activities/${activity.id}`}>
|
|
|
|
{activity.title}
|
|
|
|
</Link>
|
|
|
|
</td>
|
2018-06-11 15:24:34 +02:00
|
|
|
<td>
|
|
|
|
{format(
|
|
|
|
getDateWithTZ(activity.activity_date, user.timezone),
|
|
|
|
'DD/MM/YYYY HH:mm'
|
|
|
|
)}
|
|
|
|
</td>
|
2018-06-07 17:50:22 +02:00
|
|
|
<td className="text-right">
|
|
|
|
{Number(activity.distance).toFixed(2)} km
|
|
|
|
</td>
|
|
|
|
<td className="text-right">{activity.duration}</td>
|
|
|
|
<td className="text-right">{activity.ave_speed} km/h</td>
|
2018-06-11 22:42:04 +02:00
|
|
|
<td className="text-right">{activity.max_speed} km/h</td>
|
2018-06-07 17:06:41 +02:00
|
|
|
</tr>
|
|
|
|
))}
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|