@fleetbase/fleetops-engine 0.6.21 → 0.6.22

package/addon/components/positions-replay.js

@@ -12,29 +12,38 @@ import getModelName from '@fleetbase/ember-core/utils/get-model-name';
 export default class PositionsReplayComponent extends Component {
     @service store;
     @service fetch;
-    @service movementTracker;
+    @service positionPlayback;
     @service notifications;
     @service location;
 
     /** Component ID */
     id = guidFor(this);
 
-    /** Tracked properties */
+    /** Tracked properties - only what's NOT managed by service */
     @tracked positions = [];
     @tracked selectedOrder = null;
     @tracked dateFilter = [format(startOfWeek(new Date(), { weekStartsOn: 1 }), 'yyyy-MM-dd'), format(endOfWeek(new Date(), { weekStartsOn: 1 }), 'yyyy-MM-dd')];
     @tracked map = null;
-    @tracked isReplaying = false;
     @tracked replaySpeed = '1';
-    @tracked currentReplayIndex = 0;
     @tracked metrics = null;
     @tracked latitude = this.args.resource.latitude || this.location.getLatitude();
     @tracked longitude = this.args.resource.longitude || this.location.getLongitude();
     @tracked zoom = 14;
     @tracked tileUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
-    @tracked channelId = null;
 
-    /** computed */
+    /** 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 replayProgressWidth() {
         return htmlSafe(`width: ${this.replayProgress}%;`);
     }
@@ -179,6 +188,13 @@ export default class PositionsReplayComponent extends Component {
         this.loadPositions.perform();
     }
 
+    willDestroy() {
+        super.willDestroy?.();
+
+        // Clean up replay tracker on component destroy
+        this.positionPlayback.reset();
+    }
+
     /** Actions */
     @action didLoadMap({ target: map }) {
         this.map = map;
@@ -210,6 +226,11 @@ export default class PositionsReplayComponent 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() {
@@ -217,12 +238,47 @@ export default class PositionsReplayComponent 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() {
@@ -269,13 +325,19 @@ export default class PositionsReplayComponent extends Component {
             if (this.positions?.length) {
                 yield this.loadMetrics.perform();
 
-                const bounds = positions.map((pos) => pos.latLng).filter(Boolean);
+                const bounds = positions
+                    .filter(({ latitude, longitude }) => this.#isValidLatLng(latitude, longitude))
+                    .map((pos) => pos.latLng)
+                    .filter(Boolean);
                 const lastFiveBounds = bounds.slice(-5);
                 this.map.flyToBounds(lastFiveBounds, {
                     animate: true,
                     zoom: 16,
                 });
             }
+
+            // Reset replay state when positions change
+            this.stopReplay();
         } catch (error) {
             this.notifications.serverError(error);
         }
@@ -301,65 +363,36 @@ export default class PositionsReplayComponent extends Component {
         }
     }
 
-    @task *replayPositions() {
+    /**
+     * Initialize replay tracker with current positions and settings
+     * This replaces the socket-based backend replay approach
+     *
+     * @private
+     */
+    #initializeReplay() {
         if (!this.args.resource) {
             this.notifications.warning('No resource provided for replay');
             return;
         }
 
-        try {
-            this.isReplaying = true;
-            this.currentReplayIndex = 0;
-
-            const positionIds = this.positions.map((p) => p.id);
-
-            if (positionIds.length === 0) {
-                this.notifications.warning('No positions to replay');
-                this.isReplaying = false;
-                return;
-            }
-
-            // 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.map.panTo(latlng, { animate: true });
-                    }
-
-                    if (additionalData && Number.isFinite(additionalData.index)) {
-                        this.currentReplayIndex = additionalData.index + 1;
-                        if (this.currentReplayIndex === this.totalPositions) {
-                            this.isReplaying = false;
-                        }
-                    }
-                },
-            });
-
-            // 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.args.resource.id,
-            });
-
-            if (response && response.status === 'ok') {
-                this.notifications.success('Replay started successfully');
-            }
-        } catch (error) {
-            this.notifications.serverError(error);
-            this.isReplaying = false;
+        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.map,
+            callback: (data) => {
+                if (data.type === 'complete') {
+                    // Replay completed
+                    this.notifications.success('Replay completed');
+                }
+            },
+        });
     }
 
     #setResourceLayer(model, layer) {
@@ -369,4 +402,8 @@ export default class PositionsReplayComponent extends Component {
         set(layer, 'record_id', model.id);
         set(layer, 'record_type', type);
     }
+
+    #isValidLatLng(lat, lng) {
+        return Number.isFinite(lat) && Number.isFinite(lng) && lat <= 90 && lat >= -90 && lng <= 180 && lng >= -180 && lat !== 0 && lng !== 0;
+    }
 }

package/addon/components/telematic/form.hbs

@@ -49,11 +49,11 @@
                 <InputGroup @value={{@resource.name}} @name="Integration Name" />
 
                 {{#if this.selectedProvider.supports_webhooks}}
-                    <InputGroup @name="Webhook URL" @helpText={{concat "Configure the URL in your " this.selectedProvider.label " dashboard to receive real-time updates."}}>
-                        <ClickToCopy @value={{this.selectedProvider.webhook_url}}>
-                            <Input @value={{this.selectedProvider.webhook_url}} class="form-input" readonly />
+                    <InputGroup @name="Webhook URL" @helpText={{concat "Configure the URL in your " this.selectedProvider.label " dashboard to receive real-time updates."}} @wrapperClass="col-span-2">
+                        <ClickToCopy @value={{this.selectedProvider.webhook_url}} class="w-full">
+                            <Input @value={{this.selectedProvider.webhook_url}} class="form-input w-full" readonly />
                         </ClickToCopy>
-                        <small class="form-text text-muted">
+                        <small class="form-text text-muted mt-1">
                             Configure this URL in your
                             {{this.selectedProvider.label}}
                             dashboard to receive real-time updates.

package/addon/components/vehicle/card.hbs

@@ -1,5 +1,5 @@
 <Layout::Resource::Card ...attributes as |Card|>
-    <Card.header class={{@headerClass}}>
+    <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>
         {{#if (has-block "header")}}

package/addon/components/vehicle/details.hbs

@@ -47,4 +47,8 @@
             </div>
         </div>
     </ContentPanel>
+
+    <ContentPanel @title={{t "common.metadata"}} @open={{true}} @actionButtons={{this.metadataButtons}} @wrapperClass="bordered-top" @panelBodyWrapperClass={{unless (is-object-empty @resource.meta) "px-0i" ""}}>
+        <MetadataViewer @metadata={{@resource.meta}} />
+    </ContentPanel>
 </div>

package/addon/components/vehicle/details.js

@@ -1,3 +1,21 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 
-export default class VehicleDetailsComponent extends Component {}
+export default class VehicleDetailsComponent extends Component {
+    @service resourceMetadata;
+
+    get metadataButtons() {
+        return [
+            {
+                type: 'default',
+                text: 'Edit',
+                icon: 'pencil',
+                iconPrefix: 'fas',
+                permission: 'fleet-ops update vehicle',
+                onClick: () => {
+                    this.resourceMetadata.edit(this.args.resource);
+                },
+            },
+        ];
+    }
+}

package/addon/components/vehicle/form.hbs

@@ -126,4 +126,8 @@
     <ContentPanel @title={{t "avatar-picker.avatar"}} @open={{true}} @wrapperClass="bordered-top">
         <AvatarPicker @model={{@resource}} @defaultAvatar={{config "defaultValues.vehicleAvatar"}} @disabled={{cannot-write @resource}} />
     </ContentPanel>
+
+    <ContentPanel @title={{t "common.metadata"}} @open={{true}} @wrapperClass="bordered-top">
+        <MetadataEditor @value={{@resource.meta}} @onChange={{fn (mut @resource.meta)}} />
+    </ContentPanel>
 </div>

package/addon/components/vehicle/pill.hbs

@@ -0,0 +1,34 @@
+{{#let (or @vehicle @resource) as |resource|}}
+    <Pill
+        @resource={{resource}}
+        @imageSrc={{resource.photo_url}}
+        @fallbackImageType="vehicleImage"
+        @showOnlineIndicator={{true}}
+        @onClick={{@onClick}}
+        @anchorClass={{@anchorClass}}
+        @imageClass={{@imageClass}}
+        @imageWrapperClass={{@imageWrapperClass}}
+        @contentWrapperClass={{@contentWrapperClass}}
+        @titleClass={{@titleClass}}
+        @subtitleClass={{@subtitleClass}}
+        ...attributes
+    >
+        <:default>
+            <div class="text-sm">{{n-a resource.name resource.yearMakeModel}}</div>
+            <div class="text-xs text-gray-400 dark:text-gray-500">{{or resource.plate_number resource.vin resource.serial_number resource.call_sign}}</div>
+        </:default>
+        <:tooltip>
+            <div>
+                <div class="text-xs font-semibold">{{resource.name resource.yearMakeModel}}</div>
+                <div class="text-xs">{{t "resource.driver"}}: {{n-a resource.driver_name}}</div>
+                <div class="text-xs">
+                    <span>{{t "common.status"}}:</span>
+                    <span class="{{if resource.online 'text-green-500' 'text-red-400'}}">
+                        {{if resource.online (t 'common.online') (t 'common.offline')}}
+                    </span>
+                </div>
+                <div class="text-xs truncate">Pos: {{point-coordinates resource.location}}</div>
+            </div>
+        </:tooltip>
+    </Pill>
+{{/let}}

package/addon/components/vehicle/pill.js

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

package/addon/controllers/management/vehicles/index/details.js

@@ -14,8 +14,13 @@ export default class ManagementVehiclesIndexDetailsController extends Controller
                 route: 'management.vehicles.index.details.positions',
                 label: 'Positions',
             },
+            {
+                route: 'management.vehicles.index.details.devices',
+                label: 'Devices',
+            },
         ];
     }
+
     get actionButtons() {
         return [
             {

package/addon/routes/management/drivers/index/details/positions.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class ManagementDriversIndexDetailsPositionsRoute extends Route {}

package/addon/routes.js

@@ -62,6 +62,7 @@ export default buildRoutes(function () {
                 this.route('new');
                 this.route('details', { path: '/:public_id' }, function () {
                     this.route('index', { path: '/' });
+                    this.route('positions');
                 });
                 this.route('edit', { path: '/edit/:public_id' });
             });
@@ -72,6 +73,8 @@ export default buildRoutes(function () {
                 this.route('details', { path: '/:public_id' }, function () {
                     this.route('index', { path: '/' });
                     this.route('positions');
+                    this.route('devices');
+                    this.route('equipment');
                 });
                 this.route('edit', { path: '/edit/:public_id' });
             });