@fleetbase/fleetops-engine 0.3.8 → 0.4.0

package/addon/components/contact-form-panel.hbs

@@ -1,10 +1,13 @@
 <Overlay
     @onLoad={{this.setOverlayContext}}
+    @onOpen={{this.onOpen}}
+    @onClose={{this.onClose}}
+    @onToggle={{this.onToggle}}
     @position="right"
     @noBackdrop={{true}}
     @fullHeight={{true}}
     @isResizeble={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "600px"}}
+    @width={{or this.width @width "570px"}}
 >
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
         <div class="flex flex-row items-center justify-between w-full mb-4">

package/addon/components/contact-panel.hbs

@@ -1,4 +1,4 @@
-<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
+<Overlay @onLoad={{this.setOverlayContext}} @onOpen={{this.onOpen}} @onClose={{this.onClose}} @onToggle={{this.onToggle}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{or this.isResizable @isResizable}} @width={{or this.width @width "570px"}}>
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">

package/addon/components/driver-form-panel.hbs

@@ -1,4 +1,4 @@
-<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
+<Overlay @onLoad={{this.setOverlayContext}} @onOpen={{this.onOpen}} @onClose={{this.onClose}} @onToggle={{this.onToggle}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "570px"}}>
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
@@ -65,7 +65,7 @@
                 <InputGroup @name="Name" @wrapperClass="col-span-2">
                     <Input @value={{this.driver.name}} @type="text" class="w-full form-input" placeholder="Name" />
                 </InputGroup>
-                
+
                 <InputGroup @name="Internal ID">
                     <Input @value={{this.driver.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
                 </InputGroup>
@@ -109,16 +109,9 @@
                         </PowerSelect>
                     </div>
                 </InputGroup>
-              <InputGroup @name="Coordinates" @wrapperClass="col-span-2">
-                <CoordinatesInput
-                    @value={{this.driver.location}}
-                    @onChange={{this.onCoordinatesChanged}}
-                    @onGeocode={{this.onAutocomplete}}
-                    @onUpdatedFromMap={{this.onCoordinatesChanged}}
-                    @onInit={{this.setCoordinatesInput}}
-                    @renderInPlace={{false}}
-                />
-            </InputGroup>
+                <InputGroup @name="Coordinates" @wrapperClass="col-span-2">
+                    <CoordinatesInput @value={{this.driver.location}} @onChange={{this.onCoordinatesChanged}} @onGeocode={{this.onAutocomplete}} @onUpdatedFromMap={{this.onCoordinatesChanged}} @onInit={{this.setCoordinatesInput}} @renderInPlace={{false}} />
+                </InputGroup>
             </div>
         </div>
     </Overlay::Body>

package/addon/components/driver-panel.hbs

@@ -1,10 +1,13 @@
 <Overlay
     @onLoad={{this.setOverlayContext}}
+    @onOpen={{this.onOpen}}
+    @onClose={{this.onClose}}
+    @onToggle={{this.onToggle}}
     @position="right"
     @noBackdrop={{true}}
     @fullHeight={{true}}
     @isResizeble={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "600px"}}
+    @width={{or this.width @width "570px"}}
 >
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
         <div class="flex flex-row items-center justify-between w-full mb-4">

package/addon/components/fleet-form-panel.hbs

@@ -1,10 +1,13 @@
 <Overlay
     @onLoad={{this.setOverlayContext}}
+    @onOpen={{this.onOpen}}
+    @onClose={{this.onClose}}
+    @onToggle={{this.onToggle}}
     @position="right"
     @noBackdrop={{true}}
     @fullHeight={{true}}
     @isResizeble={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "600px"}}
+    @width={{or this.width @width "570px"}}
 >
     <Overlay::Header
         @title={{if this.fleet.public_id this.fleet.name "New Fleet"}}

package/addon/components/fleet-listing-panel.hbs

@@ -1,8 +1,8 @@
 <Layout::Sidebar::Panel @open={{or @open true}} @title={{this.fleet.name}} @titleStatusRightText={{concat this.fleet.vehicles_online_count "/" this.fleet.vehicles_count}} @titleStatusRight="info" @hideRightTitleStatusDot={{true}} @titleStatusRightContainerClass="-mr-2" @wrapperClass="next-fleet-summary-fleet fleet-depth-{{@depth}}">
     {{#each this.fleet.subfleets as |subFleet|}}
-        <FleetListingPanel @fleet={{subFleet}} @onVehicleClicked={{this.onVehicleClicked}} @depth={{add @depth 1}} />
+        <FleetListingPanel @fleet={{subFleet}} @onVehicleClicked={{this.onVehicleClicked}} @depth={{add @depth 1}} @itemDropdownButton={{@itemDropdownButton}} @itemDropdownButtonActions={{@itemDropdownButtonActions}} />
     {{/each}}
     {{#each this.fleet.vehicles as |vehicle|}}
-        <Layout::Sidebar::Item @icon="circle" @iconSize="2xs" @iconClass={{if vehicle.online "text-green-500" "text-yellow-200"}} @onClick={{fn this.onVehicleClicked vehicle}} @rightSideComponent={{@itemRightSideComponent}} @rightSideComponentContext={{@itemRightSideComponentContext}} @rightSideStatus={{@itemRightSideStatus}} @rightSideStatusText={{@itemRightSideStatusText}} @hideRightSideStatusDot={{@itemHideRightSideStatusDot}} @rightSideStatusClass={{@itemRightSideStatusClass}} @disableRightSideStatusHumanize={{@itemDisableRightSideStatusHumanize}} @dropdownButton={{@itemDropdownButton}} @dropdownButtonActions={{@itemDropdownButtonActions}} @dropdownButtonIcon={{@itemDropdownButtonIcon}} @dropdownButtonIconPrefix={{@itemDropdownButtonIconPrefix}} @dropdownButtonText={{@itemDropdownButtonText}} @dropdownButtonCalculatePosition={{@itemDropdownButtonCalculatePosition}} @dropdownButtonRenderInPlace={{@itemDropdownButtonRenderInPlace}} @dropdownButtonMenuLabel={{@itemDropdownButtonMenuLabel}} @dropdownButtonWrapperClass={{@itemDropdownButtonWrapperClass}} @dropdownButtonTriggerClass={{@itemDropdownButtonTriggerClass}} @registerDropdownButtonAPI={{@itemRegisterDropdownButtonAPI}}>{{vehicle.displayName}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @icon="circle" @iconSize="2xs" @iconClass={{if vehicle.online "text-green-500" "text-yellow-200"}} @onClick={{fn this.onVehicleClicked vehicle}} @rightSideComponent={{@itemRightSideComponent}} @rightSideComponentContext={{@itemRightSideComponentContext}} @rightSideStatus={{@itemRightSideStatus}} @rightSideStatusText={{@itemRightSideStatusText}} @hideRightSideStatusDot={{@itemHideRightSideStatusDot}} @rightSideStatusClass={{@itemRightSideStatusClass}} @disableRightSideStatusHumanize={{@itemDisableRightSideStatusHumanize}} @dropdownButton={{@itemDropdownButton}} @dropdownButtonActions={{@itemDropdownButtonActions}} @dropdownContext={{vehicle}} @dropdownButtonIcon={{@itemDropdownButtonIcon}} @dropdownButtonIconPrefix={{@itemDropdownButtonIconPrefix}} @dropdownButtonText={{@itemDropdownButtonText}} @dropdownButtonCalculatePosition={{@itemDropdownButtonCalculatePosition}} @dropdownButtonRenderInPlace={{@itemDropdownButtonRenderInPlace}} @dropdownButtonMenuLabel={{vehicle.displayName}} @dropdownButtonWrapperClass={{@itemDropdownButtonWrapperClass}} @dropdownButtonTriggerClass={{@itemDropdownButtonTriggerClass}} @registerDropdownButtonAPI={{@itemRegisterDropdownButtonAPI}}>{{vehicle.displayName}}</Layout::Sidebar::Item>
     {{/each}}
 </Layout::Sidebar::Panel>

package/addon/components/fleet-panel.hbs

@@ -1,4 +1,4 @@
-<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
+<Overlay @onLoad={{this.setOverlayContext}} @onOpen={{this.onOpen}} @onClose={{this.onClose}} @onToggle={{this.onToggle}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "570px"}}>
     <Overlay::Header @title={{this.fleet.name}} @status={{this.fleet.public_id}} @disableBadgeHumanize={{true}} @hideStatusDot={{true}} @createdAt={{this.fleet.createdAt}}>
         <Button @type="default" @icon="pen" @helpText="Edit fleet" @onClick={{this.onEdit}} @wrapperClass="mr-2" />
         <Button @type="default" @icon="times" @helpText={{if this.fleet.id "Cancel edit fleet" "Cancel new fleet"}} @onClick={{this.onPressCancel}} />

package/addon/components/fuel-report-form-panel.hbs

@@ -1,10 +1,13 @@
 <Overlay
     @onLoad={{this.setOverlayContext}}
+    @onOpen={{this.onOpen}}
+    @onClose={{this.onClose}}
+    @onToggle={{this.onToggle}}
     @position="right"
     @noBackdrop={{true}}
     @fullHeight={{true}}
     @isResizeble={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "600px"}}
+    @width={{or this.width @width "570px"}}
 >
     <Overlay::Header
         @title={{if this.fuelReport.public_id this.fuelReport.name "New Fuel Report"}}

package/addon/components/fuel-report-panel.hbs

@@ -1,10 +1,13 @@
 <Overlay
     @onLoad={{this.setOverlayContext}}
+    @onOpen={{this.onOpen}}
+    @onClose={{this.onClose}}
+    @onToggle={{this.onToggle}}
     @position="right"
     @noBackdrop={{true}}
     @fullHeight={{true}}
     @isResizable={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "600px"}}
+    @width={{or this.width @width "570px"}}
 >
     <Overlay::Header @title="Fuel Report Details" @status={{this.fuelReport.public_id}} @hideStatusDot={{true}} @createdAt={{this.fuelReport.createdAt}}>
         <Button @type="default" @icon="pen" @helpText="Edit fuel report" @onClick={{this.onEdit}} @wrapperClass="mr-2" />

package/addon/components/issue-form-panel.hbs

@@ -1,10 +1,13 @@
 <Overlay
     @onLoad={{this.setOverlayContext}}
+    @onOpen={{this.onOpen}}
+    @onClose={{this.onClose}}
+    @onToggle={{this.onToggle}}
     @position="right"
     @noBackdrop={{true}}
     @fullHeight={{true}}
     @isResizable={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "600px"}}
+    @width={{or this.width @width "570px"}}
 >
     <Overlay::Header
         @title={{if this.issue.public_id this.issue.name "New Issue"}}

package/addon/components/issue-panel.hbs

@@ -1,10 +1,13 @@
 <Overlay
     @onLoad={{this.setOverlayContext}}
+    @onOpen={{this.onOpen}}
+    @onClose={{this.onClose}}
+    @onToggle={{this.onToggle}}
     @position="right"
     @noBackdrop={{true}}
     @fullHeight={{true}}
     @isResizable={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "600px"}}
+    @width={{or this.width @width "570px"}}
 >
     <Overlay::Header @title="Issue Details" @status={{this.issue.public_id}} @hideStatusDot={{true}} @createdAt={{this.issue.createdAt}}>
         <Button @type="default" @icon="pen" @helpText="Edit Issue" @onClick={{this.onEdit}} @wrapperClass="mr-2" />

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

@@ -0,0 +1,5 @@
+<Layout::Sidebar::Panel @open={{true}} @title={{@title}} @titleIcon={{@icon}} @hideCaret={{true}} @toggleOnCaretOnly={{true}} @onClickPanelTitle={{this.transitionToRoute}} @wrapperClass="next-driver-listing">
+    {{#each this.drivers as |driver|}}
+        <Layout::Sidebar::Item @icon="circle" @iconSize="2xs" @iconClass={{if driver.online "text-green-500" "text-yellow-200"}} @onClick={{fn this.onDriverClicked driver}} class="driver-nav-item" @dropdownButton={{true}} @dropdownButtonActions={{this.dropdownButtonActions}} @dropdownContext={{driver}} @dropdownButtonIcon={{@itemDropdownButtonIcon}} @dropdownButtonIconPrefix={{@itemDropdownButtonIconPrefix}} @dropdownButtonText={{@itemDropdownButtonText}} @dropdownButtonCalculatePosition={{@itemDropdownButtonCalculatePosition}} @dropdownButtonRenderInPlace={{true}} @dropdownButtonMenuLabel={{driver.name}} @dropdownButtonWrapperClass={{@itemDropdownButtonWrapperClass}} @dropdownButtonTriggerClass={{@itemDropdownButtonTriggerClass}} @registerDropdownButtonAPI={{@itemRegisterDropdownButtonAPI}} @rightSideComponent={{@itemRightSideComponent}} @rightSideComponentContext={{@itemRightSideComponentContext}} @rightSideStatus={{@itemRightSideStatus}} @rightSideStatusText={{@itemRightSideStatusText}} @hideRightSideStatusDot={{@itemHideRightSideStatusDot}} @rightSideStatusClass={{@itemRightSideStatusClass}} @disableRightSideStatusHumanize={{@itemDisableRightSideStatusHumanize}}>{{driver.name}}</Layout::Sidebar::Item>
+    {{/each}}
+</Layout::Sidebar::Panel>

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

@@ -0,0 +1,122 @@
+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-decorators';
+
+export default class LayoutFleetOpsSidebarDriverListingComponent extends Component {
+    @service store;
+    @service universe;
+    @service contextPanel;
+    @service driverActions;
+    @service hostRouter;
+    @tracked drivers = [];
+
+    constructor() {
+        super(...arguments);
+        this.fetchDrivers.perform();
+    }
+
+    dropdownButtonActions = [
+        {
+            label: 'View driver details...',
+            onClick: (driver) => {
+                this.contextPanel.focus(driver);
+            },
+        },
+        {
+            label: 'Edit driver details...',
+            onClick: (driver) => {
+                this.contextPanel.focus(driver, 'editing');
+            },
+        },
+        {
+            separator: true,
+        },
+        {
+            label: 'Assign order to driver...',
+            onClick: (driver) => {
+                this.driverActions.assignOrder(driver);
+            },
+        },
+        {
+            label: 'Assign vehicle to driver...',
+            onClick: (driver) => {
+                this.driverActions.assignVehicle(driver);
+            },
+        },
+        {
+            label: 'Locate driver on map...',
+            onClick: (driver) => {
+                // 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.onDriverClicked(driver);
+                }
+
+                this.driverActions.locate(driver);
+            },
+        },
+        {
+            separator: true,
+        },
+        {
+            label: 'Delete driver...',
+            onClick: (driver) => {
+                this.driverActions.delete(driver);
+            },
+        },
+    ];
+
+    @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')) {
+                if (typeof toggleApiContext.toggle === 'function') {
+                    toggleApiContext.toggle();
+                }
+            }
+
+            this.hostRouter.transitionTo(this.args.route);
+        }
+    }
+
+    @action onDriverClicked(driver) {
+        // 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.focusDriverOnMap(driver);
+
+            // Fire callback
+            if (typeof this.args.onFocusDriver === 'function') {
+                this.args.onFocusDriver(driver);
+            }
+        });
+    }
+
+    focusDriverOnMap(driver) {
+        const liveMap = this.universe.get('component:fleet-ops:live-map');
+
+        if (liveMap) {
+            if (liveMap.contextPanel) {
+                liveMap.contextPanel.clear();
+            }
+
+            liveMap.showAll();
+            liveMap.focusLayerByRecord(driver, 16, {
+                onAfterFocusWithRecord: function () {
+                    later(
+                        this,
+                        () => {
+                            liveMap.onDriverClicked(driver);
+                        },
+                        1200
+                    );
+                },
+            });
+        }
+    }
+
+    @task *fetchDrivers() {
+        this.drivers = yield this.store.query('driver', { limit: 20 });
+    }
+}

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

@@ -1,5 +1,5 @@
-<Layout::Sidebar::Panel @open={{true}} @titleIcon={{@icon}} @title="Fleets" @wrapperClass="next-fleet-summary">
+<Layout::Sidebar::Panel @open={{true}} @title={{@title}} @titleIcon={{@icon}} @hideCaret={{true}} @toggleOnCaretOnly={{true}} @onClickPanelTitle={{this.transitionToRoute}} @wrapperClass="next-fleet-summary">
     {{#each this.fleets as |fleet|}}
-        <FleetListingPanel @fleet={{fleet}} @onVehicleClicked={{this.onFocusVehicle}} @depth={{1}} @open={{true}} />
+        <FleetListingPanel @fleet={{fleet}} @onVehicleClicked={{this.onVehicleClicked}} @depth={{1}} @open={{true}} @itemDropdownButton={{true}} @itemDropdownButtonActions={{this.dropdownButtonActions}} />
     {{/each}}
 </Layout::Sidebar::Panel>

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

@@ -2,62 +2,98 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
-import { isArray } from '@ember/array';
 import { later } from '@ember/runloop';
+import { task } from 'ember-concurrency-decorators';
 
 export default class LayoutFleetOpsSidebarFleetListingComponent extends Component {
     @service store;
-    @service notifications;
     @service universe;
+    @service contextPanel;
+    @service vehicleActions;
     @service hostRouter;
     @tracked fleets = [];
-    @tracked isLoading = false;
 
     constructor() {
         super(...arguments);
-        this.loadFleetsWithVehicles();
-        this.listenForFleetChanges();
+        this.fetchFleets.perform();
+        this.listenForChanges();
     }
 
-    @action transitionHome() {
-        return this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index', { queryParams: { layout: 'map' } });
-    }
+    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 async onFocusVehicle(vehicle) {
-        const { onFocusVehicle } = this.args;
-        // const { currentRouteName } = this.hostRouter;
-        // const isOperationsRouteActive = typeof currentRouteName === 'string' && currentRouteName.includes('fleet-ops.operations.orders');
+    @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')) {
+                if (typeof toggleApiContext.toggle === 'function') {
+                    toggleApiContext.toggle();
+                }
+            }
 
-        // transition to dashboard/map display
-        try {
-            await this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index', { queryParams: { layout: 'map' } });
-        } catch (error) {
-            // silent
+            this.hostRouter.transitionTo(this.args.route);
         }
+    }
 
-        // focus vehicle on live map
-        this.focusVehicleOnLiveMap(vehicle);
+    @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);
 
-        if (typeof onFocusVehicle === 'function') {
-            onFocusVehicle(vehicle);
-        }
+            // Fire callback
+            if (typeof this.args.onFocusVehicle === 'function') {
+                this.args.onFocusVehicle(vehicle);
+            }
+        });
     }
 
-    @action focusVehicleOnLiveMap(vehicle) {
-        const FleetOpsLiveMap = this.universe.get('FleetOpsLiveMap');
+    @action focusVehicleOnMap(vehicle) {
+        const liveMap = this.universe.get('component:fleet-ops:live-map');
 
-        if (FleetOpsLiveMap) {
-            if (FleetOpsLiveMap.contextPanel) {
-                FleetOpsLiveMap.contextPanel.clear();
+        if (liveMap) {
+            if (liveMap.contextPanel) {
+                liveMap.contextPanel.clear();
             }
 
-            FleetOpsLiveMap.showAll();
-            FleetOpsLiveMap.focusLayerByRecord(vehicle, 16, {
+            liveMap.showAll();
+            liveMap.focusLayerByRecord(vehicle, 16, {
                 onAfterFocusWithRecord: function () {
                     later(
                         this,
                         () => {
-                            FleetOpsLiveMap.onVehicleClicked(vehicle);
+                            liveMap.onVehicleClicked(vehicle);
                         },
                         600 * 2
                     );
@@ -66,7 +102,7 @@ export default class LayoutFleetOpsSidebarFleetListingComponent extends Componen
         }
     }
 
-    listenForFleetChanges() {
+    listenForChanges() {
         // when a vehicle is assigned/ or unassigned reload
         this.universe.on('fleet.vehicle.assigned', () => {
             this.loadFleetsWithVehicles();
@@ -78,23 +114,7 @@ export default class LayoutFleetOpsSidebarFleetListingComponent extends Componen
         });
     }
 
-    loadFleetsWithVehicles() {
-        this.isLoading = true;
-        this.store
-            .query('fleet', { with: ['vehicles', 'subfleets'], parents_only: true })
-            .then((fleets) => {
-                this.fleets = fleets.toArray().map(this.resolveFleetVehicles);
-            })
-            .catch((error) => {
-                this.notifications.serverError(error);
-            })
-            .finally(() => {
-                this.isLoading = false;
-            });
-    }
-
-    @action resolveFleetVehicles(fleet) {
-        fleet.vehicles = isArray(fleet.vehicles) ? fleet.vehicles.toArray() : [];
-        return fleet;
+    @task *fetchFleets() {
+        this.fleets = yield this.store.query('fleet', { with: ['vehicles', 'subfleets'], parents_only: true });
     }
 }

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

@@ -12,7 +12,7 @@
     <Layout::Sidebar::Panel @open={{menuPanel.open}} @title={{menuPanel.title}}>
         {{#each menuPanel.items as |menuItem|}}
             {{#if menuItem.renderComponentInPlace}}
-                {{component menuItem.component menuItem=menuItem title=@menuItem.title route=(concat this.routePrefix menuItem.route) icon=menuItem.icon rightSideComponent=menuItem.rightSideComponent rightSideComponentContext=menuItem.rightSideComponentContext rightSideStatus=menuItem.rightSideStatus rightSideStatusText=menuItem.rightSideStatusText hideRightSideStatusDot=menuItem.hideRightSideStatusDot rightSideStatusClass=menuItem.rightSideStatusClass disableRightSideStatusHumanize=menuItem.disableRightSideStatusHumanize dropdownButton=menuItem.dropdownButton dropdownButtonActions=menuItem.dropdownButtonActions dropdownButtonIcon=menuItem.dropdownButtonIcon dropdownButtonIconPrefix=menuItem.dropdownButtonIconPrefix dropdownButtonText=menuItem.dropdownButtonText dropdownButtonCalculatePosition=menuItem.dropdownButtonCalculatePosition dropdownButtonRenderInPlace=menuItem.dropdownButtonRenderInPlace dropdownButtonMenuLabel=menuItem.dropdownButtonMenuLabel dropdownButtonWrapperClass=menuItem.dropdownButtonWrapperClass dropdownButtonTriggerClass=menuItem.dropdownButtonTriggerClass registerDropdownButtonAPI=menuItem.registerDropdownButtonAPI}}
+                {{component menuItem.component menuItem=menuItem title=menuItem.title route=(concat this.routePrefix menuItem.route) icon=menuItem.icon rightSideComponent=menuItem.rightSideComponent rightSideComponentContext=menuItem.rightSideComponentContext rightSideStatus=menuItem.rightSideStatus rightSideStatusText=menuItem.rightSideStatusText hideRightSideStatusDot=menuItem.hideRightSideStatusDot rightSideStatusClass=menuItem.rightSideStatusClass disableRightSideStatusHumanize=menuItem.disableRightSideStatusHumanize dropdownButton=menuItem.dropdownButton dropdownButtonActions=menuItem.dropdownButtonActions dropdownButtonIcon=menuItem.dropdownButtonIcon dropdownButtonIconPrefix=menuItem.dropdownButtonIconPrefix dropdownButtonText=menuItem.dropdownButtonText dropdownButtonCalculatePosition=menuItem.dropdownButtonCalculatePosition dropdownButtonRenderInPlace=menuItem.dropdownButtonRenderInPlace dropdownButtonMenuLabel=menuItem.dropdownButtonMenuLabel dropdownButtonWrapperClass=menuItem.dropdownButtonWrapperClass dropdownButtonTriggerClass=menuItem.dropdownButtonTriggerClass registerDropdownButtonAPI=menuItem.registerDropdownButtonAPI}}
             {{else}}
                 <Layout::Sidebar::Item @route={{concat this.routePrefix menuItem.route}} @icon={{menuItem.icon}} @rightSideComponent={{menuItem.rightSideComponent}} @rightSideComponentContext={{menuItem.rightSideComponentContext}} @rightSideStatus={{menuItem.rightSideStatus}} @rightSideStatusText={{menuItem.rightSideStatusText}} @hideRightSideStatusDot={{menuItem.hideRightSideStatusDot}} @rightSideStatusClass={{menuItem.rightSideStatusClass}} @disableRightSideStatusHumanize={{menuItem.disableRightSideStatusHumanize}} @dropdownButton={{menuItem.dropdownButton}} @dropdownButtonActions={{menuItem.dropdownButtonActions}} @dropdownButtonIcon={{menuItem.dropdownButtonIcon}} @dropdownButtonIconPrefix={{menuItem.dropdownButtonIconPrefix}} @dropdownButtonText={{menuItem.dropdownButtonText}} @dropdownButtonCalculatePosition={{menuItem.dropdownButtonCalculatePosition}} @dropdownButtonRenderInPlace={{menuItem.dropdownButtonRenderInPlace}} @dropdownButtonMenuLabel={{menuItem.dropdownButtonMenuLabel}} @dropdownButtonWrapperClass={{menuItem.dropdownButtonWrapperClass}} @dropdownButtonTriggerClass={{menuItem.dropdownButtonTriggerClass}} @registerDropdownButtonAPI={{menuItem.registerDropdownButtonAPI}}>{{menuItem.title}}</Layout::Sidebar::Item>
             {{/if}}

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

@@ -3,7 +3,8 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { isArray } from '@ember/array';
-// import FleetListingComponent from './fleet-ops-sidebar/fleet-listing';
+import FleetListingComponent from './fleet-ops-sidebar/fleet-listing';
+import DriverListingComponent from './fleet-ops-sidebar/driver-listing';
 
 /**
  * LayoutFleetOpsSidebarComponent
@@ -41,9 +42,9 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
         ];
 
         const resourcesItems = [
-            { title: 'Drivers', icon: 'id-card', route: 'management.drivers' },
+            { title: 'Drivers', icon: 'id-card', route: 'management.drivers', renderComponentInPlace: true, component: DriverListingComponent },
             { title: 'Vehicles', icon: 'truck', route: 'management.vehicles' },
-            { title: 'Fleets', icon: 'user-group', route: 'management.fleets' },
+            { title: 'Fleets', icon: 'user-group', route: 'management.fleets', renderComponentInPlace: true, component: FleetListingComponent },
             { title: 'Vendors', icon: 'warehouse', route: 'management.vendors' },
             { title: 'Contacts', icon: 'address-book', route: 'management.contacts' },
             { title: 'Places', icon: 'location-dot', route: 'management.places' },