@fleetbase/fleetops-engine 0.6.20 → 0.6.21

package/addon/components/positions-replay.js

@@ -0,0 +1,372 @@
+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 movementTracker;
+    @service notifications;
+    @service location;
+
+    /** Component ID */
+    id = guidFor(this);
+
+    /** Tracked properties */
+    @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 */
+    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();
+    }
+
+    /** 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;
+    }
+
+    @action startReplay() {
+        if (this.positions.length === 0) {
+            this.notifications.warning('No positions to replay');
+            return;
+        }
+        this.replayPositions.perform();
+    }
+
+    @action stopReplay() {
+        this.isReplaying = false;
+        this.currentReplayIndex = 0;
+    }
+
+    @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.map((pos) => pos.latLng).filter(Boolean);
+                const lastFiveBounds = bounds.slice(-5);
+                this.map.flyToBounds(lastFiveBounds, {
+                    animate: true,
+                    zoom: 16,
+                });
+            }
+        } 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);
+        }
+    }
+
+    @task *replayPositions() {
+        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;
+        }
+    }
+
+    #setResourceLayer(model, layer) {
+        const type = getModelName(model);
+
+        set(model, 'leafletLayer', layer);
+        set(layer, 'record_id', model.id);
+        set(layer, 'record_type', type);
+    }
+}

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>