@fleetbase/fleetops-engine 0.6.20 → 0.6.22

package/addon/components/positions-replay.js

@@ -0,0 +1,409 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, set } from '@ember/object';
+import { task } from 'ember-concurrency';
+import { isArray } from '@ember/array';
+import { guidFor } from '@ember/object/internals';
+import { htmlSafe } from '@ember/template';
+import { startOfWeek, endOfWeek, format } from 'date-fns';
+import getModelName from '@fleetbase/ember-core/utils/get-model-name';
+
+export default class PositionsReplayComponent extends Component {
+    @service store;
+    @service fetch;
+    @service positionPlayback;
+    @service notifications;
+    @service location;
+
+    /** Component ID */
+    id = guidFor(this);
+
+    /** 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 replaySpeed = '1';
+    @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';
+
+    /** 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}%;`);
+    }
+
+    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 resource() {
+        return this.args.resource;
+    }
+
+    get resourceName() {
+        if (!this.resource) {
+            return 'Unknown';
+        }
+        return this.resource.name || this.resource.display_name || this.resource.displayName || this.resource.public_id || 'Resource';
+    }
+
+    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 firstPosition() {
+        return this.positions.length > 0 ? this.positions[0] : null;
+    }
+
+    get lastPosition() {
+        return this.positions.length > 0 ? this.positions[this.positions.length - 1] : null;
+    }
+
+    get totalDistance() {
+        return this.metrics?.total_distance ?? 0;
+    }
+
+    get totalDuration() {
+        return this.metrics?.total_duration ?? 0;
+    }
+
+    get maxSpeed() {
+        return this.metrics?.max_speed ?? 0;
+    }
+
+    get avgSpeed() {
+        return this.metrics?.avg_speed ?? 0;
+    }
+
+    get speedingCount() {
+        return this.metrics?.speeding_count ?? 0;
+    }
+
+    get dwellCount() {
+        return this.metrics?.dwell_count ?? 0;
+    }
+
+    get accelerationCount() {
+        return this.metrics?.acceleration_count ?? 0;
+    }
+
+    get formattedDuration() {
+        const seconds = this.totalDuration;
+        const days = Math.floor(seconds / 86400);
+        const hours = Math.floor((seconds % 86400) / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const secs = seconds % 60;
+
+        if (days > 0) {
+            return `${days}d ${hours}h ${minutes}m ${secs}s`;
+        } else if (hours > 0) {
+            return `${hours}h ${minutes}m ${secs}s`;
+        } else if (minutes > 0) {
+            return `${minutes}m ${secs}s`;
+        } else {
+            return `${secs}s`;
+        }
+    }
+
+    /** Constants */
+    speedOptions = [
+        { 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' },
+    ];
+
+    /** Lifecycle */
+    constructor() {
+        super(...arguments);
+
+        // Validate resource argument
+        if (!this.args.resource) {
+            console.warn('PositionsReplay: @resource argument is required');
+        }
+
+        this.loadPositions.perform();
+    }
+
+    willDestroy() {
+        super.willDestroy?.();
+
+        // Clean up replay tracker on component destroy
+        this.positionPlayback.reset();
+    }
+
+    /** Actions */
+    @action didLoadMap({ target: map }) {
+        this.map = map;
+        requestAnimationFrame(() => map.invalidateSize());
+
+        const hasValidCoordinates = this.args.resource?.hasValidCoordinates || (Number.isFinite(this.args.resource?.latitude) && Number.isFinite(this.args.resource?.longitude));
+        if (hasValidCoordinates) {
+            const coordinates = [this.args.resource.latitude, this.args.resource.longitude];
+
+            // Use flyTo with a zoom level of 16 for a smooth animation
+            this.map.flyTo(coordinates, 16, {
+                animate: true,
+                duration: 0.8,
+            });
+        }
+    }
+
+    @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.map && position.latitude && position.longitude) {
+            this.map.setView([position.latitude, position.longitude], this.zoom);
+        }
+    }
+
+    @action onTrackingMarkerAdded(resource, { target: layer }) {
+        this.#setResourceLayer(resource, layer);
+    }
+
+    /** Tasks */
+    @task *loadPositions() {
+        if (!this.args.resource) {
+            this.notifications.warning('No resource provided for position query');
+            return;
+        }
+
+        try {
+            const params = {
+                limit: 900,
+                sort: 'created_at',
+                subject_uuid: this.args.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 : [];
+
+            if (this.positions?.length) {
+                yield this.loadMetrics.perform();
+
+                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);
+        }
+    }
+
+    @task *loadMetrics() {
+        try {
+            const positionIds = this.positions.map((p) => p.id);
+
+            if (positionIds.length === 0) {
+                return;
+            }
+
+            const response = yield this.fetch.post('positions/metrics', {
+                position_ids: positionIds,
+            });
+
+            if (response && response.metrics) {
+                this.metrics = response.metrics;
+            }
+        } 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.args.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.map,
+            callback: (data) => {
+                if (data.type === 'complete') {
+                    // Replay completed
+                    this.notifications.success('Replay completed');
+                }
+            },
+        });
+    }
+
+    #setResourceLayer(model, layer) {
+        const type = getModelName(model);
+
+        set(model, 'leafletLayer', layer);
+        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/sensor/details.hbs

@@ -1,28 +1,38 @@
 <div class="details-wrapper" ...attributes>
-    <ContentPanel @title="Details" @open={{true}} @wrapperClass="bordered-top">
+    <ContentPanel @title="Identity" @open={{true}} @wrapperClass="bordered-top">
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container">
+            <div class="field-info-container ">
                 <div class="field-name">Name</div>
                 <div class="field-value">{{n-a @resource.name}}</div>
             </div>
 
             <div class="field-info-container">
                 <div class="field-name">Sensor Type</div>
-                <div class="field-value">{{smart-humanize @resource.sensor_type}}</div>
+                <div class="field-value">{{n-a (get-fleet-ops-option-label "sensorTypes" @resource.type)}}</div>
             </div>
 
+            <div></div>
+
             <div class="field-info-container">
                 <div class="field-name">Unit</div>
                 <div class="field-value">{{n-a @resource.unit}}</div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">Status</div>
-                <div class="field-value">
-                    <Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge>
-                </div>
+                <div class="field-name">Internal ID</div>
+                <div class="field-value">{{n-a @resource.internal_id}}</div>
+            </div>
+
+            <div class="field-info-container col-span-2">
+                <div class="field-name">Serial Number</div>
+                <div class="field-value">{{n-a @resource.serial_number}}</div>
             </div>
 
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title="Thresholds" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
             <div class="field-info-container">
                 <div class="field-name">Minimum Threshold</div>
                 <div class="field-value">{{n-a @resource.min_threshold}}</div>
@@ -39,29 +49,58 @@
                     {{#if @resource.threshold_inclusive}}
                         <Badge @status="success">Yes</Badge>
                     {{else}}
-                        <Badge @status="default">No</Badge>
+                        <Badge @status="warning">No</Badge>
                     {{/if}}
                 </div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">Report Frequency</div>
-                <div class="field-value">{{n-a @resource.report_frequency_sec}} seconds</div>
+                <div class="field-name">Threshold Status</div>
+                <div class="field-value">
+                    {{#if (eq @resource.threshold_status "normal")}}
+                        <Badge @status="success">Normal</Badge>
+                    {{else if (eq @resource.threshold_status "out_of_range")}}
+                        <Badge @status="danger">Out of Range</Badge>
+                    {{else if (eq @resource.threshold_status "above_maximum")}}
+                        <Badge @status="warning">Above Maximum</Badge>
+                    {{else if (eq @resource.threshold_status "below_minimum")}}
+                        <Badge @status="warning">Below Minimum</Badge>
+                    {{else}}
+                        <Badge @status="default">{{smart-humanize @resource.threshold_status}}</Badge>
+                    {{/if}}
+                </div>
             </div>
+        </div>
+    </ContentPanel>
 
+    <ContentPanel @title="Readings" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
             <div class="field-info-container">
-                <div class="field-name">Device</div>
-                <div class="field-value">{{n-a @resource.device_name}}</div>
+                <div class="field-name">Last Reading At</div>
+                <div class="field-value">{{n-a (format-date @resource.last_reading_at)}}</div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">Warranty</div>
-                <div class="field-value">{{n-a @resource.warranty_name}}</div>
+                <div class="field-name">Report Frequency</div>
+                <div class="field-value">
+                    {{#if @resource.report_frequency_sec}}
+                        {{@resource.report_frequency_sec}}
+                        seconds
+                    {{else}}
+                        {{n-a null}}
+                    {{/if}}
+                </div>
             </div>
+        </div>
+    </ContentPanel>
 
+    <ContentPanel @title="Status" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
             <div class="field-info-container">
-                <div class="field-name">Attached To</div>
-                <div class="field-value">{{n-a @resource.attached_to_name}}</div>
+                <div class="field-name">Status</div>
+                <div class="field-value">
+                    <Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge>
+                </div>
             </div>
 
             <div class="field-info-container">
@@ -74,35 +113,22 @@
                     {{/if}}
                 </div>
             </div>
+        </div>
+    </ContentPanel>
 
+    <ContentPanel @title="Integration & Associations" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
             <div class="field-info-container">
-                <div class="field-name">Last Reading</div>
-                <div class="field-value">{{n-a @resource.last_reading_formatted}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">Last Reading At</div>
-                <div class="field-value">{{format-date @resource.last_reading_at}}</div>
+                <div class="field-name">Device</div>
+                <div class="field-value">{{n-a @resource.device.name}}</div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">Threshold Status</div>
-                <div class="field-value">
-                    {{#if (eq @resource.threshold_status "normal")}}
-                        <Badge @status="success">Normal</Badge>
-                    {{else if (eq @resource.threshold_status "out_of_range")}}
-                        <Badge @status="danger">Out of Range</Badge>
-                    {{else if (eq @resource.threshold_status "above_maximum")}}
-                        <Badge @status="warning">Above Maximum</Badge>
-                    {{else if (eq @resource.threshold_status "below_minimum")}}
-                        <Badge @status="warning">Below Minimum</Badge>
-                    {{else}}
-                        <Badge @status="default">{{smart-humanize @resource.threshold_status}}</Badge>
-                    {{/if}}
-                </div>
+                <div class="field-name">Warranty</div>
+                <div class="field-value">{{n-a @resource.warranty.name}}</div>
             </div>
         </div>
     </ContentPanel>
 
     <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
-</div>
+</div>