@fleetbase/fleetops-engine 0.2.1 → 0.2.3

package/addon/components/driver-card.hbs

@@ -1,4 +1,4 @@
-<div class="driver-card flex flex-1" {{did-insert this.setupComponent}} ...attributes>
+<div class="driver-card flex flex-1" ...attributes>
     <a href="javascript:;" class="driver-card-details flex flex-1 bg-black bg-opacity-25 rounded-md px-4 py-3 shadow-sm" {{on "click" this.onClick}}>
         <div class="flex flex-row">
             <div class="mr-3">

package/addon/components/leaflet-drift-marker.js

@@ -0,0 +1,53 @@
+import MarkerLayer from 'ember-leaflet/components/marker-layer';
+
+export default class LeafletDriftMarkerComponent extends MarkerLayer {
+    leafletOptions = [
+        ...this.leafletOptions,
+
+        /**
+         * Required, duration im miliseconds marker will take to destination point.
+         *
+         * @argument duration
+         * @type {Number}
+         */
+        'duration',
+
+        /**
+         * Makes map view follow marker.
+         *
+         * @argument keepAtCenter
+         * @type {Boolean}
+         */
+        'keepAtCenter',
+
+        /**
+         * Rotation angle, in degrees, clockwise.
+         *
+         * @argument rotationAngle
+         * @type {Number}
+         */
+        'rotationAngle',
+
+        /**
+         * The rotation center, as a transform-origin CSS rule.
+         *
+         * @argument rotationOrigin
+         * @type {String}
+         */
+        'rotationOrigin',
+
+        /**
+         * The Public ID of the driver.
+         *
+         * @argument publicId
+         * @type {String}
+         */
+        'publicId',
+    ];
+
+    createLayer() {
+        const { DriftMarker } = window;
+
+        return new DriftMarker(...this.requiredOptions, this.options);
+    }
+}

package/addon/components/live-map.hbs

@@ -4,11 +4,24 @@
 
         {{#if this.isDriversVisible}}
             {{#each this.drivers as |driver|}}
-                <layers.rotated-marker @icon={{icon iconUrl=driver.vehicle_avatar iconSize=(array 40 40)}} @location={{point-to-coordinates driver.location}} @onAdd={{fn this.onAction "onDriverAdded" driver}}>
-                    {{!-- <marker.popup @maxWidth="500" @minWidth="225">
+                <layers.drift-marker @rotationAngle={{driver.heading}} @duration={{300}} @icon={{icon iconUrl=driver.vehicle_avatar iconSize=(array 24 24)}} @location={{point-to-coordinates driver.location}} @publicId={{driver.public_id}} @onAdd={{fn this.onAction "onDriverAdded" driver}} as |marker|>
+                    <marker.popup @maxWidth="500" @minWidth="225">
                         <DriverCard @driver={{driver}} @showCoordinates={{true}} @textClass="text-gray-900 dark:text-gray-100" />
-                    </marker.popup> --}}
-                </layers.rotated-marker>
+                    </marker.popup>
+                    <marker.tooltip @permanent={{false}} @sticky={{true}}>{{driver.name}}</marker.tooltip>
+                </layers.drift-marker>
+            {{/each}}
+        {{/if}}
+
+        {{#if this.isPlacesVisible}}
+            {{#each this.places as |place|}}
+                <layers.marker @icon={{icon iconUrl="/engines-dist/images/building-marker.png" iconSize=(array 16 16)}} @location={{point-to-coordinates place.location}} @riseOnHover={{true}} @title={{place.address}} @alt={{place.address}} as |marker|>
+                    <marker.popup>
+                        <div>{{place.address}}</div>
+                        <div>{{format-point place.location}}</div>
+                    </marker.popup>
+                    <marker.tooltip @permanent={{false}} @sticky={{true}} @direction="bottom">{{place.name}}</marker.tooltip>
+                </layers.marker>
             {{/each}}
         {{/if}}
 

package/addon/components/live-map.js

@@ -25,10 +25,12 @@ export default class LiveMapComponent extends Component {
 
     @tracked routes = [];
     @tracked drivers = [];
+    @tracked places = [];
     @tracked channels = [];
     @tracked isLoading = true;
     @tracked isReady = false;
     @tracked isDriversVisible = true;
+    @tracked isPlacesVisible = true;
     @tracked isRoutesVisible = true;
     @tracked isDrawControlsVisible = false;
     @tracked isCreatingServiceArea = false;
@@ -105,10 +107,12 @@ export default class LiveMapComponent extends Component {
 
         this.routes = await this.fetchActiveRoutes();
         this.drivers = await this.fetchActiveDrivers();
+        this.places = await this.fetchActivePlaces();
         this.serviceAreaRecords = await this.fetchServiceAreas();
         this.isReady = true;
 
         this.watchDrivers(this.drivers);
+        this.listenForOrders();
 
         if (typeof this.args.onReady === 'function') {
             this.args.onReady(this);
@@ -331,6 +335,11 @@ export default class LiveMapComponent extends Component {
     @action onDriverAdded(driver, event) {
         const { target } = event;
 
+        // set the marker instance to the driver model
+        set(driver, '_marker', target);
+
+        console.log('onDriverAdded()', ...arguments);
+
         this.createContextMenuForDriver(driver, target);
     }
 
@@ -478,6 +487,18 @@ export default class LiveMapComponent extends Component {
         this.isDriversVisible = !this.isDriversVisible;
     }
 
+    @action hidePlaces() {
+        this.isPlacesVisible = false;
+    }
+
+    @action showPlaces() {
+        this.isPlacesVisible = true;
+    }
+
+    @action togglePlaces() {
+        this.isPlacesVisible = !this.isPlacesVisible;
+    }
+
     @action hideRoutes() {
         this.isRoutesVisible = false;
     }
@@ -706,6 +727,30 @@ export default class LiveMapComponent extends Component {
      * Functions are used to fetch date or handle socket callbacks/initializations.
      *
      */
+    @action async listenForOrders() {
+        // setup socket
+        const socket = this.socket.instance();
+
+        // listen on company channel
+        const channelId = `company.${this.currentUser.companyId}`;
+        const channel = socket.subscribe(channelId);
+
+        // track channel
+        this.channels.pushObject(channel);
+
+        // listen to channel for events
+        await channel.listener('subscribe').once();
+
+        // get incoming data and console out
+        (async () => {
+            for await (let output of channel) {
+                const { event, data } = output;
+
+                console.log(`[channel ${channelId}]`, output, event, data);
+            }
+        })();
+    }
+
     @action watchDrivers(drivers = []) {
         // setup socket
         const socket = this.socket.instance();
@@ -719,29 +764,54 @@ export default class LiveMapComponent extends Component {
 
     @action async listenForDriver(driver, socket) {
         // listen on company channel
-        const channelId = `driver.${driver.uuid}`;
+        const channelId = `driver.${driver.id}`;
         const channel = socket.subscribe(channelId);
 
-        // debug
-        // console.log(`socket subscribed to ${channelId}`);
-
         // track channel
         this.channels.pushObject(channel);
 
         // listen to channel for events
         await channel.listener('subscribe').once();
 
+        // Initialize an empty buffer to store incoming events
+        const eventBuffer = [];
+
+        // Time to wait in milliseconds before processing buffered events
+        const bufferTime = 1000 * 10;
+
+        // Function to process buffered events
+        const processBuffer = () => {
+            // Sort events by created_at
+            eventBuffer.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+
+            // Process sorted events
+            for (const output of eventBuffer) {
+                const { event, data } = output;
+                console.log(`${event} - #${data.additionalData.index} (${output.created_at}) [ ${data.location.coordinates.join(' ')} ]`);
+                // update driver heading degree
+                driver._marker.setRotationAngle(data.heading);
+                // move driver's marker to new coordinates
+                driver._marker.slideTo(data.location.coordinates, { duration: 2000 });
+            }
+
+            // Clear the buffer
+            eventBuffer.length = 0;
+        };
+
+        // Start a timer to process the buffer at intervals
+        setInterval(processBuffer, bufferTime);
+
         // get incoming data and console out
-        for await (let output of channel) {
-            const { event, data } = output;
-
-            if (event === 'driver.location_changed') {
-                driver.location = data.location;
-                driver.altitude = data.altitude;
-                driver.heading = data.heading;
-                driver.speed = data.speed;
+        (async () => {
+            for await (let output of channel) {
+                const { event, data } = output;
+
+                if (event === 'driver.location_changed' || event === 'driver.simulated_location_changed') {
+                    // Add the incoming event to the buffer
+                    eventBuffer.push(output);
+                }
             }
-        }
+        })();
     }
 
     @action closeChannels() {
@@ -814,15 +884,20 @@ export default class LiveMapComponent extends Component {
         this.isLoading = true;
 
         return new Promise((resolve) => {
-            this.fetch.get('fleet-ops/live/routes').then((routes) => {
-                this.isLoading = false;
+            this.fetch
+                .get('fleet-ops/live/routes')
+                .then((routes) => {
+                    this.isLoading = false;
 
-                if (typeof this.args.onRoutesLoaded === 'function') {
-                    this.args.onRoutesLoaded(routes);
-                }
+                    if (typeof this.args.onRoutesLoaded === 'function') {
+                        this.args.onRoutesLoaded(routes);
+                    }
 
-                resolve(routes);
-            });
+                    resolve(routes);
+                })
+                .catch(() => {
+                    resolve([]);
+                });
         });
     }
 
@@ -839,6 +914,32 @@ export default class LiveMapComponent extends Component {
 
                 resolve(drivers);
             });
+        }).catch(() => {
+            resolve([]);
+        });
+    }
+
+    @action fetchActivePlaces() {
+        this.isLoading = true;
+
+        // get the center of map
+        const center = this.leafletMap.getCenter();
+
+        return new Promise((resolve) => {
+            this.fetch
+                .get('fleet-ops/live/places', { within: center }, { normalizeToEmberData: true, normalizeModelType: 'place' })
+                .then((places) => {
+                    this.isLoading = false;
+
+                    if (typeof this.args.onPlacesLoaded === 'function') {
+                        this.args.onPlacesLoaded(places);
+                    }
+
+                    resolve(places);
+                })
+                .catch(() => {
+                    resolve([]);
+                });
         });
     }
 

package/addon/components/map-container/toolbar.hbs

@@ -47,5 +47,11 @@
                 <MapContainer::Toolbar::ZonesPanel @dd={{dd}} @map={{@map}} @onPressCreateServiceArea={{@onPressCreateServiceArea}} />
             </dd.Content>
         </BasicDropdown>
+        <button type="button" class="toolbar-button relative" {{on "click" (fn this.onAction "onPressDisplayPlaces")}}>
+            <FaIcon @icon="city" />
+            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                <InputInfo @text="Toggle Places" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+            </Attach::Tooltip>
+        </button>
     </div>
 </MapContainer::ToolbarContainer>

package/addon/controllers/management/contacts/index.js

@@ -384,13 +384,13 @@ export default class ManagementContactsIndexController extends Controller {
                     {
                         path: `uploads/${contact.company_uuid}/contacts/${contact.slug}`,
                         subject_uuid: contact.id,
-                        subject_type: `contact`,
-                        type: `contact_photo`,
+                        subject_type: 'contact',
+                        type: 'contact_photo',
                     },
                     (uploadedFile) => {
                         contact.setProperties({
                             photo_uuid: uploadedFile.id,
-                            photo_url: uploadedFile.s3url,
+                            photo_url: uploadedFile.url,
                             photo: uploadedFile,
                         });
                     }

package/addon/controllers/management/drivers/index.js

@@ -580,7 +580,7 @@ export default class ManagementDriversIndexController extends Controller {
                             icon: 'headphones',
                             action: () => {
                                 this.modalsManager.done().then(() => {
-                                    this.hostRouter.transitionTo('console.developers-console.sockets.watch', `driver.${driver.public_id}`);
+                                    this.hostRouter.transitionTo('console.developers.sockets.view', `driver.${driver.public_id}`);
                                 });
                             },
                         },

package/addon/controllers/management/vehicles/index.js

@@ -562,7 +562,7 @@ export default class ManagementVehiclesIndexController extends ManagementControl
                     (uploadedFile) => {
                         vehicle.setProperties({
                             photo_uuid: uploadedFile.id,
-                            photo_url: uploadedFile.s3url,
+                            photo_url: uploadedFile.url,
                             photo: uploadedFile,
                         });
                     }

package/addon/controllers/operations/orders/index/new.js

@@ -5,7 +5,7 @@ import { action, computed, setProperties, set, get } from '@ember/object';
 import { not, equal, alias } from '@ember/object/computed';
 import { isArray } from '@ember/array';
 import { dasherize } from '@ember/string';
-import { later } from '@ember/runloop';
+import { later, next } from '@ember/runloop';
 import { OSRMv1, Control as RoutingControl } from '@fleetbase/leaflet-routing-machine';
 import polyline from '@fleetbase/ember-core/utils/polyline';
 import findClosestWaypoint from '@fleetbase/ember-core/utils/find-closest-waypoint';
@@ -494,7 +494,9 @@ export default class OperationsOrdersIndexNewController extends Controller {
     }
 
     @action newPlace() {
-        this.placesController?.createPlace();
+        if (this.placesController) {
+            return this.placesController.createPlace();
+        }
     }
 
     @action async getQuotes(service) {
@@ -564,26 +566,39 @@ export default class OperationsOrdersIndexNewController extends Controller {
     }
 
     @action setupInterface() {
-        this.leafletMap?.liveMap?.hideDrivers();
-        this.leafletMap?.liveMap?.hideRoutes();
-
-        // track all layers added from this view
-        this.leafletMap?.on('layeradd', ({ layer }) => {
-            // disable dragging of layer
-            layer.dragging?.disable();
+        if (this.leafletMap && this.leafletMap.liveMap) {
+            this.leafletMap.liveMap.hideDrivers();
+            this.leafletMap.liveMap.hideRoutes();
+
+            // track all layers added from this view
+            this.leafletMap.on('layeradd', ({ layer }) => {
+                // disable dragging of layer
+                if (layer.dragging && typeof layer.dragging.disable === 'function') {
+                    layer.dragging.disable();
+                }
 
-            if (!this.leafletLayers?.includes(layer)) {
-                this.leafletLayers.pushObject(layer);
-            }
-        });
+                next(this, function () {
+                    if (isArray(this.leafletLayers) && !this.leafletLayers.includes(layer)) {
+                        this.leafletLayers.pushObject(layer);
+                    }
+                });
+            });
+        } else {
+            // setup interface when livemap is ready
+            this.universe.on('livemap.ready', () => {
+                this.setupInterface();
+            });
+        }
 
         // switch to map mode
         this.ordersController.setLayoutMode('map');
     }
 
     @action resetInterface() {
-        this.leafletMap?.liveMap?.showDrivers();
-        this.leafletMap?.liveMap?.showRoutes();
+        if (this.leafletMap && this.leafletMap.liveMap) {
+            this.leafletMap.liveMap.showDrivers();
+            this.leafletMap.liveMap.showRoutes();
+        }
     }
 
     @action getRoute() {
@@ -674,15 +689,47 @@ export default class OperationsOrdersIndexNewController extends Controller {
     }
 
     @action clearLayers() {
-        const { leafletLayers, leafletMap } = this;
+        if (this.leafletMap) {
+            try {
+                this.leafletMap.eachLayer((layer) => {
+                    if (isArray(this.leafletLayers) && this.leafletLayers.includes(layer)) {
+                        this.leafletMap.removeLayer(layer);
+                    }
+                });
+            } catch (error) {
+                // fallback method with tracked layers
+                if (isArray(this.leafletLayers)) {
+                    this.leafletLayers.forEach((layer) => {
+                        try {
+                            this.leafletMap.removeLayer(layer);
+                        } catch (error) {
+                            // silent error just continue with order processing if any
+                        }
+                    });
+                }
+            }
+        }
+    }
 
-        leafletLayers?.forEach((layer) => {
+    @action clearAllLayers() {
+        if (this.leafletMap) {
             try {
-                leafletMap.removeLayer(layer);
+                this.leafletMap.eachLayer((layer) => {
+                    this.leafletMap.removeLayer(layer);
+                });
             } catch (error) {
-                // silent error just continue with order processing if any
+                // fallback method with tracked layers
+                if (isArray(this.leafletLayers)) {
+                    this.leafletLayers.forEach((layer) => {
+                        try {
+                            this.leafletMap.removeLayer(layer);
+                        } catch (error) {
+                            // silent error just continue with order processing if any
+                        }
+                    });
+                }
             }
-        });
+        }
     }
 
     @action createPlaceArrayFromPayload(payload, waypoints, isMultipleDropoffOrder = false) {
@@ -1220,7 +1267,7 @@ export default class OperationsOrdersIndexNewController extends Controller {
                     (uploadedFile) => {
                         entity.setProperties({
                             photo_uuid: uploadedFile.id,
-                            photo_url: uploadedFile.s3url,
+                            photo_url: uploadedFile.url,
                             photo: uploadedFile,
                         });
                     }

package/addon/controllers/operations/orders/index/view.js

@@ -81,6 +81,13 @@ export default class OperationsOrdersIndexViewController extends Controller {
      */
     @service hostRouter;
 
+    /**
+     * Inject the `socket` service
+     *
+     * @var {Service}
+     */
+    @service socket;
+
     /**
      * Inject the `universe` service
      *
@@ -162,8 +169,10 @@ export default class OperationsOrdersIndexViewController extends Controller {
     }
 
     @action resetInterface() {
-        this.leafletMap?.liveMap?.showDrivers();
-        this.leafletMap?.liveMap?.showRoutes();
+        if (this.leafletMap && this.leafletMap.liveMap) {
+            this.leafletMap.liveMap.showDrivers();
+            this.leafletMap.liveMap.showRoutes();
+        }
     }
 
     @action removeRoutingControlPreview() {
@@ -209,8 +218,10 @@ export default class OperationsOrdersIndexViewController extends Controller {
             return later(
                 this,
                 () => {
-                    this.leafletMap?.liveMap?.hideDrivers();
-                    this.leafletMap?.liveMap?.hideRoutes();
+                    if (this.leafletMap && this.leafletMap.liveMap) {
+                        this.leafletMap.liveMap.hideDrivers();
+                        this.leafletMap.liveMap.hideRoutes();
+                    }
 
                     // display order route on map
                     this.displayOrderRoute();
@@ -833,7 +844,7 @@ export default class OperationsOrdersIndexViewController extends Controller {
                     (uploadedFile) => {
                         entity.setProperties({
                             photo_uuid: uploadedFile.id,
-                            photo_url: uploadedFile.s3url,
+                            photo_url: uploadedFile.url,
                             photo: uploadedFile,
                         });
                     }

package/addon/controllers/operations/orders/index.js

@@ -80,6 +80,13 @@ export default class OperationsOrdersIndexController extends Controller {
      */
     @service universe;
 
+    /**
+     * Inject the `socket` service
+     *
+     * @var {Service}
+     */
+    @service socket;
+
     /**
      * Queryable parameters for this controller's model
      *
@@ -537,6 +544,54 @@ export default class OperationsOrdersIndexController extends Controller {
         },
     ];
 
+    /**
+     * Creates an instance of OperationsOrdersIndexController.
+     * @memberof OperationsOrdersIndexController
+     */
+    constructor() {
+        super(...arguments);
+        this.listenForOrderEvents();
+    }
+
+    /**
+     * Listen for incoming order events to refresh listing.
+     *
+     * @memberof OperationsOrdersIndexController
+     */
+    @action async listenForOrderEvents() {
+        // wait for user to be loaded into service
+        this.currentUser.on('user.loaded', () => {
+            // Get socket instance
+            const socket = this.socket.instance();
+
+            // The channel ID to listen on
+            const channelId = `company.${this.currentUser.companyId}`;
+
+            // Listed on company channel
+            const channel = socket.subscribe(channelId);
+
+            // Events which should trigger refresh
+            const listening = ['order.ready', 'order.driver_assigned'];
+
+            // Listen for channel subscription
+            (async () => {
+                for await (let output of channel) {
+                    const { event } = output;
+
+                    // if an order event refresh orders
+                    if (typeof event === 'string' && listening.includes(event)) {
+                        this.hostRouter.refresh();
+                    }
+                }
+            })();
+
+            // disconnect when transitioning
+            this.hostRouter.on('routeWillChange', () => {
+                channel.close();
+            });
+        });
+    }
+
     /**
      * The search task.
      *
@@ -561,12 +616,21 @@ export default class OperationsOrdersIndexController extends Controller {
         this.query = value;
     }
 
-    @action resetView() {
-        const { leafletMap } = this;
+    @action viewPlacesOnMap() {
+        const {
+            leafletMap: { liveMap },
+        } = this;
 
-        leafletMap?.liveMap?.hideDrivers();
-        leafletMap?.liveMap?.hideRoutes();
-        // leafletMap?.remove();
+        if (liveMap) {
+            liveMap.togglePlaces();
+        }
+    }
+
+    @action resetView() {
+        if (this.leafletMap && this.leafletMap.liveMap) {
+            this.leafletMap.liveMap.hideDrivers();
+            this.leafletMap.liveMap.hideRoutes();
+        }
     }
 
     @action toggleSearch() {

package/addon/controllers/operations/service-rates/index/edit.js

@@ -1,7 +1,6 @@
 import OperationsServiceRatesIndexNewController from './new';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-// import { alias } from '@ember/object/computed';
 
 export default class OperationsServiceRatesIndexEditController extends OperationsServiceRatesIndexNewController {
     /**
@@ -44,6 +43,7 @@ export default class OperationsServiceRatesIndexEditController extends Operation
                     return this.transitionToRoute('operations.service-rates.index').then(() => {
                         this.notifications.success(`Service rate '${serviceRate.service_name}' updated`);
                         this.resetForm();
+                        this.hostRouter.refresh();
                     });
                 })
                 .catch(this.notifications.serverError)

package/addon/controllers/operations/service-rates/index/new.js

@@ -1,17 +1,10 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action, computed } from '@ember/object';
 import { isBlank } from '@ember/utils';
 
 export default class OperationsServiceRatesIndexNewController extends Controller {
-    /**
-     * Inject the `operations.service-rates.index` controller
-     *
-     * @var {Controller}
-     */
-    @controller('operations.service-rates.index') index;
-
     /**
      * Inject the `currentUser` service
      *
@@ -33,12 +26,19 @@ export default class OperationsServiceRatesIndexNewController extends Controller
      */
     @service loader;
 
+    /**
+     * Inject the `hostRouter` service
+     *
+     * @var {Service}
+     */
+    @service hostRouter;
+
     /**
      * The service rate being created.
      *
      * @var {ServiceRateModel}
      */
-    @tracked serviceRate = this.store.createRecord('service-rate');
+    @tracked serviceRate = this.store.createRecord('service-rate', { per_meter_unit: 'm' });
 
     /**
      * Different service types available, based on order type.
@@ -300,11 +300,10 @@ export default class OperationsServiceRatesIndexNewController extends Controller
             return serviceRate
                 .save()
                 .then((serviceRate) => {
-                    this.index.table.addRow(serviceRate);
-
                     return this.transitionToRoute('operations.service-rates.index').then(() => {
                         this.notifications.success(`New Service Rate ${serviceRate.service_name} Created`);
                         this.resetForm();
+                        this.hostRouter.refresh();
                     });
                 })
                 .catch((error) => {

package/addon/controllers/operations/service-rates/index.js

@@ -56,6 +56,14 @@ export default class OperationsServiceRatesIndexController extends Controller {
      */
     @service modalsManager;
 
+
+    /**
+     * Inject the `hostRouter` service
+     *
+     * @var {Service}
+     */
+    @service hostRouter;
+
     /**
      * Inject the `loader` service
      *

package/addon/initializers/load-leaflet-assets.js

@@ -1,8 +1,13 @@
 export function initialize() {
     const path = '/engines-dist/leaflet/';
-    const scripts = ['leaflet.contextmenu.js', 'leaflet.draw-src.js', 'leaflet.rotatedMarker.js'];
+    const scripts = ['leaflet.contextmenu.js', 'leaflet.draw-src.js', 'leaflet.rotatedMarker.js', 'leaflet-drift-marker.js'];
     const stylesheets = ['leaflet.contextmenu.css', 'leaflet.draw.css'];
 
+    // Define exports on window
+    const exportsScript = document.createElement('script');
+    exportsScript.innerHTML = 'window.exports = window.exports || {};';
+    document.body.appendChild(exportsScript);
+
     for (let i = 0; i < scripts.length; i++) {
         const script = document.createElement('script');
         script.src = path + scripts[i];

package/addon/instance-initializers/register-leaflet-drift-marker.js

@@ -0,0 +1,17 @@
+import LeafletDriftMarkerComponent from '../components/leaflet-drift-marker';
+
+export function initialize(owner) {
+    let emberLeafletService = owner.lookup('service:ember-leaflet');
+
+    if (emberLeafletService) {
+        // we then invoke the `registerComponent` method
+        emberLeafletService.registerComponent('leaflet-drift-marker', {
+            as: 'drift-marker',
+            component: LeafletDriftMarkerComponent,
+        });
+    }
+}
+
+export default {
+    initialize,
+};

package/addon/routes/operations/orders/index/new.js

@@ -7,7 +7,9 @@ export default class OperationsOrdersIndexNewRoute extends Route {
     @service loader;
 
     @action willTransition() {
-        this.controller?.resetForm();
+        if (this.controller) {
+            this.controller.resetForm();
+        }
     }
 
     async setupController(controller) {

package/addon/routes/operations/orders/index/view.js

@@ -4,7 +4,9 @@ import { action } from '@ember/object';
 
 export default class OperationsOrdersIndexViewRoute extends Route {
     @service currentUser;
+    @service notifications;
     @service store;
+    @service socket;
 
     @action willTransition() {
         if (this.controller) {
@@ -12,6 +14,11 @@ export default class OperationsOrdersIndexViewRoute extends Route {
         }
     }
 
+    @action error(error, transition) {
+        this.notifications.serverError(error);
+        return this.transitionTo('operations.orders.index');
+    }
+
     model(order) {
         const { public_id } = order;
 
@@ -22,6 +29,45 @@ export default class OperationsOrdersIndexViewRoute extends Route {
         });
     }
 
+    /**
+     * Handle resolved model
+     *
+     * @param {OrderModel} model
+     * @memberof OperationsOrdersIndexViewRoute
+     */
+    afterModel(model) {
+        this.listenForOrderEvents(model);
+    }
+
+    /**
+     * Listen to order channel for update events to refresh data
+     *
+     * @param {OrderModel} model
+     * @memberof OperationsOrdersIndexViewRoute
+     */
+    async listenForOrderEvents(model) {
+        // Get socket instance
+        const socket = this.socket.instance();
+
+        // The channel ID to listen on
+        const channelId = `order.${model.public_id}`;
+
+        // Listed on company channel
+        const channel = socket.subscribe(channelId);
+
+        // Listen for channel subscription
+        (async () => {
+            for await (let output of channel) {
+                this.refresh();
+            }
+        })();
+
+        // disconnect when transitioning
+        this.on('willTransition', () => {
+            channel.close();
+        });
+    }
+
     async setupController(controller, model) {
         super.setupController(controller, model);
 

package/addon/routes/operations/service-rates/index/edit.js

@@ -1,12 +1,19 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
 export default class OperationsServiceRatesIndexEditRoute extends Route {
     @service store;
     @service currentUser;
+    @service notifications;
 
     templateName = 'operations.service-rates.index.new';
 
+    @action error(error, transition) {
+        this.notifications.serverError(error);
+        return this.transitionTo('operations.service-rates.index');
+    }
+
     model({ public_id }) {
         return this.store.queryRecord('service-rate', {
             public_id,

package/addon/templates/operations/orders/index.hbs

@@ -13,7 +13,7 @@
 {{#if this.isMapLayout}}
     <MapContainer @layout={{this.layout}} @onReady={{this.onMapContainerReady}}>
         <GlobalSearch @visible={{this.isSearchVisible}} @onPressOrder={{this.viewOrder}} />
-        <MapContainer::Toolbar @activeOrdersCount={{this.activeOrdersCount}} @map={{this.leafletMap}} @onPressViewOrders={{this.toggleOrdersPanel}} @onPressSearch={{this.toggleSearch}} @onPressCreateOrder={{this.createOrder}} @onPressCreateDriver={{this.driversController.createDriver}} @onPressDriverProfile={{this.driversController.viewDriver}} />
+        <MapContainer::Toolbar @activeOrdersCount={{this.activeOrdersCount}} @map={{this.leafletMap}} @onPressDisplayPlaces={{this.viewPlacesOnMap}} @onPressViewOrders={{this.toggleOrdersPanel}} @onPressSearch={{this.toggleSearch}} @onPressCreateOrder={{this.createOrder}} @onPressCreateDriver={{this.driversController.createDriver}} @onPressDriverProfile={{this.driversController.viewDriver}} />
         <OrderListOverlay @noBackdrop={{true}} @fullHeight={{true}} @outView={{not this.isOrdersPanelVisible}} @width={{if (media 'isMobile') "100%" "338px"}} @onPressCancel={{this.hideOrdersPanel}} @onPressCreateOrder={{this.createOrder}} @onPressViewOrder={{this.viewOrder}} @onPressCreateFleet={{this.fleetController.createFleet}} @onPressManageFleet={{this.fleetController.viewFleet}} @onPressCancelOrders={{this.bulkCancelOrders}} @onPressDeleteOrders={{this.bulkDeleteOrders}} />
         <LiveMap id="leafletMap" class="next-leaflet-container-map" @lat={{1.3521}} @lng={{103.8198}} @zoom={{12}} @zoomControl={{false}} @onLoad={{this.setMapReference}} {{set-container-dimensions}} />
     </MapContainer>

package/addon/templates/operations/service-rates/index/new.hbs

@@ -1,4 +1,4 @@
-<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width="700">
+<Overlay @position="right" @noBackdrop={{true}} @isResizable={{true}} @fullHeight={{true}} @width="800px">
     <Overlay::Header @title={{if this.serviceRate.id this.serviceRate.service_name "New service rate"}} @status={{this.serviceRate.public_id}} @hideStatusDot={{true}} @createdAt={{this.serviceRate.createdAt}} @onPressCancel={{this.transitionBack}}>
         {{#if this.serviceRate.id}}
             <Button @icon="save" @type="primary" @text="Save Service Rate" @onClick={{this.updateServiceRate}} @isLoading={{this.isUpdatingServiceRate}} @isSubscriptionRequired={{true}} />
@@ -179,7 +179,7 @@
                         <div class="dark:text-gray-100">
                             <div class="grid grid-cols-7">
                                 <div class="flex flex-col items-start justify-start pt-3">
-                                    <img src="/images/boxes/{{parcelFee.size}}.png" alt="parcel size {{parcelFee.size}}" width="44" class="w-11">
+                                    <img src="/engines-dist/images/boxes/{{parcelFee.size}}.png" alt="parcel size {{parcelFee.size}}" width="44" class="w-11">
                                     <label class="mt-2">{{humanize parcelFee.size}}</label>
                                 </div>
                                 <div class="col-span-6 dimensions-box">

package/app/components/leaflet-drift-marker.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/leaflet-drift-marker';

package/index.js

@@ -33,6 +33,21 @@ module.exports = buildEngine({
             { package: 'leaflet-contextmenu', include: undefined, exclude: [...alwaysExclude], path: ['dist'] },
             { package: 'leaflet-draw', include: undefined, exclude: [...alwaysExclude], path: ['dist'] },
             { package: 'leaflet-rotatedmarker', include: undefined, exclude: [...alwaysExclude], path: [] },
+            {
+                package: 'leaflet-drift-marker',
+                include: ['index.js', 'index.js.map'],
+                exclude: [...alwaysExclude],
+                path: ['lib'],
+                getDestinationPath: (relativePath) => {
+                    if (relativePath === 'index.js') {
+                        return 'leaflet-drift-marker.js';
+                    }
+                    if (relativePath === 'index.js.map') {
+                        return 'leaflet-drift-marker.js.map';
+                    }
+                    return relativePath;
+                },
+            },
         ];
         const trees = [];
 
@@ -45,6 +60,7 @@ module.exports = buildEngine({
                     destDir: 'leaflet',
                     include: leafletAdddon.include,
                     exclude: leafletAdddon.exclude,
+                    getDestinationPath: leafletAdddon.getDestinationPath,
                 })
             );
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/fleetops-engine",
-    "version": "0.2.1",
+    "version": "0.2.3",
     "description": "Fleetbase Fleet-Ops extension provides a fleet management and last mile delivery operations system module.",
     "fleetbase": {
         "route": "fleet-ops",
@@ -39,9 +39,9 @@
         "publish:github": "npm config set '@fleetbase:registry' https://npm.pkg.github.com/ && npm publish"
     },
     "dependencies": {
-        "@fleetbase/ember-core": "^0.1.1",
-        "@fleetbase/ember-ui": "^0.1.7",
-        "@fleetbase/fleetops-data": "^0.0.6",
+        "@fleetbase/ember-core": "^0.1.2",
+        "@fleetbase/ember-ui": "^0.1.8",
+        "@fleetbase/fleetops-data": "^0.0.7",
         "@fleetbase/leaflet-routing-machine": "^3.2.16",
         "@fortawesome/ember-fontawesome": "^0.4.1",
         "@fortawesome/fontawesome-svg-core": "^6.4.0",
@@ -50,16 +50,17 @@
         "@zestia/ember-dragula": "^12.0.0",
         "broccoli-funnel": "^3.0.8",
         "broccoli-merge-trees": "^4.2.0",
-        "ember-intl": "^6.0.0-beta.6",
         "ember-cli-babel": "^7.26.11",
         "ember-cli-es6-transform": "^1.0.0",
         "ember-cli-htmlbars": "^6.1.0",
+        "ember-intl": "^6.0.0-beta.6",
         "ember-leaflet": "^5.1.1",
         "ember-radio-button": "^3.0.0-beta.1",
         "ember-wormhole": "^0.6.0",
         "leaflet": "^1.9.4",
         "leaflet-contextmenu": "^1.4.0",
         "leaflet-draw": "^1.0.4",
+        "leaflet-drift-marker": "^2.0.0",
         "leaflet-rotatedmarker": "^0.2.0"
     },
     "devDependencies": {