wip: continue implementation
This commit is contained in:
Björn Fromme
@@ -1,9 +1,9 @@
|
||||
{% if app.session.flashBag.peek('error')|length > 0 %}
|
||||
{% include '_partials/_alert.html.twig' with { level: 'warning', messages: app.flashes('error') } %}
|
||||
{% include '_partials/_toast.html.twig' with { level: 'warning', messages: app.flashes('error') } %}
|
||||
{% endif %}
|
||||
{% if app.session.flashBag.peek('success')|length > 0 %}
|
||||
{% include '_partials/_alert.html.twig' with { level: 'success', messages: app.flashes('success') } %}
|
||||
{% include '_partials/_toast.html.twig' with { level: 'success', messages: app.flashes('success') } %}
|
||||
{% endif %}
|
||||
{% if app.session.flashBag.peek('info')|length > 0 %}
|
||||
{% include '_partials/_alert.html.twig' with { level: 'info', messages: app.flashes('info') } %}
|
||||
{% include '_partials/_toast.html.twig' with { level: 'info', messages: app.flashes('info') } %}
|
||||
{% endif %}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
{% for message in messages %}
|
||||
{% if message is iterable %}
|
||||
{% set message = message.id | trans(message.parameters | default({}), message.domain | default(null), message.locale | default(null)) | raw %}
|
||||
{% else %}
|
||||
{% set message = message | trans | raw %}
|
||||
{% endif %}
|
||||
<div {{ stimulus_controller('toast', { 'text': message, 'class': 'toastify--' ~ level }) }}></div>
|
||||
{% endfor %}
|
||||
@@ -12,6 +12,5 @@
|
||||
</head>
|
||||
<body class="bg-white text-gray-700 font-sans antialiased text-sm">
|
||||
{% block body %}{% endblock %}
|
||||
{% include '_partials/_flashes.html.twig' %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -3,34 +3,57 @@
|
||||
{% block content %}
|
||||
{{ form_start(form) }}
|
||||
{% if not form.vars.valid %}
|
||||
<article>
|
||||
<header>
|
||||
<strong>Fehler</strong>
|
||||
</header>
|
||||
{{ form_errors(form) }}
|
||||
</article>
|
||||
<div class="rounded-md bg-red-50 p-4 mb-4">
|
||||
<div class="flex">
|
||||
<div class="shrink-0">
|
||||
<svg class="size-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
{% if form.vars.errors|length > 0 %}
|
||||
<h3 class="text-sm font-medium text-red-800">
|
||||
Die Buchung konnte nicht aktualisiert werden
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-red-700">
|
||||
<ul role="list" class="list-disc space-y-1 pl-5">
|
||||
{% for error in form.vars.errors %}
|
||||
<li>
|
||||
{{ error.message }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% else %}
|
||||
<h3 class="text-sm font-medium text-red-800">
|
||||
Die Buchung konnte nicht aktualisiert werden. Problematische Eingaben wurden entsprechend markiert.
|
||||
</h3>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="flex flex-col space-y-8 pb-4">
|
||||
<div class="flex flex-col space-y-8 pb-4" {{ stimulus_controller('booking', { 'availabilities': availabilities.items }) }}>
|
||||
<div class="p-8 border border-gray-300 rounded-md"
|
||||
{{ stimulus_controller('availabilities')|stimulus_controller('toggle', { 'open': true }, { 'closed': 'hidden' }) }}>
|
||||
{{ stimulus_controller('toggle', { 'open': true }, { 'closed': 'hidden' }) }}>
|
||||
<div role="button" class="flex items-center justify-between" {{ stimulus_action('toggle', 'toggle', 'click') }}>
|
||||
<span class="block text-3xl font-semibold">Reisedaten</span>
|
||||
<span class="block text-2xl font-semibold">Reisedaten</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" {{ stimulus_target('toggle', 'icon') }}>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-4 pt-4" {{ stimulus_target('toggle', 'toggle') }}>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-x-8 gap-y-4 pt-4" {{ stimulus_target('toggle', 'toggle') }}>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
Destination
|
||||
Reise
|
||||
</h3>
|
||||
{{ bookingData.travel }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
Reisedatum
|
||||
Reisezeitraum
|
||||
</h3>
|
||||
{{ bookingData.travelDate|date('d.m.Y') }}
|
||||
{{ travelData.dateFrom|date('d.m.Y') }} - {{ travelData.dateTo|date('d.m.Y') }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
@@ -38,6 +61,24 @@
|
||||
</h3>
|
||||
{{ bookingData.bookingDate|date('d.m.Y') }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
Anmelder
|
||||
</h3>
|
||||
{{ bookingData.applicant.firstName }} {{ bookingData.applicant.name }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
Anzahl Teilnehmer
|
||||
</h3>
|
||||
{{ bookingData.participants|length }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
Gesamtpreis
|
||||
</h3>
|
||||
{{ bookingData.totalPrice|format_currency('EUR') }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
Inklusivleistungen
|
||||
@@ -52,39 +93,65 @@
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
Aktualisierung möglich bis
|
||||
</h3>
|
||||
<ul class="list-disc pl-4">
|
||||
<li>
|
||||
Unterkunft: {{ mutableData.items['accommodation'].mutableBefore|date('d.m.Y') }}
|
||||
</li>
|
||||
<li>
|
||||
Teilnehmer: {{ mutableData.items['participant_data'].mutableBefore|date('d.m.Y') }}
|
||||
</li>
|
||||
<li>
|
||||
Zusatzleistungen: {{ mutableData.items['additional_services'].mutableBefore|date('d.m.Y') }}
|
||||
</li>
|
||||
<li>
|
||||
Beförderung: {{ mutableData.items['transportation'].mutableBefore|date('d.m.Y') }}
|
||||
</li>
|
||||
<li>
|
||||
Zustiege: {{ mutableData.items['pickup'].mutableBefore|date('d.m.Y') }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% for child in form.participants %}
|
||||
{% set participant = child.vars.data %}
|
||||
<div class="{{ html_classes('p-8 border rounded-md', { 'border-gray-300': child.vars.valid, 'border-red-500': not child.vars.valid }) }}" {{ stimulus_controller('availabilities')|stimulus_controller('toggle', {'open': child.vars.valid == false}, { 'closed': 'hidden' }) }}>
|
||||
<div class="{{ html_classes('p-8 border rounded-md', { 'border-gray-300': child.vars.valid, 'border-red-500': not child.vars.valid }) }}" {{ stimulus_controller('toggle', {'open': child.vars.valid == false}, { 'closed': 'hidden' }) }}>
|
||||
<div role="button" class="flex items-center justify-between" {{ stimulus_action('toggle', 'toggle', 'click') }}>
|
||||
<div class="text-xl font-semibold">Teilnehmer:in {{ participant.index }}: {{ participant.firstName }} {{ participant.lastName }}</div>
|
||||
<div class="text-2xl font-semibold">Teilnehmer:in {{ participant.index }}: {{ participant.firstName }} {{ participant.lastName }}</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" {{ stimulus_target('toggle', 'icon') }}>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden" {{ stimulus_target('toggle', 'toggle') }}>
|
||||
<div class="flex flex-col space-y-4 pt-4">
|
||||
<div>
|
||||
<div class="relative">
|
||||
<h3 class="text-xl font-semibold pb-2">
|
||||
Persönliche Daten
|
||||
</h3>
|
||||
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-4 pb-4">
|
||||
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4 pb-4">
|
||||
{{ form_row(child.firstName) }}
|
||||
{{ form_row(child.lastName) }}
|
||||
{{ form_row(child.gender) }}
|
||||
{{ form_row(child.dateOfBirth) }}
|
||||
{{ form_row(child.nationality) }}
|
||||
</fieldset>
|
||||
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-4 pb-4">
|
||||
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4 pb-4">
|
||||
{{ form_row(child.email) }}
|
||||
{{ form_row(child.mobile) }}
|
||||
</fieldset>
|
||||
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-4">
|
||||
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4">
|
||||
{{ form_row(child.height) }}
|
||||
{{ form_row(child.shoeSize) }}
|
||||
{{ form_row(child.weight) }}
|
||||
</fieldset>
|
||||
{% if not travelData.participantDataMutable %}
|
||||
<div class="absolute top-0 left-0 inset-0 cursor-not-allowed"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold pb-2">
|
||||
@@ -93,11 +160,11 @@
|
||||
{% set room = bookingData.roomForParticipant(participant.index) %}
|
||||
{{ room.label }} ({{ room.individualPrice[participant.index]|format_currency('EUR') }})
|
||||
</div>
|
||||
<div>
|
||||
<div class="relative">
|
||||
<h3 class="text-xl font-semibold pb-2">
|
||||
Leistungen
|
||||
</h3>
|
||||
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-4">
|
||||
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4">
|
||||
{% if child.courses is defined %}
|
||||
{{ form_row(child.courses) }}
|
||||
{% endif %}
|
||||
@@ -114,12 +181,15 @@
|
||||
{{ form_row(child.rentals) }}
|
||||
{% endif %}
|
||||
</fieldset>
|
||||
{% if not travelData.additionalServicesMutable %}
|
||||
<div class="absolute top-0 left-0 inset-0 cursor-not-allowed"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<div class="relative">
|
||||
<h3 class="text-xl font-semibold pb-2">
|
||||
Hin-/Rückreise
|
||||
</h3>
|
||||
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-4" {{ stimulus_controller('select-toggle', { 'show': ['BUS'] }, { 'hidden': 'hidden' }) }}>
|
||||
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4" {{ stimulus_controller('select-toggle', { 'show': ['BUS'] }, { 'hidden': 'hidden' }) }}>
|
||||
{{ form_row(child.transportationServiceTo) }}
|
||||
{{ form_row(child.transportationServiceFro) }}
|
||||
{% if child.pickup is defined %}
|
||||
@@ -128,6 +198,9 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
</fieldset>
|
||||
{% if not travelData.transportationServicesMutable %}
|
||||
<div class="absolute top-0 left-0 inset-0 cursor-not-allowed"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold pb-2">
|
||||
|
||||
@@ -98,7 +98,7 @@
|
||||
<div class="flex h-6 items-center">
|
||||
{{ form_widget(form) }}
|
||||
</div>
|
||||
<div class="{{ html_classes('ml-3 leading-6', { 'text-red-500': errors|length }) }}">
|
||||
<div class="{{ html_classes('ml-1 leading-6', { 'text-red-500': errors|length }) }}">
|
||||
<label for="{{ form.vars.id }}">
|
||||
{{ form.vars.label }}
|
||||
</label>
|
||||
@@ -125,16 +125,7 @@
|
||||
|
||||
{%- block choice_widget_expanded -%}
|
||||
{%- for child in form %}
|
||||
<div class="relative flex items-start pb-2">
|
||||
<div class="min-w-0 flex-1 text-sm leading-4">
|
||||
<label for="{{ child.vars.id }}" class="select-none font-medium text-gray-900">
|
||||
{{ child.vars.label }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="ml-3 flex h-4 items-center">
|
||||
{{- form_widget(child) -}}
|
||||
</div>
|
||||
</div>
|
||||
{{- form_row(child) -}}
|
||||
{% endfor -%}
|
||||
{%- endblock choice_widget_expanded -%}
|
||||
|
||||
|
||||
@@ -11,11 +11,11 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="content">
|
||||
{% include '_partials/_flashes.html.twig' %}
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
<div class="htmx-indicator fixed top-0 left-0 inset-0 z-10 bg-white/90 flex items-center justify-center"
|
||||
id="loading-indicator">
|
||||
{% include '_partials/_spinner.html.twig' with { 'class': 'w-8 h-8'} %}
|
||||
</div>
|
||||
{% include '_partials/_flashes.html.twig' %}
|
||||
</div>
|
||||
|
||||
@@ -6,55 +6,57 @@
|
||||
<h2 class="text-2xl font-semibold pb-4">
|
||||
Persönliche Daten
|
||||
</h2>
|
||||
{{ form_start(form) }}
|
||||
{{ form_start(personalDataForm) }}
|
||||
<div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
|
||||
{{ form_row(form.firstName) }}
|
||||
{{ form_row(form.name) }}
|
||||
{{ form_row(form.gender) }}
|
||||
{{ form_row(form.dateOfBirth) }}
|
||||
{{ form_row(personalDataForm.firstName) }}
|
||||
{{ form_row(personalDataForm.name) }}
|
||||
{{ form_row(personalDataForm.gender) }}
|
||||
{{ form_row(personalDataForm.dateOfBirth) }}
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold pb-2">
|
||||
Anschrift
|
||||
</h3>
|
||||
<div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
|
||||
<div class="col-span-2">
|
||||
{{ form_row(form.street) }}
|
||||
{{ form_row(personalDataForm.street) }}
|
||||
</div>
|
||||
{{ form_row(form.postCode) }}
|
||||
{{ form_row(form.city) }}
|
||||
{{ form_row(form.country) }}
|
||||
{{ form_row(personalDataForm.postCode) }}
|
||||
{{ form_row(personalDataForm.city) }}
|
||||
{{ form_row(personalDataForm.country) }}
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold pb-2">
|
||||
Kontakt
|
||||
</h3>
|
||||
<div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
|
||||
<div class="col-span-2">
|
||||
{{ form_row(form.email) }}
|
||||
{{ form_row(personalDataForm.email) }}
|
||||
</div>
|
||||
{{ form_row(form.phone) }}
|
||||
{{ form_row(form.mobile) }}
|
||||
{{ form_row(personalDataForm.phone) }}
|
||||
{{ form_row(personalDataForm.mobile) }}
|
||||
</div>
|
||||
<button type="submit" class="btn">
|
||||
Speichern
|
||||
</button>
|
||||
{{ form_rest(form) }}
|
||||
{{ form_end(form) }}
|
||||
{{ form_rest(personalDataForm) }}
|
||||
{{ form_end(personalDataForm) }}
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-2xl font-semibold pb-4">
|
||||
Newsletter
|
||||
</h2>
|
||||
<p class="pb-4">
|
||||
Du bist aktuell {% if not personalData.communication.newsletter %}<strong>nicht</strong> {% endif%} zum Newsletter
|
||||
angemeldet.
|
||||
</p>
|
||||
<button type="button" class="btn" hx-post="{{ path('app_personal_data_newsletter') }}" hx-target="#app">
|
||||
{% if personalData.communication.newsletter %}
|
||||
vom Newsletter abmelden
|
||||
{% else %}
|
||||
zum Newsletter anmelden
|
||||
{% endif %}
|
||||
</button>
|
||||
<div>
|
||||
<h2 class="text-2xl font-semibold pb-4">
|
||||
Newsletter
|
||||
</h2>
|
||||
<p class="pb-4">
|
||||
Du bist aktuell {% if not personalData.communication.newsletter %}<strong>nicht</strong> {% endif%} zum Newsletter
|
||||
angemeldet.
|
||||
</p>
|
||||
<button type="button" class="btn" hx-post="{{ path('app_personal_data_newsletter') }}" hx-target="#app" hx-swap="outerHTML">
|
||||
{% if personalData.communication.newsletter %}
|
||||
vom Newsletter abmelden
|
||||
{% else %}
|
||||
zum Newsletter anmelden
|
||||
{% endif %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user