@fleetbase/fleetops-engine 0.6.45 → 0.6.47

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

@@ -1,22 +1,73 @@
 import Controller, { inject as controller } from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
 import { isArray } from '@ember/array';
 import { task } from 'ember-concurrency';
+import { colorForId, routeColorForStatus, routeStyleForStatus } from '../../../../utils/route-colors';
+import { buildRoutePointMarkerPresentation, buildRoutePointsFromPayload } from '../../../../utils/route-visualization';
 
 export default class OperationsOrdersIndexDetailsController extends Controller {
     @controller('operations.orders.index') index;
     @service('universe/menu-service') menuService;
     @service orderActions;
     @service orderSocketEvents;
-    @service leafletMapManager;
+    @service mapManager;
     @service leafletLayerVisibilityManager;
     @service hostRouter;
     @service universe;
     @service sidebar;
     @tracked routingControl;
     @tracked routingCompleted = false;
+    @tracked realtimeOrderPublicId = null;
+
+    get routePoints() {
+        return buildRoutePointsFromPayload(this.model?.payload);
+    }
+
+    get routeMarkerFactory() {
+        const routeColor = colorForId(this.model.public_id ?? this.model.id ?? 'order-route');
+
+        return (_waypoint, index) => {
+            return buildRoutePointMarkerPresentation(this.routePoints[index], routeColor);
+        };
+    }
+
+    get routeMarkerWaypoints() {
+        return this.routePoints.map(({ place }) => [place.latitude, place.longitude]);
+    }
+
+    get routeStatus() {
+        return this.model.status ?? 'created';
+    }
+
+    get routePolylineOptions() {
+        const color = routeColorForStatus(this.routeStatus);
+        const styles = routeStyleForStatus(this.routeStatus, color);
+
+        return {
+            color,
+            weight: styles.at(-1)?.weight ?? 4,
+            opacity: styles.at(-1)?.opacity ?? 0.85,
+            styles,
+        };
+    }
+
+    get routeControlTag() {
+        return this.model?.public_id ? `order-details:${this.model.public_id}` : null;
+    }
+
+    get routingControlOptions() {
+        return {
+            tag: this.routeControlTag,
+            color: this.routePolylineOptions.color,
+            status: this.routeStatus,
+            markerWaypoints: this.routeMarkerWaypoints,
+            polylineOptions: this.routePolylineOptions,
+            createMarker: this.routeMarkerFactory,
+            onRouteFound: this.handleRoutingComplete,
+            onRoutingError: this.handleRoutingComplete,
+        };
+    }
 
     get tabs() {
         const registeredTabs = this.menuService.getMenuItems('fleet-ops:component:order:details');
@@ -104,56 +155,78 @@ export default class OperationsOrdersIndexDetailsController extends Controller {
     }
 
     @task *refresh() {
-        yield this.hostRouter.refresh();
+        try {
+            yield this.hostRouter.refresh();
+        } catch (error) {
+            return error;
+        }
     }
 
-    @action async setup() {
-        // Change to map layout and display order route
-        this.index.changeLayout('map');
-        this.routingCompleted = false;
-        this.routingControl = await this.leafletMapManager.addRoutingControl(this.model.routeWaypoints, {
-            onRouteFound: () => {
-                this.routingCompleted = true;
-            },
-            onRoutingError: () => {
-                this.routingCompleted = true;
-            },
-        });
+    handleRoutingComplete = () => {
+        this.routingCompleted = true;
+    };
 
-        if (!this.routingControl) {
-            this.routingCompleted = true;
+    async setupRealtime() {
+        const currentOrderPublicId = this.model?.public_id;
+        if (!currentOrderPublicId) {
+            return;
         }
 
-        // Hide sidebar
-        this.sidebar.hideNow();
+        if (this.realtimeOrderPublicId && this.realtimeOrderPublicId !== currentOrderPublicId) {
+            this.orderSocketEvents.stop({ public_id: this.realtimeOrderPublicId });
+        }
 
-        // Show & track driver assigned
-        this.leafletLayerVisibilityManager.hideCategory('drivers');
-        this.leafletLayerVisibilityManager.showModelLayer(this.model.driver_assigned);
-        // Should we hide places & other vehicles?
+        this.realtimeOrderPublicId = currentOrderPublicId;
 
-        // Listen for this order events
         this.orderSocketEvents.start(
             this.model,
             async (_msg, { reloadable }) => {
                 if (reloadable) {
                     await this.hostRouter.refresh();
-                    this.routingCompleted = false;
-                    this.routingControl = await this.leafletMapManager.replaceRoutingControl(this.model.routeWaypoints, this.routingControl, {
-                        onRouteFound: () => {
-                            this.routingCompleted = true;
-                        },
-                        onRoutingError: () => {
-                            this.routingCompleted = true;
-                        },
-                    });
-
-                    if (!this.routingControl) {
-                        this.routingCompleted = true;
-                    }
                 }
             },
             { debounceMs: 250 }
         );
     }
+
+    async syncRoutingControl() {
+        this.routingCompleted = false;
+        this.teardownRoutingControls();
+
+        this.routingControl = await this.mapManager.addRoutingControl(this.model.routeWaypoints, this.routingControlOptions);
+
+        if (!this.routingControl) {
+            this.routingCompleted = true;
+        }
+    }
+
+    syncMapContext() {
+        this.leafletLayerVisibilityManager.hideCategory('drivers');
+        this.leafletLayerVisibilityManager.showModelLayer(this.model.driver_assigned);
+    }
+
+    teardownRoutingControls() {
+        if (this.routeControlTag) {
+            this.mapManager.clearRoutingControlsByTag(this.routeControlTag);
+        } else if (this.routingControl) {
+            this.mapManager.removeRoutingControl(this.routingControl);
+        }
+
+        this.routingControl = undefined;
+        this.routingCompleted = false;
+    }
+
+    teardownRealtime() {
+        if (this.realtimeOrderPublicId) {
+            this.orderSocketEvents.stop({ public_id: this.realtimeOrderPublicId });
+            this.realtimeOrderPublicId = null;
+        }
+    }
+
+    async setupDetailsSession() {
+        this.index.changeLayout('map');
+        await this.setupRealtime();
+        await this.syncRoutingControl();
+        this.syncMapContext();
+    }
 }

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

@@ -20,6 +20,7 @@ export default class OperationsOrdersIndexNewController extends Controller {
     @service orderCreation;
     @service orderValidation;
     @service events;
+    @service sidebar;
     @tracked order = this.orderCreation.newOrder();
     @tracked overlay;
 
@@ -92,7 +93,6 @@ export default class OperationsOrdersIndexNewController extends Controller {
     }
 
     @action setup() {
-        // Change to map layout
         this.index.changeLayout('map');
     }
 

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

@@ -142,6 +142,13 @@ export default class OperationsOrdersIndexController extends Controller {
                 filterable: true,
                 filterComponent: 'filter/string',
             },
+            {
+                label: this.intl.t('column.route-type'),
+                valuePath: 'payload.waypoints.length',
+                cellComponent: 'cell/order-route-type',
+                cellClassNames: 'overflow-visible',
+                resizable: true,
+            },
             {
                 label: this.intl.t('column.internal-id'),
                 valuePath: 'internal_id',
@@ -283,7 +290,7 @@ export default class OperationsOrdersIndexController extends Controller {
                 label: this.intl.t('column.type'),
                 valuePath: 'type',
                 resizable: true,
-                hidden: true,
+                humanize: true,
                 sortable: true,
                 filterable: true,
                 filterComponent: 'filter/model',

package/addon/controllers/settings/map.js

@@ -0,0 +1,97 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+import MAP_PROVIDER_OPTIONS from '../../utils/map-provider-options';
+
+export default class SettingsMapController extends Controller {
+    @service fetch;
+    @service notifications;
+    @service intl;
+    @service mapManager;
+    @service mapSettings;
+
+    /**
+     * Available map provider options for the provider selector.
+     *
+     * @memberof SettingsMapController
+     * @var {Array}
+     */
+    @tracked mapProviderOptions = MAP_PROVIDER_OPTIONS;
+
+    /**
+     * The currently-selected map provider key (e.g. 'leaflet' or 'google').
+     *
+     * @memberof SettingsMapController
+     * @var {String}
+     */
+    @tracked mapProvider = 'leaflet';
+
+    /**
+     * Whether settings have been loaded from the server.
+     *
+     * @memberof SettingsMapController
+     * @var {Boolean}
+     */
+    @tracked settingsLoaded = false;
+
+    constructor() {
+        super(...arguments);
+        this.getSettings.perform();
+    }
+
+    // ─── Computed getters ──────────────────────────────────────────────────────
+
+    /**
+     * True when the user has selected Google Maps as the provider.
+     *
+     * @memberof SettingsMapController
+     * @return {Boolean}
+     */
+    get isGoogleMapsSelected() {
+        return this.mapProvider === 'google';
+    }
+
+    // ─── Actions ───────────────────────────────────────────────────────────────
+
+    /**
+     * Called when the user picks a different map provider from the Select.
+     *
+     * @param {Object|String} option  The selected option object or raw value.
+     * @memberof SettingsMapController
+     */
+    @action selectMapProvider(option) {
+        this.mapProvider = option?.value ?? option ?? 'leaflet';
+    }
+
+    @task *saveSettings() {
+        const settings = {
+            mapProvider: this.mapProvider,
+        };
+
+        try {
+            const response = yield this.fetch.post('fleet-ops/settings/map', { settings });
+            this.mapSettings.applySettings(response);
+
+            if (this.mapManager && typeof this.mapManager.setActiveProvider === 'function') {
+                this.mapManager.setActiveProvider(this.mapProvider);
+            }
+
+            this.notifications.success(this.intl.t('settings.map.settings-saved'));
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @task *getSettings() {
+        try {
+            const response = yield this.mapSettings.load({ force: true });
+
+            this.mapProvider = response?.mapProvider ?? 'leaflet';
+            this.settingsLoaded = true;
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+}

package/addon/controllers/settings/payments/index.js

@@ -46,7 +46,7 @@ export default class SettingsPaymentsIndexController extends Controller {
     ];
 
     get isStripeEnabled() {
-        return window.stripeInstance !== undefined || !isEmpty(config.stripe.publishableKey);
+        return !isEmpty(config.stripe.publishableKey);
     }
 
     @task *lookupStripeConnectAccount() {

package/addon/controllers/settings/routing.js

@@ -7,14 +7,20 @@ export default class SettingsRoutingController extends Controller {
     @service fetch;
     @service notifications;
     @service currentUser;
-    @service leafletRoutingControl;
-    @tracked routerService = 'osrm';
+    @service routeEngine;
+    @service routeOptimization;
+    @tracked displayEngine = 'osrm';
+    @tracked optimizationEngine = 'osrm';
     @tracked routingUnit = 'km';
     @tracked routingUnitOptions = [
         { label: 'Kilometers', value: 'km' },
         { label: 'Miles', value: 'mi' },
     ];
-    @tracked saveTasks = [];
+    saveTasks = new Map();
+
+    get hasEngineOverrides() {
+        return ['vroom', 'valhalla'].includes(this.displayEngine) || ['vroom', 'valhalla'].includes(this.optimizationEngine);
+    }
 
     constructor() {
         super(...arguments);
@@ -28,10 +34,19 @@ export default class SettingsRoutingController extends Controller {
      */
     @task *saveSettings() {
         try {
-            yield this.fetch.post('fleet-ops/settings/routing-settings', { router: this.routerService, unit: this.routingUnit });
+            yield this.fetch.post('fleet-ops/settings/routing-settings', {
+                display_engine: this.displayEngine,
+                optimization_engine: this.optimizationEngine,
+                unit: this.routingUnit,
+            });
             yield this.performAdditionalSaveTasks();
             // Save in local memory too
-            this.currentUser.setOption('routing', { router: this.routerService, unit: this.routingUnit });
+            this.currentUser.setOption('routing', {
+                router: this.displayEngine,
+                routing_display_engine: this.displayEngine,
+                routing_optimization_engine: this.optimizationEngine,
+                unit: this.routingUnit,
+            });
             this.notifications.success('Routing setting saved.');
         } catch (error) {
             this.notifications.serverError(error);
@@ -45,23 +60,43 @@ export default class SettingsRoutingController extends Controller {
      */
     @task *getSettings() {
         try {
-            const { router, unit } = yield this.fetch.get('fleet-ops/settings/routing-settings');
-            this.routerService = router;
+            const { router, display_engine, optimization_engine, unit } = yield this.fetch.get('fleet-ops/settings/routing-settings');
+            this.displayEngine = display_engine ?? router ?? 'osrm';
+            this.optimizationEngine = optimization_engine ?? display_engine ?? router ?? 'osrm';
             this.routingUnit = unit;
         } catch (error) {
             this.notifications.serverError(error);
         }
     }
 
-    registerSaveTask(task) {
-        this.saveTasks.push(task);
+    registerSaveTask(key, task) {
+        if (!key || typeof task?.perform !== 'function') {
+            return;
+        }
+
+        this.saveTasks.set(key, task);
+    }
+
+    unregisterSaveTask(key) {
+        if (!key) {
+            return;
+        }
+
+        this.saveTasks.delete(key);
     }
 
     async performAdditionalSaveTasks() {
-        for (let i = 0; i < this.saveTasks.length; i++) {
-            const task = this.saveTasks[i];
-            if (typeof task.perform === 'function') {
+        for (const task of this.saveTasks.values()) {
+            try {
                 await task.perform();
+            } catch (error) {
+                // Ignore explicit ember-concurrency task cancellations from components
+                // that may have unmounted during routing-engine selection changes.
+                if (typeof error?.name === 'string' && error.name.includes('TaskCancelation')) {
+                    continue;
+                }
+
+                throw error;
             }
         }
         return true;

package/addon/extension.js

@@ -73,6 +73,16 @@ export default {
         menuService.registerAdminMenuPanel(
             'Fleet-Ops Config',
             [
+                new MenuItem({
+                    title: 'Routing',
+                    icon: 'route',
+                    component: new ExtensionComponent('@fleetbase/fleetops-engine', 'admin/routing-settings'),
+                }),
+                new MenuItem({
+                    title: 'Map',
+                    icon: 'map',
+                    component: new ExtensionComponent('@fleetbase/fleetops-engine', 'admin/map-settings'),
+                }),
                 new MenuItem({
                     title: 'Navigator App',
                     icon: 'location-arrow',
@@ -179,6 +189,7 @@ export default {
             'fleet-ops:component:order:form:payload:entity:form',
             'fleet-ops:template:settings:routing',
             'fleet-ops:template:settings:orchestrator',
+            'fleet-ops:component:admin:routing-settings',
         ]);
     },
 };

package/addon/helpers/place-address-html.js

@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+import placeAddressHtml from '../utils/place-address-html';
+
+export default helper(function placeAddressHtmlHelper([place]) {
+    return placeAddressHtml(place);
+});

package/addon/instance-initializers/register-google-routes.js

@@ -0,0 +1,17 @@
+export function initialize(owner) {
+    const routeOptimization = owner.lookup('service:route-optimization');
+    const routeEngine = owner.lookup('service:route-engine');
+    const googleRoutes = owner.lookup('service:google-routes');
+
+    if (routeOptimization && googleRoutes) {
+        routeOptimization.register('google', googleRoutes);
+    }
+
+    if (routeEngine && googleRoutes) {
+        routeEngine.register('google', googleRoutes, { display: true });
+    }
+}
+
+export default {
+    initialize,
+};

package/addon/instance-initializers/register-osrm.js

@@ -5,11 +5,16 @@ import { OSRMv1 } from '@fleetbase/leaflet-routing-machine';
 export function initialize(owner) {
     // Register OSRM as route optimization service
     const routeOptimization = owner.lookup('service:route-optimization');
+    const routeEngine = owner.lookup('service:route-engine');
     const osrm = owner.lookup('service:osrm');
     if (routeOptimization && osrm) {
         routeOptimization.register('osrm', osrm);
     }
 
+    if (routeEngine && osrm) {
+        routeEngine.register('osrm', osrm, { display: true });
+    }
+
     // Register OSRM as Routing Controler
     const leafletRoutingControl = owner.lookup('service:leaflet-routing-control');
     if (leafletRoutingControl) {

package/addon/routes/application.js

@@ -12,6 +12,7 @@ export default class ApplicationRoute extends Route {
     @service notifications;
     @service fetch;
     @service currentUser;
+    @service mapSettings;
 
     @action loading(transition) {
         const resource = getResourceNameFromTransition(transition, { humanize: true });
@@ -28,10 +29,15 @@ export default class ApplicationRoute extends Route {
 
         await this.location.getUserLocation();
         await this.#loadRoutingSettings();
+        await this.#loadMapSettings();
     }
 
     async #loadRoutingSettings() {
         const routingSetting = await this.fetch.get('fleet-ops/settings/routing-settings');
         this.currentUser.setOption('routing', routingSetting);
     }
+
+    async #loadMapSettings() {
+        await this.mapSettings.load();
+    }
 }

package/addon/routes/operations/orchestrator.js

@@ -13,6 +13,19 @@ export default class OperationsAllocationRoute extends Route {
     @service hostRouter;
     @service abilities;
     @service intl;
+    @service sidebar;
+    @service mapManager;
+
+    activate() {
+        this.sidebar.hide();
+    }
+
+    deactivate() {
+        this.sidebar.show();
+        this.mapManager.setMapInstance?.(null);
+        this.mapManager.setLivemap?.(null);
+        this.mapManager.setActiveProvider?.(this.mapManager.getConfiguredProvider?.() ?? 'leaflet');
+    }
 
     beforeModel() {
         if (this.abilities.cannot('fleet-ops list order')) {

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

@@ -7,36 +7,27 @@ export default class OperationsOrdersIndexDetailsRoute extends Route {
     @service store;
     @service hostRouter;
     @service orderSocketEvents;
-    @service leafletMapManager;
+    @service mapManager;
     @service abilities;
-    @service universe;
     @service intl;
+    @service sidebar;
 
     @action willTransition(transition) {
         const fromName = transition.from?.name;
         const toName = transition.to?.name;
         const orderDetailsRoute = 'console.fleet-ops.operations.orders.index.details';
+        const isRefreshWithinSameDetailsRoute = fromName?.startsWith(orderDetailsRoute) && toName?.startsWith(orderDetailsRoute) && fromName === toName;
+
+        if (isRefreshWithinSameDetailsRoute) {
+            return true;
+        }
 
         // only cleanup when leaving the order details route tree entirely
         const isLeavingOrderDetails = fromName?.startsWith(orderDetailsRoute) && !toName?.startsWith(orderDetailsRoute);
-
         if (isLeavingOrderDetails) {
             const controller = this.controllerFor('operations.orders.index.details');
-            const rc = controller.routingControl;
-
-            // Put back sidebar
-            if (this.universe.sidebarContext) {
-                this.universe.sidebarContext.show();
-            }
-
-            // stop listening for events
-            this.orderSocketEvents.stop(controller.model);
-
-            // cleanup guards
-            if (rc) {
-                this.leafletMapManager.removeRoutingControl(rc);
-                controller.routingControl = undefined;
-            }
+            controller.teardownRealtime();
+            controller.teardownRoutingControls();
         }
 
         return true;
@@ -47,6 +38,14 @@ export default class OperationsOrdersIndexDetailsRoute extends Route {
         return this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index');
     }
 
+    activate() {
+        this.sidebar.hide();
+    }
+
+    deactivate() {
+        this.sidebar.show();
+    }
+
     beforeModel() {
         if (this.abilities.cannot('fleet-ops view order')) {
             this.notifications.warning(this.intl.t('common.unauthorized-access'));
@@ -75,10 +74,18 @@ export default class OperationsOrdersIndexDetailsRoute extends Route {
         });
     }
 
-    async afterModel(order) {
-        await order.loadTrackingActivity();
-        if (order.meta?._index_resource) {
-            await order.reload();
+    async setupController(controller, model) {
+        super.setupController(...arguments);
+
+        // Change layout to map
+        controller.index?.changeLayout?.('map');
+
+        // load activity and reload order if lightweight payload
+        await model.loadTrackingActivity();
+        if (model.meta?._index_resource) {
+            await model.reload();
         }
+
+        await controller.setupDetailsSession();
     }
 }

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

@@ -7,6 +7,7 @@ export default class OperationsOrdersIndexNewRoute extends Route {
     @service hostRouter;
     @service abilities;
     @service intl;
+    @service sidebar;
 
     @action willTransition() {
         if (this.controller) {
@@ -14,6 +15,14 @@ export default class OperationsOrdersIndexNewRoute extends Route {
         }
     }
 
+    activate() {
+        this.sidebar.hide();
+    }
+
+    deactivate() {
+        this.sidebar.show();
+    }
+
     beforeModel() {
         if (this.abilities.cannot('fleet-ops create order')) {
             this.notifications.warning(this.intl.t('common.unauthorized-access'));

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

@@ -3,7 +3,6 @@ import { inject as service } from '@ember/service';
 
 export default class OperationsOrdersIndexRoute extends Route {
     @service store;
-    @service leafletMapManager;
 
     queryParams = {
         page: { refreshModel: true },

package/addon/routes/settings/map.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class SettingsMapRoute extends Route {}

package/addon/routes.js

@@ -257,6 +257,7 @@ export default buildRoutes(function () {
         this.route('custom-fields');
         this.route('avatars');
         this.route('routing');
+        this.route('map');
         this.route('orchestrator');
         this.route('scheduling');
         this.route('payments', function () {