@fleetbase/fleetops-engine 0.6.18 → 0.6.19

package/addon/services/leaflet-map-manager.js

@@ -1,61 +1,395 @@
 import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';
-import getLeafletLayerById from '../utils/get-leaflet-layer-by-id';
-import findLeafletLayer from '../utils/find-leaflet-layer';
-import flyToLeafletLayer from '../utils/fly-to-leaflet-layer';
-
-/**
- * Service for managing Leaflet maps and layers.
- *
- * This service provides functions to work with Leaflet maps, including accessing layers by ID,
- * finding layers based on a custom callback, and flying to specific layers with optional zoom and options.
- *
- * @class
- */
+import { inject as service } from '@ember/service';
+import { action, set } from '@ember/object';
+import { isArray } from '@ember/array';
+import { renderCompleted, waitForInsertedAndSized } from '@fleetbase/ember-ui/utils/dom';
+import { Control as RoutingControl } from '@fleetbase/leaflet-routing-machine';
+import { getLayerById, findLayer, flyToLayer } from '../utils/leaflet';
+import isUuid from '@fleetbase/ember-core/utils/is-uuid';
+
 export default class LeafletMapManagerService extends Service {
-    /**
-     * An array of editable layers on the map.
-     *
-     * @memberof LeafletMapManagerService
-     * @type {Array}
-     */
+    @service leafletRoutingControl;
+    @service notifications;
+    @tracked map;
+    @tracked _livemap;
+    @tracked route;
+    @tracked routingControl;
+    @tracked drawControl;
+    @tracked drawControlFeatureGroup;
+    @tracked leafletLayers = [];
     @tracked editableLayers = [];
+    #mapSetPromise = null;
+    #resolveMapSet = null;
+
+    constructor() {
+        super(...arguments);
+        this.#resetMapDeferred();
+    }
+
+    /** map initialization methods */
+    #resetMapDeferred() {
+        this.#mapSetPromise = new Promise((resolve) => {
+            this.#resolveMapSet = resolve;
+        });
+    }
+
+    async waitForMap({ timeoutMs = 8000 } = {}) {
+        // If already set, return immediately
+        if (this.map) return this.map;
+
+        let to;
+        const p = Promise.race([
+            this.#mapSetPromise,
+            new Promise((_, rej) => {
+                if (timeoutMs != null) {
+                    to = setTimeout(() => rej(new Error('waitForMap timed out')), timeoutMs);
+                }
+            }),
+        ]);
+
+        try {
+            return await p;
+        } finally {
+            if (to) clearTimeout(to);
+        }
+    }
+
+    setMap(map) {
+        this.map = map;
+        this._livemap = map.livemap;
+
+        if (map) {
+            this.#resolveMapSet?.(map);
+        } else {
+            this.#resetMapDeferred();
+        }
+        return map;
+    }
+
+    whenMapLoaded({ timeoutMs } = {}) {
+        return (async () => {
+            const map = await this.waitForMap({ timeoutMs });
+            if (map._loaded) return map;
+
+            return new Promise((resolve, reject) => {
+                let t;
+                const onLoad = () => {
+                    clearTimeout(t);
+                    map.off('load', onLoad);
+                    resolve(map);
+                };
+                map.on('load', onLoad);
+                if (timeoutMs != null) {
+                    t = setTimeout(() => {
+                        map.off('load', onLoad);
+                        reject(new Error('whenMapLoaded timed out'));
+                    }, timeoutMs);
+                }
+            });
+        })();
+    }
+
+    async ensureInteractive({ timeoutMs = 8000 } = {}) {
+        await this.whenMapLoaded({ timeoutMs });
+
+        // always ask Leaflet for the live container
+        const getContainer = () => this.map?.getContainer?.() || this.map?._container || null;
+
+        // wait until inserted + non-zero size
+        await renderCompleted();
+        await waitForInsertedAndSized(getContainer, { timeoutMs });
+
+        // tell Leaflet to re-measure, then give it one paint
+        this.map.invalidateSize(false);
+        return this.map;
+    }
+
+    /** callback to live tracking map */
+    livemap(fn, ...rest) {
+        if (typeof fn === 'function' && this.map.livemap) {
+            return fn(this.map.livemap);
+        }
+        if (this.map.livemap && typeof fn === 'string' && typeof this.map.livemap[fn] === 'function') {
+            return this.map.livemap[fn](...rest);
+        }
+
+        return null;
+    }
+
+    /** layer helpers */
+    getLayerById(layerId) {
+        return getLayerById(this.map, layerId);
+    }
+
+    findLayer(findCallback) {
+        return findLayer(this.map, findCallback);
+    }
+
+    flyToLayer(layer, zoom, options = {}) {
+        return flyToLayer(this.map, layer, zoom, options);
+    }
+
+    getLayerByRecord(record) {
+        const id = isUuid(record) ? record : record?.id;
+        if (!id) return;
+        return this.findLayer((l) => l.record_id === id);
+    }
+
+    flyToRecordLayer(record, zoom, options = {}) {
+        const layer = this.getLayerByRecord(record);
+        if (layer) {
+            this.flyToLayer(layer, zoom, options);
+        }
+    }
+
+    setDrawControl(control) {
+        this.drawControl = control;
+        return control;
+    }
+
+    setDrawControlFeatureGroup(featureGroup) {
+        this.drawControlFeatureGroup = featureGroup;
+        return featureGroup;
+    }
+
+    /** actions */
+    @action hideLayer(layer) {
+        set(layer, 'isVisible', false);
+    }
+
+    @action showLayer(layer) {
+        set(layer, 'isVisible', true);
+    }
+
+    @action toggleDrawControl() {
+        const ctl = this.drawControl;
+        if (!this.map || !ctl) return;
+
+        const isOn = !!ctl._map;
+        if (isOn) {
+            this.map.removeControl(ctl);
+        } else {
+            ctl.addTo(this.map);
+        }
+    }
+
+    @action showDrawControl() {
+        const ctl = this.drawControl;
+        if (!this.map || !ctl) return;
+
+        const isOn = !!ctl._map;
+        if (!isOn) {
+            ctl.addTo(this.map);
+        }
+    }
+
+    @action hideDrawControl() {
+        const ctl = this.drawControl;
+        if (!this.map || !ctl) return;
+
+        const isOn = !!ctl._map;
+        if (isOn) {
+            this.map.removeControl(ctl);
+        }
+    }
+
+    @action zoom(direction = 'in') {
+        if (direction === 'in') {
+            this.map?.zoomIn();
+        } else {
+            this.map?.zoomOut();
+        }
+    }
+
+    @action zoomIn() {
+        this.map?.zoomIn();
+    }
+
+    @action zoomOut() {
+        this.map?.zoomOut();
+    }
+
+    @action showCoordinates(event) {
+        const wrappedLatLng = event.latlng.wrap();
+        this.notifications.info(wrappedLatLng);
+    }
+
+    @action centerMap(event) {
+        this.map.panTo(event.latlng);
+    }
+
+    /** routing methods */
+    /* eslint-disable no-empty */
+    async addRoutingControl(waypoints, options = {}) {
+        if (!isArray(waypoints) || waypoints.length === 0) return;
+
+        const map = await this.ensureInteractive({ timeoutMs: 8000 });
+        try {
+            map.stop();
+        } catch {}
+
+        const routingService = this.leafletRoutingControl.getRouter('osrm');
+        const { router, formatter } = this.leafletRoutingControl.get(routingService);
+        const tag = `routing:${Date.now().toString(36)}:${Math.random().toString(36).slice(2, 8)}`;
+
+        const routingControl = new RoutingControl({
+            router,
+            formatter,
+            waypoints,
+            markerOptions: {
+                icon: L.icon({
+                    iconUrl: '/assets/images/marker-icon.png',
+                    iconRetinaUrl: '/assets/images/marker-icon-2x.png',
+                    shadowUrl: '/assets/images/marker-shadow.png',
+                    iconSize: [25, 41],
+                    iconAnchor: [12, 41],
+                }),
+            },
+            alternativeClassName: 'hidden',
+            addWaypoints: false,
+        }).addTo(map);
+
+        // Track routing control
+        this.routingControl = routingControl;
+
+        // Tag for removal later
+        this.#tagRoutingControl(routingControl, tag);
+
+        routingControl.on('routesfound', (event) => {
+            const { routes } = event;
+            options?.onRouteFound?.(routes[0]);
+            this.route = routes[0];
+        });
+
+        this.positionWaypoints(waypoints);
+
+        return routingControl;
+    }
+
+    positionWaypoints(waypoints) {
+        if (waypoints.length === 1) {
+            this.map.flyTo(waypoints[0], 18);
+            this.map.once('moveend', () => this.map.panBy([200, 0]));
+        } else {
+            this.map.fitBounds(waypoints, {
+                paddingBottomRight: [300, 0],
+                maxZoom: waypoints.length === 2 ? 15 : 14,
+                animate: true,
+            });
+            this.map.once('moveend', () => this.map.panBy([150, 0]));
+        }
+    }
+
+    removeRoute() {
+        this.route = null;
+    }
+
+    async replaceRoutingControl(waypoints, routingControl, options = {}) {
+        const removeOptions = options.removeOptions ?? {};
+        if (routingControl) {
+            await this.removeRoutingControl(routingControl, removeOptions);
+        } else {
+            this.forceRemoveRoutingControl({ ...removeOptions, routingControl });
+        }
+        this.removeRoute();
+
+        return this.addRoutingControl(waypoints, options);
+    }
+
+    /* eslint-disable no-empty */
+    removeRoutingControl(routingControl, options = {}) {
+        return new Promise((resolve) => {
+            let removed = false;
+
+            if (this.map && routingControl instanceof RoutingControl) {
+                try {
+                    routingControl.remove();
+                    removed = true;
+                } catch {}
+
+                if (!removed) {
+                    try {
+                        this.map.removeControl(routingControl);
+                    } catch {}
+                }
+            }
+
+            if (!removed) {
+                this.forceRemoveRoutingControl({ routingControl, ...options });
+            }
+
+            this.routingControl = null;
+            resolve(true);
+        });
+    }
+
+    /* eslint-disable no-empty */
+    forceRemoveRoutingControl({ routingControl, filter } = {}) {
+        if (!this.map) return;
+
+        // If we have a control instance, prefer its tag
+        const tag = routingControl?._routingTag;
+
+        this.map.eachLayer((layer) => {
+            // Only consider markers & polylines
+            if (!(layer instanceof L.Marker || layer instanceof L.Polyline || layer.eachLayer)) return;
+
+            // Must match our routing tag if present
+            const tagged = tag && layer.__routingTag === tag;
+            if (!tagged) return;
+
+            // Optional: caller-provided veto
+            if (typeof filter === 'function' && filter(layer) === true) return;
+
+            try {
+                // Remove the group or the individual layer
+                try {
+                    layer.remove();
+                } catch {
+                    this.map.removeLayer(layer);
+                }
+            } catch (_) {}
+        });
+
+        // Finally, remove the control itself if given
+        try {
+            routingControl?.remove?.();
+        } catch (_) {}
+
+        this.routingControl = null;
+    }
+
+    /* eslint-disable no-empty */
+    #tagRoutingControl(routingControl, tag) {
+        // keep the tag on the control
+        routingControl._routingTag = tag;
+
+        // After the control is on map, tag markers & lines we can find
+        const tagLayer = (layer) => {
+            if (!layer) return;
+            layer.__routingTag = tag;
+            // If it’s a LayerGroup (LRM lines are LayerGroups), tag children too
+            if (layer.eachLayer) {
+                layer.eachLayer((child) => (child.__routingTag = tag));
+            }
+        };
+
+        // Tag plan markers
+        try {
+            const markers = routingControl.getPlan?.()._markers || [];
+            markers.forEach(tagLayer);
+        } catch (_) {}
 
-    /**
-     * Get a Leaflet layer by its ID from the given map.
-     *
-     * @memberof LeafletMapManagerService
-     * @param {Object} map - The Leaflet map instance.
-     * @param {string} layerId - The ID of the layer to retrieve.
-     * @returns {Object|null} The Leaflet layer with the specified ID, or null if not found.
-     */
-    getLeafletLayerById(map, layerId) {
-        return getLeafletLayerById(map, layerId);
-    }
-
-    /**
-     * Find a Leaflet layer in the given map using a custom callback.
-     *
-     * @memberof LeafletMapManagerService
-     * @param {Object} map - The Leaflet map instance.
-     * @param {Function} findCallback - A custom callback function to find the desired layer.
-     * @returns {Object|null} The found Leaflet layer, or null if not found.
-     */
-    findLeafletLayer(map, findCallback) {
-        return findLeafletLayer(map, findCallback);
-    }
-
-    /**
-     * Fly to a specific Leaflet layer on the map with optional zoom and options.
-     *
-     * @memberof LeafletMapManagerService
-     * @param {Object} map - The Leaflet map instance.
-     * @param {Object} layer - The Leaflet layer to fly to.
-     * @param {number} zoom - The zoom level to apply (optional).
-     * @param {Object} options - Additional options for the fly animation (optional).
-     * @returns {Object} The Leaflet map instance.
-     */
-    flyToLayer(map, layer, zoom, options = {}) {
-        return flyToLeafletLayer(map, layer, zoom, options);
+        // Tag main line and any alternative line groups if present
+        // (LRM uses LayerGroup for _line and (depending on version) for alt lines)
+        try {
+            tagLayer(routingControl._line);
+        } catch (_) {}
+        try {
+            // Some builds keep alternatives in a collection; tag what’s iterable
+            const maybeAlts = routingControl._alternatives || routingControl._altLine || routingControl._altLines;
+            (isArray(maybeAlts) ? maybeAlts : [maybeAlts]).forEach(tagLayer);
+        } catch (_) {}
     }
 }

package/addon/services/leaflet-routing-control.js

@@ -21,6 +21,7 @@ export class RoutingControl {
 
 export default class LeafletRoutingControlService extends Service {
     @service universe;
+    @service currentUser;
     registry = this.#initializeRegistry();
 
     get availableEngines() {
@@ -49,12 +50,18 @@ export default class LeafletRoutingControlService extends Service {
     }
 
     get(name) {
+        name = name ?? this.getRouter();
         return this.registry.routers[underscore(name)];
     }
 
+    getRouter(fallback = 'osrm') {
+        const routingSettings = this.currentUser.getOption('routing', { router: fallback ?? 'osrm' });
+        return routingSettings.router;
+    }
+
     #initializeRegistry() {
         const registry = 'registry:routing-controls';
-        const application = this.universe.getApplicationInstance();
+        const application = typeof this.universe?.getApplicationInstance === 'function' ? this.universe.getApplicationInstance() : window.Fleetbase;
         if (!application.hasRegistration(registry)) {
             application.register(registry, new RoutingControlRegistry(), { instantiate: false });
         }

package/addon/services/maintenance-actions.js

@@ -0,0 +1,81 @@
+import ResourceActionService from '@fleetbase/ember-core/services/resource-action';
+
+export default class MaintenanceActionsService extends ResourceActionService {
+    constructor() {
+        super(...arguments);
+        this.initialize('maintenance');
+    }
+
+    transition = {
+        view: (maintenance) => this.transitionTo('maintenance.maintenances.index.details', maintenance),
+        edit: (maintenance) => this.transitionTo('maintenance.maintenances.index.edit', maintenance),
+        create: () => this.transitionTo('maintenance.maintenances.index.new'),
+    };
+
+    panel = {
+        create: (attributes = {}) => {
+            const maintenance = this.createNewInstance(attributes);
+            return this.resourceContextPanel.open({
+                content: 'maintenance/form',
+                title: this.intl.t('common.create-a-new-resource', { resource: this.intl.t('resource.maintenance')?.toLowerCase() }),
+                useDefaultSaveTask: true,
+                saveOptions: {
+                    callback: this.refresh,
+                },
+                maintenance,
+            });
+        },
+        edit: (maintenance) => {
+            return this.resourceContextPanel.open({
+                content: 'maintenance/form',
+                title: this.intl.t('common.edit-resource-name', { resourceName: maintenance.name }),
+                useDefaultSaveTask: true,
+                maintenance,
+            });
+        },
+        view: (maintenance) => {
+            return this.resourceContextPanel.open({
+                maintenance,
+                tabs: [
+                    {
+                        label: this.intl.t('common.overview'),
+                        component: 'maintenance/details',
+                    },
+                ],
+            });
+        },
+    };
+
+    modal = {
+        create: (attributes = {}, options = {}, saveOptions = {}) => {
+            const maintenance = this.createNewInstance(attributes);
+            return this.modalsManager.show('modals/resource', {
+                resource: maintenance,
+                title: this.intl.t('common.create-a-new-resource', { resource: this.intl.t('resource.maintenance')?.toLowerCase() }),
+                acceptButtonText: this.intl.t('common.create-resource', { resource: this.intl.t('resource.maintenance') }),
+                component: 'maintenance/form',
+                confirm: (modal) => this.modalTask.perform(modal, 'saveTask', maintenance, { refresh: true, ...saveOptions }),
+                ...options,
+            });
+        },
+        edit: (maintenance, options = {}, saveOptions = {}) => {
+            return this.modalsManager.show('modals/resource', {
+                resource: maintenance,
+                title: this.intl.t('common.edit-resource-name', { resourceName: maintenance.name }),
+                acceptButtonText: this.intl.t('common.save-changes'),
+                saveButtonIcon: 'save',
+                component: 'maintenance/form',
+                confirm: (modal) => this.modalTask.perform(modal, 'saveTask', maintenance, { refresh: true, ...saveOptions }),
+                ...options,
+            });
+        },
+        view: (maintenance, options = {}) => {
+            return this.modalsManager.show('modals/resource', {
+                resource: maintenance,
+                title: maintenance.name,
+                component: 'maintenance/details',
+                ...options,
+            });
+        },
+    };
+}

package/addon/services/map-drawer.js

@@ -0,0 +1,81 @@
+import Service from '@ember/service';
+import Evented from '@ember/object/evented';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class MapDrawerService extends Service.extend(Evented) {
+    @service appCache;
+    @tracked drawer;
+    @tracked drawerComponent;
+    @tracked drawerHeight = this.appCache.get('map:drawer:height');
+    @tracked activeTabId = this.appCache.get('map:drawer:tab');
+    @tracked isMinimized = this.appCache.get('map:drawer:minimized', true);
+
+    @action setDrawer(drawer, drawerComponent) {
+        this.drawer = drawer;
+        this.drawerComponent = drawerComponent;
+        this.trigger('ready', { drawer, drawerComponent });
+    }
+
+    @action setActiveTab(tab) {
+        this.activeTabId = tab.id;
+        this.appCache.set('map:drawer:tab', tab.id);
+        this.trigger('tab.changed', tab);
+    }
+
+    @action setMinimized(minimized) {
+        this.isMinimized = minimized;
+        this.appCache.set('map:drawer:minimized', minimized);
+    }
+
+    @action setDrawerHeight(height) {
+        this.drawerHeight = height;
+        this.appCache.set('map:drawer:height', height);
+    }
+
+    @action handleResizeEnd({ drawerPanelNode }) {
+        const rect = drawerPanelNode.getBoundingClientRect();
+
+        this.setDrawerHeight(rect.height);
+
+        if (rect.height === 0) {
+            this.setMinimized(true);
+        } else if (rect.height > 1) {
+            this.setMinimized(false);
+        }
+    }
+
+    @action toggle(options = {}) {
+        this.drawer.toggleMinimize({
+            onToggle: (context) => {
+                if (!this.drawerComponent) return;
+                this.setMinimized(context.isMinimized);
+                this.trigger('toggled', context);
+            },
+            ...options,
+        });
+    }
+
+    @action minimize(options = {}) {
+        this.drawer.minimize({
+            onMinimize: (context) => {
+                if (!this.drawerComponent) return;
+                this.setMinimized(true);
+                this.trigger('minimized', context);
+            },
+            ...options,
+        });
+    }
+
+    @action maximize(options = {}) {
+        this.drawer.maximize({
+            onMaximize: (context) => {
+                if (!this.drawerComponent) return;
+                this.setMinimized(false);
+                this.trigger('maximized', context);
+            },
+            ...options,
+        });
+    }
+}