@fleetbase/fleetops-engine 0.6.56 → 0.6.58

package/addon/components/ai/route-preview-map.hbs

@@ -0,0 +1,79 @@
+<div class="fleetbase-ai-create-order-preview__map" {{did-insert this.setupPreview}}>
+    {{#if this.canShowMap}}
+        {{#if this.shouldUseGoogleMaps}}
+            <div
+                class="fleetbase-ai-create-order-preview__google"
+                {{did-insert this.setupGoogleMap}}
+                {{did-update this.syncPreview this.routeSignature this.mapSettings.googleMapsMapType this.mapSettings.showGoogleMapsTrafficLayer this.mapSettings.showGoogleMapsTransitLayer}}
+            ></div>
+        {{else if this.leafletPluginsReady}}
+            <LeafletMap
+                class="fleetbase-ai-create-order-preview__leaflet"
+                @lat={{this.center.lat}}
+                @lng={{this.center.lng}}
+                @zoom={{12}}
+                @zoomControl={{false}}
+                @onLoad={{this.didLoadLeafletMap}}
+                {{did-update this.syncPreview this.routeSignature}}
+                as |layers|
+            >
+                <layers.tile @url={{this.tileUrl}} />
+                {{#if this.hasRouteLine}}
+                    {{#each this.routeStyles as |style|}}
+                        <layers.polyline
+                            @locations={{this.routeLineCoordinates}}
+                            @color={{style.color}}
+                            @weight={{style.weight}}
+                            @opacity={{style.opacity}}
+                            @lineCap={{style.lineCap}}
+                            @lineJoin={{style.lineJoin}}
+                            @dashArray={{style.dashArray}}
+                        />
+                    {{/each}}
+                {{/if}}
+                {{#each this.markerStops as |stop|}}
+                    <layers.marker
+                        @location={{stop.location}}
+                        @title={{stop.title}}
+                        @icon={{div-icon
+                            html=(this.waypointIconHtml stop.waypointLabel stop.waypointColor)
+                            className="fleetops-waypoint-marker"
+                            iconSize=(array 32 32)
+                            iconAnchor=(array 16 16)
+                            popupAnchor=(array 0 -20)
+                        }}
+                        @riseOnHover={{true}}
+                        @zIndexOffset={{stop.zIndexOffset}}
+                        as |marker|
+                    >
+                        <marker.tooltip @permanent={{false}} @sticky={{true}} @direction="top">
+                            {{stop.title}}{{#if stop.address}} - {{stop.address}}{{/if}}
+                        </marker.tooltip>
+                    </layers.marker>
+                {{/each}}
+            </LeafletMap>
+        {{else}}
+            <div class="fleetbase-ai-create-order-preview__empty-map">
+                <Spinner />
+                <span>Preparing map preview...</span>
+            </div>
+        {{/if}}
+
+        {{#if this.isLoading}}
+            <div class="fleetbase-ai-create-order-preview__map-status">
+                <Spinner />
+                <span>Rendering route...</span>
+            </div>
+        {{else if this.routeErrorMessage}}
+            <div class="fleetbase-ai-create-order-preview__map-status fleetbase-ai-create-order-preview__map-status--error">
+                <FaIcon @icon="triangle-exclamation" />
+                <span>{{this.routeErrorMessage}}</span>
+            </div>
+        {{/if}}
+    {{else}}
+        <div class="fleetbase-ai-create-order-preview__empty-map">
+            <FaIcon @icon="route" />
+            <span>{{this.emptyText}}</span>
+        </div>
+    {{/if}}
+</div>

package/addon/components/ai/route-preview-map.js

@@ -0,0 +1,527 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { isArray } from '@ember/array';
+import { debug } from '@ember/debug';
+import { colorForId, routeColorForStatus, routeStyleForStatus, waypointIconHtml } from '../../utils/route-colors';
+import { buildRoutePointMarkerPresentation, buildRoutePointsFromPayload } from '../../utils/route-visualization';
+import ensureLeafletPluginsReady, { hasLeafletPluginsReady } from '../../utils/leaflet-plugin-loader';
+
+const PREVIEW_MAX_ZOOM_TWO_POINTS = 13;
+const PREVIEW_MAX_ZOOM_MULTI_POINTS = 12;
+const GOOGLE_MAP_STYLES = [
+    {
+        featureType: 'all',
+        elementType: 'labels.icon',
+        stylers: [{ visibility: 'off' }],
+    },
+    {
+        featureType: 'poi',
+        elementType: 'all',
+        stylers: [{ visibility: 'off' }],
+    },
+    {
+        featureType: 'transit',
+        elementType: 'all',
+        stylers: [{ visibility: 'off' }],
+    },
+    {
+        featureType: 'administrative.land_parcel',
+        elementType: 'all',
+        stylers: [{ visibility: 'off' }],
+    },
+    {
+        featureType: 'road',
+        elementType: 'labels.icon',
+        stylers: [{ visibility: 'off' }],
+    },
+    {
+        featureType: 'landscape.man_made',
+        elementType: 'labels',
+        stylers: [{ visibility: 'off' }],
+    },
+];
+
+export default class AiRoutePreviewMapComponent extends Component {
+    @service mapSettings;
+    @service routeEngine;
+
+    @tracked route = null;
+    @tracked error = null;
+    @tracked isLoading = false;
+    @tracked leafletPluginsReady = hasLeafletPluginsReady();
+    @tracked googleMap = null;
+
+    leafletMap = null;
+    googleMarkers = [];
+    googlePolylines = [];
+    googleTrafficLayer = null;
+    googleTransitLayer = null;
+    googleListeners = [];
+    computeToken = 0;
+    googleApiLoadPromise = null;
+
+    willDestroy() {
+        super.willDestroy(...arguments);
+        this.clearGoogleListeners();
+        this.clearGoogleRoute();
+        this.googleTrafficLayer?.setMap(null);
+        this.googleTransitLayer?.setMap(null);
+        this.googleMap = null;
+        this.leafletMap = null;
+    }
+
+    get payload() {
+        return this.args.payload ?? {};
+    }
+
+    get routePoints() {
+        return buildRoutePointsFromPayload(this.payload);
+    }
+
+    get coordinates() {
+        return this.routePoints.map(({ place }) => [Number(place.latitude), Number(place.longitude)]).filter(([lat, lng]) => Number.isFinite(lat) && Number.isFinite(lng));
+    }
+
+    get canShowMap() {
+        return this.coordinates.length >= 2;
+    }
+
+    get routeSignature() {
+        return `${this.provider}:${this.displayRouteEngine}:${this.coordinates.map((coordinate) => coordinate.join(',')).join('|')}`;
+    }
+
+    get provider() {
+        return this.mapSettings.mapProvider ?? 'leaflet';
+    }
+
+    get shouldUseGoogleMaps() {
+        return this.provider === 'google';
+    }
+
+    get displayRouteEngine() {
+        const configuredEngine = this.routeEngine?.getDisplayEngine?.('osrm') ?? 'osrm';
+
+        return this.routeEngine?.get?.(configuredEngine) ? configuredEngine : 'osrm';
+    }
+
+    get routeErrorMessage() {
+        if (!this.error || this.isLoading || this.hasRouteLine) {
+            return null;
+        }
+
+        return 'Unable to calculate route';
+    }
+
+    get center() {
+        const [lat, lng] = this.coordinates[0] ?? [1.3521, 103.8198];
+
+        return { lat, lng };
+    }
+
+    get routeColor() {
+        return colorForId(this.args.orderId ?? 'ai-order-preview');
+    }
+
+    get routeStatus() {
+        return this.args.status ?? 'created';
+    }
+
+    get statusColor() {
+        return routeColorForStatus(this.routeStatus);
+    }
+
+    get routeStyles() {
+        return routeStyleForStatus(this.routeStatus, this.statusColor);
+    }
+
+    get routeCoordinates() {
+        return this.route?.coordinates?.length ? this.route.coordinates : this.coordinates;
+    }
+
+    get routeLineCoordinates() {
+        return this.route?.coordinates?.length ? this.route.coordinates : [];
+    }
+
+    get hasRouteLine() {
+        return this.routeLineCoordinates.length > 1;
+    }
+
+    get markerStops() {
+        return this.routePoints
+            .map((routePoint, index) => {
+                const location = [Number(routePoint.place.latitude), Number(routePoint.place.longitude)];
+                const presentation = buildRoutePointMarkerPresentation(routePoint, this.routeColor);
+
+                return {
+                    ...presentation,
+                    index,
+                    location,
+                    title: presentation.title,
+                    address: this.addressLabel(routePoint.place),
+                };
+            })
+            .filter((stop) => stop.location.every((coordinate) => Number.isFinite(coordinate)));
+    }
+
+    get tileUrl() {
+        const theme = document.body?.dataset?.theme;
+
+        if (theme === 'dark') {
+            return 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
+        }
+
+        return 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
+    }
+
+    get emptyText() {
+        if (this.error) {
+            return 'Unable to preview the route right now.';
+        }
+
+        return 'Select pickup and dropoff with coordinates to preview the route.';
+    }
+
+    addressLabel(place) {
+        return [place?.address, place?.street1, place?.name, place?.city, place?.postal_code, place?.country]
+            .map((value) => (value === null || value === undefined ? null : String(value).trim()))
+            .filter((value) => value && !['undefined', 'null'].includes(value.toLowerCase()))
+            .slice(0, 3)
+            .join(' - ');
+    }
+
+    waypointIconHtml(label, color) {
+        return waypointIconHtml(label, color);
+    }
+
+    @action async setupPreview() {
+        await this.mapSettings.load();
+
+        if (!this.shouldUseGoogleMaps && !this.leafletPluginsReady) {
+            await this.prepareLeafletPlugins();
+        }
+
+        this.syncPreview();
+    }
+
+    @action async prepareLeafletPlugins() {
+        if (this.leafletPluginsReady) {
+            return;
+        }
+
+        await ensureLeafletPluginsReady();
+        this.leafletPluginsReady = true;
+    }
+
+    @action didLoadLeafletMap({ target: map }) {
+        this.leafletMap = map;
+        this.syncPreview();
+    }
+
+    @action async setupGoogleMap(element) {
+        await this.mapSettings.load();
+        await this.loadGoogleMapsApi();
+
+        const googleMaps = window.google;
+        const { Map } = await googleMaps.maps.importLibrary('maps');
+        const mapOptions = {
+            center: { lat: this.center.lat, lng: this.center.lng },
+            zoom: 12,
+            mapTypeId: this.mapSettings.googleMapsMapType ?? googleMaps.maps.MapTypeId.ROADMAP,
+            disableDefaultUI: true,
+            gestureHandling: 'greedy',
+            clickableIcons: false,
+            styles: this.googleMapStyles,
+        };
+
+        if (this.mapSettings.googleMapsMapId) {
+            mapOptions.mapId = this.mapSettings.googleMapsMapId;
+        }
+
+        this.googleMap = new Map(element, mapOptions);
+        this.applyGoogleViewSettings();
+        this.syncPreview();
+    }
+
+    @action syncPreview() {
+        if (this.shouldUseGoogleMaps) {
+            this.applyGoogleViewSettings();
+        }
+
+        this.computeAndDrawRoute();
+    }
+
+    async computeAndDrawRoute() {
+        const token = ++this.computeToken;
+        this.error = null;
+
+        if (!this.canShowMap) {
+            this.route = null;
+            this.clearGoogleRoute();
+            return;
+        }
+
+        this.isLoading = true;
+
+        try {
+            const route = await this.computeRoute();
+
+            if (token !== this.computeToken) {
+                return;
+            }
+
+            this.route = route;
+            this.error = null;
+            this.fitLeafletMap();
+            this.drawGoogleRoute().catch((error) => this.logRenderError(error));
+        } catch (error) {
+            if (token !== this.computeToken) {
+                return;
+            }
+
+            this.error = error;
+            this.route = null;
+            this.logRouteError(error);
+            this.drawGoogleRoute().catch((renderError) => this.logRenderError(renderError));
+        } finally {
+            if (token === this.computeToken) {
+                this.isLoading = false;
+            }
+        }
+    }
+
+    async computeRoute() {
+        const engine = this.displayRouteEngine;
+        const options = {
+            payload: this.payload,
+            fitOptions: this.fitOptions,
+        };
+
+        if (!this.routeEngine?.compute) {
+            throw new Error('No route engine is available for the AI order preview.');
+        }
+
+        try {
+            return await this.routeEngine.compute(engine, this.coordinates, options);
+        } catch (error) {
+            if (engine !== 'osrm') {
+                return this.routeEngine.compute('osrm', this.coordinates, options);
+            }
+
+            throw error;
+        }
+    }
+
+    get fitOptions() {
+        return {
+            padding: [18, 18],
+            maxZoom: this.coordinates.length === 2 ? PREVIEW_MAX_ZOOM_TWO_POINTS : PREVIEW_MAX_ZOOM_MULTI_POINTS,
+        };
+    }
+
+    get googleMapStyles() {
+        if (this.mapSettings.showGoogleMapsTransitLayer) {
+            return GOOGLE_MAP_STYLES.filter((style) => style.featureType !== 'transit');
+        }
+
+        return GOOGLE_MAP_STYLES;
+    }
+
+    fitLeafletMap() {
+        if (!this.leafletMap || !this.routeCoordinates.length) {
+            return;
+        }
+
+        const bounds = this.route?.bounds ?? this.routeCoordinates;
+
+        if (isArray(bounds) && bounds.length > 1) {
+            this.leafletMap.fitBounds(bounds, this.fitOptions);
+        }
+    }
+
+    async drawGoogleRoute() {
+        if (!this.googleMap || !this.shouldUseGoogleMaps) {
+            return;
+        }
+
+        await this.loadGoogleMapsApi();
+        this.clearGoogleRoute();
+
+        const googleMaps = window.google;
+        const path = this.routeLineCoordinates.map(([lat, lng]) => ({ lat, lng }));
+
+        if (path.length > 1) {
+            this.routeStyles.forEach((style) => {
+                const polyline = new googleMaps.maps.Polyline({
+                    path,
+                    map: this.googleMap,
+                    strokeColor: style.color,
+                    strokeWeight: style.weight,
+                    strokeOpacity: style.opacity,
+                });
+
+                this.googlePolylines.push(polyline);
+            });
+        }
+
+        const { AdvancedMarkerElement } = await googleMaps.maps.importLibrary('marker');
+        this.markerStops.forEach((stop) => {
+            const position = { lat: stop.location[0], lng: stop.location[1] };
+            const content = document.createElement('div');
+            content.className = 'fleetops-map-marker';
+            content.innerHTML = waypointIconHtml(stop.waypointLabel, stop.waypointColor);
+
+            let marker;
+            if (this.mapSettings.googleMapsMapId) {
+                marker = new AdvancedMarkerElement({
+                    map: this.googleMap,
+                    position,
+                    title: stop.title,
+                    content,
+                    zIndex: stop.zIndexOffset,
+                });
+            } else {
+                marker = new googleMaps.maps.Marker({
+                    map: this.googleMap,
+                    position,
+                    title: stop.title,
+                    zIndex: stop.zIndexOffset,
+                    icon: this.googleWaypointIcon(stop.waypointLabel, stop.waypointColor),
+                });
+            }
+
+            this.googleMarkers.push(marker);
+        });
+
+        this.fitGoogleMap();
+    }
+
+    fitGoogleMap() {
+        const googleMaps = window.google;
+        const map = this.googleMap;
+
+        if (!map || !googleMaps?.maps || !this.routeCoordinates.length) {
+            return;
+        }
+
+        const maxZoom = this.coordinates.length === 2 ? PREVIEW_MAX_ZOOM_TWO_POINTS : PREVIEW_MAX_ZOOM_MULTI_POINTS;
+        const bounds = new googleMaps.maps.LatLngBounds();
+        this.routeCoordinates.forEach(([lat, lng]) => bounds.extend({ lat, lng }));
+        map.fitBounds(bounds, 18);
+
+        this.clearGoogleListeners();
+        const idleListener = googleMaps.maps.event.addListenerOnce(map, 'idle', () => {
+            const currentZoom = map.getZoom?.();
+
+            if (Number.isFinite(currentZoom) && currentZoom > maxZoom) {
+                map.setZoom?.(maxZoom);
+            }
+        });
+
+        this.googleListeners.push(idleListener);
+    }
+
+    clearGoogleRoute() {
+        this.googleMarkers.forEach((marker) => {
+            if ('map' in marker) {
+                marker.map = null;
+            } else {
+                marker.setMap?.(null);
+            }
+        });
+        this.googlePolylines.forEach((polyline) => polyline.setMap(null));
+        this.googleMarkers = [];
+        this.googlePolylines = [];
+    }
+
+    clearGoogleListeners() {
+        const googleMaps = window.google;
+
+        this.googleListeners.forEach((listener) => {
+            googleMaps?.maps?.event?.removeListener?.(listener);
+        });
+        this.googleListeners = [];
+    }
+
+    applyGoogleViewSettings() {
+        if (!this.googleMap || !window.google?.maps) {
+            return;
+        }
+
+        const googleMaps = window.google;
+        this.googleTrafficLayer?.setMap(null);
+        this.googleTransitLayer?.setMap(null);
+        this.googleTrafficLayer = null;
+        this.googleTransitLayer = null;
+        this.googleMap.setOptions({
+            mapTypeId: this.mapSettings.googleMapsMapType ?? googleMaps.maps.MapTypeId.ROADMAP,
+            clickableIcons: false,
+            styles: this.googleMapStyles,
+        });
+
+        if (this.mapSettings.showGoogleMapsTrafficLayer) {
+            this.googleTrafficLayer = new googleMaps.maps.TrafficLayer();
+            this.googleTrafficLayer.setMap(this.googleMap);
+        }
+
+        if (this.mapSettings.showGoogleMapsTransitLayer) {
+            this.googleTransitLayer = new googleMaps.maps.TransitLayer();
+            this.googleTransitLayer.setMap(this.googleMap);
+        }
+    }
+
+    logRouteError(error) {
+        debug(`[Fleet-Ops AI Route Preview] Unable to calculate route with ${this.displayRouteEngine}. coordinates=${this.coordinates.length}. error=${error?.message ?? error}`);
+    }
+
+    logRenderError(error) {
+        debug(`[Fleet-Ops AI Route Preview] Route calculated but map rendering failed. error=${error?.message ?? error}`);
+    }
+
+    googleWaypointIcon(label, color) {
+        const svg = `
+            <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34">
+                <circle cx="17" cy="17" r="15" fill="${color}" stroke="white" stroke-width="2.5" />
+                <text x="17" y="21" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="13" font-weight="700" fill="white">${label}</text>
+            </svg>
+        `;
+
+        return {
+            url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`,
+            scaledSize: new window.google.maps.Size(34, 34),
+            anchor: new window.google.maps.Point(17, 17),
+        };
+    }
+
+    async loadGoogleMapsApi() {
+        if (window.google?.maps?.importLibrary) {
+            return true;
+        }
+
+        if (this.googleApiLoadPromise) {
+            return this.googleApiLoadPromise;
+        }
+
+        const apiKey = this.mapSettings.googleMapsApiKey;
+        this.googleApiLoadPromise = new Promise((resolve, reject) => {
+            const callbackName = `__fleetops_ai_preview_gmaps_${Date.now().toString(36)}`;
+            window[callbackName] = () => {
+                delete window[callbackName];
+                resolve(true);
+            };
+
+            const script = document.createElement('script');
+            script.async = true;
+            script.defer = true;
+            script.onerror = () => {
+                delete window[callbackName];
+                reject(new Error('Failed to load Google Maps API for AI route preview.'));
+            };
+            script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=geometry,marker,routes&callback=${callbackName}&loading=async`;
+            document.head.appendChild(script);
+        });
+
+        return this.googleApiLoadPromise;
+    }
+}

package/addon/components/fleet/details.hbs

@@ -3,30 +3,43 @@
         <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
             <div class="field-info-container">
                 <div class="field-name">{{t "common.name"}}</div>
-                <div class="field-value">{{n-a @resource.name}}</div>
+                <div class="field-value">{{n-a this.resource.name}}</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "resource.service-area"}}</div>
-                <div class="field-value">{{n-a @resource.service_area.name}}</div>
+                <div class="field-value">{{n-a this.resource.service_area.name}}</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "resource.zone"}}</div>
-                <div class="field-value">{{n-a @resource.zone.name}}</div>
+                <div class="field-value">{{n-a this.resource.zone.name}}</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "fleet.fields.task"}}</div>
-                <div class="field-value">{{n-a @resource.task}}</div>
+                <div class="field-value">{{n-a this.resource.task}}</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "fleet.fields.active-manpower"}}</div>
-                <div class="field-value">{{@resource.drivers_online_count}} of {{@resource.drivers_count}} Online</div>
+                <div class="field-value">{{this.driversOnlineCount}} of {{this.driversCount}} Online</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "common.date-created"}}</div>
-                <div class="field-value">{{@resource.createdAtShort}}</div>
+                <div class="field-value">{{this.resource.createdAtShort}}</div>
             </div>
         </div>
     </ContentPanel>
 
-    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
-</div>
+    <ContentPanel @title="Hierarchy" @open={{true}} @wrapperClass="bordered-top" @panelBodyWrapperClass="p-0i">
+        <Fleet::HierarchyTree
+            @fleet={{this.resource}}
+            @onViewFleet={{this.viewFleet}}
+            @onViewDriver={{this.viewDriver}}
+            @onViewVehicle={{this.viewVehicle}}
+            @onAssignDriver={{this.assignDriver}}
+            @onAssignVehicle={{this.assignVehicle}}
+        />
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{this.resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+
+    <Spacer @height="200px" />
+</div>