feat: elevation gain - ui

src/components/RunTable/RunRow.tsx

@@ -11,6 +11,7 @@ interface IRunRowProperties {
 
 const RunRow = ({ elementIndex, locateActivity, run, runIndex, setRunIndex }: IRunRowProperties) => {
   const distance = (run.distance / 1000.0).toFixed(2);
+  const elevation_gain = run.total_elevation_gain?.toFixed(0);
   const paceParts = run.average_speed ? formatPace(run.average_speed) : null;
   const heartRate = run.average_heartrate;
   const runTime = formatRunTime(run.moving_time);
@@ -32,6 +33,7 @@ const RunRow = ({ elementIndex, locateActivity, run, runIndex, setRunIndex }: IR
     >
       <td>{titleForRun(run)}</td>
       <td>{distance}</td>
+      <td>{elevation_gain}</td>
       {paceParts && <td>{paceParts}</td>}
       <td>{heartRate && heartRate.toFixed(0)}</td>
       <td>{runTime}</td>

src/components/RunTable/index.tsx

@@ -30,6 +30,8 @@ const RunTable = ({
   // TODO refactor?
   const sortKMFunc: SortFunc = (a, b) =>
     sortFuncInfo === 'KM' ? a.distance - b.distance : b.distance - a.distance;
+  const sortElevationGainFunc: SortFunc = (a, b) =>
+    sortFuncInfo === 'Elevation Gain' ? a.total_elevation_gain - b.total_elevation_gain : b.total_elevation_gain - a.total_elevation_gain;
   const sortPaceFunc: SortFunc = (a, b) =>
     sortFuncInfo === 'Pace'
       ? a.average_speed - b.average_speed
@@ -50,6 +52,7 @@ const RunTable = ({
     sortFuncInfo === 'Date' ? sortDateFunc : sortDateFuncReverse;
   const sortFuncMap = new Map([
     ['KM', sortKMFunc],
+    ['Elevation Gain', sortElevationGainFunc],
     ['Pace', sortPaceFunc],
     ['BPM', sortBPMFunc],
     ['Time', sortRunTimeFunc],

src/components/RunTable/style.module.css

@@ -1,10 +1,20 @@
+@media only screen and (max-width: 800px) {
+
+  /* 当屏幕宽度小于 800px 时 */
+  .runTable th:nth-child(3),
+  .runTable td:nth-child(3)  {
+    display: none;
+    /* 隐藏第3列 */
+  }
+}
+
 @media only screen and (max-width: 700px) {
 
   /* 当屏幕宽度小于 700px 时 */
-  .runTable th:nth-child(4),
-  .runTable td:nth-child(4) {
+  .runTable th:nth-child(5),
+  .runTable td:nth-child(5)  {
     display: none;
-    /* 隐藏第四列 */
+    /* 隐藏第5列 */
   }
 }
 

src/components/YearStat/index.tsx

@@ -18,6 +18,7 @@ const YearStat = ({ year, onClick }: { year: string, onClick: (_year: string) =>
   }
   let sumDistance = 0;
   let streak = 0;
+  let sumElevationGain = 0;
   let pace = 0; // eslint-disable-line no-unused-vars
   let paceNullCount = 0; // eslint-disable-line no-unused-vars
   let heartRate = 0;
@@ -26,6 +27,7 @@ const YearStat = ({ year, onClick }: { year: string, onClick: (_year: string) =>
   let totalSecondsAvail = 0;
   runs.forEach((run) => {
     sumDistance += run.distance || 0;
+    sumElevationGain += run.total_elevation_gain || 0;
     if (run.average_speed) {
       pace += run.average_speed;
       totalMetersAvail += run.distance || 0;
@@ -43,6 +45,7 @@ const YearStat = ({ year, onClick }: { year: string, onClick: (_year: string) =>
     }
   });
   sumDistance = parseFloat((sumDistance / 1000.0).toFixed(1));
+  sumElevationGain = (sumElevationGain).toFixed(0);
   const avgPace = formatPace(totalMetersAvail / totalSecondsAvail);
   const hasHeartRate = !(heartRate === 0);
   const avgHeartRate = (heartRate / (runs.length - heartRateNullCount)).toFixed(
@@ -58,6 +61,7 @@ const YearStat = ({ year, onClick }: { year: string, onClick: (_year: string) =>
         <Stat value={year} description=" Journey" />
         <Stat value={runs.length} description=" Runs" />
         <Stat value={sumDistance} description=" KM" />
+        <Stat value={sumElevationGain} description=" Elevation Gain" />
         <Stat value={avgPace} description=" Avg Pace" />
         <Stat value={`${streak} day`} description=" Streak" />
         {hasHeartRate && (

src/utils/utils.ts

@@ -22,6 +22,7 @@ export interface Activity {
   location_country?: string | null;
   summary_polyline?: string | null;
   average_heartrate?: number | null;
+  total_elevation_gain?: number | null;
   average_speed: number;
   streak: number;
 }