correction bug

cron.php

@@ -1,5 +1,6 @@
 <?php
 	//chdir('/var/www/html/avion-poeme/');
+
 	require_once 'session_init.php';
 	require_once 'config.inc.php';
 	require_once 'db.class.php';
@@ -9,11 +10,10 @@
 	$db = new db();
 	//test();
 	 $_SERVER["PHP_AUTH_USER"] = "cron";
-	//peripetieDatee();
+	//peripetieDatee();				// désactivée pour l'instant
-	print "envoi des courriers en attente" . EOLH;
 	envoiCourrielEnattente();
 	print "envoi des péripéties" . EOLH;
-	peripeties();
+	//peripeties();
 	print "Envoi des arrivées" . EOLH;
 	arrivee();
 	anonymisation();
@@ -42,9 +42,9 @@
 				$mailText = $dicoExpe[$p['indexText']] .EOL .EOL ;
 				print $objetMail . EOLH;
 				print $mailText . EOLH;
-				envoiMail( $result['destMail'], $objetMail, $mailText, false);
+				envoiMail($result['expeMail'], $result['destMail'], $objetMail, $mailText, false);
 				sleep(1);
-				envoiMail( $result['expeMail'], $objetMail, $mailText, true);
+				envoiMail("contact@avion-poe.me",  $result['expeMail'], $objetMail, $mailText, true);
 				sleep(1);
 			}
 		}
@@ -62,6 +62,7 @@
 		$dbPeripetie->query($query);
 		$peripeties = $dbPeripetie->result->fetch_all(MYSQLI_ASSOC);
 		$dbPeripetie->close();
+		//print_r($peripeties);
 		foreach ( $peripeties as $peripetie)
 		{
 			print "péripétie " . $peripetie["idAP"] . " - avion poème n° " . $peripetie['idAvion'] .EOLH;
@@ -77,11 +78,15 @@
 				$dicoExpe = getLang( $db->expeLang );
 				$dicoDest = getLang( $db->destLang );
 				// TODO calcul de la nouvelle date d'arrivée
-				$dateExpe = new DateTime("@$db->startTime");
+				$startTime = date("c", $db->startTime);
-				$dateDest = new DateTime("@$db->deliveryTime");
+				$deliveryTime = date("c", $db->deliveryTime);
+				$dateExpe = new DateTime($startTime);
+				print_r($dateExpe);
+				$dateDest = new DateTime($deliveryTime);
+				print_r($dateDest);
 				$interval = $dateExpe->diff($dateDest);
 				$numericInterval = (($interval->days*24 + $interval->h)*60 + $interval->i)*60 + $interval->s;
-				$addDate = $numericInterval * 15/100;
+				$addDate = $numericInterval * 15/100;		//TODO calculer d'après les données de la péripétie(voir table péripétie de la base de données)
 				$db->deliveryTime += $addDate;
 				$db->deliveryTimeServer += $addDate;
 				$query = "UPDATE avionpoeme SET deliveryTime=FROM_UNIXTIME(" . $db->deliveryTime . "), deliveryTimeServer=FROM_UNIXTIME(" . $db->deliveryTimeServer . ") WHERE idAvion='" . $peripetie['idAvion'] . "'" ;
@@ -96,24 +101,23 @@
 				//$html = $result['html'];
 				sleep(1);
 				print "envoi courriel à l'expéditeur : " . $db->expeMail . EOLH . $mailText .EOLH;
-				$r = envoiMail( $db->expeMail, $objetMail, $mailText);
+				$r = envoiMail("contact@avion-poe.me", $db->expeMail, $objetMail, $mailText);
 				$db->datePeripetie = formatteDate($db->destLang, $db->deliveryTime, $db->deliveryTZ);
 				$result = replaceVariables($db, $dicoDest["Objet_" . $peripetie['indexText']], $dicoDest);
 				$objetMail = $result["text"];
 				$result = replaceVariables($db, $dicoDest[$peripetie['indexText']], $dicoDest);
 				$mailText = $result["text"];
 				print "envoi courriel au destinataire : " . $db->destMail . EOLH  . $mailText .EOLH;
-				$s = envoiMail( $db->destMail, $objetMail, $mailText);
+				$s = envoiMail($db->expeMail, $db->destMail, $objetMail, $mailText);
 				sleep(1);
 				//print "r=" . $r ." => s=" .$s .EOLH;
-
 				if ($r AND $s)
 				{
 					$query = "UPDATE avionPeripetie SET mailSent=true WHERE idAP='" . $peripetie['idAP'] ."'";
 					$db->query($query);
 				}else
 				{
-					print "table avion péripétie non mise à jour" .EOL;
+					print "table avion péripétie non mise à jour" . EOL;
 					print "UPDATE avionPeripetie SET mailSent=true WHERE idAP='" . $peripetie['idAP'] ."'" .EOLH;
 				}
 
@@ -135,7 +139,7 @@
 		//var_dump($avionArrive);
 		foreach ($avionArrive as $avion)
 		{
-			print "avion poème n° " . $avion['idAvion'] . "a atterri" . EOLH;
+			print "avion poème n° " . $avion['idAvion'] . " a atterri" . EOLH;
 			$dicoExpe = getLang( $avion['expeLang'] );
 			$dicoDest = getLang( $avion['destLang'] );
 
@@ -146,7 +150,7 @@
 			$result = replaceVariables((object)$avion, $dicoExpe[$index], $dicoExpe);
 			$mailText= $result["text"];
 			print "envoi courriel à l'expéditeur : " . $avion['expeMail'] . EOLH . $mailText .EOLH;
-			$r = envoiMail( $avion['expeMail'], $objetMail["text"], $mailText);
+			$r = envoiMail("contact@avion-poe.me", $avion['expeMail'], $objetMail["text"], $mailText);
 
 			//envoi notification arrivée destinataire
 			$index = "Notification_Arrivee_Destinataire";
@@ -159,14 +163,14 @@
 				$mailText = "<html><head></head>\n<body>" . $mailText . "</body></html>";
 			}
 			print "envoi courriel au destinataire : " . $avion['destMail'] . EOLH . $mailText .EOLH;
-			sleep(1);
+			sleep(3);
-			$s = envoiMail( $avion['destMail'], $objetMail["text"], $mailText, $html);
+			$s = envoiMail($avion['expeMail'], $avion['destMail'], $objetMail["text"], $mailText, $html);
 			if ($r AND $s)
 			{
 				$query = "UPDATE avionpoeme SET atteri=true WHERE idAvion='" . $avion['idAvion'] ."'";
 				$db->query($query);
 			}
-			sleep(1);
+			sleep(3);
 		}
 	}
 
@@ -178,13 +182,14 @@
 		$courriels = $db->result->fetch_all(MYSQLI_ASSOC);
 		foreach( $courriels as $courriel)
 		{
-			$r = envoiMail( $courriel['destinataire'], $courriel['objet'], $courriel['message'], $courriel['html']);
+			//TODO changer l'expéditeur, doit être l'expéditeur de l'avion-poême.
+			$r = envoiMail("contact@avion-poe.me", $courriel['destinataire'], $courriel['objet'], $courriel['message'], $courriel['html']);
 			if ($r)
 			{
 				$query = "DELETE FROM courriels WHERE id='" . $courriel['id'] . "'";
 				$db->query($query);
 			}
-			sleep(1);
+			sleep(3);
 		}
 	}
 
@@ -213,3 +218,4 @@
 		}
 	}
 	$db->close();
+?>

include/config.inc.php

@@ -20,8 +20,18 @@ $site 			= "Avion Poème";
 $dossier 		= "/www";
 $basedir 		= dirname($_SERVER['DOCUMENT_ROOT']) . $dossier;
 
-$base_url 		= "https://avion-poe.me";
+$testMode		= true;
-$base_path 		=  "/flex/storage/avion-poe.me/site/www/";
+
+if ($testMode)
+{
+	$base_url 		= "https://avion-poe.me";
+	$base_path 		=  "/flex/storage/avion-poe.me/site/www/";
+}else
+{
+	$base_url 		= "https://dev.avion-poe.me";
+	$base_path 		=  "/flex/storage/avion-poe.me/site/dev/";
+}
+
 $url_admin		= $base_url . "/gestion";
 $accueil		= $base_url . "/index.html";
 if (empty($_SERVER["PHP_AUTH_USER"])) {

include/db.class.php

@@ -1,14 +1,12 @@
 <?php
-if ( !isset($site) )
+if (!isset($site)) {
-{
+	require_once("config.inc.php");
-    require_once( "config.inc.php" );
+	header('Location:  ' . $accueil);
-	header( 'Location:  ' . $accueil );
 }
 
 require_once "config.inc.php";
 require_once "log.php";
 require_once "fonctions.inc.php";
-require_once "envoi_courriel.inc.php";
 
 $table_prefix = "";
 class db
@@ -59,12 +57,10 @@ class db
 
 	function open()
 	{
-		if ( !$this->connect )
+		if (!$this->connect) {
-		{
+			$this->connect = new mysqli($this->server, $this->user, $this->passwd, $this->database);
-			$this->connect = new mysqli( $this->server, $this->user, $this->passwd, $this->database );
+			if ($this->connect->connect_errno) {
-			if ( $this->connect->connect_errno )
+				log_error("Échec de la connexion : => " . $this->connect->connect_error . "<br />" . __file__ . ' ligne ' . __line__, false, false);
-			{
-				log_error( "Échec de la connexion : => " . $this->connect->connect_error . "<br />" . __file__ . ' ligne ' . __line__, false,false);
 				return false;
 			}
 		}
@@ -78,30 +74,29 @@ class db
 		$this->connect = 0;
 	}
 
-    function protect( $string )
+	function protect($string)
 	{
-		return $this->connect->real_escape_string( $string );
+		return $this->connect->real_escape_string($string);
 	}
 
-	function query( $string )
+	function query($string)
 	{
 
 		//log_write( $string );
-		if ( empty( $this->connect ) )		$this->open();
+		if (empty($this->connect))		$this->open();
 
-		$this->result = $this->connect->query( $string ) ;
+		$this->result = $this->connect->query($string);
 
-		if ( $this->connect->errno > 0 )  log_error( "Échec de la commande query => " . $this->connect->error . "<br />" . __file__ . ' ligne ' . __line__ . "\n" . $string, true, false);
+		if ($this->connect->errno > 0)  log_error("Échec de la commande query => " . $this->connect->error . "<br />" . __file__ . ' ligne ' . __line__ . "\n" . $string, true, false);
 		//print_r( $this );
 	}
 
 	function newPlane()				//return 0 on error
 	{
 		global $base_url;
-		if (round($this->startLat,3,PHP_ROUND_HALF_DOWN)==round($this->destLat,3,PHP_ROUND_HALF_DOWN) && round($this->startLon,3,PHP_ROUND_HALF_DOWN)==round($this->destLon,3,PHP_ROUND_HALF_DOWN))
+		if (round($this->startLat, 3, PHP_ROUND_HALF_DOWN) == round($this->destLat, 3, PHP_ROUND_HALF_DOWN) && round($this->startLon, 3, PHP_ROUND_HALF_DOWN) == round($this->destLon, 3, PHP_ROUND_HALF_DOWN)) {
-		{
+			$this->destLon += 0.001;
-			$this->destLon+=0.001;
+			$this->destLat += 0.001;
-			$this->destLat+=0.001;
 		}
 		$query = "INSERT INTO avionpoeme VALUES ('0','";
 		$query .= $this->protect($this->message) . "', '";
@@ -128,18 +123,17 @@ class db
 		$this->query($query);
 		$this->uid = $this->connect->insert_id;
 		echo "{'uid':'" . $this->uid . "'}";
-		$this->startTimeRFC822 = formatteDate( $this->expeLang, $this->startTime, $this->startTZ);
+		$this->startTimeRFC822 = formatteDate($this->expeLang, $this->startTime, $this->startTZ);
-		$this->deliveryTimeRFC822 = formatteDate( $this->destLang, $this->deliveryTime, $this->deliveryTZ );
+		$this->deliveryTimeRFC822 = formatteDate($this->destLang, $this->deliveryTime, $this->deliveryTZ);
 		$this->urlAvion = $base_url . "/?avionpoeme=" . $this->uid;
 		$this->newPeripetie();
 		courrielEnvoi($this);
-
     }
 
 	function getPlane($uid)
 	{
 		global $base_url;
-		$query = "SELECT idAvion, message, expeMail, expeKnown, expeLang, destLang, startLat, startLon, startName, UNIX_TIMESTAMP(startTime) as startTime, startTZ, destMail, destLat, destLon, destName, color, UNIX_TIMESTAMP(deliveryTime) as deliveryTime, deliveryTZ, UNIX_TIMESTAMP(deliveryTimeServer) as deliveryTimeServer, deliveryMethod, public FROM avionpoeme WHERE idAvion='" . $uid  ."'";
+		$query = "SELECT idAvion, message, expeMail, expeKnown, expeLang, destLang, startLat, startLon, startName, UNIX_TIMESTAMP(startTime) as startTime, startTZ, destMail, destLat, destLon, destName, color, UNIX_TIMESTAMP(deliveryTime) as deliveryTime, deliveryTZ, UNIX_TIMESTAMP(deliveryTimeServer) as deliveryTimeServer, deliveryMethod, public FROM avionpoeme WHERE idAvion='" . $uid  . "'";
 		$this->query($query);
 		$plane = $this->result->fetch_array(MYSQLI_ASSOC);
 		$this->message = $plane["message"];
@@ -152,7 +146,7 @@ class db
 		$this->startName = $plane["startName"];
 		$this->startTime = $plane["startTime"];
 		$this->startTZ = $plane["startTZ"];
-		$this->startTimeRFC822 = formatteDate( $this->expeLang, $this->startTime, $this->startTZ);
+		$this->startTimeRFC822 = formatteDate($this->expeLang, $this->startTime, $this->startTZ);
 		$this->destMail = $plane["destMail"];
 		$this->destLat = $plane["destLat"];
 		$this->destLon = $plane["destLon"];
@@ -160,7 +154,7 @@ class db
 		$this->color = $plane["color"];
 		$this->deliveryTime = $plane["deliveryTime"];
 		$this->deliveryTZ = $plane["deliveryTZ"];
-		$this->deliveryTimeRFC822 = formatteDate( $this->destLang, $this->deliveryTime, $this->deliveryTZ );
+		$this->deliveryTimeRFC822 = formatteDate($this->destLang, $this->deliveryTime, $this->deliveryTZ);
 		$this->deliveryTimeServer = $plane["deliveryTimeServer"];
 		$this->deliveryMethod = $plane["deliveryMethod"];
 		$this->public = $plane["public"];
@@ -170,7 +164,7 @@ class db
 
 	function getCurrentPlanes()
 	{
-		$query = "SELECT idAvion as uid, UNIX_TIMESTAMP(deliveryTime) as deliveryTime, deliveryTZ, destLat, destLon, destName, message,  UNIX_TIMESTAMP(startTime) as startTime, startTZ, startLon, startLat, startName, color, message FROM avionpoeme WHERE deliveryTimeServer>NOW()";
+		$query = "SELECT idAvion as uid, UNIX_TIMESTAMP(deliveryTime) as deliveryTime, deliveryTZ, destLat, destLon, destName, destMail, message, expeMail, deliveryTimeServer, deliveryMethod, UNIX_TIMESTAMP(startTime) as startTime, startTZ, startLon, startLat, startName, color, message FROM avionpoeme WHERE deliveryTimeServer>NOW()";
 		$this->query($query);
 		$planes = $this->result->fetch_all(MYSQLI_ASSOC);
 		print json_encode($planes);
@@ -178,20 +172,20 @@ class db
 		return $planes;
 	}
 
-	function getAnthology($page=0)
+	function getAnthology($page = 0)
 	{
 		$query = "SELECT COUNT(*) as count FROM avionpoeme WHERE deliveryTimeServer<NOW() AND public='1'";
 		$this->query($query);
 		$result = $this->result->fetch_assoc();
-		$n_pages = floor(($result["count"] / RESULTS_BY_PAGE))+1;
+		$n_pages = floor(($result["count"] / RESULTS_BY_PAGE)) + 1;
 		if ($page <= 0) //renvoie le nombre de ligne d'anthologie
 		{
-			print '{"nAnthology":"' . $result["count"] . '","nPages":"' . $n_pages .'"}';
+			print '{"nAnthology":"' . $result["count"] . '","nPages":"' . $n_pages . '"}';
 			return $n_pages;
-		}else  //renvoie les lignes d'anthologie
+		} else  //renvoie les lignes d'anthologie
 		{
-			if ($page > $n_pages) $page=$n_pages;
+			if ($page > $n_pages) $page = $n_pages;
-			$query = "SELECT UNIX_TIMESTAMP(startTime) as startTime, startTZ, startName, message, UNIX_TIMESTAMP(deliveryTime) as deliveryTime , deliveryTZ, destName FROM avionpoeme WHERE deliveryTimeServer<NOW() AND public='1' ORDER BY deliveryTime DESC LIMIT " . ($page-1)*RESULTS_BY_PAGE . "," . RESULTS_BY_PAGE;
+			$query = "SELECT UNIX_TIMESTAMP(startTime) as startTime, startTZ, startName, message, UNIX_TIMESTAMP(deliveryTime) as deliveryTime , deliveryTZ, destName FROM avionpoeme WHERE deliveryTimeServer<NOW() AND public='1' ORDER BY deliveryTime DESC LIMIT " . ($page - 1) * RESULTS_BY_PAGE . "," . RESULTS_BY_PAGE;
 			$this->query($query);
 			$planes = $this->result->fetch_all(MYSQLI_ASSOC);
 			print json_encode($planes, JSON_FORCE_OBJECT);
@@ -202,10 +196,18 @@ class db
 	function savePeripetie()
 	{
 
-		$query = "INSERT INTO avionPeripetie VALUES ('0','";
+		$query = "INSERT INTO avionPeripetie ('idAvion', 'idPeripetie', 'date', 'expeMail'), VALUES (";
-		$query .= $this->protect($this->uid) . "','";
+		$query .= "'" . $this->protect($this->uid) . "',";
-		$query .= $this->protect($this->idPeripetie) . "', ";
+		$query .= "'" . $this->protect($this->idPeripetie) . "', ";
-		$query .= "FROM_UNIXTIME(" . $this->protect($this->datePeripetie) . "), '0')";
+		$query .= "FROM_UNIXTIME(" . $this->protect($this->datePeripetie) . "),";
+		if ($this->expeKnown)
+		{
+			$query .= "'" . $this->protect($this->expeMail) . "'";
+		}else
+		{
+			$query .= "'contact@avion-poe.me'";
+		}
+		$query .= ")";
 		log_write("savePeripetie " . $query);
 		//$query .= $this->protect($this->effetPeripetie) . "', '";
 		//$query .= $this->protect($this->expeMail) . "', '";
@@ -217,10 +219,9 @@ class db
 	{
 		$query = "SELECT *, DATEDIFF(quand,CURDATE()) as datePeripetie FROM peripeties WHERE quand IS NULL";
 		$this->query($query);
-		while ( ($result = $this->result->fetch_assoc()) )
+		while (($result = $this->result->fetch_assoc())) {
-		{
 			$this->idPeripetie =  $result["idPeripetie"];
-			if ((mt_rand(0,100) <= $result["probabilite"]))   //calcul de la probabilité de la péripétie
+			if ((mt_rand(0, 100) <= $result["probabilite"]))   //calcul de la probabilité de la péripétie
 			{
 				log_write("newPeripetie");
 				$this->datePeripetie = mt_rand($this->startTime, $this->deliveryTime);        //ajustement de l'effet

include/envoi_courriel.inc.php

@@ -2,7 +2,6 @@
 require_once 'log.php';
 require_once 'fonctions.inc.php';
 
-
 function courrielEnvoi( $db )
 {
 	$dicoExpe = getLang( $db->expeLang );
@@ -20,7 +19,7 @@ function courrielEnvoi( $db )
 	$mailText = $result['text'];
 	$html = $result['html'];
 
-	saveMail( $db, $db->expeMail, $objetMail, $mailText, $html);
+	saveMail( $db, "contact@avion-poe.me", $db->expeMail, $objetMail, $mailText, $html);
 
 	//log_write(print_r($db,true));
 
@@ -47,19 +46,21 @@ function courrielEnvoi( $db )
 	{
 		$message = "<html><head></head>\n<body>" . $message . "</body></html>";
 	}
-	saveMail( $db, $db->destMail, $objetMail, $mailText, $html);
+	saveMail( $db, $db->expeMail, $db->destMail, $objetMail, $mailText, $html);
 }
 
-function saveMail( $db, $destinataire, $objet, $text, $html=false)
+function saveMail( $db, $expediteur, $destinataire, $objet, $text, $html=false)
 {
 	$query = "INSERT INTO courriels VALUES ('0', '" . $db->protect($destinataire) . "', '" . $db->protect($objet) .  "', '" . $db->protect($text) . "', '" . (int)$html .  "')";
 	$db->query($query);
 }
 
-function envoiMail($destinataire, $sujet, $text, $html=false, $cc='', $bcc='')
+function envoiMail($expediteur, $destinataire, $sujet, $text, $html=false, $cc='', $bcc='')
 {
 	require_once 'include/swiftmailer/autoload.php';
 	//require_once 'include/swiftmailer/swiftmailer/lib/swift_init.php';
+	try
+	{
 		$transport = (new Swift_SmtpTransport('smtpauth.online.net', 465, 'ssl'))
 			->setUsername('contact@avion-poe.me')
 			->setPassword('AvionPoème*27juillet');
@@ -86,7 +87,8 @@ function envoiMail($destinataire, $sujet, $text, $html=false, $cc='', $bcc='')
 		$message->setBody($text);
 		//add date header
 		$headers = $message->getHeaders();
-	$headers->addDateHeader('Your-Header', new DateTimeImmutable('3 days ago'));
+		//$headers->addDateHeader('Date', new DateTimeImmutable('3 days ago'));
+		$headers->addPathHeader('Return-Path', $expediteur);
 		if (!$mailer->send($message, $failures))
 		{
 			echo "Failures:";
@@ -94,6 +96,11 @@ function envoiMail($destinataire, $sujet, $text, $html=false, $cc='', $bcc='')
 			log_write(__FILE__ . EOL . __LINE__ .  EOL . "Le courriel n'est pas parti:" . $destinataire . EOL . $sujet . EOL . print_r($failure, true) . EOL . wordwrap($text, 1000 , "\r\n"), ERROR);
 			return false;
 		}
+	}
+	catch (\Swift_TransportException $ex)
+	{
+		return false;
+	}
 	return true;
 }
 ?>

index.php

@@ -133,13 +133,14 @@
 			</div>
 		</div>
 	</div>
+	<div id="closePlane"></div>
+	<div id="downloadPlaneMessage" class="btn btn-outline-primary">Télécharger l'avion-poème</div>
 	<script src="src/map.js"></script>
 	<script src="src/geocoder.js"></script>
 	<script src="src/paperPlaneAnimation.js"></script>
 	<script src="src/formValidation.js"></script>
 	<script src="src/newPlane.js"></script>
 	<script src="src/translation.js"></script>
-	<script src="src/anthology.js"></script>
 </body>
 
 </html>

parts/head.php

@@ -33,4 +33,5 @@
     <script src="dist/rasterizeHTML/rasterizeHTML.allinone.js"></script>
     <script src="dist/leaflet-locatecontrol/L.Control.Locate.min.js"></script>
     <script src='dist/leaflet-fullscreen/Leaflet.fullscreen.min.js'></script>
+    <script src='dist/html2pdf/html2pdf.bundle.min.js'></script>
 </head>

parts/header.php

@@ -21,7 +21,7 @@
             </li>
         </ul>
         <form class="nav-button form-inline mt-2 mt-md-0">
-            <input id="buttonNewPlane" type="button" class="btn btn-warning my-2 my-sm-0" data-toggle="modal" data-target="#newPlaneModal" value='Envoyer un avion'>
+            <input id="buttonNewPlane" type="button" class="btn btn-warning my-2 my-sm-0" data-toggle="modal" data-target="#newPlaneModal" value='Lancer un avion-poème 0/100'>
             </input>&nbsp;
             <i id="planeLimitTooltip" class="fas fa-question-circle" data-toggle="tooltip" data-placement="auto" title="coucou"></i>
         </form>

src/anthology.js

@@ -1,79 +1,136 @@
-function flightTime(a,b){
+function flightTime(a, b) {
-	var days = Math.round((b-a)/86400 * 100) / 100
+  var days = Math.round(((b - a) / 86400) * 100) / 100;
-	var months = Math.round(days/30)
+  var months = Math.round(days / 30);
-	var years = Math.round(months/12)
+  var years = Math.round(months / 12);
-	if (days < 30){
+  if (days < 30) {
-		return ""+days+" "+dictionnary.jours
+    return "" + days + " " + dictionnary.jours;
+  } else if (days >= 30 && days < 365) {
+    if (months > 1) {
+      return "" + months + " " + dictionnary.mois_pluriel;
+    } else {
+      return "" + months + " " + dictionnary.mois;
     }
-	else if (days >= 30 && days < 365){
+  } else if (days >= 365) {
-		if(months>1){
+    if (years > 1) {
-			return ""+months+" "+dictionnary.mois_pluriel
+      return "" + years + " " + dictionnary.ans;
-		}
+    } else {
-		else{
+      return "" + years + " " + dictionnary.an;
-			return ""+months+" "+dictionnary.mois
-		}
-	}
-	else if (days >= 365){
-		if(years>1){
-			return ""+years+" "+dictionnary.ans
-		}
-		else{
-			return ""+years+" "+dictionnary.an
     }
   }
 }
 
 //load
 var nPages;
-var nPagesLoaded = 1
+var nPagesLoaded = 1;
-$.post( "getAnthology.php", function(pages) {
+$.post("getAnthology.php", function (pages) {
-	pages = $.parseJSON(pages)
+  pages = $.parseJSON(pages);
-	nPages = Number(pages.nPages)
+  nPages = Number(pages.nPages);
-})
+});
 
-function displayAnthology(){ // clean and display first page
+function displayAnthology() {
-	$("#anthologyItems").html('')
+  // clean and display first page
-	nPagesLoaded = 1
+  $("#anthologyItems").html("");
-	$.post( "getAnthology.php?page=1", function(result) {
+  nPagesLoaded = 1;
-		results = $.parseJSON(result)
+  $.post("getAnthology.php?page=1", function (result) {
+    results = $.parseJSON(result);
     var momentLocale = lang;
-		if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese
+    if (momentLocale == "zh") {
-		moment.locale(momentLocale)
+      momentLocale = "zh-cn";
-		for (var i in results){
+    } //troubleshot for chinese
-			addAnthologyLine(results[i])
+    moment.locale(momentLocale);
+    for (var i in results) {
+      addAnthologyLine(results[i]);
     }
-	})
+  });
 }
 
-$( "#anthology" ).scroll(function() {
+$("#anthology").scroll(function () {
-   if($("#anthology").scrollTop() + 700 > $("#anthologyItems").height()){
+  if ($("#anthology").scrollTop() + 700 > $("#anthologyItems").height()) {
-	   if (nPagesLoaded < nPages){
+    if (nPagesLoaded < nPages) {
-		   nPagesLoaded++
+      nPagesLoaded++;
-		    console.log('Loading anthology page '+nPagesLoaded+'/'+nPages)
+      console.log("Loading anthology page " + nPagesLoaded + "/" + nPages);
-		   $.post( "getAnthology.php?page="+nPagesLoaded+"", function(result) {
+      $.post("getAnthology.php?page=" + nPagesLoaded + "", function (result) {
-			results = $.parseJSON(result)
+        results = $.parseJSON(result);
         var momentLocale = lang;
-			if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese
+        if (momentLocale == "zh") {
-			moment.locale(momentLocale)
+          momentLocale = "zh-cn";
-			for (var i in results){
+        } //troubleshot for chinese
-				addAnthologyLine(results[i])
+        moment.locale(momentLocale);
+        for (var i in results) {
+          addAnthologyLine(results[i]);
         }
-		})
+      });
     }
   }
 });
 
-function addAnthologyLine(results){
+function addAnthologyLine(results) {
-	if (lang == 'ar'){ // arabic : rtl + add <br>
+  if (lang == "ar") {
+    // arabic : rtl + add <br>
     $("#anthologyItems").append(
-		'<small style="float:right">'+dictionnary.origine+': <b>'+results.startName+'</b> &bull; '+dictionnary.destination+': <b>'+results.destName+'</b> &bull; '+dictionnary.date_arrivee+': <b>'+moment(Number(results.deliveryTime)*1000).format('LL')+'</b> &bull; '+dictionnary.temps_de_vol+': <b>'+flightTime(Number(results.startTime),Number(results.deliveryTime))+'</b></small><br><br>'+results.message+'<br><hr><br>'
+      '<small style="float:right">' +
-		)
+        dictionnary.origine +
-	}
+        ": <b>" +
-	else{
+        results.startName +
+        "</b> &bull; " +
+        dictionnary.destination +
+        ": <b>" +
+        results.destName +
+        "</b> &bull; " +
+        dictionnary.date_arrivee +
+        ": <b>" +
+        moment(Number(results.deliveryTime) * 1000).format("LL") +
+        "</b> &bull; " +
+        dictionnary.temps_de_vol +
+        ": <b>" +
+        flightTime(Number(results.startTime), Number(results.deliveryTime)) +
+        "</b></small><br><br>" +
+        results.message +
+        "<br><hr><br>"
+    );
+  } else {
     $("#anthologyItems").append(
-		'<small>'+dictionnary.origine+': <b>'+results.startName+'</b> &bull; '+dictionnary.destination+': <b>'+results.destName+'</b> &bull; '+dictionnary.date_arrivee+': <b>'+moment(Number(results.deliveryTime)*1000).format('LL')+'</b> &bull; '+dictionnary.temps_de_vol+': <b>'+flightTime(Number(results.startTime),Number(results.deliveryTime))+'</b></small><br><br>'+results.message+'<br><hr><br>'
+      "<small>" +
-		)
+        dictionnary.origine +
+        ": <b>" +
+        results.startName +
+        "</b> &bull; " +
+        dictionnary.destination +
+        ": <b>" +
+        results.destName +
+        "</b> &bull; " +
+        dictionnary.date_arrivee +
+        ": <b>" +
+        moment(Number(results.deliveryTime) * 1000).format("LL") +
+        "</b> &bull; " +
+        dictionnary.temps_de_vol +
+        ": <b>" +
+        flightTime(Number(results.startTime), Number(results.deliveryTime)) +
+        "</b></small><br><br>" +
+        results.message +
+        "<br><hr><br>"
+    );
   }
 }
 
+$.post("avionJournalier.php", function (result) {
+  result = result.replace(/'/g, '"');
+  result = $.parseJSON(result);
+  nbPlane = Number(result.nAvion);
+  console.log(result);
+  $("#buttonNewPlane").val(
+    "Lancer un avion-poème " + Number(result.nAvion) + "/100"
+  );
+  $("#buttonNewPlane").on("click", () => {
+    window.location.replace("/");
+  });
+});
 
+$(document).ready(function () {
+  $.getJSON("lang/" + lang + "", function (s) {
+    displayAnthology();
+    $("#anthologyTitle").html(s.anthologie);
+    $("#anthologyDisclaimer").html(s.suppr_message_public);
+    $("#closeAnthologyAbout").html(s.retour_carte);
+  });
+});

src/app.css

@@ -337,6 +337,56 @@ a#navbarDropdownLang.nav-link.dropdown-toggle::after {
   }
 }
 
+.custom-file-label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+  padding-right: 9em;
+  white-space: nowrap;
+}
 .custom-file-label::after {
   content: attr(data-after);
 }
+
+#closePlane {
+  position: fixed;
+  top: 70px;
+  right: 40px;
+  visibility: hidden;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 10000;
+}
+
+#closePlane:before {
+  content: "\f00d";
+  font-family: "Font Awesome 5 Pro";
+  color: white;
+  font-size: 3em;
+}
+
+#downloadPlaneMessage {
+  position: fixed;
+  z-index: 10000;
+  bottom: 5%;
+  left: 50%;
+  transform: translateX(-50%);
+  color: var(--primary);
+  background-color: white;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease-in;
+}
+
+@media (max-width: 480px) {
+  #downloadPlaneMessage {
+    bottom: 15%;
+  }
+}
+
+#downloadPlaneMessage:before {
+  content: "\f019";
+  font-family: "Font Awesome 5 Pro";
+  color: var(--primary);
+  margin-right: 10px;
+}

src/map.js

@@ -1,146 +1,168 @@
 var loader = new PIXI.Loader();
-var colors = ['66FF00','FF5555','FFE419','2A7FFF','BC5FD3','C8AB37','ECECEC','FF6600'];
+var colors = [
-for (var i in colors){
+  "66FF00",
-	loader.add('marker'+colors[i]+'', 'src/img/plane-'+colors[i]+'.png');
+  "FF5555",
+  "FFE419",
+  "2A7FFF",
+  "BC5FD3",
+  "C8AB37",
+  "ECECEC",
+  "FF6600",
+];
+for (var i in colors) {
+  loader.add("marker" + colors[i] + "", "src/img/plane-" + colors[i] + ".png");
 }
 
 //global variable
-var nbPlane = 0
+var nbPlane = 0;
-
-loader.add('shadow', 'src/img/shadow.png');
-loader.load(function(loader, resources) {
 
+loader.add("shadow", "src/img/shadow.png");
+loader.load(function (loader, resources) {
   var pixiContainer = new PIXI.Container();
 
-	var map = L.map('map',{ 
+  var map = L.map("map", {
     zoomControl: false,
-		minZoom:2,
+    minZoom: 2,
     maxZoom: 16,
     maxBounds: [
       [-Infinity, -360],
-			[Infinity, 360]
+      [Infinity, 360],
     ],
     //worldCopyJump: true,
-		attributionControl: false
+    attributionControl: false,
-	})
+  });
 
   //zoom controls
-	L.control.zoom({position: 'bottomright'}).addTo(map);
+  L.control.zoom({ position: "bottomright" }).addTo(map);
   //Locate user
-	L.control.locate({position: 'bottomright'}).addTo(map);
+  L.control.locate({ position: "bottomright" }).addTo(map);
   //fullscreen
-	map.addControl(new L.Control.Fullscreen({position: 'bottomright'}));
+  map.addControl(new L.Control.Fullscreen({ position: "bottomright" }));
 
   // Licence Icon
   L.Control.Watermark = L.Control.extend({
-		onAdd: function(map) {
+    onAdd: function (map) {
-			var img = L.DomUtil.create('img');
+      var img = L.DomUtil.create("img");
 
-			img.src = 'src/img/licence.svg';
+      img.src = "src/img/licence.svg";
-			img.style.width = '100px';
+      img.style.width = "100px";
 
       return img;
-		}
+    },
   });
-	L.control.watermark = function(opts) {
+  L.control.watermark = function (opts) {
     return new L.Control.Watermark(opts);
-	}
+  };
-	L.control.watermark({ position: 'bottomleft' }).addTo(map);
+  L.control.watermark({ position: "bottomleft" }).addTo(map);
   //scale
   L.control.scale().addTo(map);
 
   //disabling send plane button if alreada 100 planes sent the current day
 
-	
+  $.post("avionJournalier.php", function (result) {
-	$.post("avionJournalier.php", function(result) {
     result = result.replace(/'/g, '"');
-		result = $.parseJSON(result)
+    result = $.parseJSON(result);
-		nbPlane = Number(result.nAvion)
+    nbPlane = Number(result.nAvion);
-		$("#buttonNewPlane").val("Lancer un avion-poème "+Number(result.nAvion)+"/100")
+    $("#buttonNewPlane").val(
-		if (nbPlane > 99){
+      "Lancer un avion-poème " + Number(result.nAvion) + "/100"
-			$("#buttonNewPlane").prop("disabled",true);
+    );
+    if (nbPlane > 99) {
+      $("#buttonNewPlane").prop("disabled", true);
+    } else {
     }
-		else{
+    translateUI(lang);
-			
+  });
-		}
-		translateUI(lang)
-	})
 
   //background
-	L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+  L.tileLayer(
-		attribution: '',
+    "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+    {
+      attribution: "",
       //minZoom:8,
       maxZoom: 16,
-	}).addTo(map);
+    }
+  ).addTo(map);
 
   //adding terminator
-	var terminator = L.terminator()
+  var terminator = L.terminator().addTo(map);
-	.addTo(map);
+  setInterval(function () {
-	 setInterval(function() {
     terminator.setTime();
   }, 1000);
 
-
   //center map on sun by default
-	function centerOnSun(){
+  function centerOnSun() {
-		var equator = turf.lineString([[-1000, 0], [1000, 0]])
+    var equator = turf.lineString([
+      [-1000, 0],
+      [1000, 0],
+    ]);
     var intersects = turf.lineIntersect(equator, terminator.toGeoJSON());
     //console.log(intersects)
-		var lonCenter = ((intersects.features[1].geometry.coordinates[0])+(intersects.features[2].geometry.coordinates[0]))/2
+    var lonCenter =
+      (intersects.features[1].geometry.coordinates[0] +
+        intersects.features[2].geometry.coordinates[0]) /
+      2;
     //console.log(lonCenter)
-		return lonCenter
+    return lonCenter;
   }
-	map.setView([30,0], 2);
+  map.setView([30, 0], 2);
-	
 
   //could layer from GBIS NASA  - always 1 day of delay
-	var twoDaysAgo = moment(new Date()).subtract(2, "days").format('YYYY-MM-DD')
+  var twoDaysAgo = moment(new Date()).subtract(2, "days").format("YYYY-MM-DD");
-	L.tileLayer('https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_SNPP_CorrectedReflectance_TrueColor/default/'+twoDaysAgo+'/GoogleMapsCompatible_Level9/{z}/{y}/{x}.jpg', {
+  L.tileLayer(
-		attribution: '',
+    "https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_SNPP_CorrectedReflectance_TrueColor/default/" +
+      twoDaysAgo +
+      "/GoogleMapsCompatible_Level9/{z}/{y}/{x}.jpg",
+    {
+      attribution: "",
       maxZoom: 8,
-		opacity:0.4
+      opacity: 0.4,
-	})
+    }
-	.addTo(map);
+  ).addTo(map);
-	
 
   //Bluring the terminator | Source: https://stackoverflow.com/questions/28235792/leaflet-polygon-with-fuzzy-outline
   var svg = map.getPanes().overlayPane.firstChild,
-	svgFilter = document.createElementNS('http://www.w3.org/2000/svg', 'filter'),
+    svgFilter = document.createElementNS(
-    svgBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
+      "http://www.w3.org/2000/svg",
-	svgFilter.setAttribute('id', 'blur');
+      "filter"
-	svgFilter.setAttribute('x', '-100%');
+    ),
-	svgFilter.setAttribute('y', '-100%');
+    svgBlur = document.createElementNS(
-	svgFilter.setAttribute('width', '500%');
+      "http://www.w3.org/2000/svg",
-	svgFilter.setAttribute('height', '500%');
+      "feGaussianBlur"
-	svgBlur.setAttribute('stdDeviation', 15);
+    );
+  svgFilter.setAttribute("id", "blur");
+  svgFilter.setAttribute("x", "-100%");
+  svgFilter.setAttribute("y", "-100%");
+  svgFilter.setAttribute("width", "500%");
+  svgFilter.setAttribute("height", "500%");
+  svgBlur.setAttribute("stdDeviation", 15);
   svgFilter.appendChild(svgBlur);
   svg.appendChild(svgFilter);
-	terminator._path.setAttribute('filter', 'url(#blur)'); 
+  terminator._path.setAttribute("filter", "url(#blur)");
 
   //geojson for arclines
   //travel
   var arcTravelStyle = {
-		"color": "#00ff00",
+    color: "#00ff00",
-		"weight": 2.5,
+    weight: 2.5,
-		"dashArray": "10 5",
+    dashArray: "10 5",
-		"opacity": 0.65
+    opacity: 0.65,
   };
-	var arcTravel = L.geoJSON([],{style: arcTravelStyle}).addTo(map);
+  var arcTravel = L.geoJSON([], { style: arcTravelStyle }).addTo(map);
   //travelled
   var arcTravelledStyle = {
-		"color": "#00ff00",
+    color: "#00ff00",
-		"weight": 2.5,
+    weight: 2.5,
-		"opacity": 0.65
+    opacity: 0.65,
   };
-	var arcTravelled = L.geoJSON([],{style: arcTravelledStyle}).addTo(map);
+  var arcTravelled = L.geoJSON([], { style: arcTravelledStyle }).addTo(map);
 
-	var pulsatingMarker = L.layerGroup([]).addTo(map) 	
+  var pulsatingMarker = L.layerGroup([]).addTo(map);
-	var originMarker = L.layerGroup([]).addTo(map) 	
+  var originMarker = L.layerGroup([]).addTo(map);
 
   var firstDraw = true;
   var prevZoom;
 
-    var pixiOverlay = L.pixiOverlay(function(utils, event) {
+  var pixiOverlay = L.pixiOverlay(function (utils, event) {
     var zoom = utils.getMap().getZoom();
     var container = utils.getContainer();
     var renderer = utils.getRenderer();
@@ -148,73 +170,90 @@ loader.load(function(loader, resources) {
     var scale = utils.getScale();
 
     if (firstDraw) {
-			
       //get planes
-			$.post( "getCurrentPlanes.php", function(result) {
+      $.post("getCurrentPlanes.php", function (result) {
         // console.log(result)
-			  var planes = $.parseJSON(result)
+        var planes = $.parseJSON(result);
-			  console.log(planes)
+        console.log(planes);
-			  function formatResults(data){
+        function formatResults(data) {
-				  data.deliveryTime = Number(data.deliveryTime)*1000
+          data.deliveryTime = Number(data.deliveryTime) * 1000;
-				  data.startTime = Number(data.startTime)*1000
+          data.startTime = Number(data.startTime) * 1000;
-				  return data
+          return data;
         }
 
-			  function displayPlane(data){
+        function displayPlane(data) {
-					var line = turf.greatCircle(turf.point([Number(data.startLon),Number(data.startLat)]), turf.point([Number(data.destLon),Number(data.destLat)]),{offset:20})
+          var line = turf.greatCircle(
-					var lineDistance = turf.length(line);
+            turf.point([Number(data.startLon), Number(data.startLat)]),
-					var dateStart = moment(data.startTime)
+            turf.point([Number(data.destLon), Number(data.destLat)]),
-					var dateEnd = moment(data.deliveryTime)
+            { offset: 20 }
-					var dateNow = moment(new Date())
-					var totalSeconds = dateEnd.diff(dateStart,'seconds');
-					var travelledSeconds = dateNow.diff(dateStart,'seconds')
-					var travelRatio = travelledSeconds/totalSeconds
-					var travelledDistance = lineDistance*travelRatio  // getting the travelled distance
-					var segment;
-					if(line.geometry.type == "MultiLineString"){ // if the arc is cutting the dateline, well it's a mess.
-						var l1 = turf.lineString(line.geometry.coordinates[0]) // creating a line from first segment
-						var l2 = turf.lineString(line.geometry.coordinates[1]) // creating a line from second segment
-						var l1Length = turf.length(l1) // calculating length of first segment
-						if (travelledDistance < l1Length){ // if the travelled distance is inferior to segment 1 line, the point is somewhere in it
-							segment = l1
-							data.position = 1
-						}
-						else{
-							segment = l2  // otherwise on segment 2
-							data.position = 2
-							travelledDistance = Number(travelledDistance)-Number(l1Length) // we remove the travel distance done in s1
-						}
-					}
-					else{
-						segment = line
-						data.position = 0						
-					}
-					var currentPosition = turf.along(segment, travelledDistance,{units: 'kilometers'})
-					if(currentPosition.geometry.coordinates[0] < -180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]+360}
-					if(currentPosition.geometry.coordinates[0] > 180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]-Number(360)}
-				    //calculating bearing based on two points, one just before and one just after
-					var positionBefore = turf.along(segment, (travelledDistance)-0.00001,{units: 'kilometers'})
-					var positionAfter = turf.along(segment, (travelledDistance)+0.00001,{units: 'kilometers'})
-					var rotation = turf.bearing(
-						positionBefore,
-						positionAfter
           );
+          var lineDistance = turf.length(line);
+          var dateStart = moment(data.startTime);
+          var dateEnd = moment(data.deliveryTime);
+          var dateNow = moment(new Date());
+          var totalSeconds = dateEnd.diff(dateStart, "seconds");
+          var travelledSeconds = dateNow.diff(dateStart, "seconds");
+          var travelRatio = travelledSeconds / totalSeconds;
+          var travelledDistance = lineDistance * travelRatio; // getting the travelled distance
+          var segment;
+          if (line.geometry.type == "MultiLineString") {
+            // if the arc is cutting the dateline, well it's a mess.
+            var l1 = turf.lineString(line.geometry.coordinates[0]); // creating a line from first segment
+            var l2 = turf.lineString(line.geometry.coordinates[1]); // creating a line from second segment
+            var l1Length = turf.length(l1); // calculating length of first segment
+            if (travelledDistance < l1Length) {
+              // if the travelled distance is inferior to segment 1 line, the point is somewhere in it
+              segment = l1;
+              data.position = 1;
+            } else {
+              segment = l2; // otherwise on segment 2
+              data.position = 2;
+              travelledDistance = Number(travelledDistance) - Number(l1Length); // we remove the travel distance done in s1
+            }
+          } else {
+            segment = line;
+            data.position = 0;
+          }
+          var currentPosition = turf.along(segment, travelledDistance, {
+            units: "kilometers",
+          });
+          if (currentPosition.geometry.coordinates[0] < -180) {
+            currentPosition.geometry.coordinates[0] =
+              currentPosition.geometry.coordinates[0] + 360;
+          }
+          if (currentPosition.geometry.coordinates[0] > 180) {
+            currentPosition.geometry.coordinates[0] =
+              currentPosition.geometry.coordinates[0] - Number(360);
+          }
+          //calculating bearing based on two points, one just before and one just after
+          var positionBefore = turf.along(
+            segment,
+            travelledDistance - 0.00001,
+            { units: "kilometers" }
+          );
+          var positionAfter = turf.along(segment, travelledDistance + 0.00001, {
+            units: "kilometers",
+          });
+          var rotation = turf.bearing(positionBefore, positionAfter);
 
           //plane
-					var iconColor = 'marker'+data.color
+          var iconColor = "marker" + data.color;
           var markerTexture = resources[iconColor].texture;
           var marker = new PIXI.Sprite(markerTexture);
           marker.anchor.set(0.5, 0.5);
-					var markerCoords = project([currentPosition.geometry.coordinates[1],currentPosition.geometry.coordinates[0]]);
+          var markerCoords = project([
+            currentPosition.geometry.coordinates[1],
+            currentPosition.geometry.coordinates[0],
+          ]);
           marker.x = markerCoords.x;
           marker.y = markerCoords.y;
           marker.angle = rotation;
           marker.scale.set(5);
           marker.interactive = true;
-					marker.cursor = 'pointer'
+          marker.cursor = "pointer";
-					marker.data  = data
+          marker.data = data;
-					marker.data.line = line
+          marker.data.line = line;
-					marker.data.currentPosition = currentPosition
+          marker.data.currentPosition = currentPosition;
 
           //shadow
           var shadowTexture = resources.shadow.texture;
@@ -224,72 +263,96 @@ loader.load(function(loader, resources) {
           shadow.y = markerCoords.y + 0.5;
           shadow.angle = rotation;
           shadow.scale.set(0.00025);
-					shadow.alpha = 0.3
+          shadow.alpha = 0.3;
-					shadow.visible = false
+          shadow.visible = false;
 
           //popup
-					marker.popup = L.popup({className: 'pixi-popup'})
+          marker.popup = L.popup({ className: "pixi-popup" });
 
           pixiContainer.addChild(shadow);
           pixiContainer.addChild(marker);
 
-					renderer.render(container)	
+          renderer.render(container);
 
           //adapting scale based on zoom level. Max zoom = writting visible
-					map.on('zoomend', function() {
+          map.on("zoomend", function () {
-						marker.scale.set((1/(utils.getScale(map.getZoom())*20))+(Math.pow(map.getZoom(),2)/100*2*(1/(utils.getScale(map.getZoom())*20))))
+            marker.scale.set(
-						if(map.getZoom() == 16){
+              1 / (utils.getScale(map.getZoom()) * 20) +
-							shadow.visible = true
+                (Math.pow(map.getZoom(), 2) / 100) *
-						}
+                  2 *
-						else{
+                  (1 / (utils.getScale(map.getZoom()) * 20))
-							shadow.visible = false
+            );
+            if (map.getZoom() == 16) {
+              shadow.visible = true;
+            } else {
+              shadow.visible = false;
             }
           });
 
-					
-					
           //animating moving plane
-					setInterval(function() {
+          setInterval(function () {
             animate();
-					}, 1000)
+          }, 1000);
 
           function animate() {
-				      if (map.getZoom()	> 12){ // we animate only starting zoom 12
+            if (map.getZoom() > 12) {
-						  var bounds = map.getBounds()
+              // we animate only starting zoom 12
-						  var bbox = [bounds._southWest.lng, bounds._southWest.lat, bounds._northEast.lng, bounds._northEast.lat];  
+              var bounds = map.getBounds();
+              var bbox = [
+                bounds._southWest.lng,
+                bounds._southWest.lat,
+                bounds._northEast.lng,
+                bounds._northEast.lat,
+              ];
               var extentPoly = turf.bboxPolygon(bbox);
-						  var planeInExtent = turf.booleanWithin(marker.data.currentPosition, extentPoly);
+              var planeInExtent = turf.booleanWithin(
-							  if(planeInExtent == true){ // we animate only the planes in map extent 
+                marker.data.currentPosition,
-							  var dateNow = moment(new Date())
+                extentPoly
-							  var totalSeconds = dateEnd.diff(dateStart,'seconds');
+              );
-							  var travelledSeconds = dateNow.diff(dateStart,'seconds')
+              if (planeInExtent == true) {
-							  var travelRatio = travelledSeconds/totalSeconds
+                // we animate only the planes in map extent
+                var dateNow = moment(new Date());
+                var totalSeconds = dateEnd.diff(dateStart, "seconds");
+                var travelledSeconds = dateNow.diff(dateStart, "seconds");
+                var travelRatio = travelledSeconds / totalSeconds;
                 var lineDistance = turf.length(line);
                 var segment;
-							  var travelledDistance = lineDistance*travelRatio  // getting the travelled distance
+                var travelledDistance = lineDistance * travelRatio; // getting the travelled distance
-								if(line.geometry.type == "MultiLineString"){ // if the arc is cutting the dateline
+                if (line.geometry.type == "MultiLineString") {
-									var l1 = turf.lineString(line.geometry.coordinates[0]) // creating a line from first segment
+                  // if the arc is cutting the dateline
-									var l2 = turf.lineString(line.geometry.coordinates[1]) // creating a line from second segment
+                  var l1 = turf.lineString(line.geometry.coordinates[0]); // creating a line from first segment
-									var l1Length = turf.length(l1) // calculating length of first segment
+                  var l2 = turf.lineString(line.geometry.coordinates[1]); // creating a line from second segment
-									if (travelledDistance < l1Length){ // if the travelled distance is inferior to segment 1 line, the point is somewhere in it
+                  var l1Length = turf.length(l1); // calculating length of first segment
-										segment = l1
+                  if (travelledDistance < l1Length) {
-										marker.data.position = 1  // we store it, usefull for popup event
+                    // if the travelled distance is inferior to segment 1 line, the point is somewhere in it
+                    segment = l1;
+                    marker.data.position = 1; // we store it, usefull for popup event
+                  } else {
+                    segment = l2; // otherwise on segment 2
+                    marker.data.position = 2;
+                    travelledDistance =
+                      Number(travelledDistance) - Number(l1Length); // we remove the travel distance done in s1
                   }
-									else{
+                } else {
-										segment = l2  // otherwise on segment 2
+                  segment = line;
-										marker.data.position = 2
-										travelledDistance = Number(travelledDistance)-Number(l1Length) // we remove the travel distance done in s1
                 }
-								}
+                var currentPosition = turf.along(segment, travelledDistance, {
-								else{
+                  units: "kilometers",
-									segment = line	
+                });
-								}
-							  var currentPosition = turf.along(segment, travelledDistance,{units: 'kilometers'})
                 //troubleshooting extreme lons
-							  if(currentPosition.geometry.coordinates[0] < -180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]+360}
+                if (currentPosition.geometry.coordinates[0] < -180) {
-							  if(currentPosition.geometry.coordinates[0] > 180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]-Number(360)}
+                  currentPosition.geometry.coordinates[0] =
-							  marker.data.currentPosition = currentPosition
+                    currentPosition.geometry.coordinates[0] + 360;
-							  var markerCoords = project([currentPosition.geometry.coordinates[1],currentPosition.geometry.coordinates[0]]);
+                }
+                if (currentPosition.geometry.coordinates[0] > 180) {
+                  currentPosition.geometry.coordinates[0] =
+                    currentPosition.geometry.coordinates[0] - Number(360);
+                }
+                marker.data.currentPosition = currentPosition;
+                var markerCoords = project([
+                  currentPosition.geometry.coordinates[1],
+                  currentPosition.geometry.coordinates[0],
+                ]);
                 marker.x = markerCoords.x;
                 marker.y = markerCoords.y;
                 shadow.x = markerCoords.x;
@@ -301,167 +364,320 @@ loader.load(function(loader, resources) {
 
           //if parameter in URL, zoom on it
           var queryString = window.location.search;
-					queryString = queryString.split('=')[1]
+          queryString = queryString.split("=")[1];
-					if(Number(queryString)==data.uid){
+          if (Number(queryString) == data.uid) {
-						$("#back").attr("src","src/img/back-"+data.color+".jpg");
+            $("#back").attr("src", "src/img/back-" + data.color + ".jpg");
             html = data.message;
             var canvas1 = document.getElementById("blankCanvas1");
-						rasterizeHTML.drawHTML(html, canvas1,{zoom:0.7}).then(function success(renderResult) {
+            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.fillRect(0, 0, 400, 400);
-							ctx.drawImage(canvas1, 0, 0,400,400)
+                ctx.drawImage(canvas1, 0, 0, 400, 400);
                 ctx.font = "9px Courier";
-							$("#front").attr('src',document.getElementById("blankCanvas2").toDataURL())
+                $("#front").attr(
-							$("#canvas3d").css('display','block')
+                  "src",
+                  document.getElementById("blankCanvas2").toDataURL()
+                );
+                $("#canvas3d").css("opacity", 0);
+                $("#canvas3d").css("display", "block");
                 animePlane();
-						})
+                setTimeout(function () {
+                  $("#canvas3d").css("opacity", 1);
+                }, 0);
+                const startDate = new Date(data.startTime);
+                const deliveryDate = new Date(data.deliveryTime);
+                const diffTime = Math.abs(deliveryDate - startDate);
+                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+                setTimeout(function () {
+                  $("#closePlane").css("opacity", 1);
+                  $("#closePlane").css("visibility", "visible");
+                  $("#downloadPlaneMessage").css("opacity", 1);
+                  $("#downloadPlaneMessage").css("visibility", "visible");
+                  $("#closePlane").on("click", function () {
+                    $("#canvas3d").css("display", "none");
+                    $("#downloadPlaneMessage").css("display", "none");
+                    $(this).css("display", "none");
+                  });
+                  $("#downloadPlaneMessage").on("click", function () {
+                    const htmlRender =
+                      "<div>" +
+                      "<div><u>Métadonnées du message :</u></div>" +
+                      "<ul>" +
+                      "<li>" +
+                      data.startName +
+                      " - " +
+                      data.destName +
+                      "</li>" +
+                      "<li>" +
+                      data.expeMail +
+                      " - " +
+                      data.destMail +
+                      "</li>" +
+                      "<li>" +
+                      diffDays +
+                      " days" +
+                      "</li>" +
+                      "<li>" +
+                      moment(deliveryDate).format("DD/MM/YYYY") +
+                      "</li>" +
+                      "</ul><br>" +
+                      "<div><u>Champs message :</u></div><br>" +
+                      html +
+                      "</div>";
+                    const opt = {
+                      margin: 10,
+                      filename: "peome.pdf",
+                      image: { type: "jpeg", quality: 1 },
+                      html2canvas: {
+                        scale: 2,
+                        removeContainer: false,
+                        logging: true,
+                      },
+                      pagebreak: { avoid: "img" },
+                    };
+                    html2pdf().set(opt).from(htmlRender).save();
+                  });
+                }, 5000);
+              });
+            setTimeout(function () {
+              map.setView(
+                [
+                  data.currentPosition.geometry.coordinates[1],
+                  data.currentPosition.geometry.coordinates[0],
+                ],
+                15
+              );
+              openPopup(marker);
+            }, 100);
           }
-					
         }
-				for (var i in planes){
+        for (var i in planes) {
-					displayPlane(formatResults(planes[i]),0)		
+          displayPlane(formatResults(planes[i]), 0);
         }
       });
 
-			function openPopup(target){
+      function openPopup(target) {
         //drawing arcs
-					arcTravel.clearLayers()
+        arcTravel.clearLayers();
-					arcTravelled.clearLayers()
+        arcTravelled.clearLayers();
-					arcTravelStyle.color = '#'+target.data.color
+        arcTravelStyle.color = "#" + target.data.color;
-					arcTravelledStyle.color = '#'+target.data.color
+        arcTravelledStyle.color = "#" + target.data.color;
-					var travel = target.data.line
+        var travel = target.data.line;
-					var start = turf.point([Number(target.data.startLon),Number(target.data.startLat)])
+        var start = turf.point([
-					var current =  target.data.currentPosition
+          Number(target.data.startLon),
-					var end = turf.point([Number(target.data.destLon),Number(target.data.destLat)])
+          Number(target.data.startLat),
+        ]);
+        var current = target.data.currentPosition;
+        var end = turf.point([
+          Number(target.data.destLon),
+          Number(target.data.destLat),
+        ]);
         // for linestrings
-					if(travel.geometry.type == "LineString"){ 
+        if (travel.geometry.type == "LineString") {
           var sliced1 = turf.lineSlice(start, current, travel);
           var sliced2 = turf.lineSlice(current, end, travel);
           arcTravelled.addData(sliced1);
           arcTravel.addData(sliced2);
         }
         // we create a copy of lines crossing the datetime
-					function createCopy(c){
+        function createCopy(c) {
-						for (var i in c.geometry.coordinates){
+          for (var i in c.geometry.coordinates) {
-							if (c.geometry.coordinates[i][0] > 0){
+            if (c.geometry.coordinates[i][0] > 0) {
-								c.geometry.coordinates[i][0] = c.geometry.coordinates[i][0] - Number(360)
+              c.geometry.coordinates[i][0] =
-							}
+                c.geometry.coordinates[i][0] - Number(360);
-							else{
+            } else {
-								c.geometry.coordinates[i][0] = c.geometry.coordinates[i][0] + Number(360)
+              c.geometry.coordinates[i][0] =
+                c.geometry.coordinates[i][0] + Number(360);
             }
           }
 
-						return c
+          return c;
         }
         //for multilinetrings
-					if(travel.geometry.type == "MultiLineString"){
+        if (travel.geometry.type == "MultiLineString") {
-						var l1 = turf.lineString(travel.geometry.coordinates[0]) // creating a line from first segment
+          var l1 = turf.lineString(travel.geometry.coordinates[0]); // creating a line from first segment
-						var l2 = turf.lineString(travel.geometry.coordinates[1]) // creating a line from second segment
+          var l2 = turf.lineString(travel.geometry.coordinates[1]); // creating a line from second segment
-						if(target.data.position == 1){
+          if (target.data.position == 1) {
             var sliced1 = turf.lineSlice(start, current, l1);
-							var sliced2 = turf.lineSlice(current, turf.point(l1.geometry.coordinates[l1.geometry.coordinates.length-1]), l1);
+            var sliced2 = turf.lineSlice(
+              current,
+              turf.point(
+                l1.geometry.coordinates[l1.geometry.coordinates.length - 1]
+              ),
+              l1
+            );
             arcTravelled.addData(sliced1);
             arcTravel.addData(sliced2);
             arcTravel.addData(l2);
-							
+          } else if (target.data.position == 2) {
-						}
+            var sliced1 = turf.lineSlice(
-						else if(target.data.position == 2){
+              turf.point(l2.geometry.coordinates[0]),
-							var sliced1 = turf.lineSlice(turf.point(l2.geometry.coordinates[0]), current, l2);
+              current,
+              l2
+            );
             var sliced2 = turf.lineSlice(current, end, l2);
             arcTravelled.addData(l1);
             arcTravelled.addData(sliced1);
             arcTravel.addData(sliced2);
           }
-						var travelledGeoJSON = arcTravelled.toGeoJSON()
+          var travelledGeoJSON = arcTravelled.toGeoJSON();
-						for (var i in travelledGeoJSON.features){
+          for (var i in travelledGeoJSON.features) {
-							arcTravelled.addData(createCopy(travelledGeoJSON.features[i]))
+            arcTravelled.addData(createCopy(travelledGeoJSON.features[i]));
           }
-						var travelGeoJSON = arcTravel.toGeoJSON()
+          var travelGeoJSON = arcTravel.toGeoJSON();
-						for (var i in travelGeoJSON.features){
+          for (var i in travelGeoJSON.features) {
-							arcTravel.addData(createCopy(travelGeoJSON.features[i]))
+            arcTravel.addData(createCopy(travelGeoJSON.features[i]));
           }
-						
         }
 
-					
         //add pulsating marker on destination;
-					pulsatingMarker.clearLayers()
+        pulsatingMarker.clearLayers();
         var pulseIcon = L.divIcon({
-					  className: 'pulse-icon', //empty class to overwrite leaflet defaults
+          className: "pulse-icon", //empty class to overwrite leaflet defaults
-					  html: '<div class="pulse-icon-anim" style="border-color:#'+target.data.color+'"></div>',
+          html:
-					  iconSize: [22,22]
+            '<div class="pulse-icon-anim" style="border-color:#' +
+            target.data.color +
+            '"></div>',
+          iconSize: [22, 22],
         });
-					var endCoordo = [Number(target.data.destLat),Number(target.data.destLon)]
+        var endCoordo = [
-					pulsatingMarker.addLayer(new L.marker(endCoordo, {icon: pulseIcon}));
+          Number(target.data.destLat),
-					if(travel.geometry.type == "MultiLineString"){ //if arc cross dateline, we multiply the marker
+          Number(target.data.destLon),
-						pulsatingMarker.addLayer(new L.marker([endCoordo[0],endCoordo[1]-Number(360)], {icon: pulseIcon}));
+        ];
-						pulsatingMarker.addLayer(new L.marker([endCoordo[0],endCoordo[1]+Number(360)], {icon: pulseIcon}));
+        pulsatingMarker.addLayer(new L.marker(endCoordo, { icon: pulseIcon }));
+        if (travel.geometry.type == "MultiLineString") {
+          //if arc cross dateline, we multiply the marker
+          pulsatingMarker.addLayer(
+            new L.marker([endCoordo[0], endCoordo[1] - Number(360)], {
+              icon: pulseIcon,
+            })
+          );
+          pulsatingMarker.addLayer(
+            new L.marker([endCoordo[0], endCoordo[1] + Number(360)], {
+              icon: pulseIcon,
+            })
+          );
         }
 
         //adding static marker on origin
-					originMarker.clearLayers()
+        originMarker.clearLayers();
-					var startCoordo = [Number(target.data.startLat),Number(target.data.startLon)]
+        var startCoordo = [
-					originMarker.addLayer(new L.circleMarker(startCoordo, {radius: 6,opacity:0.7, weight:2,color:'#'+target.data.color}));
+          Number(target.data.startLat),
-					if(travel.geometry.type == "MultiLineString"){ //if arc cross dateline, we multiply the marker
+          Number(target.data.startLon),
-						originMarker.addLayer(new L.circleMarker([startCoordo[0],startCoordo[1]-Number(360)], {radius: 6,opacity:0.7,weight:2,color:'#'+target.data.color}));
+        ];
-						originMarker.addLayer(new L.circleMarker([startCoordo[0],startCoordo[1]+Number(360)], {radius: 6,opacity:0.7,color:'#'+target.data.color}));
+        originMarker.addLayer(
+          new L.circleMarker(startCoordo, {
+            radius: 6,
+            opacity: 0.7,
+            weight: 2,
+            color: "#" + target.data.color,
+          })
+        );
+        if (travel.geometry.type == "MultiLineString") {
+          //if arc cross dateline, we multiply the marker
+          originMarker.addLayer(
+            new L.circleMarker([startCoordo[0], startCoordo[1] - Number(360)], {
+              radius: 6,
+              opacity: 0.7,
+              weight: 2,
+              color: "#" + target.data.color,
+            })
+          );
+          originMarker.addLayer(
+            new L.circleMarker([startCoordo[0], startCoordo[1] + Number(360)], {
+              radius: 6,
+              opacity: 0.7,
+              color: "#" + target.data.color,
+            })
+          );
         }
 
-					
-					
         //popup
         var momentLocale = lang;
-					if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese
+        if (momentLocale == "zh") {
-					moment.locale(momentLocale)
+          momentLocale = "zh-cn";
+        } //troubleshot for chinese
+        moment.locale(momentLocale);
 
-					target.popup.setLatLng([target.data.currentPosition.geometry.coordinates[1],target.data.currentPosition.geometry.coordinates[0]])
+        target.popup.setLatLng([
+          target.data.currentPosition.geometry.coordinates[1],
+          target.data.currentPosition.geometry.coordinates[0],
+        ]);
         //arabic popup
-					if(lang=="ar"){
+        if (lang == "ar") {
-						target.popup.setContent('<table><tbody><tr><th style="text-align:center">'+target.data.startName+'</th><th>&nbsp;<i class="fas fa-plane"></i>&nbsp;</th><th style="text-align:center">'+target.data.destName+'</th></tr><tr><th style="text-align:center"><small>'+moment(target.data.startTime).fromNow()+'</small></th><th></th><th style="text-align:center"><small>'+moment(target.data.deliveryTime).fromNow()+'</small></th></tr></tbody></table>')
+          target.popup.setContent(
+            '<table><tbody><tr><th style="text-align:center">' +
+              target.data.startName +
+              '</th><th>&nbsp;<i class="fas fa-plane"></i>&nbsp;</th><th style="text-align:center">' +
+              target.data.destName +
+              '</th></tr><tr><th style="text-align:center"><small>' +
+              moment(target.data.startTime).fromNow() +
+              '</small></th><th></th><th style="text-align:center"><small>' +
+              moment(target.data.deliveryTime).fromNow() +
+              "</small></th></tr></tbody></table>"
+          );
         }
         //other languages
-					else{
+        else {
-						target.popup.setContent('<table><tbody><tr><th style="text-align:center">'+target.data.startName+'</th><th>&nbsp;<i class="fas fa-plane"></i>&nbsp;</th><th style="text-align:center">'+target.data.destName+'</th></tr><tr><th style="text-align:center"><small>'+moment(target.data.startTime).fromNow()+'</small></th><th></th><th style="text-align:center"><small>'+moment(target.data.deliveryTime).fromNow()+'</small></th></tr></tbody></table>')
+          target.popup.setContent(
+            '<table><tbody><tr><th style="text-align:center">' +
+              target.data.startName +
+              '</th><th>&nbsp;<i class="fas fa-plane"></i>&nbsp;</th><th style="text-align:center">' +
+              target.data.destName +
+              '</th></tr><tr><th style="text-align:center"><small>' +
+              moment(target.data.startTime).fromNow() +
+              '</small></th><th></th><th style="text-align:center"><small>' +
+              moment(target.data.deliveryTime).fromNow() +
+              "</small></th></tr></tbody></table>"
+          );
         }
         target.popup.openOn(map);
-					target.popup.on('remove', function() {
+        target.popup.on("remove", function () {
-						arcTravel.clearLayers()
+          arcTravel.clearLayers();
-						arcTravelled.clearLayers()
+          arcTravelled.clearLayers();
-						pulsatingMarker.clearLayers()
+          pulsatingMarker.clearLayers();
-						originMarker.clearLayers()
+          originMarker.clearLayers();
         });
-					target.popup.on('popupclose', function() {
+        target.popup.on("popupclose", function () {
-						arcTravel.clearLayers()
+          arcTravel.clearLayers();
-						arcTravelled.clearLayers()
+          arcTravelled.clearLayers();
-						pulsatingMarker.clearLayers()
+          pulsatingMarker.clearLayers();
-						originMarker.clearLayers()
+          originMarker.clearLayers();
         });
       }
       //utils for popup
-			utils.getMap().on('click', function(e) {
+      utils.getMap().on("click", function (e) {
         var interaction = utils.getRenderer().plugins.interaction;
         var pointerEvent = e.originalEvent;
         var pixiPoint = new PIXI.Point();
-				interaction.mapPositionToPoint(pixiPoint, pointerEvent.clientX, pointerEvent.clientY);
+        interaction.mapPositionToPoint(
+          pixiPoint,
+          pointerEvent.clientX,
+          pointerEvent.clientY
+        );
         var target = interaction.hitTest(pixiPoint, container);
         if (target && target.popup) {
-					openPopup(target)
+          openPopup(target);
         }
       });
-			utils.getMap().on('touchend', function(e) {
+      utils.getMap().on("touchend", function (e) {
         var interaction = utils.getRenderer().plugins.interaction;
         var pointerEvent = e.originalEvent;
         var pixiPoint = new PIXI.Point();
-				interaction.mapPositionToPoint(pixiPoint, pointerEvent.clientX, pointerEvent.clientY);
+        interaction.mapPositionToPoint(
+          pixiPoint,
+          pointerEvent.clientX,
+          pointerEvent.clientY
+        );
         var target = interaction.hitTest(pixiPoint, container);
         if (target && target.popup) {
-					openPopup(target)
+          openPopup(target);
         }
       });
-			
-			
     }
 
     firstDraw = false;
@@ -471,22 +687,17 @@ loader.load(function(loader, resources) {
   pixiOverlay.addTo(map);
 });
 
-
-
-
-
-  
 //hack to make white lines between lines disapear on non-retina screens (from: https://github.com/Leaflet/Leaflet/issues/3575 )
-(function(){
+(function () {
-    var originalInitTile = L.GridLayer.prototype._initTile
+  var originalInitTile = L.GridLayer.prototype._initTile;
   L.GridLayer.include({
     _initTile: function (tile) {
       originalInitTile.call(this, tile);
 
       var tileSize = this.getTileSize();
 
-            tile.style.width = tileSize.x + 1 + 'px';
+      tile.style.width = tileSize.x + 1 + "px";
-            tile.style.height = tileSize.y + 1 + 'px';
+      tile.style.height = tileSize.y + 1 + "px";
-        }
+    },
   });
-})()
+})();

src/translation.js

@@ -104,13 +104,7 @@ function translateUI(l) {
     $("#navTitle").html(s.avionpoeme);
     $("#buttonAnthology").html(s.anthologie);
     $("#buttonAbout").html(s.apropos);
-    if (typeof nbPlane !== "undefined") {
     $("#buttonNewPlane").val(s.lancer_avion + " " + nbPlane + "/100");
-    } else {
-      $("#buttonNewPlane").on("click", () => {
-        window.location.replace("/");
-      });
-    }
     //new plane form
     $("#newPlaneModalTitle").html(s.lancer_avion);
     $("#newPlaneModalMessage").html(s.message);
@@ -139,11 +133,6 @@ function translateUI(l) {
     $("#publicTooltip").attr("title", s.public_tooltip).tooltip("_fixTitle");
 
     $('#selectDestLang option[value="' + lang + '"]').prop("selected", true); //selecting by default recipient language same as interface
-    //Anthology
-    displayAnthology();
-    $("#anthologyTitle").html(s.anthologie);
-    $("#anthologyDisclaimer").html(s.suppr_message_public);
-    $("#closeAnthologyAbout").html(s.retour_carte);
 
     //About
     $("#aboutTitle").html(s.apropos);