preparing for route optimization implementation overhaul

addon/components/customer/orders.js

@@ -25,7 +25,7 @@ export default class CustomerOrdersComponent extends Component {
     @service modalsManager;
     @service customerSession;
     @service hostRouter;
-    @service leafletRouterControl;
+    @service leafletRoutingControl;
     @engineService('@fleetbase/fleetops-engine') movementTracker;
     @engineService('@fleetbase/fleetops-engine') location;
     @tracked orders = [];
@@ -240,7 +240,7 @@ export default class CustomerOrdersComponent extends Component {
         }
 
         const routingService = this.currentUser.getOption('routing', { router: 'osrm' }).router;
-        const { router, formatter } = this.leafletRouterControl.get(routingService);
+        const { router, formatter } = this.leafletRoutingControl.get(routingService);
 
         this.routeControl = new RoutingControl({
             router,

addon/components/live-map.hbs

@@ -243,7 +243,7 @@
     {{/if}}
 </div>
 
-{{#if this.isDataLoaded}}
+{{#if (and this.isDataLoaded (not-eq @drawerTab false))}}
     <LiveMapDrawer
         @tab={{@drawerTab}}
         @onTabChanged={{@onDrawerTabChanged}}

addon/components/live-map.js

@@ -36,7 +36,7 @@ export default class LiveMapComponent extends Component {
     @service contextPanel;
     @service leafletMapManager;
     @service leafletContextmenuManager;
-    @service leafletRouterControl;
+    @service leafletRoutingControl;
     @service theme;
 
     /**
@@ -1140,7 +1140,7 @@ export default class LiveMapComponent extends Component {
         }
 
         const routingService = this.currentUser.getOption('routing', { router: 'osrm' }).router;
-        const { router, formatter } = this.leafletRouterControl.get(routingService);
+        const { router, formatter } = this.leafletRoutingControl.get(routingService);
 
         this.routeControl = new RoutingControl({
             router,

addon/components/route-optimization-engine-select-button.hbs

@@ -15,7 +15,8 @@
         <div class="px-1">
             {{#each this.routeOptimization.availableServices as |service|}}
                 <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.handleClick service)}}>
-                    <div >
+                    <div class="flex flex-row items-center">
+                        <div class="mr-2"><FaIcon @icon="arrow-right" /></div>
                         <div class="text-sm">{{service.name}}</div>
                     </div>
                 </a>

addon/components/route-optimization-wizard-panel.hbs

@@ -0,0 +1,24 @@
+<Overlay
+    @isOpen={{true}}
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizeble={{true}}
+    @width="450px"
+    @overlayClass="route-optimization-wizard-panel"
+>
+    <Overlay::Header @title="New Route Optimization">
+        <div class="flex flex-1 justify-end">
+            <Button @icon="play" @type="primary" @text="Run" @wrapperClass="mr-2" />
+            <Button @type="default" @icon="times" />
+        </div>
+    </Overlay::Header>
+
+    <Overlay::Body @wrapperClass="px-4 space-y-4 pt-4">
+        {{#each @waypoints as |waypoint|}}
+            <div class="border rounded p-4 flex items-center mb-3">{{waypoint.address}}</div>
+        {{/each}}
+        <Spacer @height="300px" />
+    </Overlay::Body>
+</Overlay>

addon/components/route-optimization-wizard-panel.js

@@ -0,0 +1,46 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
+import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
+
+export default class RouteOptimizationWizardPanelComponent extends Component {
+    @service universe;
+    @tracked context;
+
+    /**
+     * Constructs the component and applies initial state.
+     */
+    constructor(owner, { controller }) {
+        super(...arguments);
+        this.controller = controller;
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        // hide sidebar
+        if (this.universe.sidebarContext) {
+            this.universe.sidebarContext.hide();
+        }
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Handles the cancel action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel');
+    }
+}

addon/controllers/operations/orders/index.js

@@ -22,6 +22,7 @@ export default class OperationsOrdersIndexController extends BaseController {
     @service socket;
     @service abilities;
     @service theme;
+    @service routeOptimization;
 
     /**
      * Queryable parameters for this controller's model
@@ -1130,7 +1131,6 @@ export default class OperationsOrdersIndexController extends BaseController {
      */
     @action bulkAssignDriver(selected = []) {
         selected = selected.length > 0 ? selected : this.table.selectedRows;
-
         if (!isArray(selected) || selected.length === 0) {
             return;
         }
@@ -1199,12 +1199,37 @@ export default class OperationsOrdersIndexController extends BaseController {
         });
     }
 
+    /**
+     * Commits the bulk query to the server for results.
+     * @action
+     * @memberof OperationsOrdersIndexController
+     */
     @action commitBulkQuery() {
         this.bulk_query = this.bulkSearchValue;
     }
 
+    /**
+     * Resets/clear the bulk query search.
+     * @action
+     * @memberof OperationsOrdersIndexController
+     */
     @action removeBulkQuery() {
         this.bulkSearchValue = '';
         this.bulk_query = null;
     }
+
+    /**
+     * Run route optimization wizard.
+     * @action
+     * @memberof OperationsOrdersIndexController
+     */
+    @action optimizeOrderRoutes(selected = []) {
+        selected = selected.length > 0 ? selected : this.table.selectedRows;
+
+        return this.hostRouter.transitionTo('console.fleet-ops.operations.routes.index.new', {
+            queryParams: {
+                selectedOrders: selected.map((_) => _.public_id).join(','),
+            },
+        });
+    }
 }

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

@@ -41,7 +41,7 @@ export default class OperationsOrdersIndexNewController extends BaseController {
     @service contextPanel;
     @service universe;
     @service routeOptimization;
-    @service leafletRouterControl;
+    @service leafletRoutingControl;
     @service osrm;
 
     @tracked order = this.store.createRecord('order', { meta: [] });
@@ -613,14 +613,15 @@ export default class OperationsOrdersIndexNewController extends BaseController {
         return route;
     }
 
-    @action setOptimizedRoute(route, trip, waypoints) {
+    @action setOptimizedRoute(route, trip, waypoints, engine = 'osrm') {
         let summary = { totalDistance: trip.distance, totalTime: trip.duration };
         let payload = {
             optimized: true,
             coordinates: route,
             waypoints,
             trip,
             summary,
+            engine,
         };
 
         this.leafletOptimizedRoute = payload;
@@ -792,7 +793,7 @@ export default class OperationsOrdersIndexNewController extends BaseController {
 
         if (canPreviewRoute) {
             const routingService = this.currentUser.getOption('routing', { router: 'osrm' }).router;
-            const { router, formatter } = this.leafletRouterControl.get(routingService);
+            const { router, formatter } = this.leafletRoutingControl.get(routingService);
 
             this.previewRouteControl = new RoutingControl({
                 router,
@@ -886,7 +887,7 @@ export default class OperationsOrdersIndexNewController extends BaseController {
         }
     }
 
-    handleRouteOptimization({ sortedWaypoints, route, trip, result }) {
+    handleRouteOptimization({ sortedWaypoints, route, trip, result, engine = 'osrm' }) {
         // Update map layers & UI
         this.removeRoutingControlPreview();
         this.removeOptimizedRoute(this.leafletMap);
@@ -895,7 +896,7 @@ export default class OperationsOrdersIndexNewController extends BaseController {
         // Update controller state
         this.waypoints = sortedWaypoints;
         if (route) {
-            this.setOptimizedRoute(route, trip, result.waypoints);
+            this.setOptimizedRoute(route, trip, result.waypoints, engine);
         }
         this.previewDraftOrderRoute(this.payload, this.waypoints, this.isMultipleDropoffOrder);
         this.updatePayloadCoordinates();

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

@@ -23,7 +23,7 @@ export default class OperationsOrdersIndexViewController extends BaseController
     @service socket;
     @service universe;
     @service contextPanel;
-    @service leafletRouterControl;
+    @service leafletRoutingControl;
 
     @tracked isLoadingAdditionalData = false;
     @tracked isWaypointsCollapsed;
@@ -383,7 +383,7 @@ export default class OperationsOrdersIndexViewController extends BaseController
         leafletMap.flyTo(waypoints.firstObject);
 
         const routingService = this.currentUser.getOption('routing', { router: 'osrm' }).router;
-        const { router, formatter } = this.leafletRouterControl.get(routingService);
+        const { router, formatter } = this.leafletRoutingControl.get(routingService);
 
         this.routeControl = new RoutingControl({
             router,

addon/controllers/operations/routes/index.js

@@ -0,0 +1,13 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class OperationsRoutesIndexController extends Controller {
+    @tracked leafletMap;
+    @tracked liveMap;
+
+    @action setMapReference({ target }) {
+        this.leafletMap = target;
+        this.liveMap = target.liveMap;
+    }
+}

addon/controllers/operations/routes/index/new.js

@@ -0,0 +1,36 @@
+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';
+
+export default class OperationsRoutesIndexNewController extends Controller {
+    @service store;
+    @tracked panel;
+    @tracked selectedOrders = '';
+    @tracked waypoints = [];
+
+    @action setOverlayPanelContext(overlayPanelContext) {
+        this.panel = overlayPanelContext;
+        this.loadSelectedOrders.perform(this.selectedOrders.split(','));
+    }
+
+    @task *loadSelectedOrders(selectedOrders) {
+        const orders = yield this.store.query('order', { only: selectedOrders });
+        console.log('[orders]', orders);
+        this.extractWaypoints(orders);
+    }
+
+    extractWaypoints(orders = []) {
+        const extracted = [];
+
+        orders.forEach((order) => {
+            const pickup = order.get('payload.pickup');
+            const dropoff = order.get('payload.dropoff');
+            const waypoints = order.get('payload.waypoints')?.toArray() ?? [];
+            extracted.push(pickup, dropoff, ...waypoints);
+        });
+
+        this.waypoints = extracted.filter(Boolean);
+    }
+}

addon/controllers/operations/routes/index/view.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class OperationsRoutesIndexViewController extends Controller {}

addon/controllers/settings/routing.js

@@ -7,8 +7,14 @@ export default class SettingsRoutingController extends Controller {
     @service fetch;
     @service notifications;
     @service currentUser;
-    @service leafletRouterControl;
+    @service leafletRoutingControl;
     @tracked routerService = 'osrm';
+    @tracked routingUnit = 'km';
+    @tracked routingUnitOptions = [
+        { label: 'Kilometers', value: 'km' },
+        { label: 'Miles', value: 'mi' },
+    ];
+    @tracked saveTasks = [];
 
     constructor() {
         super(...arguments);
@@ -23,8 +29,9 @@ export default class SettingsRoutingController extends Controller {
     @task *saveSettings() {
         try {
             yield this.fetch.post('fleet-ops/settings/routing-settings', { router: this.routerService });
+            yield this.performAdditionalSaveTasks();
             // Save in local memory too
-            this.currentUser.setOption('routing', { router: this.routerService });
+            this.currentUser.setOption('routing', { router: this.routerService, unit: this.routingUnit });
             this.notifications.success('Routing setting saved.');
         } catch (error) {
             this.notifications.serverError(error);
@@ -38,10 +45,25 @@ export default class SettingsRoutingController extends Controller {
      */
     @task *getSettings() {
         try {
-            const { router } = yield this.fetch.get('fleet-ops/settings/routing-settings');
+            const { router, unit } = yield this.fetch.get('fleet-ops/settings/routing-settings');
             this.routerService = router;
+            this.routingUnit = unit;
         } catch (error) {
             this.notifications.serverError(error);
         }
     }
+
+    registerSaveTask(task) {
+        this.saveTasks.push(task);
+    }
+
+    async performAdditionalSaveTasks() {
+        for (let i = 0; i < this.saveTasks.length; i++) {
+            const task = this.saveTasks[i];
+            if (typeof task.perform === 'function') {
+                await task.perform();
+            }
+        }
+        return true;
+    }
 }

addon/engine.js

@@ -9,7 +9,7 @@ import AdminAvatarManagementComponent from './components/admin/avatar-management
 import CustomerOrdersComponent from './components/customer/orders';
 import CustomerAdminSettingsComponent from './components/customer/admin-settings';
 import OrderTrackingLookupComponent from './components/order-tracking-lookup';
-import { RouterControl } from './services/leaflet-router-control';
+import { RoutingControl } from './services/leaflet-routing-control';
 import { OSRMv1 } from '@fleetbase/leaflet-routing-machine';
 import getRoutingHost from '@fleetbase/ember-core/utils/get-routing-host';
 
@@ -68,12 +68,12 @@ export default class FleetOpsEngine extends Engine {
         }
 
         // Register OSRM as Routing Controler
-        const leafletRouterControl = app.lookup('service:leaflet-router-control');
-        if (leafletRouterControl) {
+        const leafletRoutingControl = app.lookup('service:leaflet-routing-control');
+        if (leafletRoutingControl) {
             const routingHost = getRoutingHost();
-            leafletRouterControl.register(
+            leafletRoutingControl.register(
                 'osrm',
-                new RouterControl({
+                new RoutingControl({
                     name: 'OSRM',
                     router: new OSRMv1({
                         serviceUrl: `${routingHost}/route/v1`,
@@ -133,6 +133,7 @@ export default class FleetOpsEngine extends Engine {
             'fleet-ops:template:operations:orders:new',
             'fleet-ops:template:operations:orders:new:entities-input',
             'fleet-ops:template:operations:orders:new:entities-input:entity',
+            'fleet-ops:template:settings:routing',
         ]);
 
         universe.afterBoot(function (universe) {