@fleetbase/fleetops-engine 0.6.21 → 0.6.22

package/addon/components/map/drawer/position-listing.js

@@ -8,23 +8,37 @@ import { htmlSafe } from '@ember/template';
 import { startOfWeek, endOfWeek, format } from 'date-fns';
 import getModelName from '@fleetbase/ember-core/utils/get-model-name';
 
+const L = window.leaflet || window.L;
+
 export default class MapDrawerPositionListingComponent extends Component {
     @service leafletMapManager;
     @service store;
     @service fetch;
-    @service movementTracker;
+    @service positionPlayback;
     @service hostRouter;
     @service notifications;
-
     @service intl;
+
+    /** Tracked properties - only what's NOT managed by service */
     @tracked positions = [];
     @tracked resource = null;
     @tracked selectedOrder = null;
     @tracked dateFilter = [format(startOfWeek(new Date(), { weekStartsOn: 1 }), 'yyyy-MM-dd'), format(endOfWeek(new Date(), { weekStartsOn: 1 }), 'yyyy-MM-dd')];
-    @tracked isReplaying = false;
     @tracked replaySpeed = '1';
-    @tracked currentReplayIndex = 0;
-    @tracked channelId = null;
+    @tracked positionsLayer = null;
+
+    /** Computed properties - read state from service */
+    get isReplaying() {
+        return this.positionPlayback.isPlaying;
+    }
+
+    get isPaused() {
+        return this.positionPlayback.isPaused;
+    }
+
+    get currentReplayIndex() {
+        return this.positionPlayback.currentIndex;
+    }
 
     get trackables() {
         const vehicles = this.leafletMapManager._livemap?.vehicles ?? [];
@@ -107,19 +121,27 @@ export default class MapDrawerPositionListingComponent extends Component {
             {
                 label: '#',
                 valuePath: 'index',
-                width: '55px',
+                width: '80px',
+                cellComponent: 'table/cell/anchor',
+                onClick: this.onPositionClicked,
             },
             {
                 label: 'Timestamp',
                 valuePath: 'timestamp',
+                cellComponent: 'table/cell/anchor',
+                onClick: this.onPositionClicked,
             },
             {
                 label: 'Latitude',
                 valuePath: 'latitude',
+                cellComponent: 'table/cell/anchor',
+                onClick: this.onPositionClicked,
             },
             {
                 label: 'Longitude',
                 valuePath: 'longitude',
+                cellComponent: 'table/cell/anchor',
+                onClick: this.onPositionClicked,
             },
             {
                 label: 'Speed (km/h)',
@@ -141,8 +163,20 @@ export default class MapDrawerPositionListingComponent extends Component {
         this.loadPositions.perform();
     }
 
+    willDestroy() {
+        super.willDestroy?.();
+
+        // Clean up replay tracker
+        this.positionPlayback.reset();
+
+        // Remove our layer group from the map
+        this.#clearPositionsLayer(true);
+        this.positionsLayer = null;
+    }
+
     @action onResourceSelected(resource) {
         this.resource = resource;
+        this.focusResource(resource);
         this.loadPositions.perform();
     }
 
@@ -160,6 +194,11 @@ export default class MapDrawerPositionListingComponent extends Component {
 
     @action onSpeedChanged(speed) {
         this.replaySpeed = speed;
+
+        // Update replay speed in real-time if currently playing
+        if (this.isReplaying) {
+            this.positionPlayback.setSpeed(parseFloat(speed));
+        }
     }
 
     @action startReplay() {
@@ -167,12 +206,47 @@ export default class MapDrawerPositionListingComponent extends Component {
             this.notifications.warning('No positions to replay');
             return;
         }
-        this.replayPositions.perform();
+
+        if (this.isReplaying && !this.isPaused) {
+            this.notifications.info('Replay is already running');
+            return;
+        }
+
+        // If paused, resume
+        if (this.isPaused) {
+            this.positionPlayback.play();
+            return;
+        }
+
+        // Start new replay
+        this.#initializeReplay();
+        this.positionPlayback.play();
+    }
+
+    @action pauseReplay() {
+        if (!this.isReplaying) {
+            return;
+        }
+
+        this.positionPlayback.pause();
     }
 
     @action stopReplay() {
-        this.isReplaying = false;
-        this.currentReplayIndex = 0;
+        this.positionPlayback.stop();
+    }
+
+    @action stepForward() {
+        if (this.isReplaying) {
+            this.pauseReplay();
+        }
+        this.positionPlayback.stepForward(1);
+    }
+
+    @action stepBackward() {
+        if (this.isReplaying) {
+            this.pauseReplay();
+        }
+        this.positionPlayback.stepBackward(1);
     }
 
     @action clearFilters() {
@@ -183,7 +257,20 @@ export default class MapDrawerPositionListingComponent extends Component {
 
     @action onPositionClicked(position) {
         if (this.leafletMapManager.map && position.latitude && position.longitude) {
-            this.leafletMapManager.map.setView([position.latitude, position.longitude], this.zoom);
+            this.leafletMapManager.map.setView([position.latitude, position.longitude], 16);
+        }
+    }
+
+    @action focusResource(resource) {
+        const hasValidCoordinates = resource?.hasValidCoordinates || (Number.isFinite(resource?.latitude) && Number.isFinite(resource?.longitude));
+        if (hasValidCoordinates) {
+            const coordinates = [resource.latitude, resource.longitude];
+
+            // Use flyTo with a zoom level of 18 for a smooth animation
+            this.leafletMapManager.map.flyTo(coordinates, 18, {
+                animate: true,
+                duration: 0.8,
+            });
         }
     }
 
@@ -213,77 +300,156 @@ export default class MapDrawerPositionListingComponent extends Component {
                   })
                 : [];
 
-            if (this.positions?.length) {
-                const bounds = positions.map((pos) => pos.latLng).filter(Boolean);
-                const lastFiveBounds = bounds.slice(-5);
-                this.leafletMapManager.map.flyToBounds(lastFiveBounds, {
-                    animate: true,
-                    zoom: 16,
-                });
-            }
+            this.#renderPositionsOnMap({ fitLast: 5 });
+
+            // Reset replay state when positions change
+            this.stopReplay();
         } catch (error) {
             this.notifications.serverError(error);
         }
     }
 
-    @task *replayPositions() {
+    /**
+     * Initialize replay tracker with current positions and settings
+     * This replaces the socket-based backend replay approach
+     *
+     * @private
+     */
+    #initializeReplay() {
         if (!this.resource) {
             this.notifications.warning('No resource provided for replay');
             return;
         }
 
-        try {
-            this.isReplaying = true;
-            this.currentReplayIndex = 0;
+        if (this.positions.length === 0) {
+            this.notifications.warning('No positions to replay');
+            return;
+        }
+
+        // Initialize replay tracker with positions
+        this.positionPlayback.initialize({
+            subject: this.resource,
+            positions: this.positions,
+            speed: parseFloat(this.replaySpeed),
+            map: this.leafletMapManager.map,
+            callback: (data) => {
+                if (data.type === 'complete') {
+                    // Replay completed
+                    this.notifications.success('Replay completed');
+                }
+            },
+        });
+    }
 
-            const positionIds = this.positions.map((p) => p.id);
+    /** Position Rendering */
+    #ensurePositionsLayer() {
+        if (!this.leafletMapManager.map) return null;
 
-            if (positionIds.length === 0) {
-                this.notifications.warning('No positions to replay');
-                this.isReplaying = false;
-                return;
+        if (!this.positionsLayer) {
+            this.positionsLayer = L.layerGroup();
+            this.positionsLayer.addTo(this.leafletMapManager.map);
+        }
+        return this.positionsLayer;
+    }
+
+    #clearPositionsLayer(removeFromMap = false) {
+        if (this.positionsLayer) {
+            this.positionsLayer.clearLayers();
+            if (removeFromMap && this.leafletMapManager.map) {
+                this.positionsLayer.removeFrom(this.leafletMapManager.map);
             }
+        }
+    }
 
-            // Generate unique channel ID for this replay session
-            this.channelId = `position.replay.${this.id}.${Date.now()}`;
-
-            // Start tracking on custom channel
-            yield this.movementTracker.track(this.resource, {
-                channelId: this.channelId,
-                callback: (output) => {
-                    const {
-                        data: { additionalData },
-                    } = output;
-
-                    const leafletLayer = this.resource.leafletLayer;
-                    if (leafletLayer) {
-                        const latlng = leafletLayer._slideToLatLng ?? leafletLayer.getLatLng();
-                        this.leafletMapManager.map.panTo(latlng, { animate: true });
-                    }
-
-                    if (additionalData && Number.isFinite(additionalData.index)) {
-                        this.currentReplayIndex = additionalData.index + 1;
-                        if (this.currentReplayIndex === this.totalPositions) {
-                            this.isReplaying = false;
-                        }
-                    }
-                },
-            });
+    #addPositionMarker(pos, index) {
+        const lat = parseFloat(pos.latitude);
+        const lng = parseFloat(pos.longitude);
+        if (!this.#isValidLatLng(lat, lng)) return;
+
+        const marker = L.circleMarker([lat, lng], {
+            radius: 3,
+            color: '#3b82f6',
+            fillColor: '#3b82f6',
+            fillOpacity: 0.6,
+        });
+
+        // Popup content (mirrors your template)
+        const html = htmlSafe(`<div class="text-xs">
+        <div><strong>Position ${index + 1}</strong></div>
+        <div>Time: ${pos.timestamp ?? ''}</div>
+        <div>Speed: ${pos.speedKmh ?? 'N/A'} km/h</div>
+        <div>Heading: ${pos.heading ?? 'N/A'}°</div>
+        <div>Altitude: ${pos.altitude ?? 'N/A'} m</div>
+        </div>`);
+
+        marker.bindPopup(html);
+
+        // Click handler -> reuse your action
+        marker.on('click', () => this.onPositionClicked(pos));
+
+        marker.addTo(this.positionsLayer);
+    }
 
-            // Trigger backend replay
-            const response = yield this.fetch.post('positions/replay', {
-                position_ids: positionIds,
-                channel_id: this.channelId,
-                speed: parseFloat(this.replaySpeed),
-                subject_uuid: this.resource.id,
-            });
+    #isValidLatLng(lat, lng) {
+        return Number.isFinite(lat) && Number.isFinite(lng) && lat <= 90 && lat >= -90 && lng <= 180 && lng >= -180 && lat !== 0 && lng !== 0;
+    }
+
+    #renderPositionsOnMap({ fitLast = 0, minZoom = 15, maxZoom = 18 } = {}) {
+        if (!this.leafletMapManager.map || !this.positions?.length) {
+            this.#clearPositionsLayer(false);
+            return;
+        }
+
+        this.#ensurePositionsLayer();
+        this.positionsLayer.clearLayers();
 
-            if (response && response.status === 'ok') {
-                this.notifications.success('Replay started successfully');
+        const latlngs = [];
+        this.positions.forEach((pos, i) => {
+            const lat = parseFloat(pos.latitude);
+            const lng = parseFloat(pos.longitude);
+            if (this.#isValidLatLng(lat, lng)) {
+                this.#addPositionMarker(pos, i);
+                latlngs.push([lat, lng]);
             }
-        } catch (error) {
-            this.notifications.serverError(error);
-            this.isReplaying = false;
+        });
+
+        if (!latlngs.length) return;
+
+        // choose subset (e.g., last 5 points) to bias the view local
+        const slice = fitLast > 0 ? latlngs.slice(-fitLast) : latlngs;
+
+        // Clamp zoom to neighborhood-level
+        this.#fitNeighborhood(slice, { zoom: 16, minZoom, maxZoom, padding: [24, 24], animate: true });
+    }
+
+    #fitNeighborhood(latlngs, { zoom = null, minZoom = 15, maxZoom = 18, padding = [16, 16], animate = true } = {}) {
+        if (!this.leafletMapManager.map || !latlngs?.length) return;
+
+        const map = this.leafletMapManager.map;
+
+        if (latlngs.length === 1) {
+            // Single point → center on it at minZoom
+            map.setView(latlngs[0], minZoom, { animate });
+            return;
         }
+
+        const bounds = L.latLngBounds(latlngs);
+        // Compute the zoom that would fit the bounds, then clamp it
+        // Leaflet getBoundsZoom may be (bounds, inside, padding) depending on version
+        let targetZoom = zoom;
+        if (!zoom) {
+            try {
+                // Try newer signature
+                targetZoom = map.getBoundsZoom(bounds, true, padding);
+            } catch {
+                // Fallback without padding param
+                targetZoom = map.getBoundsZoom(bounds, true);
+            }
+            targetZoom = Math.max(minZoom, Math.min(maxZoom, targetZoom));
+        }
+
+        // Center on bounds center with clamped zoom
+        const center = bounds.getCenter();
+        map.setView(center, targetZoom, { animate });
     }
 }

package/addon/components/modals/attach-device.hbs

@@ -0,0 +1,18 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name={{t "common.select-field" field=(t "resource.device")}} @value={{@options.driver.vehicle_uuid}}>
+            <ModelSelect
+                @modelName="device"
+                @selectedModel={{@options.selectedDevice}}
+                @placeholder={{t "common.select-field" field=(t "resource.device")}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{false}}
+                @renderInPlace={{true}}
+                @onChange={{fn (mut @options.selectedDevice)}}
+                as |model|
+            >
+                <Device::Pill @device={{model}} />
+            </ModelSelect>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/attach-device.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ModalsAttachDeviceComponent extends Component {}

package/addon/components/order/details/detail.hbs

@@ -16,25 +16,7 @@
                     <span>{{t "order.fields.driver-assigned"}}</span>
                 </div>
                 <div class="field-value">
-                    <div>
-                        <a href="javascript:;" class="flex flex-row space-x-2" {{on "click" (fn this.focusOrderAssignedDriver @resource.driver_assigned)}}>
-                            <div class="relative shrink-0">
-                                <Image
-                                    src={{avatar-url @resource.driver_assigned.photo_url}}
-                                    @fallbackSrc={{config "defaultValues.driverImage"}}
-                                    width="28"
-                                    height="28"
-                                    class="w-7 h-7 rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md"
-                                    alt={{@resource.driver_assigned.name}}
-                                />
-                                <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 h-2 w-2 {{if @resource.driver_assigned.online 'text-green-500' 'text-yellow-200'}}" />
-                            </div>
-                            <div>
-                                <div class="text-sm">{{n-a @resource.driver_assigned.name}}</div>
-                                <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.driver_assigned.phone "No Phone"}}</div>
-                            </div>
-                        </a>
-                    </div>
+                    <Driver::Pill @driver={{@resource.driver_assigned}} @onClick={{this.focusOrderAssignedDriver}} />
                 </div>
             </div>
             <div class="field-info-container">
@@ -42,41 +24,7 @@
                     <span>{{t "order.fields.vehicle-assigned"}}</span>
                 </div>
                 <div class="field-value">
-                    <a href="javascript:;" class="flex flex-row space-x-2 shrink-0">
-                        <div class="relative shrink-0">
-                            <Image
-                                src={{@resource.vehicle_assigned.photo_url}}
-                                @fallbackSrc={{config "defaultValues.vehicleImage"}}
-                                width="28"
-                                height="28"
-                                class="w-7 h-7 rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md"
-                                alt={{n-a @resource.vehicle_assigned.name @resource.vehicle_assigned.yearMakeModel}}
-                            />
-                            <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 h-2 w-2 {{if @resource.vehicle_assigned.online 'text-green-500' 'text-yellow-200'}}" />
-                        </div>
-                        <div>
-                            <div class="text-sm">{{n-a @resource.vehicle_assigned.name @resource.vehicle_assigned.yearMakeModel}}</div>
-                            <div class="text-xs text-gray-400 dark:text-gray-500">{{or
-                                    @resource.vehicle_assigned.plate_number
-                                    @resource.vehicle_assigned.vin
-                                    @resource.vehicle_assigned.serial_number
-                                    @resource.vehicle_assigned.call_sign
-                                }}</div>
-                        </div>
-                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
-                            <InputInfo>
-                                <div class="text-xs font-semibold">{{@resource.vehicle_assigned.name @resource.vehicle_assigned.yearMakeModel}}</div>
-                                <div class="text-xs">Driver: {{n-a @resource.vehicle_assigned.driver_name}}</div>
-                                <div class="text-xs">
-                                    <span>Status:</span>
-                                    <span class="{{if @resource.vehicle_assigned.online 'text-green-500' 'text-red-400'}}">
-                                        {{if @resource.vehicle_assigned.online "Online" "Offline"}}
-                                    </span>
-                                </div>
-                                <div class="text-xs truncate">Pos: {{point-coordinates @resource.vehicle_assigned.location}}</div>
-                            </InputInfo>
-                        </Attach::Tooltip>
-                    </a>
+                    <Vehicle::Pill @vehicle={{@resource.vehicle_assigned}} />
                 </div>
             </div>
             <div class="field-info-container">

package/addon/components/order/details/detail.js

@@ -36,6 +36,7 @@ export default class OrderDetailsDetailComponent extends Component {
     }
 
     @action focusOrderAssignedDriver(driver) {
+        console.log('[focusOrderAssignedDriver]', ...arguments);
         this.driverActions.panel.view(driver);
         this.leafletMapManager.map?.flyTo(driver.coordinates, 18);
     }

package/addon/components/order/pill.hbs

@@ -0,0 +1,34 @@
+{{#let (or @order @resource) as |resource|}}
+    <Pill
+        @resource={{resource}}
+        @onClick={{@onClick}}
+        @anchorClass={{@anchorClass}}
+        @imageClass={{@imageClass}}
+        @imageWrapperClass={{@imageWrapperClass}}
+        @contentWrapperClass={{@contentWrapperClass}}
+        @titleClass={{@titleClass}}
+        @subtitleClass={{@subtitleClass}}
+        ...attributes
+    >
+        <:image>
+            <div class="pt-1">
+                <div class="rounded-md bg-white p-1">
+                    <img src={{concat "data:image/png;base64," resource.tracking_number.qr_code}} class="w-12 h-12" alt={{resource.public_id}} />
+                </div>
+            </div>
+        </:image>
+        <:default>
+            <div class="text-sm font-semibold">{{n-a resource.tracking}}</div>
+            <div class="flex flex-row space-x-1">
+                <Badge @status={{@resource.status}} />
+                {{#if @resource.dispatched_at}}
+                    <Badge @status="dispatched">{{concat "Dispatched at " @resource.dispatchedAt}}</Badge>
+                {{/if}}
+            </div>
+            <div class="mt-1">
+                <div class="text-xs text-gray-400 dark:text-gray-500">Date Created: {{@resource.createdAt}}</div>
+                <div class="text-xs text-gray-400 dark:text-gray-500">Type: {{smart-humanize @resource.type}}</div>
+            </div>
+        </:default>
+    </Pill>
+{{/let}}

package/addon/components/order/pill.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class OrderPillComponent extends Component {}

package/addon/components/positions-replay.hbs

@@ -84,7 +84,14 @@
                 <label class="block uppercase tracking-wide text-xs font-medium text-gray-700 dark:text-gray-400 mb-0.5">
                     Date Range
                 </label>
-                <DatePicker @value={{this.dateFilter}} @range={{true}} @onSelect={{this.onDateRangeChanged}} @autoClose={{true}} @placeholder="Select date range" class="w-full form-input form-input-sm" />
+                <DatePicker
+                    @value={{this.dateFilter}}
+                    @range={{true}}
+                    @onSelect={{this.onDateRangeChanged}}
+                    @autoClose={{true}}
+                    @placeholder="Select date range"
+                    class="w-full form-input form-input-sm"
+                />
             </div>
 
             <div class="filter-group">
@@ -110,7 +117,6 @@
             </div>
 
             <div class="filter-actions flex items-end space-x-2">
-                <Button @icon="search" @text={{t "common.search"}} @isLoading={{this.loadPositions.isRunning}} @onClick={{perform this.loadPositions}} />
                 <Button @type="danger" @icon="times" @text={{t "common.clear"}} @disabled={{this.loadPositions.isRunning}} @onClick={{this.clearFilters}} />
             </div>
         </div>
@@ -120,18 +126,24 @@
         <div class="replay-controls px-3 py-2">
             <div class="flex items-center justify-between space-x-2">
                 <div class="flex items-center space-x-2">
-                    <Button @type="danger" @text="Stop" @icon="stop" @size="xs" @onClick={{this.stopReplay}} />
-                    <Button
-                        @type="success"
-                        @text="Play"
-                        @icon="play"
-                        @size="xs"
-                        @isLoading={{this.isReplaying}}
-                        @disabled={{or this.replayPositions.isRunning (not this.hasPositions)}}
-                        @onClick={{this.startReplay}}
-                    />
+                    <Button @type="danger" @text="Stop" @icon="stop" @size="xs" @disabled={{not (or this.isReplaying this.isPaused)}} @onClick={{this.stopReplay}} />
 
-                    <div class="speed-control">
+                    {{#if (or this.isReplaying this.isPaused)}}
+                        {{#if this.isReplaying}}
+                            <Button @type="warning" @text="Pause" @icon="pause" @size="xs" @onClick={{this.pauseReplay}} />
+                        {{else}}
+                            <Button @type="success" @text="Resume" @icon="play" @size="xs" @onClick={{this.startReplay}} />
+                        {{/if}}
+                    {{else}}
+                        <Button @type="success" @text="Play" @icon="play" @size="xs" @disabled={{not this.hasPositions}} @onClick={{this.startReplay}} />
+                    {{/if}}
+
+                    <div class="step-controls flex items-center space-x-1 border-l border-gray-300 dark:border-gray-700 pl-2 ml-2">
+                        <Button @type="default" @icon="backward-step" @size="xs" @disabled={{not this.hasPositions}} @onClick={{this.stepBackward}} title="Step backward" />
+                        <Button @type="default" @icon="forward-step" @size="xs" @disabled={{not this.hasPositions}} @onClick={{this.stepForward}} title="Step forward" />
+                    </div>
+
+                    <div class="speed-control border-l border-gray-300 dark:border-gray-700 pl-2 ml-2">
                         <label class="text-xs uppercase tracking-wide font-medium text-gray-700 dark:text-gray-400 mr-1">
                             Speed:
                         </label>
@@ -146,7 +158,7 @@
                     </div>
                 </div>
 
-                {{#if this.isReplaying}}
+                {{#if (or this.isReplaying this.isPaused)}}
                     <div class="replay-progress flex items-center space-x-1">
                         <span class="text-sm text-gray-600 dark:text-gray-400">
                             {{this.currentReplayIndex}}/{{this.totalPositions}}
@@ -214,12 +226,6 @@
                         {{this.accelerationCount}}
                     </div>
                 </div>
-                <div class="metric-card">
-                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Total Positions</div>
-                    <div class="metric-value font-semibold text-gray-600 dark:text-gray-400">
-                        {{this.totalPositions}}
-                    </div>
-                </div>
             </div>
         </div>
     {{/if}}