@fleetbase/fleetops-engine 0.6.19 → 0.6.21

package/addon/services/movement-tracker.js

@@ -10,17 +10,19 @@ import LeafletTrackingMarkerComponent from '../components/leaflet-tracking-marke
 export class EventBuffer {
     @tracked events = [];
     @tracked waitTime = 1000 * 3;
+    @tracked callback;
     @tracked intervalId;
     @tracked model;
 
-    constructor(model, waitTime = 1000 * 3) {
+    constructor(model, { callback = null, waitTime = 1000 * 3 }) {
         this.model = model;
+        this.callback = callback;
         this.waitTime = waitTime;
     }
 
     start() {
         this.intervalId = setInterval(() => {
-            const bufferReady = this.process.isIdle && this.events.length;
+            const bufferReady = this.process.isIdle && this.events.length > 0;
             if (bufferReady) {
                 this.process.perform();
             }
@@ -32,11 +34,11 @@ export class EventBuffer {
     }
 
     clear() {
-        this.events.length = 0;
+        this.events = [];
     }
 
     add(event) {
-        this.events.pushObject(event);
+        this.events = [...this.events, event];
     }
 
     removeByIndex(index) {
@@ -44,65 +46,112 @@ export class EventBuffer {
     }
 
     remove(event) {
-        this.events = this.events.removeObject(event);
+        this.events = this.events.filter((e) => e !== event);
     }
 
     @task *process() {
         debug('Processing movement tracker event buffer.');
+
+        // Take a snapshot of events to process and clear buffer immediately
+        // This prevents losing events that arrive during processing
+        const eventsToProcess = [...this.events];
+        this.events = []; // Clear immediately to accept new events
+
         // Sort events by created_at
-        this.events = this.events.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+        eventsToProcess.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+        debug(`[MovementTracker EventBuffer processing ${eventsToProcess.length} events]`);
 
         // Process sorted events
-        for (const output of this.events) {
+        for (const output of eventsToProcess) {
             const { event, data } = output;
 
+            // get movingObject marker
+            const marker = this.model.leafletLayer || this.model._layer || this.model._marker;
+            if (!marker || !marker._map) {
+                debug('No marker or marker not on map yet');
+                continue;
+            }
+
             // log incoming event
             debug(`${event} - ${data.id} ${data.additionalData?.index ? '#' + data.additionalData?.index : ''} (${output.created_at}) [ ${data.location.coordinates.join(' ')} ]`);
 
-            // get movingObject marker
-            const marker = this.model._layer || this.model._marker;
-            if (marker) {
-                if (typeof marker.setRotationAngle === 'function' && data.heading) {
+            // GeoJSON -> Leaflet [lat, lng]
+            const [lng, lat] = data.location.coordinates;
+            const nextLatLng = [lat, lng];
+
+            // Calc speed
+            const map = marker._map;
+            const prev = marker.getLatLng();
+            const meters = map ? map.distance(prev, nextLatLng) : prev.distanceTo(nextLatLng);
+
+            // Assume payload speed is m/s; if it's km/h, convert: mps = kmh / 3.6
+            let mps = Number.isFinite(data.speed) && data.speed > 0 ? data.speed : null;
+
+            // Reduce animation duration and clamp between 100ms and 500ms
+            // This makes animations faster and prevents long delays
+            const durationMs = mps ? Math.max(100, Math.min((meters / mps) * 1000, 500)) : 500;
+
+            try {
+                // Apply rotation if heading is valid
+                if (typeof marker.setRotationAngle === 'function' && Number.isFinite(data.heading) && data.heading !== -1) {
                     marker.setRotationAngle(data.heading);
                 }
 
+                // Move marker with animation
                 if (typeof marker.slideTo === 'function') {
-                    marker.slideTo(data.location.coordinates);
+                    marker.slideTo(nextLatLng, { duration: durationMs });
                 } else {
-                    marker.setLatLng(data.location.coordinates);
+                    marker.setLatLng(nextLatLng);
                 }
 
-                yield timeout(1000);
+                if (typeof this.callback === 'function') {
+                    this.callback(output, { nextLatLng, duration: durationMs, mps });
+                }
+
+                // Wait for animation to complete
+                yield timeout(durationMs + 50);
+            } catch (err) {
+                debug('MovementTracker EventBuffer error: ' + err.message);
             }
         }
 
-        // Clear the buffer
-        this.clear();
+        // Don't clear here - we already cleared at the start
+        debug(`[MovementTracker EventBuffer finished processing ${eventsToProcess.length} events]`);
     }
 }
 
 export default class MovementTrackerService extends Service {
     @service socket;
     @tracked channels = [];
+    @tracked buffers = new Map();
 
     constructor() {
         super(...arguments);
         this.registerTrackingMarker();
     }
 
-    _getOwner(owner = null) {
+    #getOwner(owner = null) {
         return owner ?? window.Fleetbase ?? getOwner(this);
     }
 
+    #getBuffer(key, model, opts = {}) {
+        let buf = this.buffers.get(key);
+        if (!buf) {
+            buf = new EventBuffer(model, opts);
+            buf.start();
+            this.buffers.set(key, buf);
+        }
+        return buf;
+    }
+
     registerTrackingMarker(_owner = null) {
-        const owner = this._getOwner(_owner);
+        const owner = this.#getOwner(_owner);
         const emberLeafletService = owner.lookup('service:ember-leaflet');
 
         if (emberLeafletService) {
             const alreadyRegistered = emberLeafletService.components.find((registeredComponent) => registeredComponent.name === 'leaflet-tracking-marker');
-            if (alreadyRegistered) {
-                return;
-            }
+            if (alreadyRegistered) return;
+
             // we then invoke the `registerComponent` method
             emberLeafletService.registerComponent('leaflet-tracking-marker', {
                 as: 'tracking-marker',
@@ -123,37 +172,39 @@ export default class MovementTrackerService extends Service {
         });
     }
 
-    async track(model) {
+    async track(model, options = {}) {
         // Create socket instance
         const socket = this.socket.instance();
 
         // Get model type and identifier
         const type = getModelName(model);
         const identifier = model.id;
-        debug(`Tracking movement started for ${type} with id ${identifier}`, model);
+
+        // Location events to listen for
+        const locationEvents = [`${type}.location_changed`, `${type}.simulated_location_changed`, 'position.changed', 'position.simulated'];
 
         // Listen on the specific channel
-        const channelId = `${type}.${identifier}`;
+        const channelId = options?.channelId ?? `${type}.${identifier}`;
         const channel = socket.subscribe(channelId);
 
+        // Debug output
+        debug(`Tracking movement started for ${type} with id ${identifier}${options?.channelId ? ' on channel ' + channelId : ''}`, model);
+
         // Track the channel
-        this.channels.pushObject(channel);
+        this.channels = [...this.channels, channel];
 
         // Listen to the channel for events
         await channel.listener('subscribe').once();
 
         // Create event buffer for tracking model
-        const eventBuffer = new EventBuffer(model);
-
-        // Start tracking with event buffer
-        eventBuffer.start();
+        const eventBuffer = this.#getBuffer(channelId, model, options);
 
         // Get incoming data and console out
         (async () => {
             for await (let output of channel) {
                 const { event } = output;
 
-                if (event === `${type}.location_changed` || event === `${type}.simulated_location_changed`) {
+                if (locationEvents.includes(event)) {
                     eventBuffer.add(output);
                     debug(`Socket Event : ${event} : Added to EventBuffer : ${JSON.stringify(output)}`);
                 }

package/addon/services/order-creation.js

@@ -1,6 +1,6 @@
 import Service, { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
-import { later } from '@ember/runloop';
+import { next } from '@ember/runloop';
 
 export default class OrderCreationService extends Service {
     @service orderActions;
@@ -12,13 +12,9 @@ export default class OrderCreationService extends Service {
         const order = this.orderActions.createNewInstance(attrs);
         this.order = order;
 
-        later(
-            this,
-            () => {
-                this.addContext('order', order);
-            },
-            0
-        );
+        next(() => {
+            this.addContext('order', order);
+        });
 
         return order;
     }

package/addon/services/order-validation.js

@@ -23,7 +23,7 @@ export default class OrderValidationService extends Service {
         const hasWaypoints = order.payload.waypoints.length >= 2;
         const hasPickup = isNotEmpty(order.payload.pickup);
         const hasDropoff = isNotEmpty(order.payload.dropoff);
-        const hasValidCustomFields = cfManager ? this.isCustomFieldsValid(cfManager) : false;
+        const hasValidCustomFields = cfManager ? this.isCustomFieldsValid(cfManager) : true;
 
         if (hasWaypoints) {
             return hasOrderConfig && hasOrderType && hasValidCustomFields;
@@ -37,13 +37,13 @@ export default class OrderValidationService extends Service {
     }
 
     validateCustomFields(cfManager) {
-        if (!cfManager) return false;
+        if (!cfManager) return true;
 
         return cfManager.validateRequired();
     }
 
     isCustomFieldsValid(cfManager) {
-        if (!cfManager) return false;
+        if (!cfManager) return true;
 
         const { isValid } = this.validateCustomFields(cfManager);
         return isValid;

package/addon/styles/fleetops-engine.css

@@ -1654,3 +1654,195 @@ button.fleetops-btn-xxs,
     padding-top: 0.2rem !important;
     padding-bottom: 0.2rem !important;
 }
+
+/** css fix for operations index/kanban */
+main.console-fleet-ops-operations-orders-index-index section.next-view-section {
+    max-width: 100vw;
+    min-width: 0;
+}
+
+main.console-fleet-ops-operations-orders-index-index section.next-view-section > .next-view-section-container {
+    display: flex;
+    flex-direction: column;
+    max-width: 100vw;
+    min-width: 0;
+}
+
+main.console-fleet-ops-operations-orders-index-index section.next-view-section > .next-view-section-container > .next-view-section-subheader {
+    flex: 0 0 auto;
+    width: 100%;
+}
+
+main.console-fleet-ops-operations-orders-index-index section.next-view-section > .next-view-section-container > .next-view-section-body {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: auto;
+}
+
+main.console-fleet-ops-operations-orders-index-index section.next-view-section > .next-view-section-container > .next-view-section-body > .kanban-board {
+    display: flex;
+}
+
+.next-view-section-subheader .next-view-section-subheader-actions .order-board-type-filter.ember-power-select-trigger.ember-basic-dropdown-trigger {
+    height: 2rem;
+    align-items: center;
+    padding-left: 0.5rem;
+    padding-right: 2rem;
+}
+
+.positions-replay-component {
+    width: 100%;
+    max-width: 100%;
+}
+
+.positions-replay-component .metric-card {
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    background-color: rgba(0, 0, 0, 2%);
+    transition: all 0.2s ease-in-out;
+}
+
+.positions-replay-component .metric-card:hover {
+    background-color: rgba(0, 0, 0, 4%);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 10%);
+}
+
+body[data-theme='dark'] .positions-replay-component .metric-card {
+    background-color: rgba(255, 255, 255, 5%);
+}
+
+body[data-theme='dark'] .positions-replay-component .metric-card:hover {
+    background-color: rgba(255, 255, 255, 8%);
+}
+
+.positions-replay-component .metric-label {
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 0.25rem;
+}
+
+.positions-replay-component .metric-value {
+    font-size: 0.85rem;
+    line-height: 1;
+}
+
+.positions-replay-component .positions-replay-map-container {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+}
+
+.positions-replay-component .replay-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.positions-replay-component .speed-control {
+    display: flex;
+    align-items: center;
+}
+
+.positions-replay-component .speed-control > select.speed-select {
+    height: 1.7rem;
+    font-size: 0.85rem;
+    line-height: 0.85rem;
+    text-align: center;
+    padding: 0 2rem 0 0.75rem;
+}
+
+.positions-replay-component .replay-progress {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.positions-replay-component .progress-bar {
+    position: relative;
+    overflow: hidden;
+    border-radius: 9999px;
+}
+
+.positions-replay-component .progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #3b82f6, #2563eb);
+    transition: width 0.3s ease-in-out;
+}
+
+.positions-replay-component .map-wrapper {
+    position: relative;
+    width: 100%;
+}
+
+.positions-replay-component .positions-replay-map {
+    width: 100%;
+    height: 100%;
+}
+
+.positions-replay-component .positions-replay-timeline {
+    margin-top: 1rem;
+}
+
+.positions-replay-component .timeline-container {
+    position: relative;
+}
+
+.positions-replay-component .timeline-track {
+    display: flex;
+    padding-bottom: 1rem;
+    min-width: min-content;
+}
+
+.positions-replay-component .timeline-item {
+    position: relative;
+    min-width: 80px;
+    padding: 0.5rem;
+    border-radius: 0.375rem;
+    transition: all 0.2s ease-in-out;
+}
+
+.positions-replay-component .timeline-item:hover {
+    transform: translateY(-2px);
+}
+
+.positions-replay-component .timeline-marker {
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 50%;
+    margin: 0 auto 0.25rem;
+    transition: all 0.2s ease-in-out;
+}
+
+.positions-replay-component .timeline-item:hover .timeline-marker {
+    transform: scale(1.3);
+}
+
+.positions-replay-component .timeline-content {
+    text-align: center;
+    white-space: nowrap;
+}
+
+.positions-replay-component .positions-replay-table table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.positions-replay-component .positions-replay-table th {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 0.65rem;
+}
+
+.positions-replay-component .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+}

package/addon/templates/connectivity/devices/index/details/index.hbs

@@ -1,2 +1,2 @@
-
-{{outlet}}
+<Device::Details @resource={{@model}} />
+<Spacer @height="200px" />

package/addon/templates/connectivity/devices/index/details.hbs

@@ -1,2 +1,15 @@
-
-{{outlet}}
+<Layout::Resource::Panel
+    @resource={{@model}}
+    @controller={{this}}
+    @headerComponent={{component "device/panel-header" resource=@model}}
+    @headerTitle={{or @model.name @model.serial_number}}
+    @actionButtons={{this.actionButtons}}
+    @onPressCancel={{transition-to "connectivity.devices.index"}}
+    @onOverlayReady={{fn (mut this.overlay)}}
+    @headerClass="no-bottom-border"
+    @bodyClass="no-scroll"
+>
+    <TabNavigation @tabs={{this.tabs}} @contentClass="scrollable" @tablistClass="pl-2">
+        {{outlet}}
+    </TabNavigation>
+</Layout::Resource::Panel>

package/addon/templates/connectivity/devices/index/edit.hbs

@@ -1,7 +1,7 @@
 <Layout::Resource::Panel
     @resource={{@model}}
     @controller={{this}}
-    @headerTitle={{concat "Edit: " @model.name}}
+    @headerTitle={{concat "Edit: " (or @model.name @model.serial_number)}}
     @actionButtons={{this.actionButtons}}
     @saveTask={{this.save}}
     @onPressCancel={{this.cancel}}

package/addon/templates/connectivity/events/index.hbs

@@ -1,6 +1,6 @@
 <Layout::Resource::Tabular
     @resource="device-event"
-    @title={{t "resource.device-events"}}
+    @title="Connectivity Events"
     @searchQuery={{this.query}}
     @onSearch={{perform this.deviceEventActions.controllerSearchTask this}}
     @data={{@model}}

package/addon/templates/connectivity/sensors/index/details/index.hbs

@@ -1,2 +1,2 @@
-
-{{outlet}}
+<Sensor::Details @resource={{@model}} />
+<Spacer @height="200px" />

package/addon/templates/connectivity/sensors/index/details.hbs

@@ -1,2 +1,15 @@
-
-{{outlet}}
+<Layout::Resource::Panel
+    @resource={{@model}}
+    @controller={{this}}
+    @headerComponent={{component "sensor/panel-header" resource=@model}}
+    @headerTitle={{or @model.name @model.serial_number}}
+    @actionButtons={{this.actionButtons}}
+    @onPressCancel={{transition-to "connectivity.sensors.index"}}
+    @onOverlayReady={{fn (mut this.overlay)}}
+    @headerClass="no-bottom-border"
+    @bodyClass="no-scroll"
+>
+    <TabNavigation @tabs={{this.tabs}} @contentClass="scrollable" @tablistClass="pl-2">
+        {{outlet}}
+    </TabNavigation>
+</Layout::Resource::Panel>

package/addon/templates/connectivity/sensors/index/edit.hbs

@@ -1,7 +1,7 @@
 <Layout::Resource::Panel
     @resource={{@model}}
     @controller={{this}}
-    @headerTitle={{concat "Edit: " @model.name}}
+    @headerTitle={{concat "Edit: " (or @model.name @model.serial_number)}}
     @actionButtons={{this.actionButtons}}
     @saveTask={{this.save}}
     @onPressCancel={{this.cancel}}

package/addon/templates/connectivity/telematics/index/details/index.hbs

@@ -1,2 +1,2 @@
-
-{{outlet}}
+<Telematic::Details @resource={{@model}} />
+<Spacer @height="200px" />

package/addon/templates/connectivity/telematics/index/details.hbs

@@ -1,2 +1,14 @@
-
-{{outlet}}
+<Layout::Resource::Panel
+    @resource={{@model}}
+    @controller={{this}}
+    @headerTitle={{or @model.name @model.provider}}
+    @actionButtons={{this.actionButtons}}
+    @onPressCancel={{transition-to "connectivity.telematics.index"}}
+    @onOverlayReady={{fn (mut this.overlay)}}
+    @headerClass="no-bottom-border"
+    @bodyClass="no-scroll"
+>
+    <TabNavigation @tabs={{this.tabs}} @contentClass="scrollable" @tablistClass="pl-2">
+        {{outlet}}
+    </TabNavigation>
+</Layout::Resource::Panel>

package/addon/templates/connectivity/telematics/index/edit.hbs

@@ -1,7 +1,7 @@
 <Layout::Resource::Panel
     @resource={{@model}}
     @controller={{this}}
-    @headerTitle={{concat "Edit: " @model.name}}
+    @headerTitle={{concat "Edit: " (or @model.name @model.provider)}}
     @actionButtons={{this.actionButtons}}
     @saveTask={{this.save}}
     @onPressCancel={{this.cancel}}

package/addon/templates/management/vehicles/index/details/positions.hbs

@@ -0,0 +1 @@
+<PositionsReplay @resource={{@model}} />

package/addon/templates/operations/orders/index.hbs

@@ -53,9 +53,33 @@
 {{/if}}
 
 {{#if (eq this.layout "kanban")}}
-    <Layout::Section::Header @title={{t "menu.order-board"}} @actionsWrapperClass="space-x-1" />
+    <Layout::Section::Header @title={{t "menu.order-board"}} @subtitle={{@model.length}} @subtitleClass="text-xs text-center font-semibold ml-2 w-6 h-6 rounded-full bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100 flex items-center justify-center" @actionsWrapperClass="space-x-1">
+        <div class="flex flex-row items-center space-x-2">
+            <div class="w-64">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <ModelSelect
+                        @modelName="order-config"
+                        @selectedModel={{or this.orderConfig this.type}}
+                        @placeholder={{t "order.fields.order-type-placeholder"}}
+                        @triggerClass="form-select form-input order-board-type-filter"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @allowClear={{true}}
+                        @onChange={{fn (mut this.orderConfig)}}
+                        @onChangeId={{fn (mut this.type)}}
+                        as |orderConfig|
+                    >
+                        <div class="text-sm">
+                            <div class="font-semibold normalize-in-trigger">{{orderConfig.name}}</div>
+                            <div class="hide-from-trigger">{{n-a orderConfig.description}}</div>
+                        </div>
+                    </ModelSelect>
+                </div>
+            </div>
+        </div>
+    </Layout::Section::Header>
     <Layout::Section::Body>
-        <Order::Kanban @orders={{@model}} @headerOffset={{160}} />
+        <Order::Kanban @orders={{@model}} @headerOffset={{160}} @orderConfig={{this.type}} />
     </Layout::Section::Body>
 {{/if}}