th.guenther/mareike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Running

Browse Source
This commit is contained in:
Thomas Günther
2026-03-20 22:50:22 +01:00
parent b1c333648a
commit 23af267896
3 changed files with 288 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
app/Domains/Event/Views/Signup.vue Normal file
View File

@@ -0,0 +1,119 @@
<script setup>
import AppLayout from "../../../../resources/js/layouts/AppLayout.vue";
import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
import SignupForm from './Partials/SignUpForm/SignupForm.vue'
import FullScreenModal from "../../../Views/Components/FullScreenModal.vue";
import AvailableEvents from "./Partials/AvailableEvents.vue";
import {ref} from "vue";
const props = defineProps({
event: Object,
availableEvents: Array,
participantData: Object,
localGroups: Array,
})
const showSignup = ref(true)
const registrationDone = ref(false)
function close() {
showSignup.value = false
}
</script>
<template>
<AppLayout title="Für Veranstaltung anmelden">
<FullScreenModal :show="showSignup" @close="close">
<shadowed-box style="width: 95%; margin: 30px auto; padding: 0; overflow: hidden; border-radius: 12px;">
<!-- Header -->
<div v-if="props.event.registrationAllowed" style="background: linear-gradient(135deg, #1e40af, #3b82f6); padding: 28px 32px; color: white;">
<div style="display: flex; align-items: center; gap: 14px; flex-wrap: wrap;">
<h2 style="margin: 0; font-size: 1.5rem; font-weight: 700;">{{ props.event.name }}</h2>
<span style="background: rgba(255,255,255,0.2); color: white; padding: 4px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; border: 1px solid rgba(255,255,255,0.4);">
✓ Anmeldung offen
</span>
</div>
<p style="margin: 8px 0 0 0; opacity: 0.85; font-size: 0.95rem;">
📍 {{ props.event.postalCode }} {{ props.event.location }}
</p>
</div>
<div v-else style="background: linear-gradient(135deg, #991b1b, #dc2626); padding: 28px 32px; color: white;">
<div style="display: flex; align-items: center; gap: 14px; flex-wrap: wrap;">
<h2 style="margin: 0; font-size: 1.5rem; font-weight: 700;">{{ props.event.name }}</h2>
<span style="background: rgba(255,0,0,0.2); color: #fecaca; padding: 4px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; border: 1px solid rgba(255,100,100,0.4);">
✗ Anmeldung geschlossen
</span>
</div>
<p style="margin: 8px 0 0 0; opacity: 0.85; font-size: 0.95rem;">
📍 {{ props.event.postalCode }} {{ props.event.location }}
</p>
</div>
<!-- Body -->
<div style="padding: 28px 32px;">
<!-- Info-Grid -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;">
<!-- Zeile 1 links: Zeitraum -->
<div style="background: #f8fafc; border-radius: 8px; padding: 16px;">
<div style="font-size: 0.75rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">Veranstaltungszeitraum</div>
<div style="font-size: 1rem; color: #111827; font-weight: 500;">{{ props.event.eventBegin }} – {{ props.event.eventEnd }}</div>
<div style="font-size: 0.85rem; color: #6b7280;">{{ props.event.duration }} Tage</div>
</div>
<!-- Zeile 1 rechts: Erstattungsrichtlinien -->
<div style="background: #f0f9ff; border-radius: 8px; padding: 16px; border-left: 3px solid #0ea5e9;">
<div style="font-size: 0.75rem; color: #0369a1; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;">Erstattungsrichtlinien</div>
<div style="color: #0c4a6e; font-size: 0.875rem; line-height: 1.8;">
<div>100 % bis {{ props.event.earlyBirdEnd.formatted }}</div>
<div>{{ props.event.refundAfterEarlyBirdEnd }} % bis {{ props.event.registrationFinalEnd.formatted }}</div>
<div>Danach nur bei Nachrückplätzen</div>
</div>
</div>
<!-- Zeile 2 links: Anmeldeschluss -->
<div style="background: #f8fafc; border-radius: 8px; padding: 16px;">
<div style="font-size: 0.75rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">Anmeldeschluss</div>
<div style="font-size: 1rem; color: #111827; font-weight: 500; margin-bottom: 20px;">{{ props.event.registrationFinalEnd.formatted }}</div>
<div style="font-size: 0.75rem; color: #366a34; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">Frühbucher bis</div>
<div style="font-size: 1rem; color: #366a34; font-weight: 500;">{{ props.event.earlyBirdEnd.formatted }}</div>
</div>
<!-- Zeile 2 rechts: Kontakt -->
<div style="background: #f8fafc; border-radius: 8px; padding: 16px;">
<div style="font-size: 0.75rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;">Kontakt</div>
<p style="margin: 0 0 6px 0; color: #374151; font-size: 0.9rem; line-height: 1.6;">
Hast du Fragen zur Veranstaltung oder deiner Anmeldung? Kontaktiere uns per E-Mail:
</p>
<a :href="'mailto:' + props.event.email" style="font-size: 0.95rem; color: #2563eb; text-decoration: none; font-weight: 500;">{{ props.event.email }}</a>
</div>
</div>
</div>
<hr style="margin: 0 32px; border: none; border-top: 1px solid #e5e7eb;" />
<div style="padding: 28px 32px;">
<SignupForm
:event="props.event"
:participantData="props.participantData ?? {}"
:localGroups="props.localGroups ?? []"
/>
</div>
</shadowed-box>
</FullScreenModal>
<AvailableEvents v-if="!registrationDone" :events="props.availableEvents" />
<div v-else style="text-align: center; padding: 20px;">
Registrierung komplett
</div>
</AppLayout>
</template>
<style scoped>
</style>