2018-06-13 17:18:12 +02:00
|
|
|
import React from 'react'
|
|
|
|
|
|
|
|
export default function ActivityWeather(props) {
|
|
|
|
const { activity } = props
|
|
|
|
return (
|
|
|
|
<div className="container">
|
|
|
|
{activity.weather_start && activity.weather_end && (
|
2019-08-28 15:35:22 +02:00
|
|
|
<table className="table table-borderless weather-table text-center">
|
2018-06-13 17:18:12 +02:00
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th />
|
|
|
|
<th>
|
|
|
|
Start
|
|
|
|
<br />
|
|
|
|
<img
|
|
|
|
className="weather-img"
|
|
|
|
src={`/img/weather/${activity.weather_start.icon}.png`}
|
|
|
|
alt={`activity weather (${activity.weather_start.icon})`}
|
|
|
|
title={activity.weather_start.summary}
|
|
|
|
/>
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
End
|
|
|
|
<br />
|
|
|
|
<img
|
|
|
|
className="weather-img"
|
|
|
|
src={`/img/weather/${activity.weather_end.icon}.png`}
|
|
|
|
alt={`activity weather (${activity.weather_end.icon})`}
|
|
|
|
title={activity.weather_end.summary}
|
|
|
|
/>
|
|
|
|
</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
|
|
<img
|
|
|
|
className="weather-img-small"
|
|
|
|
src="/img/weather/temperature.png"
|
|
|
|
alt="Temperatures"
|
|
|
|
/>
|
|
|
|
</td>
|
2019-08-28 15:35:22 +02:00
|
|
|
<td>{Number(activity.weather_start.temperature).toFixed(1)}°C</td>
|
|
|
|
<td>{Number(activity.weather_end.temperature).toFixed(1)}°C</td>
|
2018-06-13 17:18:12 +02:00
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
|
|
<img
|
|
|
|
className="weather-img-small"
|
|
|
|
src="/img/weather/pour-rain.png"
|
|
|
|
alt="Temperatures"
|
|
|
|
/>
|
|
|
|
</td>
|
|
|
|
<td>
|
2018-06-13 18:52:39 +02:00
|
|
|
{Number(activity.weather_start.humidity * 100).toFixed(1)}%
|
2018-06-13 17:18:12 +02:00
|
|
|
</td>
|
2019-08-28 15:35:22 +02:00
|
|
|
<td>{Number(activity.weather_end.humidity * 100).toFixed(1)}%</td>
|
2018-06-13 17:18:12 +02:00
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
|
|
<img
|
|
|
|
className="weather-img-small"
|
|
|
|
src="/img/weather/breeze.png"
|
|
|
|
alt="Temperatures"
|
|
|
|
/>
|
|
|
|
</td>
|
2019-08-28 15:35:22 +02:00
|
|
|
<td>{Number(activity.weather_start.wind).toFixed(1)}m/s</td>
|
|
|
|
<td>{Number(activity.weather_end.wind).toFixed(1)}m/s</td>
|
2018-06-13 17:18:12 +02:00
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|