Client - display segments - #14

2019-08-25 20:23:11 +02:00 · 2019-08-25 20:23:11 +02:00 · b2af180e05
commit b2af180e05
parent 86cb015279
10 changed files with 199 additions and 46 deletions
--- a/fittrackee_client/src/actions/activities.js
+++ b/fittrackee_client/src/actions/activities.js
@ -81,6 +81,22 @@ export const getActivityGpx = activityId => dispatch => {
  dispatch(setGpx(null))
 }

+export const getSegmentGpx = (activityId, segmentId) => dispatch => {
+  if (activityId) {
+    return FitTrackeeGenericApi
+    .getData(`activities/${activityId}/gpx/segment/${segmentId}`)
+    .then(ret => {
+      if (ret.status === 'success') {
+         dispatch(setGpx(ret.data.gpx))
+      } else {
+        dispatch(setError(`activities: ${ret.message}`))
+      }
+    })
+    .catch(error => dispatch(setError(`activities: ${error}`)))
+  }
+  dispatch(setGpx(null))
+}
+

 export const getActivityChartData = activityId => dispatch => {
  if (activityId) {
@ -98,6 +114,22 @@ export const getActivityChartData = activityId => dispatch => {
  dispatch(setChartData(null))
 }

+export const getSegmentChartData = (activityId, segmentId) => dispatch => {
+  if (activityId) {
+    return FitTrackeeGenericApi
+    .getData(`activities/${activityId}/chart_data/segment/${segmentId}`)
+    .then(ret => {
+      if (ret.status === 'success') {
+         dispatch(setChartData(formatChartData(ret.data.chart_data)))
+      } else {
+        dispatch(setError(`activities: ${ret.message}`))
+      }
+    })
+    .catch(error => dispatch(setError(`activities: ${error}`)))
+  }
+  dispatch(setChartData(null))
+}
+

 export const deleteActivity = id => dispatch => FitTrackeeGenericApi
  .deleteData('activities', id)
--- a/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityCardHeader.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityCardHeader.jsx
@ -6,32 +6,47 @@ import { formatActivityDate } from '../../../utils/activities'


 export default function ActivityCardHeader(props) {
-  const { activity, displayModal, sport, title, user } = props
+  const {
+    activity, dataType, displayModal, segmentId, sport, title, user
+  } = props
  const activityDate = activity
    ? formatActivityDate(
        getDateWithTZ(activity.activity_date, user.timezone)
      )
    : null
+
+  const previousUrl = dataType === 'segment' && segmentId !== 0
+    ? `/activities/${activity.id}/segment/${segmentId - 1}`
+    : dataType === 'activity' && activity.previous_activity
+      ? `/activities/${activity.previous_activity}`
+      : null
+    const nextUrl =
+      dataType === 'segment' && segmentId < activity.segments.length - 1
+    ? `/activities/${activity.id}/segment/${segmentId + 1}`
+    : dataType === 'activity' && activity.next_activity
+      ? `/activities/${activity.next_activity}`
+      : null
+
  return (
    <div className="container">
      <div className="row">
        <div className="col-auto">
-          {activity.previous_activity ? (
+          {previousUrl ? (
            <Link
              className="unlink"
-              to={`/activities/${activity.previous_activity}`}
+              to={previousUrl}
            >
              <i
                className="fa fa-chevron-left"
                aria-hidden="true"
-                title="See previous activity"
+                title={`See previous ${dataType}`}
              />
            </Link>
          ) : (
            <i
              className="fa fa-chevron-left inactive-link"
              aria-hidden="true"
-              title="No previous activity"
+              title={`No previous ${dataType}`}
            />
          )}
        </div>
@ -43,23 +58,37 @@ export default function ActivityCardHeader(props) {
          />
        </div>
        <div className="col">
-          {title}{' '}
-          <Link
-            className="unlink"
-            to={`/activities/${activity.id}/edit`}
-          >
+          {dataType === 'activity' ? (
+          <>
+            {title}{' '}
+            <Link
+              className="unlink"
+              to={`/activities/${activity.id}/edit`}
+            >
+              <i
+                className="fa fa-edit custom-fa"
+                aria-hidden="true"
+                title="Edit activity"
+              />
+            </Link>
            <i
-              className="fa fa-edit custom-fa"
+              className="fa fa-trash custom-fa"
              aria-hidden="true"
-              title="Edit activity"
+              onClick={() => displayModal(true)}
+              title="Delete activity"
            />
-          </Link>
-          <i
-            className="fa fa-trash custom-fa"
-            aria-hidden="true"
-            onClick={() => displayModal(true)}
-            title="Delete activity"
-          /><br />
+          </>
+          ) : (
+            <>
+              <Link
+                to={`/activities/${activity.id}`}
+              >
+                {title}
+              </Link>{' '}
+              - segment {segmentId + 1}
+            </>
+          )}
+          <br />
          {activityDate && (
            <span className="activity-date">
          {`${activityDate.activity_date} - ${activityDate.activity_time}`}
@ -67,22 +96,22 @@ export default function ActivityCardHeader(props) {
          )}
        </div>
        <div className="col-auto">
-          {activity.next_activity ? (
+          {nextUrl ? (
            <Link
              className="unlink"
-              to={`/activities/${activity.next_activity}`}
+              to={nextUrl}
            >
              <i
                className="fa fa-chevron-right"
                aria-hidden="true"
-                title="See next activity"
+                title={`See next ${dataType}`}
              />
            </Link>
          ) : (
            <i
              className="fa fa-chevron-right inactive-link"
              aria-hidden="true"
-              title="No next activity"
+              title={`No next ${dataType}`}
            />
          )}
        </div>
--- a/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityCharts.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityCharts.jsx
@ -5,7 +5,9 @@ import {
   Area, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis
 } from 'recharts'

-import { getActivityChartData } from '../../../actions/activities'
+import {
+  getActivityChartData, getSegmentChartData
+} from '../../../actions/activities'


 class ActivityCharts extends React.Component {
@ -18,14 +20,24 @@ class ActivityCharts extends React.Component {
  }

  componentDidMount() {
-    this.props.loadActivityData(this.props.activity.id)
+    if (this.props.dataType === 'activity') {
+      this.props.loadActivityData(this.props.activity.id)
+    } else {
+      this.props.loadSegmentData(this.props.activity.id, this.props.segmentId)
+    }
  }

  componentDidUpdate(prevProps) {
-    if (prevProps.activity.id !==
-      this.props.activity.id) {
+    if (this.props.dataType === 'activity' && (
+      prevProps.activity.id !== this.props.activity.id)
+    ) {
        this.props.loadActivityData(this.props.activity.id)
    }
+    if (this.props.dataType === 'segment' && (
+      prevProps.segmentId !== this.props.segmentId)
+    ) {
+      this.props.loadSegmentData(this.props.activity.id, this.props.segmentId)
+    }
  }

  componentWillUnmount() {
@ -196,5 +208,8 @@ export default connect(
    loadActivityData: activityId => {
      dispatch(getActivityChartData(activityId))
    },
+    loadSegmentData: (activityId, segmentId) => {
+      dispatch(getSegmentChartData(activityId, segmentId))
+    },
  })
 )(ActivityCharts)
--- a/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityDetails.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityDetails.jsx
@ -5,7 +5,6 @@ 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 className="activity-details">
      <p>
@ -14,7 +13,8 @@ export default function ActivityDetails(props) {
          aria-hidden="true"
        />
        Duration: {activity.moving}
-        {recordLDexists && (
+        {activity.records && activity.records.find(r => r.record_type === 'LD'
+        ) && (
          <sup>
            <i
              className="fa fa-trophy custom-fa"
@ -35,7 +35,7 @@ export default function ActivityDetails(props) {
          aria-hidden="true"
        />
        Distance: {activity.distance} km
-        {activity.records.find(r => r.record_type === 'FD'
+        {activity.records && activity.records.find(r => r.record_type === 'FD'
        ) && (
          <sup>
            <i
@ -51,7 +51,7 @@ export default function ActivityDetails(props) {
          aria-hidden="true"
        />
        Average speed: {activity.ave_speed} km/h
-        {activity.records.find(r => r.record_type === 'AS'
+        {activity.records && activity.records.find(r => r.record_type === 'AS'
        ) && (
          <sup>
            <i
@ -62,7 +62,7 @@ export default function ActivityDetails(props) {
        )}
        <br />
        Max speed : {activity.max_speed} km/h
-        {activity.records.find(r => r.record_type === 'MS'
+        {activity.records && activity.records.find(r => r.record_type === 'MS'
        ) && (
          <sup>
            <i
--- a/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityMap.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityMap.jsx
@ -3,7 +3,7 @@ import React from 'react'
 import { GeoJSON, Map, Marker, TileLayer } from 'react-leaflet'
 import { connect } from 'react-redux'

-import { getActivityGpx } from '../../../actions/activities'
+import { getActivityGpx, getSegmentGpx } from '../../../actions/activities'
 import { thunderforestApiKey } from '../../../utils'
 import { getGeoJson } from '../../../utils/activities'

@ -17,14 +17,24 @@ class ActivityMap extends React.Component {
  }

  componentDidMount() {
-    this.props.loadActivityGpx(this.props.activity.id)
+    if (this.props.dataType === 'activity') {
+      this.props.loadActivityGpx(this.props.activity.id)
+    } else {
+      this.props.loadSegmentGpx(this.props.activity.id, this.props.segmentId)
+    }
  }

  componentDidUpdate(prevProps) {
-    if (prevProps.activity.id !==
-      this.props.activity.id) {
+    if (this.props.dataType === 'activity' && (
+      prevProps.activity.id !== this.props.activity.id)
+    ) {
        this.props.loadActivityGpx(this.props.activity.id)
    }
+    if (this.props.dataType === 'segment' && (
+      prevProps.segmentId !== this.props.segmentId)
+    ) {
+      this.props.loadSegmentGpx(this.props.activity.id, this.props.segmentId)
+    }
  }

  componentWillUnmount() {
@ -32,7 +42,9 @@ class ActivityMap extends React.Component {
  }

  render() {
-    const { activity, coordinates, gpxContent } = this.props
+    const {
+      activity, coordinates, gpxContent
+    } = this.props
    const { jsonData } = getGeoJson(gpxContent)
    const bounds = [
      [activity.bounds[0], activity.bounds[1]],
@ -79,5 +91,8 @@ export default connect(
    loadActivityGpx: activityId => {
      dispatch(getActivityGpx(activityId))
    },
+    loadSegmentGpx: (activityId, segmentId) => {
+      dispatch(getSegmentGpx(activityId, segmentId))
+    },
  })
 )(ActivityMap)
--- a/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityNotes.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityNotes.jsx
@ -3,11 +3,15 @@ import React from 'react'
 export default function ActivityNotes(props) {
  const { notes } = props
  return (
-    <div className="card">
-      <div className="card-body">
-        Notes
-        <div className="activity-notes">
-          {notes ? notes : 'No notes'}
+    <div className="row">
+      <div className="col">
+        <div className="card activity-card">
+          <div className="card-body">
+            Notes
+            <div className="activity-notes">
+              {notes ? notes : 'No notes'}
+            </div>
+          </div>
        </div>
      </div>
    </div>
--- a/fittrackee_client/src/components/Activity/ActivityDisplay/ActivitySegments.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityDisplay/ActivitySegments.jsx
@ -0,0 +1,33 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+export default function ActivitySegments(props) {
+  const { segments } = props
+  return (
+    <div className="row">
+      <div className="col">
+        <div className="card activity-card">
+          <div className="card-body">
+            Segments
+            <div className="activity-segments">
+              <ul>
+                {segments.map((segment, index) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <li key={`segment-${index}`}>
+                    <Link
+                      to={`/activities/${
+                        segment.activity_id}/segment/${index}`}
+                    >
+                      segment {index + 1}
+                    </Link>{' '}
+                    ({segment.distance} km, duration: {segment.duration})
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/fittrackee_client/src/components/Activity/ActivityDisplay/index.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityDisplay/index.jsx
@ -8,6 +8,7 @@ import ActivityDetails from './ActivityDetails'
 import ActivityMap from './ActivityMap'
 import ActivityNoMap from './ActivityNoMap'
 import ActivityNotes from './ActivityNotes'
+import ActivitySegments from './ActivitySegments'
 import CustomModal from '../../Common/CustomModal'
 import { getOrUpdateData } from '../../../actions'
 import { deleteActivity } from '../../../actions/activities'
@ -66,7 +67,10 @@ class ActivityDisplay extends React.Component {
    const [sport] = activity
      ? sports.filter(s => s.id === activity.sport_id)
      : []
-
+    const segmentId = parseInt(this.props.match.params.segmentId)
+    const dataType = segmentId >= 0
+      ? 'segment'
+      : 'activity'
    return (
      <div className="activity-page">
        <Helmet>
@ -94,6 +98,8 @@ class ActivityDisplay extends React.Component {
                      <div className="card-header">
                        <ActivityCardHeader
                          activity={activity}
+                          dataType={dataType}
+                          segmentId={segmentId}
                          sport={sport}
                          title={title}
                          user={user}
@ -107,13 +113,19 @@ class ActivityDisplay extends React.Component {
                              <ActivityMap
                                activity={activity}
                                coordinates={coordinates}
+                                dataType={dataType}
+                                segmentId={segmentId}
                              />
                            ) : (
                              <ActivityNoMap />
                            )}
                          </div>
                          <div className="col">
-                            <ActivityDetails activity={activity} />
+                            <ActivityDetails
+                              activity={dataType === 'activity'
+                                ? activity
+                                : activity.segments[segmentId]}
+                            />
                          </div>
                        </div>
                      </div>
@ -130,6 +142,8 @@ class ActivityDisplay extends React.Component {
                              <div className="chart-title">Chart</div>
                              <ActivityCharts
                                activity={activity}
+                                dataType={dataType}
+                                segmentId={segmentId}
                                updateCoordinates={
                                  e => this.updateCoordinates(e)
                                }
@ -141,7 +155,14 @@ class ActivityDisplay extends React.Component {
                    </div>
                  </div>
                )}
-                <ActivityNotes notes={activity.notes} />
+                {dataType === 'activity' && (
+                  <>
+                    <ActivityNotes notes={activity.notes} />
+                    {activity.segments.length > 1 && (
+                      <ActivitySegments segments={activity.segments} />
+                    )}
+                  </>
+                )}
              </div>
            )}
          </div>
--- a/fittrackee_client/src/components/Activity/index.jsx
+++ b/fittrackee_client/src/components/Activity/index.jsx
@ -26,6 +26,10 @@ function Activity () {
            exact path="/activities/:activityId/edit"
            component={ActivityEdit}
          />
+          <Route
+            path="/activities/:activityId/segment/:segmentId"
+            component={ActivityDisplay}
+          />
          <Route component={NotFound} />
        </Switch>
      ) : (<Redirect to="/login" />)}
--- a/fittrackee_client/src/components/App.css
+++ b/fittrackee_client/src/components/App.css
@ -102,7 +102,7 @@ label {
  line-height: 400px;
 }

-.activity-notes {
+.activity-notes, .actvitiy-segments {
  font-size: 0.9em;
  font-style: italic;
  margin-top: 10px;