ProjetDevWeb2/Projet/src/main/webapp/WEB-INF/AfficherPage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<jsp:include page="Header.jsp">
	<jsp:param name="titre" value="Page" />
</jsp:include>


<div class="columns">
  <div class="column is-one-fifth">
	<jsp:include page="MenuPages.jsp" />
  </div>
  <div class="column">
  <c:choose>
	  <c:when test="${not empty page.titre}">
	  	<h2 class="block">${page.titre}</h2>
	  	<div class="block" id="md">
			<c:forEach var="bloc" items="${page.listeBlocs}">
			  <div class="field is-grouped is-align-items-flex-start bloc-container" data-id="${bloc.id}">
			    <div class="control is-expanded">
			      <textarea
			        class="textarea is-primary"
			        rows="1"
			        data-id="${bloc.id}"
			        data-ordre="${bloc.ordre}"
			        data-type="${bloc.type}"
			      >${bloc.contenu}</textarea>
			    </div>
			    <div class="control">
			      <button class="delete is-danger delete-bloc-btn" data-id="${bloc.id}"></button>
			    </div>
			  </div>
			</c:forEach>
			
			  <div class="field is-grouped is-align-items-flex-start bloc-container" data-id="${bloc.id}">
			    <div class="control is-expanded">
			      <textarea
			        class="textarea is-primary"
			        rows="1"
			        data-id="${bloc.id}"
			        data-ordre="${bloc.ordre}"
			        data-type="${bloc.type}"
			      >${bloc.contenu}</textarea>
			    </div>
			    <div class="control">
			      <button class="delete is-danger delete-bloc-btn" data-id="${bloc.id}"></button>
			    </div>
			  </div>
		</div>
	  </c:when>
	<c:otherwise>
        <p>Pas encore de page choisie.</p>
    </c:otherwise>
  </c:choose>
  </div>
  <div class="column is-one-quarter">
	<jsp:include page="Tchat.jsp" />
  </div>
</div>

<script>
  // Fonction pour ajouter un nouvel événement à chaque textarea
  function addTextareaEvent(textarea) {
    
    textarea.addEventListener('keydown', function(event) {
 
      if (event.key === 'Enter' && !event.shiftKey) {
        event.preventDefault(); // Empêcher le saut de ligne par défaut
        
        const allTextareas = document.querySelectorAll('#md textarea');
        const lastTextarea = allTextareas[allTextareas.length - 1];
        
        if (lastTextarea.value.trim() !== "") {
        	// Envoi d'un nouveau bloc au serveur
        	const params = new URLSearchParams();
            params.append("contenu", lastTextarea.value);
            params.append("type", "TEXTE"); // Tu peux le changer dynamiquement
            params.append("ordre", allTextareas.length);
            params.append("pageId", new URLSearchParams(window.location.search).get("id"));

            fetch("/Projet/NouveauBloc", {
            	method: "POST",
            	headers: {
              		"Content-Type": "application/x-www-form-urlencoded"
            	},
            	body: params
            }).then(response => {
            	if (!response.ok) {
              	console.error("Erreur lors de l'ajout du bloc.");
            	}
            });
          
            // Créer un nouveau textarea seulement si le dernier n'est pas vide
            const newTextarea = document.createElement('textarea');
            newTextarea.classList.add('textarea', 'is-primary');
            newTextarea.placeholder = "Tapez ici...";
            newTextarea.rows = "1";
            newTextarea.dataset.type = "TEXTE";

            document.getElementById('md').appendChild(newTextarea);
            addTextareaEvent(newTextarea);
            autoResize(newTextarea);
            newTextarea.focus();
          } else {
			// Envoi d'un update de bloc au serveur
			event.preventDefault();
			const currentTextarea = event.target;
        	const blocId = currentTextarea.getAttribute('data-id'); // Récupère l'ID du bloc
          	const params = new URLSearchParams();
          	params.append("contenu", currentTextarea.value);
          	params.append("blocId", blocId);
        	
          	fetch("/Projet/ModifBloc", {
                method: "POST",
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded"
                },
                body: params
              }).then(response => {
                if (!response.ok) {
                  console.error("Erreur lors de la mise à jour du bloc.");
                }
              });
        	  
          	lastTextarea.focus();
          }
        } else if (event.key === 'Enter' && event.shiftKey) {  // Si Shift + Entrée est pressé
            event.preventDefault();
            const cursorPosition = textarea.selectionStart;
            const textBefore = textarea.value.substring(0, cursorPosition);
            const textAfter = textarea.value.substring(cursorPosition);
            textarea.value = textBefore + "\n" + textAfter;
            textarea.selectionStart = textarea.selectionEnd = cursorPosition + 1;
            autoResize(textarea);
            textarea.focus();
          } 
      });
    
      textarea.addEventListener('input', function () {
			autoResize(textarea);
      });
  }
  
  function autoResize(textarea) {
	    textarea.style.height = 'auto';
	    textarea.style.height = textarea.scrollHeight + 'px';
  }

  document.querySelectorAll('#md textarea').forEach(t => {
	    addTextareaEvent(t);
	    autoResize(t)
  });
  
  function addDeleteEvent(button) {
	button.addEventListener('click', function () {
      const blocId = button.dataset.id;
      const blocContainer = button.closest('.bloc-container');
      const textarea = blocContainer.querySelector('textarea');
      
      if (textarea.value.trim() === "") {
          return; // Empêche la suppression si le textarea est vide
      }

      if (confirm("Voulez-vous vraiment supprimer ce bloc ?")) {
        const params = new URLSearchParams();
        params.append("blocId", blocId);

        fetch("/Projet/SupprimerBloc", {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          body: params
        }).then(response => {
          if (response.ok) {
            blocContainer.remove(); // Supprime visuellement le bloc
          } else {
            console.error("Erreur lors de la suppression du bloc.");
          }
        });
      }
	});
  }
  
  document.querySelectorAll('.delete-bloc-btn').forEach(t => {
	  addDeleteEvent(t);
  });
</script>
<jsp:include page="Footer.jsp" />