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

des trucs

Browse Source
This commit is contained in:
mepiphana2023
2024-11-27 13:16:54 +01:00
parent f607b64239
commit 5a69867774
11 changed files with 447 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
templates/sortie/create.html.twig
View File

@@ -46,6 +46,7 @@
.modern-button svg {
margin-right: 0.5rem;
}
#add-lieu-modal .bg-white {
max-width: 80%;
max-height: 90%;
@@ -60,8 +61,7 @@
<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' } }) }}
{{ 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">
@@ -94,10 +94,29 @@
<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 %}
<button type="button" id="generate-image" class="modern-button mt-2">
Générer une image
</button>
</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">
@@ -131,7 +150,6 @@
<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>
@@ -148,30 +166,29 @@
</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('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 %}
{% endblock %}