Added basic sponsoring table

ref #39

src/views/Profile.vue

@@ -236,7 +236,55 @@
             </div>
           </div>
           <div v-if="(state.activetab === 'sponsorings')" class="tab-content block">
-            <div class="py-4 w-full">coming soon...</div>
+            <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
+                      v-if="state.sponsorings.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"
+                      >
+                        <tr>
+                          <th class="px-4 py-3 title-font tracking-wider font-medium">Name</th>
+                          <th
+                            class="px-4 py-3 title-font tracking-wider font-medium"
+                          >Amount per distance (in €)</th>
+                          <th
+                            class="px-4 py-3 title-font tracking-wider font-medium"
+                          >Current total amount (in €)</th>
+                        </tr>
+                      </thead>
+                      <tbody class="text-gray-900 dark:text-gray-50">
+                        <tr v-for="s in state.sponsorings" :key="s.id">
+                          <td class="px-4 py-3">
+                            <span v-text="s.donor.firstname"></span>
+                            <span v-text="s.donor.middlename"></span>
+                            <span v-text="s.donor.lastname"></span>
+                          </td>
+                          <td class="px-4 py-3">
+                            <span v-text="s.amountPerDistance"></span>
+                          </td>
+                          <td class="px-4 py-3">
+                            <span v-text="s.amount"></span>
+                          </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')]]"
+                      />
+                      No sponsorings for you were recorded yet...
+                    </div>
+                  </div>
+                </div>
+              </section>
+            </div>
           </div>
         </div>
       </div>
@@ -256,6 +304,7 @@ const state = reactive({
   middlename: "",
   lastname: "",
   scans: [],
+  sponsorings: [],
   group: "",
   activetab: "profile",
   delete_active: false,
@@ -274,6 +323,7 @@ axios.get(`${config.baseurl}api/runners/me/${accesstoken}`)
     state.middlename = data.middlename;
     state.lastname = data.lastname;
     state.group = data.group;
+    state.sponsorings = data.distanceDonations;
     state.fullobject = data;
   }).catch((error) => {
     toast.error("An error occured while loading your profile data");