155 lines
7.6 KiB
Twig
155 lines
7.6 KiB
Twig
{% extends 'main/base.html.twig' %}
|
|
|
|
{% block head %}
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
{% block title %}📣 Sortie.com Nouvelle sortie 🔊{% endblock %}
|
|
{% block stylesheets %}
|
|
{{ encore_entry_link_tags('app') }}
|
|
<style>
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form-group label {
|
|
margin-bottom: 0.5rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.modern-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.75rem 1rem;
|
|
background-color: #1d4ed8;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.modern-button:hover {
|
|
background-color: #2563eb;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.modern-button svg {
|
|
margin-right: 0.5rem;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
</head>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
|
<div class="w-full max-w-3xl bg-white p-8 rounded-lg shadow-lg">
|
|
<h1 class="text-2xl font-bold text-gray-800 mb-6 text-center">Créer une sortie</h1>
|
|
|
|
{{ form_start(form, { 'attr': { 'class': 'space-y-6' } }) }}
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-4">
|
|
<div class="form-group">
|
|
<label for="sortie_nom">Nom de la sortie</label>
|
|
{{ form_widget(form.nom, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="sortie_dateHeureDebut">Date et heure de début</label>
|
|
{{ form_widget(form.dateHeureDebut, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="sortie_dateLimiteInscription">Date limite d'inscription</label>
|
|
{{ form_widget(form.dateLimiteInscription, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="sortie_nbInscriptionsMax">Nombre de places</label>
|
|
{{ form_widget(form.nbInscriptionsMax, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="sortie_duree">Durée (en minutes)</label>
|
|
{{ form_widget(form.duree, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="sortie_infosSortie">Description et infos</label>
|
|
{{ form_widget(form.infosSortie, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="form-group">
|
|
<label for="sortie_ville">Ville</label>
|
|
{{ form_widget(form.ville, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="sortie_codePostal">Code postal</label>
|
|
{{ form_widget(form.codePostal, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="sortie_rue">Rue</label>
|
|
{{ form_widget(form.rue, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="sortie_latitude">Latitude</label>
|
|
{{ form_widget(form.latitude, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="sortie_longitude">Longitude</label>
|
|
{{ form_widget(form.longitude, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 flex justify-center space-x-4">
|
|
<button type="submit" name="action" value="save" class="px-6 py-3 bg-green-500 text-white rounded-lg shadow hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300">
|
|
Enregistrer
|
|
</button>
|
|
<a href="{{ path('home') }}" class="px-6 py-3 bg-gray-500 text-white rounded-lg shadow hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300">
|
|
Annuler
|
|
</a>
|
|
</div>
|
|
{{ form_rest(form) }}
|
|
{{ form_end(form, { 'render_rest': false }) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="add-lieu-modal" class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50 hidden">
|
|
<div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-4xl">
|
|
<h2 class="text-xl font-bold mb-4">Ajouter un lieu</h2>
|
|
|
|
<div class="form-group mb-4">
|
|
<label for="lieu-nom" class="block text-sm font-medium text-gray-700">Nom du lieu</label>
|
|
<input type="text" id="lieu-nom" class="block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="Nom du lieu" />
|
|
<div id="lieu-nom-error" class="text-sm text-red-500 mt-1 hidden"></div>
|
|
</div>
|
|
|
|
<div id="map" class="w-full h-96 mb-4 rounded-lg"></div>
|
|
|
|
<div class="flex justify-end space-x-4">
|
|
<button type="button" id="cancel-add-lieu" class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300">Annuler</button>
|
|
<button type="button" id="save-lieu" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300">Enregistrer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% block javascripts %}
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
<script src="https://unpkg.com/leaflet-geosearch/dist/geosearch.umd.js"></script>
|
|
{{ encore_entry_script_tags('add-lieu') }}
|
|
{{ encore_entry_script_tags('lieu') }}
|
|
{% endblock %}
|
|
{% endblock %}
|