src/components/Profile.vue

@@ -121,7 +121,10 @@
               <section class="text-gray-400 dark:bg-gray-900 body-font">
                 <div class="container mx-auto">
                   <div class="lg:w-2/3 w-full mx-auto overflow-auto">
-                    <table class="table-auto w-full text-left whitespace-no-wrap">
+                    <table
+                      v-if="state.scans.length > 0"
+                      class="table-auto w-full text-left whitespace-no-wrap"
+                    >
                       <thead
                         class="text-black bg-gray-300 dark:text-white text-sm dark:bg-gray-800"
                       >
@@ -135,24 +138,22 @@
                         </tr>
                       </thead>
                       <tbody class="text-gray-900 dark:text-gray-50">
-                        <tr class="border-t-2 border-gray-800">
+                        <tr v-for="s in state.scans" :key="s.id">
-                          <td class="px-4 py-3">400m</td>
+                          <td class="px-4 py-3">
-                          <td class="px-4 py-3">0min 57s</td>
+                            <span v-text="s.distance"></span>m
-                        </tr>
+                          </td>
-                        <tr class="border-t-2 border-gray-800">
+                          <td class="px-4 py-3" v-text="s.lapTime"></td>
-                          <td class="px-4 py-3">400m</td>
-                          <td class="px-4 py-3">1min 15s</td>
-                        </tr>
-                        <tr class="border-t-2 border-gray-800">
-                          <td class="px-4 py-3">1km</td>
-                          <td class="px-4 py-3">2min 50s</td>
-                        </tr>
-                        <tr class="border-t-2 border-gray-800">
-                          <td class="px-4 py-3">1km</td>
-                          <td class="px-4 py-3">3min 00s</td>
                         </tr>
                       </tbody>
                     </table>
+                    <div v-else class="text-center font-bold text-black dark:text-white text-2xl">
+                      <img
+                        src="../assets/empty_laps.svg"
+                        style="height:25rem; margin:0 auto;"
+                        :alt="[[$t('no_laps_scans_were_recorded_yet')]]"
+                      />
+                      {{ $t('no_laps_scans_were_recorded_yet') }}
+                    </div>
                   </div>
                 </div>
               </section>
@@ -181,6 +182,7 @@ const state = reactive({
   firstname: "",
   middlename: "",
   lastname: "",
+  scans: [],
   group: "",
   activetab: "profile",
 })
@@ -197,4 +199,15 @@ axios.get(`${config.baseurl}api/runners/me/${token}`)
   }).catch((error) => {
     toast.error("An error occured while loading your profile data");
   })
+axios.get(`${config.baseurl}api/runners/me/${token}/scans`)
+  .then(({ data }) => {
+    data.map(function(s) {
+      s.lapTime = Math.floor(s.lapTime / 60) + 'min ' + (Math.floor(s.lapTime % 60) + "").padStart(2, "0") + "s"
+      return s;
+    })
+    data.filter(s => s.valid === true);
+    state.scans = data;
+  }).catch((error) => {
+    toast.error("An error occured while loading your profile data");
+  })
 </script>

src/locales/de.json

@@ -13,6 +13,7 @@
     "main_page_text": "Hier können Sie sich für den Lauf Für Kaya! registrieren oder ihr Läuferprofil verwalten.",
     "mittelname": "Mittelname",
     "nachname": "Nachname",
+    "no_laps_scans_were_recorded_yet": "Es wurden noch keine Runden / Scans aufgezeichnet ...",
     "ort": "Ort",
     "phone_number": "Telefonnummer",
     "please_provide_a_valid_zipcode": "Bitte geben Sie eine gültige Postleitzahl an...",

src/locales/en.json

@@ -13,6 +13,7 @@
     "main_page_text": "Here you can register for the Lauf Für Kaya! or manage your runner profile.",
     "mittelname": "Middlename",
     "nachname": "Lastname",
+    "no_laps_scans_were_recorded_yet": "No laps/ scans were recorded yet...",
     "ort": "City",
     "phone_number": "Phone Number",
     "please_provide_a_valid_zipcode": "Please provide a valid zipcode...",