feat(profile): show total distance

src/locales/de.json

@@ -18,6 +18,7 @@
     "error-loading-privacy-policy": "Fehler beim Laden der Datenschutzerklärung",
     "error_loading_imprint": "Fehler beim Laden des Impressums",
     "error_requesting_the_login_link": "Fehler beim Anfordern des Login-Links...",
+    "first_lap": "👏 erste Runde",
     "i_accept": "Ich habe die ",
     "i_accept_end": "gelesen und akzeptiert.",
     "if_you_are_the_system_administrator_please_refer_to_the_official_product_documentation_readme_for_configuration_guidance": "Wenn Sie der Systemadministrator sind, finden Sie Konfigurationsanweisungen in der offiziellen Produktdokumentation / README.",
@@ -63,6 +64,7 @@
     "the_system_is_not_properly_configured_please_contact_the_system_administrator_for_help": "Das System ist nicht richtig konfiguriert. Bitte wenden Sie sich an den Systemadministrator, um Hilfe zu erhalten.",
     "this_is_not_a_valid_international_phone_number": "Dies ist keine gültige internationale Telefonnummer",
     "total": "Gesamt",
+    "total_distance": "Gesamt-Distanz",
     "urkunde_generiert": "Urkunde generiert!",
     "urkunde_konnte_nicht_generiert_werden": "Urkunde konnte nicht generiert werden...",
     "urkunde_wird_generiert": "Urkunde wird generiert...",

src/locales/en.json

@@ -18,6 +18,7 @@
     "error-loading-privacy-policy": "Error loading Privacy Policy",
     "error_loading_imprint": "Error loading Imprint",
     "error_requesting_the_login_link": "Error requesting the login link...",
+    "first_lap": "👏 first lap",
     "i_accept": "I have read and accepted the ",
     "i_accept_end": "",
     "if_you_are_the_system_administrator_please_refer_to_the_official_product_documentation_readme_for_configuration_guidance": "If you are the system administrator, please refer to the official product documentation/ README for configuration guidance.",
@@ -63,6 +64,7 @@
     "the_system_is_not_properly_configured_please_contact_the_system_administrator_for_help": "The system is not properly configured. Please contact the system administrator for help.",
     "this_is_not_a_valid_international_phone_number": "This is not a valid international phone number",
     "total": "Total",
+    "total_distance": "total distance",
     "urkunde_generiert": "created certificate",
     "urkunde_konnte_nicht_generiert_werden": "could not create your certificate...",
     "urkunde_wird_generiert": "creating certificate...",

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 =
+      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 =
-        Math.floor(s.distance / 1000) +
-        "km " +
-        (Math.floor(s.distance % 1000) + "").padStart(3, "0") +
-        "m";
+      }
+      s.distance_readable = getReadableDistance(s.distance);
+      counter++;
       return s;
     });
     data.filter((s) => s.valid === true);