55 lines
1.6 KiB
Vue
55 lines
1.6 KiB
Vue
<script setup>
|
|
import {onMounted, reactive} from "vue";
|
|
import Icon from "../../../../../Views/Components/Icon.vue";
|
|
|
|
const myParticipations = reactive({
|
|
'myParticipations': '',
|
|
|
|
})
|
|
|
|
onMounted(async () => {
|
|
const response = await fetch('/api/v1/dashboard/my-participations');
|
|
const data = await response.json();
|
|
Object.assign(myParticipations, data);
|
|
});
|
|
|
|
function navigateTo(url) {
|
|
window.location.href = url;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<table v-if="myParticipations.myParticipations.length > 0">
|
|
<tr v-for="participation in myParticipations.myParticipations.slice(0, 3)" class="widget-content-item">
|
|
<td>
|
|
{{participation.eventName}}<br />
|
|
{{participation.event.location}},
|
|
{{participation.arrivalDateReadable}} - {{participation.departureDateReadable}}
|
|
</td>
|
|
<td>
|
|
<Icon name="euro-sign" style="padding: 2px; font-size: 10pt; color: #ffffff; margin-right: 5px;" :class="participation.needs_payment ? 'bg-red' : 'bg-green'" />
|
|
<Icon name="award" style="padding: 2px; font-size: 10pt; color: #ffffff; margin-right: 5px;" :class="participation.cocColor" />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<p v-else>
|
|
Du bist aktuelle für keine Veranstaltung angemeldet.<br /><br />
|
|
<input type="button" value="Jetzt anmelden" class="button" @click="navigateTo('/event/available-events')" />
|
|
|
|
</p>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bg-red {
|
|
background-color: red;
|
|
}
|
|
|
|
.bg-green {
|
|
background-color: green;
|
|
}
|
|
|
|
.bg-yellow {
|
|
background-color: #e4e44c;
|
|
}
|
|
</style>
|