rgutierrez/resq
1
0
Fork 0
Code Issues 126 Pull requests 49 Projects Releases 4 Packages Wiki Activity Actions

Refactor dashboard map js to use classes #299

Browse source
This commit is contained in:
Kendrick Chan 2020-01-25 01:57:15 +08:00
parent 66be351bd3
commit c753be54cb
7 changed files with 315 additions and 234 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
composer.json
View file

@ -17,6 +17,7 @@
"predis/predis": "^1.1",
"sensio/framework-extra-bundle": "^5.1",
"setasign/fpdf": "^1.8",
"symfony/asset": "^4.0",
"symfony/console": "^4.0",
"symfony/debug": "^4.0",
"symfony/filesystem": "^4.0",

60
composer.lock generated
View file

@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
"This file is @generated automatically"
],
"content-hash": "4873ae3fd18db755bc9bf395bbbfb141",
"content-hash": "b101ecfbc1f6f2270f0e8ad326035b7e",
"packages": [
{
"name": "catalyst/auth-bundle",
@ -2411,6 +2411,62 @@
],
"time": "2016-01-01T17:47:15+00:00"
},
{
"name": "symfony/asset",
"version": "v4.4.3",
"source": {
"type": "git",
"url": "https://github.com/symfony/asset.git",
"reference": "2c67c89d064bfb689ea6bc41217c87100bb94c17"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/asset/zipball/2c67c89d064bfb689ea6bc41217c87100bb94c17",
"reference": "2c67c89d064bfb689ea6bc41217c87100bb94c17",
"shasum": ""
},
"require": {
"php": "^7.1.3"
},
"require-dev": {
"symfony/http-foundation": "^3.4|^4.0|^5.0",
"symfony/http-kernel": "^3.4|^4.0|^5.0"
},
"suggest": {
"symfony/http-foundation": ""
},
"type": "library",
"extra": {
"branch-alias": {
"dev-master": "4.4-dev"
}
},
"autoload": {
"psr-4": {
"Symfony\\Component\\Asset\\": ""
},
"exclude-from-classmap": [
"/Tests/"
]
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Fabien Potencier",
"email": "fabien@symfony.com"
},
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Symfony Asset Component",
"homepage": "https://symfony.com",
"time": "2020-01-04T13:00:46+00:00"
},
{
"name": "symfony/cache",
"version": "v4.3.1",
@ -5344,6 +5400,7 @@
"code",
"zf2"
],
"abandoned": "laminas/laminas-code",
"time": "2018-08-13T20:36:59+00:00"
},
{
@ -5398,6 +5455,7 @@
"events",
"zf2"
],
"abandoned": "laminas/laminas-eventmanager",
"time": "2018-04-25T15:33:34+00:00"
}
],

114
public/assets/js/dashboard_map.js Normal file
View file

@ -0,0 +1,114 @@
class DashboardMap {
constructor(options, rider_markers, cust_markers) {
this.options = options;
this.rider_markers = rider_markers;
this.cust_markers = cust_markers;
// layer groups
this.lg_avail_rider = L.layerGroup();
this.lg_jo_rider = L.layerGroup();
this.lg_cust = L.layerGroup();
}
initialize() {
// main map
this.map = L.map(this.options.div_id).setView(
[this.options.center_lat, this.options.center_lng],
this.options.zoom
);
// add tile layer
var streets = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
accessToken: this.options.access_token
}).addTo(this.map);
// layer groups
this.lg_avail_rider.addTo(this.map);
this.lg_jo_rider.addTo(this.map);
this.lg_cust.addTo(this.map);
// base layer
var baseMaps = {
'Streets': streets
};
// overlay layer
var overlayMaps = {
'Available Riders' : this.lg_avail_rider,
'JO Riders' : this.lg_jo_rider,
'Customers' : this.lg_cust
}
L.control.layers(baseMaps, overlayMaps).addTo(this.map);
return this.map;
}
loadLocations(location_url) {
console.log(this.rider_markers);
var my = this;
$.ajax({
url: location_url,
}).done(function(response) {
// clear all markers
my.lg_avail_rider.clearLayers();
my.lg_jo_rider.clearLayers();
my.lg_cust.clearLayers();
// get riders and mark
var riders = response.riders;
$.each(riders, function(rider_id, rider_data) {
// rider location
var point = rider_data['loc'];
var lat = point[0];
var long = point[1];
// customer location
var cloc = rider_data['cust_loc'];
var clat = cloc[0];
var clong = cloc[1];
// create rider markers
if (rider_data['has_jo']) {
var jo_data = rider_data['jo'];
my.rider_markers[rider_id] = L.marker([lat, long], { icon: my.options.icons.rider_active_jo }).bindPopup('Loading...');
my.cust_markers[jo_data['id']] = L.marker([clat, clong], { icon: my.options.icons.customer }).bindPopup('Loading...');
my.lg_cust.addLayer(my.cust_markers[jo_data['id']]);
my.lg_jo_rider.addLayer(my.rider_markers[rider_id]);
// customer popup ajax
my.cust_markers[jo_data['id']].on('click', function(e) {
var popup = e.target.getPopup();
var url = my.options.cust_popup_url.replace('[id]', jo_data['id']);
console.log(url);
$.get(url).done(function(data) {
popup.setContent(data);
popup.update();
});
});
} else {
my.rider_markers[rider_id]= L.marker([lat, long], { icon: my.options.icons.rider_available }).bindPopup('Loading...');
my.lg_avail_rider.addLayer(my.rider_markers[rider_id]);
}
// ajax loading of rider popup
my.rider_markers[rider_id].on('click', function(e) {
var popup = e.target.getPopup();
var url = my.options.rider_popup_url.replace('[id]', rider_id);
console.log(url);
$.get(url).done(function(data) {
popup.setContent(data);
popup.update();
});
});
});
// console.log(rider_markers);
});
}
}

81
public/assets/js/map_mqtt.js Normal file
View file

@ -0,0 +1,81 @@
class MapEventHandler {
constructor(options, rider_markers, cust_markers) {
this.options = options;
this.rider_markers = rider_markers;
this.cust_markers = cust_markers;
}
connect(user_id, host, port) {
var d = new Date();
var client_id = "dash-" + user_id + "-" + d.getMonth() + "-" + d.getDate() + "-" + d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds() + "-" + d.getMilliseconds();
console.log(client_id);
this.mqtt = new Paho.MQTT.Client(host, port, client_id);
var options = {
useSSL: true,
timeout: 3,
onSuccess: this.onConnect,
};
this.mqtt.onMessageArrived = this.onMessage;
console.log('connecting to mqtt server...');
this.mqtt.connect(options);
return this.mqtt;
}
onConnect() {
console.log('connected!');
this.mqtt.subscribe(this.options.channels.rider_location);
}
onMessage(msg) {
// console.log(msg);
console.log('received message');
var channel = msg.destinationName;
var chan_split = channel.split('/');
var payload = msg.payloadString;
// handle different channels
switch (chan_split[0]) {
case "rider":
this.handleRider(chan_split, payload);
break;
}
}
handleRider(chan_split, payload) {
console.log("rider message");
switch (chan_split[2]) {
case "location":
console.log("got location for rider " + chan_split[1] + " - " + payload);
pl_split = payload.split(':');
console.log(pl_split);
// check for correct format
if (pl_split.length != 2)
break;
var lat = parseFloat(pl_split[0]);
var lng = parseFloat(pl_split[1]);
// move marker
console.log(this.rider_markers[chan_split[1]]);
// check if marker exists
if (this.rider_markers.hasOwnProperty(chan_split[1])) {
// marker's there, move it
this.rider_markers[chan_split[1]].setLatLng(L.latLng(lat, lng));
} else {
// no marker, make one
console.log('creating marker');
// TODO: make it add to the correct map layer
this.rider_markers[chan_split[1]]= L.marker([lat, lng], { icon: this.options.icons.rider_available }).addTo(map);;
}
break;
}
}
}

3
symfony.lock
View file

@ -152,6 +152,9 @@
"setasign/fpdf": {
"version": "1.8.1"
},
"symfony/asset": {
"version": "v4.4.3"
},
"symfony/cache": {
"version": "v4.0.2"
},

141
templates/home.html.twig
View file

@ -13,111 +13,74 @@
{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
<script src="{{ asset('assets/js/dashboard_map.js') }}"></script>
<script src="{{ asset('assets/js/map_mqtt.js') }}"></script>
{{ include('map/' ~ map_js_file) }}
<script>
var map;
function initMap() {
function initMap(r_markers, c_markers, icons) {
var default_lat = {% trans %}default_lat{% endtrans %};
var default_lng = {% trans %}default_long{% endtrans %};
var rider_popup_url = '/riders/[id]/popup';
var cust_popup_url = '/job-order/[id]/popup';
map = mapCreate('dashboard_map', default_lat, default_lng, 'road', 13, rider_popup_url, cust_popup_url);
var options = {
'access_token': 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw',
'div_id': 'dashboard_map',
'center_lat': default_lat,
'center_lng': default_lng,
'map_type': 'road',
'zoom': 13,
'rider_popup_url': '/riders/[id]/popup',
'cust_popup_url': '/job-order/[id]/popup',
'icons': icons
};
var dashmap = new DashboardMap(options, r_markers, c_markers);
dashmap.initialize();
dashmap.loadLocations('{{ path('rider_locations') }}');
return dashmap;
}
</script>
{{ include('map/' ~ map_js_file) }}
function initEventHandler(dashmap) {
var options = {
'map': dashmap.map,
'channels': {
'rider_location': 'rider/+/location'
},
'icons': icons
};
var event_handler = new MapEventHandler(options, dashmap.rider_markers, dashmap.cust_markers);
event_handler.connect('{{ app.user.getID }}', '{{ mqtt_host }}', {{ mqtt_port }});
}
<script>
// TODO: put this in .env
var mqtt;
var timeout = 2000;
var host = '{{ mqtt_host }}';
var port = {{ mqtt_port }};
var icon_rider_available = L.divIcon({
// create icons
var icons = {
'rider_active_jo': L.divIcon({
className: 'map-div-icon',
html: "<div style='background-color:#FF0000;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
iconSize: [39, 42],
iconAnchor: [15, 42]
}),
'rider_available': L.divIcon({
className: 'map-div-icon',
html: "<div style='background-color:#00FF00;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
iconSize: [39, 42],
iconAnchor: [15, 42]
});
function onConnect() {
console.log('connected!');
mqtt.subscribe('rider/+/location');
}
function onMessage(msg) {
// console.log(msg);
console.log('received message');
var channel = msg.destinationName;
var chan_split = channel.split('/');
var payload = msg.payloadString;
// handle different channels
switch (chan_split[0]) {
case "rider":
handleRider(chan_split, payload);
break;
}
}
function handleRider(chan_split, payload) {
console.log("rider message");
switch (chan_split[2]) {
case "location":
console.log("got location for rider " + chan_split[1] + " - " + payload);
pl_split = payload.split(':');
console.log(pl_split);
// check for correct format
if (pl_split.length != 2)
break;
var lat = parseFloat(pl_split[0]);
var lng = parseFloat(pl_split[1]);
// move marker
console.log(rider_markers[chan_split[1]]);
// check if marker exists
if (rider_markers.hasOwnProperty(chan_split[1])) {
// marker's there, move it
rider_markers[chan_split[1]].setLatLng(L.latLng(lat, lng));
} else {
// no marker, make one
console.log('creating marker');
// TODO: make it add to the correct map layer
rider_markers[chan_split[1]]= L.marker([lat, lng], { icon: icon_rider_available }).addTo(map);;
}
break;
}
}
function mqttConnect() {
var d = new Date();
var client_id = "dash-{{ app.user.getID }}-" + d.getMonth() + "-" + d.getDate() + "-" + d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds() + "-" + d.getMilliseconds();
console.log(client_id);
mqtt = new Paho.MQTT.Client(host, port, client_id);
var options = {
useSSL: true,
timeout: 3,
onSuccess: onConnect,
}),
'customer': L.divIcon({
className: 'map-div-icon',
html: "<div style='background-color:#0055FF;' class='marker-pin'></div><i class='fa fa-user awesome'>",
iconSize: [39, 42],
iconAnchor: [15, 42]
})
};
mqtt.onMessageArrived = onMessage;
var r_markers = {};
var c_markers = {};
console.log('connecting to mqtt server...');
mqtt.connect(options);
}
mqttConnect();
var dashmap = initMap(r_markers, c_markers, icons);
initEventHandler(dashmap, icons);
</script>
{% endblock %}

139
templates/map/initOpenStreetMap.js
View file

@ -2,142 +2,3 @@
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin="">
</script>
<script>
var rider_markers = {};
var cust_markers = {};
function mapCreate(div_id, center_lat, center_lng, map_type, zoom, rider_popup_url, cust_popup_url) {
var map = L.map(div_id).setView(
[center_lat, center_lng],
zoom
);
// add tile layer
// TODO: put access token in .env
var streets = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
accessToken: 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw'
}).addTo(map);
// layer groups
// .addTo(map) --> this will display your riders by default
var lg_avail_rider = L.layerGroup().addTo(map);
var lg_jo_rider = L.layerGroup().addTo(map);
var lg_cust = L.layerGroup().addTo(map);
// this little snippet will not display your riders by default.
// Instead, a toggle button will display in the map, with a checkbox with text Riders.
// Check that to display the riders
//var ridersLayerGroup = L.layerGroup();
// create icons
var icon_rider_active_jo = L.divIcon({
className: 'map-div-icon',
html: "<div style='background-color:#FF0000;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
iconSize: [39, 42],
iconAnchor: [15, 42]
});
var icon_rider_available = L.divIcon({
className: 'map-div-icon',
html: "<div style='background-color:#00FF00;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
iconSize: [39, 42],
iconAnchor: [15, 42]
});
var icon_customer = L.divIcon({
className: 'map-div-icon',
html: "<div style='background-color:#0055FF;' class='marker-pin'></div><i class='fa fa-user awesome'>",
iconSize: [39, 42],
iconAnchor: [15, 42]
});
$.ajax({
url: '{{ path('rider_locations') }}',
}).done(function(response) {
// clear all markers
lg_avail_rider.clearLayers();
lg_jo_rider.clearLayers();
lg_cust.clearLayers();
// get riders and mark
var riders = response.riders;
$.each(riders, function(rider_id, rider_data) {
// rider location
var point = rider_data['loc'];
var lat = point[0];
var long = point[1];
// customer location
var cloc = rider_data['cust_loc'];
var clat = cloc[0];
var clong = cloc[1];
// rider popup content
rider_popup = '<strong>' + rider_data['label'] + '</strong>';
// create rider markers
if (rider_data['has_jo']) {
var jo_data = rider_data['jo'];
// rider_markers[rider_id] = L.marker([lat, long], { icon: icon_rider_active_jo }).bindPopup(rider_popup);
rider_markers[rider_id] = L.marker([lat, long], { icon: icon_rider_active_jo }).bindPopup('Loading...');
// var cust_marker = L.marker([clat, clong], { icon: icon_customer }).bindPopup('Loading...');
cust_markers[jo_data['id']] = L.marker([clat, clong], { icon: icon_customer }).bindPopup('Loading...');
lg_cust.addLayer(cust_markers[jo_data['id']]);
lg_jo_rider.addLayer(rider_markers[rider_id]);
// customer popup ajax
cust_markers[jo_data['id']].on('click', function(e) {
var popup = e.target.getPopup();
var url = cust_popup_url.replace('[id]', jo_data['id']);
console.log(url);
$.get(url).done(function(data) {
popup.setContent(data);
popup.update();
});
});
} else {
// rider_markers[rider_id]= L.marker([lat, long], { icon: icon_rider_available }).bindPopup(rider_popup);
rider_markers[rider_id]= L.marker([lat, long], { icon: icon_rider_available }).bindPopup('Loading...');
lg_avail_rider.addLayer(rider_markers[rider_id]);
}
// ajax loading of rider popup
rider_markers[rider_id].on('click', function(e) {
var popup = e.target.getPopup();
var url = rider_popup_url.replace('[id]', rider_id);
console.log(url);
$.get(url).done(function(data) {
popup.setContent(data);
popup.update();
});
});
});
// console.log(rider_markers);
});
// base layer
var baseMaps = {
'Streets': streets
};
// overlay layer
var overlayMaps = {
'Available Riders' : lg_avail_rider,
'JO Riders' : lg_jo_rider,
'Customers' : lg_cust
}
L.control.layers(baseMaps, overlayMaps).addTo(map);
return map;
}
initMap();
</script>