From de54555d7704fe06983088bef372c285a09d7fed Mon Sep 17 00:00:00 2001
From: mberard <mathieu@smartfire.pro>
Date: Mon, 1 Nov 2021 13:48:35 +0100
Subject: [PATCH] add-attachment-in-form

---
 avionpoeme.php        |  52 +++++++---------
 cron.php              |   1 -
 index.php             |   7 +++
 src/app.css           |   4 ++
 src/formValidation.js |   6 ++
 src/newPlane.js       | 136 +++++++++++++++++++++---------------------
 src/translation.js    |   1 -
 7 files changed, 109 insertions(+), 98 deletions(-)

diff --git a/avionpoeme.php b/avionpoeme.php
index 1308ab8..880d693 100644
--- a/avionpoeme.php
+++ b/avionpoeme.php
@@ -1,37 +1,31 @@
 <?php
-	require_once 'session_init.php';
-	require_once 'config.inc.php';
-	require_once 'db.class.php';
-	require_once 'log.php';
-	require_once 'fonctions.inc.php';
+require_once 'session_init.php';
+require_once 'config.inc.php';
+require_once 'db.class.php';
+require_once 'log.php';
+require_once 'fonctions.inc.php';
 
-	$table=array("message", "expeMail", "expeKnown", "expeLang", "destLang", "startLat", "startLon", "startName", "startTime", "startTZ", "destMail", "destLat", "destLon", "destName", "public", "color", "deliveryTime", "deliveryTZ", "deliveryTimeServer", "deliveryMethod");
+$table = array("message", "expeMail", "expeKnown", "expeLang", "destLang", "startLat", "startLon", "startName", "startTime", "startTZ", "destMail", "destLat", "destLon", "destName", "public", "color", "deliveryTime", "deliveryTZ", "deliveryTimeServer", "deliveryMethod");
 
-	$db = new db();
-	//$db->open();
+$db = new db();
+//$db->open();
 
-	foreach ($table as $var)
-	{
-		if ( getpost( $var ) != null )
-		{
-			$r = getpost( $var );
-			/*if ( $r == "true")
+foreach ($table as $var) {
+	if (getpost($var) != null) {
+		$r = getpost($var);
+		/*if ( $r == "true")
 			{
 				$r = 1;
 			}elseif( $r ="false")*/
-			$db->$var = trim($r, ' \"');
-		}else
-		{
-			$erreur[] = $var;
-		}
+		$db->$var = trim($r, ' \"');
+	} else {
+		$erreur[] = $var;
 	}
-	if (!empty ($erreur))
-	{
-		echo json_encode($erreur);
-		log_error("erreur lors de l'acquisition des données:" . EOLH . print_r($erreur, true));
-	}else
-	{
-		$db->newPlane();
-	}
-	$db->close();
-?>
+}
+if (!empty($erreur)) {
+	echo json_encode($erreur);
+	log_error("erreur lors de l'acquisition des données:" . EOLH . print_r($erreur, true));
+} else {
+	$db->newPlane();
+}
+$db->close();
diff --git a/cron.php b/cron.php
index 16c1cef..893f095 100644
--- a/cron.php
+++ b/cron.php
@@ -197,4 +197,3 @@
 		}
 	}
 	$db->close();
-?>
diff --git a/index.php b/index.php
index f3063b9..7f0bb1f 100644
--- a/index.php
+++ b/index.php
@@ -54,6 +54,13 @@
 									<br>
 									<div class="form-control rounded-0" id="messageTextArea"></div>
 								</div>
+								<div class="form-group">
+									<label class="bold">Ajouter une piève jointe</label>
+									<div class="custom-file">
+										<input type="file" class="custom-file-input" id="attachmentPlane" aria-describedby="inputGroupFileAddon01">
+										<label class="custom-file-label" for="attachmentPlane"></label>
+									</div>
+								</div>
 								<div class="form-group">
 									<label class="bold" for="selectTime" id="flightTime">Temps de vol</label>
 									<select class="form-control" id="selectTime">
diff --git a/src/app.css b/src/app.css
index 156cf1f..1154f76 100644
--- a/src/app.css
+++ b/src/app.css
@@ -336,3 +336,7 @@ a#navbarDropdownLang.nav-link.dropdown-toggle::after {
     text-align: center;
   }
 }
+
+.custom-file-label::after {
+  content: "Parcourir";
+}
diff --git a/src/formValidation.js b/src/formValidation.js
index ab2ea76..177811f 100644
--- a/src/formValidation.js
+++ b/src/formValidation.js
@@ -18,6 +18,12 @@ $("#destMail").change(function() {
 	checkFormValid()
 })
 
+document.querySelector('.custom-file-input').addEventListener('change',function(e){
+	var fileName = document.getElementById("attachmentPlane").files[0].name;
+	var nextSibling = e.target.nextElementSibling
+	nextSibling.innerText = fileName
+})
+
 function checkFormValid(){
 	if(validExpeMail && validExpeLoc && validDestMail && validDestLoc){
 		$('#sendNewPlane').prop("disabled", false)
diff --git a/src/newPlane.js b/src/newPlane.js
index 25df076..ab9e36b 100644
--- a/src/newPlane.js
+++ b/src/newPlane.js
@@ -108,8 +108,30 @@ $("#sendNewPlane").on('click',function(){
 			var message = quill.root.innerHTML
 			
 			var randomColor = getRandomColor()
-			
-			console.log(message)
+
+			var formData = new FormData()
+			var attachment = $("#attachmentPlane").prop('files')[0];
+			formData.append('file', attachment);
+			formData.append('message', encodeURIComponent(message));
+			formData.append('expeMail', $("#expeMail").val());
+			formData.append('expeKnown', expeKnown);
+			formData.append('expeLang', lang);
+			formData.append('destLang', $("#selectDestLang").val());
+			formData.append('startLat', expeLoc.center[1]);
+			formData.append('startLon', expeLoc.center[0]);
+			formData.append('startName', expeLoc.name);
+			formData.append('startTime', sentDate);
+			formData.append('startTZ', expeTimezone);
+			formData.append('destMail', $("#destMail").val());
+			formData.append('destLat', destLoc.center[1]);
+			formData.append('destLon', destLoc.center[0]);
+			formData.append('destName', destLoc.name);
+			formData.append('public', publicMessage, );
+			formData.append('color', randomColor);
+			formData.append('deliveryTime', deliveryDate);
+			formData.append('deliveryTZ', destTimezone);
+			formData.append('deliveryTimeServer', deliverySecondsServer);
+			formData.append('deliveryMethod', $("#selectTime").val());
 			
 			var data = {
 				'message':encodeURIComponent(message),
@@ -131,76 +153,56 @@ $("#sendNewPlane").on('click',function(){
 				'deliveryTime':deliveryDate,
 				'deliveryTZ':destTimezone,
 				'deliveryTimeServer':deliverySecondsServer,
-				'deliveryMethod':$("#selectTime").val()
+				'deliveryMethod':$("#selectTime").val(),
 			}
-			
-			
-			var query = 'avionpoeme.php?'+
-						'message='+data.message+'&'+
-						'expeMail='+data.expeMail+'&'+
-						'expeKnown='+data.expeKnown+'&'+
-						'expeLang='+data.expeLang+'&'+
-						'destLang='+data.destLang+'&'+
-						'startLat='+data.startLat+'&'+
-						'startLon='+data.startLon+'&'+
-						'startName='+data.startName+'&'+
-						'startTime='+data.startTime+'&'+
-						'startTZ='+data.startTZ+'&'+
-						'destMail='+data.destMail+'&'+
-						'destLat='+data.destLat+'&'+
-						'destLon='+data.destLon+'&'+
-						'destName='+data.destName+'&'+
-						'public='+data.public+'&'+
-						'color='+data.color+'&'+
-						'deliveryTime='+data.deliveryTime+'&'+
-						'deliveryTZ='+data.deliveryTZ+'&'+
-						'deliveryTimeServer='+data.deliveryTimeServer+'&'+
-						'deliveryMethod='+data.deliveryMethod+'';
 
-			$.post(query, function(result) {
-				result = result.replace(/'/g, '"');
-				console.log(result)
-				result = $.parseJSON(result)
-				var planeId = Number(result.uid);
-				//selecting proper color for back
-				$("#back").attr("src","src/img/back-"+data.color+".jpg");
-				
-				// creating image for plane, need to link it to the inputs tog et entered values.
-				var message = quill.root.innerHTML
-				
-				var canvas1 = document.getElementById("blankCanvas1"),
-				html = quill.root.innerHTML;
-				
-				rasterizeHTML.drawHTML(html, canvas1,{zoom:0.7}).then(function success(renderResult) {
+			$.ajax({
+				url: 'avionpoeme.php',
+				data: formData,
+				processData: false,
+				contentType: false,
+				cache : false,
+				type: 'POST',
+				success: function(result){
+					result = result.replace(/'/g, '"');
+					result = $.parseJSON(result)
+					var planeId = Number(result.uid);
+					//selecting proper color for back
+					$("#back").attr("src","src/img/back-"+randomColor+".jpg");
 					
-					var canvas2 = document.getElementById("blankCanvas2");
-					var ctx = canvas2.getContext("2d");
-					ctx.fillStyle = "#"+data.color;
-					ctx.fillRect(0,0,400,400);
-					ctx.drawImage(canvas1, 0, 0,400,400)
-					ctx.fillStyle = "rgb(0,0,0)";
-					ctx.font = "9px Courier";
-					$("#front").attr('src',document.getElementById("blankCanvas2").toDataURL())
-					//display and animate plane
-					$("#canvas3d").css('display','block')
-					animePlane()
+					// creating image for plane, need to link it to the inputs tog et entered values.
+					var message = quill.root.innerHTML
 					
+					var canvas1 = document.getElementById("blankCanvas1"),
+					html = quill.root.innerHTML;
 					
-					//moving plane at the end
-					setInterval(function(){
-						$("#canvas3d").css('transition','transform 2500ms ease-in-out')
-						$("#canvas3d").css('transform','translate(50vw, -150vh)')
-					},4400);
-					//reloading page (to change)
-					setInterval(function(){
-						window.location.href ='https://avion-poe.me?avion='+planeId+'';
-					},5500);
-				})
-			})
-			
-			
-		
-		
+					rasterizeHTML.drawHTML(html, canvas1,{zoom:0.7}).then(function success(renderResult) {
+						
+						var canvas2 = document.getElementById("blankCanvas2");
+						var ctx = canvas2.getContext("2d");
+						ctx.fillStyle = "#"+data.color;
+						ctx.fillRect(0,0,400,400);
+						ctx.drawImage(canvas1, 0, 0,400,400)
+						ctx.fillStyle = "rgb(0,0,0)";
+						ctx.font = "9px Courier";
+						$("#front").attr('src',document.getElementById("blankCanvas2").toDataURL())
+						//display and animate plane
+						$("#canvas3d").css('display','block')
+						animePlane()
+						
+						
+						//moving plane at the end
+						setInterval(function(){
+							$("#canvas3d").css('transition','transform 2500ms ease-in-out')
+							$("#canvas3d").css('transform','translate(50vw, -150vh)')
+						},4400);
+						//reloading page (to change)
+						setInterval(function(){
+							window.location.href ='https://www.avion-poe.me/?avion='+planeId+'';
+						},5500);
+					})
+				}
+			});
 
 		})
 	});
diff --git a/src/translation.js b/src/translation.js
index 10f489e..11449ad 100644
--- a/src/translation.js
+++ b/src/translation.js
@@ -46,7 +46,6 @@ var dictionnary = []
 
 function translateUI(l){
 	$.getJSON("lang/"+l+"", function(s){
-		console.log(s)
 		dictionnary = s
 		//if arabic : display left to right (ltr) + troubleshooting a lot of individual elements
 		if (lang == "ar"){