41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
<script setup>
|
|
import {onMounted, reactive} from "vue";
|
|
|
|
const events = reactive({
|
|
'upcomingEvents': '',
|
|
|
|
})
|
|
|
|
onMounted(async () => {
|
|
const response = await fetch('/api/v1/dashboard/upcoming-events');
|
|
const data = await response.json();
|
|
Object.assign(events, data);
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<table class="widget-content-item" v-if="events.upcomingEvents.length > 0">
|
|
<tr>
|
|
<td style="font-weight: bold">Veranstaltung</td>
|
|
<td style="font-weight: bold">Teilis</td>
|
|
<td style="font-weight: bold">Team</td>
|
|
<td style="font-weight: bold">GruFüs</td>
|
|
</tr>
|
|
|
|
<tr v-for="event in events.upcomingEvents">
|
|
<td><a :href="'/event/details/' + event.identifier" class="link">{{event.nameShort}}</a></td>
|
|
<td style="text-align: center;">{{event.countParticipant}}</td>
|
|
<td style="text-align: center;">{{event.countTeam}}</td>
|
|
<td style="text-align: center;">{{event.countVolunteer}}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p v-else style="padding: 10px; font-weight: bold">Es existieren im Moment keine Veranstaltungen, für die du verantwortlich bist.</p>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|