96 lines
2.3 KiB
JavaScript
96 lines
2.3 KiB
JavaScript
//engine.js
|
|
|
|
let map;
|
|
let point;
|
|
|
|
const arrows = ["↑", "↗", "→", "↘", "↓", "↙", "←", "↖"];
|
|
const socket = new WebSocket("wss://trackme.ovh/ws");
|
|
|
|
function create_location(coords, text) {
|
|
point = L.marker(coords, {
|
|
color: 'red',
|
|
fillColor: '#f03',
|
|
fillOpacity: 0.5,
|
|
radius: 50
|
|
}).addTo(map).bindPopup(text);
|
|
point.getPopup().autoPan=false;
|
|
point.openPopup();
|
|
}
|
|
|
|
function create_map(coords) {
|
|
map = L.map('map', {
|
|
center: coords,
|
|
zoom: 15
|
|
});
|
|
L.tileLayer(`https://tile.openstreetmap.org/{z}/{x}/{y}.png`, {
|
|
maxZoom: 19,
|
|
attribution: `© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> / <a href="https://www.paulbsd.com">PaulBSD</a>`
|
|
}).addTo(map);
|
|
map.zoomControl.setPosition('bottomright');
|
|
}
|
|
|
|
function update(data) {
|
|
const coords = [data.latitude,data.longitude];
|
|
const speed = data.speed/10;
|
|
let section = parseInt(data.direction/45 + 0.5);
|
|
section = section % 8;
|
|
const text = `time: ${data.time}<br/>latitude: ${data.latitude}<br/>longitude: ${data.longitude}<br/>height: ${data.height}<br/>speed: ${speed}<br/>direction: ${arrows[section]} ${data.direction}°<br/>serial: ${data.serial}`;
|
|
if (map) {
|
|
map.setView(coords);
|
|
map.flyTo(coords);
|
|
} else {
|
|
create_map(coords);
|
|
}
|
|
if (point) {
|
|
point.setLatLng(coords);
|
|
point.setPopupContent(text);
|
|
} else {
|
|
create_location(coords, text);
|
|
}
|
|
}
|
|
|
|
function ping() {
|
|
socket.send("ping");
|
|
}
|
|
|
|
socket.addEventListener("message", (event) => {
|
|
const data = JSON.parse(event.data);
|
|
update(data);
|
|
});
|
|
|
|
socket.addEventListener("open", (event) => {
|
|
console.log(event);
|
|
socket.send("ping");
|
|
});
|
|
|
|
setInterval(ping, 1000)
|
|
|
|
// service worker
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('/engine.js')
|
|
.then((reg) => {
|
|
console.log('Enregistrement réussi');
|
|
}).catch((error) => {
|
|
console.log('Erreur : ' + error);
|
|
});
|
|
}
|
|
|
|
const CACHE_NAME = 'my-site-cache-v1';
|
|
const urlsToCache = [
|
|
'/',
|
|
'/leaflet/leaflet.js',
|
|
'/engine.js',
|
|
'/style.css',
|
|
];
|
|
|
|
self.addEventListener('install', function(event) {
|
|
// Perform install steps
|
|
event.waitUntil(
|
|
caches.open(CACHE_NAME)
|
|
.then(function(cache) {
|
|
console.log('Opened cache');
|
|
return cache.addAll(urlsToCache);
|
|
})
|
|
);
|
|
});
|