Widget for own participications

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

@@ -13,6 +13,9 @@ onMounted(async () => {
         Object.assign(myParticipations, data);
 });
 
+function navigateTo(url) {
+    window.location.href = url;
+}
 </script>
 
 <template>
@@ -47,7 +50,7 @@ onMounted(async () => {
     </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" />
+        <input type="button" value="Jetzt anmelden" class="button" @click="navigateTo('/event/available-events')" />
     </p>
 
 
@@ -63,6 +66,6 @@ onMounted(async () => {
 }
 
 .bg-yellow {
-    background-color: #f3f353;
+    background-color: #e4e44c;
 }
 </style>

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

@@ -0,0 +1,54 @@
+<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: 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>
+    </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>