@fleetbase/fleetops-engine 0.3.7 → 0.3.9

package/addon/components/live-map.js

@@ -297,7 +297,7 @@ export default class LiveMapComponent extends Component {
      */
     @action setupComponent() {
         // trigger that initial coordinates have been set
-        this.universe.trigger('fleetops.livemap.loaded', this);
+        this.universe.trigger('fleet-ops.live-map.loaded', this);
 
         // set initial coordinates
         this.setInitialCoordinates();
@@ -363,7 +363,7 @@ export default class LiveMapComponent extends Component {
 
     /**
      * Marks the LiveMapComponent as ready by setting the "isReady" property and triggering
-     * the "onReady" action and a "fleetops.livemap.ready" event.
+     * the "onReady" action and a "fleetops.live-map.ready" event.
      *
      * @memberof LiveMapComponent
      * @function
@@ -371,7 +371,7 @@ export default class LiveMapComponent extends Component {
     ready() {
         this.isReady = true;
         this.triggerAction('onReady');
-        this.universe.trigger('fleetops.livemap.ready', this);
+        this.universe.trigger('fleet-ops.live-map.ready', this);
     }
 
     /**
@@ -396,7 +396,7 @@ export default class LiveMapComponent extends Component {
                 this.isReady = true;
 
                 // trigger that initial coordinates is set to livemap component
-                this.universe.trigger('fleetops.livemap.has_coordinates', { latitude: this.latitude, longitude: this.longitude });
+                this.universe.trigger('fleet-ops.live-map.has_coordinates', { latitude: this.latitude, longitude: this.longitude });
 
                 return [this.latitude, this.longitude];
             }
@@ -413,7 +413,7 @@ export default class LiveMapComponent extends Component {
             this.isReady = true;
 
             // trigger that initial coordinates is set to livemap component
-            this.universe.trigger('fleetops.livemap.has_coordinates', { latitude: this.latitude, longitude: this.longitude });
+            this.universe.trigger('fleet-ops.live-map.has_coordinates', { latitude: this.latitude, longitude: this.longitude });
 
             return [this.latitude, this.longitude];
         }
@@ -425,7 +425,7 @@ export default class LiveMapComponent extends Component {
      * Sets up the LiveMap component and the Leaflet map instance.
      *
      * This function initializes the LiveMap component, associates it with the Leaflet map instance,
-     * triggers the "fleetops.livemap.leaflet_ready" event, and performs additional setup tasks like
+     * triggers the "fleetops.live-map.leaflet_ready" event, and performs additional setup tasks like
      * configuring context menus, hiding draw controls, and associating the map with the "serviceAreas"
      * service. It also triggers the "onLoad" action with the provided event and target.
      *
@@ -443,13 +443,13 @@ export default class LiveMapComponent extends Component {
         this.leafletMap = target;
 
         // trigger liveMap ready through universe
-        this.universe.trigger('fleetops.livemap.leaflet_ready', event, target);
+        this.universe.trigger('fleet-ops.live-map.leaflet_ready', event, target);
 
         // make fleetops map globally available on the window
         window.FleetOpsLeafletMap = target;
 
         // store this component to universe
-        this.universe.set('FleetOpsLiveMap', this);
+        this.universe.set('component:fleet-ops:live-map', this);
 
         // setup context menu
         this.createMapContextMenu(target);
@@ -1065,7 +1065,16 @@ export default class LiveMapComponent extends Component {
      */
     @action onDriverClicked(driver) {
         this.contextPanel.clear();
-        this.contextPanel.focus(driver);
+        this.contextPanel.focus(driver, 'viewing', {
+            args: {
+                width: '450px',
+                onOpen: () => {
+                    this.leafletMap.once('moveend', () => {
+                        this.leafletMap.panBy([200, 0]);
+                    });
+                },
+            },
+        });
     }
 
     /**
@@ -1113,7 +1122,16 @@ export default class LiveMapComponent extends Component {
      */
     @action onVehicleClicked(vehicle) {
         this.contextPanel.clear();
-        this.contextPanel.focus(vehicle);
+        this.contextPanel.focus(vehicle, 'viewing', {
+            args: {
+                width: '450px',
+                onOpen: () => {
+                    this.leafletMap.once('moveend', () => {
+                        this.leafletMap.panBy([200, 0]);
+                    });
+                },
+            },
+        });
     }
 
     /**
@@ -1910,7 +1928,6 @@ export default class LiveMapComponent extends Component {
                     }
 
                     // from the `get-active-order-coordinates` the responded coordinates will always be [longitude, latitude]
-                    // const [latitude, longitude] = extractCoordinates(coordinates.firstObject.coordinates);
                     const validCoordinates = coordinates.filter((point) => point.cordinates[0] !== 0);
                     const [longitude, latitude] = getWithDefault(validCoordinates, '0.coordiantes', [0, 0]);
 

package/addon/components/map-container/toolbar/zones-panel.js

@@ -2,8 +2,10 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { later } from '@ember/runloop';
 import { classify } from '@ember/string';
 import { calculateInPlacePosition } from 'ember-basic-dropdown/utils/calculate-position';
+import { task } from 'ember-concurrency-decorators';
 
 /**
  * @class MapContainerToolbarZonesPanelComponent
@@ -66,10 +68,18 @@ export default class MapContainerToolbarZonesPanelComponent extends Component {
      */
     constructor() {
         super(...arguments);
+
         this.map = this.args.map;
         this.liveMap = this.args.liveMap;
-        this.fetchServiceAreas();
         this.serviceAreas.setMapInstance(this.args.map);
+
+        later(
+            this,
+            () => {
+                this.fetchServiceAreas.perform();
+            },
+            100
+        );
     }
 
     /**
@@ -115,21 +125,14 @@ export default class MapContainerToolbarZonesPanelComponent extends Component {
      * Fetch service areas and update state.
      * @memberof MapContainerToolbarZonesPanelComponent
      */
-    fetchServiceAreas() {
-        this.isLoading = true;
-
+    @task *fetchServiceAreas() {
         if (this.appCache.has('serviceAreas')) {
             this.serviceAreaRecords = this.appCache.getEmberData('serviceAreas', 'service-area');
         }
 
-        return this.store
-            .query('service-area', { with: ['zones'] })
-            .then((serviceAreaRecords) => {
-                this.serviceAreaRecords = serviceAreaRecords;
-                this.appCache.setEmberData('serviceAreas', serviceAreaRecords);
-            })
-            .finally(() => {
-                this.isLoading = false;
-            });
+        const serviceAreas = yield this.store.query('service-area', { with: ['zones'] });
+
+        this.serviceAreaRecords = serviceAreas;
+        this.appCache.setEmberData('serviceAreas', serviceAreas);
     }
 }

package/addon/components/place-form-panel.hbs

@@ -1,10 +1,13 @@
 <Overlay
     @onLoad={{this.setOverlayContext}}
+    @onOpen={{this.onOpen}}
+    @onClose={{this.onClose}}
+    @onToggle={{this.onToggle}}
     @position="right"
     @noBackdrop={{true}}
     @fullHeight={{true}}
     @isResizeble={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "600px"}}
+    @width={{or this.width @width "570px"}}
 >
     <Overlay::Header
         @title={{if this.place.public_id this.place.name "New Place"}}

package/addon/components/place-panel.hbs

@@ -1,10 +1,13 @@
 <Overlay
     @onLoad={{this.setOverlayContext}}
+    @onOpen={{this.onOpen}}
+    @onClose={{this.onClose}}
+    @onToggle={{this.onToggle}}
     @position="right"
     @noBackdrop={{true}}
     @fullHeight={{true}}
     @isResizable={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "600px"}}
+    @width={{or this.width @width "570px"}}
 >
     <Overlay::Header @title={{this.place.name}} @status={{this.place.public_id}} @hideStatusDot={{true}} @createdAt={{this.place.createdAt}}>
         <Button @type="default" @icon="pen" @helpText="Edit place" @onClick={{this.onEdit}} @wrapperClass="mr-2" />

package/addon/components/settings-window.hbs

@@ -1,4 +1,4 @@
-<Overlay @onLoad={{this.onLoad}} @isOpen={{@isOpen}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{true}} @isMaximizable={{true}} @isMinimizable={{true}} @width="600px" as |overlay|>
+<Overlay @onLoad={{this.onLoad}} @isOpen={{@isOpen}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{true}} @isMaximizable={{true}} @isMinimizable={{true}} @width="570px" as |overlay|>
     <Overlay::Header @overlay={{overlay}} @title="FleetOps Settings" @onPressCancel={{@onPressCancel}}>
         <Button @icon="save" @type="primary" @text={{if (media 'isMobile') "" "Save Changes"}} @onClick={{this.saveSettings}} @isLoading={{this.isSaving}} @disabled={{or this.isLoading this.isSaving}} />
     </Overlay::Header>

package/addon/components/vehicle-form-panel.hbs

@@ -1,10 +1,13 @@
 <Overlay
     @onLoad={{this.setOverlayContext}}
+    @onOpen={{this.onOpen}}
+    @onClose={{this.onClose}}
+    @onToggle={{this.onToggle}}
     @position="right"
     @noBackdrop={{true}}
     @fullHeight={{true}}
     @isResizeble={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "600px"}}
+    @width={{or this.width @width "570px"}}
 >
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
         <div class="flex flex-row items-center justify-between w-full mb-4">

package/addon/components/vehicle-panel.hbs

@@ -1,10 +1,13 @@
 <Overlay
     @onLoad={{this.setOverlayContext}}
+    @onOpen={{this.onOpen}}
+    @onClose={{this.onClose}}
+    @onToggle={{this.onToggle}}
     @position="right"
     @noBackdrop={{true}}
     @fullHeight={{true}}
     @isResizable={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "600px"}}
+    @width={{or this.width @width "570px"}}
 >
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
         <div class="flex flex-row items-center justify-between w-full mb-4">

package/addon/components/vendor-form-panel.hbs

@@ -1,10 +1,13 @@
 <Overlay
     @onLoad={{this.setOverlayContext}}
+    @onOpen={{this.onOpen}}
+    @onClose={{this.onClose}}
+    @onToggle={{this.onToggle}}
     @position="right"
     @noBackdrop={{true}}
     @fullHeight={{true}}
     @isResizeble={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "600px"}}
+    @width={{or this.width @width "570px"}}
 >
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i">
         <div class="flex flex-row items-center justify-between w-full mb-4">

package/addon/components/vendor-panel.hbs

@@ -1,10 +1,13 @@
 <Overlay
     @onLoad={{this.setOverlayContext}}
+    @onOpen={{this.onOpen}}
+    @onClose={{this.onClose}}
+    @onToggle={{this.onToggle}}
     @position="right"
     @noBackdrop={{true}}
     @fullHeight={{true}}
     @isResizable={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "600px"}}
+    @width={{or this.width @width "570px"}}
 >
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i">
         <div class="flex flex-row items-center justify-between w-full mb-4">

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

@@ -6,8 +6,6 @@ import { isBlank } from '@ember/utils';
 import { equal } from '@ember/object/computed';
 import { timeout } from 'ember-concurrency';
 import { task } from 'ember-concurrency-decorators';
-import extractCoordinates from '@fleetbase/ember-core/utils/extract-coordinates';
-import leafletIcon from '@fleetbase/ember-core/utils/leaflet-icon';
 
 export default class ManagementDriversIndexController extends BaseController {
     /**
@@ -18,18 +16,18 @@ export default class ManagementDriversIndexController extends BaseController {
     @service notifications;
 
     /**
-     * Inject the `modals-manager` service
+     * Inject the `crud` service
      *
      * @var {Service}
      */
-    @service modalsManager;
+    @service crud;
 
     /**
-     * Inject the `crud` service
+     * Inject the `driverActions` service
      *
      * @var {Service}
      */
-    @service crud;
+    @service driverActions;
 
     /**
      * Inject the `store` service
@@ -412,7 +410,7 @@ export default class ManagementDriversIndexController extends BaseController {
                 },
                 {
                     label: 'Locate driver on map...',
-                    fn: this.viewOnMap,
+                    fn: this.locateDriver,
                 },
                 {
                     separator: true,
@@ -539,7 +537,7 @@ export default class ManagementDriversIndexController extends BaseController {
      * @void
      */
     @action deleteDriver(driver, options = {}) {
-        this.crud.delete(driver, {
+        this.driverActions.delete(driver, {
             onSuccess: () => {
                 return this.hostRouter.refresh();
             },
@@ -555,44 +553,7 @@ export default class ManagementDriversIndexController extends BaseController {
      * @void
      */
     @action assignOrder(driver, options = {}) {
-        this.modalsManager.show('modals/driver-assign-order', {
-            title: `Assign Order to this Driver`,
-            acceptButtonText: 'Assign Order',
-            acceptButtonIcon: 'check',
-            acceptButtonIconPrefix: 'fas',
-            acceptButtonDisabled: true,
-            hideDeclineButton: true,
-            selectedOrder: null,
-            selectOrder: (order) => {
-                this.modalsManager.setOption('selectedOrder', order);
-                this.modalsManager.setOption('acceptButtonDisabled', false);
-            },
-            driver,
-            confirm: (modal) => {
-                const selectedOrder = modal.getOption('selectedOrder');
-
-                if (!selectedOrder) {
-                    this.notifications.warning('No order selected!');
-                    return;
-                }
-
-                modal.startLoading();
-
-                driver.set('current_job_uuid', selectedOrder.id);
-
-                return driver
-                    .save()
-                    .then(() => {
-                        this.notifications.success(`${driver.name} assigned to order.`);
-                    })
-                    .catch((error) => {
-                        driver.rollbackAttributes();
-                        modal.stopLoading();
-                        this.notifications.serverError(error);
-                    });
-            },
-            ...options,
-        });
+        this.driverActions.assignOrder(driver, options);
     }
 
     /**
@@ -603,29 +564,7 @@ export default class ManagementDriversIndexController extends BaseController {
      * @void
      */
     @action assignVehicle(driver, options = {}) {
-        this.modalsManager.show('modals/driver-assign-vehicle', {
-            title: `Assign Vehicle to this Driver`,
-            acceptButtonText: 'Confirm & Create',
-            acceptButtonIcon: 'check',
-            acceptButtonIconPrefix: 'fas',
-            hideDeclineButton: true,
-            driver,
-            confirm: (modal) => {
-                modal.startLoading();
-
-                return driver
-                    .save()
-                    .then((driver) => {
-                        this.notifications.success(`${driver.name} assigned to vehicle.`);
-                    })
-                    .catch((error) => {
-                        driver.rollbackAttributes();
-                        modal.stopLoading();
-                        this.notifications.serverError(error);
-                    });
-            },
-            ...options,
-        });
+        this.driverActions.assignVehicle(driver, options);
     }
 
     /**
@@ -634,26 +573,7 @@ export default class ManagementDriversIndexController extends BaseController {
      * @param {DriverModel} driver
      * @void
      */
-    @action viewOnMap(driver, options = {}) {
-        const { location } = driver;
-        const [latitude, longitude] = extractCoordinates(location.coordinates);
-
-        this.modalsManager.show('modals/point-map', {
-            title: `Location of ${driver.name}`,
-            acceptButtonText: 'Done',
-            acceptButtonIcon: 'check',
-            acceptButtonIconPrefix: 'fas',
-            modalClass: 'modal-lg',
-            hideDeclineButton: true,
-            latitude,
-            longitude,
-            location,
-            popupText: `${driver.name} (${driver.public_id})`,
-            icon: leafletIcon({
-                iconUrl: driver?.vehicle_avatar,
-                iconSize: [40, 40],
-            }),
-            ...options,
-        });
+    @action locateDriver(driver, options = {}) {
+        this.driverActions.locate(driver, options);
     }
 }

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

@@ -22,11 +22,11 @@ export default class ManagementVehiclesIndexController extends BaseController {
     @service notifications;
 
     /**
-     * Inject the `modals-manager` service
+     * Inject the `vehicleActions` service
      *
      * @var {Service}
      */
-    @service modalsManager;
+    @service vehicleActions;
 
     /**
      * Inject the `store` service
@@ -386,13 +386,13 @@ export default class ManagementVehiclesIndexController extends BaseController {
                     label: 'Edit vehicle...',
                     fn: this.editVehicle,
                 },
+                {
+                    label: 'Locate vehicle...',
+                    fn: this.locateVehicle,
+                },
                 {
                     separator: true,
                 },
-                // {
-                //     label: 'Assign driver to vehicle...',
-                //     fn: this.assignDriver,
-                // },
                 {
                     label: 'Delete vehicle...',
                     fn: this.deleteVehicle,
@@ -503,7 +503,7 @@ export default class ManagementVehiclesIndexController extends BaseController {
      * @void
      */
     @action deleteVehicle(vehicle, options = {}) {
-        this.crud.delete(vehicle, {
+        this.vehicleActions.delete(vehicle, {
             onSuccess: () => {
                 return this.hostRouter.refresh();
             },
@@ -522,23 +522,13 @@ export default class ManagementVehiclesIndexController extends BaseController {
     @action assignDriver() {}
 
     /**
-     * View a place location on map
+     * View a vehicle location on map
      *
-     * @param {PlaceModel} place
+     * @param {VehicleModel} vehicle
      * @param {Object} options
      * @void
      */
-    @action viewOnMap(place, options = {}) {
-        const { latitude, longitude } = place;
-
-        this.modalsManager.show('modals/point-map', {
-            title: `Location of ${place.name}`,
-            acceptButtonText: 'Done',
-            hideDeclineButton: true,
-            latitude,
-            longitude,
-            location: [latitude, longitude],
-            ...options,
-        });
+    @action locateVehicle(vehicle, options = {}) {
+        this.vehicleActions.locate(vehicle, options);
     }
 }

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

@@ -13,7 +13,6 @@ import findClosestWaypoint from '@fleetbase/ember-core/utils/find-closest-waypoi
 import isNotEmpty from '@fleetbase/ember-core/utils/is-not-empty';
 import getRoutingHost from '@fleetbase/ember-core/utils/get-routing-host';
 import groupBy from '@fleetbase/ember-core/utils/macros/group-by';
-import extractCoordinates from '@fleetbase/ember-core/utils/extract-coordinates';
 import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
 
 L.Bounds.prototype.intersects = function (bounds) {
@@ -213,7 +212,7 @@ export default class OperationsOrdersIndexNewController extends BaseController {
         return (
             this.routePreviewArray
                 // .filter((place) => place.get('hasValidCoordinates'))
-                .map((place) => place.get('extractedLatLng'))
+                .map((place) => place.get('latlng'))
         );
     }
 
@@ -580,7 +579,7 @@ export default class OperationsOrdersIndexNewController extends BaseController {
             });
         } else {
             // setup interface when livemap is ready
-            this.universe.on('fleetops.livemap.ready', () => {
+            this.universe.on('fleet-ops.live-map.ready', () => {
                 this.setupInterface();
             });
         }
@@ -749,7 +748,7 @@ export default class OperationsOrdersIndexNewController extends BaseController {
     }
 
     @action createCoordinatesFromRoutePlaceArray(array) {
-        return array.filter((place) => place.get('hasValidCoordinates')).map((place) => place.get('extractedLatLng'));
+        return array.filter((place) => place.get('hasValidCoordinates')).map((place) => place.get('latlng'));
     }
 
     @action previewDraftOrderRoute(payload, waypoints, isMultipleDropoffOrder = false) {
@@ -875,7 +874,8 @@ export default class OperationsOrdersIndexNewController extends BaseController {
                     const waypointModel = findClosestWaypoint(optimizedWaypointLatitude, optimizedWaypointLongitude, this.waypoints);
                     // eslint-disable-next-line no-undef
                     // const optimizedWaypointMarker = new L.Marker(optimizedWaypoint.location.reverse()).addTo(leafletMap);
-                    const optimizedWaypointMarker = new L.Marker(extractCoordinates(optimizedWaypoint.location)).addTo(leafletMap);
+                    const [longitude, latitude] = getWithDefault(optimizedWaypoint.location, 'coordiantes', [0, 0]);
+                    const optimizedWaypointMarker = new L.Marker([latitude, longitude]).addTo(leafletMap);
 
                     sortedWaypoints.pushObject(waypointModel);
                     optimizedRouteMarkers.pushObject(optimizedWaypointMarker);

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

@@ -19,13 +19,6 @@ export default class OperationsOrdersIndexViewController extends BaseController
      */
     @controller('operations.orders.index') ordersController;
 
-    /**
-     * Inject the `operations.orders.index` controller
-     *
-     * @var {Controller}
-     */
-    @controller('management.places.index') placesController;
-
     /**
      * Inject the `management.contacts.index` controller
      *
@@ -248,14 +241,14 @@ export default class OperationsOrdersIndexViewController extends BaseController
         };
 
         // re-display order routes when livemap has coordinates
-        this.universe.on('fleetops.livemap.has_coordinates', this, displayOrderRoute);
+        this.universe.on('fleet-ops.live-map.has_coordinates', this, displayOrderRoute);
 
         // when transitioning away kill event listener
         this.hostRouter.on('routeWillChange', () => {
-            const isListening = this.universe.has('fleetops.livemap.has_coordinates');
+            const isListening = this.universe.has('fleet-ops.live-map.has_coordinates');
 
             if (isListening) {
-                this.universe.off('fleetops.livemap.has_coordinates', this, displayOrderRoute);
+                this.universe.off('fleet-ops.live-map.has_coordinates', this, displayOrderRoute);
             }
         });
 
@@ -472,9 +465,12 @@ export default class OperationsOrdersIndexViewController extends BaseController
             isOptimizingRoute: false,
             editPlace: async (place) => {
                 await this.modalsManager.done();
-                this.placesController.editPlace(place, {
-                    onFinish: () => {
-                        this.editOrderRoute(order);
+
+                this.contextPanel.focus(place, 'editing', {
+                    args: {
+                        onClose: () => {
+                            this.editOrderRoute(order);
+                        },
                     },
                 });
             },

package/addon/helpers/format-point.js

@@ -1,13 +1,16 @@
 import { helper } from '@ember/component/helper';
 import { isArray } from '@ember/array';
-import extractCoordinates from '../utils/extract-coordinates';
 
 export default helper(function formatPoint([point]) {
+    // array assumes  [latitude, longitude]
     if (isArray(point)) {
         return `(${point[0]}, ${point[1]})`;
     }
 
-    const [latitude, longitude] = extractCoordinates(point.coordinates);
+    let [longitude, latitude] = [0, 0];
+    if (point && isArray(point.coordinates)) {
+        [longitude, latitude] = point.coordinates;
+    }
 
     return `(${latitude}, ${longitude})`;
 });

package/addon/helpers/point-to-coordinates.js

@@ -1,8 +1,12 @@
 import { helper } from '@ember/component/helper';
-import extractCoordinates from '../utils/extract-coordinates';
+import { isArray } from '@ember/array';
 
 export default helper(function pointToCoordinates([point, format = 'array']) {
-    const [latitude, longitude] = extractCoordinates(point?.coordinates);
+    let [longitude, latitude] = [0, 0];
+
+    if (point && isArray(point.coordinates)) {
+        [longitude, latitude] = point.coordinates;
+    }
 
     if (format === 'array') {
         return [latitude, longitude];