@fleetbase/fleetops-engine 0.6.45 → 0.6.47

package/addon/components/order/route-editor.js

@@ -2,75 +2,127 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import { isArray } from '@ember/array';
 import { task } from 'ember-concurrency';
-import { Point } from '@fleetbase/fleetops-data/utils/geojson';
+import { buildRoutePointsFromPayload, describeRoutePoint } from '../../utils/route-visualization';
+import {
+    applyOptimizedIntermediateWaypoints,
+    buildRouteOptimizationInput,
+    createWaypointRecord,
+    getPayloadIntermediateWaypoints,
+    getPayloadRouteCoordinates,
+} from '../../utils/order-route-editing';
 
 export default class OrderRouteEditorComponent extends Component {
     @service store;
     @service intl;
     @service notifications;
     @service placeActions;
+    @service routeEngine;
     @service routeOptimization;
-    @service osrm;
     @tracked route;
 
-    get coordinates() {
-        const payload = this.args.resource.payload;
-        const waypoints = payload ? [payload.pickup, ...this.args.resource.payload.waypoints.map((waypoint) => waypoint.place), payload.dropoff] : [];
+    get payload() {
+        return this.args.resource.payload;
+    }
 
-        return waypoints.filter((wp) => wp && wp.hasValidCoordinates).map((wp) => [wp.latitude, wp.longitude]);
+    get routePoints() {
+        return buildRoutePointsFromPayload(this.payload);
     }
 
-    @action toggleMultiDropOrder(isMultiDrop) {
-        const { pickup, dropoff } = this.args.resource.payload;
+    get routeStops() {
+        return this.routePoints.map((routePoint) => ({
+            routePoint,
+            place: routePoint.place,
+            badgeStyle: this.badgeStyleForRoutePoint(routePoint),
+            ...describeRoutePoint(routePoint, '#8B5CF6'),
+        }));
+    }
 
-        if (isMultiDrop) {
-            // if pickup move it to multipdrop
-            if (pickup) {
-                this.#addWaypointFromExistingPlace(pickup);
-            }
+    get routeSummary() {
+        const segments = [];
 
-            // if pickup move it to multipdrop
-            if (dropoff) {
-                this.#addWaypointFromExistingPlace(dropoff);
-            }
+        if (this.payload?.pickup) {
+            segments.push('Pickup');
+        }
 
-            this.args.resource.payload.setProperties({
-                pickup: null,
-                dropoff: null,
-                return: null,
-                pickup_uuid: null,
-                dropoff_uuid: null,
-                return_uuid: null,
-            });
-        } else {
-            // get pickup from payload waypoints if available
-            const waypoints =
-                typeof this.args.resource.payload.waypoints.toArray === 'function' ? this.args.resource.payload.waypoints.toArray() : Array.from(this.args.resource.payload.waypoints);
-
-            if (waypoints[0]) {
-                const pickup = this.#createPlaceFromWaypoint(waypoints[0]);
-                this.args.resource.payload.set('pickup', pickup);
-            }
-
-            if (waypoints[1]) {
-                const dropoff = this.#createPlaceFromWaypoint(waypoints[1]);
-                this.args.resource.payload.set('dropoff', dropoff);
-            }
-
-            this.args.resource.payload.setProperties({
-                waypoints: [],
-            });
+        if (this.intermediateWaypoints.length) {
+            segments.push(`${this.intermediateWaypoints.length} ${this.intermediateWaypoints.length === 1 ? 'Stop' : 'Stops'}`);
         }
 
-        if (typeof this.args.onRouteChanged === 'function') {
-            this.args.onRouteChanged();
+        if (this.payload?.dropoff) {
+            segments.push('Dropoff');
+        }
+
+        if (this.payload?.return) {
+            segments.push('Return');
         }
+
+        return segments.join('  •  ');
+    }
+
+    get pickupStop() {
+        return this.routeStops.find((stop) => stop.routePoint?.role === 'pickup') ?? this.fallbackStop('pickup');
+    }
+
+    get dropoffStop() {
+        return this.routeStops.find((stop) => stop.routePoint?.role === 'dropoff') ?? this.fallbackStop('dropoff');
+    }
+
+    get returnStop() {
+        return {
+            label: 'R',
+            title: 'Return',
+            badgeStyle: this.badgeStyleForColor('#6B7280'),
+        };
+    }
+
+    get stopsSectionBadgeStyle() {
+        return this.badgeStyleForColor('#8B5CF6');
+    }
+
+    get intermediateRouteStops() {
+        return this.routeStops.filter((stop) => stop.routePoint?.role === 'waypoint');
+    }
+
+    get coordinates() {
+        return getPayloadRouteCoordinates(this.payload);
+    }
+
+    get intermediateWaypoints() {
+        return getPayloadIntermediateWaypoints(this.payload);
+    }
+
+    get canOptimizeRoute() {
+        return this.intermediateWaypoints.length >= 2;
+    }
+
+    badgeStyleForRoutePoint(routePoint) {
+        const { markerColor } = describeRoutePoint(routePoint, '#8B5CF6');
+        return this.badgeStyleForColor(markerColor);
+    }
+
+    badgeStyleForColor(color) {
+        const normalizedColor = color?.toLowerCase?.();
+        const isYellow = normalizedColor === '#facc15' || normalizedColor === '#ca8a04';
+        const textColor = isYellow ? '#111827' : '#ffffff';
+
+        return `background-color: ${color}; color: ${textColor};`;
+    }
+
+    fallbackStop(role) {
+        const routePoint = {
+            role,
+            stopNumber: role === 'pickup' ? null : role === 'dropoff' ? null : 1,
+        };
+
+        return {
+            badgeStyle: this.badgeStyleForRoutePoint(routePoint),
+            ...describeRoutePoint(routePoint, '#8B5CF6'),
+        };
     }
 
     @action removeWaypoint(waypoint) {
-        this.args.resource.payload.waypoints.removeObject(waypoint);
+        this.payload.waypoints.removeObject(waypoint);
 
         if (typeof this.args.onWaypointRemoved === 'function') {
             this.args.onWaypointRemoved(waypoint);
@@ -82,23 +134,29 @@ export default class OrderRouteEditorComponent extends Component {
     }
 
     @action addWaypoint() {
-        const location = new Point(0, 0);
-        const place = this.store.createRecord('place', { location });
-        const waypoint = this.store.createRecord('waypoint', { place, location });
-
-        this.args.resource.payload.waypoints.pushObject(waypoint);
+        const waypoint = createWaypointRecord(this.store);
+        this.payload.waypoints.pushObject(waypoint);
 
         if (typeof this.args.onWaypointAdded === 'function') {
             this.args.onWaypointAdded(waypoint);
         }
+
+        if (typeof this.args.onRouteChanged === 'function') {
+            this.args.onRouteChanged();
+        }
     }
 
     @action setWaypointPlace(index, place) {
-        if (isArray(this.args.resource.payload.waypoints) && !this.args.resource.payload.waypoints.objectAt(index)) return;
+        const waypoints = this.intermediateWaypoints;
+        const waypoint = waypoints[index];
 
-        const json = place.serialize();
-        this.args.resource.payload.waypoints.objectAt(index).setProperties({
-            uuid: place.id,
+        if (!waypoint) {
+            return;
+        }
+
+        const json = typeof place?.serialize === 'function' ? place.serialize() : {};
+        waypoint.setProperties({
+            uuid: waypoint.uuid ?? place.id,
             place_uuid: place.id,
             location: place.location,
             place,
@@ -115,7 +173,7 @@ export default class OrderRouteEditorComponent extends Component {
     }
 
     @action setPayloadPlace(prop, place) {
-        this.args.resource.payload.set(prop, place);
+        this.payload.set(prop, place);
 
         if (typeof this.args.onPlaceSelected === 'function') {
             this.args.onPlaceSelected(place);
@@ -126,6 +184,14 @@ export default class OrderRouteEditorComponent extends Component {
         }
     }
 
+    @action clearPayloadPlace(prop) {
+        this.payload.set(prop, null);
+
+        if (typeof this.args.onRouteChanged === 'function') {
+            this.args.onRouteChanged();
+        }
+    }
+
     @action sortWaypoints({ sourceList, sourceIndex, targetList, targetIndex }) {
         if (sourceList === targetList && sourceIndex === targetIndex) return;
 
@@ -140,18 +206,12 @@ export default class OrderRouteEditorComponent extends Component {
     }
 
     @task *optimizeRouteWithService(service) {
-        const order = this.args.resource;
-        const payload = order.payload;
-        const waypoints = this.args.resource.payload.waypoints;
-        const coordinates = this.coordinates.map((coord) => coord.reverse());
+        const optimizationInput = buildRouteOptimizationInput(this.args.resource);
 
         try {
             const result = yield this.routeOptimization.optimize(service, {
                 context: 'edit_order_route',
-                order,
-                payload,
-                waypoints,
-                coordinates,
+                ...optimizationInput,
             });
             this.handleRouteOptimization(result);
         } catch (err) {
@@ -160,39 +220,41 @@ export default class OrderRouteEditorComponent extends Component {
     }
 
     @task *optimizeRoute() {
-        const order = this.args.resource;
-        const payload = order.payload;
-        const waypoints = this.args.resource.payload.waypoints;
-        const coordinates = this.coordinates.map((coord) => coord.reverse());
+        const optimizationInput = buildRouteOptimizationInput(this.args.resource);
+        const service = this.routeEngine.getOptimizationEngine('osrm');
 
         try {
-            const result = yield this.osrm.optimize({
+            const result = yield this.routeOptimization.optimize(service, {
                 context: 'edit_order_route',
-                order,
-                payload,
-                waypoints,
-                coordinates,
+                ...optimizationInput,
             });
 
             this.handleRouteOptimization(result);
-        } catch (err) {
+        } catch (_err) {
             this.notifications.error(this.intl.t('fleet-ops.operations.orders.index.new.route-error'));
         }
     }
 
     @action handleRouteOptimization({ sortedWaypoints, route, trip, result, engine = 'osrm' }) {
-        // Update controller state
-        this.args.resource.payload.waypoints = sortedWaypoints;
+        applyOptimizedIntermediateWaypoints(this.payload, sortedWaypoints);
+
         if (route) {
-            this.setOptimizedRoute(route, trip, result.waypoints, engine);
+            this.setOptimizedRoute(route, trip, result?.waypoints, engine);
         }
-        // this.previewRoute();
+
         this.args.resource.set('optimized', true);
+
+        if (typeof this.args.onRouteChanged === 'function') {
+            this.args.onRouteChanged();
+        }
     }
 
     @action setOptimizedRoute(route, trip, waypoints, engine = 'osrm') {
-        let summary = { totalDistance: trip.distance, totalTime: trip.duration };
-        let payload = {
+        const summary = {
+            totalDistance: trip?.distance ?? trip?.totalDistance ?? 0,
+            totalTime: trip?.duration ?? trip?.totalTime ?? 0,
+        };
+        const payload = {
             optimized: true,
             coordinates: route,
             waypoints,
@@ -209,25 +271,4 @@ export default class OrderRouteEditorComponent extends Component {
         this.args.resource.route = routeModel;
         this.route = payload;
     }
-
-    #createPlaceFromWaypoint(waypoint) {
-        const json = waypoint.serialize();
-        return this.store.createRecord('place', json);
-    }
-
-    #addWaypointFromExistingPlace(place) {
-        const json = place.serialize();
-        const waypoint = this.store.createRecord('waypoint', {
-            uuid: place.id,
-            place_uuid: place.id,
-            location: place.location,
-            place,
-            ...json,
-        });
-        this.args.resource.payload.waypoints.pushObject(waypoint);
-
-        if (typeof this.args.onWaypointAdded === 'function') {
-            this.args.onWaypointAdded(waypoint);
-        }
-    }
 }

package/addon/components/place/address.hbs

@@ -0,0 +1 @@
+{{this.addressHtml}}

package/addon/components/place/address.js

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import placeAddressHtml from '../../utils/place-address-html';
+
+export default class PlaceAddressComponent extends Component {
+    get place() {
+        return this.args.resource ?? this.args.place;
+    }
+
+    get addressHtml() {
+        return placeAddressHtml(this.place);
+    }
+}

package/addon/components/route-list.hbs

@@ -1,70 +1,58 @@
 <div class="order-route-list" ...attributes>
-    {{#if @order.isMultipleDropoffOrder}}
-        {{#if @order.payload.firstWaypoint}}
-            <div class="order-route-stop {{@routeStopClass}}">
-                <div class="order-route-stop-index {{@routeStopIndexClass}}">
-                    <div class="index-count">1</div>
-                </div>
-                <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
-                    <DisplayPlace @place={{@order.payload.firstWaypoint}} @eta={{get @eta @order.payload.firstWaypoint.id}} @waypointActions={{@waypointActions}} />
-                </div>
+    {{#if this.firstStop}}
+        <div class="order-route-stop {{@routeStopClass}}">
+            <div class="order-route-stop-index {{@routeStopIndexClass}}">
+                <div class="index-count fleetops-route-stop-badge" style={{this.firstStop.badgeStyle}}>{{this.firstStop.label}}</div>
+            </div>
+            <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
+                <DisplayPlace @place={{this.firstStop.place}} @eta={{get @eta this.firstStop.place.id}} @waypointActions={{@waypointActions}} />
             </div>
-        {{/if}}
+        </div>
+    {{/if}}
 
-        {{#if (gt @order.payload.waypoints.length 2)}}
-            <Button class="btn-reset w-full" @wrapperClass="w-full" @onClick={{this.toggleWaypointsCollapse}}>
-                <div class="px-3 py-2 w-full bg-yellow-200 text-yellow-900 rounded shadow-sm flex flex-col justify-center items-start mb-3">
-                    <div class="flex flex-row items-center">
-                        <FaIcon @icon="eye" class="mr-2 text-yellow-900" />
-                        <span class="font-bold">{{if this.isWaypointsCollapsed (t "route-list.expand") (t "route-list.collapse")}}</span>
+    {{#if this.shouldCollapseWaypoints}}
+        <Button class="btn-reset w-full" @wrapperClass="w-full" @onClick={{this.toggleWaypointsCollapse}}>
+            <div class="px-3 py-2 w-full bg-yellow-200 text-yellow-900 rounded shadow-sm flex flex-col justify-center items-start mb-3">
+                <div class="flex flex-row items-center">
+                    <FaIcon @icon="eye" class="mr-2 text-yellow-900" />
+                    <span class="font-bold">{{if this.isWaypointsCollapsed (t "route-list.expand") (t "route-list.collapse")}}</span>
+                </div>
+                <div>{{this.middleStops.length}} {{t "route-list.more-waypoints"}}</div>
+            </div>
+        </Button>
+        {{#unless this.isWaypointsCollapsed}}
+            {{#each this.middleStops as |stop|}}
+                <div class="order-route-stop {{@routeStopClass}}">
+                    <div class="order-route-stop-index {{@routeStopIndexClass}}">
+                        <div class="index-count fleetops-route-stop-badge" style={{stop.badgeStyle}}>{{stop.label}}</div>
                     </div>
-                    <div>{{@order.payload.middleWaypoints.length}} {{t "route-list.more-waypoints"}}</div>
-                </div>
-            </Button>
-            {{#unless this.isWaypointsCollapsed}}
-                {{#each @order.payload.middleWaypoints as |waypoint index|}}
-                    <div class="order-route-stop {{@routeStopClass}}">
-                        <div class="order-route-stop-index {{@routeStopIndexClass}}">
-                            <div class="index-count">{{add index 2}}</div>
-                        </div>
-                        <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
-                            <DisplayPlace @place={{waypoint}} @eta={{get @eta waypoint.id}} @waypointActions={{@waypointActions}} />
-                        </div>
+                    <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
+                        <DisplayPlace @place={{stop.place}} @eta={{get @eta stop.place.id}} @waypointActions={{@waypointActions}} />
                     </div>
-                {{/each}}
-            {{/unless}}
-        {{/if}}
-
-        {{#if @order.payload.lastWaypoint}}
-            <div class="order-route-stop {{@routeStopClass}}">
-                <div class="order-route-stop-index {{@routeStopIndexClass}}">
-                    <div class="index-count">{{add @order.payload.middleWaypoints.length 2}}</div>
                 </div>
-                <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
-                    <DisplayPlace @place={{@order.payload.lastWaypoint}} @eta={{get @eta @order.payload.lastWaypoint.id}} @waypointActions={{@waypointActions}} />
-                </div>
-            </div>
-        {{/if}}
-    {{else}}
-        {{#if @order.payload.pickup}}
+            {{/each}}
+        {{/unless}}
+    {{else if this.hasExtraStops}}
+        {{#each this.middleStops as |stop|}}
             <div class="order-route-stop {{@routeStopClass}}">
                 <div class="order-route-stop-index {{@routeStopIndexClass}}">
-                    <div class="index-count">1</div>
+                    <div class="index-count fleetops-route-stop-badge" style={{stop.badgeStyle}}>{{stop.label}}</div>
                 </div>
                 <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
-                    <DisplayPlace @place={{@order.payload.pickup}} @eta={{get @eta @order.payload.pickup.id}} />
+                    <DisplayPlace @place={{stop.place}} @eta={{get @eta stop.place.id}} @waypointActions={{@waypointActions}} />
                 </div>
             </div>
-        {{/if}}
-        {{#if @order.payload.dropoff}}
-            <div class="order-route-stop {{@routeStopClass}}">
-                <div class="order-route-stop-index {{@routeStopIndexClass}}">
-                    <div class="index-count">2</div>
-                </div>
-                <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
-                    <DisplayPlace @place={{@order.payload.dropoff}} @eta={{get @eta @order.payload.dropoff.id}} />
-                </div>
+        {{/each}}
+    {{/if}}
+
+    {{#if this.lastStop}}
+        <div class="order-route-stop {{@routeStopClass}}">
+            <div class="order-route-stop-index {{@routeStopIndexClass}}">
+                <div class="index-count fleetops-route-stop-badge" style={{this.lastStop.badgeStyle}}>{{this.lastStop.label}}</div>
+            </div>
+            <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
+                <DisplayPlace @place={{this.lastStop.place}} @eta={{get @eta this.lastStop.place.id}} @waypointActions={{@waypointActions}} />
             </div>
-        {{/if}}
+        </div>
     {{/if}}
 </div>

package/addon/components/route-list.js

@@ -1,10 +1,57 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { buildRoutePointsFromPayload, describeRoutePoint } from '../utils/route-visualization';
+import { colorForId } from '../utils/route-colors';
 
 export default class RouteListComponent extends Component {
     @tracked isWaypointsCollapsed = true;
 
+    get routeColor() {
+        const order = this.args.order;
+
+        return colorForId(order?.public_id ?? order?.id ?? 'order-route');
+    }
+
+    get routeStops() {
+        const routePoints = buildRoutePointsFromPayload(this.args.order?.payload);
+
+        return routePoints.map((routePoint) => ({
+            routePoint,
+            place: routePoint.place,
+            badgeStyle: this.badgeStyleForStop(routePoint),
+            ...describeRoutePoint(routePoint, this.routeColor),
+        }));
+    }
+
+    get firstStop() {
+        return this.routeStops[0] ?? null;
+    }
+
+    get middleStops() {
+        return this.routeStops.slice(1, -1);
+    }
+
+    get lastStop() {
+        return this.routeStops.length > 1 ? this.routeStops.at(-1) : null;
+    }
+
+    get hasExtraStops() {
+        return this.routeStops.length > 2;
+    }
+
+    get shouldCollapseWaypoints() {
+        return this.args.isCollapsible !== false && this.hasExtraStops;
+    }
+
+    badgeStyleForStop(routePoint) {
+        const { markerColor } = describeRoutePoint(routePoint, this.routeColor);
+        const isYellow = markerColor?.toLowerCase?.() === '#facc15' || markerColor?.toLowerCase?.() === '#ca8a04';
+        const textColor = isYellow ? '#111827' : '#ffffff';
+
+        return `background-color: ${markerColor}; color: ${textColor};`;
+    }
+
     @action toggleWaypointsCollapse() {
         this.isWaypointsCollapsed = !this.isWaypointsCollapsed;
     }

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

@@ -6,7 +6,7 @@ import contextComponentCallback from '@fleetbase/ember-core/utils/context-compon
 import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
 
 export default class RouteOptimizationWizardPanelComponent extends Component {
-    @service universe;
+    @service sidebar;
     @tracked context;
 
     /**
@@ -27,9 +27,8 @@ export default class RouteOptimizationWizardPanelComponent extends Component {
     @action setOverlayContext(overlayContext) {
         this.context = overlayContext;
         // hide sidebar
-        if (this.universe.sidebarContext) {
-            this.universe.sidebarContext.hide();
-        }
+        this.sidebar.hide();
+
         contextComponentCallback(this, 'onLoad', ...arguments);
     }
 

package/addon/components/vehicle/card.hbs

@@ -1,7 +1,7 @@
 <Layout::Resource::Card ...attributes as |Card|>
-    <Card.header class="{{@headerClass}} truncate">
-        <div class="font-semibold">{{or @resource.name @resource.yearMakeModel}}</div>
-        <div class="text-gray-300 dark:text-gray-500 text-sm">{{or @resource.plate_number @resource.vin @resource.serial_number @resource.call_sign @resource.public_id}}</div>
+    <Card.header class="{{@headerClass}}">
+        <div class="font-semibold w-full truncate">{{or @resource.name @resource.yearMakeModel}}</div>
+        <div class="text-gray-300 dark:text-gray-500 text-sm w-full truncate">{{or @resource.plate_number @resource.vin @resource.serial_number @resource.call_sign @resource.public_id}}</div>
         {{#if (has-block "header")}}
             {{yield to="header"}}
         {{/if}}
@@ -21,7 +21,7 @@
         {{#if (has-block "footer")}}
             {{yield to="footer"}}
         {{/if}}
-        <div class="mt-1">
+        <div class="mt-1.5">
             <div class="text-gray-300 dark:text-gray-500 text-xs">Last Modified: {{@resource.updatedAt}}</div>
         </div>
     </Card.footer>

package/addon/controllers/maintenance/schedules/index.js

@@ -1,4 +1,5 @@
 import Controller from '@ember/controller';
+import { isArray } from '@ember/array';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
@@ -75,7 +76,7 @@ export default class MaintenanceSchedulesIndexController extends Controller {
                 })
                 .then((response) => {
                     // The API returns { events: [...] } — unwrap the array.
-                    const raw = Array.isArray(response) ? response : (response?.events ?? []);
+                    const raw = isArray(response) ? response : (response?.events ?? []);
                     const events = raw.map((event) => ({
                         id: event.id,
                         title: event.title,