Client - display activity map on Activities list - fix #37

CHANGELOG.md

@@ -12,6 +12,7 @@
 * [#23](https://github.com/SamR1/Fittrackee/issues/23) - The user can choose the first day of the week
 * [#36](https://github.com/SamR1/Fittrackee/issues/36) - Disable user registration
 * [#33](https://github.com/SamR1/Fittrackee/issues/33) - Add file size limit on file upload
+* [#37](https://github.com/SamR1/Fittrackee/issues/37) - Display map on activities list
 
 #### Bugs Fixed
 
@@ -21,7 +22,7 @@
 
 * **[Poetry](https://poetry.eustace.io/)** replaces **[pipenv](https://docs.pipenv.org)** for Python packages management
 
-In this release 7 issue were closed.
+In this release 8 issue were closed.
 
 
 ## Version 0.2.0 - Statistics (2019/07/07)

docs/_sources/changelog.md.txt

@@ -12,6 +12,7 @@
 * [#23](https://github.com/SamR1/Fittrackee/issues/23) - The user can choose the first day of the week
 * [#36](https://github.com/SamR1/Fittrackee/issues/36) - Disable user registration
 * [#33](https://github.com/SamR1/Fittrackee/issues/33) - Add file size limit on file upload
+* [#37](https://github.com/SamR1/Fittrackee/issues/37) - Display map on activities list
 
 #### Bugs Fixed
 
@@ -21,7 +22,7 @@
 
 * **[Poetry](https://poetry.eustace.io/)** replaces **[pipenv](https://docs.pipenv.org)** for Python packages management
 
-In this release 7 issue were closed.
+In this release 8 issue were closed.
 
 
 ## Version 0.2.0 - Statistics (2019/07/07)

docs/changelog.html

@@ -167,6 +167,7 @@
 <li><p><a class="reference external" href="https://github.com/SamR1/Fittrackee/issues/23">#23</a> - The user can choose the first day of the week</p></li>
 <li><p><a class="reference external" href="https://github.com/SamR1/Fittrackee/issues/36">#36</a> - Disable user registration</p></li>
 <li><p><a class="reference external" href="https://github.com/SamR1/Fittrackee/issues/33">#33</a> - Add file size limit on file upload</p></li>
+<li><p><a class="reference external" href="https://github.com/SamR1/Fittrackee/issues/37">#37</a> - Display map on activities list</p></li>
 </ul>
 </div>
 <div class="section" id="bugs-fixed">
@@ -181,7 +182,7 @@
 <ul class="simple">
 <li><p><strong><a class="reference external" href="https://poetry.eustace.io/">Poetry</a></strong> replaces <strong><a class="reference external" href="https://docs.pipenv.org">pipenv</a></strong> for Python packages management</p></li>
 </ul>
-<p>In this release 7 issue were closed.</p>
+<p>In this release 8 issue were closed.</p>
 </div>
 </div>
 <div class="section" id="version-0-2-0-statistics-2019-07-07">

fittrackee_client/src/components/Activities/ActivitiesList.jsx

@@ -2,7 +2,7 @@ import { format } from 'date-fns'
 import React from 'react'
 import { Link } from 'react-router-dom'
 
-import { getDateWithTZ } from '../../utils'
+import { apiUrl, getDateWithTZ } from '../../utils'
 
 export default class ActivitiesList extends React.PureComponent {
   render() {
@@ -36,10 +36,34 @@ export default class ActivitiesList extends React.PureComponent {
                         alt="activity sport logo"
                       />
                     </td>
-                    <td>
+                    <td className="activity-title">
                       <Link to={`/activities/${activity.id}`}>
                         {activity.title}
                       </Link>
+                      {activity.map && (
+                        <span>
+                          <img
+                            className="activity-map"
+                            src={`${apiUrl}activities/map/${
+                              activity.map
+                            }?${Date.now()}`}
+                            alt="activity map"
+                          />
+                          <span className="map-attribution text-right">
+                            <div>
+                              <span className="map-attribution-text">©</span>
+                              <a
+                                className="map-attribution-text"
+                                href="http://www.openstreetmap.org/copyright"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                              >
+                                OpenStreetMap
+                              </a>
+                            </div>
+                          </span>
+                        </span>
+                      )}
                     </td>
                     <td>
                       {format(

fittrackee_client/src/components/App.css

@@ -127,6 +127,29 @@ label {
   max-height: 18px;
 }
 
+.activity-title img, .activity-title .map-attribution   {
+  display: none;
+}
+
+.activity-title:hover span img {
+  border: 1px solid lightgrey;
+  border-radius: 4px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  display:block;
+  margin-left: 10px;
+  position: absolute;
+  z-index: 1000;
+}
+
+.activity-title:hover .map-attribution {
+  display:block;
+  font-size: 11px;
+  left: -130px;
+  position:relative;
+  top: 0;
+  z-index: 1000;
+}
+
 .add-activity {
   margin-top: 50px;
 }