@fleetbase/fleetops-engine 0.2.8 → 0.3.0

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>

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

@@ -2,30 +2,82 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
-import { alias } from '@ember/object/computed';
+import { classify } from '@ember/string';
 import { calculateInPlacePosition } from 'ember-basic-dropdown/utils/calculate-position';
 
+/**
+ * @class MapContainerToolbarZonesPanelComponent
+ * @extends {Component}
+ * @memberof @fleetbase/fleetops-engine
+ */
 export default class MapContainerToolbarZonesPanelComponent extends Component {
+    /**
+     * Ember Data store service.
+     * @type {Service}
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
     @service store;
-    @service modalsManager;
-    @service notifications;
-    @service crud;
+
+    /**
+     * Service areas service.
+     * @type {Service}
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
     @service serviceAreas;
+
+    /**
+     * Application cache service.
+     * @type {Service}
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
     @service appCache;
 
+    /**
+     * Indicates if the component is in a loading state.
+     * @type {boolean}
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
     @tracked isLoading = false;
+
+    /**
+     * Holds the records for service areas.
+     * @type {Array}
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
     @tracked serviceAreaRecords = [];
-    @tracked editableLayers = [];
-    @tracked serviceAreaTypes = ['neighborhood', 'city', 'region', 'state', 'province', 'country', 'continent'];
-    @alias('args.map') leafletMap;
-    @alias('args.map.liveMap.activeServiceArea') activeServiceArea;
-    @alias('args.map.liveMap.activeFeatureGroup') activeFeatureGroup;
 
-    @action setupZonesPanel() {
+    /**
+     * 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;
         this.fetchServiceAreas();
-        this.serviceAreas.setMapInstance(this.leafletMap);
+        this.serviceAreas.setMapInstance(this.args.map);
     }
 
+    /**
+     * 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();
@@ -36,64 +88,41 @@ export default class MapContainerToolbarZonesPanelComponent extends Component {
         return position;
     }
 
-    @action onAction(actionName, dd, ...params) {
-        if (typeof dd?.actions?.close === 'function') {
-            dd.actions.close();
-        }
-
-        if (typeof this[actionName] === 'function') {
-            this[actionName](...params);
-        }
-
-        if (typeof this.args[actionName] === 'function') {
-            this.args[actionName](...params);
-        }
-
-        if (typeof this.args[`on${actionName?.toUpperCase()}`] === 'function') {
-            this.args[`on${actionName?.toUpperCase()}`](...params);
-        }
-    }
-
-    @action serviceAreaAction(actionName, dropdown, ...params) {
-        const { dd } = this.args;
-
-        if (typeof dd?.actions?.close === 'function') {
-            dd.actions.close();
-        }
-
-        if (typeof dropdown?.actions?.close === 'function') {
-            dropdown.actions.close();
-        }
-
-        if (typeof this.serviceAreas[actionName] === 'function') {
-            this.serviceAreas[actionName](...params);
-        }
-    }
-
-    @action liveMapAction(actionName, dropdown, ...params) {
-        const { dd } = this.args;
-
-        if (typeof dd?.actions?.close === 'function') {
-            dd.actions.close();
-        }
-
-        if (typeof dropdown?.actions?.close === 'function') {
-            dropdown.actions.close();
-        }
-
-        if (typeof this.leafletMap?.liveMap[actionName] === 'function') {
-            this.leafletMap?.liveMap[actionName](...params);
-        }
+    /**
+     * 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);
+        tryInvoke(this.serviceAreas, callbackFn);
+
+        // Additional check for event callback function in args
+        const eventCallbackFn = `on${classify(callbackFn)}`;
+        tryInvoke(this.args, eventCallbackFn);
     }
 
-    @action fetchServiceAreas() {
+    /**
+     * Fetch service areas and update state.
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
+    fetchServiceAreas() {
         this.isLoading = true;
 
         if (this.appCache.has('serviceAreas')) {
             this.serviceAreaRecords = this.appCache.getEmberData('serviceAreas', 'service-area');
         }
 
-        this.store
+        return this.store
             .query('service-area', { with: ['zones'] })
             .then((serviceAreaRecords) => {
                 this.serviceAreaRecords = serviceAreaRecords;

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

@@ -44,14 +44,19 @@
                 </Attach::Tooltip>
             </dd.Trigger>
             <dd.Content>
-                <MapContainer::Toolbar::ZonesPanel @dd={{dd}} @map={{@map}} @onPressCreateServiceArea={{@onPressCreateServiceArea}} />
+                <MapContainer::Toolbar::ZonesPanel @dd={{dd}} @liveMap={{@liveMap}} @map={{@map}} @onPressCreateServiceArea={{@onPressCreateServiceArea}} />
+            </dd.Content>
+        </BasicDropdown>
+        <BasicDropdown @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+            <dd.Trigger class="toolbar-button">
+                <FaIcon @icon="eye" />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                    <InputInfo @text="Visibility Controls" @iconClass="hidden" class="{{if dd.isOpen 'hidden'}} py-1 px-2 bg-gray-900 -mt-1" />
+                </Attach::Tooltip>
+            </dd.Trigger>
+            <dd.Content>
+                <MapContainer::Toolbar::VisibilityControlPanel @dd={{dd}} @liveMap={{@liveMap}} @map={{@map}} />
             </dd.Content>
         </BasicDropdown>
-        <button type="button" class="toolbar-button relative" {{on "click" (fn this.onAction "onPressDisplayPlaces")}}>
-            <FaIcon @icon="city" />
-            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                <InputInfo @text="Toggle Places" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
-            </Attach::Tooltip>
-        </button>
     </div>
 </MapContainer::ToolbarContainer>