Merge branch 'master' of git.labolyon.fr:DTux/avion-poeme
This commit is contained in:
Daniel Tartavel
commit
ecf570ee87
54004
dist/html2pdf/html2pdf.bundle.min.js
vendored
Normal file
54004
dist/html2pdf/html2pdf.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,8 +1,7 @@
|
||||
<?php
|
||||
if ( !isset($site) )
|
||||
{
|
||||
require_once( "config.inc.php" );
|
||||
header( 'Location: ' . $accueil );
|
||||
if (!isset($site)) {
|
||||
require_once("config.inc.php");
|
||||
header('Location: ' . $accueil);
|
||||
}
|
||||
|
||||
require_once "config.inc.php";
|
||||
@ -59,12 +58,10 @@ class db
|
||||
|
||||
function open()
|
||||
{
|
||||
if ( !$this->connect )
|
||||
{
|
||||
$this->connect = new mysqli( $this->server, $this->user, $this->passwd, $this->database );
|
||||
if ( $this->connect->connect_errno )
|
||||
{
|
||||
log_error( "Échec de la connexion : => " . $this->connect->connect_error . "<br />" . __file__ . ' ligne ' . __line__, false,false);
|
||||
if (!$this->connect) {
|
||||
$this->connect = new mysqli($this->server, $this->user, $this->passwd, $this->database);
|
||||
if ($this->connect->connect_errno) {
|
||||
log_error("Échec de la connexion : => " . $this->connect->connect_error . "<br />" . __file__ . ' ligne ' . __line__, false, false);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@ -78,30 +75,29 @@ class db
|
||||
$this->connect = 0;
|
||||
}
|
||||
|
||||
function protect( $string )
|
||||
function protect($string)
|
||||
{
|
||||
return $this->connect->real_escape_string( $string );
|
||||
return $this->connect->real_escape_string($string);
|
||||
}
|
||||
|
||||
function query( $string )
|
||||
function query($string)
|
||||
{
|
||||
|
||||
//log_write( $string );
|
||||
if ( empty( $this->connect ) ) $this->open();
|
||||
if (empty($this->connect)) $this->open();
|
||||
|
||||
$this->result = $this->connect->query( $string ) ;
|
||||
$this->result = $this->connect->query($string);
|
||||
|
||||
if ( $this->connect->errno > 0 ) log_error( "Échec de la commande query => " . $this->connect->error . "<br />" . __file__ . ' ligne ' . __line__ . "\n" . $string, true, false);
|
||||
if ($this->connect->errno > 0) log_error("Échec de la commande query => " . $this->connect->error . "<br />" . __file__ . ' ligne ' . __line__ . "\n" . $string, true, false);
|
||||
//print_r( $this );
|
||||
}
|
||||
|
||||
function newPlane() //return 0 on error
|
||||
{
|
||||
global $base_url;
|
||||
if (round($this->startLat,3,PHP_ROUND_HALF_DOWN)==round($this->destLat,3,PHP_ROUND_HALF_DOWN) && round($this->startLon,3,PHP_ROUND_HALF_DOWN)==round($this->destLon,3,PHP_ROUND_HALF_DOWN))
|
||||
{
|
||||
$this->destLon+=0.001;
|
||||
$this->destLat+=0.001;
|
||||
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->destLat += 0.001;
|
||||
}
|
||||
$query = "INSERT INTO avionpoeme VALUES ('0','";
|
||||
$query .= $this->protect($this->message) . "', '";
|
||||
@ -128,8 +124,8 @@ class db
|
||||
$this->query($query);
|
||||
$this->uid = $this->connect->insert_id;
|
||||
echo "{'uid':'" . $this->uid . "'}";
|
||||
$this->startTimeRFC822 = formatteDate( $this->expeLang, $this->startTime, $this->startTZ);
|
||||
$this->deliveryTimeRFC822 = formatteDate( $this->destLang, $this->deliveryTime, $this->deliveryTZ );
|
||||
$this->startTimeRFC822 = formatteDate($this->expeLang, $this->startTime, $this->startTZ);
|
||||
$this->deliveryTimeRFC822 = formatteDate($this->destLang, $this->deliveryTime, $this->deliveryTZ);
|
||||
$this->urlAvion = $base_url . "/?avionpoeme=" . $this->uid;
|
||||
$this->newPeripetie();
|
||||
courrielEnvoi($this);
|
||||
@ -138,7 +134,7 @@ class db
|
||||
function getPlane($uid)
|
||||
{
|
||||
global $base_url;
|
||||
$query = "SELECT idAvion, message, expeMail, expeKnown, expeLang, destLang, startLat, startLon, startName, UNIX_TIMESTAMP(startTime) as startTime, startTZ, destMail, destLat, destLon, destName, color, UNIX_TIMESTAMP(deliveryTime) as deliveryTime, deliveryTZ, UNIX_TIMESTAMP(deliveryTimeServer) as deliveryTimeServer, deliveryMethod, public FROM avionpoeme WHERE idAvion='" . $uid ."'";
|
||||
$query = "SELECT idAvion, message, expeMail, expeKnown, expeLang, destLang, startLat, startLon, startName, UNIX_TIMESTAMP(startTime) as startTime, startTZ, destMail, destLat, destLon, destName, color, UNIX_TIMESTAMP(deliveryTime) as deliveryTime, deliveryTZ, UNIX_TIMESTAMP(deliveryTimeServer) as deliveryTimeServer, deliveryMethod, public FROM avionpoeme WHERE idAvion='" . $uid . "'";
|
||||
$this->query($query);
|
||||
$plane = $this->result->fetch_array(MYSQLI_ASSOC);
|
||||
$this->message = $plane["message"];
|
||||
@ -151,7 +147,7 @@ class db
|
||||
$this->startName = $plane["startName"];
|
||||
$this->startTime = $plane["startTime"];
|
||||
$this->startTZ = $plane["startTZ"];
|
||||
$this->startTimeRFC822 = formatteDate( $this->expeLang, $this->startTime, $this->startTZ);
|
||||
$this->startTimeRFC822 = formatteDate($this->expeLang, $this->startTime, $this->startTZ);
|
||||
$this->destMail = $plane["destMail"];
|
||||
$this->destLat = $plane["destLat"];
|
||||
$this->destLon = $plane["destLon"];
|
||||
@ -159,7 +155,7 @@ class db
|
||||
$this->color = $plane["color"];
|
||||
$this->deliveryTime = $plane["deliveryTime"];
|
||||
$this->deliveryTZ = $plane["deliveryTZ"];
|
||||
$this->deliveryTimeRFC822 = formatteDate( $this->destLang, $this->deliveryTime, $this->deliveryTZ );
|
||||
$this->deliveryTimeRFC822 = formatteDate($this->destLang, $this->deliveryTime, $this->deliveryTZ);
|
||||
$this->deliveryTimeServer = $plane["deliveryTimeServer"];
|
||||
$this->deliveryMethod = $plane["deliveryMethod"];
|
||||
$this->public = $plane["public"];
|
||||
@ -169,7 +165,7 @@ class db
|
||||
|
||||
function getCurrentPlanes()
|
||||
{
|
||||
$query = "SELECT idAvion as uid, UNIX_TIMESTAMP(deliveryTime) as deliveryTime, deliveryTZ, destLat, destLon, destName, message, UNIX_TIMESTAMP(startTime) as startTime, startTZ, startLon, startLat, startName, color, message FROM avionpoeme WHERE deliveryTimeServer>NOW()";
|
||||
$query = "SELECT idAvion as uid, UNIX_TIMESTAMP(deliveryTime) as deliveryTime, deliveryTZ, destLat, destLon, destName, destMail, message, expeMail, deliveryTimeServer, deliveryMethod, UNIX_TIMESTAMP(startTime) as startTime, startTZ, startLon, startLat, startName, color, message FROM avionpoeme WHERE deliveryTimeServer>NOW()";
|
||||
$this->query($query);
|
||||
$planes = $this->result->fetch_all(MYSQLI_ASSOC);
|
||||
print json_encode($planes);
|
||||
@ -177,20 +173,20 @@ class db
|
||||
return $planes;
|
||||
}
|
||||
|
||||
function getAnthology($page=0)
|
||||
function getAnthology($page = 0)
|
||||
{
|
||||
$query = "SELECT COUNT(*) as count FROM avionpoeme WHERE deliveryTimeServer<NOW() AND public='1'";
|
||||
$this->query($query);
|
||||
$result = $this->result->fetch_assoc();
|
||||
$n_pages = floor(($result["count"] / RESULTS_BY_PAGE))+1;
|
||||
$n_pages = floor(($result["count"] / RESULTS_BY_PAGE)) + 1;
|
||||
if ($page <= 0) //renvoie le nombre de ligne d'anthologie
|
||||
{
|
||||
print '{"nAnthology":"' . $result["count"] . '","nPages":"' . $n_pages .'"}';
|
||||
print '{"nAnthology":"' . $result["count"] . '","nPages":"' . $n_pages . '"}';
|
||||
return $n_pages;
|
||||
}else //renvoie les lignes d'anthologie
|
||||
} else //renvoie les lignes d'anthologie
|
||||
{
|
||||
if ($page > $n_pages) $page=$n_pages;
|
||||
$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;
|
||||
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;
|
||||
$this->query($query);
|
||||
$planes = $this->result->fetch_all(MYSQLI_ASSOC);
|
||||
print json_encode($planes, JSON_FORCE_OBJECT);
|
||||
@ -216,10 +212,9 @@ class db
|
||||
{
|
||||
$query = "SELECT *, DATEDIFF(quand,CURDATE()) as datePeripetie FROM peripeties WHERE quand IS NULL";
|
||||
$this->query($query);
|
||||
while ( ($result = $this->result->fetch_assoc()) )
|
||||
{
|
||||
while (($result = $this->result->fetch_assoc())) {
|
||||
$this->idPeripetie = $result["idPeripetie"];
|
||||
if ((mt_rand(0,100) <= $result["probabilite"])) //calcul de la probabilité de la péripétie
|
||||
if ((mt_rand(0, 100) <= $result["probabilite"])) //calcul de la probabilité de la péripétie
|
||||
{
|
||||
log_write("newPeripetie");
|
||||
$this->datePeripetie = mt_rand($this->startTime, $this->deliveryTime); //ajustement de l'effet
|
||||
|
||||
@ -133,13 +133,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="closePlane"></div>
|
||||
<div id="downloadPlaneMessage" class="btn btn-outline-primary">Télécharger l'avion-poème</div>
|
||||
<script src="src/map.js"></script>
|
||||
<script src="src/geocoder.js"></script>
|
||||
<script src="src/paperPlaneAnimation.js"></script>
|
||||
<script src="src/formValidation.js"></script>
|
||||
<script src="src/newPlane.js"></script>
|
||||
<script src="src/translation.js"></script>
|
||||
<script src="src/anthology.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -33,4 +33,5 @@
|
||||
<script src="dist/rasterizeHTML/rasterizeHTML.allinone.js"></script>
|
||||
<script src="dist/leaflet-locatecontrol/L.Control.Locate.min.js"></script>
|
||||
<script src='dist/leaflet-fullscreen/Leaflet.fullscreen.min.js'></script>
|
||||
<script src='dist/html2pdf/html2pdf.bundle.min.js'></script>
|
||||
</head>
|
||||
@ -21,7 +21,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
<form class="nav-button form-inline mt-2 mt-md-0">
|
||||
<input id="buttonNewPlane" type="button" class="btn btn-warning my-2 my-sm-0" data-toggle="modal" data-target="#newPlaneModal" value='Envoyer un avion'>
|
||||
<input id="buttonNewPlane" type="button" class="btn btn-warning my-2 my-sm-0" data-toggle="modal" data-target="#newPlaneModal" value='Lancer un avion-poème 0/100'>
|
||||
</input>
|
||||
<i id="planeLimitTooltip" class="fas fa-question-circle" data-toggle="tooltip" data-placement="auto" title="coucou"></i>
|
||||
</form>
|
||||
|
||||
167
src/anthology.js
167
src/anthology.js
@ -1,79 +1,136 @@
|
||||
function flightTime(a,b){
|
||||
var days = Math.round((b-a)/86400 * 100) / 100
|
||||
var months = Math.round(days/30)
|
||||
var years = Math.round(months/12)
|
||||
if (days < 30){
|
||||
return ""+days+" "+dictionnary.jours
|
||||
function flightTime(a, b) {
|
||||
var days = Math.round(((b - a) / 86400) * 100) / 100;
|
||||
var months = Math.round(days / 30);
|
||||
var years = Math.round(months / 12);
|
||||
if (days < 30) {
|
||||
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){
|
||||
if(months>1){
|
||||
return ""+months+" "+dictionnary.mois_pluriel
|
||||
}
|
||||
else{
|
||||
return ""+months+" "+dictionnary.mois
|
||||
}
|
||||
}
|
||||
else if (days >= 365){
|
||||
if(years>1){
|
||||
return ""+years+" "+dictionnary.ans
|
||||
}
|
||||
else{
|
||||
return ""+years+" "+dictionnary.an
|
||||
} else if (days >= 365) {
|
||||
if (years > 1) {
|
||||
return "" + years + " " + dictionnary.ans;
|
||||
} else {
|
||||
return "" + years + " " + dictionnary.an;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//load
|
||||
var nPages;
|
||||
var nPagesLoaded = 1
|
||||
$.post( "getAnthology.php", function(pages) {
|
||||
pages = $.parseJSON(pages)
|
||||
nPages = Number(pages.nPages)
|
||||
})
|
||||
var nPagesLoaded = 1;
|
||||
$.post("getAnthology.php", function (pages) {
|
||||
pages = $.parseJSON(pages);
|
||||
nPages = Number(pages.nPages);
|
||||
});
|
||||
|
||||
function displayAnthology(){ // clean and display first page
|
||||
$("#anthologyItems").html('')
|
||||
nPagesLoaded = 1
|
||||
$.post( "getAnthology.php?page=1", function(result) {
|
||||
results = $.parseJSON(result)
|
||||
function displayAnthology() {
|
||||
// clean and display first page
|
||||
$("#anthologyItems").html("");
|
||||
nPagesLoaded = 1;
|
||||
$.post("getAnthology.php?page=1", function (result) {
|
||||
results = $.parseJSON(result);
|
||||
var momentLocale = lang;
|
||||
if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese
|
||||
moment.locale(momentLocale)
|
||||
for (var i in results){
|
||||
addAnthologyLine(results[i])
|
||||
if (momentLocale == "zh") {
|
||||
momentLocale = "zh-cn";
|
||||
} //troubleshot for chinese
|
||||
moment.locale(momentLocale);
|
||||
for (var i in results) {
|
||||
addAnthologyLine(results[i]);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
$( "#anthology" ).scroll(function() {
|
||||
if($("#anthology").scrollTop() + 700 > $("#anthologyItems").height()){
|
||||
if (nPagesLoaded < nPages){
|
||||
nPagesLoaded++
|
||||
console.log('Loading anthology page '+nPagesLoaded+'/'+nPages)
|
||||
$.post( "getAnthology.php?page="+nPagesLoaded+"", function(result) {
|
||||
results = $.parseJSON(result)
|
||||
$("#anthology").scroll(function () {
|
||||
if ($("#anthology").scrollTop() + 700 > $("#anthologyItems").height()) {
|
||||
if (nPagesLoaded < nPages) {
|
||||
nPagesLoaded++;
|
||||
console.log("Loading anthology page " + nPagesLoaded + "/" + nPages);
|
||||
$.post("getAnthology.php?page=" + nPagesLoaded + "", function (result) {
|
||||
results = $.parseJSON(result);
|
||||
var momentLocale = lang;
|
||||
if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese
|
||||
moment.locale(momentLocale)
|
||||
for (var i in results){
|
||||
addAnthologyLine(results[i])
|
||||
if (momentLocale == "zh") {
|
||||
momentLocale = "zh-cn";
|
||||
} //troubleshot for chinese
|
||||
moment.locale(momentLocale);
|
||||
for (var i in results) {
|
||||
addAnthologyLine(results[i]);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function addAnthologyLine(results){
|
||||
if (lang == 'ar'){ // arabic : rtl + add <br>
|
||||
function addAnthologyLine(results) {
|
||||
if (lang == "ar") {
|
||||
// arabic : rtl + add <br>
|
||||
$("#anthologyItems").append(
|
||||
'<small style="float:right">'+dictionnary.origine+': <b>'+results.startName+'</b> • '+dictionnary.destination+': <b>'+results.destName+'</b> • '+dictionnary.date_arrivee+': <b>'+moment(Number(results.deliveryTime)*1000).format('LL')+'</b> • '+dictionnary.temps_de_vol+': <b>'+flightTime(Number(results.startTime),Number(results.deliveryTime))+'</b></small><br><br>'+results.message+'<br><hr><br>'
|
||||
)
|
||||
}
|
||||
else{
|
||||
'<small style="float:right">' +
|
||||
dictionnary.origine +
|
||||
": <b>" +
|
||||
results.startName +
|
||||
"</b> • " +
|
||||
dictionnary.destination +
|
||||
": <b>" +
|
||||
results.destName +
|
||||
"</b> • " +
|
||||
dictionnary.date_arrivee +
|
||||
": <b>" +
|
||||
moment(Number(results.deliveryTime) * 1000).format("LL") +
|
||||
"</b> • " +
|
||||
dictionnary.temps_de_vol +
|
||||
": <b>" +
|
||||
flightTime(Number(results.startTime), Number(results.deliveryTime)) +
|
||||
"</b></small><br><br>" +
|
||||
results.message +
|
||||
"<br><hr><br>"
|
||||
);
|
||||
} else {
|
||||
$("#anthologyItems").append(
|
||||
'<small>'+dictionnary.origine+': <b>'+results.startName+'</b> • '+dictionnary.destination+': <b>'+results.destName+'</b> • '+dictionnary.date_arrivee+': <b>'+moment(Number(results.deliveryTime)*1000).format('LL')+'</b> • '+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> • " +
|
||||
dictionnary.destination +
|
||||
": <b>" +
|
||||
results.destName +
|
||||
"</b> • " +
|
||||
dictionnary.date_arrivee +
|
||||
": <b>" +
|
||||
moment(Number(results.deliveryTime) * 1000).format("LL") +
|
||||
"</b> • " +
|
||||
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
50
src/app.css
@ -337,6 +337,56 @@ a#navbarDropdownLang.nav-link.dropdown-toggle::after {
|
||||
}
|
||||
}
|
||||
|
||||
.custom-file-label {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding-right: 9em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.custom-file-label::after {
|
||||
content: attr(data-after);
|
||||
}
|
||||
|
||||
#closePlane {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
right: 40px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
#closePlane:before {
|
||||
content: "\f00d";
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
color: white;
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
#downloadPlaneMessage {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
bottom: 5%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: var(--primary);
|
||||
background-color: white;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease-in;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#downloadPlaneMessage {
|
||||
bottom: 15%;
|
||||
}
|
||||
}
|
||||
|
||||
#downloadPlaneMessage:before {
|
||||
content: "\f019";
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
color: var(--primary);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
757
src/map.js
757
src/map.js
@ -1,146 +1,168 @@
|
||||
var loader = new PIXI.Loader();
|
||||
var colors = ['66FF00','FF5555','FFE419','2A7FFF','BC5FD3','C8AB37','ECECEC','FF6600'];
|
||||
for (var i in colors){
|
||||
loader.add('marker'+colors[i]+'', 'src/img/plane-'+colors[i]+'.png');
|
||||
var colors = [
|
||||
"66FF00",
|
||||
"FF5555",
|
||||
"FFE419",
|
||||
"2A7FFF",
|
||||
"BC5FD3",
|
||||
"C8AB37",
|
||||
"ECECEC",
|
||||
"FF6600",
|
||||
];
|
||||
for (var i in colors) {
|
||||
loader.add("marker" + colors[i] + "", "src/img/plane-" + colors[i] + ".png");
|
||||
}
|
||||
|
||||
//global variable
|
||||
var nbPlane = 0
|
||||
|
||||
loader.add('shadow', 'src/img/shadow.png');
|
||||
loader.load(function(loader, resources) {
|
||||
var nbPlane = 0;
|
||||
|
||||
loader.add("shadow", "src/img/shadow.png");
|
||||
loader.load(function (loader, resources) {
|
||||
var pixiContainer = new PIXI.Container();
|
||||
|
||||
var map = L.map('map',{
|
||||
var map = L.map("map", {
|
||||
zoomControl: false,
|
||||
minZoom:2,
|
||||
minZoom: 2,
|
||||
maxZoom: 16,
|
||||
maxBounds: [
|
||||
[-Infinity, -360],
|
||||
[Infinity, 360]
|
||||
[Infinity, 360],
|
||||
],
|
||||
//worldCopyJump: true,
|
||||
attributionControl: false
|
||||
})
|
||||
attributionControl: false,
|
||||
});
|
||||
|
||||
//zoom controls
|
||||
L.control.zoom({position: 'bottomright'}).addTo(map);
|
||||
L.control.zoom({ position: "bottomright" }).addTo(map);
|
||||
//Locate user
|
||||
L.control.locate({position: 'bottomright'}).addTo(map);
|
||||
L.control.locate({ position: "bottomright" }).addTo(map);
|
||||
//fullscreen
|
||||
map.addControl(new L.Control.Fullscreen({position: 'bottomright'}));
|
||||
map.addControl(new L.Control.Fullscreen({ position: "bottomright" }));
|
||||
|
||||
// Licence Icon
|
||||
L.Control.Watermark = L.Control.extend({
|
||||
onAdd: function(map) {
|
||||
var img = L.DomUtil.create('img');
|
||||
onAdd: function (map) {
|
||||
var img = L.DomUtil.create("img");
|
||||
|
||||
img.src = 'src/img/licence.svg';
|
||||
img.style.width = '100px';
|
||||
img.src = "src/img/licence.svg";
|
||||
img.style.width = "100px";
|
||||
|
||||
return img;
|
||||
}
|
||||
},
|
||||
});
|
||||
L.control.watermark = function(opts) {
|
||||
L.control.watermark = function (opts) {
|
||||
return new L.Control.Watermark(opts);
|
||||
}
|
||||
L.control.watermark({ position: 'bottomleft' }).addTo(map);
|
||||
};
|
||||
L.control.watermark({ position: "bottomleft" }).addTo(map);
|
||||
//scale
|
||||
L.control.scale().addTo(map);
|
||||
|
||||
//disabling send plane button if alreada 100 planes sent the current day
|
||||
|
||||
|
||||
$.post("avionJournalier.php", function(result) {
|
||||
$.post("avionJournalier.php", function (result) {
|
||||
result = result.replace(/'/g, '"');
|
||||
result = $.parseJSON(result)
|
||||
nbPlane = Number(result.nAvion)
|
||||
$("#buttonNewPlane").val("Lancer un avion-poème "+Number(result.nAvion)+"/100")
|
||||
if (nbPlane > 99){
|
||||
$("#buttonNewPlane").prop("disabled",true);
|
||||
result = $.parseJSON(result);
|
||||
nbPlane = Number(result.nAvion);
|
||||
$("#buttonNewPlane").val(
|
||||
"Lancer un avion-poème " + Number(result.nAvion) + "/100"
|
||||
);
|
||||
if (nbPlane > 99) {
|
||||
$("#buttonNewPlane").prop("disabled", true);
|
||||
} else {
|
||||
}
|
||||
else{
|
||||
|
||||
}
|
||||
translateUI(lang)
|
||||
})
|
||||
translateUI(lang);
|
||||
});
|
||||
|
||||
//background
|
||||
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
||||
attribution: '',
|
||||
L.tileLayer(
|
||||
"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
|
||||
{
|
||||
attribution: "",
|
||||
//minZoom:8,
|
||||
maxZoom: 16,
|
||||
}).addTo(map);
|
||||
}
|
||||
).addTo(map);
|
||||
|
||||
//adding terminator
|
||||
var terminator = L.terminator()
|
||||
.addTo(map);
|
||||
setInterval(function() {
|
||||
var terminator = L.terminator().addTo(map);
|
||||
setInterval(function () {
|
||||
terminator.setTime();
|
||||
}, 1000);
|
||||
|
||||
|
||||
//center map on sun by default
|
||||
function centerOnSun(){
|
||||
var equator = turf.lineString([[-1000, 0], [1000, 0]])
|
||||
function centerOnSun() {
|
||||
var equator = turf.lineString([
|
||||
[-1000, 0],
|
||||
[1000, 0],
|
||||
]);
|
||||
var intersects = turf.lineIntersect(equator, terminator.toGeoJSON());
|
||||
//console.log(intersects)
|
||||
var lonCenter = ((intersects.features[1].geometry.coordinates[0])+(intersects.features[2].geometry.coordinates[0]))/2
|
||||
var lonCenter =
|
||||
(intersects.features[1].geometry.coordinates[0] +
|
||||
intersects.features[2].geometry.coordinates[0]) /
|
||||
2;
|
||||
//console.log(lonCenter)
|
||||
return lonCenter
|
||||
return lonCenter;
|
||||
}
|
||||
map.setView([30,0], 2);
|
||||
|
||||
map.setView([30, 0], 2);
|
||||
|
||||
//could layer from GBIS NASA - always 1 day of delay
|
||||
var twoDaysAgo = moment(new Date()).subtract(2, "days").format('YYYY-MM-DD')
|
||||
L.tileLayer('https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_SNPP_CorrectedReflectance_TrueColor/default/'+twoDaysAgo+'/GoogleMapsCompatible_Level9/{z}/{y}/{x}.jpg', {
|
||||
attribution: '',
|
||||
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",
|
||||
{
|
||||
attribution: "",
|
||||
maxZoom: 8,
|
||||
opacity:0.4
|
||||
})
|
||||
.addTo(map);
|
||||
|
||||
opacity: 0.4,
|
||||
}
|
||||
).addTo(map);
|
||||
|
||||
//Bluring the terminator | Source: https://stackoverflow.com/questions/28235792/leaflet-polygon-with-fuzzy-outline
|
||||
var svg = map.getPanes().overlayPane.firstChild,
|
||||
svgFilter = document.createElementNS('http://www.w3.org/2000/svg', 'filter'),
|
||||
svgBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
|
||||
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 = document.createElementNS(
|
||||
"http://www.w3.org/2000/svg",
|
||||
"filter"
|
||||
),
|
||||
svgBlur = document.createElementNS(
|
||||
"http://www.w3.org/2000/svg",
|
||||
"feGaussianBlur"
|
||||
);
|
||||
svgFilter.setAttribute("id", "blur");
|
||||
svgFilter.setAttribute("x", "-100%");
|
||||
svgFilter.setAttribute("y", "-100%");
|
||||
svgFilter.setAttribute("width", "500%");
|
||||
svgFilter.setAttribute("height", "500%");
|
||||
svgBlur.setAttribute("stdDeviation", 15);
|
||||
svgFilter.appendChild(svgBlur);
|
||||
svg.appendChild(svgFilter);
|
||||
terminator._path.setAttribute('filter', 'url(#blur)');
|
||||
terminator._path.setAttribute("filter", "url(#blur)");
|
||||
|
||||
//geojson for arclines
|
||||
//travel
|
||||
var arcTravelStyle = {
|
||||
"color": "#00ff00",
|
||||
"weight": 2.5,
|
||||
"dashArray": "10 5",
|
||||
"opacity": 0.65
|
||||
color: "#00ff00",
|
||||
weight: 2.5,
|
||||
dashArray: "10 5",
|
||||
opacity: 0.65,
|
||||
};
|
||||
var arcTravel = L.geoJSON([],{style: arcTravelStyle}).addTo(map);
|
||||
var arcTravel = L.geoJSON([], { style: arcTravelStyle }).addTo(map);
|
||||
//travelled
|
||||
var arcTravelledStyle = {
|
||||
"color": "#00ff00",
|
||||
"weight": 2.5,
|
||||
"opacity": 0.65
|
||||
color: "#00ff00",
|
||||
weight: 2.5,
|
||||
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 originMarker = L.layerGroup([]).addTo(map)
|
||||
var pulsatingMarker = L.layerGroup([]).addTo(map);
|
||||
var originMarker = L.layerGroup([]).addTo(map);
|
||||
|
||||
var firstDraw = true;
|
||||
var prevZoom;
|
||||
|
||||
var pixiOverlay = L.pixiOverlay(function(utils, event) {
|
||||
var pixiOverlay = L.pixiOverlay(function (utils, event) {
|
||||
var zoom = utils.getMap().getZoom();
|
||||
var container = utils.getContainer();
|
||||
var renderer = utils.getRenderer();
|
||||
@ -148,73 +170,90 @@ loader.load(function(loader, resources) {
|
||||
var scale = utils.getScale();
|
||||
|
||||
if (firstDraw) {
|
||||
|
||||
//get planes
|
||||
$.post( "getCurrentPlanes.php", function(result) {
|
||||
$.post("getCurrentPlanes.php", function (result) {
|
||||
// console.log(result)
|
||||
var planes = $.parseJSON(result)
|
||||
console.log(planes)
|
||||
function formatResults(data){
|
||||
data.deliveryTime = Number(data.deliveryTime)*1000
|
||||
data.startTime = Number(data.startTime)*1000
|
||||
return data
|
||||
var planes = $.parseJSON(result);
|
||||
console.log(planes);
|
||||
function formatResults(data) {
|
||||
data.deliveryTime = Number(data.deliveryTime) * 1000;
|
||||
data.startTime = Number(data.startTime) * 1000;
|
||||
return 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 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
|
||||
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 lineDistance = turf.length(line);
|
||||
var dateStart = moment(data.startTime);
|
||||
var dateEnd = moment(data.deliveryTime);
|
||||
var dateNow = moment(new Date());
|
||||
var totalSeconds = dateEnd.diff(dateStart, "seconds");
|
||||
var travelledSeconds = dateNow.diff(dateStart, "seconds");
|
||||
var travelRatio = travelledSeconds / totalSeconds;
|
||||
var travelledDistance = lineDistance * travelRatio; // getting the travelled distance
|
||||
var segment;
|
||||
if (line.geometry.type == "MultiLineString") {
|
||||
// if the arc is cutting the dateline, well it's a mess.
|
||||
var l1 = turf.lineString(line.geometry.coordinates[0]); // creating a line from first segment
|
||||
var l2 = turf.lineString(line.geometry.coordinates[1]); // creating a line from second segment
|
||||
var l1Length = turf.length(l1); // calculating length of first segment
|
||||
if (travelledDistance < l1Length) {
|
||||
// if the travelled distance is inferior to segment 1 line, the point is somewhere in it
|
||||
segment = l1;
|
||||
data.position = 1;
|
||||
} else {
|
||||
segment = l2; // otherwise on segment 2
|
||||
data.position = 2;
|
||||
travelledDistance = Number(travelledDistance) - Number(l1Length); // we remove the travel distance done in s1
|
||||
}
|
||||
} else {
|
||||
segment = line;
|
||||
data.position = 0;
|
||||
}
|
||||
var currentPosition = turf.along(segment, travelledDistance, {
|
||||
units: "kilometers",
|
||||
});
|
||||
if (currentPosition.geometry.coordinates[0] < -180) {
|
||||
currentPosition.geometry.coordinates[0] =
|
||||
currentPosition.geometry.coordinates[0] + 360;
|
||||
}
|
||||
if (currentPosition.geometry.coordinates[0] > 180) {
|
||||
currentPosition.geometry.coordinates[0] =
|
||||
currentPosition.geometry.coordinates[0] - Number(360);
|
||||
}
|
||||
//calculating bearing based on two points, one just before and one just after
|
||||
var positionBefore = turf.along(
|
||||
segment,
|
||||
travelledDistance - 0.00001,
|
||||
{ units: "kilometers" }
|
||||
);
|
||||
var positionAfter = turf.along(segment, travelledDistance + 0.00001, {
|
||||
units: "kilometers",
|
||||
});
|
||||
var rotation = turf.bearing(positionBefore, positionAfter);
|
||||
|
||||
//plane
|
||||
var iconColor = 'marker'+data.color
|
||||
var iconColor = "marker" + data.color;
|
||||
var markerTexture = resources[iconColor].texture;
|
||||
var marker = new PIXI.Sprite(markerTexture);
|
||||
marker.anchor.set(0.5, 0.5);
|
||||
var markerCoords = project([currentPosition.geometry.coordinates[1],currentPosition.geometry.coordinates[0]]);
|
||||
var markerCoords = project([
|
||||
currentPosition.geometry.coordinates[1],
|
||||
currentPosition.geometry.coordinates[0],
|
||||
]);
|
||||
marker.x = markerCoords.x;
|
||||
marker.y = markerCoords.y;
|
||||
marker.angle = rotation;
|
||||
marker.scale.set(5);
|
||||
marker.interactive = true;
|
||||
marker.cursor = 'pointer'
|
||||
marker.data = data
|
||||
marker.data.line = line
|
||||
marker.data.currentPosition = currentPosition
|
||||
marker.cursor = "pointer";
|
||||
marker.data = data;
|
||||
marker.data.line = line;
|
||||
marker.data.currentPosition = currentPosition;
|
||||
|
||||
//shadow
|
||||
var shadowTexture = resources.shadow.texture;
|
||||
@ -224,72 +263,96 @@ loader.load(function(loader, resources) {
|
||||
shadow.y = markerCoords.y + 0.5;
|
||||
shadow.angle = rotation;
|
||||
shadow.scale.set(0.00025);
|
||||
shadow.alpha = 0.3
|
||||
shadow.visible = false
|
||||
shadow.alpha = 0.3;
|
||||
shadow.visible = false;
|
||||
|
||||
//popup
|
||||
marker.popup = L.popup({className: 'pixi-popup'})
|
||||
marker.popup = L.popup({ className: "pixi-popup" });
|
||||
|
||||
pixiContainer.addChild(shadow);
|
||||
pixiContainer.addChild(marker);
|
||||
|
||||
renderer.render(container)
|
||||
renderer.render(container);
|
||||
|
||||
//adapting scale based on zoom level. Max zoom = writting visible
|
||||
map.on('zoomend', function() {
|
||||
marker.scale.set((1/(utils.getScale(map.getZoom())*20))+(Math.pow(map.getZoom(),2)/100*2*(1/(utils.getScale(map.getZoom())*20))))
|
||||
if(map.getZoom() == 16){
|
||||
shadow.visible = true
|
||||
}
|
||||
else{
|
||||
shadow.visible = false
|
||||
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))
|
||||
);
|
||||
if (map.getZoom() == 16) {
|
||||
shadow.visible = true;
|
||||
} else {
|
||||
shadow.visible = false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
//animating moving plane
|
||||
setInterval(function() {
|
||||
setInterval(function () {
|
||||
animate();
|
||||
}, 1000)
|
||||
}, 1000);
|
||||
|
||||
function animate() {
|
||||
if (map.getZoom() > 12){ // we animate only starting zoom 12
|
||||
var bounds = map.getBounds()
|
||||
var bbox = [bounds._southWest.lng, bounds._southWest.lat, bounds._northEast.lng, bounds._northEast.lat];
|
||||
if (map.getZoom() > 12) {
|
||||
// we animate only starting zoom 12
|
||||
var bounds = map.getBounds();
|
||||
var bbox = [
|
||||
bounds._southWest.lng,
|
||||
bounds._southWest.lat,
|
||||
bounds._northEast.lng,
|
||||
bounds._northEast.lat,
|
||||
];
|
||||
var extentPoly = turf.bboxPolygon(bbox);
|
||||
var planeInExtent = turf.booleanWithin(marker.data.currentPosition, extentPoly);
|
||||
if(planeInExtent == true){ // 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 planeInExtent = turf.booleanWithin(
|
||||
marker.data.currentPosition,
|
||||
extentPoly
|
||||
);
|
||||
if (planeInExtent == true) {
|
||||
// we animate only the planes in map extent
|
||||
var dateNow = moment(new Date());
|
||||
var totalSeconds = dateEnd.diff(dateStart, "seconds");
|
||||
var travelledSeconds = dateNow.diff(dateStart, "seconds");
|
||||
var travelRatio = travelledSeconds / totalSeconds;
|
||||
var lineDistance = turf.length(line);
|
||||
var segment;
|
||||
var travelledDistance = lineDistance*travelRatio // getting the travelled distance
|
||||
if(line.geometry.type == "MultiLineString"){ // if the arc is cutting the dateline
|
||||
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
|
||||
marker.data.position = 1 // we store it, usefull for popup event
|
||||
var travelledDistance = lineDistance * travelRatio; // getting the travelled distance
|
||||
if (line.geometry.type == "MultiLineString") {
|
||||
// if the arc is cutting the dateline
|
||||
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;
|
||||
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{
|
||||
segment = l2 // otherwise on segment 2
|
||||
marker.data.position = 2
|
||||
travelledDistance = Number(travelledDistance)-Number(l1Length) // we remove the travel distance done in s1
|
||||
} else {
|
||||
segment = line;
|
||||
}
|
||||
}
|
||||
else{
|
||||
segment = line
|
||||
}
|
||||
var currentPosition = turf.along(segment, travelledDistance,{units: 'kilometers'})
|
||||
var currentPosition = turf.along(segment, travelledDistance, {
|
||||
units: "kilometers",
|
||||
});
|
||||
//troubleshooting extreme lons
|
||||
if(currentPosition.geometry.coordinates[0] < -180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]+360}
|
||||
if(currentPosition.geometry.coordinates[0] > 180){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]]);
|
||||
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);
|
||||
}
|
||||
marker.data.currentPosition = currentPosition;
|
||||
var markerCoords = project([
|
||||
currentPosition.geometry.coordinates[1],
|
||||
currentPosition.geometry.coordinates[0],
|
||||
]);
|
||||
marker.x = markerCoords.x;
|
||||
marker.y = markerCoords.y;
|
||||
shadow.x = markerCoords.x;
|
||||
@ -301,167 +364,320 @@ loader.load(function(loader, resources) {
|
||||
|
||||
//if parameter in URL, zoom on it
|
||||
var queryString = window.location.search;
|
||||
queryString = queryString.split('=')[1]
|
||||
if(Number(queryString)==data.uid){
|
||||
$("#back").attr("src","src/img/back-"+data.color+".jpg");
|
||||
queryString = queryString.split("=")[1];
|
||||
if (Number(queryString) == data.uid) {
|
||||
$("#back").attr("src", "src/img/back-" + data.color + ".jpg");
|
||||
html = data.message;
|
||||
var canvas1 = document.getElementById("blankCanvas1");
|
||||
rasterizeHTML.drawHTML(html, canvas1,{zoom:0.7}).then(function success(renderResult) {
|
||||
rasterizeHTML
|
||||
.drawHTML(html, canvas1, { zoom: 0.7 })
|
||||
.then(function success(renderResult) {
|
||||
var canvas2 = document.getElementById("blankCanvas2");
|
||||
var ctx = canvas2.getContext("2d");
|
||||
ctx.fillStyle = "#" + data.color;
|
||||
ctx.fillRect(0,0,400,400);
|
||||
ctx.drawImage(canvas1, 0, 0,400,400)
|
||||
ctx.fillRect(0, 0, 400, 400);
|
||||
ctx.drawImage(canvas1, 0, 0, 400, 400);
|
||||
ctx.font = "9px Courier";
|
||||
$("#front").attr('src',document.getElementById("blankCanvas2").toDataURL())
|
||||
$("#canvas3d").css('display','block')
|
||||
$("#front").attr(
|
||||
"src",
|
||||
document.getElementById("blankCanvas2").toDataURL()
|
||||
);
|
||||
$("#canvas3d").css("opacity", 0);
|
||||
$("#canvas3d").css("display", "block");
|
||||
animePlane();
|
||||
})
|
||||
setTimeout(function () {
|
||||
$("#canvas3d").css("opacity", 1);
|
||||
}, 0);
|
||||
const startDate = new Date(data.startTime);
|
||||
const deliveryDate = new Date(data.deliveryTime);
|
||||
const diffTime = Math.abs(deliveryDate - startDate);
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
setTimeout(function () {
|
||||
$("#closePlane").css("opacity", 1);
|
||||
$("#closePlane").css("visibility", "visible");
|
||||
$("#downloadPlaneMessage").css("opacity", 1);
|
||||
$("#downloadPlaneMessage").css("visibility", "visible");
|
||||
$("#closePlane").on("click", function () {
|
||||
$("#canvas3d").css("display", "none");
|
||||
$("#downloadPlaneMessage").css("display", "none");
|
||||
$(this).css("display", "none");
|
||||
});
|
||||
$("#downloadPlaneMessage").on("click", function () {
|
||||
const htmlRender =
|
||||
"<div>" +
|
||||
"<div><u>Métadonnées du message :</u></div>" +
|
||||
"<ul>" +
|
||||
"<li>" +
|
||||
data.startName +
|
||||
" - " +
|
||||
data.destName +
|
||||
"</li>" +
|
||||
"<li>" +
|
||||
data.expeMail +
|
||||
" - " +
|
||||
data.destMail +
|
||||
"</li>" +
|
||||
"<li>" +
|
||||
diffDays +
|
||||
" days" +
|
||||
"</li>" +
|
||||
"<li>" +
|
||||
moment(deliveryDate).format("DD/MM/YYYY") +
|
||||
"</li>" +
|
||||
"</ul><br>" +
|
||||
"<div><u>Champs message :</u></div><br>" +
|
||||
html +
|
||||
"</div>";
|
||||
const opt = {
|
||||
margin: 10,
|
||||
filename: "peome.pdf",
|
||||
image: { type: "jpeg", quality: 1 },
|
||||
html2canvas: {
|
||||
scale: 2,
|
||||
removeContainer: false,
|
||||
logging: true,
|
||||
},
|
||||
pagebreak: { avoid: "img" },
|
||||
};
|
||||
html2pdf().set(opt).from(htmlRender).save();
|
||||
});
|
||||
}, 5000);
|
||||
});
|
||||
setTimeout(function () {
|
||||
map.setView(
|
||||
[
|
||||
data.currentPosition.geometry.coordinates[1],
|
||||
data.currentPosition.geometry.coordinates[0],
|
||||
],
|
||||
15
|
||||
);
|
||||
openPopup(marker);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
}
|
||||
for (var i in planes){
|
||||
displayPlane(formatResults(planes[i]),0)
|
||||
for (var i in planes) {
|
||||
displayPlane(formatResults(planes[i]), 0);
|
||||
}
|
||||
});
|
||||
|
||||
function openPopup(target){
|
||||
function openPopup(target) {
|
||||
//drawing arcs
|
||||
arcTravel.clearLayers()
|
||||
arcTravelled.clearLayers()
|
||||
arcTravelStyle.color = '#'+target.data.color
|
||||
arcTravelledStyle.color = '#'+target.data.color
|
||||
var travel = target.data.line
|
||||
var start = turf.point([Number(target.data.startLon),Number(target.data.startLat)])
|
||||
var current = target.data.currentPosition
|
||||
var end = turf.point([Number(target.data.destLon),Number(target.data.destLat)])
|
||||
arcTravel.clearLayers();
|
||||
arcTravelled.clearLayers();
|
||||
arcTravelStyle.color = "#" + target.data.color;
|
||||
arcTravelledStyle.color = "#" + target.data.color;
|
||||
var travel = target.data.line;
|
||||
var start = turf.point([
|
||||
Number(target.data.startLon),
|
||||
Number(target.data.startLat),
|
||||
]);
|
||||
var current = target.data.currentPosition;
|
||||
var end = turf.point([
|
||||
Number(target.data.destLon),
|
||||
Number(target.data.destLat),
|
||||
]);
|
||||
// for linestrings
|
||||
if(travel.geometry.type == "LineString"){
|
||||
if (travel.geometry.type == "LineString") {
|
||||
var sliced1 = turf.lineSlice(start, current, travel);
|
||||
var sliced2 = turf.lineSlice(current, end, travel);
|
||||
arcTravelled.addData(sliced1);
|
||||
arcTravel.addData(sliced2);
|
||||
}
|
||||
// we create a copy of lines crossing the datetime
|
||||
function createCopy(c){
|
||||
for (var i in c.geometry.coordinates){
|
||||
if (c.geometry.coordinates[i][0] > 0){
|
||||
c.geometry.coordinates[i][0] = c.geometry.coordinates[i][0] - Number(360)
|
||||
}
|
||||
else{
|
||||
c.geometry.coordinates[i][0] = c.geometry.coordinates[i][0] + Number(360)
|
||||
function createCopy(c) {
|
||||
for (var i in c.geometry.coordinates) {
|
||||
if (c.geometry.coordinates[i][0] > 0) {
|
||||
c.geometry.coordinates[i][0] =
|
||||
c.geometry.coordinates[i][0] - Number(360);
|
||||
} else {
|
||||
c.geometry.coordinates[i][0] =
|
||||
c.geometry.coordinates[i][0] + Number(360);
|
||||
}
|
||||
}
|
||||
|
||||
return c
|
||||
return c;
|
||||
}
|
||||
//for multilinetrings
|
||||
if(travel.geometry.type == "MultiLineString"){
|
||||
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
|
||||
if(target.data.position == 1){
|
||||
if (travel.geometry.type == "MultiLineString") {
|
||||
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
|
||||
if (target.data.position == 1) {
|
||||
var sliced1 = turf.lineSlice(start, current, l1);
|
||||
var sliced2 = turf.lineSlice(current, turf.point(l1.geometry.coordinates[l1.geometry.coordinates.length-1]), l1);
|
||||
var sliced2 = turf.lineSlice(
|
||||
current,
|
||||
turf.point(
|
||||
l1.geometry.coordinates[l1.geometry.coordinates.length - 1]
|
||||
),
|
||||
l1
|
||||
);
|
||||
arcTravelled.addData(sliced1);
|
||||
arcTravel.addData(sliced2);
|
||||
arcTravel.addData(l2);
|
||||
|
||||
}
|
||||
else if(target.data.position == 2){
|
||||
var sliced1 = turf.lineSlice(turf.point(l2.geometry.coordinates[0]), current, l2);
|
||||
} else if (target.data.position == 2) {
|
||||
var sliced1 = turf.lineSlice(
|
||||
turf.point(l2.geometry.coordinates[0]),
|
||||
current,
|
||||
l2
|
||||
);
|
||||
var sliced2 = turf.lineSlice(current, end, l2);
|
||||
arcTravelled.addData(l1);
|
||||
arcTravelled.addData(sliced1);
|
||||
arcTravel.addData(sliced2);
|
||||
}
|
||||
var travelledGeoJSON = arcTravelled.toGeoJSON()
|
||||
for (var i in travelledGeoJSON.features){
|
||||
arcTravelled.addData(createCopy(travelledGeoJSON.features[i]))
|
||||
var travelledGeoJSON = arcTravelled.toGeoJSON();
|
||||
for (var i in travelledGeoJSON.features) {
|
||||
arcTravelled.addData(createCopy(travelledGeoJSON.features[i]));
|
||||
}
|
||||
var travelGeoJSON = arcTravel.toGeoJSON()
|
||||
for (var i in travelGeoJSON.features){
|
||||
arcTravel.addData(createCopy(travelGeoJSON.features[i]))
|
||||
var travelGeoJSON = arcTravel.toGeoJSON();
|
||||
for (var i in travelGeoJSON.features) {
|
||||
arcTravel.addData(createCopy(travelGeoJSON.features[i]));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
//add pulsating marker on destination;
|
||||
pulsatingMarker.clearLayers()
|
||||
pulsatingMarker.clearLayers();
|
||||
var pulseIcon = L.divIcon({
|
||||
className: 'pulse-icon', //empty class to overwrite leaflet defaults
|
||||
html: '<div class="pulse-icon-anim" style="border-color:#'+target.data.color+'"></div>',
|
||||
iconSize: [22,22]
|
||||
className: "pulse-icon", //empty class to overwrite leaflet defaults
|
||||
html:
|
||||
'<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)]
|
||||
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}));
|
||||
var endCoordo = [
|
||||
Number(target.data.destLat),
|
||||
Number(target.data.destLon),
|
||||
];
|
||||
pulsatingMarker.addLayer(new L.marker(endCoordo, { icon: pulseIcon }));
|
||||
if (travel.geometry.type == "MultiLineString") {
|
||||
//if arc cross dateline, we multiply the marker
|
||||
pulsatingMarker.addLayer(
|
||||
new L.marker([endCoordo[0], endCoordo[1] - Number(360)], {
|
||||
icon: pulseIcon,
|
||||
})
|
||||
);
|
||||
pulsatingMarker.addLayer(
|
||||
new L.marker([endCoordo[0], endCoordo[1] + Number(360)], {
|
||||
icon: pulseIcon,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
//adding static marker on origin
|
||||
originMarker.clearLayers()
|
||||
var startCoordo = [Number(target.data.startLat),Number(target.data.startLon)]
|
||||
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}));
|
||||
originMarker.clearLayers();
|
||||
var startCoordo = [
|
||||
Number(target.data.startLat),
|
||||
Number(target.data.startLon),
|
||||
];
|
||||
originMarker.addLayer(
|
||||
new L.circleMarker(startCoordo, {
|
||||
radius: 6,
|
||||
opacity: 0.7,
|
||||
weight: 2,
|
||||
color: "#" + target.data.color,
|
||||
})
|
||||
);
|
||||
if (travel.geometry.type == "MultiLineString") {
|
||||
//if arc cross dateline, we multiply the marker
|
||||
originMarker.addLayer(
|
||||
new L.circleMarker([startCoordo[0], startCoordo[1] - Number(360)], {
|
||||
radius: 6,
|
||||
opacity: 0.7,
|
||||
weight: 2,
|
||||
color: "#" + target.data.color,
|
||||
})
|
||||
);
|
||||
originMarker.addLayer(
|
||||
new L.circleMarker([startCoordo[0], startCoordo[1] + Number(360)], {
|
||||
radius: 6,
|
||||
opacity: 0.7,
|
||||
color: "#" + target.data.color,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
//popup
|
||||
var momentLocale = lang;
|
||||
if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese
|
||||
moment.locale(momentLocale)
|
||||
if (momentLocale == "zh") {
|
||||
momentLocale = "zh-cn";
|
||||
} //troubleshot for chinese
|
||||
moment.locale(momentLocale);
|
||||
|
||||
target.popup.setLatLng([target.data.currentPosition.geometry.coordinates[1],target.data.currentPosition.geometry.coordinates[0]])
|
||||
target.popup.setLatLng([
|
||||
target.data.currentPosition.geometry.coordinates[1],
|
||||
target.data.currentPosition.geometry.coordinates[0],
|
||||
]);
|
||||
//arabic popup
|
||||
if(lang=="ar"){
|
||||
target.popup.setContent('<table><tbody><tr><th style="text-align:center">'+target.data.startName+'</th><th> <i class="fas fa-plane"></i> </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>')
|
||||
if (lang == "ar") {
|
||||
target.popup.setContent(
|
||||
'<table><tbody><tr><th style="text-align:center">' +
|
||||
target.data.startName +
|
||||
'</th><th> <i class="fas fa-plane"></i> </th><th style="text-align:center">' +
|
||||
target.data.destName +
|
||||
'</th></tr><tr><th style="text-align:center"><small>' +
|
||||
moment(target.data.startTime).fromNow() +
|
||||
'</small></th><th></th><th style="text-align:center"><small>' +
|
||||
moment(target.data.deliveryTime).fromNow() +
|
||||
"</small></th></tr></tbody></table>"
|
||||
);
|
||||
}
|
||||
//other languages
|
||||
else{
|
||||
target.popup.setContent('<table><tbody><tr><th style="text-align:center">'+target.data.startName+'</th><th> <i class="fas fa-plane"></i> </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>')
|
||||
else {
|
||||
target.popup.setContent(
|
||||
'<table><tbody><tr><th style="text-align:center">' +
|
||||
target.data.startName +
|
||||
'</th><th> <i class="fas fa-plane"></i> </th><th style="text-align:center">' +
|
||||
target.data.destName +
|
||||
'</th></tr><tr><th style="text-align:center"><small>' +
|
||||
moment(target.data.startTime).fromNow() +
|
||||
'</small></th><th></th><th style="text-align:center"><small>' +
|
||||
moment(target.data.deliveryTime).fromNow() +
|
||||
"</small></th></tr></tbody></table>"
|
||||
);
|
||||
}
|
||||
target.popup.openOn(map);
|
||||
target.popup.on('remove', function() {
|
||||
arcTravel.clearLayers()
|
||||
arcTravelled.clearLayers()
|
||||
pulsatingMarker.clearLayers()
|
||||
originMarker.clearLayers()
|
||||
target.popup.on("remove", function () {
|
||||
arcTravel.clearLayers();
|
||||
arcTravelled.clearLayers();
|
||||
pulsatingMarker.clearLayers();
|
||||
originMarker.clearLayers();
|
||||
});
|
||||
target.popup.on('popupclose', function() {
|
||||
arcTravel.clearLayers()
|
||||
arcTravelled.clearLayers()
|
||||
pulsatingMarker.clearLayers()
|
||||
originMarker.clearLayers()
|
||||
target.popup.on("popupclose", function () {
|
||||
arcTravel.clearLayers();
|
||||
arcTravelled.clearLayers();
|
||||
pulsatingMarker.clearLayers();
|
||||
originMarker.clearLayers();
|
||||
});
|
||||
}
|
||||
//utils for popup
|
||||
utils.getMap().on('click', function(e) {
|
||||
utils.getMap().on("click", function (e) {
|
||||
var interaction = utils.getRenderer().plugins.interaction;
|
||||
var pointerEvent = e.originalEvent;
|
||||
var pixiPoint = new PIXI.Point();
|
||||
interaction.mapPositionToPoint(pixiPoint, pointerEvent.clientX, pointerEvent.clientY);
|
||||
interaction.mapPositionToPoint(
|
||||
pixiPoint,
|
||||
pointerEvent.clientX,
|
||||
pointerEvent.clientY
|
||||
);
|
||||
var target = interaction.hitTest(pixiPoint, container);
|
||||
if (target && target.popup) {
|
||||
openPopup(target)
|
||||
openPopup(target);
|
||||
}
|
||||
});
|
||||
utils.getMap().on('touchend', function(e) {
|
||||
utils.getMap().on("touchend", function (e) {
|
||||
var interaction = utils.getRenderer().plugins.interaction;
|
||||
var pointerEvent = e.originalEvent;
|
||||
var pixiPoint = new PIXI.Point();
|
||||
interaction.mapPositionToPoint(pixiPoint, pointerEvent.clientX, pointerEvent.clientY);
|
||||
interaction.mapPositionToPoint(
|
||||
pixiPoint,
|
||||
pointerEvent.clientX,
|
||||
pointerEvent.clientY
|
||||
);
|
||||
var target = interaction.hitTest(pixiPoint, container);
|
||||
if (target && target.popup) {
|
||||
openPopup(target)
|
||||
openPopup(target);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
firstDraw = false;
|
||||
@ -471,22 +687,17 @@ loader.load(function(loader, resources) {
|
||||
pixiOverlay.addTo(map);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//hack to make white lines between lines disapear on non-retina screens (from: https://github.com/Leaflet/Leaflet/issues/3575 )
|
||||
(function(){
|
||||
var originalInitTile = L.GridLayer.prototype._initTile
|
||||
(function () {
|
||||
var originalInitTile = L.GridLayer.prototype._initTile;
|
||||
L.GridLayer.include({
|
||||
_initTile: function (tile) {
|
||||
originalInitTile.call(this, tile);
|
||||
|
||||
var tileSize = this.getTileSize();
|
||||
|
||||
tile.style.width = tileSize.x + 1 + 'px';
|
||||
tile.style.height = tileSize.y + 1 + 'px';
|
||||
}
|
||||
tile.style.width = tileSize.x + 1 + "px";
|
||||
tile.style.height = tileSize.y + 1 + "px";
|
||||
},
|
||||
});
|
||||
})()
|
||||
})();
|
||||
|
||||
@ -104,13 +104,7 @@ function translateUI(l) {
|
||||
$("#navTitle").html(s.avionpoeme);
|
||||
$("#buttonAnthology").html(s.anthologie);
|
||||
$("#buttonAbout").html(s.apropos);
|
||||
if (typeof nbPlane !== "undefined") {
|
||||
$("#buttonNewPlane").val(s.lancer_avion + " " + nbPlane + "/100");
|
||||
} else {
|
||||
$("#buttonNewPlane").on("click", () => {
|
||||
window.location.replace("/");
|
||||
});
|
||||
}
|
||||
//new plane form
|
||||
$("#newPlaneModalTitle").html(s.lancer_avion);
|
||||
$("#newPlaneModalMessage").html(s.message);
|
||||
@ -139,11 +133,6 @@ function translateUI(l) {
|
||||
$("#publicTooltip").attr("title", s.public_tooltip).tooltip("_fixTitle");
|
||||
|
||||
$('#selectDestLang option[value="' + lang + '"]').prop("selected", true); //selecting by default recipient language same as interface
|
||||
//Anthology
|
||||
displayAnthology();
|
||||
$("#anthologyTitle").html(s.anthologie);
|
||||
$("#anthologyDisclaimer").html(s.suppr_message_public);
|
||||
$("#closeAnthologyAbout").html(s.retour_carte);
|
||||
|
||||
//About
|
||||
$("#aboutTitle").html(s.apropos);
|
||||
|
||||
Reference in New Issue
Block a user