DTux/dtux__avion-poeme
Archived
1
0
Fork 0
Code

Compare commits

base: 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
..
compare: 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

No commits in common. "80af7b029a5d20808e55e13d928a1e6e96055fe0" and "0a87a3a0cbec519d6901d24b580bee616f77619e" have entirely different histories.
80af7b029a ... 0a87a3a0cb

12 changed files with 677 additions and 55014 deletions
Show Stats Expand all files Collapse all files

40
cron.php
View File

@ -1,6 +1,5 @@
<?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';
@ -10,10 +9,11 @@
$db = new db(); $db = new db();
//test(); //test();
$_SERVER["PHP_AUTH_USER"] = "cron"; $_SERVER["PHP_AUTH_USER"] = "cron";
//peripetieDatee(); // désactivée pour l'instant //peripetieDatee();
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['expeMail'], $result['destMail'], $objetMail, $mailText, false); envoiMail( $result['destMail'], $objetMail, $mailText, false);
sleep(1); sleep(1);
envoiMail("contact@avion-poe.me", $result['expeMail'], $objetMail, $mailText, true); envoiMail( $result['expeMail'], $objetMail, $mailText, true);
sleep(1); sleep(1);
} }
} }
@ -62,7 +62,6 @@
$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;
@ -78,15 +77,11 @@
$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
$startTime = date("c", $db->startTime); $dateExpe = new DateTime("@$db->startTime");
$deliveryTime = date("c", $db->deliveryTime); $dateDest = new DateTime("@$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; //TODO calculer d'après les données de la péripétie(voir table péripétie de la base de données) $addDate = $numericInterval * 15/100;
$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'] . "'" ;
@ -101,16 +96,17 @@
//$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("contact@avion-poe.me", $db->expeMail, $objetMail, $mailText); $r = envoiMail( $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->expeMail, $db->destMail, $objetMail, $mailText); $s = envoiMail( $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'] ."'";
@ -150,7 +146,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("contact@avion-poe.me", $avion['expeMail'], $objetMail["text"], $mailText); $r = envoiMail( $avion['expeMail'], $objetMail["text"], $mailText);
//envoi notification arrivée destinataire //envoi notification arrivée destinataire
$index = "Notification_Arrivee_Destinataire"; $index = "Notification_Arrivee_Destinataire";
@ -163,14 +159,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(3); sleep(1);
$s = envoiMail($avion['expeMail'], $avion['destMail'], $objetMail["text"], $mailText, $html); $s = envoiMail( $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(3); sleep(1);
} }
} }
@ -182,14 +178,13 @@
$courriels = $db->result->fetch_all(MYSQLI_ASSOC); $courriels = $db->result->fetch_all(MYSQLI_ASSOC);
foreach( $courriels as $courriel) foreach( $courriels as $courriel)
{ {
//TODO changer l'expéditeur, doit être l'expéditeur de l'avion-poême. $r = envoiMail( $courriel['destinataire'], $courriel['objet'], $courriel['message'], $courriel['html']);
$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(3); sleep(1);
} }
} }
@ -218,4 +213,3 @@
} }
} }
$db->close(); $db->close();
?>

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

File diff suppressed because one or more lines are too long

10
include/config.inc.php
View File

@ -20,18 +20,8 @@ $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,5 +1,6 @@
<?php <?php
if (!isset($site)) { if ( !isset($site) )
{
require_once( "config.inc.php" ); require_once( "config.inc.php" );
header( 'Location: ' . $accueil ); header( 'Location: ' . $accueil );
} }
@ -7,6 +8,7 @@ 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
@ -57,9 +59,11 @@ 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;
} }
@ -94,7 +98,8 @@ 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;
} }
@ -128,6 +133,7 @@ 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)
@ -164,7 +170,7 @@ class db
function getCurrentPlanes() function getCurrentPlanes()
{ {
$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()"; $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()";
$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);
@ -196,18 +202,10 @@ class db
function savePeripetie() function savePeripetie()
{ {
$query = "INSERT INTO avionPeripetie ('idAvion', 'idPeripetie', 'date', 'expeMail'), VALUES ("; $query = "INSERT INTO avionPeripetie VALUES ('0','";
$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) . "),"; $query .= "FROM_UNIXTIME(" . $this->protect($this->datePeripetie) . "), '0')";
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) . "', '";
@ -219,7 +217,8 @@ 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,6 +2,7 @@
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 );
@ -19,7 +20,7 @@ function courrielEnvoi( $db )
$mailText = $result['text']; $mailText = $result['text'];
$html = $result['html']; $html = $result['html'];
saveMail( $db, "contact@avion-poe.me", $db->expeMail, $objetMail, $mailText, $html); saveMail( $db, $db->expeMail, $objetMail, $mailText, $html);
//log_write(print_r($db,true)); //log_write(print_r($db,true));
@ -46,21 +47,19 @@ function courrielEnvoi( $db )
{ {
$message = "<html><head></head>\n<body>" . $message . "</body></html>"; $message = "<html><head></head>\n<body>" . $message . "</body></html>";
} }
saveMail( $db, $db->expeMail, $db->destMail, $objetMail, $mailText, $html); saveMail( $db, $db->destMail, $objetMail, $mailText, $html);
} }
function saveMail( $db, $expediteur, $destinataire, $objet, $text, $html=false) function saveMail( $db, $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($expediteur, $destinataire, $sujet, $text, $html=false, $cc='', $bcc='') function envoiMail($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');
@ -87,8 +86,7 @@ function envoiMail($expediteur, $destinataire, $sujet, $text, $html=false, $cc='
$message->setBody($text); $message->setBody($text);
//add date header //add date header
$headers = $message->getHeaders(); $headers = $message->getHeaders();
//$headers->addDateHeader('Date', new DateTimeImmutable('3 days ago')); $headers->addDateHeader('Your-Header', new DateTimeImmutable('3 days ago'));
$headers->addPathHeader('Return-Path', $expediteur);
if (!$mailer->send($message, $failures)) if (!$mailer->send($message, $failures))
{ {
echo "Failures:"; echo "Failures:";
@ -96,11 +94,6 @@ function envoiMail($expediteur, $destinataire, $sujet, $text, $html=false, $cc='
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,14 +133,13 @@
</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,5 +33,4 @@
<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='Lancer un avion-poème 0/100'> <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>&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>

143
src/anthology.js
View File

@ -1,136 +1,79 @@
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 >= 365) { else if (days >= 30 && days < 365){
if(months>1){
return ""+months+" "+dictionnary.mois_pluriel
}
else{
return ""+months+" "+dictionnary.mois
}
}
else if (days >= 365){
if(years>1){ if(years>1){
return "" + years + " " + dictionnary.ans; return ""+years+" "+dictionnary.ans
} else { }
return "" + years + " " + dictionnary.an; else{
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() { function displayAnthology(){ // clean and display first page
// clean and display first page $("#anthologyItems").html('')
$("#anthologyItems").html(""); nPagesLoaded = 1
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") { if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese
momentLocale = "zh-cn"; moment.locale(momentLocale)
} //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") { if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese
momentLocale = "zh-cn"; moment.locale(momentLocale)
} //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") { if (lang == 'ar'){ // arabic : rtl + add <br>
// arabic : rtl + add <br>
$("#anthologyItems").append( $("#anthologyItems").append(
'<small style="float:right">' + '<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>'
dictionnary.origine + )
": <b>" + }
results.startName + else{
"</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>" + '<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>'
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,56 +337,6 @@ 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;
}

673
src/map.js
View File

@ -1,163 +1,141 @@
var loader = new PIXI.Loader(); var loader = new PIXI.Loader();
var colors = [ var colors = ['66FF00','FF5555','FFE419','2A7FFF','BC5FD3','C8AB37','ECECEC','FF6600'];
"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( $("#buttonNewPlane").val("Lancer un avion-poème "+Number(result.nAvion)+"/100")
"Lancer un avion-poème " + Number(result.nAvion) + "/100"
);
if (nbPlane > 99){ if (nbPlane > 99){
$("#buttonNewPlane").prop("disabled",true); $("#buttonNewPlane").prop("disabled",true);
} else {
} }
translateUI(lang); else{
});
}
translateUI(lang)
})
//background //background
L.tileLayer( L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", attribution: '',
{
attribution: "",
//minZoom:8, //minZoom:8,
maxZoom: 16, maxZoom: 16,
} }).addTo(map);
).addTo(map);
//adding terminator //adding terminator
var terminator = L.terminator().addTo(map); var terminator = L.terminator()
.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([ var equator = turf.lineString([[-1000, 0], [1000, 0]])
[-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 = var lonCenter = ((intersects.features[1].geometry.coordinates[0])+(intersects.features[2].geometry.coordinates[0]))/2
(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( L.tileLayer('https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_SNPP_CorrectedReflectance_TrueColor/default/'+twoDaysAgo+'/GoogleMapsCompatible_Level9/{z}/{y}/{x}.jpg', {
"https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_SNPP_CorrectedReflectance_TrueColor/default/" + attribution: '',
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( svgFilter = document.createElementNS('http://www.w3.org/2000/svg', 'filter'),
"http://www.w3.org/2000/svg", svgBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
"filter" svgFilter.setAttribute('id', 'blur');
), svgFilter.setAttribute('x', '-100%');
svgBlur = document.createElementNS( svgFilter.setAttribute('y', '-100%');
"http://www.w3.org/2000/svg", svgFilter.setAttribute('width', '500%');
"feGaussianBlur" svgFilter.setAttribute('height', '500%');
); 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;
@ -170,90 +148,73 @@ 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( var line = turf.greatCircle(turf.point([Number(data.startLon),Number(data.startLat)]), turf.point([Number(data.destLon),Number(data.destLat)]),{offset:20})
turf.point([Number(data.startLon), Number(data.startLat)]),
turf.point([Number(data.destLon), Number(data.destLat)]),
{ offset: 20 }
);
var lineDistance = turf.length(line); var lineDistance = turf.length(line);
var dateStart = moment(data.startTime); var dateStart = moment(data.startTime)
var dateEnd = moment(data.deliveryTime); var dateEnd = moment(data.deliveryTime)
var dateNow = moment(new Date()); var dateNow = moment(new Date())
var totalSeconds = dateEnd.diff(dateStart, "seconds"); var totalSeconds = dateEnd.diff(dateStart,'seconds');
var travelledSeconds = dateNow.diff(dateStart, "seconds"); var travelledSeconds = dateNow.diff(dateStart,'seconds')
var travelRatio = travelledSeconds / totalSeconds; var travelRatio = travelledSeconds/totalSeconds
var travelledDistance = lineDistance * travelRatio; // getting the travelled distance var travelledDistance = lineDistance*travelRatio // getting the travelled distance
var segment; var segment;
if (line.geometry.type == "MultiLineString") { if(line.geometry.type == "MultiLineString"){ // if the arc is cutting the dateline, well it's a mess.
// 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 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 l2 = turf.lineString(line.geometry.coordinates[1]); // creating a line from second segment var l1Length = turf.length(l1) // calculating length of first 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
if (travelledDistance < l1Length) { segment = l1
// if the travelled distance is inferior to segment 1 line, the point is somewhere in it data.position = 1
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 { else{
segment = line; segment = l2 // otherwise on segment 2
data.position = 0; data.position = 2
travelledDistance = Number(travelledDistance)-Number(l1Length) // we remove the travel distance done in s1
} }
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) { else{
currentPosition.geometry.coordinates[0] = segment = line
currentPosition.geometry.coordinates[0] - Number(360); 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 //calculating bearing based on two points, one just before and one just after
var positionBefore = turf.along( var positionBefore = turf.along(segment, (travelledDistance)-0.00001,{units: 'kilometers'})
segment, var positionAfter = turf.along(segment, (travelledDistance)+0.00001,{units: 'kilometers'})
travelledDistance - 0.00001, var rotation = turf.bearing(
{ units: "kilometers" } positionBefore,
positionAfter
); );
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([ var markerCoords = project([currentPosition.geometry.coordinates[1],currentPosition.geometry.coordinates[0]]);
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;
@ -263,96 +224,72 @@ 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( marker.scale.set((1/(utils.getScale(map.getZoom())*20))+(Math.pow(map.getZoom(),2)/100*2*(1/(utils.getScale(map.getZoom())*20))))
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 { }
shadow.visible = false; else{
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) { if (map.getZoom() > 12){ // we animate only starting zoom 12
// we animate only starting zoom 12 var bounds = map.getBounds()
var bounds = map.getBounds(); var bbox = [bounds._southWest.lng, bounds._southWest.lat, bounds._northEast.lng, bounds._northEast.lat];
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( var planeInExtent = turf.booleanWithin(marker.data.currentPosition, extentPoly);
marker.data.currentPosition, if(planeInExtent == true){ // we animate only the planes in map extent
extentPoly var dateNow = moment(new Date())
); var totalSeconds = dateEnd.diff(dateStart,'seconds');
if (planeInExtent == true) { var travelledSeconds = dateNow.diff(dateStart,'seconds')
// we animate only the planes in map extent var travelRatio = travelledSeconds/totalSeconds
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(line.geometry.type == "MultiLineString"){ // if the arc is cutting the dateline
// if the arc is cutting the dateline var l1 = turf.lineString(line.geometry.coordinates[0]) // creating a line from first segment
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 l2 = turf.lineString(line.geometry.coordinates[1]); // creating a line from second segment var l1Length = turf.length(l1) // calculating length of first 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
if (travelledDistance < l1Length) { segment = l1
// if the travelled distance is inferior to segment 1 line, the point is somewhere in it marker.data.position = 1 // we store it, usefull for popup event
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 = line; segment = l2 // otherwise on segment 2
marker.data.position = 2
travelledDistance = Number(travelledDistance)-Number(l1Length) // we remove the travel distance done in s1
} }
var currentPosition = turf.along(segment, travelledDistance, { }
units: "kilometers", else{
}); segment = line
}
var currentPosition = turf.along(segment, travelledDistance,{units: 'kilometers'})
//troubleshooting extreme lons //troubleshooting extreme lons
if (currentPosition.geometry.coordinates[0] < -180) { if(currentPosition.geometry.coordinates[0] < -180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]+360}
currentPosition.geometry.coordinates[0] = if(currentPosition.geometry.coordinates[0] > 180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]-Number(360)}
currentPosition.geometry.coordinates[0] + 360; marker.data.currentPosition = currentPosition
} 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;
@ -364,118 +301,40 @@ 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 rasterizeHTML.drawHTML(html, canvas1,{zoom:0.7}).then(function success(renderResult) {
.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( $("#front").attr('src',document.getElementById("blankCanvas2").toDataURL())
"src", $("#canvas3d").css('display','block')
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([ var start = turf.point([Number(target.data.startLon),Number(target.data.startLat)])
Number(target.data.startLon), var current = target.data.currentPosition
Number(target.data.startLat), var end = turf.point([Number(target.data.destLon),Number(target.data.destLat)])
]);
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);
@ -487,197 +346,122 @@ 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] = c.geometry.coordinates[i][0] - Number(360)
c.geometry.coordinates[i][0] - Number(360); }
} else { else{
c.geometry.coordinates[i][0] = c.geometry.coordinates[i][0] = c.geometry.coordinates[i][0] + Number(360)
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( var sliced2 = turf.lineSlice(current, turf.point(l1.geometry.coordinates[l1.geometry.coordinates.length-1]), l1);
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( }
turf.point(l2.geometry.coordinates[0]), else if(target.data.position == 2){
current, var sliced1 = turf.lineSlice(turf.point(l2.geometry.coordinates[0]), current, l2);
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: html: '<div class="pulse-icon-anim" style="border-color:#'+target.data.color+'"></div>',
'<div class="pulse-icon-anim" style="border-color:#' + iconSize: [22,22]
target.data.color +
'"></div>',
iconSize: [22, 22],
}); });
var endCoordo = [ var endCoordo = [Number(target.data.destLat),Number(target.data.destLon)]
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(travel.geometry.type == "MultiLineString"){ //if arc cross dateline, we multiply the marker
//if arc cross dateline, we multiply the marker pulsatingMarker.addLayer(new L.marker([endCoordo[0],endCoordo[1]-Number(360)], {icon: pulseIcon}));
pulsatingMarker.addLayer( pulsatingMarker.addLayer(new L.marker([endCoordo[0],endCoordo[1]+Number(360)], {icon: pulseIcon}));
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 = [ var startCoordo = [Number(target.data.startLat),Number(target.data.startLon)]
Number(target.data.startLat), originMarker.addLayer(new L.circleMarker(startCoordo, {radius: 6,opacity:0.7, weight:2,color:'#'+target.data.color}));
Number(target.data.startLon), 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( originMarker.addLayer(new L.circleMarker([startCoordo[0],startCoordo[1]+Number(360)], {radius: 6,opacity:0.7,color:'#'+target.data.color}));
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") { if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese
momentLocale = "zh-cn"; moment.locale(momentLocale)
} //troubleshot for chinese
moment.locale(momentLocale);
target.popup.setLatLng([ target.popup.setLatLng([target.data.currentPosition.geometry.coordinates[1],target.data.currentPosition.geometry.coordinates[0]])
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( 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>')
'<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( 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>')
'<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( interaction.mapPositionToPoint(pixiPoint, pointerEvent.clientX, pointerEvent.clientY);
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( interaction.mapPositionToPoint(pixiPoint, pointerEvent.clientX, pointerEvent.clientY);
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;
@ -687,17 +471,22 @@ 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,7 +104,13 @@ 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);
@ -133,6 +139,11 @@ 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);