🚀Bumped version to v1.2.1

CHANGELOG.md

@@ -2,9 +2,18 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [1.2.1](https://git.odit.services/lfk/selfservice/compare/1.2.0...1.2.1)
+
+- feat(profile): show total distance [`55abb9e`](https://git.odit.services/lfk/selfservice/commit/55abb9ed22e4c66c05536897ba33b12915eea226)
+- refactor(profile): replace styles with tailwindcss [`c34a8a7`](https://git.odit.services/lfk/selfservice/commit/c34a8a7fcc77a0fa27280365ebf2382fbffc1e61)
+- feat(profile): updated tab alignment [`d564131`](https://git.odit.services/lfk/selfservice/commit/d5641312ca0b35a5c5ab9b7b19ed3a40971ac4fd)
+
 #### [1.2.0](https://git.odit.services/lfk/selfservice/compare/1.1.2...1.2.0)
 
+> 16 December 2024
+
 - refacor(documents): Switch to new document-server [`721892c`](https://git.odit.services/lfk/selfservice/commit/721892c315de9c2c1158d0f728dc2ef387a5d8c2)
+- 🚀Bumped version to v1.2.0 [`7d2a29c`](https://git.odit.services/lfk/selfservice/commit/7d2a29c0d834fbe783e59308af89bb8fb46a8015)
 
 #### [1.1.2](https://git.odit.services/lfk/selfservice/compare/1.1.1...1.1.2)
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@odit/lfk-selfservice",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",

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

@@ -39,7 +39,7 @@
               " @click="get_registration">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                class="feather feather-download" style="display: inline; height: 1rem; vertical-align: sub">
+                class="inline h-4 align-sub">
                 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                 <polyline points="7 10 12 15 17 10" />
                 <line x1="12" y1="15" x2="12" y2="3" />
@@ -63,7 +63,7 @@
               " @click="get_certificate">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                class="feather feather-download" style="display: inline; height: 1rem; vertical-align: sub">
+                class="inline h-4 align-sub">
                 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                 <polyline points="7 10 12 15 17 10" />
                 <line x1="12" y1="15" x2="12" y2="3" />
@@ -88,7 +88,7 @@
                 ">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                 stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                class="feather feather-download" style="display: inline; height: 1rem; vertical-align: sub">
+                class="inline h-4 align-sub">
                 <path d="M0 0h24v24H0z" />
                 <path fill="currentColor"
                   d="M17 6h5v2h-2v13a1 1 0 01-1 1H5a1 1 0 01-1-1V8H2V6h5V3a1 1 0 011-1h8a1 1 0 011 1v3zm1 2H6v12h12V8zm-5 6l2 2-1 1-2-2-2 2-1-1 2-2-2-2 1-1 2 2 2-2 1 1-2 2zM9 4v2h6V4H9z" />
@@ -117,7 +117,7 @@
                 ">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                 stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                class="feather feather-download" style="display: inline; height: 1rem; vertical-align: sub">
+                class="inline h-4 align-sub">
                 <path fill="none" d="M0 0h24v24H0z" />
                 <path fill="currentColor" d="M12 11l5-5 1 1-5 5 5 5-1 1-5-5-5 5-1-1 5-5-5-5 1-1z" />
               </svg>
@@ -139,7 +139,7 @@
               " @click="delete_me">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                 stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                class="feather feather-download" style="display: inline; height: 1rem; vertical-align: sub">
+                class="inline h-4 align-sub">
                 <path d="M0 0h24v24H0z" />
                 <path fill="currentColor"
                   d="M17 6h5v2h-2v13a1 1 0 01-1 1H5a1 1 0 01-1-1V8H2V6h5V3a1 1 0 011-1h8a1 1 0 011 1v3zm1 2H6v12h12V8zm-5 6l2 2-1 1-2-2-2 2-1-1 2-2-2-2 1-1 2 2 2-2 1 1-2 2zM9 4v2h6V4H9z" />
@@ -153,7 +153,7 @@
     <div class="flex flex-wrap">
       <div class="w-full">
         <div class="flex flex-wrap flex-col w-full tabs">
-          <div class="flex lg:flex-wrap flex-row lg:space-x-2">
+          <div class="flex lg:flex-wrap flex-row lg:space-x-2 justify-center">
             <div class="flex-none">
               <button @click="() => {
                 state.activetab = 'profile';
@@ -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>
@@ -456,12 +461,12 @@
                     </table>
                     <div v-else class="
                         text-center
-                        font-bold
+                        font-medium
                         text-black
                         dark:text-white
-                        text-2xl
+                        text-xl
                       ">
-                      <img src="../assets/empty_laps.svg" style="height: 25rem; margin: 0 auto" :alt="[
+                      <img src="../assets/empty_laps.svg" class="h-56 mx-auto" :alt="[
                         [$t('no_sponsorings_for_you_were_recorded_yet')],
                       ]" />
                       {{ $t("no_sponsorings_for_you_were_recorded_yet") }}
@@ -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) {
-        Math.floor(s.lapTime / 60) +
+        s.lapTime_readable = t('first_lap')
-        "min " +
+      } else {
-        (Math.floor(s.lapTime % 60) + "").padStart(2, "0") +
+        s.lapTime_readable =
-        "s";
+          Math.floor(s.lapTime / 60) +
-      s.distance =
+          "min " +
-        Math.floor(s.distance / 1000) +
+          (Math.floor(s.lapTime % 60) + "").padStart(2, "0") +
-        "km " +
+          "s";
-        (Math.floor(s.distance % 1000) + "").padStart(3, "0") +
+      }
-        "m";
+      s.distance_readable = getReadableDistance(s.distance);
+      counter++;
       return s;
     });
     data.filter((s) => s.valid === true);