Refactor dashboard map js to use classes #299

composer.json

@@ -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",

composer.lock

@@ -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"
         }
     ],

public/assets/js/dashboard_map.js

@@ -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);
+        });
+    }
+}

public/assets/js/map_mqtt.js

@@ -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;
+        }
+    }
+}

symfony.lock

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

templates/home.html.twig

@@ -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(r_markers, c_markers, icons) {
-
-function initMap() {
     var default_lat = {% trans %}default_lat{% endtrans %};
     var default_lng = {% trans %}default_long{% endtrans %};
 
-    var rider_popup_url = '/riders/[id]/popup';
+    var options = {
-    var cust_popup_url = '/job-order/[id]/popup';
+        'access_token': 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw',
-    map = mapCreate('dashboard_map', default_lat, default_lng, 'road', 13, rider_popup_url, cust_popup_url);
+        '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>
+// create icons
-// TODO: put this in .env
+var icons = {
-var mqtt;
+    'rider_active_jo': L.divIcon({
-var timeout = 2000;
+        className: 'map-div-icon',
-var host = '{{ mqtt_host }}';
+        html: "<div style='background-color:#FF0000;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
-var port = {{ mqtt_port }};
+        iconSize: [39, 42],
-
+        iconAnchor: [15, 42]
-var icon_rider_available = L.divIcon({
+    }),
+    '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]
-});
+    }),
+    '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]
+    })
+};
 
-function onConnect() {
+var r_markers = {};
-    console.log('connected!');
+var c_markers = {};
 
-    mqtt.subscribe('rider/+/location');
+var dashmap = initMap(r_markers, c_markers, icons);
-}
+initEventHandler(dashmap, icons);
-
-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,
-    };
-
-    mqtt.onMessageArrived = onMessage;
-
-    console.log('connecting to mqtt server...');
-    mqtt.connect(options);
-}
-
-mqttConnect();
 
 </script>
 {% endblock %}

templates/map/initOpenStreetMap.js

@@ -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>