{% extends 'base_front.html.twig' %}{% block title %}{{ parent() }} | {{ r.nom }} | {{ ssr.nom }} | {{ post.titre }}{% endblock %}{% block h1 %}{{ post.titre }}{% endblock %}{% block ariane %} <nav class="navigateur" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="{{ path("home") }}">{{ config.titreAccueil }}</a></li> <li class="breadcrumb-item"><a href="{{ path('rubriques', {slug:r.slug })}}">{{ r.nom }}</a></li> <li class="breadcrumb-item"><a href="{{ path('ssrubriques', {slug: r.slug, slug2 : ssr.slug })}}">{{ ssr.nom }}</a></li> <li class="breadcrumb-item"><a href="{{ path('agora_categorie', {slug: r.slug, slug2 : ssr.slug, slug3: post.categorie.slug })}}">{{ post.categorie.nom }}</a></li> <li class="breadcrumb-item active" aria-current="page">{{ post.titre }}</li> </ol> </nav>{% endblock %}{% block body %} <div class="row mx-0"> <div class="col-md-12 "> <div class="p-4 bg-white rounded"> <div class="text-end"> <p class="fst-italic mb-1">{{ post.createdAt|date('d/m/Y') }}</p> </div> {% if post.description %} <div class="ck"> {{ post.description|raw }} </div> {% endif %} {% if post.fichier %} <a target="_blank" href="{{ path('post_pdf', {uuid: post.uuid}) }}" > <i class="text-danger" data-feather="file"></i> </a> {% endif %} {# {% if post.user %} <h5 class="titreH3 "> {% if app.user %} {% if post.user %} {{ post.user.prenom }} {{ post.user.nom }} {% endif %} {% else %} {% if post.user %} {{ post.user.prenom }} {{ post.user.nom|slice(0, 1)|upper }} {% endif %} {% endif %} </h5> {% endif %} #} {% if post.categorie %} <h5 class="titreH3"> #{{ post.categorie.nom }} </h5> {% endif %} {% if post.souscategorie %} <h5 class="titreH3"> #{{ post.souscategorie.nom }} </h5> {% endif %} {% if post.user != app.user %} {% if app.user %} <div class="text-end"> {% if getVerifConversation(post.user, app.user, post, 'agora') %} {% set slug = getVerifConversation(post.user, app.user, post, 'agora') %} <a class="btn btn-primary rounded" href="{{ path('app_messagerie_show',{'slug' : slug })}}">Retourner à la conversation</a> {% else %} <button type="button" class="btn btn-primary rounded" data-bs-toggle="modal" data-bs-target="#exampleModal"> Contacter {# {{ post.user.prenom }} #} </button> {% endif %} </div> {% endif %} {% endif %} </div> </div> </div> <div class="modal modal-lg fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Contacter</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="input-box"> <textarea id="messageInput" placeholder="Tapez votre message ici..." rows="8"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Annuler</button> <button class="btn btn-primary" onclick="sendMessage()">Envoyer</button> <div id="displayMessage"></div> </div> </div> </div> </div>{% endblock %}{% block stylesheets %} <style> .input-box { display: flex; align-items: center; padding-top: 10px; } textarea { flex: 1; padding: 5px; resize: none; border: 1px solid #ccc; border-radius: 5px; /*overflow-y: hidden;*/ } button { padding: 8px 15px; margin-left: 10px; } </style>{% endblock %}{% block javascripts %} <script> document.addEventListener('DOMContentLoaded', function() { // Récupérer la div conversationBox const conversationBox = document.getElementById('contentContainer'); // Fonction pour déplacer la div tout en bas function scrollToBottom() { conversationBox.scrollTop = conversationBox.scrollHeight; console.log(conversationBox.scrollTop); } // Écouter l'événement 'load' pour s'assurer que le contenu est chargé // Appeler la fonction pour faire défiler vers le bas une fois le contenu chargé scrollToBottom(); }); function sendMessage() { const textarea = document.getElementById('messageInput'); const textValue = textarea.value; const lines = textValue.split('\n'); let contentWithParagraphs = ''; lines.forEach((line) => { contentWithParagraphs += `<p>${line}</p>`; }); console.log(contentWithParagraphs); if (contentWithParagraphs !== '') { sendDatabase(contentWithParagraphs); } } function sendDatabase(contentWithParagraphs) { let url = "{{ path('create_conversation') }}"; let data = { "uuid" : "{{ post.user.uuid }}", 'message': contentWithParagraphs, 'genre' : 'agora', "relation" : "{{ post.uuid }}", } $.ajax({ method: 'post', dataType: 'json', url : url, data : data, success: function (response) { $('#exampleModal').modal('hide'); $('#exampleModal').remove(); const alerteHTML = ` <div class="alert alert-success text-center disparition col-md-4 mx-auto shadow mt-4"> Votre message a bien été envoyé </div> `; // Sélectionnez l'élément container dans lequel vous souhaitez insérer l'alerte const container = document.getElementById('bodyContainer'); // Insérez l'alerte à la fin de l'élément container en utilisant insertAdjacentHTML container.insertAdjacentHTML('beforeend', alerteHTML); // Temps en millisecondes avant de faire disparaître le message (par exemple, 3000 ms = 3 secondes) const tempsDisparition = 3000; // Programme la disparition du message après le délai spécifié setTimeout(function () { const alerte = container.lastElementChild; alerte.remove(); }, tempsDisparition); }, error: function() { alert('error'); } }); } </script>{% endblock %}