@fleetbase/fleetops-engine 0.1.4 → 0.1.5

package/addon/components/live-map.js

@@ -21,6 +21,7 @@ export default class LiveMapComponent extends Component {
     @service notifications;
     @service serviceAreas;
     @service appCache;
+    @service engineContext;
 
     @tracked routes = [];
     @tracked drivers = [];
@@ -41,6 +42,7 @@ export default class LiveMapComponent extends Component {
     @tracked drawControl;
     @tracked latitude = DEFAULT_LATITUDE;
     @tracked longitude = DEFAULT_LONGITUDE;
+    @tracked skipSetCoordinates = false;
     @tracked mapId = guidFor(this);
     @alias('currentUser.latitude') userLatitude;
     @alias('currentUser.longitude') userLongitude;
@@ -59,6 +61,16 @@ export default class LiveMapComponent extends Component {
         return tileSourceUrl ?? 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
     }
 
+    /**
+     * Creates an instance of LiveMapComponent.
+     * @memberof LiveMapComponent
+     */
+    constructor() {
+        super(...arguments);
+
+        this.skipSetCoordinates = this.args.skipSetCoordinates ?? false;
+    }
+
     /**
      * ----------------------------------------------------------------------------
      * SETUP
@@ -66,23 +78,31 @@ export default class LiveMapComponent extends Component {
      *
      * Functions for initialization and setup.
      */
-
     @action async setupLiveMap() {
-        if (this.appCache.has(['map_latitude', 'map_longitude'])) {
-            this.latitude = this.appCache.get('map_latitude');
-            this.longitude = this.appCache.get('map_longitude');
-            this.isReady = true;
-        }
+        // trigger that initial coordinates have been set
+        this.engineContext.trigger('livemap.loaded', this);
+
+        if (this.skipSetCoordinates === false) {
+            if (this.appCache.has(['map_latitude', 'map_longitude'])) {
+                this.latitude = this.appCache.get('map_latitude');
+                this.longitude = this.appCache.get('map_longitude');
+                this.isReady = true;
+            }
 
-        const { latitude, longitude } = await this.getInitialCoordinates();
+            const { latitude, longitude } = await this.getInitialCoordinates();
 
-        if (this.appCache.doesntHave(['map_latitude', 'map_longitude'])) {
-            this.appCache.set('map_latitude', latitude);
-            this.appCache.set('map_longitude', longitude);
+            if (this.appCache.doesntHave(['map_latitude', 'map_longitude'])) {
+                this.appCache.set('map_latitude', latitude);
+                this.appCache.set('map_longitude', longitude);
+            }
+
+            this.latitude = latitude;
+            this.longitude = longitude;
         }
 
-        this.latitude = latitude;
-        this.longitude = longitude;
+        // trigger that initial coordinates have been set
+        this.engineContext.trigger('livemap.has_coordinates', { latitude: this.latitude, longitude: this.longitude });
+
         this.routes = await this.fetchActiveRoutes();
         this.drivers = await this.fetchActiveDrivers();
         this.serviceAreaRecords = await this.fetchServiceAreas();
@@ -93,6 +113,9 @@ export default class LiveMapComponent extends Component {
         if (typeof this.args.onReady === 'function') {
             this.args.onReady(this);
         }
+
+        // add context event
+        this.engineContext.trigger('livemap.ready', this);
     }
 
     @action setMapReference(event) {
@@ -175,6 +198,10 @@ export default class LiveMapComponent extends Component {
         this[actionName] = callback;
     }
 
+    @action shouldSkipSettingInitialCoordinates() {
+        this.skipSetCoordinates = true;
+    }
+
     /**
      * ----------------------------------------------------------------------------
      * TRACKED LAYER UTILITIES
@@ -182,7 +209,6 @@ export default class LiveMapComponent extends Component {
      *
      * Functions provide utility for managing tracked editable layers.
      */
-
     @action pushEditableLayer(layer) {
         if (!this.editableLayers.includes(layer)) {
             this.editableLayers.pushObject(layer);
@@ -320,7 +346,6 @@ export default class LiveMapComponent extends Component {
      * Functions are used to help or utilize on Leaflet Layers/ Controls.
      *
      */
-
     @action removeDrawingControl() {
         if (isBlank(this.drawControl)) {
             return;

package/addon/components/settings-window.hbs

@@ -7,7 +7,7 @@
         <div class="px-5 py-4">
             <InputGroup @name="Default Adhoc Ping Distance" @type="number" @value={{this.company.options.fleetops.adhoc_distance}} @wrapperClass="mb-0" @helpText="This setting determines the default distance in meters adhoc orders should ping drivers within vicinity of the order pickup point." />
             <div class="mt-2 px-3 py-1 rounded-lg border border-blue-600 bg-blue-100 flex items-center">
-                <FaIcon @icon="comment-exclamation" class="text-blue-900 mr-1.5" />
+                <FaIcon @icon="triangle-exclamation" class="text-blue-900 mr-1.5" />
                 <span class="text-blue-900 text-xs">Distance must be in meters</span>
             </div>
         </div>

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

@@ -82,6 +82,13 @@ export default class OperationsOrdersIndexViewController extends Controller {
      */
     @service hostRouter;
 
+    /**
+     * Inject the `engineContext` service
+     *
+     * @var {Service}
+     */
+    @service engineContext;
+
     @tracked isLoadingAdditionalData = false;
     @tracked isWaypointsCollapsed;
     @tracked leafletRoute;
@@ -200,13 +207,40 @@ export default class OperationsOrdersIndexViewController extends Controller {
         // always set map layout
         this.ordersController.setLayoutMode('map');
 
-        setTimeout(() => {
-            this.leafletMap?.liveMap?.hideDrivers();
-            this.leafletMap?.liveMap?.hideRoutes();
+        // create initial setup function which runs 600ms after invoked
+        const setup = (ms = 500) => {
+            return later(
+                this,
+                () => {
+                    this.leafletMap?.liveMap?.hideDrivers();
+                    this.leafletMap?.liveMap?.hideRoutes();
+
+                    // display order route on map
+                    this.displayOrderRoute();
+                },
+                ms
+            );
+        };
+
+        // create a display order route only function
+        const displayOrderRoute = () => {
+            return this.displayOrderRoute();
+        };
+
+        // re-display order routes when livemap has coordinates
+        this.engineContext.on('livemap.has_coordinates', this, displayOrderRoute);
+
+        // when transitioning away kill event listener
+        this.hostRouter.on('routeWillChange', () => {
+            const isListening = this.engineContext.has('livemap.has_coordinates');
+
+            if (isListening) {
+                this.engineContext.off('livemap.has_coordinates', this, displayOrderRoute);
+            }
+        });
 
-            // display order route on map
-            this.displayOrderRoute();
-        }, 600);
+        // run setup
+        setup();
     }
 
     @action displayOrderRoute() {
@@ -251,16 +285,20 @@ export default class OperationsOrdersIndexViewController extends Controller {
             this.leafletRoute = routes.firstObject;
         });
 
-        setTimeout(() => {
-            leafletMap?.flyToBounds(waypoints, {
-                paddingBottomRight: [200, 0],
-                maxZoom: 14,
-                animate: true,
-            });
-            leafletMap.once('moveend', function () {
-                leafletMap.panBy([250, 0]);
-            });
-        }, 300);
+        later(
+            this,
+            () => {
+                leafletMap?.flyToBounds(waypoints, {
+                    paddingBottomRight: [200, 0],
+                    maxZoom: 14,
+                    animate: true,
+                });
+                leafletMap.once('moveend', function () {
+                    leafletMap.panBy([250, 0]);
+                });
+            },
+            300
+        );
     }
 
     /**

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

@@ -73,6 +73,13 @@ export default class OperationsOrdersIndexController extends Controller {
      */
     @service crud;
 
+    /**
+     * Inject the `engineContext` service
+     *
+     * @var {Service}
+     */
+    @service engineContext;
+
     /**
      * Queryable parameters for this controller's model
      *
@@ -520,6 +527,8 @@ export default class OperationsOrdersIndexController extends Controller {
         if (mode === 'table') {
             this.isSearchVisible = false;
         }
+
+        this.engineContext.trigger('dashboard.layout.changed', mode);
     }
 
     @action setMapReference({ target }) {

package/addon/services/engine-context.js

@@ -0,0 +1,17 @@
+import Service from '@ember/service';
+import Evented from '@ember/object/evented';
+
+export default class EngineContextService extends Service.extend(Evented) {
+    options = {};
+
+    setOption(key, value) {
+        this.options = {
+            ...this.options,
+            [key]: value,
+        };
+    }
+
+    getOption(key) {
+        return this.options[key];
+    }
+}

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

@@ -129,7 +129,7 @@
                     <div>
                         <InputGroup @name="Adhoc Ping Distance" @type="number" @value={{this.order.adhoc_distance}} @wrapperClass="mb-0" @helpText="This setting determines the adhoc distance to ping for this order, if unset it will fallback to the default setting." />
                         <div class="mt-2 px-3 py-1 rounded-lg border border-blue-600 bg-blue-100 flex items-center">
-                            <FaIcon @icon="comment-exclamation" class="text-blue-900 mr-1.5" />
+                            <FaIcon @icon="triangle-exclamation" class="text-blue-900 mr-1.5" />
                             <span class="text-blue-900 text-xs">Distance must be in meters</span>
                         </div>
                     </div>

package/app/services/engine-context.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/services/engine-context';

package/package.json

@@ -2,7 +2,7 @@
     "name": "@fleetbase/fleetops-engine",
     "extension": "Fleet Ops",
     "icon": "route",
-    "version": "0.1.4",
+    "version": "0.1.5",
     "priority": 0,
     "fleetbase": {
         "dashboard": "int/v1/fleet-ops/dashboard"