From b0ccf9284d8f3a7ea33f076ffb149acc308f9b38 Mon Sep 17 00:00:00 2001 From: Sylvain Gay Date: Wed, 14 Sep 2022 10:52:29 +0200 Subject: [PATCH] factorisation du code client --- static/admin.html | 99 ++--------------------------- static/conscrit.html | 129 +++----------------------------------- static/utils.js | 142 ++++++++++++++++++++++++++++++++++++++++++ static/vieilleux.html | 130 +++----------------------------------- 4 files changed, 162 insertions(+), 338 deletions(-) create mode 100644 static/utils.js diff --git a/static/admin.html b/static/admin.html index 0951fcc..a5e904b 100644 --- a/static/admin.html +++ b/static/admin.html @@ -19,6 +19,8 @@ + +

@@ -26,58 +28,10 @@
diff --git a/static/conscrit.html b/static/conscrit.html index 11209f1..90e4563 100644 --- a/static/conscrit.html +++ b/static/conscrit.html @@ -19,6 +19,8 @@ + +

@@ -27,120 +29,17 @@
diff --git a/static/utils.js b/static/utils.js new file mode 100644 index 0000000..45a305a --- /dev/null +++ b/static/utils.js @@ -0,0 +1,142 @@ +var protocol = location.protocol; +var server = location.hostname; +var port = location.port; +var socket = io.connect({rejectUnauthorized: false}, + protocol+"://"+server+":"+port); + +var id = -1; +var names = []; +var colors = []; +var markers = []; +var icons = [ + L.icon({ + iconUrl: 'def.png', + iconSize: [10, 10], + iconAnchor: [5, 5], + popupAnchor: [5, 5], + //shadowUrl: 'my-icon-shadow.png', + //shadowSize: [68, 95], + //shadowAnchor: [22, 94] + }), + L.icon({ + iconUrl: 'track.png', + iconSize: [10, 10], + iconAnchor: [5, 5], + popupAnchor: [5, 5], + //shadowUrl: 'my-icon-shadow.png', + //shadowSize: [68, 95], + //shadowAnchor: [22, 94] + }) +]; +var self_icons = icons; +var self_invisible = + L.icon({ + iconUrl: 'invi.png', + iconSize: [10, 10], + iconAnchor: [5, 5], + popupAnchor: [5, 5], + //shadowUrl: 'my-icon-shadow.png', + //shadowSize: [68, 95], + //shadowAnchor: [22, 94] + }); + +////////////////////////////////////////////////////////////////////////////// +// INIT MAP + +var map; + +function setup_map(){ + map = L.map('map').setView([48.8448, 2.3550], 13); + + L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: '© OpenStreetMap' + }).addTo(map); +} + +////////////////////////////////////////////////////////////////////////////// +// UPDATE MAP + +function setup_socket_common(){ + socket.on("moving", function(data){ + console.log("moving", data); + if(!(data.id in markers)){ + if(!(data.id in colors)) + colors[data.id] = 0; + var icon; + if(data.id == id) + icon = self_icons[colors[data.id]]; + else + icon = icons[colors[data.id]]; + markers[data.id] = L.marker(data.position, {"icon": icon}).addTo(map); + if(data.id == id) + markers[data.id].setZIndexOffset(10000); + if(data.id in names) + markers[data.id].bindPopup(names[data.id]); + } else{ + markers[data.id].setLatLng(data.position); + } + }); + + socket.on("popup", function(data){ + alert(data.content); + }); + + socket.on("setName", function(data){ + console.log("setName", data); + names[data.id] = data.name; + if(data.id in markers) + markers[data.id].bindPopup(data.name); + }); +} + +function setup_socket_not_admin(){ + socket.on("yourId", function(data){ + console.log("yourId", data); + id = data.id; + if(!(id in colors)) + colors[id] = 0; + if(id in markers) + markers[id].setIcon(self_icons[colors[id]]); + }); + + socket.on("changeColor", function(data){ + console.log("changeColor", data); + if(data.id in colors && colors[data.id] == -1 && data.id in markers) + markers[data.id].addTo(map); + colors[data.id] = data.color; + if(data.id in markers){ + if(data.id == id) + if(data.color == -1) + markers[data.id].setIcon(self_invisible); + else + markers[data.id].setIcon(self_icons[data.color]); + else + if(data.color == -1) + markers[data.id].setLatLng([0,0]); + else + markers[data.id].setIcon(icons[data.color]); + } + }); +} + +////////////////////////////////////////////////////////////////////////////// +// GEOLOCALISATION + +function setup_geoLoc(){ + function geoLoc_success(pos) { + socket.emit("geoLoc", {"position": [pos.coords.latitude, pos.coords.longitude]}); + } + + function geoLoc_error(err) { + console.error(`ERROR(${err.code}): ${err.message}`); + } + + var options = { + enableHighAccuracy: false, + timeout: 5000, + maximumAge: 0 + }; + + navigator.geolocation.watchPosition(geoLoc_success, geoLoc_error, options); +} \ No newline at end of file diff --git a/static/vieilleux.html b/static/vieilleux.html index d82d89d..5804e2e 100644 --- a/static/vieilleux.html +++ b/static/vieilleux.html @@ -19,6 +19,8 @@ + +

@@ -27,118 +29,16 @@