Merge pull request #161 from fleetbase/dev-v0.6.13

v0.6.13 ~ Implemented route optimization registry, fixed multiple way…

Author: roncodes

addon/components/customer/orders.js

@@ -6,8 +6,7 @@ import { isArray } from '@ember/array';
 import { later } from '@ember/runloop';
 import { debug } from '@ember/debug';
 import { task, timeout } from 'ember-concurrency';
-import { OSRMv1, Control as RoutingControl } from '@fleetbase/leaflet-routing-machine';
-import getRoutingHost from '@fleetbase/ember-core/utils/get-routing-host';
+import { Control as RoutingControl } from '@fleetbase/leaflet-routing-machine';
 import engineService from '@fleetbase/ember-core/decorators/engine-service';
 import registerComponent from '@fleetbase/ember-core/utils/register-component';
 import OrderProgressCardComponent from '../order-progress-card';
@@ -26,6 +25,7 @@ export default class CustomerOrdersComponent extends Component {
     @service modalsManager;
     @service customerSession;
     @service hostRouter;
+    @service leafletRouterControl;
     @engineService('@fleetbase/fleetops-engine') movementTracker;
     @engineService('@fleetbase/fleetops-engine') location;
     @tracked orders = [];
@@ -226,7 +226,6 @@ export default class CustomerOrdersComponent extends Component {
 
     @action displayOrderRoute() {
         const waypoints = this.getRouteCoordinatesFromOrder(this.selectedOrder);
-        const routingHost = getRoutingHost();
         if (this.cannotRouteWaypoints(waypoints)) {
             return;
         }
@@ -240,15 +239,14 @@ export default class CustomerOrdersComponent extends Component {
             debug(`Leaflet Map Error: ${error.message}`);
         }
 
-        const router = new OSRMv1({
-            serviceUrl: `${routingHost}/route/v1`,
-            profile: 'driving',
-        });
+        const routingService = this.currentUser.getOption('routing', { router: 'osrm' }).router;
+        const { router, formatter } = this.leafletRouterControl.get(routingService);
 
         this.routeControl = new RoutingControl({
-            fitSelectedRoutes: false,
             router,
+            formatter,
             waypoints,
+            fitSelectedRoutes: false,
             alternativeClassName: 'hidden',
             addWaypoints: false,
             markerOptions: {

addon/components/layout/fleet-ops-sidebar.js

@@ -162,6 +162,14 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 permission: 'fleet-ops view notification-settings',
                 visible: this.abilities.can('fleet-ops see notification-settings'),
             },
+            {
+                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.routing',
+                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.routing'),
+                icon: 'route',
+                route: 'settings.routing',
+                permission: 'fleet-ops view routing-settings',
+                visible: this.abilities.can('fleet-ops see routing-settings'),
+            },
         ];
 
         const createPanel = (intl, routePrefix, items = []) => ({

addon/components/live-map.js

@@ -9,8 +9,7 @@ import { later } from '@ember/runloop';
 import { debug } from '@ember/debug';
 import { allSettled } from 'rsvp';
 import { task } from 'ember-concurrency';
-import { OSRMv1, Control as RoutingControl } from '@fleetbase/leaflet-routing-machine';
-import getRoutingHost from '@fleetbase/ember-core/utils/get-routing-host';
+import { Control as RoutingControl } from '@fleetbase/leaflet-routing-machine';
 import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
 
 /**
@@ -37,6 +36,7 @@ export default class LiveMapComponent extends Component {
     @service contextPanel;
     @service leafletMapManager;
     @service leafletContextmenuManager;
+    @service leafletRouterControl;
     @service theme;
 
     /**
@@ -1126,7 +1126,6 @@ export default class LiveMapComponent extends Component {
 
         // create order route preview
         const waypoints = this.getRouteCoordinatesFromOrder(order);
-        const routingHost = getRoutingHost();
         if (this.cannotRouteWaypoints(waypoints)) {
             return;
         }
@@ -1140,15 +1139,14 @@ export default class LiveMapComponent extends Component {
             debug(`Leaflet Map Error: ${error.message}`);
         }
 
-        const router = new OSRMv1({
-            serviceUrl: `${routingHost}/route/v1`,
-            profile: 'driving',
-        });
+        const routingService = this.currentUser.getOption('routing', { router: 'osrm' }).router;
+        const { router, formatter } = this.leafletRouterControl.get(routingService);
 
         this.routeControl = new RoutingControl({
-            fitSelectedRoutes: false,
             router,
+            formatter,
             waypoints,
+            fitSelectedRoutes: false,
             alternativeClassName: 'hidden',
             addWaypoints: false,
             markerOptions: {

addon/components/order-config/fields-editor.js

@@ -197,7 +197,7 @@ export default class OrderConfigFieldsEditorComponent extends Component {
         }
     }
 
-    /* eslint no-unused-vars: "off" */
+    /* eslint-disable no-unused-vars */
     @action sortMetaFieldOptions(metaField, el, target) {
         // const { fields } = this;
         // const { index } = el.dataset;

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

@@ -0,0 +1,25 @@
+<DropdownButton
+    @text="Optimize Route"
+    @icon="caret-down"
+    @type="magic"
+    @size="sm"
+    @iconPrefix="fas"
+    @triggerClass="hidden md:flex"
+    @helpText="Optimize route using an integrated optimization engine"
+    @disabled={{@disabled}}
+    @isLoading={{@isLoading}}
+    @renderInPlace={{true}}
+    as |dd|
+>
+    <div class="next-dd-menu" aria-labelledby="user-menu">
+        <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="text-sm">{{service.name}}</div>
+                    </div>
+                </a>
+            {{/each}}
+        </div>
+    </div>
+</DropdownButton>

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

@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class RouteOptimizationEngineSelectButtonComponent extends Component {
+    @service routeOptimization;
+
+    @action handleClick({ key }) {
+        if (typeof this.args.onClick === 'function') {
+            this.args.onClick(key);
+        }
+    }
+}