@fleetbase/fleetops-engine 0.6.17 → 0.6.19

package/addon/components/layout/fleet-ops-sidebar/fleet-listing.js

@@ -2,60 +2,62 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
-import { later } from '@ember/runloop';
 import { task } from 'ember-concurrency';
 
 export default class LayoutFleetOpsSidebarFleetListingComponent extends Component {
     @service store;
     @service universe;
-    @service contextPanel;
     @service vehicleActions;
+    @service leafletMapManager;
     @service hostRouter;
     @service abilities;
     @service notifications;
+    @service intl;
     @tracked fleets = [];
 
+    get dropdownButtonActions() {
+        return [
+            {
+                label: this.intl.t('common.view-resource-details', { resource: this.intl.t('resource.vehicle') }),
+                onClick: (vehicle) => {
+                    this.vehicleActions.panel.view(vehicle);
+                },
+            },
+            {
+                label: this.intl.t('common.edit-resource-details', { resource: this.intl.t('resource.vehicle') }),
+                onClick: (vehicle) => {
+                    this.vehicleActions.panel.edit(vehicle, { useDefaultSaveTask: true });
+                },
+            },
+            {
+                label: this.intl.t('vehicle.actions.locate-vehicle'),
+                onClick: (vehicle) => {
+                    // If currently on the operations dashboard focus driver on the map
+                    if (typeof this.hostRouter.currentRouteName === 'string' && this.hostRouter.currentRouteName.startsWith('console.fleet-ops.operations.orders')) {
+                        return this.onVehicleClicked(vehicle);
+                    }
+
+                    this.vehicleActions.locate(vehicle);
+                },
+            },
+            {
+                separator: true,
+            },
+            {
+                label: this.intl.t('common.delete-resource', { resource: this.intl.t('resource.vehicle') }),
+                onClick: (vehicle) => {
+                    this.vehicleActions.delete(vehicle);
+                },
+            },
+        ];
+    }
+
     constructor() {
         super(...arguments);
         this.fetchFleets.perform();
         this.listenForChanges();
     }
 
-    dropdownButtonActions = [
-        {
-            label: 'View vehicle details...',
-            onClick: (vehicle) => {
-                this.contextPanel.focus(vehicle);
-            },
-        },
-        {
-            label: 'Edit vehicle...',
-            onClick: (vehicle) => {
-                this.contextPanel.focus(vehicle, 'editing');
-            },
-        },
-        {
-            label: 'Locate vehicle...',
-            onClick: (vehicle) => {
-                // If currently on the operations dashboard focus driver on the map
-                if (typeof this.hostRouter.currentRouteName === 'string' && this.hostRouter.currentRouteName.startsWith('console.fleet-ops.operations.orders')) {
-                    return this.onVehicleClicked(vehicle);
-                }
-
-                this.vehicleActions.locate(vehicle);
-            },
-        },
-        {
-            separator: true,
-        },
-        {
-            label: 'Delete vehicle...',
-            onClick: (vehicle) => {
-                this.vehicleActions.delete(vehicle);
-            },
-        },
-    ];
-
     @action transitionToRoute(toggleApiContext) {
         if (typeof this.args.route === 'string') {
             if (typeof this.hostRouter.currentRouteName === 'string' && this.hostRouter.currentRouteName.startsWith('console.fleet-ops.management.fleets.index')) {
@@ -68,19 +70,6 @@ export default class LayoutFleetOpsSidebarFleetListingComponent extends Componen
         }
     }
 
-    @action onVehicleClicked(vehicle) {
-        // Transition to dashboard/map display
-        return this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index', { queryParams: { layout: 'map' } }).then(() => {
-            // Focus vehicle on live map
-            this.focusVehicleOnMap(vehicle);
-
-            // Fire callback
-            if (typeof this.args.onFocusVehicle === 'function') {
-                this.args.onFocusVehicle(vehicle);
-            }
-        });
-    }
-
     @action calculateDropdownItemPosition(trigger) {
         let { top, left, width } = trigger.getBoundingClientRect();
         let style = {
@@ -91,27 +80,43 @@ export default class LayoutFleetOpsSidebarFleetListingComponent extends Componen
         return { style };
     }
 
-    @action focusVehicleOnMap(vehicle) {
-        const liveMap = this.universe.get('component:fleet-ops:live-map');
-
-        if (liveMap) {
-            if (liveMap.contextPanel) {
-                liveMap.contextPanel.clear();
-            }
+    /* eslint-disable no-empty */
+    @action async onVehicleClicked(vehicle) {
+        try {
+            await this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index', { queryParams: { layout: 'map' } });
+        } catch {}
 
-            liveMap.showAll();
-            liveMap.focusLayerByRecord(vehicle, 16, {
-                onAfterFocusWithRecord: function () {
-                    later(
-                        this,
-                        () => {
-                            liveMap.onVehicleClicked(vehicle);
-                        },
-                        600 * 2
-                    );
-                },
+        if (this.leafletMapManager._livemap?.isReady()) {
+            this.focusVehicleOnMap(vehicle);
+        } else {
+            this.universe.one('fleet-ops.live-map.on-loaded', () => {
+                this.focusVehicleOnMap(vehicle);
             });
         }
+
+        if (typeof this.args.onFocusVehicle === 'function') {
+            this.args.onFocusVehicle(vehicle);
+        }
+    }
+
+    @action async focusVehicleOnMap(vehicle) {
+        await this.leafletMapManager.ensureInteractive({ timeoutMs: 8000 });
+        this.leafletMapManager.flyToRecordLayer(vehicle, 16, {
+            paddingBottomRight: [300, 200],
+            moveend: () => {
+                this.vehicleActions.panel.view(vehicle, { closeOnTransition: true });
+            },
+        });
+    }
+
+    @task *fetchFleets() {
+        if (this.abilities.cannot('fleet-ops list fleet')) return;
+
+        try {
+            this.fleets = yield this.store.query('fleet', { with: ['vehicles', 'subfleets'], parents_only: true });
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
     }
 
     listenForChanges() {
@@ -135,16 +140,4 @@ export default class LayoutFleetOpsSidebarFleetListingComponent extends Componen
             this.fetchFleets.perform();
         });
     }
-
-    @task *fetchFleets() {
-        if (this.abilities.cannot('fleet-ops list fleet')) {
-            return;
-        }
-
-        try {
-            this.fleets = yield this.store.query('fleet', { with: ['vehicles', 'subfleets'], parents_only: true });
-        } catch (error) {
-            this.notifications.serverError(error);
-        }
-    }
 }

package/addon/components/layout/fleet-ops-sidebar.hbs

@@ -1,6 +1,6 @@
 <div id="create-order-button-menu-wrapper" class="create-order-menu-button-wrapper mb-2">
     <Button
-        @text={{t "fleet-ops.component.layout.fleet-ops-sidebar.title"}}
+        @text={{t "common.create-new-resource" resource=(lowercase (t "resource.order"))}}
         @type="primary"
         @size="xs"
         @icon="paper-plane"
@@ -21,6 +21,11 @@
             @onClick={{fn this.universe.transitionMenuItem (concat this.routePrefix "virtual") menuItem}}
             @menuItem={{menuItem}}
             @icon={{menuItem.icon}}
+            @iconComponent={{menuItem.iconComponent}}
+            @iconComponentOptions={{menuItem.iconComponentOptions}}
+            @iconSize={{menuItem.iconSize}}
+            @iconPrefix={{menuItem.iconPrefix}}
+            @iconClass={{menuItem.iconClass}}
             @rightSideComponent={{menuItem.rightSideComponent}}
             @rightSideComponentContext={{menuItem.rightSideComponentContext}}
             @rightSideStatus={{menuItem.rightSideStatus}}
@@ -49,6 +54,8 @@
         @open={{menuPanel.open}}
         @title={{if menuPanel.intl (t menuPanel.intl) menuPanel.title}}
         @titleIcon={{menuPanel.icon}}
+        @caretLeft={{true}}
+        @caretIcon="caret"
         @hideCaret={{menuPanel.hideCaret}}
         @toggleOnCaretOnly={{menuPanel.toggleOnCaretOnly}}
         @onClickPanelTitle={{menuPanel.onClickPanelTitle}}
@@ -58,6 +65,7 @@
         @dropdownButtonRenderInPlace={{menuPanel.dropdownButtonRenderInPlace}}
         @dropdownHorizontalPosition={{menuPanel.dropdownHorizontalPosition}}
         @dropdownButtonMenuLabel={{menuPanel.dropdownButtonMenuLabel}}
+        @onToggle={{menuPanel.onToggle}}
     >
         {{#each menuPanel.items as |menuItem|}}
             {{#if menuItem.renderComponentInPlace}}
@@ -68,6 +76,11 @@
                     onClick=menuItem.onClick
                     route=(concat this.routePrefix menuItem.route)
                     icon=menuItem.icon
+                    iconComponent=menuItem.iconComponent
+                    iconComponentOptions=menuItem.iconComponentOptions
+                    iconSize=menuItem.iconSize
+                    iconPrefix=menuItem.iconPrefix
+                    iconClass=menuItem.iconClass
                     rightSideComponent=menuItem.rightSideComponent
                     rightSideComponentContext=menuItem.rightSideComponentContext
                     rightSideStatus=menuItem.rightSideStatus
@@ -94,6 +107,11 @@
                     @onClick={{menuItem.onClick}}
                     @route={{concat this.routePrefix menuItem.route}}
                     @icon={{menuItem.icon}}
+                    @iconComponent={{menuItem.iconComponent}}
+                    @iconComponentOptions={{menuItem.iconComponentOptions}}
+                    @iconSize={{menuItem.iconSize}}
+                    @iconPrefix={{menuItem.iconPrefix}}
+                    @iconClass={{menuItem.iconClass}}
                     @rightSideComponent={{menuItem.rightSideComponent}}
                     @rightSideComponentContext={{menuItem.rightSideComponentContext}}
                     @rightSideStatus={{menuItem.rightSideStatus}}
@@ -126,6 +144,11 @@
                         @onClick={{fn this.universe.transitionMenuItem (concat this.routePrefix "virtual") menuItem}}
                         @menuItem={{menuItem}}
                         @icon={{menuItem.icon}}
+                        @iconComponent={{menuItem.iconComponent}}
+                        @iconComponentOptions={{menuItem.iconComponentOptions}}
+                        @iconSize={{menuItem.iconSize}}
+                        @iconPrefix={{menuItem.iconPrefix}}
+                        @iconClass={{menuItem.iconClass}}
                         @rightSideComponent={{menuItem.rightSideComponent}}
                         @rightSideComponentContext={{menuItem.rightSideComponentContext}}
                         @rightSideStatus={{menuItem.rightSideStatus}}
@@ -157,6 +180,8 @@
         @open={{menuPanel.open}}
         @title={{if menuPanel.intl (t menuPanel.intl) menuPanel.title}}
         @titleIcon={{menuPanel.icon}}
+        @caretLeft={{true}}
+        @caretIcon="caret"
         @hideCaret={{menuPanel.hideCaret}}
         @toggleOnCaretOnly={{menuPanel.toggleOnCaretOnly}}
         @onClickPanelTitle={{menuPanel.onClickPanelTitle}}
@@ -172,6 +197,11 @@
                 @onClick={{fn this.universe.transitionMenuItem (concat this.routePrefix "virtual") menuItem}}
                 @menuItem={{menuItem}}
                 @icon={{menuItem.icon}}
+                @iconComponent={{menuItem.iconComponent}}
+                @iconComponentOptions={{menuItem.iconComponentOptions}}
+                @iconSize={{menuItem.iconSize}}
+                @iconPrefix={{menuItem.iconPrefix}}
+                @iconClass={{menuItem.iconClass}}
                 @rightSideComponent={{menuItem.rightSideComponent}}
                 @rightSideComponentContext={{menuItem.rightSideComponentContext}}
                 @rightSideStatus={{menuItem.rightSideStatus}}

package/addon/components/layout/fleet-ops-sidebar.js

@@ -7,10 +7,10 @@ import DriverListingComponent from './fleet-ops-sidebar/driver-listing';
 
 export default class LayoutFleetOpsSidebarComponent extends Component {
     @service universe;
-    @service contextPanel;
     @service store;
     @service intl;
     @service abilities;
+    @service appCache;
     @tracked routePrefix = 'console.fleet-ops.';
     @tracked menuPanels = [];
     @tracked universeMenuItems = [];
@@ -30,35 +30,36 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
         this.universeSettingsMenuItems = registeredMenuItems.filter((menuItem) => menuItem.section === 'settings');
     }
 
+    /* eslint-disable no-unused-vars */
     createMenuPanels() {
         const operationsItems = [
             {
-                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.dashboard',
-                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.dashboard'),
+                intl: 'menu.dashboard',
+                title: this.intl.t('menu.dashboard'),
                 icon: 'home',
                 route: 'operations.orders',
                 permission: 'fleet-ops list order',
                 visible: this.abilities.can('fleet-ops see order'),
             },
             {
-                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.service-rates',
-                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.service-rates'),
+                intl: 'menu.service-rates',
+                title: this.intl.t('menu.service-rates'),
                 icon: 'file-invoice-dollar',
                 route: 'operations.service-rates',
                 permission: 'fleet-ops list service-rate',
                 visible: this.abilities.can('fleet-ops see service-rate'),
             },
             {
-                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.scheduler',
-                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.scheduler'),
+                intl: 'menu.scheduler',
+                title: this.intl.t('menu.scheduler'),
                 icon: 'calendar-day',
                 route: 'operations.scheduler',
                 permission: 'fleet-ops list order',
                 visible: this.abilities.can('fleet-ops see order'),
             },
             {
-                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.order-config',
-                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.order-config'),
+                intl: 'menu.order-config',
+                title: this.intl.t('menu.order-config'),
                 icon: 'diagram-project',
                 route: 'operations.order-config',
                 permission: 'fleet-ops list order-config',
@@ -68,8 +69,8 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
 
         const resourcesItems = [
             {
-                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.drivers',
-                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.drivers'),
+                intl: 'menu.drivers',
+                title: this.intl.t('menu.drivers'),
                 icon: 'id-card',
                 route: 'management.drivers',
                 renderComponentInPlace: true,
@@ -78,16 +79,16 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see driver'),
             },
             {
-                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.vehicles',
-                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.vehicles'),
+                intl: 'menu.vehicles',
+                title: this.intl.t('menu.vehicles'),
                 icon: 'truck',
                 route: 'management.vehicles',
                 permission: 'fleet-ops list vehicle',
                 visible: this.abilities.can('fleet-ops see vehicle'),
             },
             {
-                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.fleets',
-                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.fleets'),
+                intl: 'menu.fleets',
+                title: this.intl.t('menu.fleets'),
                 icon: 'user-group',
                 route: 'management.fleets',
                 renderComponentInPlace: true,
@@ -96,40 +97,40 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see fleet'),
             },
             {
-                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.vendors',
-                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.vendors'),
+                intl: 'menu.vendors',
+                title: this.intl.t('menu.vendors'),
                 icon: 'warehouse',
                 route: 'management.vendors',
                 permission: 'fleet-ops list vendor',
                 visible: this.abilities.can('fleet-ops see vendor'),
             },
             {
-                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.contacts',
-                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.contacts'),
+                intl: 'menu.contacts',
+                title: this.intl.t('menu.contacts'),
                 icon: 'address-book',
                 route: 'management.contacts',
                 permission: 'fleet-ops list contact',
                 visible: this.abilities.can('fleet-ops see contact'),
             },
             {
-                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.places',
-                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.places'),
+                intl: 'menu.places',
+                title: this.intl.t('menu.places'),
                 icon: 'location-dot',
                 route: 'management.places',
                 permission: 'fleet-ops list place',
                 visible: this.abilities.can('fleet-ops see place'),
             },
             {
-                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.fuel-reports',
-                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.fuel-reports'),
+                intl: 'menu.fuel-reports',
+                title: this.intl.t('menu.fuel-reports'),
                 icon: 'gas-pump',
                 route: 'management.fuel-reports',
                 permission: 'fleet-ops list fuel-report',
                 visible: this.abilities.can('fleet-ops see fuel-report'),
             },
             {
-                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.issues',
-                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.issues'),
+                intl: 'menu.issues',
+                title: this.intl.t('menu.issues'),
                 icon: 'triangle-exclamation',
                 route: 'management.issues',
                 permission: 'fleet-ops list issue',
@@ -137,53 +138,164 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             },
         ];
 
+        const connectivityItems = [
+            {
+                intl: 'menu.telematics',
+                title: this.intl.t('menu.telematics'),
+                icon: 'satellite-dish',
+                route: 'connectivity.telematics',
+                permission: 'fleet-ops list telematic',
+                visible: this.abilities.can('fleet-ops see telematic'),
+            },
+            {
+                intl: 'menu.devices',
+                title: this.intl.t('menu.devices'),
+                icon: 'hard-drive',
+                route: 'connectivity.devices',
+                permission: 'fleet-ops list device',
+                visible: this.abilities.can('fleet-ops see device'),
+            },
+            {
+                intl: 'menu.sensors',
+                title: this.intl.t('menu.sensors'),
+                icon: 'temperature-full',
+                route: 'connectivity.sensors',
+                permission: 'fleet-ops list sensor',
+                visible: this.abilities.can('fleet-ops see sensor'),
+            },
+            {
+                intl: 'menu.events',
+                title: this.intl.t('menu.events'),
+                icon: 'stream',
+                route: 'connectivity.events',
+                permission: 'fleet-ops list device-event',
+                visible: this.abilities.can('fleet-ops see device-event'),
+            },
+            {
+                intl: 'menu.tracking',
+                title: this.intl.t('menu.tracking'),
+                icon: 'map-marked-alt',
+                route: 'connectivity.tracking',
+                permission: 'fleet-ops list device',
+                visible: this.abilities.can('fleet-ops see device'),
+            },
+        ];
+
+        const maintenanceItems = [
+            {
+                intl: 'menu.work-orders',
+                title: this.intl.t('menu.work-orders'),
+                icon: 'clipboard-list',
+                route: 'maintenance.work-orders',
+                permission: 'fleet-ops list work-order',
+                visible: this.abilities.can('fleet-ops see work-order'),
+            },
+            {
+                intl: 'menu.equipment',
+                title: this.intl.t('menu.equipment'),
+                icon: 'trailer',
+                route: 'maintenance.equipment',
+                permission: 'fleet-ops list equipment',
+                visible: this.abilities.can('fleet-ops see equipment'),
+            },
+            {
+                intl: 'menu.parts',
+                title: this.intl.t('menu.parts'),
+                icon: 'cog',
+                route: 'maintenance.parts',
+                permission: 'fleet-ops list part',
+                visible: this.abilities.can('fleet-ops see part'),
+            },
+        ];
+
+        const analyticsItems = [
+            {
+                intl: 'menu.reports',
+                title: this.intl.t('menu.reports'),
+                icon: 'file-import',
+                route: 'analytics.reports',
+                permission: 'iam list report',
+                visible: this.abilities.can('fleet-ops see report'),
+            },
+        ];
+
         const settingsItems = [
             {
-                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.navigator-app',
-                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.navigator-app'),
+                intl: 'menu.navigator-app',
+                title: this.intl.t('menu.navigator-app'),
                 icon: 'location-arrow',
                 route: 'settings.navigator-app',
                 permission: 'fleet-ops view navigator-settings',
                 visible: this.abilities.can('fleet-ops see navigator-settings'),
             },
             {
-                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.payments',
-                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.payments'),
+                intl: 'menu.payments',
+                title: this.intl.t('menu.payments'),
                 icon: 'cash-register',
                 route: 'settings.payments',
                 permission: 'fleet-ops view payments',
                 visible: this.abilities.can('fleet-ops see payments'),
             },
             {
-                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.notifications',
-                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.notifications'),
+                intl: 'menu.notifications',
+                title: this.intl.t('menu.notifications'),
                 icon: 'bell',
                 route: 'settings.notifications',
                 permission: 'fleet-ops view notification-settings',
                 visible: this.abilities.can('fleet-ops see notification-settings'),
             },
             {
-                intl: 'fleet-ops.component.layout.fleet-ops-sidebar.routing',
-                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.routing'),
+                intl: 'menu.routing',
+                title: this.intl.t('menu.routing'),
                 icon: 'route',
                 route: 'settings.routing',
                 permission: 'fleet-ops view routing-settings',
                 visible: this.abilities.can('fleet-ops see routing-settings'),
             },
+            {
+                intl: 'menu.custom-fields',
+                title: this.intl.t('menu.custom-fields'),
+                icon: 'rectangle-list',
+                route: 'settings.custom-fields',
+                permission: 'fleet-ops view custom-field',
+                visible: this.abilities.can('fleet-ops see custom-field'),
+            },
         ];
 
-        const createPanel = (intl, routePrefix, items = []) => ({
+        const createPanel = (intl, routePrefix, items = [], options = {}) => ({
             intl,
             title: this.intl.t(intl),
             routePrefix,
-            open: true,
+            open: options.open ?? true,
             items,
+            onToggle: options.onToggle,
         });
 
         this.menuPanels = this.removeEmptyMenuPanels([
-            createPanel('fleet-ops.component.layout.fleet-ops-sidebar.operations', 'operations', operationsItems),
-            createPanel('fleet-ops.component.layout.fleet-ops-sidebar.resources', 'management', resourcesItems),
-            createPanel('fleet-ops.component.layout.fleet-ops-sidebar.settings', 'settings', settingsItems),
+            createPanel('menu.operations', 'operations', operationsItems, {
+                open: this.appCache.get('fleet-ops:sidebar:operations:open', true),
+                onToggle: (open) => this.appCache.set('fleet-ops:sidebar:operations:open', open),
+            }),
+            createPanel('menu.resources', 'management', resourcesItems, {
+                open: this.appCache.get('fleet-ops:sidebar:management:open', true),
+                onToggle: (open) => this.appCache.set('fleet-ops:sidebar:management:open', open),
+            }),
+            // createPanel('menu.maintenance', 'maintenance', maintenanceItems, {
+            //     open: this.appCache.get('fleet-ops:sidebar:maintenance:open', false),
+            //     onToggle: (open) => this.appCache.set('fleet-ops:sidebar:maintenance:open', open),
+            // }),
+            // createPanel('menu.connectivity', 'connectivity', connectivityItems, {
+            //     open: this.appCache.get('fleet-ops:sidebar:connectivity:open', false),
+            //     onToggle: (open) => this.appCache.set('fleet-ops:sidebar:connectivity:open', open),
+            // }),
+            createPanel('menu.analytics', 'analytics', analyticsItems, {
+                open: this.appCache.get('fleet-ops:sidebar:analytics:open', false),
+                onToggle: (open) => this.appCache.set('fleet-ops:sidebar:analytics:open', open),
+            }),
+            createPanel('menu.settings', 'settings', settingsItems, {
+                open: this.appCache.get('fleet-ops:sidebar:settings:open', true),
+                onToggle: (open) => this.appCache.set('fleet-ops:sidebar:settings:open', open),
+            }),
         ]);
     }
 
@@ -198,17 +310,6 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
         }
     }
 
-    /**
-     * Action handler for opening settings.
-     */
-    @action onClickSettings() {
-        const { onClickSettings } = this.args;
-
-        if (typeof onClickSettings === 'function') {
-            onClickSettings();
-        }
-    }
-
     /**
      * Filters menuPanels, leaving only menuPanels with visible items
      *

package/addon/components/leaflet-draw-control.js

@@ -4,6 +4,7 @@ import { scheduleOnce } from '@ember/runloop';
 import { classify, camelize } from '@ember/string';
 import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
 
+const L = window.leaflet || window.L;
 export default class LeafletDrawControl extends BaseLayer {
     get leafletEvents() {
         return [