Handling ICAL import

app/Domains/Dashboard/Views/Partials/Widgets/MyInvoices.vue

@@ -16,6 +16,7 @@ onMounted(async () => {
 </script>
 
 <template>
+    <h2>Meine Abrechnungen</h2>
     <p v-for="invoice in myInvoices.myInvoices" class="widget-content-item">
         <a :href="'/invoice/my-invoices/' + invoice.slug" class="link">{{invoice.title}} ({{invoice.count}})</a>
         <label>

app/Domains/Dashboard/Views/Partials/Widgets/MyParticipations.vue

@@ -0,0 +1,68 @@
+<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);
+});
+
+</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">&nbsp;</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="Für weitere Veranstaltung anmelden" class="button" />
+    </p>
+
+
+</template>
+
+<style scoped>
+.bg-red {
+    background-color: red;
+}
+
+.bg-green {
+    background-color: green;
+}
+
+.bg-yellow {
+    background-color: #f3f353;
+}
+</style>