Merge branch 'dev' into feature/4-component-interpolation

src/components/Profile.vue

@@ -5,8 +5,11 @@
         <div
           class="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center text-black dark:text-gray-200"
         >
-          <p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p>
+          <p
-          <p class="text-md whitespace-nowrap">Musterfirma > PR</p>
+            class="text-3xl font-bold whitespace-nowrap"
+            v-text="(state.firstname || '') + ' ' + (state.middlename || '') + ' ' + (state.lastname || '')"
+          ></p>
+          <p class="text-md whitespace-nowrap">{{ state.group }}</p>
         </div>
         <div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center space-x-4">
           <button
@@ -45,77 +48,67 @@
           <div class="flex lg:flex-wrap flex-row lg:space-x-2">
             <div class="flex-none">
               <button
-                @click="() => { activetab = 'profile' }"
+                @click="() => { state.activetab = 'profile' }"
-                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'profile') }"
+                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (state.activetab === 'profile') }"
                 class="tab tab-underline py-4 px-6 block"
                 type="button"
               >{{ $t('profile') }}</button>
             </div>
             <div class="flex-none">
               <button
-                @click="() => { activetab = 'laptimes' }"
+                @click="() => { state.activetab = 'laptimes' }"
-                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'laptimes') }"
+                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (state.activetab === 'laptimes') }"
                 class="tab tab-underline py-4 px-6 block"
                 type="button"
               >{{ $t('lap_times') }}</button>
             </div>
             <div class="flex-none">
               <button
-                @click="() => { activetab = 'sponsorings' }"
+                @click="() => { state.activetab = 'sponsorings' }"
-                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'sponsorings') }"
+                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (state.activetab === 'sponsorings') }"
                 class="tab tab-underline py-4 px-6 block"
                 type="button"
               >{{ $t('sponsoring') }}</button>
             </div>
           </div>
-          <div v-if="(activetab === 'profile')" class="tab-content block">
+          <div v-if="(state.activetab === 'profile')" class="tab-content block">
             <div class="py-4 w-full">
               <div class="flex flex-col">
                 <form class="form flex flex-wrap w-full">
                   <div class="w-full">
                     <div class="form-element">
-                      <div class="form-label">{{ $t('vorname') }}</div>
+                      <div class="text-lg">{{ $t('vorname') }}</div>
-                      <input
+                      <p
-                        name="first-name"
+                        class="w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        v-text="state.firstname"
-                        type="text"
-                        :placeholder="[[$t('vorname')]]"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">{{ $t('mittelname') }}</div>
+                      <div class="text-lg">{{ $t('mittelname') }}</div>
-                      <input
+                      <p
-                        name="middle-name"
+                        class="w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        v-text="state.middlename"
-                        type="text"
-                        :placeholder="[[$t('mittelname')]]"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">{{ $t('nachname') }}</div>
+                      <div class="text-lg">{{ $t('nachname') }}</div>
-                      <input
+                      <p
-                        name="last-name"
+                        class="w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        type="text"
+                        v-text="state.lastname"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        :placeholder="[[$t('nachname')]]"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">{{ $t('e_mail_adress') }}</div>
+                      <div class="text-lg">{{ $t('e_mail_adress') }}</div>
-                      <input
+                      <p
-                        name="email"
+                        class="w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        type="email"
+                        v-text="state.email"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        :placeholder="[[$t('e_mail_adress')]]"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">{{ $t('phone_number') }}</div>
+                      <div class="text-lg">{{ $t('phone_number') }}</div>
-                      <input
+                      <p
-                        name="tel"
+                        class="w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        type="tel"
+                        v-text="state.phone"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        :placeholder="[[$t('phone_number')]]"
                       />
                     </div>
                   </div>
@@ -123,12 +116,15 @@
               </div>
             </div>
           </div>
-          <div v-if="(activetab === 'laptimes')" class="tab-content block">
+          <div v-if="(state.activetab === 'laptimes')" class="tab-content block">
             <div class="py-4 w-full">
               <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"
                       >
@@ -142,30 +138,28 @@
                         </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>
             </div>
           </div>
-          <div v-if="(activetab === 'sponsorings')" class="tab-content block">
+          <div v-if="(state.activetab === 'sponsorings')" class="tab-content block">
             <div class="py-4 w-full">coming soon...</div>
           </div>
         </div>
@@ -175,12 +169,45 @@
 </template>
 
 <script setup>
-import { computed, ref, reactive, watch } from "vue";
+import { ref, reactive } from "vue";
-import axios from "redaxios";
-import isEmail from 'validator/es/lib/isEmail';
-import isMobilePhone from 'validator/es/lib/isMobilePhone';
-import isPostalCode from 'validator/es/lib/isPostalCode';
 import { useToast } from "vue-toastification";
+import axios from "redaxios";
+// import isEmail from 'validator/es/lib/isEmail';
+// import isMobilePhone from 'validator/es/lib/isMobilePhone';
+// import isPostalCode from 'validator/es/lib/isPostalCode';
 // 
-let activetab = ref("profile");
+const state = reactive({
+  phone: "",
+  email: "",
+  firstname: "",
+  middlename: "",
+  lastname: "",
+  scans: [],
+  group: "",
+  activetab: "profile",
+})
+const toast = useToast();
+const token = location.hash.substr(1).split('&')[0].split('=')[1];
+axios.get(`${config.baseurl}api/runners/me/${token}`)
+  .then(({ data }) => {
+    state.phone = data.phone;
+    state.email = data.email;
+    state.firstname = data.firstname;
+    state.middlename = data.middlename;
+    state.lastname = data.lastname;
+    state.group = data.group;
+  }).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

@@ -15,6 +15,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

@@ -15,6 +15,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...",

src/main.js

@@ -26,9 +26,9 @@ const Home = import('./components/Home.vue');
 const Imprint = import('./components/Imprint.vue');
 const Privacy = import('./components/Privacy.vue');
 const Register = import('./components/Register.vue');
-const Profile = import('./components/Profile.vue');
+const Profile = () => import('./components/Profile.vue');
 //
-let routes = [ { path: '/', component: EnvError } ];
+let routes = [ { path: '/:pathMatch(.*)*', component: EnvError } ];
 if (typeof config !== 'undefined') {
 	if (config.baseurl && config.documentserver_key) {
 		routes = [