189 lines
8.9 KiB
Twig
189 lines
8.9 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') }}
|
|
<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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#add-lieu-modal .bg-white {
|
|
max-width: 80%;
|
|
max-height: 90%;
|
|
}
|
|
</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', 'enctype': 'multipart/form-data' } }) }}
|
|
|
|
<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 class="form-group">
|
|
<label for="sortie_imageFile">Image de la sortie</label>
|
|
{{ form_widget(form.imageFile, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500', 'onchange': 'previewImage(event)' } }) }}
|
|
<small class="text-gray-500">Formats acceptés : JPG, PNG (max. 5 Mo).</small>
|
|
|
|
{% if sortie and sortie.image %}
|
|
<div class="mt-4">
|
|
<img id="image-preview" src="{{ asset('img/sortie/' ~ sortie.image) }}" alt="Image prévisualisée" class="w-full h-auto rounded-lg border border-gray-300">
|
|
</div>
|
|
{% else %}
|
|
<div class="mt-4">
|
|
<img id="image-preview" src="" alt="Aucune image sélectionnée" class="w-full h-auto rounded-lg border border-gray-300 hidden">
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="form-group">
|
|
<label for="sortie_lieu">Lieu</label>
|
|
<div class="flex items-center space-x-2">
|
|
{{ form_widget(form.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="btnThird">
|
|
Ajouter
|
|
</button>
|
|
</div>
|
|
</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">Ville :</label>
|
|
<span id="ville-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="btnPrimary">
|
|
Enregistrer
|
|
</button>
|
|
<a href="{{ path('home') }}" class="btnAnnule">
|
|
Annuler
|
|
</a>
|
|
</div>
|
|
{{ form_rest(form) }}
|
|
{{ form_end(form, { 'render_rest': false }) }}
|
|
</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('show-lieu') }}
|
|
|
|
<script>
|
|
function previewImage(event) {
|
|
const input = event.target;
|
|
const preview = document.getElementById('image-preview');
|
|
|
|
if (input.files && input.files[0]) {
|
|
const reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
preview.src = e.target.result;
|
|
preview.classList.remove('hidden');
|
|
};
|
|
reader.readAsDataURL(input.files[0]);
|
|
} else {
|
|
preview.src = '';
|
|
preview.classList.add('hidden');
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
{% endblock %}
|