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

API & Client: add weather to Activities - fix #8

Browse Source
This commit is contained in:
Sam
2018-06-13 17:18:12 +02:00
parent dda193fd13
commit aeab7a987b
23 changed files with 222 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
fittrackee_client/src/components/Activity/ActivityDisplay/ActivityDetails.jsx
View File

@ -1,11 +1,13 @@
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
const recordLDexists = activity.records.find(r => r.record_type === 'LD')
return (
<div>
<div className="activity-details">
<p>
<i
className="fa fa-clock-o custom-fa"
@ -88,6 +90,7 @@ export default function ActivityDetails(props) {
Descent: {activity.descent}m
</p>
)}
<ActivityWeather activity={activity} />
</div>
)
}

87
fittrackee_client/src/components/Activity/ActivityDisplay/ActivityWeather.jsx Normal file
View File

@ -0,0 +1,87 @@
import React from 'react'
export default function ActivityWeather(props) {
const { activity } = props
return (
<div className="container">
{activity.weather_start && activity.weather_end && (
<table
className="table table-borderless weather-table text-center"
>
<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>
<td>
{activity.weather_start.temperature}°C
</td>
<td>
{activity.weather_end.temperature}°C
</td>
</tr>
<tr>
<td>
<img
className="weather-img-small"
src="/img/weather/pour-rain.png"
alt="Temperatures"
/>
</td>
<td>
{activity.weather_start.humidity * 100}%
</td>
<td>
{activity.weather_end.humidity * 100}%
</td>
</tr>
<tr>
<td>
<img
className="weather-img-small"
src="/img/weather/breeze.png"
alt="Temperatures"
/>
</td>
<td>
{activity.weather_start.wind}m/s
</td>
<td>
{activity.weather_end.wind}m/s
</td>
</tr>
</tbody>
</table>
)}
</div>
)
}