Added basic sponsoring table

ref #39
This commit is contained in:
Nicolai Ort 2021-04-06 17:14:22 +02:00
parent 5a123b0cf8
commit f141130db5
1 changed files with 51 additions and 1 deletions

View File

@ -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");