@fleetbase/fleetops-engine 0.4.3 → 0.4.5

package/addon/components/widget/fleet-ops-key-metrics.js

@@ -0,0 +1,85 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency-decorators';
+
+export default class WidgetFleetOpsKeyMetricsComponent extends Component {
+    /**
+     * Inject the fetch service.
+     *
+     * @memberof WidgetKeyMetricsComponent
+     */
+    @service fetch;
+
+    /**
+     * Property for loading metrics to.
+     *
+     * @memberof WidgetKeyMetricsComponent
+     */
+    @tracked metrics = {};
+
+    /**
+     * Creates an instance of WidgetKeyMetricsComponent.
+     * @memberof WidgetKeyMetricsComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.getDashboardMetrics.perform();
+    }
+
+    /**
+     * Task which fetches key metrics.
+     *
+     * @memberof WidgetKeyMetricsComponent
+     */
+    @task *getDashboardMetrics() {
+        this.metrics = yield this.fetch.get('fleet-ops/metrics').then((response) => {
+            return this.createMetricsMapFromResponse(response);
+        });
+    }
+
+    /**
+     * Creates a map of metrics from the response data. This method organizes the metrics data into a more usable format.
+     *
+     * @param {Object} metrics - The metrics object fetched from the server.
+     * @returns {Object} A map of metrics where each key is a metric name and its value is an object of metric options.
+     * @memberof WidgetKeyMetricsComponent
+     */
+    createMetricsMapFromResponse(metrics = {}) {
+        const keys = Object.keys(metrics);
+        const map = {};
+
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            map[key] = this.createMetricOptionsHash(key, metrics[key]);
+        }
+
+        return map;
+    }
+
+    /**
+     * Creates a hash of options for a given metric. Depending on the metric key, it assigns a specific format.
+     *
+     * @param {string} key - The key representing the specific metric.
+     * @param {number} value - The value of the metric.
+     * @returns {Object} An object containing the metric value and its format.
+     * @memberof WidgetKeyMetricsComponent
+     */
+    createMetricOptionsHash(key, value) {
+        const options = { value };
+
+        if (key === 'earnings') {
+            options.format = 'money';
+        }
+
+        if (key === 'fuel_costs') {
+            options.format = 'money';
+        }
+
+        if (key === 'total_distance_traveled') {
+            options.format = 'meters';
+        }
+
+        return options;
+    }
+}

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

@@ -161,6 +161,28 @@ export default class OperationsOrdersIndexNewController extends BaseController {
             onClick: this.editMetaData,
         },
     ];
+    @tracked uploadQueue = [];
+    acceptedFileTypes = [
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+        'application/msword',
+        'application/pdf',
+        'application/x-pdf',
+        'image/jpeg',
+        'image/png',
+        'image/gif',
+        'image/webp',
+        'video/mp4',
+        'video/quicktime',
+        'video/x-msvideo',
+        'video/x-flv',
+        'video/x-ms-wmv',
+        'audio/mpeg',
+        'video/x-msvideo',
+        'application/zip',
+        'application/x-tar',
+    ];
 
     @not('isServicable') isNotServicable;
     @alias('currentUser.latitude') userLatitude;
@@ -211,27 +233,6 @@ export default class OperationsOrdersIndexNewController extends BaseController {
         this.payloadCoordinates = coordinates;
     }
 
-    // @computed('payload.{dropoff,pickup,waypoints}', 'waypoints.[]')
-    // get payloadCoordinates() {
-    //     let waypoints = [];
-    //     let coordinates = [];
-
-    //     console.log('[this.waypoints]', this.waypoints);
-
-    //     waypoints.pushObjects([this.payload.pickup, ...this.waypoints.map((waypoint) => waypoint.place), this.payload.dropoff]);
-    //     waypoints.forEach((place) => {
-    //         if (place && place.get('longitude') && place.get('latitude')) {
-    //             if (place.hasInvalidCoordinates) {
-    //                 return;
-    //             }
-
-    //             coordinates.pushObject([place.get('longitude'), place.get('latitude')]);
-    //         }
-    //     });
-
-    //     return coordinates;
-    // }
-
     @computed('payloadCoordinates.length', 'waypoints.[]') get isServicable() {
         return this.payloadCoordinates.length >= 2;
     }
@@ -597,7 +598,17 @@ export default class OperationsOrdersIndexNewController extends BaseController {
     }
 
     _seriailizeModel(model) {
-        return isModel(model) ? model.toJSON() : model;
+        if (isModel(model)) {
+            if (typeof model.toJSON === 'function') {
+                return model.toJSON();
+            }
+
+            if (typeof model.serialize === 'function') {
+                return model.serialize();
+            }
+        }
+
+        return model;
     }
 
     _serializeArray(array) {
@@ -1441,4 +1452,37 @@ export default class OperationsOrdersIndexNewController extends BaseController {
             }
         }
     }
+
+    @action queueFile(file) {
+        // since we have dropzone and upload button within dropzone validate the file state first
+        // as this method can be called twice from both functions
+        if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) {
+            return;
+        }
+
+        // Queue and upload immediatley
+        this.uploadQueue.pushObject(file);
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: 'uploads/fleet-ops/order-files',
+                type: 'order_file',
+            },
+            (uploadedFile) => {
+                this.order.files.pushObject(uploadedFile);
+                this.uploadQueue.removeObject(file);
+            },
+            () => {
+                this.uploadQueue.removeObject(file);
+                // remove file from queue
+                if (file.queue && typeof file.queue.remove === 'function') {
+                    file.queue.remove(file);
+                }
+            }
+        );
+    }
+
+    @action removeFile(file) {
+        return file.destroyRecord();
+    }
 }

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

@@ -3,13 +3,11 @@ import { inject as controller } from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action, computed } from '@ember/object';
-import { isArray } from '@ember/array';
 import { later } from '@ember/runloop';
 import { not, notEmpty, alias } from '@ember/object/computed';
 import { task } from 'ember-concurrency-decorators';
 import { OSRMv1, Control as RoutingControl } from '@fleetbase/leaflet-routing-machine';
 import groupBy from '@fleetbase/ember-core/utils/macros/group-by';
-import findClosestWaypoint from '@fleetbase/ember-core/utils/find-closest-waypoint';
 import getRoutingHost from '@fleetbase/ember-core/utils/get-routing-host';
 
 export default class OperationsOrdersIndexViewController extends BaseController {
@@ -115,6 +113,29 @@ export default class OperationsOrdersIndexViewController extends BaseController
     @tracked isWaypointsCollapsed;
     @tracked leafletRoute;
     @tracked routeControl;
+    @tracked commentInput = '';
+    @tracked uploadQueue = [];
+    acceptedFileTypes = [
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+        'application/msword',
+        'application/pdf',
+        'application/x-pdf',
+        'image/jpeg',
+        'image/png',
+        'image/gif',
+        'image/webp',
+        'video/mp4',
+        'video/quicktime',
+        'video/x-msvideo',
+        'video/x-flv',
+        'video/x-ms-wmv',
+        'audio/mpeg',
+        'video/x-msvideo',
+        'application/zip',
+        'application/x-tar',
+    ];
 
     @alias('currentUser.latitude') userLatitude;
     @alias('currentUser.longitude') userLongitude;
@@ -133,16 +154,16 @@ export default class OperationsOrdersIndexViewController extends BaseController
     ];
 
     @tracked routePanelButtons = [
-        {
-            type: 'default',
-            text: 'Edit',
-            icon: 'pencil',
-            iconPrefix: 'fas',
-            onClick: () => {
-                const order = this.model;
-                this.editOrderRoute(order);
-            },
-        },
+        // {
+        //     type: 'default',
+        //     text: 'Edit',
+        //     icon: 'pencil',
+        //     iconPrefix: 'fas',
+        //     onClick: () => {
+        //         const order = this.model;
+        //         this.editOrderRoute(order);
+        //     },
+        // },
     ];
 
     @not('isWaypointsCollapsed') waypointsIsNotCollapsed;
@@ -179,6 +200,25 @@ export default class OperationsOrdersIndexViewController extends BaseController
         return groups;
     }
 
+    @computed('model.payload.{dropoff,pickup,waypoints}') get routeWaypoints() {
+        const { payload } = this.model;
+        let waypoints = [];
+        let coordinates = [];
+
+        waypoints.pushObjects([payload.pickup, ...payload.waypoints.toArray(), payload.dropoff]);
+        waypoints.forEach((place) => {
+            if (place && place.get('longitude') && place.get('latitude')) {
+                if (place.hasInvalidCoordinates) {
+                    return;
+                }
+
+                coordinates.pushObject([place.get('latitude'), place.get('longitude')]);
+            }
+        });
+
+        return coordinates;
+    }
+
     @task *loadOrderRelations(order) {
         yield order.loadPayload();
         yield order.loadDriver();
@@ -186,6 +226,8 @@ export default class OperationsOrdersIndexViewController extends BaseController
         yield order.loadCustomer();
         yield order.loadTrackingActivity();
         yield order.loadOrderConfig();
+        yield order.loadPurchaseRate();
+        yield order.loadFiles();
     }
 
     @action resetView() {
@@ -280,8 +322,7 @@ export default class OperationsOrdersIndexViewController extends BaseController
         setup();
     }
 
-    @computed('model.payload.{dropoff,pickup,waypoints}') get routeWaypoints() {
-        const { payload } = this.model;
+    getPayloadCoordinates(payload) {
         let waypoints = [];
         let coordinates = [];
 
@@ -299,11 +340,19 @@ export default class OperationsOrdersIndexViewController extends BaseController
         return coordinates;
     }
 
+    getPayloadWaypointsAsArray() {
+        if (this.model.payload && this.model.payload.waypoints) {
+            return this.model.payload.waypoints.toArray();
+        }
+
+        return [];
+    }
+
     @action displayOrderRoute() {
-        const payload = this.model.payload;
-        const waypoints = this.routeWaypoints;
         const leafletMap = this.leafletMap;
-        const routingHost = getRoutingHost(payload, payload?.waypoints?.toArray());
+        const payload = this.model.payload;
+        const waypoints = this.getPayloadCoordinates(payload);
+        const routingHost = getRoutingHost(payload, this.getPayloadWaypointsAsArray());
 
         if (!waypoints || waypoints.length < 2 || !leafletMap) {
             return;
@@ -334,7 +383,7 @@ export default class OperationsOrdersIndexViewController extends BaseController
             router,
         }).addTo(leafletMap);
 
-        this.routeControl?.on('routesfound', (event) => {
+        this.routeControl.on('routesfound', (event) => {
             const { routes } = event;
 
             this.leafletRoute = routes.firstObject;
@@ -343,7 +392,7 @@ export default class OperationsOrdersIndexViewController extends BaseController
         later(
             this,
             () => {
-                leafletMap?.flyToBounds(waypoints, {
+                leafletMap.flyToBounds(waypoints, {
                     paddingBottomRight: [200, 0],
                     maxZoom: 14,
                     animate: true,
@@ -412,9 +461,14 @@ export default class OperationsOrdersIndexViewController extends BaseController
             order,
             confirm: (modal) => {
                 modal.startLoading();
-                return order.save().then(() => {
-                    this.notifications.success(options.successNotification || this.intl.t('fleet-ops.operations.orders.index.view.update-success', { orderId: order.public_id }));
-                });
+                return order
+                    .save()
+                    .then(() => {
+                        this.notifications.success(options.successNotification || this.intl.t('fleet-ops.operations.orders.index.view.update-success', { orderId: order.public_id }));
+                    })
+                    .catch((error) => {
+                        this.notifications.serverError(error);
+                    });
             },
             decline: () => {
                 order.payload.rollbackAttributes();
@@ -475,114 +529,30 @@ export default class OperationsOrdersIndexViewController extends BaseController
      * @void
      */
     @action async editOrderRoute(order, options = {}) {
-        options = options === null ? {} : options;
-
-        await this.modalsManager.done();
-
-        this.modalsManager.show('modals/order-route-form', {
-            title: this.intl.t('fleet-ops.operations.orders.index.view.edit-route-title'),
-            acceptButtonText: 'Save Changes',
-            acceptButtonIcon: 'save',
-            order,
-            userLatitude: this.userLatitude,
-            userLongitude: this.userLongitude,
-            isOptimizingRoute: false,
-            editPlace: async (place) => {
-                await this.modalsManager.done();
-
-                this.contextPanel.focus(place, 'editing', {
-                    args: {
-                        onClose: () => {
-                            this.editOrderRoute(order);
-                        },
-                    },
-                });
-            },
-            toggleMultiDropOrder: () => {
-                if (order.payload.isMultiDrop) {
-                    order.payload.waypoints.clear();
-                    order.payload.setProperties({
-                        pickup_uuid: '#',
-                        dropoff_uuid: '#',
-                    });
-                } else {
-                    const waypoint = this.store.createRecord('waypoint');
-                    order.payload.waypoints.pushObject(waypoint);
-
-                    order.payload.setProperties({
-                        pickup_uuid: null,
-                        dropoff_uuid: null,
-                        pickup: null,
-                        dropoff: null,
-                    });
-                }
-            },
-            removeWaypoint: (waypoint) => {
-                order.payload.waypoints.removeObject(waypoint);
-            },
-            addWaypoint: () => {
-                const waypoint = this.store.createRecord('waypoint');
-                order.payload.waypoints.pushObject(waypoint);
-            },
-            setWaypointPlace: (index, place) => {
-                if (!order.payload.waypoints?.objectAt(index)) {
-                    return;
-                }
-
-                order.payload.waypoints.objectAt(index).setProperties({
-                    name: place.name,
-                    place_uuid: place.id,
-                    place,
-                });
-            },
-            setPayloadPlace: (prop, place) => {
-                order.payload.set(prop, place);
-            },
-            optimizeRoute: async () => {
-                this.modalsManager.setOption('isOptimizingRoute', true);
-
-                const coordinates = order.payload.payloadCoordinates;
-                const routingHost = getRoutingHost(order.payload, order.payload.waypoints);
-
-                const response = await this.fetch.routing(coordinates, { source: 'any', destination: 'any', annotations: true }, { host: routingHost }).catch(() => {
-                    this.notifications.error(this.intl.t('fleet-ops.operations.orders.index.view.route-error'));
-                    this.modalsManager.setOption('isOptimizingRoute', false);
-                });
-
-                if (response && response.code === 'Ok') {
-                    if (response.waypoints && isArray(response.waypoints)) {
-                        const responseWaypoints = response.waypoints.sortBy('waypoint_index');
-                        const sortedWaypoints = [];
-
-                        for (let i = 0; i < responseWaypoints.length; i++) {
-                            const optimizedWaypoint = responseWaypoints.objectAt(i);
-                            const optimizedWaypointLongitude = optimizedWaypoint.location.firstObject;
-                            const optimizedWaypointLatitude = optimizedWaypoint.location.lastObject;
-                            const waypointModel = findClosestWaypoint(optimizedWaypointLatitude, optimizedWaypointLongitude, order.payload.waypoints);
-
-                            sortedWaypoints.pushObject(waypointModel);
-                        }
-
-                        order.payload.waypoints = sortedWaypoints;
-                    }
-                } else {
-                    this.notifications.error(this.intl.t('fleet-ops.operations.orders.index.view.route-error'));
-                }
+        const updateRouteDisplay = () => {
+            later(
+                this,
+                () => {
+                    this.displayOrderRoute();
+                },
+                100
+            );
+        };
 
-                this.modalsManager.setOption('isOptimizingRoute', false);
+        this.contextPanel.focus(order, 'editingRoute', {
+            args: {
+                isResizable: true,
+                latitude: this.userLatitude,
+                longitude: this.userLongitude,
+                ...options,
             },
-            confirm: (modal) => {
-                modal.startLoading();
-
-                return order.payload.save().then(() => {
-                    this.notifications.success(options.successNotification ?? this.intl.t('fleet-ops.operations.orders.index.view.route-update-success', { orderId: order.public_id }));
-                });
+            onRouteChanged: () => {
+                updateRouteDisplay();
             },
-            decline: () => {
-                order.payload.rollbackAttributes();
-                this.modalsManager.done();
+            onAfterSave: () => {
+                this.contextPanel.clear();
+                updateRouteDisplay();
             },
-            ...options,
         });
     }
 
@@ -911,4 +881,39 @@ export default class OperationsOrdersIndexViewController extends BaseController
             },
         });
     }
+
+    @action queueFile(file) {
+        // since we have dropzone and upload button within dropzone validate the file state first
+        // as this method can be called twice from both functions
+        if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) {
+            return;
+        }
+
+        // Queue and upload immediatley
+        this.uploadQueue.pushObject(file);
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: 'uploads/fleet-ops/order-files',
+                subject_uuid: this.model.id,
+                subject_type: 'fleet-ops:order',
+                type: 'order_file',
+            },
+            (uploadedFile) => {
+                this.model.files.pushObject(uploadedFile);
+                this.uploadQueue.removeObject(file);
+            },
+            () => {
+                this.uploadQueue.removeObject(file);
+                // remove file from queue
+                if (file.queue && typeof file.queue.remove === 'function') {
+                    file.queue.remove(file);
+                }
+            }
+        );
+    }
+
+    @action removeFile(file) {
+        return file.destroyRecord();
+    }
 }

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

@@ -949,7 +949,7 @@ export default class OperationsOrdersIndexController extends BaseController {
      * @memberof OperationsOrdersIndexController
      */
     @action fetchActiveOrdersCount() {
-        this.fetch.get('fleet-ops/metrics/all', { discover: ['orders_in_progress'] }).then((response) => {
+        this.fetch.get('fleet-ops/metrics', { discover: ['orders_in_progress'] }).then((response) => {
             this.activeOrdersCount = response.orders_in_progress;
         });
     }

package/addon/engine.js

@@ -5,6 +5,7 @@ import config from './config/environment';
 import services from '@fleetbase/ember-core/exports/services';
 import AdminVisibilityControlsComponent from './components/admin/visibility-controls';
 import NavigatorAppConfigComponent from './components/admin/navigator-app';
+import FleetOpsKeyMetricsWidget from './components/widget/fleet-ops-key-metrics';
 
 const { modulePrefix } = config;
 const externalRoutes = ['console', 'extensions'];
@@ -40,20 +41,25 @@ export default class FleetOpsEngine extends Engine {
             }
         );
 
-        // create primary registry for engine
-        universe.createRegistry('engine:fleet-ops');
+        // widgets for registry
+        const KeyMetricsWidgetDefinition = {
+            did: 'fleetops-metrics',
+            name: 'Fleet-Ops Metrics',
+            description: 'Key metrics from Fleet-Ops.',
+            icon: 'truck',
+            component: FleetOpsKeyMetricsWidget,
+            grid_options: { w: 12, h: 12, minW: 8, minH: 12 },
+            options: {
+                title: 'Fleet-Ops Metrics',
+            },
+        };
 
-        // register the vehicle panel
-        universe.createRegistry('component:vehicle-panel');
+        // register widgets
+        universe.registerDefaultDashboardWidgets([KeyMetricsWidgetDefinition]);
+        universe.registerDashboardWidgets([KeyMetricsWidgetDefinition]);
 
-        // register the driver panel
-        universe.createRegistry('component:driver-panel');
-
-        // register vehicle context menu
-        universe.createRegistry('contextmenu:vehicle');
-
-        // register driver context menu
-        universe.createRegistry('contextmenu:driver');
+        // create all registries necessary
+        universe.createRegistries(['engine:fleet-ops', 'component:vehicle-panel', 'component:driver-panel', 'contextmenu:vehicle', 'contextmenu:driver']);
     };
 }
 

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

@@ -29,7 +29,7 @@ export default class OperationsOrdersIndexViewRoute extends Route {
         return this.store.queryRecord('order', {
             public_id,
             single: true,
-            with: ['payload', 'driverAssigned', 'customer', 'facilitator', 'trackingStatuses', 'trackingNumber'],
+            with: ['payload', 'driverAssigned', 'customer', 'facilitator', 'trackingStatuses', 'trackingNumber', 'purchaseRate', 'comments', 'files'],
         });
     }
 

package/addon/services/context-panel.js

@@ -97,6 +97,12 @@ export default class ContextPanelService extends Service {
                 componentArguments: [{ isResizable: true }, { width: '500px' }],
             },
         },
+        order: {
+            editingRoute: {
+                component: 'edit-order-route-panel',
+                componentArguments: [{ isResizable: true }, { width: '500px' }],
+            },
+        },
     };
 
     /**

package/addon/styles/fleetops-engine.css

@@ -51,12 +51,12 @@ body[data-theme='dark'] .scheduler-left-sidebar {
     --fleet-summary-nav-item-base-padding: 1.5rem;
 }
 
-.next-sidebar-panel-container.next-driver-listing > .next-sidebar-panel > .next-content-panel > .next-sidebar-panel-toggle,
+.next-sidebar .next-sidebar-panel-container.next-driver-listing > .next-sidebar-panel > .next-content-panel > .next-sidebar-panel-toggle,
 .next-sidebar .next-sidebar-panel-container.next-fleet-summary > .next-sidebar-panel > .next-content-panel > .next-sidebar-panel-toggle {
     padding-left: 2rem;
 }
 
-.next-sidebar-panel-container.next-driver-listing > .next-sidebar-panel > .next-content-panel > .next-content-panel-body .next-nav-item,
+.next-sidebar .next-sidebar-panel-container.next-driver-listing > .next-sidebar-panel > .next-content-panel > .next-content-panel-body .next-nav-item,
 .next-sidebar .next-sidebar-panel-container.next-driver-listing > .next-sidebar-panel > .next-content-panel > .next-sidebar-panel-body .next-nav-item.driver-nav-item {
     padding-left: 3.5rem;
 }
@@ -66,3 +66,8 @@ body[data-theme='dark'] .scheduler-left-sidebar {
     border: none;
     box-shadow: none;
 }
+
+body[data-theme='dark'] .next-table-wrapper.order-view-purchase-rate-table-wrapper > table#order-view-purchase-rate-table tbody tr td {
+    background-color: rgb(31, 41, 55);
+    color: rgb(249, 250, 251);
+}