js first commit
This commit is contained in:
leomartine
parent
63de1dd74a
commit
46d23393e3
73
src/app.css
Normal file
73
src/app.css
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'PT Mono', monospace;
|
||||||
|
/* font-family: 'Special Elite', cursive !important */
|
||||||
|
}
|
||||||
|
|
||||||
|
#map {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
/* Set the fixed height of the footer here */
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px; /* Vertically center the text there */
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
font-size: 12px
|
||||||
|
}
|
||||||
|
|
||||||
|
/* removing footer on mobile */
|
||||||
|
@media screen and (max-width: 400px) {
|
||||||
|
.footer {
|
||||||
|
display:none
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* big modal */
|
||||||
|
.modal-lg {
|
||||||
|
max-width:1140px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapboxgl-map{
|
||||||
|
font-family: 'PT Mono', monospace;
|
||||||
|
/* font-family: 'Special Elite', cursive !important */
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapboxgl-ctrl-logo{
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* paper plane animation */
|
||||||
|
#canvas3d{
|
||||||
|
display:none;
|
||||||
|
transition: all .3s;
|
||||||
|
position:fixed;
|
||||||
|
height:100vh;
|
||||||
|
width:100vw;
|
||||||
|
background-color: rgba(0,0,0,0);
|
||||||
|
z-index:9999;
|
||||||
|
margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
|
||||||
|
transform: translateY(-50%) translateX(-50%); /* tiré de la moitié de sa propre hauteur */
|
||||||
|
margin-left: 50vw; /* poussé de la moitié de hauteur de viewport */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* qill text editor */
|
||||||
|
#messageTextArea {
|
||||||
|
min-height: 200px;
|
||||||
|
border-radius: 0px 0px .25em .25em !important;
|
||||||
|
border-color: #ced4da !important
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-toolbar{
|
||||||
|
border-radius: .25em .25em 0px 0px !important;
|
||||||
|
border-color: #ced4da !important
|
||||||
|
}
|
||||||
|
|
||||||
4
src/config.js
Normal file
4
src/config.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
var config = {
|
||||||
|
mapboxKey: 'pk.eyJ1IjoibGVvLWlnYSIsImEiOiJjazY2bGV3MTYxMjV3M25sMmdtNWluM2wzIn0.2THSqD6nz9OhE0Xsjnbw1g',
|
||||||
|
owmKey: "39d5c3be709ba4f5b6230cdffdedd2ac",
|
||||||
|
}
|
||||||
67
src/geocoder.js
Normal file
67
src/geocoder.js
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
let langGeocoder = "fr"
|
||||||
|
|
||||||
|
// Expediteur
|
||||||
|
var expeLocList = []
|
||||||
|
var expeLoc;
|
||||||
|
$('#expeGeocoderPhoton').typeahead({
|
||||||
|
source: function (query, process) {
|
||||||
|
expeLocList = []
|
||||||
|
var url = "https://photon.komoot.io/api?q="+query+"&lang="+langGeocoder+"&limit=4&osm_tag=place:city&osm_tag=place:town&osm_tag=place:village&osm_tag=place:municipality";
|
||||||
|
var res = []
|
||||||
|
return $.getJSON(url,function(data){
|
||||||
|
for (var i in data.features){
|
||||||
|
res.push(data.features[i].properties.name+" ("+data.features[i].properties.state+", "+data.features[i].properties.country+")")
|
||||||
|
expeLocList.push({
|
||||||
|
name: data.features[i].properties.name,
|
||||||
|
center: data.features[i].geometry.coordinates,
|
||||||
|
fullname: data.features[i].properties.name+" ("+data.features[i].properties.state+", "+data.features[i].properties.country+")"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return process(res)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
matcher: function(item){ //needed when spelling not exact
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
|
||||||
|
afterSelect: function (obj) {
|
||||||
|
for (var i in expeLocList){
|
||||||
|
if (expeLocList[i].fullname == obj){
|
||||||
|
expeLoc = expeLocList[i]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
//Destinataire
|
||||||
|
var destLocList = []
|
||||||
|
var destLoc;
|
||||||
|
$('#destGeocoderPhoton').typeahead({
|
||||||
|
source: function (query, process) {
|
||||||
|
destLocList = []
|
||||||
|
var url = "https://photon.komoot.io/api?q="+query+"&lang="+langGeocoder+"&limit=4&osm_tag=place:city&osm_tag=place:town&osm_tag=place:village&osm_tag=place:municipality";
|
||||||
|
var res = []
|
||||||
|
return $.getJSON(url,function(data){
|
||||||
|
for (var i in data.features){
|
||||||
|
res.push(data.features[i].properties.name+" ("+data.features[i].properties.state+", "+data.features[i].properties.country+")")
|
||||||
|
destLocList.push({
|
||||||
|
name: data.features[i].properties.name,
|
||||||
|
center: data.features[i].geometry.coordinates,
|
||||||
|
fullname: data.features[i].properties.name+" ("+data.features[i].properties.state+", "+data.features[i].properties.country+")"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return process(res)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
matcher: function(item){ //needed when spelling not exact
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
|
||||||
|
afterSelect: function (obj) {
|
||||||
|
for (var i in destLocList){
|
||||||
|
if (destLocList[i].fullname == obj){
|
||||||
|
destLoc = destLocList[i]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
266
src/map.js
Normal file
266
src/map.js
Normal file
@ -0,0 +1,266 @@
|
|||||||
|
mapboxgl.accessToken = config.mapboxKey;
|
||||||
|
const owmKey = config.owmKey
|
||||||
|
|
||||||
|
var map = new mapboxgl.Map({
|
||||||
|
container: 'map',
|
||||||
|
style: {
|
||||||
|
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
|
||||||
|
"light": {
|
||||||
|
"anchor": "viewport",
|
||||||
|
"color": "white",
|
||||||
|
"intensity": 0.1
|
||||||
|
},
|
||||||
|
'version': 8,
|
||||||
|
'sources': {
|
||||||
|
'default-background': {
|
||||||
|
'type': 'raster',
|
||||||
|
'tiles': [
|
||||||
|
//'https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_CityLights_2012/default//GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpg'
|
||||||
|
//'https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}'
|
||||||
|
//'https://stamen-tiles-b.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'
|
||||||
|
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
|
||||||
|
],
|
||||||
|
'tileSize': 256
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'layers': [{
|
||||||
|
id: 'background',
|
||||||
|
type: 'background',
|
||||||
|
paint: {
|
||||||
|
'background-color': '#ffffff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id': 'default-background',
|
||||||
|
'type': 'raster',
|
||||||
|
'source': 'default-background',
|
||||||
|
'minzoom': 0,
|
||||||
|
'maxzoom': 18
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
center: [0, 20],
|
||||||
|
zoom: 2,
|
||||||
|
attributionControl: false
|
||||||
|
|
||||||
|
});
|
||||||
|
//prevent world duplication
|
||||||
|
map.setRenderWorldCopies(status === 'false')
|
||||||
|
|
||||||
|
map.on('load', function () {
|
||||||
|
//displaying clouds from OpenWeatherMap free API not enough
|
||||||
|
|
||||||
|
// map.addSource('clouds', {
|
||||||
|
// 'type': 'raster',
|
||||||
|
// 'tiles': [
|
||||||
|
// 'https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid='+owmKey+''
|
||||||
|
// ],
|
||||||
|
// 'tileSize': 256
|
||||||
|
// });
|
||||||
|
|
||||||
|
// map.addLayer({
|
||||||
|
// 'id': 'clouds',
|
||||||
|
// 'type': 'raster',
|
||||||
|
// 'source': 'clouds',
|
||||||
|
// 'minzoom': 0,
|
||||||
|
// 'maxzoom': 10,
|
||||||
|
// 'paint':{
|
||||||
|
// 'raster-opacity':0.5
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
//loading icons and colors, too lazy to make a loop, to change.
|
||||||
|
map.loadImage('src/img/plane-FFE419.png',
|
||||||
|
function (error, image) {
|
||||||
|
if (error) throw error;
|
||||||
|
map.addImage('plane-FFE419', image);
|
||||||
|
})
|
||||||
|
map.loadImage('src/img/plane-66FF00.png',
|
||||||
|
function (error, image) {
|
||||||
|
if (error) throw error;
|
||||||
|
map.addImage('plane-66FF00', image);
|
||||||
|
})
|
||||||
|
map.loadImage('src/img/plane-FF5555.png',
|
||||||
|
function (error, image) {
|
||||||
|
if (error) throw error;
|
||||||
|
map.addImage('plane-FF5555', image);
|
||||||
|
})
|
||||||
|
var colors = ["FFE419","66FF00","FF5555"]
|
||||||
|
|
||||||
|
//get now in GMT+0
|
||||||
|
var nowGMTSeconds = moment.tz(new Date(), "Europe/London").unix()
|
||||||
|
|
||||||
|
//get the planes from firestore
|
||||||
|
db.collection("planes").where("deliverySecondsServer", ">", nowGMTSeconds).get().then((querySnapshot) => { //change query to get only the ones who are still flying
|
||||||
|
querySnapshot.forEach((doc) => {
|
||||||
|
var id = doc.id
|
||||||
|
var data = doc.data()
|
||||||
|
//creating arcs
|
||||||
|
var line = turf.lineString([data.startCoordo,data.destCoordo])
|
||||||
|
var lineDistance = turf.length(line);
|
||||||
|
var arc = [];
|
||||||
|
var steps = 500;
|
||||||
|
for (var i = 0; i < lineDistance; i += lineDistance / steps) {
|
||||||
|
var segment = turf.along(line, i);
|
||||||
|
arc.push(segment.geometry.coordinates);
|
||||||
|
}
|
||||||
|
line.geometry.coordinates = arc;
|
||||||
|
|
||||||
|
//random color
|
||||||
|
var randomColor = colors[Math.floor(Math.random() * colors.length)];
|
||||||
|
|
||||||
|
map.addSource('route-'+id+'', {
|
||||||
|
'type': 'geojson',
|
||||||
|
'data': line
|
||||||
|
});
|
||||||
|
map.addLayer({
|
||||||
|
'id': 'route-'+id+'',
|
||||||
|
'source': 'route-'+id+'',
|
||||||
|
'type': 'line',
|
||||||
|
'paint': {
|
||||||
|
'line-width': 2,
|
||||||
|
'line-color': '#'+randomColor
|
||||||
|
}
|
||||||
|
});
|
||||||
|
map.setLayoutProperty('route-'+id+'', 'visibility', 'none');
|
||||||
|
|
||||||
|
|
||||||
|
//creating and animating planes
|
||||||
|
|
||||||
|
// calculating area already travelled
|
||||||
|
var dateStart = moment(data.sentDate[0])
|
||||||
|
var dateEnd = moment(data.deliveryDate[0])
|
||||||
|
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 currentPosition = turf.along(line, lineDistance*travelRatio,{units: 'kilometers'})
|
||||||
|
var plane = turf.point(currentPosition.geometry.coordinates,data)
|
||||||
|
|
||||||
|
//calculating bearing based on two points, one just before and one just after
|
||||||
|
var positionBefore = turf.along(line, (lineDistance*travelRatio)-0.00001,{units: 'kilometers'})
|
||||||
|
var positionAfter = turf.along(line, (lineDistance*travelRatio)+0.00001,{units: 'kilometers'})
|
||||||
|
plane.properties.bearing = turf.bearing(
|
||||||
|
positionBefore,
|
||||||
|
positionAfter
|
||||||
|
);
|
||||||
|
|
||||||
|
map.addSource('plane-'+id+'', {
|
||||||
|
'type': 'geojson',
|
||||||
|
'data': plane
|
||||||
|
});
|
||||||
|
map.addLayer({
|
||||||
|
'id': 'plane-'+id+'',
|
||||||
|
'source': 'plane-'+id+'',
|
||||||
|
'type': 'symbol',
|
||||||
|
'layout': {
|
||||||
|
'icon-image': 'plane-'+randomColor+'',
|
||||||
|
'icon-rotate': ['get', 'bearing'],
|
||||||
|
'icon-size':0.05,
|
||||||
|
'icon-rotation-alignment': 'map',
|
||||||
|
'icon-allow-overlap': true,
|
||||||
|
'icon-ignore-placement': true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//animating
|
||||||
|
function animate(){
|
||||||
|
var dateStart = moment(data.sentDate[0])
|
||||||
|
var dateEnd = moment(data.deliveryDate[0])
|
||||||
|
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 currentPosition = turf.along(line, lineDistance*travelRatio,{units: 'kilometers'})
|
||||||
|
var plane = turf.point(currentPosition.geometry.coordinates,data)
|
||||||
|
|
||||||
|
//calculating bearing based on two points, one just before and one just after
|
||||||
|
var positionBefore = turf.along(line, (lineDistance*travelRatio)-0.00001,{units: 'kilometers'})
|
||||||
|
var positionAfter = turf.along(line, (lineDistance*travelRatio)+0.00001,{units: 'kilometers'})
|
||||||
|
plane.properties.bearing = turf.bearing(
|
||||||
|
positionBefore,
|
||||||
|
positionAfter
|
||||||
|
);
|
||||||
|
map.getSource('plane-'+id+'').setData(plane);
|
||||||
|
var nowGMTSeconds = moment.tz(new Date(), "Europe/London").unix()
|
||||||
|
//removing the plane from map if arrived
|
||||||
|
if (data.deliverySecondsServer < nowGMTSeconds){
|
||||||
|
map.setLayoutProperty('plane-'+id+'', 'visibility', 'none');
|
||||||
|
}
|
||||||
|
requestAnimationFrame(animate)
|
||||||
|
}
|
||||||
|
// uncomment to animate below, still some clipping issues
|
||||||
|
//animate()
|
||||||
|
|
||||||
|
//on click on a plane: get popup + display route
|
||||||
|
map.on('click', 'plane-'+id+'', function (e) {
|
||||||
|
var coordinates = e.features[0].geometry.coordinates.slice();
|
||||||
|
var prop = e.features[0].properties;
|
||||||
|
var sentDate = JSON.parse(prop.sentDate)[0]
|
||||||
|
var deliveryDate = JSON.parse(prop.deliveryDate)[0]
|
||||||
|
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
|
||||||
|
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
|
||||||
|
}
|
||||||
|
//displying route
|
||||||
|
map.setLayoutProperty('route-'+id+'', 'visibility', 'visible');
|
||||||
|
|
||||||
|
var popup = new mapboxgl.Popup()
|
||||||
|
.setLngLat(coordinates)
|
||||||
|
.setHTML("<b>Origine:</b> "+prop.startName+"<br><em>"+sentDate+"</em><br><b>Destination:</b> "+prop.destName+"<br><em>"+deliveryDate+"</em>")
|
||||||
|
.addTo(map);
|
||||||
|
//removing route
|
||||||
|
popup.on('close', function(){
|
||||||
|
map.setLayoutProperty('route-'+id+'', 'visibility', 'none');
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
// Change the cursor to a pointer when the mouse is over the places layer.
|
||||||
|
map.on('mouseenter', 'plane-'+id+'', function () {
|
||||||
|
map.getCanvas().style.cursor = 'pointer';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Change it back to a pointer when it leaves.
|
||||||
|
map.on('mouseleave', 'plane-'+id+'', function () {
|
||||||
|
map.getCanvas().style.cursor = '';
|
||||||
|
});
|
||||||
|
|
||||||
|
//adapt icon size to zoom level
|
||||||
|
map.on('zoom', function() {
|
||||||
|
map.setLayoutProperty('plane-'+id+'', 'icon-size', (map.getZoom())*0.025);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//URL Parameter : zooming to ID and opening popup when url in format avion-poe.me?plane=id
|
||||||
|
var queryString = window.location.search;
|
||||||
|
queryString = queryString.substring(7)
|
||||||
|
if(id == queryString){
|
||||||
|
map.setLayoutProperty('route-'+id+'', 'visibility', 'visible');
|
||||||
|
var bboxTravel = turf.bbox(line);
|
||||||
|
var bounds = [[bboxTravel[0],bboxTravel[1]],[bboxTravel[2],bboxTravel[3]]]
|
||||||
|
map.fitBounds(bounds, {
|
||||||
|
padding: 65,
|
||||||
|
speed: 0.5, // make the flying slow
|
||||||
|
curve: 0.8, // change the speed at which it zooms out
|
||||||
|
// This can be any easing function: it takes a number between
|
||||||
|
// 0 and 1 and returns another number between 0 and 1.
|
||||||
|
easing: function(
|
||||||
|
t) {
|
||||||
|
return t;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
var sentDate = plane.properties.sentDate[0]
|
||||||
|
var deliveryDate = plane.properties.deliveryDate[0]
|
||||||
|
var popup = new mapboxgl.Popup()
|
||||||
|
.setLngLat(currentPosition.geometry.coordinates)
|
||||||
|
.setHTML("<b>Origine:</b> "+plane.properties.startName+"<br><em>"+sentDate+"</em><br><b>Destination:</b> "+plane.properties.destName+"<br><em>"+deliveryDate+"</em>")
|
||||||
|
.addTo(map);
|
||||||
|
//removing route
|
||||||
|
popup.on('close', function(){
|
||||||
|
map.setLayoutProperty('route-'+id+'', 'visibility', 'none');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
111
src/newPlane.js
Normal file
111
src/newPlane.js
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
// init text editor in modal
|
||||||
|
var quill = new Quill('#messageTextArea', {
|
||||||
|
modules: {
|
||||||
|
toolbar: [
|
||||||
|
[{ 'size': ['small', false, 'large'] }],
|
||||||
|
[{ 'font': [] }],
|
||||||
|
['bold', 'italic', 'underline','strike'],
|
||||||
|
[{ 'color': [] }],
|
||||||
|
]
|
||||||
|
},
|
||||||
|
placeholder: '',
|
||||||
|
theme: 'snow' // or 'bubble',
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#sendNewPlane").on('click',function(){
|
||||||
|
|
||||||
|
//hiding navbar
|
||||||
|
$('.navbar-collapse').collapse('hide');
|
||||||
|
//hiding modal
|
||||||
|
$("#newPlaneModal").modal('hide')
|
||||||
|
|
||||||
|
var line = turf.lineString([expeLoc.center,destLoc.center]) //create line between start and end
|
||||||
|
var length = turf.length(line) //get length in Km
|
||||||
|
var speed = 30 //speed in km/h
|
||||||
|
var time = length/speed //time to delivery in hours
|
||||||
|
|
||||||
|
|
||||||
|
//get the local time with TZ for starting point
|
||||||
|
$.getJSON('https://api.mapbox.com/v4/examples.4ze9z6tv/tilequery/'+expeLoc.center[0]+','+expeLoc.center[1]+'.json?access_token='+mapboxgl.accessToken+'',function(startTime){
|
||||||
|
var expeTimezone = startTime.features[0].properties.TZID;
|
||||||
|
var sentDate = moment.tz(new Date(), expeTimezone);
|
||||||
|
sentDate = [sentDate.format(),expeTimezone]
|
||||||
|
|
||||||
|
//get the local time with TZ for end point
|
||||||
|
$.getJSON('https://api.mapbox.com/v4/examples.4ze9z6tv/tilequery/'+destLoc.center[0]+','+destLoc.center[1]+'.json?access_token='+mapboxgl.accessToken+'',function(endTime){
|
||||||
|
var destTimezone = endTime.features[0].properties.TZID;
|
||||||
|
var endDate = moment.tz(new Date(), destTimezone);
|
||||||
|
var deliveryDate = endDate.add(time, 'hours') // adding hours
|
||||||
|
deliveryDate = [endDate.format(),destTimezone]
|
||||||
|
|
||||||
|
//storing the endDate in GMT+0 in seconds for the query
|
||||||
|
var deliverySecondsServer = moment.tz(new Date(), "Europe/London").add(time, 'hours').unix()
|
||||||
|
|
||||||
|
var publicMessage = $("#publicMessage").prop("checked")
|
||||||
|
var message = $("#messageTextArea").val()
|
||||||
|
|
||||||
|
var data = {
|
||||||
|
'message':message,
|
||||||
|
'public':publicMessage,
|
||||||
|
'expeMail':$("#expeMail").val(),
|
||||||
|
'destMail':$("#destMail").val(),
|
||||||
|
'expeName':expeLoc.name,
|
||||||
|
'destName':destLoc.name,
|
||||||
|
'expeCoordo':expeLoc.center,
|
||||||
|
'destCoordo':destLoc.center,
|
||||||
|
'sentDate': sentDate,
|
||||||
|
'deliveryDate':deliveryDate,
|
||||||
|
'deliverySecondsServer':deliverySecondsServer,
|
||||||
|
}
|
||||||
|
//sending confirm mail
|
||||||
|
|
||||||
|
//sending notif mail
|
||||||
|
|
||||||
|
//scheduling mail
|
||||||
|
|
||||||
|
//adding the plane
|
||||||
|
var planes = db.collection('planes')
|
||||||
|
if (!publicMessage){ //removing message from DB if not public
|
||||||
|
data.message = ''
|
||||||
|
}
|
||||||
|
planes.add({
|
||||||
|
public: data.public,
|
||||||
|
message:data.message,
|
||||||
|
destName: data.destName,
|
||||||
|
destCoordo: data.destCoordo,
|
||||||
|
startName: data.expeName,
|
||||||
|
startCoordo: data.expeCoordo,
|
||||||
|
sentDate: data.sentDate,
|
||||||
|
deliveryDate: data.deliveryDate,
|
||||||
|
deliverySecondsServer: data.deliverySecondsServer
|
||||||
|
});
|
||||||
|
|
||||||
|
// creating image for plane, need to link it to the inputs tog et entered values.
|
||||||
|
var canvas = document.getElementById("blankCanvas");
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
ctx.fillStyle = "rgb(255,255,255)";
|
||||||
|
ctx.fillRect(0,0,400,400);
|
||||||
|
ctx.fillStyle = "rgb(0,0,0)";
|
||||||
|
ctx.font = "9px Courier";
|
||||||
|
ctx.fillText("Message: .- / -- --- -. / ... . -. ... --..-- /",10,60);
|
||||||
|
ctx.fillText("Expediteur: leo.martine@yahoo.fr - Annemasse",10,300);
|
||||||
|
ctx.fillText("Destinataire: leo.martine@yahoo.fr - Lyon",10,320);
|
||||||
|
$("#front").attr('src',document.getElementById("blankCanvas").toDataURL())
|
||||||
|
|
||||||
|
|
||||||
|
//display and animate plane
|
||||||
|
$("#canvas3d").css('display','block')
|
||||||
|
animePlane()
|
||||||
|
//moving plane at the end
|
||||||
|
setInterval(function(){
|
||||||
|
$("#canvas3d").css('transition','transform 2500ms ease-in-out')
|
||||||
|
$("#canvas3d").css('transform','translate(50vw, -150vh)')
|
||||||
|
},4400);
|
||||||
|
//reloading page (to change)
|
||||||
|
setInterval(function(){
|
||||||
|
window.location.href = "http://127.0.0.1:8887/?plane=1FTMbm9V9eindbwoJ9uW";
|
||||||
|
},5500);
|
||||||
|
|
||||||
|
})
|
||||||
|
});
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user