- Create Event entity with fields: account, title, description (text), startAt, endAt, address, zipcode, city, eventMainPicture (VichUploader), isOnline, createdAt, updatedAt - Create EventRepository - Add migration for event table with all columns - Add "Creer un evenement" button on account events tab - Add create event page (/mon-compte/evenement/creer) with full form - Build custom web component <e-ticket-editor> WYSIWYG editor: - Toolbar: bold, italic, underline, paragraph, bullet list, remove formatting - contentEditable div with HTML sync to hidden textarea - HTML sanitizer (strips disallowed tags, XSS safe) - Neo-brutalist CSS styling - CSP compliant (no inline styles) - Register editor in app.js via customElements.define - Add editor CSS in app.scss - Add 16 Event entity tests (all fields + isOnline + picture upload + updatedAt) - Add 16 editor JS tests (sanitizer + custom element lifecycle) - Add 3 AccountController tests (create event page, submit, access control) - Update placeholders to generic examples (no association-specific data) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
74 lines
5.3 KiB
Twig
74 lines
5.3 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}Creer un evenement - E-Ticket{% endblock %}
|
|
|
|
{% block body %}
|
|
<div style="max-width:50rem;margin:0 auto;padding:3rem 1rem;">
|
|
<a href="{{ path('app_account', {tab: 'events'}) }}" class="inline-flex items-center gap-2 text-sm font-black uppercase tracking-widest text-gray-500 hover:text-gray-900 transition-colors" style="margin-bottom:2rem;display:inline-flex;">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M15 19l-7-7 7-7"/></svg>
|
|
Retour aux evenements
|
|
</a>
|
|
|
|
<h1 class="text-3xl font-black uppercase tracking-tighter italic" style="border-bottom:4px solid #111827;display:inline-block;margin-bottom:0.5rem;">Creer un evenement</h1>
|
|
<p class="font-bold text-gray-600 italic" style="margin-bottom:2rem;">Renseignez les informations de votre evenement.</p>
|
|
|
|
{% for message in app.flashes('error') %}
|
|
<div style="border:4px solid #111827;box-shadow:4px 4px 0 rgba(0,0,0,1);background:#fee2e2;padding:1rem 1.5rem;margin-bottom:1.5rem;">
|
|
<p class="font-black text-sm">{{ message }}</p>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<form method="post" action="{{ path('app_account_create_event') }}" enctype="multipart/form-data" style="display:flex;flex-direction:column;gap:1.5rem;">
|
|
<div>
|
|
<label for="event_title" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Titre de l'evenement</label>
|
|
<input type="text" id="event_title" name="title" required style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;" class="focus:border-indigo-600" placeholder="Brocante de printemps 2026">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="event_description" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Description</label>
|
|
<e-ticket-editor>
|
|
<textarea id="event_description" name="description" rows="5" placeholder="Decrivez votre evenement..."></textarea>
|
|
</e-ticket-editor>
|
|
</div>
|
|
|
|
<div style="display:flex;flex-wrap:wrap;gap:1.5rem;">
|
|
<div style="flex:1;min-width:200px;">
|
|
<label for="event_start_at" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Date et heure de debut</label>
|
|
<input type="datetime-local" id="event_start_at" name="start_at" required style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;" class="focus:border-indigo-600">
|
|
</div>
|
|
<div style="flex:1;min-width:200px;">
|
|
<label for="event_end_at" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Date et heure de fin</label>
|
|
<input type="datetime-local" id="event_end_at" name="end_at" required style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;" class="focus:border-indigo-600">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="event_address" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Adresse</label>
|
|
<input type="text" id="event_address" name="address" required style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;" class="focus:border-indigo-600" placeholder="12 avenue de la Republique">
|
|
</div>
|
|
|
|
<div style="display:flex;flex-wrap:wrap;gap:1.5rem;">
|
|
<div style="flex:1;min-width:120px;max-width:200px;">
|
|
<label for="event_zipcode" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Code postal</label>
|
|
<input type="text" id="event_zipcode" name="zipcode" required maxlength="10" style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;" class="focus:border-indigo-600" placeholder="75011">
|
|
</div>
|
|
<div style="flex:2;min-width:200px;">
|
|
<label for="event_city" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Ville</label>
|
|
<input type="text" id="event_city" name="city" required style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;" class="focus:border-indigo-600" placeholder="Paris">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="event_main_picture" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Image principale</label>
|
|
<input type="file" id="event_main_picture" name="event_main_picture" accept="image/*" style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;background:white;">
|
|
</div>
|
|
|
|
<div>
|
|
<button type="submit" style="padding:0.75rem 2rem;border:3px solid #111827;box-shadow:4px 4px 0 rgba(0,0,0,1);background:#fabf04;cursor:pointer;" class="font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
|
|
Creer l'evenement
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|