@fleetbase/fleetops-engine 0.2.9 → 0.3.1

package/addon/components/live-map.js

@@ -3,7 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action, set } from '@ember/object';
 import { isArray } from '@ember/array';
-import { dasherize, camelize } from '@ember/string';
+import { dasherize, camelize, classify } from '@ember/string';
 import { singularize } from 'ember-inflector';
 import { alias } from '@ember/object/computed';
 import { later } from '@ember/runloop';
@@ -106,120 +106,155 @@ export default class LiveMapComponent extends Component {
     /**
      * An array of routes.
      * @type {Array}
+     * @memberof LiveMapComponent
      */
     @tracked routes = [];
 
     /**
      * An array of drivers.
      * @type {Array}
+     * @memberof LiveMapComponent
      */
     @tracked drivers = [];
 
     /**
      * An array of vehicles.
      * @type {Array}
+     * @memberof LiveMapComponent
      */
     @tracked vehicles = [];
 
     /**
      * An array of places.
      * @type {Array}
+     * @memberof LiveMapComponent
      */
     @tracked places = [];
 
     /**
      * An array of channels.
      * @type {Array}
+     * @memberof LiveMapComponent
      */
     @tracked channels = [];
 
     /**
      * Indicates if data is loading.
      * @type {boolean}
+     * @memberof LiveMapComponent
      */
     @tracked isLoading = true;
 
     /**
      * Indicates if the component is ready.
      * @type {boolean}
+     * @memberof LiveMapComponent
      */
     @tracked isReady = false;
 
     /**
      * Controls for visibility.
      * @type {Object}
+     * @memberof LiveMapComponent
      */
-    @tracked visibilityControls = {};
+    @tracked visibilityControls = {
+        vehicles: true,
+        onlineVehicles: true,
+        offlineVehicles: true,
+        drivers: true,
+        onlineDrivers: true,
+        offlineDrivers: true,
+        places: true,
+    };
 
     /**
      * An array of active service areas.
      * @type {Array}
+     * @memberof LiveMapComponent
      */
     @tracked activeServiceAreas = [];
 
     /**
      * An array of editable map layers.
      * @type {Array}
+     * @memberof LiveMapComponent
      */
     @tracked editableLayers = [];
 
     /**
      * The Leaflet map instance.
      * @type {Object}
+     * @memberof LiveMapComponent
      */
     @tracked leafletMap;
 
     /**
      * The map's zoom level.
      * @type {number}
+     * @memberof LiveMapComponent
      */
     @tracked zoom = 12;
 
     /**
      * The feature group for drawing on the map.
      * @type {Object}
+     * @memberof LiveMapComponent
      */
     @tracked drawFeatureGroup;
 
     /**
      * The draw control for the map.
      * @type {Object}
+     * @memberof LiveMapComponent
      */
     @tracked drawControl;
 
     /**
      * The URL for the map's tile source.
      * @type {string}
+     * @memberof LiveMapComponent
      */
     @tracked tileSourceUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
 
     /**
      * The latitude for the map view.
      * @type {number}
+     * @memberof LiveMapComponent
      */
     @tracked latitude = DEFAULT_LATITUDE;
 
     /**
      * The longitude for the map view.
      * @type {number}
+     * @memberof LiveMapComponent
      */
     @tracked longitude = DEFAULT_LONGITUDE;
 
     /**
      * Indicates if coordinate setting should be skipped.
      * @type {boolean}
+     * @memberof LiveMapComponent
      */
     @tracked skipSetCoordinates = false;
 
+    /**
+     * Cache for storing original state of resource arrays.
+     * @type {Object.<string, Array>}
+     * @memberof LiveMapComponent
+     */
+    originalResources = {};
+
     /**
      * The user's latitude from the currentUser.
      * @type {number}
+     * @memberof LiveMapComponent
      */
     @alias('currentUser.latitude') userLatitude;
 
     /**
      * The user's longitude from the currentUser.
      * @type {number}
+     * @memberof LiveMapComponent
      */
     @alias('currentUser.longitude') userLongitude;
 
@@ -419,6 +454,8 @@ export default class LiveMapComponent extends Component {
                 this.triggerAction(callbackFnName);
                 this.createVisibilityControl(internalName);
                 this[internalName] = data;
+                // cache as resource
+                this.cacheOriginalResources(internalName);
 
                 if (typeof options.onLoaded === 'function') {
                     options.onLoaded(data);
@@ -477,7 +514,7 @@ export default class LiveMapComponent extends Component {
      */
     hide(name) {
         if (isArray(name)) {
-            return name.forEach(this.hide);
+            return name.forEach(this.hide.bind(this));
         }
 
         this.createVisibilityControl(name, false);
@@ -491,22 +528,180 @@ export default class LiveMapComponent extends Component {
      */
     show(name) {
         if (isArray(name)) {
-            return name.forEach(this.show);
+            return name.forEach(this.show.bind(this));
         }
 
         this.createVisibilityControl(name, true);
     }
 
+    /**
+     * Toggles the visibility of a control by its name.
+     * Calls `hide()` if the control is currently visible, and `show()` otherwise.
+     *
+     * @param {string} name - The name of the control to toggle.
+     * @memberof LiveMapComponent
+     */
+    toggleVisibility(name) {
+        if (this.isVisible(name)) {
+            this.hide(name);
+        } else {
+            this.show(name);
+        }
+    }
+
     /**
      * Check if a specific element or feature is currently visible based on its name.
      *
      * @param {string} name - The name of the element or feature to check visibility for.
      * @returns {boolean} Returns `true` if the element or feature is currently visible, `false` otherwise.
+     * @memberof LiveMapComponent
      */
     isVisible(name) {
         return this.visibilityControls[name] === true;
     }
 
+    /**
+     * Caches the original state of a resource array.
+     * @param {string} name - Name of the resource array (e.g., 'vehicles', 'drivers').
+     * @memberof LiveMapComponent
+     */
+    cacheOriginalResources(name) {
+        if (!this.originalResources[name]) {
+            this.originalResources[name] = [...this[name]];
+        }
+    }
+
+    /**
+     * Retrieves the original resources array for a given name.
+     * @param {string} name - Name of the resource array (e.g., 'vehicles', 'drivers').
+     * @returns {Array} - The original array of resources; an empty array if not set.
+     * @memberof LiveMapComponent
+     */
+    getOriginalResources(name) {
+        if (isArray(this.originalResources[name])) {
+            return this.originalResources[name];
+        }
+
+        return [];
+    }
+
+    /**
+     * Shows all online and offline resources for a given name.
+     * @param {string} name - Name of the resource array (e.g., 'vehicles', 'drivers').
+     * @memberof LiveMapComponent
+     */
+    showAllOnlineOffline(name) {
+        this.show(name);
+        this.showOnline(name);
+        this.showOffline(name);
+    }
+
+    /**
+     * Hides all online and offline resources for a given name.
+     * @param {string} name - Name of the resource array (e.g., 'vehicles', 'drivers').
+     * @memberof LiveMapComponent
+     */
+    hideAllOnlineOffline(name) {
+        this.hide(name);
+        this.hideOnline(name);
+        this.hideOffline(name);
+    }
+
+    /**
+     * Toggles the visibility of all online and offline resources for a given name.
+     * @param {string} name - Name of the resource array (e.g., 'vehicles', 'drivers').
+     * @memberof LiveMapComponent
+     */
+    toggleAllOnlineOffline(name) {
+        if (this.isVisible(name)) {
+            this.hideAllOnlineOffline(name);
+        } else {
+            this.showAllOnlineOffline(name);
+        }
+    }
+
+    /**
+     * Toggles the visibility of online resources for a given array.
+     * @method toggleOnline
+     * @param {string} name - The name of the resource array (e.g., 'vehicles', 'drivers').
+     * @memberof LiveMapComponent
+     */
+    toggleOnline(name) {
+        const visibilityControlName = `online${classify(name)}`;
+
+        if (this.isVisible(visibilityControlName)) {
+            this.hideOnline(name);
+        } else {
+            this.showOnline(name);
+        }
+    }
+
+    /**
+     * Toggles the visibility of offline resources for a given array.
+     * @method toggleOffline
+     * @param {string} name - The name of the resource array (e.g., 'vehicles', 'drivers').
+     * @memberof LiveMapComponent
+     */
+    toggleOffline(name) {
+        const visibilityControlName = `offline${classify(name)}`;
+
+        if (this.isVisible(visibilityControlName)) {
+            this.hideOffline(name);
+        } else {
+            this.showOffline(name);
+        }
+    }
+
+    /**
+     * Hides online resources from a given array and updates it.
+     * @method hideOnline
+     * @param {string} name - The name of the resource array (e.g., 'vehicles', 'drivers').
+     * @memberof LiveMapComponent
+     */
+    hideOnline(name) {
+        this[name] = this.getOriginalResources(name).filter((resource) => !resource.online);
+
+        // track with visibility controls
+        this.createVisibilityControl(`online${classify(name)}`, false);
+    }
+
+    /**
+     * Shows online resources from a given array and updates it.
+     * @method showOnline
+     * @param {string} name - The name of the resource array (e.g., 'vehicles', 'drivers').
+     * @memberof LiveMapComponent
+     */
+    showOnline(name) {
+        this[name] = this.getOriginalResources(name).filter((resource) => resource.online);
+
+        // track with visibility controls
+        this.createVisibilityControl(`online${classify(name)}`, true);
+    }
+
+    /**
+     * Hides offline resources from a specified array.
+     * @param {string} name - Name of the resource array (e.g., 'vehicles', 'drivers').
+     * @memberof LiveMapComponent
+     */
+    hideOffline(name) {
+        this[name] = this.getOriginalResources(name).filter((resource) => resource.online);
+
+        // track with visibility controls
+        this.createVisibilityControl(`offline${classify(name)}`, false);
+    }
+
+    /**
+     * Shows offline resources from a specified array.
+     * @param {string} name - Name of the resource array (e.g., 'vehicles', 'drivers').
+     * @memberof LiveMapComponent
+     */
+    showOffline(name) {
+        this[name] = this.getOriginalResources(name).filter((resource) => !resource.online);
+
+        // track with visibility controls
+        this.createVisibilityControl(`offline${classify(name)}`, true);
+    }
+
     /**
      * Toggles the context menu item for enabling/disabling draw controls.
      *
@@ -514,6 +709,7 @@ export default class LiveMapComponent extends Component {
      * @param {string} [options.onText='Hide draw controls...'] - Text to display when enabling draw controls.
      * @param {string} [options.offText='Enable draw controls...'] - Text to display when disabling draw controls.
      * @param {string} [options.callback=function] - Callback function to trigger after toggle.
+     * @memberof LiveMapComponent
      */
     toggleDrawControlContextMenuItem(options = {}) {
         const toggle = !this.isVisible('drawControls');
@@ -537,6 +733,7 @@ export default class LiveMapComponent extends Component {
      * Removes a specific service area from the context menu.
      *
      * @param {Object} serviceArea - The service area to be removed from the context menu.
+     * @memberof LiveMapComponent
      */
     removeServiceAreaFromContextMenu(serviceArea) {
         this.leafletContextmenuManager.removeItemFromContextMenu('map', `Focus Service Area: ${serviceArea.name}`);
@@ -547,6 +744,7 @@ export default class LiveMapComponent extends Component {
      *
      * @param {string} id - The ID of the Leaflet layer to retrieve.
      * @returns {Object|null} The found Leaflet layer or `null` if not found.
+     * @memberof LiveMapComponent
      */
     getLeafletLayerById(id) {
         return this.leafletMapManager.getLeafletLayerById(this.leafletMap, id);
@@ -557,6 +755,7 @@ export default class LiveMapComponent extends Component {
      *
      * @param {Function} callback - A callback function that defines the condition for finding the layer.
      * @returns {Object|null} The found Leaflet layer or `null` if not found.
+     * @memberof LiveMapComponent
      */
     findLeafletLayer(callback) {
         return this.leafletMapManager.findLeafletLayer(this.leafletMap, callback);
@@ -1183,7 +1382,7 @@ export default class LiveMapComponent extends Component {
         // Add Service Area Context Menu Items
         const serviceAreas = this.serviceAreas.getFromCache();
 
-        if (isArray(serviceAreas)) {
+        if (isArray(serviceAreas) && serviceAreas.length) {
             contextmenuItems.pushObject({
                 separator: true,
             });
@@ -1227,7 +1426,7 @@ export default class LiveMapComponent extends Component {
      * @memberof LiveMapComponent
      */
     @action createDriverContextMenu(driver, layer) {
-        const contextmenuItems = [
+        let contextmenuItems = [
             {
                 separator: true,
             },
@@ -1258,7 +1457,13 @@ export default class LiveMapComponent extends Component {
                     return {
                         text: menuItem.title,
                         callback: () => {
-                            return menuItem.onClick(driver, layer, menuItem);
+                            const callbackContext = {
+                                driver,
+                                layer,
+                                contextmenuService: this.leafletContextmenuManager,
+                                menuItem,
+                            };
+                            return menuItem.onClick(callbackContext);
                         },
                     };
                 }),
@@ -1309,7 +1514,13 @@ export default class LiveMapComponent extends Component {
                     return {
                         text: menuItem.title,
                         callback: () => {
-                            return menuItem.onClick(vehicle, layer, menuItem);
+                            const callbackContext = {
+                                vehicle,
+                                layer,
+                                contextmenuService: this.leafletContextmenuManager,
+                                menuItem,
+                            };
+                            return menuItem.onClick(callbackContext);
                         },
                     };
                 }),
@@ -1333,7 +1544,7 @@ export default class LiveMapComponent extends Component {
      * @memberof LiveMapComponent
      */
     @action createZoneContextMenu(zone, layer) {
-        const contextmenuItems = [
+        let contextmenuItems = [
             {
                 separator: true,
             },
@@ -1373,7 +1584,7 @@ export default class LiveMapComponent extends Component {
      * @memberof LiveMapComponent
      */
     @action createServiceAreaContextMenu(serviceArea, layer) {
-        const contextmenuItems = [
+        let contextmenuItems = [
             {
                 separator: true,
             },

package/addon/components/map-container/toolbar/visibility-control-panel.hbs

@@ -0,0 +1,66 @@
+<div class="next-dd-menu overflow-visible">
+    <div class="px-1">
+        <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1 text-gray-800 dark:text-gray-300">
+            Visibility Controls
+        </div>
+    </div>
+    <div class="next-dd-menu-seperator"></div>
+    <div class="px-1">
+        <a href="javascript:;" class="next-dd-item flex-row items-center justify-between relative" {{on "click" (fn this.triggerCallback "toggleVisibility" "places")}}>
+            <div class="flex flex-row items-center">
+                <div class="w-6">
+                    <FaIcon @icon="building" />
+                </div>
+                <span>
+                    {{#if (is-visibility-control-visible this.liveMap "places")}}
+                        Hide all places...
+                    {{else}}
+                        Show all places...
+                    {{/if}}
+                </span>
+            </div>
+            <div>
+                <Badge @status="info" @hideStatusDot={{true}} @spanClass="rounded-full -mr-2">{{this.liveMap.originalResources.places.length}}</Badge>
+            </div>
+        </a>
+        <BasicDropdownHover @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+            <dd.Trigger class="next-dd-item flex-row items-center justify-between relative {{if dd.isOpen 'active'}}">
+                <div class="flex flex-row items-center">
+                    <div class="w-6">
+                        <FaIcon @icon="car" />
+                    </div>
+                    <span>Vehicles</span>
+                </div>
+                <div>
+                    <Badge @status="info" @hideStatusDot={{true}} @spanClass="rounded-full -mr-2">{{this.liveMap.originalResources.vehicles.length}}</Badge>
+                </div>
+            </dd.Trigger>
+            <dd.Content>
+                <div class="next-dd-menu">
+                    <div class="px-1">
+                        <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1 text-gray-800 dark:text-gray-300 truncate">
+                            <FaIcon @icon="binoculars" class="mr-2" />
+                            <span>Vehicle Visibility Controls...</span>
+                        </div>
+                    </div>
+                    <div class="next-dd-menu-seperator"></div>
+                    <div class="px-1">
+                        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.triggerCallback "toggleAllOnlineOffline" "vehicles")}}>
+                            {{#if (is-visibility-control-visible this.liveMap "vehicles")}}
+                                Hide all vehicles...
+                            {{else}}
+                                Show all vehicles...
+                            {{/if}}
+                        </a>
+                        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.triggerCallback "showOnline" "vehicles")}}>
+                            Only show online vehicles...
+                        </a>
+                        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.triggerCallback "showOffline" "vehicles")}}>
+                            Only show offline vehicles...
+                        </a>
+                    </div>
+                </div>
+            </dd.Content>
+        </BasicDropdownHover>
+    </div>
+</div>

package/addon/components/map-container/toolbar/visibility-control-panel.js

@@ -0,0 +1,74 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { classify } from '@ember/string';
+import { calculateInPlacePosition } from 'ember-basic-dropdown/utils/calculate-position';
+
+/**
+ * @class MapContainerToolbarVisibilityControlPanelComponent
+ * @extends {Component}
+ * @memberof @fleetbase/fleetops-engine
+ */
+export default class MapContainerToolbarVisibilityControlPanelComponent extends Component {
+    /**
+     * Reference to the map instance.
+     * @type {L.Map}
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
+    @tracked map;
+
+    /**
+     * Reference to the live map component instance.
+     * @type {LiveMapComponent}
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
+    @tracked liveMap;
+
+    /**
+     * Class constructor.
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.map = this.args.map;
+        this.liveMap = this.args.liveMap;
+    }
+
+    /**
+     * Calculate position for dropdown.
+     * @param {Element} trigger The triggering element
+     * @returns {Object} Position style object
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
+    @action calculatePosition(trigger) {
+        const position = calculateInPlacePosition(...arguments);
+        const rect = trigger.getBoundingClientRect();
+
+        position.style.top = '-0.5rem';
+        position.style.left = `calc(${rect.width}px + 0.75rem)`;
+
+        return position;
+    }
+
+    /**
+     * Generic callback trigger function.
+     * @param {string} callbackFn Callback function name
+     * @param {...any} params Parameters for the callback function
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
+    @action triggerCallback(callbackFn, ...params) {
+        const tryInvoke = (context, fnName) => {
+            if (context && typeof context[fnName] === 'function') {
+                context[fnName](...params);
+            }
+        };
+
+        tryInvoke(this, callbackFn);
+        tryInvoke(this.args, callbackFn);
+        tryInvoke(this.liveMap, callbackFn);
+
+        // Additional check for event callback function in args
+        const eventCallbackFn = `on${classify(callbackFn)}`;
+        tryInvoke(this.args, eventCallbackFn);
+    }
+}

package/addon/components/map-container/toolbar/zones-panel.hbs

@@ -1,4 +1,4 @@
-<div class="next-dd-menu overflow-visible" {{did-insert this.setupZonesPanel}}>
+<div class="next-dd-menu overflow-visible">
     <div class="px-1">
         <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1 text-gray-800 dark:text-gray-300">
             Service Areas
@@ -6,9 +6,9 @@
     </div>
     <div class="next-dd-menu-seperator"></div>
     <div class="px-1">
-        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.serviceAreaAction "createServiceArea" @dd)}}>Create new service area...</a>
-        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.liveMapAction "focusAllServiceAreas" @dd)}}>Show all service areas</a>
-        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.liveMapAction "blurAllServiceAreas" @dd)}}>Hide all service areas</a>
+        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn @dd this.triggerCallback "createServiceArea")}}>Create new service area...</a>
+        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn @dd this.triggerCallback "focusAllServiceAreas")}}>Show all service areas</a>
+        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn @dd this.triggerCallback "blurAllServiceAreas")}}>Hide all service areas</a>
         {{#each this.serviceAreaRecords as |serviceArea|}}
             <BasicDropdownHover @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
                 <dd.Trigger class="next-dd-item {{if dd.isOpen 'active'}}">
@@ -25,13 +25,13 @@
                         </div>
                         <div class="next-dd-menu-seperator"></div>
                         <div class="px-1">
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.liveMapAction "focusServiceArea" dd serviceArea)}}>Focus {{serviceArea.name}}...</a>
-                            {{#if (eq serviceArea this.activeServiceArea)}}
-                                <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.liveMapAction "blurServiceArea" dd serviceArea)}}>Blur service area...</a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.triggerCallback "focusServiceArea" serviceArea)}}>Focus {{serviceArea.name}}...</a>
+                            {{#if (eq serviceArea this.liveMap.activeServiceArea)}}
+                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.triggerCallback "blurServiceArea" serviceArea)}}>Blur service area...</a>
                             {{/if}}
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.serviceAreaAction "createZone" dd serviceArea)}}>Create zone inside...</a>
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.serviceAreaAction "editServiceAreaDetails" dd serviceArea)}}>Edit {{serviceArea.name}}...</a>
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.serviceAreaAction "deleteServiceArea" dd serviceArea)}}>Delete {{serviceArea.name}}...</a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.triggerCallback "createZone" serviceArea)}}>Create zone inside...</a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.triggerCallback "editServiceAreaDetails" serviceArea)}}>Edit {{serviceArea.name}}...</a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.triggerCallback "deleteServiceArea" serviceArea)}}>Delete {{serviceArea.name}}...</a>
                         </div>
                     </div>
                 </dd.Content>