DTux/dtux__avion-poeme
Archived
1
0
Fork 0
Code

update repo

Browse Source
This commit is contained in:
mberard 2021-12-14 22:33:54 +01:00
parent 0a87a3a0cb
commit bff6df4a35
8 changed files with 54919 additions and 620 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

66
include/db.class.php
View File

@ -1,8 +1,7 @@
<?php <?php
if ( !isset($site) ) if (!isset($site)) {
{ require_once("config.inc.php");
require_once( "config.inc.php" ); header('Location: ' . $accueil);
header( 'Location: ' . $accueil );
} }
require_once "config.inc.php"; require_once "config.inc.php";
@ -59,12 +58,10 @@ 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;
} }
} }
@ -78,30 +75,29 @@ class db
$this->connect = 0; $this->connect = 0;
} }
function protect( $string ) function protect($string)
{ {
return $this->connect->real_escape_string( $string ); return $this->connect->real_escape_string($string);
} }
function query( $string ) function query($string)
{ {
//log_write( $string ); //log_write( $string );
if ( empty( $this->connect ) ) $this->open(); if (empty($this->connect)) $this->open();
$this->result = $this->connect->query( $string ) ; $this->result = $this->connect->query($string);
if ( $this->connect->errno > 0 ) log_error( "Échec de la commande query => " . $this->connect->error . "<br />" . __file__ . ' ligne ' . __line__ . "\n" . $string, true, false); if ($this->connect->errno > 0) log_error("Échec de la commande query => " . $this->connect->error . "<br />" . __file__ . ' ligne ' . __line__ . "\n" . $string, true, false);
//print_r( $this ); //print_r( $this );
} }
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;
} }
$query = "INSERT INTO avionpoeme VALUES ('0','"; $query = "INSERT INTO avionpoeme VALUES ('0','";
$query .= $this->protect($this->message) . "', '"; $query .= $this->protect($this->message) . "', '";
@ -128,18 +124,17 @@ class db
$this->query($query); $this->query($query);
$this->uid = $this->connect->insert_id; $this->uid = $this->connect->insert_id;
echo "{'uid':'" . $this->uid . "'}"; echo "{'uid':'" . $this->uid . "'}";
$this->startTimeRFC822 = formatteDate( $this->expeLang, $this->startTime, $this->startTZ); $this->startTimeRFC822 = formatteDate($this->expeLang, $this->startTime, $this->startTZ);
$this->deliveryTimeRFC822 = formatteDate( $this->destLang, $this->deliveryTime, $this->deliveryTZ ); $this->deliveryTimeRFC822 = formatteDate($this->destLang, $this->deliveryTime, $this->deliveryTZ);
$this->urlAvion = $base_url . "/?avionpoeme=" . $this->uid; $this->urlAvion = $base_url . "/?avionpoeme=" . $this->uid;
$this->newPeripetie(); $this->newPeripetie();
courrielEnvoi($this); courrielEnvoi($this);
} }
function getPlane($uid) function getPlane($uid)
{ {
global $base_url; global $base_url;
$query = "SELECT idAvion, message, expeMail, expeKnown, expeLang, destLang, startLat, startLon, startName, UNIX_TIMESTAMP(startTime) as startTime, startTZ, destMail, destLat, destLon, destName, color, UNIX_TIMESTAMP(deliveryTime) as deliveryTime, deliveryTZ, UNIX_TIMESTAMP(deliveryTimeServer) as deliveryTimeServer, deliveryMethod, public FROM avionpoeme WHERE idAvion='" . $uid ."'"; $query = "SELECT idAvion, message, expeMail, expeKnown, expeLang, destLang, startLat, startLon, startName, UNIX_TIMESTAMP(startTime) as startTime, startTZ, destMail, destLat, destLon, destName, color, UNIX_TIMESTAMP(deliveryTime) as deliveryTime, deliveryTZ, UNIX_TIMESTAMP(deliveryTimeServer) as deliveryTimeServer, deliveryMethod, public FROM avionpoeme WHERE idAvion='" . $uid . "'";
$this->query($query); $this->query($query);
$plane = $this->result->fetch_array(MYSQLI_ASSOC); $plane = $this->result->fetch_array(MYSQLI_ASSOC);
$this->message = $plane["message"]; $this->message = $plane["message"];
@ -152,7 +147,7 @@ class db
$this->startName = $plane["startName"]; $this->startName = $plane["startName"];
$this->startTime = $plane["startTime"]; $this->startTime = $plane["startTime"];
$this->startTZ = $plane["startTZ"]; $this->startTZ = $plane["startTZ"];
$this->startTimeRFC822 = formatteDate( $this->expeLang, $this->startTime, $this->startTZ); $this->startTimeRFC822 = formatteDate($this->expeLang, $this->startTime, $this->startTZ);
$this->destMail = $plane["destMail"]; $this->destMail = $plane["destMail"];
$this->destLat = $plane["destLat"]; $this->destLat = $plane["destLat"];
$this->destLon = $plane["destLon"]; $this->destLon = $plane["destLon"];
@ -160,7 +155,7 @@ class db
$this->color = $plane["color"]; $this->color = $plane["color"];
$this->deliveryTime = $plane["deliveryTime"]; $this->deliveryTime = $plane["deliveryTime"];
$this->deliveryTZ = $plane["deliveryTZ"]; $this->deliveryTZ = $plane["deliveryTZ"];
$this->deliveryTimeRFC822 = formatteDate( $this->destLang, $this->deliveryTime, $this->deliveryTZ ); $this->deliveryTimeRFC822 = formatteDate($this->destLang, $this->deliveryTime, $this->deliveryTZ);
$this->deliveryTimeServer = $plane["deliveryTimeServer"]; $this->deliveryTimeServer = $plane["deliveryTimeServer"];
$this->deliveryMethod = $plane["deliveryMethod"]; $this->deliveryMethod = $plane["deliveryMethod"];
$this->public = $plane["public"]; $this->public = $plane["public"];
@ -170,7 +165,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);
@ -178,20 +173,20 @@ class db
return $planes; return $planes;
} }
function getAnthology($page=0) function getAnthology($page = 0)
{ {
$query = "SELECT COUNT(*) as count FROM avionpoeme WHERE deliveryTimeServer<NOW() AND public='1'"; $query = "SELECT COUNT(*) as count FROM avionpoeme WHERE deliveryTimeServer<NOW() AND public='1'";
$this->query($query); $this->query($query);
$result = $this->result->fetch_assoc(); $result = $this->result->fetch_assoc();
$n_pages = floor(($result["count"] / RESULTS_BY_PAGE))+1; $n_pages = floor(($result["count"] / RESULTS_BY_PAGE)) + 1;
if ($page <= 0) //renvoie le nombre de ligne d'anthologie if ($page <= 0) //renvoie le nombre de ligne d'anthologie
{ {
print '{"nAnthology":"' . $result["count"] . '","nPages":"' . $n_pages .'"}'; print '{"nAnthology":"' . $result["count"] . '","nPages":"' . $n_pages . '"}';
return $n_pages; return $n_pages;
}else //renvoie les lignes d'anthologie } else //renvoie les lignes d'anthologie
{ {
if ($page > $n_pages) $page=$n_pages; if ($page > $n_pages) $page = $n_pages;
$query = "SELECT UNIX_TIMESTAMP(startTime) as startTime, startTZ, startName, message, UNIX_TIMESTAMP(deliveryTime) as deliveryTime , deliveryTZ, destName FROM avionpoeme WHERE deliveryTimeServer<NOW() AND public='1' ORDER BY deliveryTime DESC LIMIT " . ($page-1)*RESULTS_BY_PAGE . "," . RESULTS_BY_PAGE; $query = "SELECT UNIX_TIMESTAMP(startTime) as startTime, startTZ, startName, message, UNIX_TIMESTAMP(deliveryTime) as deliveryTime , deliveryTZ, destName FROM avionpoeme WHERE deliveryTimeServer<NOW() AND public='1' ORDER BY deliveryTime DESC LIMIT " . ($page - 1) * RESULTS_BY_PAGE . "," . RESULTS_BY_PAGE;
$this->query($query); $this->query($query);
$planes = $this->result->fetch_all(MYSQLI_ASSOC); $planes = $this->result->fetch_all(MYSQLI_ASSOC);
print json_encode($planes, JSON_FORCE_OBJECT); print json_encode($planes, JSON_FORCE_OBJECT);
@ -217,10 +212,9 @@ 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
{ {
log_write("newPeripetie"); log_write("newPeripetie");
$this->datePeripetie = mt_rand($this->startTime, $this->deliveryTime); //ajustement de l'effet $this->datePeripetie = mt_rand($this->startTime, $this->deliveryTime); //ajustement de l'effet

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>

167
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) {
if (months > 1) {
return "" + months + " " + dictionnary.mois_pluriel;
} else {
return "" + months + " " + dictionnary.mois;
} }
else if (days >= 30 && days < 365){ } else if (days >= 365) {
if(months>1){ if (years > 1) {
return ""+months+" "+dictionnary.mois_pluriel return "" + years + " " + dictionnary.ans;
} } else {
else{ return "" + years + " " + dictionnary.an;
return ""+months+" "+dictionnary.mois
}
}
else if (days >= 365){
if(years>1){
return ""+years+" "+dictionnary.ans
}
else{
return ""+years+" "+dictionnary.an
} }
} }
} }
//load //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("");
$.post( "getAnthology.php?page=1", function(result) { nPagesLoaded = 1;
results = $.parseJSON(result) $.post("getAnthology.php?page=1", function (result) {
results = $.parseJSON(result);
var momentLocale = lang; var momentLocale = lang;
if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese if (momentLocale == "zh") {
moment.locale(momentLocale) momentLocale = "zh-cn";
for (var i in results){ } //troubleshot for chinese
addAnthologyLine(results[i]) moment.locale(momentLocale);
for (var i in results) {
addAnthologyLine(results[i]);
} }
}) });
} }
$( "#anthology" ).scroll(function() { $("#anthology").scroll(function () {
if($("#anthology").scrollTop() + 700 > $("#anthologyItems").height()){ if ($("#anthology").scrollTop() + 700 > $("#anthologyItems").height()) {
if (nPagesLoaded < nPages){ if (nPagesLoaded < nPages) {
nPagesLoaded++ nPagesLoaded++;
console.log('Loading anthology page '+nPagesLoaded+'/'+nPages) console.log("Loading anthology page " + nPagesLoaded + "/" + nPages);
$.post( "getAnthology.php?page="+nPagesLoaded+"", function(result) { $.post("getAnthology.php?page=" + nPagesLoaded + "", function (result) {
results = $.parseJSON(result) results = $.parseJSON(result);
var momentLocale = lang; var momentLocale = lang;
if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese if (momentLocale == "zh") {
moment.locale(momentLocale) momentLocale = "zh-cn";
for (var i in results){ } //troubleshot for chinese
addAnthologyLine(results[i]) moment.locale(momentLocale);
for (var i in results) {
addAnthologyLine(results[i]);
} }
}) });
} }
} }
}); });
function addAnthologyLine(results){ function addAnthologyLine(results) {
if (lang == 'ar'){ // arabic : rtl + add <br> if (lang == "ar") {
// arabic : rtl + add <br>
$("#anthologyItems").append( $("#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);
});
});

43
src/app.css
View File

@ -337,6 +337,49 @@ 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;
}
#downloadPlaneMessage:before {
content: "\f019";
font-family: "Font Awesome 5 Pro";
color: var(--primary);
margin-right: 10px;
}

756
src/map.js
View File

@ -1,146 +1,168 @@
var loader = new PIXI.Loader(); var loader = new PIXI.Loader();
var colors = ['66FF00','FF5555','FFE419','2A7FFF','BC5FD3','C8AB37','ECECEC','FF6600']; var colors = [
for (var i in colors){ "66FF00",
loader.add('marker'+colors[i]+'', 'src/img/plane-'+colors[i]+'.png'); "FF5555",
"FFE419",
"2A7FFF",
"BC5FD3",
"C8AB37",
"ECECEC",
"FF6600",
];
for (var i in colors) {
loader.add("marker" + colors[i] + "", "src/img/plane-" + colors[i] + ".png");
} }
//global variable //global variable
var nbPlane = 0 var nbPlane = 0;
loader.add('shadow', 'src/img/shadow.png');
loader.load(function(loader, resources) {
loader.add("shadow", "src/img/shadow.png");
loader.load(function (loader, resources) {
var pixiContainer = new PIXI.Container(); var 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(
if (nbPlane > 99){ "Lancer un avion-poème " + Number(result.nAvion) + "/100"
$("#buttonNewPlane").prop("disabled",true); );
if (nbPlane > 99) {
$("#buttonNewPlane").prop("disabled", true);
} else {
} }
else{ translateUI(lang);
});
}
translateUI(lang)
})
//background //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;
var pixiOverlay = L.pixiOverlay(function(utils, event) { var pixiOverlay = L.pixiOverlay(function (utils, event) {
var zoom = utils.getMap().getZoom(); var zoom = utils.getMap().getZoom();
var container = utils.getContainer(); var container = utils.getContainer();
var renderer = utils.getRenderer(); var renderer = utils.getRenderer();
@ -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(
if(map.getZoom() == 16){ 1 / (utils.getScale(map.getZoom()) * 20) +
shadow.visible = true (Math.pow(map.getZoom(), 2) / 100) *
} 2 *
else{ (1 / (utils.getScale(map.getZoom()) * 20))
shadow.visible = false );
if (map.getZoom() == 16) {
shadow.visible = true;
} else {
shadow.visible = false;
} }
}); });
//animating moving plane //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,167 +364,319 @@ 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");
$(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);
var sliced2 = turf.lineSlice(current, end, travel); var sliced2 = turf.lineSlice(current, end, travel);
arcTravelled.addData(sliced1); arcTravelled.addData(sliced1);
arcTravel.addData(sliced2); arcTravel.addData(sliced2);
} }
// we create a copy of lines crossing the datetime // we create a copy of lines crossing the datetime
function createCopy(c){ function createCopy(c) {
for (var i in c.geometry.coordinates){ for (var i in c.geometry.coordinates) {
if (c.geometry.coordinates[i][0] > 0){ if (c.geometry.coordinates[i][0] > 0) {
c.geometry.coordinates[i][0] = c.geometry.coordinates[i][0] - Number(360) c.geometry.coordinates[i][0] =
} c.geometry.coordinates[i][0] - Number(360);
else{ } else {
c.geometry.coordinates[i][0] = c.geometry.coordinates[i][0] + Number(360) c.geometry.coordinates[i][0] =
c.geometry.coordinates[i][0] + Number(360);
} }
} }
return c return c;
} }
//for multilinetrings //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 = [
pulsatingMarker.addLayer(new L.marker(endCoordo, {icon: pulseIcon})); Number(target.data.destLat),
if(travel.geometry.type == "MultiLineString"){ //if arc cross dateline, we multiply the marker Number(target.data.destLon),
pulsatingMarker.addLayer(new L.marker([endCoordo[0],endCoordo[1]-Number(360)], {icon: pulseIcon})); ];
pulsatingMarker.addLayer(new L.marker([endCoordo[0],endCoordo[1]+Number(360)], {icon: pulseIcon})); pulsatingMarker.addLayer(new L.marker(endCoordo, { icon: pulseIcon }));
if (travel.geometry.type == "MultiLineString") {
//if arc cross dateline, we multiply the marker
pulsatingMarker.addLayer(
new L.marker([endCoordo[0], endCoordo[1] - Number(360)], {
icon: pulseIcon,
})
);
pulsatingMarker.addLayer(
new L.marker([endCoordo[0], endCoordo[1] + Number(360)], {
icon: pulseIcon,
})
);
} }
//adding static marker on origin //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 +686,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);