72 lines
2.3 KiB
Vue
72 lines
2.3 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>
|
|
<h2>Meine Anmeldungen</h2>
|
|
<p v-for="participation in myParticipations.myParticipations" class="widget-content-item">
|
|
<table>
|
|
<tr>
|
|
<td style="width: 40%; font-weight: bold;">{{participation.eventName}}</td>
|
|
<td style="width: 30%; font-weight: bold;">{{participation.arrivalDateReadable}} - {{participation.departureDateReadable}}</td>
|
|
<td style="width: 30%;">
|
|
<Icon name="euro-sign" style="padding: 5px; font-size: 11pt; color: #ffffff; margin-right: 5px;" :class="participation.needs_payment ? 'bg-red' : 'bg-green'" />
|
|
<Icon name="award" style="padding: 5px; font-size: 11pt; color: #ffffff; margin-right: 5px;" :class="participation.cocColor" />
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
{{participation.event.postal_code}} {{participation.event.location}}<br />
|
|
</td>
|
|
<td>
|
|
<a class="link" :href="`/api/v1/event/participant/${participation.identifier}/ical`">In Kalender importieren</a>
|
|
</td>
|
|
<td>
|
|
{{participation.amountPaid.readable}} / {{participation.amountExpected.readable}}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2"> </td>
|
|
<td>eFZ-Status: {{participation.efzStatusReadable}}</td>
|
|
</tr>
|
|
</table>
|
|
</p>
|
|
<p v-if="myParticipations.myParticipations.length === 0">Du bist aktuelle für keine Veranstaltung angemeldet.</p>
|
|
<p>
|
|
<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>
|