Add handler for rider location updates in dashboard #299

This commit is contained in:
Kendrick Chan 2020-01-19 03:30:37 +08:00
parent b435cdfa1b
commit 67a7b86f32
2 changed files with 58 additions and 7 deletions

View file

@ -35,15 +35,60 @@ var port = 8083;
function onConnect() {
console.log('connected!');
mqtt.subscribe('test.channel');
mqtt.subscribe('rider/+/location');
}
function onMessage(msg) {
console.log(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 {
// TODO: no marker, make one
}
break;
}
}
function mqttConnect() {
mqtt = new Paho.MQTT.Client(host, port, "clientjs");
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 = {
timeout: 3,
onSuccess: onConnect,

View file

@ -5,6 +5,8 @@
<script>
var rider_markers = {};
function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
var map = L.map(div_id).setView(
[center_lat, center_lng],
@ -92,15 +94,19 @@ function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
cust_popup += jo_data['stype'] + '<br>';
cust_popup += jo_data['status'];
var rider_marker = 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(rider_popup);
// var rider_marker = L.marker([lat, long], { icon: icon_rider_active_jo }).bindPopup(rider_popup);
var cust_marker = L.marker([clat, clong], { icon: icon_customer }).bindPopup(cust_popup);
lg_cust.addLayer(cust_marker);
lg_jo_rider.addLayer(rider_marker);
lg_jo_rider.addLayer(rider_markers[rider_id]);
} else {
var rider_marker = L.marker([lat, long], { icon: icon_rider_available }).bindPopup(rider_popup);
lg_avail_rider.addLayer(rider_marker);
rider_markers[rider_id]= L.marker([lat, long], { icon: icon_rider_available }).bindPopup(rider_popup);
// var rider_marker = L.marker([lat, long], { icon: icon_rider_available }).bindPopup(rider_popup);
lg_avail_rider.addLayer(rider_markers[rider_id]);
}
});
// console.log(rider_markers);
});
// base layer