@fleetbase/fleetops-engine 0.6.45 → 0.6.46

package/addon/services/geofence-event-bus.js

@@ -1,4 +1,5 @@
 import Service from '@ember/service';
+import { isArray } from '@ember/array';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
@@ -154,7 +155,7 @@ export default class GeofenceEventBusService extends Service {
 
     @action
     seedEvents(events = []) {
-        this.events = Array.isArray(events) ? events.slice(0, this.MAX_EVENTS).map((event) => ({ ...event, isNew: false })) : [];
+        this.events = isArray(events) ? events.slice(0, this.MAX_EVENTS).map((event) => ({ ...event, isNew: false })) : [];
     }
 
     /**

package/addon/services/geofence.js

@@ -1,67 +1,55 @@
+/**
+ * GeofenceService
+ *
+ * Refactored to use the provider-agnostic MapManagerService for all map
+ * interactions (drawing, fitBounds, showDrawControl, etc.).
+ *
+ */
 import Service, { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { debug } from '@ember/debug';
-import { createGeoJsonFromLayer } from '../utils/leaflet-to-geojson';
+import { dasherize } from '@ember/string';
 import toMultiPolygon from '../utils/to-multi-polygon';
 
 export default class GeofenceService extends Service {
-    @service leafletMapManager;
-    @service leafletLayerVisibilityManager;
+    @service mapManager;
+    @service store;
+    @service modalsManager;
+    @service serviceAreas;
     @service serviceAreaActions;
     @service zoneActions;
     @service notifications;
     @service intl;
-    #currentEdit = null;
+    _draftSession = null;
+    _draftCreatedHandler = null;
 
     @action createServiceArea() {
         this.notifications.info(this.intl.t('geofence.prompts.use-draw-controls-create-service-area'));
-        this.leafletMapManager.showDrawControl();
-        this.leafletMapManager.map.once('draw:created', ({ layer, layerType }) => {
-            const border = toMultiPolygon(createGeoJsonFromLayer(layer, { layerType }));
-
-            this.serviceAreaActions.modal.create(
-                { border },
-                {
-                    saveOptions: {
-                        callback: (serviceArea) => {
-                            this.leafletMapManager.hideDrawControl();
-                            this.#showServiceArea(serviceArea);
-                        },
-                    },
-                }
-            );
-        });
+        this.#startDraftSession('service-area');
     }
 
     @action createZone(serviceArea) {
         this.notifications.info(this.intl.t('geofence.prompts.use-draw-controls-create-zone'));
-        this.leafletMapManager.showDrawControl();
-        this.leafletMapManager.map.fitBounds(serviceArea.leafletCoordinates, {
-            paddingBottomRight: [300, 0],
-            maxZoom: 15,
-            animate: true,
-        });
-        // @todo use restriction service to restrict drawing to polygon
-        // this.leafletDrawRestriction.setDrawRestrictionPolygon(serviceArea.leafletLayer);
-        this.leafletMapManager.map.once('draw:created', ({ layer, layerType }) => {
-            const border = createGeoJsonFromLayer(layer, { layerType });
 
-            this.zoneActions.modal.create(
-                { border, service_area_uuid: serviceArea.id },
-                {
-                    saveOptions: {
-                        callback: (zone) => {
-                            this.leafletMapManager.hideDrawControl();
-                            this.#showZone(zone);
-                        },
-                    },
-                }
-            );
-        });
+        if (serviceArea.leafletCoordinates) {
+            this.mapManager.fitBounds(serviceArea.leafletCoordinates, { paddingBottomRight: [300, 0], maxZoom: 15, animate: true });
+        }
+
+        this.#startDraftSession('zone', { serviceArea });
+    }
+
+    @action toggleDrawControl() {
+        if (this._draftSession) {
+            this.#resetDraftSession({ hideControl: true, removeDraft: true });
+            return;
+        }
+
+        this.notifications.info(this.intl.t('geofence.prompts.use-draw-controls-create-service-area'));
+        this.#startDraftSession('generic');
     }
 
     @action async editServiceArea(serviceArea) {
-        const layer = serviceArea?.leafletLayer;
+        const layer = serviceArea?.leafletLayer ?? this.mapManager.getOverlay(serviceArea.id);
         if (!layer) {
             this.notifications.info(this.intl.t('geofence.prompts.no-layer-found-for-resource', { resource: this.intl.t('resource.service-area') }));
             return;
@@ -72,7 +60,7 @@ export default class GeofenceService extends Service {
             const result = await this.#editPolygonLayer(layer, { focusBounds: serviceArea.leafletCoordinates });
 
             if (result?.type === 'edited') {
-                const border = toMultiPolygon(createGeoJsonFromLayer(result.layer));
+                const border = toMultiPolygon(result.geoJson ?? result.toGeoJSON?.());
                 serviceArea.set('border', border);
                 await serviceArea.save?.();
 
@@ -87,7 +75,7 @@ export default class GeofenceService extends Service {
     }
 
     @action async editZone(zone) {
-        const layer = zone?.leafletLayer;
+        const layer = zone?.leafletLayer ?? this.mapManager.getOverlay(zone.id);
         if (!layer) {
             this.notifications.info(this.intl.t('geofence.prompts.no-layer-found-for-resource', { resource: this.intl.t('resource.zone') }));
             return;
@@ -98,7 +86,7 @@ export default class GeofenceService extends Service {
             const result = await this.#editPolygonLayer(layer, { focusBounds: zone.leafletCoordinates });
 
             if (result?.type === 'edited') {
-                const border = createGeoJsonFromLayer(result.layer);
+                const border = result.geoJson ?? result.toGeoJSON?.();
                 zone.set('border', border);
                 await zone.save?.();
 
@@ -125,161 +113,209 @@ export default class GeofenceService extends Service {
     }
 
     @action focusServiceArea(serviceArea) {
-        this.#showServiceArea(serviceArea);
-        this.leafletMapManager.map.fitBounds(serviceArea.leafletCoordinates, {
-            paddingBottomRight: [0, 0],
-            maxZoom: 15,
-            animate: true,
-        });
+        this.#showServiceArea(serviceArea, { pin: true });
+        if (serviceArea.leafletCoordinates) {
+            this.mapManager.fitBounds(serviceArea.leafletCoordinates, { paddingBottomRight: [0, 0], maxZoom: 15, animate: true });
+        }
     }
 
     @action blurServiceArea(serviceArea) {
+        this.#showServiceArea(serviceArea, { pin: false });
         this.#hideServiceArea(serviceArea);
     }
 
     @action focusZone(zone) {
-        this.leafletMapManager.showLayer(zone.leafletLayer);
-        this.leafletMapManager.map.fitBounds(zone.leafletCoordinates, {
-            paddingBottomRight: [0, 0],
-            maxZoom: 15,
-            animate: true,
+        this.#showZone(zone, { pin: true });
+        if (zone.leafletCoordinates) {
+            this.mapManager.fitBounds(zone.leafletCoordinates, { paddingBottomRight: [0, 0], maxZoom: 15, animate: true });
+        }
+    }
+
+    #startDraftSession(mode, { serviceArea = null } = {}) {
+        this.#resetDraftSession();
+
+        this._draftSession = {
+            mode,
+            serviceArea,
+            draftLayer: null,
+        };
+
+        this.mapManager.showDrawControl({
+            tools: ['polygon', 'circle', 'rectangle'],
+            allowEdit: true,
+            allowDelete: true,
+            defaultMode: null,
         });
+
+        this._draftCreatedHandler = (payload) => {
+            this.#handleDraftCreated(payload);
+        };
+
+        this.mapManager.on('draw:created', this._draftCreatedHandler);
     }
 
-    /* eslint-disable no-empty */
-    async #editPolygonLayer(originalLayer, { focusBounds = null } = {}) {
-        const map = this.leafletMapManager.map;
-        const draw = this.leafletMapManager.drawControl;
-        const group = this.leafletMapManager.drawControlFeatureGroup;
-        if (!map || !draw || !group || !originalLayer) {
-            throw new Error('Geofence edit: map/draw/editGroup/layer not available');
-        }
+    #handleDraftCreated({ layer, geoJson }) {
+        if (!this._draftSession) return;
 
-        // Make layer visible if it wasn'e
-        this.leafletLayerVisibilityManager.showLayer(originalLayer);
-
-        // end any previous edit session cleanly
-        if (this._currentEdit) {
-            try {
-                draw?._toolbars?.edit?._modes?.edit?.handler?.disable();
-            } catch {}
-            try {
-                group.removeLayer(this._currentEdit.proxy);
-            } catch {}
-            // restore visibility of previous original
-            if (this._currentEdit.wasVisible !== false) {
-                this.leafletLayerVisibilityManager.showLayer(this._currentEdit.original);
-            }
-            this._currentEdit = null;
+        this._draftSession.draftLayer = layer;
+        this.mapManager.off('draw:created', this._draftCreatedHandler);
+        this._draftCreatedHandler = null;
+
+        if (this._draftSession.mode === 'service-area') {
+            const border = toMultiPolygon(geoJson);
+            this.serviceAreaActions.modal.create(
+                { border },
+                {
+                    decline: (modal) => {
+                        this.#resetDraftSession({ hideControl: true, removeDraft: true });
+                        modal.done?.();
+                    },
+                },
+                {
+                    callback: (serviceArea) => {
+                        this.#resetDraftSession({ hideControl: true, removeDraft: true });
+                        this.#showServiceArea(serviceArea);
+                    },
+                }
+            );
+            return;
         }
 
-        // Build a lightweight editable clone ("proxy") — DO NOT re-parent the original
-        // Keep style minimal; Draw handler only needs something editable.
-        const latlngs = originalLayer.getLatLngs?.();
-        if (!latlngs || !latlngs.length) {
-            throw new Error('Geofence edit: layer has no coordinates');
+        if (this._draftSession.mode === 'zone') {
+            const serviceArea = this._draftSession.serviceArea;
+            this.zoneActions.modal.create(
+                { border: geoJson, service_area_uuid: serviceArea.id },
+                {
+                    decline: (modal) => {
+                        this.#resetDraftSession({ hideControl: true, removeDraft: true });
+                        modal.done?.();
+                    },
+                },
+                {
+                    callback: (zone) => {
+                        serviceArea?.zones?.pushObject?.(zone);
+                        this.#resetDraftSession({ hideControl: true, removeDraft: true });
+                        this.#showZone(zone);
+                    },
+                }
+            );
+            return;
         }
 
-        const proxy = L.polygon(latlngs, {
-            // neutral styling so user sees edits; tweak to your theme if needed
-            color: originalLayer.options?.color || '#3388ff',
-            weight: 3,
-            opacity: 0.9,
-            fill: true,
-            fillOpacity: originalLayer.options?.fillOpacity ?? 0.2,
-        });
+        this.#openGenericLayerModal(geoJson);
+    }
+
+    #openGenericLayerModal(geoJson) {
+        this.modalsManager.show('modals/map-layer-form', {
+            title: 'Create new Layer',
+            modalClass: 'flb-resource-modal',
+            acceptButtonText: 'Create',
+            acceptButtonIcon: 'magic',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            layerTypes: ['Service Area', 'Zone'],
+            selectedLayerType: 'Service Area',
+            serviceAreaTypes: this.serviceAreas.serviceAreaTypes,
+            layerOptions: {
+                trigger_on_entry: false,
+                trigger_on_exit: false,
+                dwell_threshold_minutes: null,
+                speed_limit_kmh: null,
+                description: null,
+            },
+            confirm: (modal) => {
+                modal.startLoading();
+
+                const selectedLayerType = modal.getOption('selectedLayerType');
+                const layerOptions = modal.getOption('layerOptions') ?? {};
+                const selectedServiceArea = layerOptions.service_area;
+
+                if (selectedLayerType === 'Zone' && !selectedServiceArea) {
+                    this.notifications.error('Service Area required to create Zone!');
+                    modal.stopLoading?.();
+                    return;
+                }
+
+                const record = this.store.createRecord(dasherize(selectedLayerType), layerOptions);
+
+                if (selectedLayerType === 'Service Area') {
+                    record.setProperties({
+                        border: toMultiPolygon(geoJson),
+                        status: 'active',
+                    });
+                } else {
+                    record.setProperties({
+                        border: geoJson,
+                        service_area_uuid: selectedServiceArea.id,
+                        serviceArea: selectedServiceArea,
+                    });
+                }
 
-        // Hide original while editing so tooltips/hover don’t collide
-        const wasVisible = !originalLayer.__hidden;
-        this.leafletLayerVisibilityManager.hideLayer(originalLayer, { soft: false });
+                return record.save().then((savedRecord) => {
+                    this.#resetDraftSession({ hideControl: true, removeDraft: true });
 
-        // Add proxy to the edit FeatureGroup (this re-parents only the proxy)
-        group.addLayer(proxy);
+                    if (selectedLayerType === 'Service Area') {
+                        this.#showServiceArea(savedRecord);
+                    } else {
+                        selectedServiceArea?.zones?.pushObject?.(savedRecord);
+                        this.#showZone(savedRecord);
+                    }
+
+                    return savedRecord;
+                });
+            },
+            decline: (modal) => {
+                this.#resetDraftSession({ hideControl: true, removeDraft: true });
+                modal.done?.();
+            },
+        });
+    }
 
-        // Optional focus
-        if (focusBounds) {
-            try {
-                map.fitBounds(focusBounds, { paddingBottomRight: [0, 0], maxZoom: 16, animate: true });
-            } catch {}
+    #resetDraftSession({ hideControl = false, removeDraft = false } = {}) {
+        if (this._draftCreatedHandler) {
+            this.mapManager.off('draw:created', this._draftCreatedHandler);
+            this._draftCreatedHandler = null;
         }
 
-        // Enable edit mode just once for the group
-        this.leafletMapManager.showDrawControl?.();
-        const editHandler = draw?._toolbars?.edit?._modes?.edit?.handler;
-        if (!editHandler) throw new Error('Geofence edit: edit handler unavailable');
-        editHandler.enable();
-
-        this._currentEdit = { original: originalLayer, proxy, wasVisible };
-
-        return new Promise((resolve) => {
-            let settled = false;
-
-            const cleanup = (result) => {
-                if (settled) return;
-                settled = true;
-
-                // Disable edit mode
-                try {
-                    editHandler.disable();
-                } catch {}
-
-                // Remove proxy from group & map
-                try {
-                    group.removeLayer(proxy);
-                } catch {}
-                try {
-                    proxy.remove();
-                } catch {}
-
-                // Restore original visibility
-                if (wasVisible) {
-                    this.leafletLayerVisibilityManager.showLayer(originalLayer, { soft: false });
-                }
+        const draftLayer = this._draftSession?.draftLayer;
+        if (removeDraft && draftLayer) {
+            this.mapManager.removeLayer(draftLayer);
+        }
 
-                // Hide the toolbox again
-                this.leafletMapManager.hideDrawControl?.();
-
-                this._currentEdit = null;
-                resolve(result);
-            };
-
-            // User pressed the ✓ in the toolbar; Leaflet.draw emits draw:edited
-            const onEdited = (evt) => {
-                // Apply edited coords back to original
-                try {
-                    const edited = proxy.getLatLngs?.();
-                    if (edited?.length) {
-                        originalLayer.setLatLngs(edited);
-                        // force a redraw so ember-leaflet’s Polygon reflects new path
-                        originalLayer.redraw?.();
-                    }
-                } catch {}
-                cleanup({ type: 'edited', layer: originalLayer, proxy, event: evt });
-            };
+        if (hideControl) {
+            this.mapManager.hideDrawControl();
+        }
 
-            const onEditStop = () => {
-                // If user exits edit mode without applying, treat as cancel
-                cleanup({ type: 'cancel' });
-            };
+        this._draftSession = null;
+    }
 
-            map.once('draw:edited', onEdited);
-            map.once('draw:editstop', onEditStop);
-        });
+    async #editPolygonLayer(originalLayer, { focusBounds = null } = {}) {
+        return this.mapManager.editPolygon(originalLayer, { focusBounds });
     }
 
-    #showZone(zone) {
-        this.leafletLayerVisibilityManager.showModelLayer(zone);
+    #showZone(zone, { pin = false } = {}) {
+        const layer = this.mapManager.getOverlay(zone.id) ?? zone?.leafletLayer ?? null;
+        this.#setLayerPinned(layer, pin);
+        this.mapManager.showPolygon(zone.id);
     }
 
-    #showServiceArea(serviceArea) {
+    #showServiceArea(serviceArea, { pin = false } = {}) {
         [serviceArea, ...(serviceArea.zones ?? [])].forEach((model) => {
-            this.leafletLayerVisibilityManager.showModelLayer(model);
+            const layer = this.mapManager.getOverlay(model.id) ?? model?.leafletLayer ?? null;
+            this.#setLayerPinned(layer, pin);
+            this.mapManager.showPolygon(model.id);
         });
     }
 
     #hideServiceArea(serviceArea) {
         [serviceArea, ...(serviceArea.zones ?? [])].forEach((model) => {
-            this.leafletLayerVisibilityManager.hideModelLayer(model);
+            this.#setLayerPinned(model?.leafletLayer ?? this.mapManager.getOverlay(model.id), false);
+            this.mapManager.hidePolygon(model.id);
         });
     }
+
+    #setLayerPinned(layer, pinned = false) {
+        if (!layer) return;
+        layer.__pinnedByFocus = pinned;
+    }
 }