Merge pull request #85 from IUT-Blagnac/lois-compte-rendu-pdf-pop-up

pop up + pdf + ajout fonction js
IUT-Blagnac · Jan 23, 2024 · cb5f807 · cb5f807
2 parents 50dc89c + d0dcd51
commit cb5f807
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 3 deletions.
diff --git a/Code source/IHM_user.php b/Code source/IHM_user.php
@@ -2,15 +2,19 @@
 <html>
 <head>
     <meta charset="utf-8"/>
-    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
-	  <script src="assets/js/locura4iot.js"> </script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js"></script>
+	<script src="assets/js/locura4iot.js"> </script>
+	<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
     <link rel="stylesheet" href="./assets/style.scss" />
+
     <title>Chasse au trésor : interface utilisateur</title>
 </head>
 <body>
 	<div class="nav-bar">
 		<h1> Bienvenue sur la carte de la course LocURa4IoT!</h1>
 	</div>
+
 	<div class="classMere">
 		<div class="centered-div">
 			<table>
@@ -28,11 +32,58 @@
 				</tr>
 			</table>
 		</div>
+		<div class="modal-background" id="myModal">
+			<div class="modal">
+				<span class="close-button" onclick="closeModal()">&times;</span>
+				<h3>Fin de partie!!!</h3>
+				<p>Le joueur ... a recuperer toutes les balises</p>
+				<p>Le score final:</p>
+				<?php
+					$tab = array("j0","j1", "j2", "j3", "j4","j5");
+					$classement = array("Premier","Deuxieme","Troisieme");
+
+					for ($i = 0; $i < 3; $i++) {
+						echo "<p>".$classement[$i].": ".$tab[$i+1]." </p>";
+					}
+
+
+
+				?>
+				<button id="genererPDF">Générer PDF</button>
+			</div>
+		</div>
+		<script>
+			window.onload=openModal();
+			$(document).ready(function() {
+				$('#genererPDF').on('click', function() {
+					// Utilisez pdfmake pour générer le PDF
+					var content = [
+						{ text: 'Date: ' + new Date().toLocaleDateString() },
+						{ text: 'Heure: ' + new Date().toLocaleTimeString() },
+						{ text: '\n' },
+						{ text: 'Compte rendu', fontSize: 16, bold: true, alignment: 'center' },
+						// saut de ligne
+						{ text: '\n' },
+						{ text: '\n' },
+						{ text: '\n' },
+						{ text: '\n' },
+						{ text: '\n' },
+						{ text: '\n' },
+						// tableau
+						{ text: 'Score de la course:', fontSize: 14, margin: [0, 10, 0, 5] },
+						{ text: 'A completer' },
+					];
+
+					pdfMake.createPdf({ content }).download('compte_rendu.pdf');
+					});
+			});
+
+		</script>
         <div class="centered-div">
             <table>
 
 				<?php
-    			$tab = array("j0","j1", "j2", "j3", "j4","j5");
+
 				$cpt = 0; 
 				$liste_size = count($tab);
 				static $color = 0;

diff --git a/Code source/assets/js/locura4iot.js b/Code source/assets/js/locura4iot.js
@@ -292,6 +292,31 @@ var joueursCaches = true;
 
         return 10
     }
+
+
+  //   $(document).ready(function() {
+  //   $('#genererPDF').on('click', function() {
+  //     // Créez une instance de jsPDF
+  //     var doc = new jsPDF();
+  //     console.log("on cree le pdf");
+  //     // Ajoutez du contenu au PDF
+  //     doc.text('Compte rendu', 10, 10);
+
+  //     // Ajoutez le reste du contenu ici
+
+  //     // Sauvegardez le fichier PDF
+  //     doc.save('compte_rendu.pdf');
+  //   });
+  // });
+
+    function openModal() {
+      document.getElementById("myModal").style.display = "flex";
+    }
+    function closeModal() {
+      document.getElementById("myModal").style.display = "none";
+    }
+
+
 
     function rafraichir(){
         document.getElementById('nbJoueurs').innerText = getNbJoueurs();

diff --git a/Code source/assets/style.scss b/Code source/assets/style.scss
@@ -136,4 +136,72 @@ td.joueur-name{
     align-content: center;
     justify-content: space-around;
     align-items: flex-start;
+}
+
+.modal-background {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.3);
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+    transition: all 0.2s ease-in-out;
+}
+
+/* Styles pour la fenêtre */
+.modal {
+    background: #fff;
+    padding: 20px;
+    border-radius: 5px;
+    text-align: center;
+    z-index: 2;
+    position: relative;
+    width: 600px;
+    margin: auto;
+}
+@keyframes fadeInAndSlide {
+    from {
+        opacity: 0;
+        transform: translateY(-50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Appliquez l'animation à la fenêtre modale */
+.modal {
+    animation: fadeInAndSlide 0.2s ease-in-out;
+}
+
+button#genererPDF{
+    background-color: #8ab4af;
+    border: 0;
+    border-radius: 5px;
+    padding: 10px;
+    color: white;
+    font-size: 20px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+
+}
+// hover
+button#genererPDF:hover{
+    background-color: #597f7b;
+}
+
+
+/* Styles pour le bouton de fermeture de la fenêtre modale */
+.close-button {
+    cursor: pointer;
+    color: #555;
+    font-size: 20px;
+    position: absolute;
+    top: 10px;
+    right: 15px;
 }