@fleetbase/fleetops-engine 0.3.7 → 0.3.9

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 +1,5 @@
-<FleetListingPanel ...attributes />
+<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.onVehicleClicked}} @depth={{1}} @open={{true}} @itemDropdownButton={{true}} @itemDropdownButtonActions={{this.dropdownButtonActions}} />
+    {{/each}}
+</Layout::Sidebar::Panel>

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

@@ -1,3 +1,120 @@
 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 LayoutFleetOpsSidebarFleetListingComponent extends Component {}
+export default class LayoutFleetOpsSidebarFleetListingComponent extends Component {
+    @service store;
+    @service universe;
+    @service contextPanel;
+    @service vehicleActions;
+    @service hostRouter;
+    @tracked fleets = [];
+
+    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')) {
+                if (typeof toggleApiContext.toggle === 'function') {
+                    toggleApiContext.toggle();
+                }
+            }
+
+            this.hostRouter.transitionTo(this.args.route);
+        }
+    }
+
+    @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 focusVehicleOnMap(vehicle) {
+        const liveMap = this.universe.get('component:fleet-ops:live-map');
+
+        if (liveMap) {
+            if (liveMap.contextPanel) {
+                liveMap.contextPanel.clear();
+            }
+
+            liveMap.showAll();
+            liveMap.focusLayerByRecord(vehicle, 16, {
+                onAfterFocusWithRecord: function () {
+                    later(
+                        this,
+                        () => {
+                            liveMap.onVehicleClicked(vehicle);
+                        },
+                        600 * 2
+                    );
+                },
+            });
+        }
+    }
+
+    listenForChanges() {
+        // when a vehicle is assigned/ or unassigned reload
+        this.universe.on('fleet.vehicle.assigned', () => {
+            this.loadFleetsWithVehicles();
+        });
+
+        // when a vehicle is assigned/ or unassigned reload
+        this.universe.on('fleet.vehicle.unassigned', () => {
+            this.loadFleetsWithVehicles();
+        });
+    }
+
+    @task *fetchFleets() {
+        this.fleets = yield this.store.query('fleet', { with: ['vehicles', 'subfleets'], parents_only: true });
+    }
+}

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

@@ -11,7 +11,11 @@
 {{#each this.menuPanels as |menuPanel|}}
     <Layout::Sidebar::Panel @open={{menuPanel.open}} @title={{menuPanel.title}}>
         {{#each menuPanel.items as |menuItem|}}
-            <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 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}}
+            {{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}}
         {{/each}}
     </Layout::Sidebar::Panel>
 {{/each}}

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

@@ -3,6 +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 DriverListingComponent from './fleet-ops-sidebar/driver-listing';
 
 /**
  * LayoutFleetOpsSidebarComponent
@@ -40,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' },

package/addon/components/live-map.hbs

@@ -1,10 +1,33 @@
 <div class="live-map-component {{@wrapperClass}}" {{did-insert this.setupComponent}}>
-    <LeafletMap id={{this.mapId}} class={{@mapClass}} @lat={{this.latitude}} @lng={{this.longitude}} @zoom={{this.zoom}} @zoomControl={{@zoomControl}} @contextmenu={{true}} @contextmenuWidth={{140}} @contextmenuItems={{this.contextMenuItems}} @onLoad={{this.setupMap}} {{will-destroy this.closeChannels}} ...attributes as |layers|>
+    <LeafletMap
+        id={{this.mapId}}
+        class={{@mapClass}}
+        @lat={{this.latitude}}
+        @lng={{this.longitude}}
+        @zoom={{this.zoom}}
+        @zoomControl={{@zoomControl}}
+        @contextmenu={{true}}
+        @contextmenuWidth={{140}}
+        @contextmenuItems={{this.contextMenuItems}}
+        @onLoad={{this.setupMap}}
+        {{will-destroy this.closeChannels}}
+        ...attributes
+        as |layers|
+    >
         <layers.tile @url={{this.tileSourceUrl}} />
-
         {{#if this.visibilityControls.drivers}}
             {{#each this.drivers as |driver|}}
-                <layers.drift-marker @id={{driver.id}} @rotationAngle={{driver.heading}} @duration={{300}} @icon={{icon iconUrl=driver.vehicle_avatar iconSize=(array 24 24)}} @location={{point-to-coordinates driver.location}} @publicId={{driver.public_id}} @onAdd={{fn this.triggerAction "onDriverAdded" driver}} @onClick={{fn this.triggerAction "onDriverClicked" driver}} as |marker|>
+                <layers.drift-marker
+                    @id={{driver.id}}
+                    @rotationAngle={{driver.heading}}
+                    @duration={{300}}
+                    @icon={{icon iconUrl=(or driver.vehicle_avatar (config "defaultValues.vehicleAvatar")) iconSize=(array 24 24)}}
+                    @location={{point-to-coordinates driver.location}}
+                    @publicId={{driver.public_id}}
+                    @onAdd={{fn this.triggerAction "onDriverAdded" driver}}
+                    @onClick={{fn this.triggerAction "onDriverClicked" driver}}
+                    as |marker|
+                >
                     <marker.popup @maxWidth="500" @minWidth="225">
                         <DriverCard @driver={{driver}} @showCoordinates={{true}} @textClass="text-gray-900 dark:text-gray-100" />
                     </marker.popup>
@@ -15,7 +38,17 @@
 
         {{#if this.visibilityControls.vehicles}}
             {{#each this.vehicles as |vehicle|}}
-                <layers.drift-marker @id={{vehicle.id}} @rotationAngle={{vehicle.heading}} @duration={{300}} @icon={{icon iconUrl=vehicle.avatar_url iconSize=(array 24 24)}} @location={{point-to-coordinates vehicle.location}} @publicId={{vehicle.public_id}} @onAdd={{fn this.triggerAction "onVehicleAdded" vehicle}} @onClick={{fn this.triggerAction "onVehicleClicked" vehicle}} as |marker|>
+                <layers.drift-marker
+                    @id={{vehicle.id}}
+                    @rotationAngle={{vehicle.heading}}
+                    @duration={{300}}
+                    @icon={{icon iconUrl=(or vehicle.avatar_url (config "defaultValues.vehicleAvatar")) iconSize=(array 24 24)}}
+                    @location={{point-to-coordinates vehicle.location}}
+                    @publicId={{vehicle.public_id}}
+                    @onAdd={{fn this.triggerAction "onVehicleAdded" vehicle}}
+                    @onClick={{fn this.triggerAction "onVehicleClicked" vehicle}}
+                    as |marker|
+                >
                     <marker.tooltip @permanent={{false}} @sticky={{true}}>
                         <div>{{vehicle.displayName}}</div>
                         <div>{{if vehicle.online "Online" "Offline"}}</div>
@@ -26,7 +59,17 @@
 
         {{#if this.visibilityControls.places}}
             {{#each this.places as |place|}}
-                <layers.marker @id={{place.id}} @icon={{icon iconUrl="/engines-dist/images/building-marker.png" iconSize=(array 16 16)}} @location={{point-to-coordinates place.location}} @riseOnHover={{true}} @title={{place.address}} @alt={{place.address}} @onAdd={{fn this.triggerAction "onPlaceAdded" place}} @onClick={{fn this.triggerAction "onPlaceClicked" place}} as |marker|>
+                <layers.marker
+                    @id={{place.id}}
+                    @icon={{icon iconUrl="/engines-dist/images/building-marker.png" iconSize=(array 16 16)}}
+                    @location={{point-to-coordinates place.location}}
+                    @riseOnHover={{true}}
+                    @title={{place.address}}
+                    @alt={{place.address}}
+                    @onAdd={{fn this.triggerAction "onPlaceAdded" place}}
+                    @onClick={{fn this.triggerAction "onPlaceClicked" place}}
+                    as |marker|
+                >
                     <marker.popup>
                         <div>{{place.address}}</div>
                         <div>{{format-point place.location}}</div>
@@ -68,15 +111,41 @@
             {{/each}}
         {{/if}} --}}
 
-        <layers.draw-control @position="topright" @draw={{hash marker=false circlemarker=false circle=false polyline=false}} @onDrawDrawstop={{fn this.triggerAction "onDrawDrawstop"}} @onDrawDeleted={{fn this.triggerAction "onDrawDeleted"}} @onDrawEdited={{fn this.triggerAction "onDrawEdited"}} @onDrawDeletestart={{fn this.triggerAction "onDrawDeletestart"}} @onDrawEditstop={{fn this.triggerAction "onDrawEditstop"}} @onDrawControlCreated={{fn this.triggerAction "onDrawControlCreated"}} @onDrawFeatureGroupCreated={{fn this.triggerAction "onDrawFeatureGroupCreated"}} />
+        <layers.draw-control
+            @position="topright"
+            @draw={{hash marker=false circlemarker=false circle=false polyline=false}}
+            @onDrawDrawstop={{fn this.triggerAction "onDrawDrawstop"}}
+            @onDrawDeleted={{fn this.triggerAction "onDrawDeleted"}}
+            @onDrawEdited={{fn this.triggerAction "onDrawEdited"}}
+            @onDrawDeletestart={{fn this.triggerAction "onDrawDeletestart"}}
+            @onDrawEditstop={{fn this.triggerAction "onDrawEditstop"}}
+            @onDrawControlCreated={{fn this.triggerAction "onDrawControlCreated"}}
+            @onDrawFeatureGroupCreated={{fn this.triggerAction "onDrawFeatureGroupCreated"}}
+        />
 
         {{#each this.activeServiceAreas as |serviceArea|}}
-            <layers.polygon @id={{serviceArea.id}} @record={{serviceArea}} @locations={{serviceArea.bounds}} @fillColor={{serviceArea.color}} @color={{serviceArea.stroke_color}} @onAdd={{fn this.triggerAction "onServiceAreaLayerAdded" serviceArea}} as |polygon|>
+            <layers.polygon
+                @id={{serviceArea.id}}
+                @record={{serviceArea}}
+                @locations={{serviceArea.bounds}}
+                @fillColor={{serviceArea.color}}
+                @color={{serviceArea.stroke_color}}
+                @onAdd={{fn this.triggerAction "onServiceAreaLayerAdded" serviceArea}}
+                as |polygon|
+            >
                 <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{serviceArea.name}} Service Area</polygon.tooltip>
             </layers.polygon>
 
             {{#each serviceArea.zones as |zone|}}
-                <layers.polygon @id={{zone.id}} @record={{zone}} @locations={{zone.locations}} @fillColor={{zone.color}} @color={{zone.stroke_color}} @onAdd={{fn this.triggerAction "onZoneLayerAdd" zone}} as |polygon|>
+                <layers.polygon
+                    @id={{zone.id}}
+                    @record={{zone}}
+                    @locations={{zone.locations}}
+                    @fillColor={{zone.color}}
+                    @color={{zone.stroke_color}}
+                    @onAdd={{fn this.triggerAction "onZoneLayerAdd" zone}}
+                    as |polygon|
+                >
                     <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{zone.name}} Zone</polygon.tooltip>
                 </layers.polygon>
             {{/each}}
@@ -87,5 +156,17 @@
 </div>
 
 {{#if this.isDataLoaded}}
-    <LiveMapDrawer @tab={{@drawerTab}} @onTabChanged={{@onDrawerTabChanged}} @onResizeEnd={{@onDrawerResizeEnd}} @onResizeStart={{@onDrawerResizeStart}} @isMinimized={{@isDrawerMinimized}} @isOpen={{@isDrawerOpen}} @vehicles={{this.vehicles}} @drivers={{this.drivers}} @places={{this.places}} @liveMap={{this}} @onDrawerReady={{this.setDrawerContext}} />
+    <LiveMapDrawer
+        @tab={{@drawerTab}}
+        @onTabChanged={{@onDrawerTabChanged}}
+        @onResizeEnd={{@onDrawerResizeEnd}}
+        @onResizeStart={{@onDrawerResizeStart}}
+        @isMinimized={{@isDrawerMinimized}}
+        @isOpen={{@isDrawerOpen}}
+        @vehicles={{this.vehicles}}
+        @drivers={{this.drivers}}
+        @places={{this.places}}
+        @liveMap={{this}}
+        @onDrawerReady={{this.setDrawerContext}}
+    />
 {{/if}}