From 67a7b86f32d77246546de5dff2732ff087c11eb0 Mon Sep 17 00:00:00 2001
From: Kendrick Chan <kc@jankstudio.com>
Date: Sun, 19 Jan 2020 03:30:37 +0800
Subject: [PATCH] Add handler for rider location updates in dashboard #299

---
 templates/home.html.twig           | 51 ++++++++++++++++++++++++++++--
 templates/map/initOpenStreetMap.js | 14 +++++---
 2 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/templates/home.html.twig b/templates/home.html.twig
index 0e0c7bd6..39ea526b 100644
--- a/templates/home.html.twig
+++ b/templates/home.html.twig
@@ -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,
diff --git a/templates/map/initOpenStreetMap.js b/templates/map/initOpenStreetMap.js
index a8917f2a..d11c98c2 100644
--- a/templates/map/initOpenStreetMap.js
+++ b/templates/map/initOpenStreetMap.js
@@ -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