97 lines
6.0 KiB
Twig
97 lines
6.0 KiB
Twig
{% extends 'main/base.html.twig' %}
|
|
|
|
{% block head %}
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Créer une sortie</title>
|
|
{% block stylesheets %}
|
|
{{ encore_entry_link_tags('app') }}
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch/dist/geosearch.css" />
|
|
<style>
|
|
#map {
|
|
width: 100%;
|
|
height: 500px;
|
|
}
|
|
</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">
|
|
{{ form_row(form.nom, {'label': 'Nom de la sortie', 'attr': {'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500'}}) }}
|
|
{{ form_row(form.dateHeureDebut, {'label': 'Date et heure de la sortie', 'attr': {'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500'}}) }}
|
|
{{ form_row(form.dateLimiteInscription, {'label': 'Date limite d\'inscription', 'attr': {'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500'}}) }}
|
|
{{ form_row(form.nbInscriptionsMax, {'label': 'Nombre de places', 'attr': {'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500'}}) }}
|
|
{{ form_row(form.duree, {'label': 'Durée (en minutes)', 'attr': {'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500'}}) }}
|
|
{{ form_row(form.infosSortie, {'label': 'Description et infos', 'attr': {'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500'}}) }}
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
{{ form_row(form.ville, {'label': 'Ville organisatrice', 'attr': {'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500', 'id': 'ville-select'}}) }}
|
|
<div class="flex items-center space-x-2">
|
|
{{ form_row(form.lieu, {'label': 'Lieu', 'attr': {'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500', 'id': 'lieu-select'}}) }}
|
|
<button type="button" id="add-lieu-button" class="p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300">+</button>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Rue :</label>
|
|
<span id="rue-value" class="block w-full p-3 border border-gray-300 rounded-lg bg-gray-100">Renseigner avec le lieu</span>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Code postal :</label>
|
|
<span id="codePostal-value" class="block w-full p-3 border border-gray-300 rounded-lg bg-gray-100">Renseigner avec le lieu</span>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Latitude :</label>
|
|
<span id="latitude-value" class="block w-full p-3 border border-gray-300 rounded-lg bg-gray-100">Renseigner avec le lieu</span>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Longitude :</label>
|
|
<span id="longitude-value" class="block w-full p-3 border border-gray-300 rounded-lg bg-gray-100">Renseigner avec le lieu</span>
|
|
</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_end(form) }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<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 aspect-w-16 aspect-h-9">
|
|
<h2 class="text-xl font-bold mb-4">Ajouter un lieu</h2>
|
|
<div id="map" class="w-full h-full mb-4 rounded-lg"></div>
|
|
<div id="lieu-details" class="mb-4 text-gray-700"></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="select-location" 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">Sélectionner</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 %}
|