@fleetbase/fleetops-engine 0.6.47 → 0.6.49

package/addon/components/admin/routing-settings.hbs

@@ -3,9 +3,80 @@
         Configure system-wide routing engine defaults here. Organizations can optionally override these values from their own routing settings.
     </InfoBlock>
 
+    <ContentPanel @title="Tracking Defaults" @open={{true}} @wrapperClass="bordered-classic">
+        <InputGroup @name="Default Tracking Provider" @helpText="Default provider for organization-level tracking intelligence unless an organization overrides it.">
+            <Select
+                class="w-full"
+                @value={{this.trackingProvider}}
+                @options={{this.trackingProviderOptions}}
+                @optionLabel="label"
+                @optionValue="value"
+                @placeholder="Select default tracking provider"
+                @onSelect={{fn (mut this.trackingProvider)}}
+            />
+        </InputGroup>
+        <InputGroup @name="Default Fallback Providers" @helpText="Providers used when the selected tracking provider is unavailable.">
+            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                <PowerSelectMultiple
+                    @searchEnabled={{true}}
+                    @options={{this.trackingProviderOptions}}
+                    @selected={{this.selectedTrackingFallbackOptions}}
+                    @onChange={{this.setTrackingFallbacks}}
+                    @placeholder="Select default fallback providers"
+                    @triggerClass="form-select form-input form-input-sm flex-1"
+                    as |provider|
+                >
+                    {{provider.label}}
+                </PowerSelectMultiple>
+            </div>
+        </InputGroup>
+        <div class="flex justify-end">
+            <Button
+                @type="default"
+                @size="xs"
+                @icon={{if this.showTrackingAdvancedSettings "chevron-up" "chevron-down"}}
+                @text="Advanced Settings"
+                @onClick={{this.toggleTrackingAdvancedSettings}}
+            />
+        </div>
+        {{#if this.showTrackingAdvancedSettings}}
+            <div class="mt-4 space-y-4 rounded-md border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
+                <InputGroup @name="Traffic-Aware ETA" @helpText="Use traffic-aware provider calculations when supported.">
+                    <Toggle @isToggled={{this.trackingTrafficEnabled}} @onToggle={{fn (mut this.trackingTrafficEnabled)}} />
+                </InputGroup>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <InputGroup @name="Summary Cache TTL">
+                        <Input @type="number" @value={{this.trackingCacheTtlSeconds}} min="15" max="300" class="form-input w-full" />
+                    </InputGroup>
+                    <InputGroup @name="Route Cache TTL">
+                        <Input @type="number" @value={{this.trackingRouteCacheTtlSeconds}} min="60" max="1800" class="form-input w-full" />
+                    </InputGroup>
+                    <InputGroup @name="Stale Location Threshold">
+                        <Input @type="number" @value={{this.trackingStaleLocationThresholdSeconds}} min="30" max="3600" class="form-input w-full" />
+                    </InputGroup>
+                    <InputGroup @name="Fallback Speed">
+                        <Input @type="number" @value={{this.trackingDefaultVehicleSpeedKph}} min="1" max="160" class="form-input w-full" />
+                    </InputGroup>
+                </div>
+            </div>
+        {{/if}}
+    </ContentPanel>
+
     <RegistryYield @registry="fleet-ops:component:admin:routing-settings" as |RegistryComponent|>
         <div>
             <RegistryComponent />
         </div>
     </RegistryYield>
 </div>
+
+<EmberWormhole @to="next-view-section-subheader-actions">
+    <Button
+        @type="primary"
+        @size="sm"
+        @icon="save"
+        @text="Save Changes"
+        @onClick={{perform this.saveSettings}}
+        @isLoading={{or this.saveSettings.isRunning this.loadSettings.isRunning}}
+        @disabled={{this.saveSettings.isRunning}}
+    />
+</EmberWormhole>

package/addon/components/admin/routing-settings.js

@@ -0,0 +1,124 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+export default class AdminRoutingSettingsComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @tracked trackingProvider = 'google_routes';
+    @tracked trackingFallbacks = ['osrm', 'calculated'];
+    @tracked trackingTrafficEnabled = true;
+    @tracked trackingCacheTtlSeconds = 60;
+    @tracked trackingRouteCacheTtlSeconds = 600;
+    @tracked trackingStaleLocationThresholdSeconds = 300;
+    @tracked trackingDefaultVehicleSpeedKph = 35;
+    @tracked showTrackingAdvancedSettings = false;
+    @tracked trackingProviderOptions = [
+        { value: 'google_routes', label: 'Google Routes' },
+        { value: 'osrm', label: 'OSRM' },
+        { value: 'calculated', label: 'Calculated' },
+    ];
+
+    constructor() {
+        super(...arguments);
+        this.loadSettings.perform();
+    }
+
+    @task *loadSettings() {
+        try {
+            const settings = yield this.fetch.get('fleet-ops/settings/admin-tracking-settings');
+            this.trackingProvider = settings.provider ?? 'google_routes';
+            this.trackingFallbacks = this.normalizeFallbacks(settings.fallbacks);
+            this.trackingTrafficEnabled = settings.traffic_enabled ?? true;
+            this.trackingCacheTtlSeconds = settings.cache_ttl_seconds ?? 60;
+            this.trackingRouteCacheTtlSeconds = settings.route_cache_ttl_seconds ?? 600;
+            this.trackingStaleLocationThresholdSeconds = settings.stale_location_threshold_seconds ?? 300;
+            this.trackingDefaultVehicleSpeedKph = settings.default_vehicle_speed_kph ?? 35;
+            this.trackingProviderOptions = this.normalizeProviderOptions(settings.providers ?? this.trackingProviderOptions);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @task *saveSettings() {
+        try {
+            yield this.fetch.post('fleet-ops/settings/admin-tracking-settings', this.trackingSettingsPayload);
+            this.notifications.success('Tracking defaults saved.');
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    get trackingSettingsPayload() {
+        return {
+            provider: this.trackingProvider,
+            fallbacks: this.normalizeFallbacks(this.trackingFallbacks),
+            traffic_enabled: this.trackingTrafficEnabled,
+            cache_ttl_seconds: Number(this.trackingCacheTtlSeconds) || 60,
+            route_cache_ttl_seconds: Number(this.trackingRouteCacheTtlSeconds) || 600,
+            stale_location_threshold_seconds: Number(this.trackingStaleLocationThresholdSeconds) || 300,
+            default_vehicle_speed_kph: Number(this.trackingDefaultVehicleSpeedKph) || 35,
+        };
+    }
+
+    normalizeFallbacks(fallbacks) {
+        if (Array.isArray(fallbacks)) {
+            return fallbacks
+                .map((fallback) => this.optionValue(fallback))
+                .map((fallback) => String(fallback).trim())
+                .filter(Boolean);
+        }
+
+        return String(fallbacks ?? '')
+            .split(',')
+            .map((fallback) => fallback.trim())
+            .filter(Boolean);
+    }
+
+    get selectedTrackingFallbackOptions() {
+        const selected = new Set(this.normalizeFallbacks(this.trackingFallbacks));
+
+        return this.trackingProviderOptions.filter((option) => selected.has(this.optionValue(option)));
+    }
+
+    normalizeProviderOptions(options = []) {
+        return options.map((option) => {
+            const value = this.optionValue(option);
+            const label = option?.label ?? option?.name ?? this.providerLabel(value);
+
+            return {
+                ...option,
+                key: option?.key ?? value,
+                name: option?.name ?? label,
+                value,
+                label,
+            };
+        });
+    }
+
+    providerLabel(value) {
+        if (value === 'osrm') {
+            return 'OSRM';
+        }
+
+        return String(value ?? '')
+            .replace(/[_-]+/g, ' ')
+            .replace(/\s+/g, ' ')
+            .trim()
+            .replace(/\b\w/g, (character) => character.toUpperCase());
+    }
+
+    optionValue(option) {
+        return typeof option === 'object' && option !== null ? (option.value ?? option.key) : option;
+    }
+
+    @action setTrackingFallbacks(options) {
+        this.trackingFallbacks = this.normalizeFallbacks(options);
+    }
+
+    @action toggleTrackingAdvancedSettings() {
+        this.showTrackingAdvancedSettings = !this.showTrackingAdvancedSettings;
+    }
+}

package/addon/components/customer/orders.js

@@ -138,7 +138,7 @@ export default class CustomerOrdersComponent extends Component {
         // start loading order tracking activity
         order.loadTrackingActivity();
         this.urlSearchParams.addParamToCurrentUrl('order', order.public_id);
-        const driverCurrentLocation = order.get('tracker_data.driver_current_location');
+        const driverCurrentLocation = order.get('tracker_data.driver.location');
         if (driverCurrentLocation) {
             this.latitude = driverCurrentLocation.coordinates[1];
             this.longitude = driverCurrentLocation.coordinates[0];

package/addon/components/display-place.hbs

@@ -10,7 +10,7 @@
             </span>
         </div>
     {{else}}
-        {{#if (and @waypointActions (not @hideBadges))}}
+        {{#if @waypointActions}}
             <div class="flex flex-row item-center space-x-2 {{if (or this.place.status_code @eta) 'mb-2'}}">
                 {{#unless @hideBadges}}
                     {{#if this.place.status_code}}

package/addon/components/driver/details.hbs

@@ -30,6 +30,10 @@
                 <div class="field-name">{{t "driver.fields.driver-license"}}</div>
                 <div class="field-value">{{n-a @resource.drivers_license_number}}</div>
             </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "driver.fields.license-expiry"}}</div>
+                <div class="field-value">{{n-a @resource.license_expiry}}</div>
+            </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "resource.vendor"}}</div>
                 <div class="field-value">{{n-a @resource.vendor_name}}</div>
@@ -92,4 +96,4 @@
     >
         <MetadataViewer @metadata={{@resource.meta}} />
     </ContentPanel>
-</div>
+</div>

package/addon/components/driver/form.hbs

@@ -93,6 +93,16 @@
                 />
             </InputGroup>
 
+            <InputGroup @name={{t "driver.fields.license-expiry"}}>
+                <DatePicker
+                    @value={{@resource.license_expiry}}
+                    @onChange={{fn (mut @resource.license_expiry)}}
+                    @placeholder={{t "driver.fields.license-expiry"}}
+                    @disabled={{cannot-write @resource}}
+                    class="w-full form-input"
+                />
+            </InputGroup>
+
             <InputGroup @name={{t "driver.fields.vendor"}}>
                 <ModelSelect
                     @modelName="vendor"
@@ -221,4 +231,4 @@
     <ContentPanel @title={{t "common.metadata"}} @open={{true}} @wrapperClass="bordered-top">
         <MetadataEditor @value={{@resource.meta}} @onChange={{fn (mut @resource.meta)}} />
     </ContentPanel>
-</div>
+</div>

package/addon/components/fleet-listing-panel.hbs

@@ -36,13 +36,13 @@
             @dropdownButtonIcon={{@itemDropdownButtonIcon}}
             @dropdownButtonIconPrefix={{@itemDropdownButtonIconPrefix}}
             @dropdownButtonText={{@itemDropdownButtonText}}
-            @dropdownButtonCalculatePosition={{@itemDropdownButtonCalculatePosition}}
+            @dropdownButtonCalculatePosition={{this.calculateDropdownItemPosition}}
             @dropdownButtonMenuLabel={{vehicle.displayName}}
             @dropdownButtonWrapperClass={{@itemDropdownButtonWrapperClass}}
             @dropdownButtonTriggerClass={{@itemDropdownButtonTriggerClass}}
             @registerDropdownButtonAPI={{@itemRegisterDropdownButtonAPI}}
-            @permission="fleet-ops view vehicle"
             @dropdownButtonRenderInPlace={{false}}
+            @permission="fleet-ops view vehicle"
         >{{vehicle.displayName}}</Layout::Sidebar::Item>
     {{/each}}
 </Layout::Sidebar::Panel>

package/addon/components/fleet-listing-panel.js

@@ -31,4 +31,14 @@ export default class FleetListingPanelComponent extends Component {
             this.args.onVehicleClicked(vehicle);
         }
     }
+
+    @action calculateDropdownItemPosition(trigger) {
+        let { top, left, width } = trigger.getBoundingClientRect();
+        let style = {
+            left: 11 + left + width,
+            top: top + 2,
+        };
+
+        return { style };
+    }
 }

package/addon/components/map/google-live-map.js

@@ -6,73 +6,7 @@ import { action } from '@ember/object';
 import { isArray } from '@ember/array';
 import { debug } from '@ember/debug';
 import { guidFor } from '@ember/object/internals';
-
-function buildDriverInfoWindowContent(driver) {
-    return `
-        <div class="fleetops-google-popover fleetops-google-popover--compact">
-            <div class="fleetops-google-popover__row">
-                <img src="${driver.photoUrl ?? ''}" alt="${driver.name ?? ''}" class="fleetops-google-popover__avatar" />
-                <div class="fleetops-google-popover__body">
-                    <div class="fleetops-google-popover__title">${driver.name ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Phone: ${driver.phone ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Vehicle: ${driver.vehicle_name ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Status:
-                        <span class="${driver.online ? 'text-green-500' : 'text-red-400'}">${driver.online ? 'Online' : 'Offline'}</span>
-                    </div>
-                </div>
-            </div>
-        </div>`;
-}
-
-function buildDriverTooltipContent(driver) {
-    return `
-        <div class="fleetops-google-hover-tooltip__title">${driver.name ?? '-'}</div>
-        <div class="fleetops-google-hover-tooltip__meta ${driver.online ? 'text-green-400' : 'text-red-400'}">${driver.online ? 'Online' : 'Offline'}</div>
-    `;
-}
-
-function buildVehicleInfoWindowContent(vehicle) {
-    return `
-        <div class="fleetops-google-popover">
-            <div class="fleetops-google-popover__row">
-                <img src="${vehicle.photo_url ?? ''}" alt="${vehicle.display_name ?? ''}" class="fleetops-google-popover__vehicle" />
-                <div class="fleetops-google-popover__body">
-                    <div class="fleetops-google-popover__title">${vehicle.displayName ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">ID: ${vehicle.public_id ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Serial: ${vehicle.serial_number ?? vehicle.vin ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Driver: ${vehicle.driver_name ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Status:
-                        <span class="${vehicle.online ? 'text-green-500' : 'text-red-400'}">${vehicle.online ? 'Online' : 'Offline'}</span>
-                    </div>
-                </div>
-            </div>
-        </div>`;
-}
-
-function buildVehicleTooltipContent(vehicle) {
-    return `
-        <div class="fleetops-google-hover-tooltip__title">${vehicle.displayName ?? '-'}</div>
-        <div class="fleetops-google-hover-tooltip__meta">ID: ${vehicle.public_id ?? '-'}</div>
-        <div class="fleetops-google-hover-tooltip__meta ${vehicle.online ? 'text-green-400' : 'text-red-400'}">${vehicle.online ? 'Online' : 'Offline'}</div>
-    `;
-}
-
-function buildPlaceInfoWindowContent(place) {
-    return `
-        <div class="fleetops-google-popover fleetops-google-popover--compact">
-            <div class="fleetops-google-popover__body">
-                <div class="fleetops-google-popover__title">${place.name ?? place.address ?? '-'}</div>
-                <div class="fleetops-google-popover__meta">${place.address ?? ''}</div>
-            </div>
-        </div>`;
-}
-
-function buildPlaceTooltipContent(place) {
-    return `
-        <div class="fleetops-google-hover-tooltip__title">${place.name ?? place.address ?? '-'}</div>
-        <div class="fleetops-google-hover-tooltip__meta">${place.address ?? ''}</div>
-    `;
-}
+import { buildDriverLiveMapContent, buildPlaceInfoWindowContent, buildPlaceTooltipContent, buildVehicleLiveMapContent } from '../../utils/live-map-card-content';
 
 export default class MapGoogleLiveMapComponent extends Component {
     @service mapManager;
@@ -100,6 +34,7 @@ export default class MapGoogleLiveMapComponent extends Component {
 
         this.map = map;
         this.mapManager.on('moveend', () => this.args.onViewportChanged?.());
+        this.mapManager.on('click', () => this._closeAllInfoWindows());
         this.mapManager.on('rightclick', (event) => this._showMapContextMenu(event));
         this.args.onLoad?.({ target: map });
         this.syncResources();
@@ -125,12 +60,12 @@ export default class MapGoogleLiveMapComponent extends Component {
             if (!marker) {
                 const createdMarker = await this.mapManager.addMarker(driver.id, coords.lat, coords.lng, {
                     iconUrl: driver.vehicle_avatar ?? '/engines-dist/images/driver-marker.png',
-                    iconSize: [24, 24],
+                    iconSize: [20, 20],
                     title: driver.name,
-                    tooltip: buildDriverTooltipContent(driver),
+                    tooltip: buildDriverLiveMapContent(driver),
                     tooltipOptions: { html: true },
                     rotationAngle: driver.heading,
-                    onClick: () => this.#openInfoWindow(`driver:${driver.id}`, buildDriverInfoWindowContent(driver), driver.id, () => this.args.onDriverClicked?.(driver)),
+                    onClick: () => this.#openInfoWindow(`driver:${driver.id}`, buildDriverLiveMapContent(driver, true), driver.id, () => this.args.onDriverClicked?.(driver)),
                     onRightClick: (event) => this._showDriverContextMenu(driver, event),
                 });
 
@@ -155,12 +90,12 @@ export default class MapGoogleLiveMapComponent extends Component {
             if (!marker) {
                 const createdMarker = await this.mapManager.addMarker(vehicle.id, coords.lat, coords.lng, {
                     iconUrl: vehicle.avatar_url ?? '/engines-dist/images/vehicle-marker.png',
-                    iconSize: [24, 24],
+                    iconSize: [20, 20],
                     title: vehicle.displayName,
-                    tooltip: buildVehicleTooltipContent(vehicle),
+                    tooltip: buildVehicleLiveMapContent(vehicle),
                     tooltipOptions: { html: true },
                     rotationAngle: vehicle.heading,
-                    onClick: () => this.#openInfoWindow(`vehicle:${vehicle.id}`, buildVehicleInfoWindowContent(vehicle), vehicle.id, () => this.args.onVehicleClicked?.(vehicle)),
+                    onClick: () => this.#openInfoWindow(`vehicle:${vehicle.id}`, buildVehicleLiveMapContent(vehicle, true), vehicle.id, () => this.args.onVehicleClicked?.(vehicle)),
                     onRightClick: (event) => this._showVehicleContextMenu(vehicle, event),
                 });
 
@@ -308,6 +243,10 @@ export default class MapGoogleLiveMapComponent extends Component {
         if (!infoWindow) {
             infoWindow = new google.maps.InfoWindow({ content });
             this._infoWindows.set(infoId, infoWindow);
+
+            infoWindow.addListener('domready', () => {
+                document.querySelector('[data-fleetops-google-popover-close]')?.addEventListener('click', () => infoWindow.close(), { once: true });
+            });
         } else {
             infoWindow.setContent(content);
         }