DTux/dtux__avion-poeme
Archived
1
0
Fork 0
Code

Compare commits

base: DTux:0a87a3a0cbec519d6901d24b580bee616f77619e
Branches Tags
DTux:master
DTux:fix-bug-button-header
DTux:add-htaccess
DTux:fix-bug-picto-lang-apropos
DTux:anim-plane-reverse
DTux:add-attachment
DTux:donation-button
DTux:add-two-pages
DTux:synchro-with-prod
...
compare: DTux:80af7b029a5d20808e55e13d928a1e6e96055fe0
Branches Tags
DTux:master
DTux:fix-bug-button-header
DTux:add-htaccess
DTux:fix-bug-picto-lang-apropos
DTux:anim-plane-reverse
DTux:add-attachment
DTux:donation-button
DTux:add-two-pages
DTux:synchro-with-prod

9 Commits
0a87a3a0cb ... 80af7b029a

Author SHA1 Message Date
Daniel Tartavel
80af7b029a correction bug 2022-02-15 15:52:12 +01:00
Daniel Tartavel
4dd37cda7b - added mail return address to expeditor of ap\n- debug of error on peripetie datetime 2022-02-10 19:57:35 +01:00
Daniel Tartavel
ecf570ee87 Merge branch 'master' of git.labolyon.fr:DTux/avion-poeme 2022-02-02 15:34:24 +01:00
Daniel Tartavel
d3f8d78b73 ajout de la gestion du sous-domaine dev\ntypo dans db.class.php 2022-02-02 15:31:46 +01:00
Daniel Tartavel
276a21b3a3 ajout de l'expediteur du message dans l'adresse de retour- Return-Path du mail 2022-02-02 14:43:34 +01:00
Daniel Tartavel
bd7c519426 ajout de l'expediteur du message dans l'adresse de retour- Retrun-Path du mail 2022-02-02 14:42:14 +01:00
mberard
e35bc4accf update repo 2022-01-20 22:18:55 +01:00
mathieu_berard
8429233511 Merge branch 'fix-bug-button-header' of DTux/avion-poeme into master 2021-12-14 21:40:01 +00:00
mberard
bff6df4a35 update repo 2021-12-14 22:33:54 +01:00
12 changed files with 55017 additions and 680 deletions
Show Stats Expand all files Collapse all files

40
cron.php
View File

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

54004
dist/html2pdf/html2pdf.bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

10
include/config.inc.php
View File

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

35
include/db.class.php
View File

@ -1,6 +1,5 @@
<?php <?php
if ( !isset($site) ) if (!isset($site)) {
{
require_once("config.inc.php"); require_once("config.inc.php");
header('Location: ' . $accueil); header('Location: ' . $accueil);
} }
@ -8,7 +7,6 @@ if ( !isset($site) )
require_once "config.inc.php"; require_once "config.inc.php";
require_once "log.php"; require_once "log.php";
require_once "fonctions.inc.php"; require_once "fonctions.inc.php";
require_once "envoi_courriel.inc.php";
$table_prefix = ""; $table_prefix = "";
class db class db
@ -59,11 +57,9 @@ class db
function open() 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; return false;
} }
@ -98,8 +94,7 @@ class db
function newPlane() //return 0 on error function newPlane() //return 0 on error
{ {
global $base_url; 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;
} }
@ -133,7 +128,6 @@ class db
$this->urlAvion = $base_url . "/?avionpoeme=" . $this->uid; $this->urlAvion = $base_url . "/?avionpoeme=" . $this->uid;
$this->newPeripetie(); $this->newPeripetie();
courrielEnvoi($this); courrielEnvoi($this);
} }
function getPlane($uid) function getPlane($uid)
@ -170,7 +164,7 @@ class db
function getCurrentPlanes() 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); $this->query($query);
$planes = $this->result->fetch_all(MYSQLI_ASSOC); $planes = $this->result->fetch_all(MYSQLI_ASSOC);
print json_encode($planes); print json_encode($planes);
@ -202,10 +196,18 @@ class db
function savePeripetie() 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); log_write("savePeripetie " . $query);
//$query .= $this->protect($this->effetPeripetie) . "', '"; //$query .= $this->protect($this->effetPeripetie) . "', '";
//$query .= $this->protect($this->expeMail) . "', '"; //$query .= $this->protect($this->expeMail) . "', '";
@ -217,8 +219,7 @@ class db
{ {
$query = "SELECT *, DATEDIFF(quand,CURDATE()) as datePeripetie FROM peripeties WHERE quand IS NULL"; $query = "SELECT *, DATEDIFF(quand,CURDATE()) as datePeripetie FROM peripeties WHERE quand IS NULL";
$this->query($query); $this->query($query);
while ( ($result = $this->result->fetch_assoc()) ) while (($result = $this->result->fetch_assoc())) {
{
$this->idPeripetie = $result["idPeripetie"]; $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
{ {

19
include/envoi_courriel.inc.php
View File

@ -2,7 +2,6 @@
require_once 'log.php'; require_once 'log.php';
require_once 'fonctions.inc.php'; require_once 'fonctions.inc.php';
function courrielEnvoi( $db ) function courrielEnvoi( $db )
{ {
$dicoExpe = getLang( $db->expeLang ); $dicoExpe = getLang( $db->expeLang );
@ -20,7 +19,7 @@ function courrielEnvoi( $db )
$mailText = $result['text']; $mailText = $result['text'];
$html = $result['html']; $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)); //log_write(print_r($db,true));
@ -47,19 +46,21 @@ function courrielEnvoi( $db )
{ {
$message = "<html><head></head>\n<body>" . $message . "</body></html>"; $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 . "')"; $query = "INSERT INTO courriels VALUES ('0', '" . $db->protect($destinataire) . "', '" . $db->protect($objet) . "', '" . $db->protect($text) . "', '" . (int)$html . "')";
$db->query($query); $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/autoload.php';
//require_once 'include/swiftmailer/swiftmailer/lib/swift_init.php'; //require_once 'include/swiftmailer/swiftmailer/lib/swift_init.php';
try
{
$transport = (new Swift_SmtpTransport('smtpauth.online.net', 465, 'ssl')) $transport = (new Swift_SmtpTransport('smtpauth.online.net', 465, 'ssl'))
->setUsername('contact@avion-poe.me') ->setUsername('contact@avion-poe.me')
->setPassword('AvionPoème*27juillet'); ->setPassword('AvionPoème*27juillet');
@ -86,7 +87,8 @@ function envoiMail($destinataire, $sujet, $text, $html=false, $cc='', $bcc='')
$message->setBody($text); $message->setBody($text);
//add date header //add date header
$headers = $message->getHeaders(); $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)) if (!$mailer->send($message, $failures))
{ {
echo "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); 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; return false;
} }
}
catch (\Swift_TransportException $ex)
{
return false;
}
return true; return true;
} }
?> ?>

3
index.php
View File

@ -133,13 +133,14 @@
</div> </div>
</div> </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/map.js"></script>
<script src="src/geocoder.js"></script> <script src="src/geocoder.js"></script>
<script src="src/paperPlaneAnimation.js"></script> <script src="src/paperPlaneAnimation.js"></script>
<script src="src/formValidation.js"></script> <script src="src/formValidation.js"></script>
<script src="src/newPlane.js"></script> <script src="src/newPlane.js"></script>
<script src="src/translation.js"></script> <script src="src/translation.js"></script>
<script src="src/anthology.js"></script>
</body> </body>
</html> </html>

1
parts/head.php
View File

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

2
parts/header.php
View File

@ -21,7 +21,7 @@
</li> </li>
</ul> </ul>
<form class="nav-button form-inline mt-2 mt-md-0"> <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; </input>&nbsp;
<i id="planeLimitTooltip" class="fas fa-question-circle" data-toggle="tooltip" data-placement="auto" title="coucou"></i> <i id="planeLimitTooltip" class="fas fa-question-circle" data-toggle="tooltip" data-placement="auto" title="coucou"></i>
</form> </form>

141
src/anthology.js
View File

@ -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) {
else if (days >= 30 && days < 365){
if (months > 1) { if (months > 1) {
return ""+months+" "+dictionnary.mois_pluriel return "" + months + " " + dictionnary.mois_pluriel;
} else {
return "" + months + " " + dictionnary.mois;
} }
else{ } else if (days >= 365) {
return ""+months+" "+dictionnary.mois
}
}
else if (days >= 365){
if (years > 1) { if (years > 1) {
return ""+years+" "+dictionnary.ans return "" + years + " " + dictionnary.ans;
} } else {
else{ return "" + years + " " + dictionnary.an;
return ""+years+" "+dictionnary.an
} }
} }
} }
//load //load
var nPages; 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("");
nPagesLoaded = 1;
$.post("getAnthology.php?page=1", function (result) { $.post("getAnthology.php?page=1", function (result) {
results = $.parseJSON(result) results = $.parseJSON(result);
var momentLocale = lang; 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);
for (var i in results) { for (var i in results) {
addAnthologyLine(results[i]) 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; 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);
for (var i in results) { for (var i in results) {
addAnthologyLine(results[i]) 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( $("#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( $("#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);
});
});

50
src/app.css
View File

@ -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 { .custom-file-label::after {
content: attr(data-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;
}

685
src/map.js
View File

@ -1,141 +1,163 @@
var loader = new PIXI.Loader(); var loader = new PIXI.Loader();
var colors = ['66FF00','FF5555','FFE419','2A7FFF','BC5FD3','C8AB37','ECECEC','FF6600']; var colors = [
"66FF00",
"FF5555",
"FFE419",
"2A7FFF",
"BC5FD3",
"C8AB37",
"ECECEC",
"FF6600",
];
for (var i in colors) { for (var i in colors) {
loader.add('marker'+colors[i]+'', 'src/img/plane-'+colors[i]+'.png'); loader.add("marker" + colors[i] + "", "src/img/plane-" + colors[i] + ".png");
} }
//global variable //global variable
var nbPlane = 0 var nbPlane = 0;
loader.add('shadow', 'src/img/shadow.png'); loader.add("shadow", "src/img/shadow.png");
loader.load(function (loader, resources) { loader.load(function (loader, resources) {
var pixiContainer = new PIXI.Container(); var pixiContainer = new PIXI.Container();
var map = L.map('map',{ var map = L.map("map", {
zoomControl: false, zoomControl: false,
minZoom: 2, minZoom: 2,
maxZoom: 16, maxZoom: 16,
maxBounds: [ maxBounds: [
[-Infinity, -360], [-Infinity, -360],
[Infinity, 360] [Infinity, 360],
], ],
//worldCopyJump: true, //worldCopyJump: true,
attributionControl: false attributionControl: false,
}) });
//zoom controls //zoom controls
L.control.zoom({position: 'bottomright'}).addTo(map); L.control.zoom({ position: "bottomright" }).addTo(map);
//Locate user //Locate user
L.control.locate({position: 'bottomright'}).addTo(map); L.control.locate({ position: "bottomright" }).addTo(map);
//fullscreen //fullscreen
map.addControl(new L.Control.Fullscreen({position: 'bottomright'})); map.addControl(new L.Control.Fullscreen({ position: "bottomright" }));
// Licence Icon // Licence Icon
L.Control.Watermark = L.Control.extend({ 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; return img;
} },
}); });
L.control.watermark = function (opts) { L.control.watermark = function (opts) {
return new L.Control.Watermark(opts); return new L.Control.Watermark(opts);
} };
L.control.watermark({ position: 'bottomleft' }).addTo(map); L.control.watermark({ position: "bottomleft" }).addTo(map);
//scale //scale
L.control.scale().addTo(map); L.control.scale().addTo(map);
//disabling send plane button if alreada 100 planes sent the current day //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 = 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(
"Lancer un avion-poème " + Number(result.nAvion) + "/100"
);
if (nbPlane > 99) { if (nbPlane > 99) {
$("#buttonNewPlane").prop("disabled", true); $("#buttonNewPlane").prop("disabled", true);
} else {
} }
else{ translateUI(lang);
});
}
translateUI(lang)
})
//background //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, //minZoom:8,
maxZoom: 16, maxZoom: 16,
}).addTo(map); }
).addTo(map);
//adding terminator //adding terminator
var terminator = L.terminator() var terminator = L.terminator().addTo(map);
.addTo(map);
setInterval(function () { setInterval(function () {
terminator.setTime(); terminator.setTime();
}, 1000); }, 1000);
//center map on sun by default //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()); var intersects = turf.lineIntersect(equator, terminator.toGeoJSON());
//console.log(intersects) //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) //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 //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, 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 //Bluring the terminator | Source: https://stackoverflow.com/questions/28235792/leaflet-polygon-with-fuzzy-outline
var svg = map.getPanes().overlayPane.firstChild, 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); svgFilter.appendChild(svgBlur);
svg.appendChild(svgFilter); svg.appendChild(svgFilter);
terminator._path.setAttribute('filter', 'url(#blur)'); terminator._path.setAttribute("filter", "url(#blur)");
//geojson for arclines //geojson for arclines
//travel //travel
var arcTravelStyle = { 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 //travelled
var arcTravelledStyle = { 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 firstDraw = true;
var prevZoom; var prevZoom;
@ -148,73 +170,90 @@ loader.load(function(loader, resources) {
var scale = utils.getScale(); var scale = utils.getScale();
if (firstDraw) { if (firstDraw) {
//get planes //get planes
$.post("getCurrentPlanes.php", function (result) { $.post("getCurrentPlanes.php", function (result) {
// console.log(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 //plane
var iconColor = 'marker'+data.color var iconColor = "marker" + data.color;
var markerTexture = resources[iconColor].texture; var markerTexture = resources[iconColor].texture;
var marker = new PIXI.Sprite(markerTexture); var marker = new PIXI.Sprite(markerTexture);
marker.anchor.set(0.5, 0.5); 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.x = markerCoords.x;
marker.y = markerCoords.y; marker.y = markerCoords.y;
marker.angle = rotation; marker.angle = rotation;
marker.scale.set(5); marker.scale.set(5);
marker.interactive = true; 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 //shadow
var shadowTexture = resources.shadow.texture; var shadowTexture = resources.shadow.texture;
@ -224,72 +263,96 @@ loader.load(function(loader, resources) {
shadow.y = markerCoords.y + 0.5; shadow.y = markerCoords.y + 0.5;
shadow.angle = rotation; shadow.angle = rotation;
shadow.scale.set(0.00025); shadow.scale.set(0.00025);
shadow.alpha = 0.3 shadow.alpha = 0.3;
shadow.visible = false shadow.visible = false;
//popup //popup
marker.popup = L.popup({className: 'pixi-popup'}) marker.popup = L.popup({ className: "pixi-popup" });
pixiContainer.addChild(shadow); pixiContainer.addChild(shadow);
pixiContainer.addChild(marker); pixiContainer.addChild(marker);
renderer.render(container) renderer.render(container);
//adapting scale based on zoom level. Max zoom = writting visible //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(
1 / (utils.getScale(map.getZoom()) * 20) +
(Math.pow(map.getZoom(), 2) / 100) *
2 *
(1 / (utils.getScale(map.getZoom()) * 20))
);
if (map.getZoom() == 16) { if (map.getZoom() == 16) {
shadow.visible = true shadow.visible = true;
} } else {
else{ shadow.visible = false;
shadow.visible = false
} }
}); });
//animating moving plane //animating moving plane
setInterval(function () { setInterval(function () {
animate(); animate();
}, 1000) }, 1000);
function animate() { 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 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 lineDistance = turf.length(line);
var segment; 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 //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.x = markerCoords.x;
marker.y = markerCoords.y; marker.y = markerCoords.y;
shadow.x = markerCoords.x; shadow.x = markerCoords.x;
@ -301,40 +364,118 @@ loader.load(function(loader, resources) {
//if parameter in URL, zoom on it //if parameter in URL, zoom on it
var queryString = window.location.search; 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; html = data.message;
var canvas1 = document.getElementById("blankCanvas1"); 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 canvas2 = document.getElementById("blankCanvas2");
var ctx = canvas2.getContext("2d"); var ctx = canvas2.getContext("2d");
ctx.fillStyle = "#" + data.color; 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"; 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(); 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 //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 // for linestrings
if (travel.geometry.type == "LineString") { if (travel.geometry.type == "LineString") {
var sliced1 = turf.lineSlice(start, current, travel); var sliced1 = turf.lineSlice(start, current, travel);
@ -346,122 +487,197 @@ loader.load(function(loader, resources) {
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 //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 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); arcTravelled.addData(sliced1);
arcTravel.addData(sliced2); arcTravel.addData(sliced2);
arcTravel.addData(l2); 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); var sliced2 = turf.lineSlice(current, end, l2);
arcTravelled.addData(l1); arcTravelled.addData(l1);
arcTravelled.addData(sliced1); arcTravelled.addData(sliced1);
arcTravel.addData(sliced2); 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; //add pulsating marker on destination;
pulsatingMarker.clearLayers() pulsatingMarker.clearLayers();
var pulseIcon = L.divIcon({ 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 = [
Number(target.data.destLat),
Number(target.data.destLon),
];
pulsatingMarker.addLayer(new L.marker(endCoordo, { icon: pulseIcon })); pulsatingMarker.addLayer(new L.marker(endCoordo, { icon: pulseIcon }));
if(travel.geometry.type == "MultiLineString"){ //if arc cross dateline, we multiply the marker if (travel.geometry.type == "MultiLineString") {
pulsatingMarker.addLayer(new L.marker([endCoordo[0],endCoordo[1]-Number(360)], {icon: pulseIcon})); //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,
})
);
pulsatingMarker.addLayer(
new L.marker([endCoordo[0], endCoordo[1] + Number(360)], {
icon: pulseIcon,
})
);
} }
//adding static marker on origin //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 //popup
var momentLocale = lang; 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 //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 //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.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 for popup
utils.getMap().on('click', function(e) { utils.getMap().on("click", function (e) {
var interaction = utils.getRenderer().plugins.interaction; var interaction = utils.getRenderer().plugins.interaction;
var pointerEvent = e.originalEvent; var pointerEvent = e.originalEvent;
var pixiPoint = new PIXI.Point(); 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); var target = interaction.hitTest(pixiPoint, container);
if (target && target.popup) { 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 interaction = utils.getRenderer().plugins.interaction;
var pointerEvent = e.originalEvent; var pointerEvent = e.originalEvent;
var pixiPoint = new PIXI.Point(); 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); var target = interaction.hitTest(pixiPoint, container);
if (target && target.popup) { if (target && target.popup) {
openPopup(target) openPopup(target);
} }
}); });
} }
firstDraw = false; firstDraw = false;
@ -471,22 +687,17 @@ loader.load(function(loader, resources) {
pixiOverlay.addTo(map); pixiOverlay.addTo(map);
}); });
//hack to make white lines between lines disapear on non-retina screens (from: https://github.com/Leaflet/Leaflet/issues/3575 ) //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({ L.GridLayer.include({
_initTile: function (tile) { _initTile: function (tile) {
originalInitTile.call(this, tile); originalInitTile.call(this, tile);
var tileSize = this.getTileSize(); 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";
} },
}); });
})() })();

11
src/translation.js
View File

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