johanleroy/ENI-sortir
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

forme création sortie

Browse Source
This commit is contained in:
marvin
2024-11-19 16:55:30 +01:00
parent 59c2d1445a
commit 455d419166
7 changed files with 276 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
templates/sortie/create.html.twig Normal file
View File

@@ -0,0 +1,169 @@
{% 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" />
{% endblock %}
</head>
{% endblock %}
{% block content %}
<div class="min-h-screen flex items-center justify-center bg-gray-100">
<!-- Carte blanche centrée -->
<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>
<!-- Début du formulaire -->
{{ form_start(form, { 'attr': { 'class': 'space-y-6' } }) }}
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Partie gauche du formulaire -->
<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>
<!-- Partie droite du formulaire -->
<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>
<!-- Champs dépendants -->
<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>
<!-- Boutons -->
<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 pour ajouter un lieu avec une carte -->
<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-3xl">
<h2 class="text-xl font-bold mb-4">Ajouter un lieu</h2>
<div id="map" class="w-full h-64 mb-4"></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>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-geosearch/dist/geosearch.umd.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const addLieuButton = document.getElementById('add-lieu-button');
const addLieuModal = document.getElementById('add-lieu-modal');
const cancelAddLieuButton = document.getElementById('cancel-add-lieu');
const selectLocationButton = document.getElementById('select-location');
const lieuSelect = document.getElementById('lieu-select');
const rueField = document.getElementById('rue-value');
const codePostalField = document.getElementById('codePostal-value');
const latitudeField = document.getElementById('latitude-value');
const longitudeField = document.getElementById('longitude-value');
let map, marker;
// Initialize the map
addLieuButton.addEventListener('click', function () {
addLieuModal.classList.remove('hidden');
if (!map) {
map = L.map('map').setView([48.8566, 2.3522], 13); // Default view on Paris
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
const provider = new window.GeoSearch.OpenStreetMapProvider();
const searchControl = new window.GeoSearch.GeoSearchControl({
provider: provider,
style: 'bar',
autoComplete: true,
autoCompleteDelay: 250,
});
map.addControl(searchControl);
map.on('geosearch/showlocation', function (e) {
const latlng = e.location;
map.setView(latlng, 13);
if (marker) {
marker.setLatLng(latlng);
} else {
marker = L.marker(latlng).addTo(map);
}
document.getElementById('latitude-value').textContent = latlng.y;
document.getElementById('longitude-value').textContent = latlng.x;
});
map.on('click', function (e) {
const { lat, lng } = e.latlng;
if (marker) {
marker.setLatLng([lat, lng]);
} else {
marker = L.marker([lat, lng]).addTo(map);
}
document.getElementById('latitude-value').textContent = lat;
document.getElementById('longitude-value').textContent = lng;
});
}
});
cancelAddLieuButton.addEventListener('click', function () {
addLieuModal.classList.add('hidden');
});
selectLocationButton.addEventListener('click', function () {
if (marker) {
const { lat, lng } = marker.getLatLng();
latitudeField.textContent = lat;
longitudeField.textContent = lng;
addLieuModal.classList.add('hidden');
}
});
});
</script>
{% endblock %}