From b21e3ebfa222b045f6a993682c445e3b1659cf15 Mon Sep 17 00:00:00 2001
From: Fred Tempez <frederic.tempez@outlook.com>
Date: Fri, 30 Aug 2024 19:04:27 +0200
Subject: [PATCH] agenda une jolie popup

---
 agenda/view/index/index.css    | 33 ++++++++++++++++-----
 agenda/view/index/index.js.php | 53 ++++++++++++++++++++++++++--------
 agenda/view/index/index.php    | 19 +++++-------
 3 files changed, 75 insertions(+), 30 deletions(-)

diff --git a/agenda/view/index/index.css b/agenda/view/index/index.css
index 1f47c1e..c7032fe 100644
--- a/agenda/view/index/index.css
+++ b/agenda/view/index/index.css
@@ -153,21 +153,40 @@ table th{
 
 
 /*  Les popup  */
+/* Style de base pour le popup */
 #eventPopup {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: white;
+  width: 300px;
   padding: 20px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-  z-index: 1000;
+  background-color: #ffffff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  text-align: center;
+  z-index: 1000; /* S'assure que le popup est au-dessus des autres éléments */
 }
 
-.popup-content {
-  text-align: left;
+/* Style du bouton de fermeture */
+.close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+    font-size: 12px; /* Taille de la croix de fermeture */
 }
 
-.popup-content h2 {
-  margin-top: 0;
+/* Style pour le titre de l'événement */
+.event-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
 }
+
+/* Style pour les détails de l'événement */
+.event-details {
+  font-size: 14px;
+  color: #666;
+}
+
diff --git a/agenda/view/index/index.js.php b/agenda/view/index/index.js.php
index d4baab8..abf4363 100644
--- a/agenda/view/index/index.js.php
+++ b/agenda/view/index/index.js.php
@@ -65,7 +65,7 @@ $(document).ready(function () {
 				var eventStart = info.event.start;
 				var eventEnd = info.event.end;
 				var eventDescription = info.event.extendedProps.description; // Exemple d'attribut personnalisé
-		
+
 				// Afficher les informations dans la popup
 				showPopup(eventId, eventTitle, eventStart, eventEnd, eventDescription);
 			}
@@ -127,23 +127,52 @@ $(document).ready(function () {
 		calendar.render();
 	});
 
+	$('.close-btn').on('click', function () {
+		$('#eventPopup').fadeOut(); // Utilise fadeOut pour une fermeture en fondu
+	});
+
+    // Fermer le popup en cliquant à l'extérieur de '#eventPopup'
+    $(document).on('mousedown', function(event) {
+        // Vérifie si le clic a été fait à l'extérieur de '#eventPopup'
+        if (!$(event.target).closest('#eventPopup').length) {
+            // Si le popup est visible, le fermer
+            if ($('#eventPopup').is(':visible')) {
+                $('#eventPopup').fadeOut();
+            }
+        }
+    });
+
 });
 
 
 /** Fonction pour affiche la popup */
 function showPopup(eventId, eventTitle, eventStart, eventEnd, eventDescription) {
-    // Utilisation de l'API Date native pour formater les dates de début et de fin
-    var formattedStart = eventStart ? eventStart.toLocaleString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : 'N/A';
-    var formattedEnd = eventEnd ? eventEnd.toLocaleString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : 'N/A';
+	// Utilisation de l'API Date native pour formater les dates de début et de fin
+	var formattedStart = eventStart ? eventStart.toLocaleString('fr-FR', {
+		day: '2-digit',
+		month: '2-digit',
+		year: 'numeric',
+		hour: '2-digit',
+		minute: '2-digit'
+	}) : 'N/A';
+	var formattedEnd = eventEnd ? eventEnd.toLocaleString('fr-FR', {
+		day: '2-digit',
+		month: '2-digit',
+		year: 'numeric',
+		hour: '2-digit',
+		minute: '2-digit'
+	}) : 'N/A';
 
-    // Remplir les éléments de la popup avec les informations de l'événement
-    $('#popupEventId').text(eventId);
-    $('#popupEventTitle').text(eventTitle);
-    $('#popupEventStart').text(formattedStart);
-    $('#popupEventEnd').text(formattedEnd);
-    $('#popupEventDescription').text(eventDescription);
+	// Remplir les éléments de la popup avec les informations de l'événement
+	$('#popupEventTitle').text(eventTitle);
+	$('#popupEventStart').text(formattedStart);
+	$('#popupEventEnd').text(formattedEnd);
 
-    // Afficher la popup
-    $('#eventPopup').fadeIn();
+	// Afficher la popup
+	$('#eventPopup').fadeIn();
 }
 
+/* Refermer la popup */
+function closePopup() {
+	document.querySelector('.popup').style.display = 'none';
+}
\ No newline at end of file
diff --git a/agenda/view/index/index.php b/agenda/view/index/index.php
index c643827..9b688bb 100644
--- a/agenda/view/index/index.php
+++ b/agenda/view/index/index.php
@@ -2,17 +2,14 @@
 <div id="index_wrapper">
 	<!--Affiche l'agenda-->
 	<div id='calendar'> </div>
-	<div id="eventPopup" style="display: none;">
-		<div class="popup-content">
-			<h2>Details de l'événement</h2>
-			<p><strong>ID :</strong> <span id="popupEventId"></span></p>
-			<p><strong>Titre :</strong> <span id="popupEventTitle"></span></p>
-			<p><strong>Début :</strong> <span id="popupEventStart"></span></p>
-			<p><strong>Fin :</strong> <span id="popupEventEnd"></span></p>
-			<p><strong>Description :</strong> <span id="popupEventDescription"></span></p>
-			<button onclick="$('#eventPopup').fadeOut();">Fermer</button>
-		</div>
-	</div>
+    <div id="eventPopup" style="display: none;">
+        <div class="popup-content">
+			<span class="close-btn">&times;</span>
+            <p><strong>Titre :</strong> <span id="popupEventTitle"></span></p>
+            <p><strong>Début :</strong> <span id="popupEventStart"></span></p>
+            <p><strong>Fin :</strong> <span id="popupEventEnd"></span></p>
+        </div>
+    </div>
 	<?php echo template::formOpen('index_events'); ?>
 	<?php echo template::formClose(); ?>
 </div>
\ No newline at end of file