@fleetbase/fleetops-engine 0.6.20 → 0.6.21

package/addon/components/positions-replay.hbs

@@ -0,0 +1,333 @@
+<div class="positions-replay-component" ...attributes>
+    <div class="fleetbase-leaflet-map-container map-wrapper relative" {{set-height (or @mapHeight 300)}}>
+        {{#if this.loadPositions.isRunning}}
+            <div class="absolute inset-0 h-full w-full">
+                <div class="flex items-center justify-center h-full">
+                    <Spinner />
+                </div>
+            </div>
+        {{/if}}
+        <div class="next-map-container">
+            <LeafletMap @lat={{this.latitude}} @lng={{this.longitude}} @zoom={{this.zoom}} @onLoad={{this.didLoadMap}} class="next-leaflet-container-map positions-replay-map" as |layers|>
+                <layers.tile @url={{this.tileUrl}} />
+                {{#if this.resource}}
+                    <layers.tracking-marker
+                        @id={{this.resource.id}}
+                        @publicId={{this.resource.public_id}}
+                        @location={{point-to-coordinates this.resource.location}}
+                        @rotationAngle={{or this.resource.heading 0}}
+                        @icon={{icon iconUrl=(or this.resource.avatar_url this.resource.photo_url (config "defaultValues.vehicleAvatar")) iconSize=(array 28 28)}}
+                        @onAdd={{fn this.onTrackingMarkerAdded this.resource}}
+                        @draggable={{false}}
+                        as |marker|
+                    >
+                        <marker.popup @permanent={{false}} @sticky={{true}}>
+                            <div class="flex flex-row">
+                                <div class="w-14 mr-2">
+                                    <img src={{or this.resource.photo_url this.resource.avatar_url}} alt={{this.resourceName}} class="rounded-md w-14 h-12 shadow-sm" />
+                                </div>
+                                <div class="flex-1">
+                                    <div class="text-xs font-semibold">{{this.resourceName}}</div>
+                                    <div class="text-xs">ID: {{n-a this.resource.public_id}}</div>
+                                    {{#if (eq this.resourceType "vehicle")}}
+                                        <div class="text-xs">Serial No: {{n-a this.resource.serial_number this.resource.vin this.resource.internal_id this.resource.id}}</div>
+                                        <div class="text-xs">Driver: {{n-a this.resource.driver_name}}</div>
+                                    {{/if}}
+                                    <div class="text-xs">Status:
+                                        <span class="{{if this.resource.online 'text-green-500' 'text-red-400'}}">{{if this.resource.online "Online" "Offline"}}</span></div>
+                                    <div class="text-xs truncate">Pos: {{point-coordinates this.resource.location}}</div>
+                                </div>
+                            </div>
+                        </marker.popup>
+                        <marker.tooltip @permanent={{false}} @sticky={{true}}>
+                            <div class="flex items-center space-x-1">
+                                <div class="text-xs font-semibold">{{this.resource.displayName}}</div>
+                                <div>•</div>
+                                <div class="text-xs {{if this.resource.online 'text-green-500' 'text-red-400'}}">{{if this.resource.online "Online" "Offline"}}</div>
+                            </div>
+                            <div class="text-xs">ID: {{n-a this.resource.public_id}}</div>
+                            {{#if (eq this.resourceType "vehicle")}}
+                                <div class="text-xs">Serial No: {{or this.resource.serial_number this.resource.vin this.resource.internal_id this.resource.id "-"}}</div>
+                            {{/if}}
+                            <div class="text-xs truncate"><FaIcon @icon="location-dot" @size="xs" class="mr-0.5" />{{point-coordinates this.resource.location}}</div>
+                        </marker.tooltip>
+                    </layers.tracking-marker>
+                {{/if}}
+                {{#each this.positions as |position index|}}
+                    <layers.circle-marker
+                        @location={{array position.latitude position.longitude}}
+                        @radius={{3}}
+                        @color="#3b82f6"
+                        @fillColor="#3b82f6"
+                        @fillOpacity={{0.6}}
+                        @onClick={{fn this.onPositionClicked position}}
+                        as |marker|
+                    >
+                        <marker.popup>
+                            <div class="text-xs">
+                                <div><strong>Position {{add index 1}}</strong></div>
+                                <div>Time: {{position.timestamp}}</div>
+                                <div>Speed: {{position.speedKmh}} km/h</div>
+                                <div>Heading: {{or position.heading "N/A"}}°</div>
+                                <div>Altitude: {{or position.altitude "N/A"}} m</div>
+                            </div>
+                        </marker.popup>
+                    </layers.circle-marker>
+                {{/each}}
+            </LeafletMap>
+        </div>
+    </div>
+
+    <div class="positions-replay-filters px-3 pt-2">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
+            <div class="filter-group relative">
+                <label class="block uppercase tracking-wide text-xs font-medium text-gray-700 dark:text-gray-400 mb-0.5">
+                    Date Range
+                </label>
+                <DatePicker @value={{this.dateFilter}} @range={{true}} @onSelect={{this.onDateRangeChanged}} @autoClose={{true}} @placeholder="Select date range" class="w-full form-input form-input-sm" />
+            </div>
+
+            <div class="filter-group">
+                <label class="block uppercase tracking-wide text-xs font-medium text-gray-700 dark:text-gray-400 mb-0.5">
+                    Order
+                </label>
+                <ModelSelect
+                    @modelName="order"
+                    @selectedModel={{this.selectedOrder}}
+                    @query={{this.orderFilters}}
+                    @placeholder="Filter by order"
+                    @triggerClass="form-select form-input form-input-sm"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{this.onOrderSelected}}
+                    as |order|
+                >
+                    <div class="flex items-center justify-between">
+                        <span>{{order.tracking}}</span>
+                        <span class="text-xs text-gray-500">{{order.createdAt}}</span>
+                    </div>
+                </ModelSelect>
+            </div>
+
+            <div class="filter-actions flex items-end space-x-2">
+                <Button @icon="search" @text={{t "common.search"}} @isLoading={{this.loadPositions.isRunning}} @onClick={{perform this.loadPositions}} />
+                <Button @type="danger" @icon="times" @text={{t "common.clear"}} @disabled={{this.loadPositions.isRunning}} @onClick={{this.clearFilters}} />
+            </div>
+        </div>
+    </div>
+
+    <div class="positions-replay-map-container border-b border-gray-200 dark:border-gray-700">
+        <div class="replay-controls px-3 py-2">
+            <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" @onClick={{this.stopReplay}} />
+                    <Button
+                        @type="success"
+                        @text="Play"
+                        @icon="play"
+                        @size="xs"
+                        @isLoading={{this.isReplaying}}
+                        @disabled={{or this.replayPositions.isRunning (not this.hasPositions)}}
+                        @onClick={{this.startReplay}}
+                    />
+
+                    <div class="speed-control">
+                        <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 this.isReplaying}}
+                    <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>
+
+    {{#if this.hasPositions}}
+        <div class="flex flex-col border-b border-gray-200 dark:border-gray-700">
+            <div class="px-3 mb-1">
+                <h3 class="text-[11px] uppercase tracking-wide text-gray-500 font-semibold">Position Metrics</h3>
+            </div>
+            <div class="grid grid-cols-2 lg:grid-cols-4 gap-2 px-2 pb-2">
+                <div class="metric-card">
+                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Total Distance</div>
+                    <div class="metric-value font-semibold text-blue-600 dark:text-blue-400">
+                        {{this.totalDistance}}
+                        km
+                    </div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Duration</div>
+                    <div class="metric-value font-semibold text-green-600 dark:text-green-400">
+                        {{this.formattedDuration}}
+                    </div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Max Speed</div>
+                    <div class="metric-value font-semibold text-orange-600 dark:text-orange-400">
+                        {{this.maxSpeed}}
+                        km/h
+                    </div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Avg Speed</div>
+                    <div class="metric-value font-semibold text-purple-600 dark:text-purple-400">
+                        {{this.avgSpeed}}
+                        km/h
+                    </div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Speeding Events</div>
+                    <div class="metric-value font-semibold text-red-600 dark:text-red-400">
+                        {{this.speedingCount}}
+                    </div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Dwell Times</div>
+                    <div class="metric-value font-semibold text-yellow-600 dark:text-yellow-400">
+                        {{this.dwellCount}}
+                    </div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Acceleration Events</div>
+                    <div class="metric-value font-semibold text-indigo-600 dark:text-indigo-400">
+                        {{this.accelerationCount}}
+                    </div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Total Positions</div>
+                    <div class="metric-value font-semibold text-gray-600 dark:text-gray-400">
+                        {{this.totalPositions}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    {{/if}}
+
+    {{!-- {{#if this.hasPositions}}
+        <div class="positions-replay-timeline">
+            <div class="px-3">
+                <h3 class="text-[11px] uppercase tracking-wide text-gray-500 font-semibold">Position Timeline</h3>
+            </div>
+            <div class="timeline-container overflow-x-auto">
+                <div class="timeline-track flex space-x-2 pb-4">
+                    {{#each this.positions as |position index|}}
+                        <div
+                            class="timeline-item flex-shrink-0 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 p-2 rounded transition-colors
+                                {{if (eq index this.currentReplayIndex) 'bg-blue-100 dark:bg-blue-900'}}"
+                            role="button"
+                            {{on "click" (fn this.onPositionClicked position)}}
+                        >
+                            <div class="timeline-marker w-3 h-3 rounded-full bg-blue-600 mx-auto mb-1"></div>
+                            <div class="timeline-content text-xs text-center whitespace-nowrap">
+                                <div class="font-medium">{{add index 1}}</div>
+                                <div class="text-gray-500 dark:text-gray-400">{{position.speedKmh}} km/h</div>
+                                <div class="text-gray-400 dark:text-gray-500 text-xxs">
+                                    {{format-date position.created_at "HH:mm:ss"}}
+                                </div>
+                            </div>
+                        </div>
+                    {{/each}}
+                </div>
+            </div>
+        </div>
+    {{/if}} --}}
+
+    {{#if this.hasPositions}}
+        <div class="positions-replay-table">
+            <div class="px-3">
+                <h3 class="text-[11px] uppercase tracking-wide text-gray-500 font-semibold">Position Data</h3>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                    <thead class="bg-gray-50 dark:bg-gray-900">
+                        <tr>
+                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                #
+                            </th>
+                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                Timestamp
+                            </th>
+                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                Latitude
+                            </th>
+                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                Longitude
+                            </th>
+                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                Speed (km/h)
+                            </th>
+                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                Heading
+                            </th>
+                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                Altitude (m)
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                        {{#each this.positions as |position index|}}
+                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 {{if (eq index this.currentReplayIndex) 'bg-blue-50 dark:bg-blue-900'}}">
+                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                                    {{add index 1}}
+                                </td>
+                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                                    {{position.timestamp}}
+                                </td>
+                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                                    {{format-number position.latitude minimumFractionDigits=6 maximumFractionDigits=6}}
+                                </td>
+                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                                    {{format-number position.longitude minimumFractionDigits=6 maximumFractionDigits=6}}
+                                </td>
+                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                                    {{position.speedKmh}}
+                                </td>
+                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                                    {{or position.heading "N/A"}}
+                                </td>
+                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                                    {{or position.altitude "N/A"}}
+                                </td>
+                            </tr>
+                        {{/each}}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    {{/if}}
+
+    {{#unless this.hasPositions}}
+        {{#if this.loadPositions.isIdle}}
+            <div class="empty-state bg-white dark:bg-gray-800 rounded-lg shadow-sm p-12 text-center">
+                <FaIcon @icon="map-marked-alt" @size="2x" class="text-gray-400 mb-2" />
+                <h3 class="text-base font-semibold text-gray-700 dark:text-gray-300">
+                    No Positions Found
+                </h3>
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                    Try adjusting your filters or select a different date range.
+                </p>
+            </div>
+        {{/if}}
+    {{/unless}}
+</div>