@fleetbase/fleetops-engine 0.6.20 → 0.6.22

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

@@ -0,0 +1,100 @@
+<div class="positions-replay-component flex flex-row items-center justify-between w-full px-5 py-2 border-b border-gray-200 dark:border-gray-700">
+    <div class="flex flex-row items-center space-x-2">
+        <div>
+            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                <PowerSelect
+                    @options={{this.trackables}}
+                    @selected={{this.resource}}
+                    @onChange={{this.onResourceSelected}}
+                    @placeholder={{t "common.select-field" field="trackable"}}
+                    @triggerClass="form-select form-input form-input-sm w-48"
+                    as |option|
+                >
+                    <div class="flex flex-row items-start space-x-2">
+                        <div class="inline-block">
+                            {{#if (eq (get-model-name option) "driver")}}
+                                <Image src={{option.photo_url}} @fallbackSrc={{config "defaultValues.driverAvatar"}} class="w-4 h-4" />
+                            {{else}}
+                                <Image src={{option.avatar_url}} @fallbackSrc={{config "defaultValues.vehicleAvatar"}} class="w-4 h-4" />
+                            {{/if}}
+                        </div>
+                        <div class="inline-block text-sm truncate">
+                            <div class="font-semibold text-sm normalize-in-trigger">{{or option.name option.displayName option.public_id}}</div>
+                            <div class="hide-from-trigger text-xs">{{or option.email option.serial_number option.plate_number option.internal_id}}</div>
+                        </div>
+                    </div>
+                </PowerSelect>
+            </div>
+        </div>
+
+        <div class="w-48 {{if this.isReplaying 'hidden' ''}}">
+            <DatePicker
+                @value={{this.dateFilter}}
+                @range={{true}}
+                @onSelect={{this.onDateRangeChanged}}
+                @autoClose={{true}}
+                @placeholder="Select date range"
+                class="w-full form-input form-input-sm"
+            />
+        </div>
+
+        {{#if this.loadPositions.isRunning}}
+            <div>
+                <Spinner />
+            </div>
+        {{/if}}
+    </div>
+
+    <div class="replay-controls">
+        <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" @disabled={{not (or this.isReplaying this.isPaused)}} @onClick={{this.stopReplay}} />
+
+                {{#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>
+                    <Select
+                        @value={{this.replaySpeed}}
+                        @options={{this.speedOptions}}
+                        @optionValue="value"
+                        @optionLabel="label"
+                        @onSelect={{this.onSpeedChanged}}
+                        class="form-select speed-select"
+                    />
+                </div>
+            </div>
+
+            {{#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}}
+                    </span>
+                    <div class="progress-bar w-32 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                        <div class="progress-fill h-full bg-blue-600 transition-all duration-300" style={{this.replayProgressWidth}}></div>
+                    </div>
+                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                        {{this.replayProgress}}%
+                    </span>
+                </div>
+            {{/if}}
+        </div>
+    </div>
+</div>
+<Table @rows={{this.positions}} @columns={{this.columns}} />
+<Spacer @height="400px" />

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

@@ -0,0 +1,455 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+import { isArray } from '@ember/array';
+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 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 replaySpeed = '1';
+    @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 ?? [];
+        const drivers = this.leafletMapManager._livemap?.drivers ?? [];
+
+        return [...vehicles, ...drivers];
+    }
+
+    get replayProgressWidth() {
+        return htmlSafe(`width: ${this.replayProgress}%;`);
+    }
+
+    get orderFilters() {
+        const params = {};
+
+        if (this.resourceType === 'vehicle') {
+            params.vehicle_assigned_uuid = this.resource?.id;
+        }
+
+        if (this.resourceType === 'driver') {
+            params.driver_assigned_uuid = this.resource?.id;
+        }
+
+        return params;
+    }
+
+    get resourceType() {
+        if (!this.resource) {
+            return 'resource';
+        }
+        return getModelName(this.resource) || 'resource';
+    }
+
+    get hasPositions() {
+        return this.positions.length > 0;
+    }
+
+    get totalPositions() {
+        return this.positions.length;
+    }
+
+    get replayProgress() {
+        if (this.totalPositions === 0) {
+            return 0;
+        }
+        return Math.round((this.currentReplayIndex / this.totalPositions) * 100);
+    }
+
+    get speedOptions() {
+        return [
+            { label: '0.5x', value: '0.5' },
+            { label: '1x', value: '1' },
+            { label: '2x', value: '2' },
+            { label: '5x', value: '5' },
+            { label: '10x', value: '10' },
+            { label: '20x', value: '20' },
+            { label: '30x', value: '30' },
+            { label: '40x', value: '40' },
+            { label: '50x', value: '50' },
+            { label: '100x', value: '100' },
+            { label: '80x', value: '80' },
+            { label: '120x', value: '120' },
+            { label: '160x', value: '160' },
+            { label: '180x', value: '180' },
+            { label: '200x', value: '200' },
+            { label: '250x', value: '250' },
+            { label: '280x', value: '280' },
+            { label: '300x', value: '300' },
+            { label: '350x', value: '350' },
+            { label: '400x', value: '400' },
+            { label: '500x', value: '500' },
+            { label: '600x', value: '600' },
+            { label: '1000x', value: '1000' },
+        ];
+    }
+
+    /** columns */
+    get columns() {
+        return [
+            {
+                label: '#',
+                valuePath: 'index',
+                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)',
+                valuePath: 'speedKmh',
+            },
+            {
+                label: 'Heading',
+                valuePath: 'heading',
+            },
+            {
+                label: 'Altitude (m)',
+                valuePath: 'altitude',
+            },
+        ];
+    }
+
+    constructor() {
+        super(...arguments);
+        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();
+    }
+
+    @action onOrderSelected(order) {
+        this.selectedOrder = order;
+        this.loadPositions.perform();
+    }
+
+    @action onDateRangeChanged({ formattedDate }) {
+        if (isArray(formattedDate) && formattedDate.length === 2) {
+            this.dateFilter = formattedDate;
+            this.loadPositions.perform();
+        }
+    }
+
+    @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() {
+        if (this.positions.length === 0) {
+            this.notifications.warning('No positions to replay');
+            return;
+        }
+
+        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.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() {
+        this.selectedOrder = null;
+        this.dateFilter = null;
+        this.loadPositions.perform();
+    }
+
+    @action onPositionClicked(position) {
+        if (this.leafletMapManager.map && position.latitude && position.longitude) {
+            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,
+            });
+        }
+    }
+
+    @task *loadPositions() {
+        if (!this.resource) return;
+
+        try {
+            const params = {
+                limit: 900,
+                sort: 'created_at',
+                subject_uuid: this.resource.id,
+            };
+
+            if (this.selectedOrder) {
+                params.order_uuid = this.selectedOrder.id;
+            }
+
+            if (isArray(this.dateFilter) && this.dateFilter.length === 2) {
+                params.created_at = this.dateFilter.join(',');
+            }
+
+            const positions = yield this.store.query('position', params);
+            this.positions = isArray(positions)
+                ? positions.map((pos, index) => {
+                      pos.set('index', index + 1);
+                      return pos;
+                  })
+                : [];
+
+            this.#renderPositionsOnMap({ fitLast: 5 });
+
+            // Reset replay state when positions change
+            this.stopReplay();
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    /**
+     * 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;
+        }
+
+        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');
+                }
+            },
+        });
+    }
+
+    /** Position Rendering */
+    #ensurePositionsLayer() {
+        if (!this.leafletMapManager.map) return null;
+
+        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);
+            }
+        }
+    }
+
+    #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);
+    }
+
+    #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();
+
+        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]);
+            }
+        });
+
+        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/map/drawer.js

@@ -13,6 +13,8 @@ export default class MapDrawerComponent extends Component {
             this.universe._createMenuItem('Vehicles', null, { icon: 'car', component: 'map/drawer/vehicle-listing' }),
             this.universe._createMenuItem('Drivers', null, { icon: 'id-card', component: 'map/drawer/driver-listing' }),
             this.universe._createMenuItem('Places', null, { icon: 'building', component: 'map/drawer/place-listing' }),
+            this.universe._createMenuItem('Positions', null, { icon: 'map-marker', component: 'map/drawer/position-listing' }),
+            this.universe._createMenuItem('Events', null, { icon: 'stream', component: 'map/drawer/device-event-listing' }),
             ...(isArray(registeredTabs) ? registeredTabs : []),
         ];
     }

package/addon/components/map/leaflet-live-map.hbs

@@ -66,10 +66,11 @@
             {{/each}}
 
             {{#each this.vehicles as |vehicle|}}
-                <layers.marker
+                <layers.tracking-marker
                     @id={{vehicle.id}}
                     @publicId={{vehicle.public_id}}
                     @location={{point-to-coordinates vehicle.location}}
+                    @rotationAngle={{vehicle.heading}}
                     @icon={{icon iconUrl=vehicle.avatar_url iconSize=(array 24 24)}}
                     @onAdd={{fn this.trigger "onVehicleAdded" vehicle}}
                     @onClick={{fn this.trigger "onVehicleClicked" vehicle}}
@@ -83,6 +84,8 @@
                             </div>
                             <div class="flex-1">
                                 <div class="text-xs font-semibold">{{vehicle.displayName}}</div>
+                                <div class="text-xs">ID: {{n-a vehicle.public_id}}</div>
+                                <div class="text-xs">Serial No: {{n-a vehicle.serial_number vehicle.vin vehicle.internal_id vehicle.id}}</div>
                                 <div class="text-xs">Driver: {{n-a vehicle.driver_name}}</div>
                                 <div class="text-xs">Status: <span class="{{if vehicle.online 'text-green-500' 'text-red-400'}}">{{if vehicle.online "Online" "Offline"}}</span></div>
                                 <div class="text-xs truncate">Pos: {{point-coordinates vehicle.location}}</div>
@@ -95,9 +98,11 @@
                             <div>•</div>
                             <div class="text-xs {{if vehicle.online 'text-green-500' 'text-red-400'}}">{{if vehicle.online "Online" "Offline"}}</div>
                         </div>
+                        <div class="text-xs">ID: {{n-a vehicle.public_id}}</div>
+                        <div class="text-xs">Serial No: {{or vehicle.serial_number vehicle.vin vehicle.internal_id vehicle.id "-"}}</div>
                         <div class="text-xs truncate"><FaIcon @icon="location-dot" @size="xs" class="mr-0.5" />{{point-coordinates vehicle.location}}</div>
                     </marker.tooltip>
-                </layers.marker>
+                </layers.tracking-marker>
             {{/each}}
 
             {{#each this.places as |place|}}

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 {}