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

fittrackee_client/src/components/Activity/ActivityDisplay/ActivityDetails.jsx

@@ -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>
   )
 }

fittrackee_client/src/components/Activity/ActivityDisplay/ActivityWeather.jsx

@@ -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>
+  )
+}

fittrackee_client/src/components/App.css

@@ -67,6 +67,9 @@ input, textarea {
   margin-bottom: 15px;
 }
 
+.activity-details {
+  font-size: 0.95em;
+}
 .activity-date {
   font-size: 0.75em;
 }
@@ -225,6 +228,25 @@ input, textarea {
   color: black;
 }
 
+.weather-img {
+  max-width: 35px;
+  max-height: 35px;
+}
+
+.weather-img-small {
+  max-width: 20px;
+  max-height: 20px;
+}
+
+.weather-table {
+  margin-bottom: 0;
+}
+
+.weather-table table, .weather-table th, .weather-table td{
+  font-size: 0.9em;
+  padding: 0.1em;
+}
+
 .loader {
   animation: spin 2s linear infinite;
   border: 16px solid #f3f3f3;