266 lines
7.9 KiB
Vue
266 lines
7.9 KiB
Vue
<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 class="signup-box">
|
||
|
||
<!-- Header -->
|
||
<div v-if="props.event.registrationAllowed" class="signup-header signup-header--open">
|
||
<div class="signup-header-row">
|
||
<h2 class="signup-event-title">{{ props.event.name }}</h2>
|
||
<span class="signup-badge signup-badge--open">
|
||
✓ Anmeldung offen
|
||
</span>
|
||
</div>
|
||
<p class="signup-event-location">
|
||
📍 {{ props.event.postalCode }} {{ props.event.location }}
|
||
</p>
|
||
</div>
|
||
<div v-else class="signup-header signup-header--closed">
|
||
<div class="signup-header-row">
|
||
<h2 class="signup-event-title">{{ props.event.name }}</h2>
|
||
<span class="signup-badge signup-badge--closed">
|
||
✗ Anmeldung geschlossen
|
||
</span>
|
||
</div>
|
||
<p class="signup-event-location">
|
||
📍 {{ props.event.postalCode }} {{ props.event.location }}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<div class="signup-body">
|
||
|
||
<!-- Info-Grid -->
|
||
<div class="signup-info-grid">
|
||
|
||
<!-- Zeitraum -->
|
||
<div class="info-card">
|
||
<div class="info-card__label">Veranstaltungszeitraum</div>
|
||
<div class="info-card__value">{{ props.event.eventBegin }} – {{ props.event.eventEnd }}</div>
|
||
<div class="info-card__sub">{{ props.event.duration }} Tage</div>
|
||
</div>
|
||
|
||
<!-- Erstattungsrichtlinien -->
|
||
<div class="info-card info-card--accent">
|
||
<div class="info-card__label info-card__label--accent">Erstattungsrichtlinien</div>
|
||
<div class="info-card__list">
|
||
<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>
|
||
|
||
<!-- Anmeldeschluss -->
|
||
<div class="info-card">
|
||
<div class="info-card__label">Anmeldeschluss</div>
|
||
<div class="info-card__value" style="margin-bottom: 16px;">{{ props.event.registrationFinalEnd.formatted }}</div>
|
||
|
||
<div class="info-card__label info-card__label--green">Frühbucher bis</div>
|
||
<div class="info-card__value" style="color: #366a34;">{{ props.event.earlyBirdEnd.formatted }}</div>
|
||
</div>
|
||
|
||
<!-- Kontakt -->
|
||
<div class="info-card">
|
||
<div class="info-card__label">Kontakt</div>
|
||
<p class="info-card__text">
|
||
Hast du Fragen zur Veranstaltung oder deiner Anmeldung? Kontaktiere uns per E-Mail:
|
||
</p>
|
||
<a :href="'mailto:' + props.event.email" class="info-card__link">{{ props.event.email }}</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="signup-divider" />
|
||
|
||
<div class="signup-body">
|
||
<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>
|
||
.signup-box {
|
||
width: 95%;
|
||
margin: 30px auto;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
/* Header */
|
||
.signup-header {
|
||
padding: 28px 32px;
|
||
color: white;
|
||
}
|
||
.signup-header--open { background: linear-gradient(135deg, #1e40af, #3b82f6); }
|
||
.signup-header--closed { background: linear-gradient(135deg, #991b1b, #dc2626); }
|
||
|
||
.signup-header-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.signup-event-title {
|
||
margin: 0;
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
}
|
||
.signup-badge {
|
||
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);
|
||
}
|
||
.signup-badge--open { background: rgba(255,255,255,0.2); color: white; }
|
||
.signup-badge--closed { background: rgba(255,0,0,0.2); color: #fecaca; }
|
||
|
||
.signup-event-location {
|
||
margin: 8px 0 0 0;
|
||
opacity: 0.85;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
/* Body */
|
||
.signup-body { padding: 28px 32px; }
|
||
.signup-divider { margin: 0 32px; border: none; border-top: 1px solid #e5e7eb; }
|
||
|
||
/* Info-Grid */
|
||
.signup-info-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.info-card {
|
||
background: #f8fafc;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
}
|
||
.info-card--accent {
|
||
background: #f0f9ff;
|
||
border-left: 3px solid #0ea5e9;
|
||
}
|
||
|
||
.info-card__label {
|
||
font-size: 0.75rem;
|
||
color: #6b7280;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
margin-bottom: 6px;
|
||
}
|
||
.info-card__label--accent { color: #0369a1; margin-bottom: 8px; }
|
||
.info-card__label--green { color: #366a34; margin-top: 4px; }
|
||
|
||
.info-card__value {
|
||
font-size: 1rem;
|
||
color: #111827;
|
||
font-weight: 500;
|
||
}
|
||
.info-card__sub {
|
||
font-size: 0.85rem;
|
||
color: #6b7280;
|
||
}
|
||
.info-card__list {
|
||
color: #0c4a6e;
|
||
font-size: 0.875rem;
|
||
line-height: 1.8;
|
||
}
|
||
.info-card__text {
|
||
margin: 0 0 6px 0;
|
||
color: #374151;
|
||
font-size: 0.9rem;
|
||
line-height: 1.6;
|
||
}
|
||
.info-card__link {
|
||
font-size: 0.95rem;
|
||
color: #2563eb;
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
word-break: break-all;
|
||
}
|
||
|
||
/* ─── Tablet (640–1023px) ─── */
|
||
@media (max-width: 1023px) {
|
||
.signup-box {
|
||
width: 100%;
|
||
margin: 10px auto;
|
||
}
|
||
.signup-header,
|
||
.signup-body { padding: 20px 18px; }
|
||
.signup-divider { margin: 0 18px; }
|
||
|
||
.signup-info-grid {
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
}
|
||
.signup-event-title { font-size: 1.25rem; }
|
||
}
|
||
|
||
/* ─── Smartphone (< 640px) ─── */
|
||
@media (max-width: 639px) {
|
||
.signup-box {
|
||
width: 100%;
|
||
margin: 0;
|
||
border-radius: 0;
|
||
}
|
||
.signup-header,
|
||
.signup-body { padding: 16px 12px; }
|
||
.signup-divider { margin: 0 12px; }
|
||
|
||
.signup-event-title { font-size: 1.1rem; }
|
||
.signup-event-location { font-size: 0.85rem; }
|
||
.signup-badge { font-size: 0.7rem; padding: 3px 10px; }
|
||
|
||
.signup-info-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 10px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.info-card { padding: 12px; }
|
||
.info-card__value { font-size: 0.95rem; }
|
||
.info-card__list { font-size: 0.82rem; }
|
||
}
|
||
</style>
|