feat(profile): show total distance

src/views/Profile.vue

@@ -299,6 +299,11 @@
             <div class="py-4 w-full">
               <section class="text-gray-400 dark:bg-gray-900 body-font">
                 <div class="container mx-auto">
+                  <p class="text-white mb-2">
+                    {{ $t('total_distance') }}: {{ getReadableDistance(state.scans.reduce((accumulator, currentValue) =>
+                      accumulator +
+                      currentValue.distance, 0)) }}
+                  </p>
                   <div class="lg:w-2/3 w-full mx-auto overflow-auto">
                     <table v-if="state.scans.length > 0" class="table-auto w-full text-left whitespace-no-wrap">
                       <thead class="
@@ -332,9 +337,9 @@
                       <tbody class="text-gray-900 dark:text-gray-50">
                         <tr v-for="s in state.scans" :key="s.id">
                           <td class="px-4 py-3">
-                            <span v-text="s.distance"></span>
+                            <span v-text="s.distance_readable"></span>
                           </td>
-                          <td class="px-4 py-3" v-text="s.lapTime"></td>
+                          <td class="px-4 py-3" v-text="s.lapTime_readable"></td>
                         </tr>
                       </tbody>
                     </table>
@@ -528,6 +533,17 @@ const props = defineProps({
   token: String,
 });
 const accesstoken = props.token;
+
+function getReadableDistance(distance) {
+  const km = Math.floor(distance / 1000)
+  const m = Math.floor(distance % 1000)
+  console.log({ km, m });
+  if (km > 0) {
+    return `${km},${m} km`
+  }
+  return `${m} m`
+}
+
 axios
   .get(`${config.baseurl}api/runners/me/${accesstoken}`)
   .then(({ data }) => {
@@ -548,17 +564,19 @@ axios
 axios
   .get(`${config.baseurl}api/runners/me/${accesstoken}/scans`)
   .then(({ data }) => {
+    let counter = 0
     data.map(function (s) {
-      s.lapTime =
-        Math.floor(s.lapTime / 60) +
-        "min " +
-        (Math.floor(s.lapTime % 60) + "").padStart(2, "0") +
-        "s";
-      s.distance =
-        Math.floor(s.distance / 1000) +
-        "km " +
-        (Math.floor(s.distance % 1000) + "").padStart(3, "0") +
-        "m";
+      if (counter === 0) {
+        s.lapTime_readable = t('first_lap')
+      } else {
+        s.lapTime_readable =
+          Math.floor(s.lapTime / 60) +
+          "min " +
+          (Math.floor(s.lapTime % 60) + "").padStart(2, "0") +
+          "s";
+      }
+      s.distance_readable = getReadableDistance(s.distance);
+      counter++;
       return s;
     });
     data.filter((s) => s.valid === true);