@fleetbase/fleetops-engine 0.3.2 → 0.3.3

package/addon/components/live-map-drawer.hbs

@@ -0,0 +1,17 @@
+<Drawer @isMinimized={{true}} @notchEnabled={{true}} @onLoad={{this.setDrawerContext}}>
+    <div class="ui-tabs pt-4">
+        <nav>
+            {{#each this.tabs as |tab|}}
+                <a href="javascript:;" class="ui-tab {{if (eq this.tab.slug tab.slug) 'active' }}" {{on "click" (fn this.onTabChanged tab.slug)}}>
+                    <FaIcon @icon={{tab.icon}} class="mr-1" />
+                    <span>{{tab.title}}</span>
+                </a>
+            {{/each}}
+        </nav>
+    </div>
+    <div class="tab-content tab-{{this.tab.slug}}">
+        {{#if this.drawer}}
+            {{component this.tab.component drivers=@drivers vehicles=@vehicles places=@places drawer=this.drawer liveMap=@liveMap tabOptions=this.tab options=this.tab.componentParams}}
+        {{/if}}
+    </div>
+</Drawer>

package/addon/components/live-map-drawer.js

@@ -0,0 +1,104 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+import LiveMapDrawerVehicleListingComponent from './live-map-drawer/vehicle-listing';
+import LiveMapDrawerDriverListingComponent from './live-map-drawer/driver-listing';
+import LiveMapDrawerPlaceListingComponent from './live-map-drawer/place-listing';
+
+export default class LiveMapDrawerComponent extends Component {
+    /**
+     * Universe service for managing global data and settings.
+     *
+     * @type {Service}
+     */
+    @service universe;
+
+    /**
+     * The current active tab.
+     *
+     * @type {Object}
+     * @tracked
+     */
+    @tracked tab;
+
+    /**
+     * The drawer component context api.
+     *
+     * @type {Object}
+     * @tracked
+     */
+    @tracked drawer;
+
+    /**
+     * Returns the array of tabs available for the drawer.
+     *
+     * @type {Array}
+     */
+    get tabs() {
+        const registeredTabs = this.universe.getMenuItemsFromRegistry('component:live-map-drawer');
+        const defaultTabs = [
+            this.universe._createMenuItem('Vehicles', null, { icon: 'car', component: LiveMapDrawerVehicleListingComponent }),
+            this.universe._createMenuItem('Drivers', null, { icon: 'id-card', component: LiveMapDrawerDriverListingComponent }),
+            this.universe._createMenuItem('Places', null, { icon: 'building', component: LiveMapDrawerPlaceListingComponent }),
+        ];
+
+        if (isArray(registeredTabs)) {
+            return [...defaultTabs, ...registeredTabs];
+        }
+
+        return defaultTabs;
+    }
+
+    /**
+     * Initializes the vehicle panel component.
+     */
+    constructor() {
+        super(...arguments);
+        this.tab = this.getTabUsingSlug(this.args.tab);
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the drawer component context api.
+     *
+     * @param {Object} drawerApi
+     * @memberof LiveMapDrawerComponent
+     */
+    @action setDrawerContext(drawerApi) {
+        this.drawer = drawerApi;
+
+        if (typeof this.args.onDrawerReady === 'function') {
+            this.args.onDrawerReady(...arguments);
+        }
+    }
+
+    /**
+     * Handles changing the active tab.
+     *
+     * @method
+     * @param {String} tab - The new tab to switch to.
+     * @action
+     */
+    @action onTabChanged(tab) {
+        this.tab = this.getTabUsingSlug(tab);
+        contextComponentCallback(this, 'onTabChanged', tab);
+    }
+
+    /**
+     * Finds and returns a tab based on its slug.
+     *
+     * @param {String} tabSlug - The slug of the tab.
+     * @returns {Object|null} The found tab or null.
+     */
+    getTabUsingSlug(tabSlug) {
+        if (tabSlug) {
+            return this.tabs.find(({ slug }) => slug === tabSlug);
+        }
+
+        return this.tabs[0];
+    }
+}

package/addon/components/live-map.hbs

@@ -84,4 +84,8 @@
 
         {{yield layers}}
     </LeafletMap>
-</div>
+</div>
+
+{{#if this.isDataLoaded}}
+    <LiveMapDrawer @vehicles={{this.vehicles}} @drivers={{this.drivers}} @places={{this.places}} @liveMap={{this}} @onDrawerReady={{this.setDrawerContext}} />
+{{/if}}

package/addon/components/live-map.js

@@ -152,6 +152,13 @@ export default class LiveMapComponent extends Component {
      */
     @tracked isReady = false;
 
+    /**
+     * Indicates if all the data requested has completed loading.
+     * @type {boolean}
+     * @memberof LiveMapComponent
+     */
+    @tracked isDataLoaded = false;
+
     /**
      * Controls for visibility.
      * @type {Object}
@@ -188,6 +195,13 @@ export default class LiveMapComponent extends Component {
      */
     @tracked leafletMap;
 
+    /**
+     * The Drawer component context API.
+     * @type {Object}
+     * @memberof LiveMapComponent
+     */
+    @tracked drawer;
+
     /**
      * The map's zoom level.
      * @type {number}
@@ -288,21 +302,63 @@ export default class LiveMapComponent extends Component {
         // set initial coordinates
         this.setInitialCoordinates();
 
-        // load required live data
-        this.fetchLiveData('routes');
-        this.fetchLiveData('vehicles', {
-            onLoaded: (vehicles) => {
-                this.watchMovingObjects('vehicles', vehicles);
-            },
-        });
-        this.fetchLiveData('drivers', {
-            onLoaded: (drivers) => {
-                this.watchMovingObjects('drivers', drivers);
-            },
-        });
-        this.fetchLiveData('places');
-        this.listen();
-        this.ready();
+        // load data and complete setup
+        this.completeSetup([
+            this.fetchLiveData('routes'),
+            this.fetchLiveData('vehicles', {
+                onLoaded: (vehicles) => {
+                    this.watchMovingObjects('vehicles', vehicles);
+                },
+            }),
+            this.fetchLiveData('drivers', {
+                onLoaded: (drivers) => {
+                    this.watchMovingObjects('drivers', drivers);
+                },
+            }),
+            this.fetchLiveData('places'),
+        ]);
+    }
+
+    /**
+     * Completes the setup of the component by processing an array of live data promises.
+     * It waits for all the provided promises to settle and then sets a flag indicating
+     * that data fetching is complete. It ensures that any final listening and readiness
+     * processes are invoked at the end of the setup process.
+     *
+     * @param {Promise[]} liveDataPromises - An array of promises that fetch live data.
+     * @returns {Promise} A promise that resolves when all data-fetching promises have settled.
+     */
+    completeSetup(liveDataPromises) {
+        return allSettled(liveDataPromises)
+            .then(() => {
+                this.isDataLoaded = true;
+            })
+            .finally(() => {
+                this.listen();
+                this.ready();
+            });
+    }
+
+    /**
+     * Reloads the live map data.
+     *
+     * @memberof LiveMapComponent
+     */
+    reload() {
+        this.completeSetup([
+            this.fetchLiveData('routes'),
+            this.fetchLiveData('vehicles', {
+                onLoaded: (vehicles) => {
+                    this.watchMovingObjects('vehicles', vehicles);
+                },
+            }),
+            this.fetchLiveData('drivers', {
+                onLoaded: (drivers) => {
+                    this.watchMovingObjects('drivers', drivers);
+                },
+            }),
+            this.fetchLiveData('places'),
+        ]);
     }
 
     /**
@@ -463,6 +519,11 @@ export default class LiveMapComponent extends Component {
 
                 return data;
             })
+            .catch((error) => {
+                if (typeof options.onFailure === 'function') {
+                    options.onFailure(error);
+                }
+            })
             .finally(() => {
                 this.isLoading = false;
             });
@@ -838,6 +899,20 @@ export default class LiveMapComponent extends Component {
         return null;
     }
 
+    /**
+     * Sets the drawer component context api.
+     *
+     * @param {Object} drawerApi
+     * @memberof LiveMapComponent
+     */
+    @action setDrawerContext(drawerApi) {
+        this.drawer = drawerApi;
+
+        if (typeof this.args.onDrawerReady === 'function') {
+            this.args.onDrawerReady(...arguments);
+        }
+    }
+
     /**
      * Handle the 'drawstop' event.
      *
@@ -1012,6 +1087,23 @@ export default class LiveMapComponent extends Component {
         this.createVehicleContextMenu(vehicle, target);
     }
 
+    /**
+     * Handle the addition of a place marker.
+     *
+     * @param {PlaceModel} place - The place object.
+     * @param {Event} event - The event object associated with the addition.
+     * @memberof LiveMapComponent
+     */
+    @action onPlaceAdded(place, event) {
+        const { target } = event;
+
+        set(target, 'record_id', place.id);
+        set(target, 'record_type', 'place');
+
+        // set the marker instance to the vehicle model
+        set(place, '_marker', target);
+    }
+
     /**
      * Handle the click event of a vehicle marker.
      *

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

@@ -58,5 +58,11 @@
                 <MapContainer::Toolbar::VisibilityControlPanel @dd={{dd}} @liveMap={{@liveMap}} @map={{@map}} />
             </dd.Content>
         </BasicDropdown>
+        <button type="button" id="map-toolbar-live-map-drawer-button" class="toolbar-button is-action mb-0i" {{on "click" (fn this.onAction "onPressLiveMapDrawerToggle")}}>
+            <FaIcon @icon="binoculars" />
+            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                <InputInfo @text="Scope" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+            </Attach::Tooltip>
+        </button>
     </div>
 </MapContainer::ToolbarContainer>

package/addon/components/modals/order-event.hbs

@@ -13,6 +13,6 @@
             </div>
         </div>
 
-        <ScheduleCard class="border border-night-905" @itemClass="bg-green-600" @contentClass="bg-transparent-i py-3" @titleClass="hidden-i" @order={{@options.order}} />
+        <Order::ScheduleCard class="border border-night-905" @itemClass="bg-green-600" @contentClass="bg-transparent-i py-3" @titleClass="hidden-i" @order={{@options.order}} />
     </div>
 </Modal::Default>

package/addon/components/order/schedule-card.hbs

@@ -1,4 +1,4 @@
-<div class="order-schedule-card border border-gray-200 dark:border-gray-700" {{did-insert this.setupComponent}} ...attributes>
+<div class="order-schedule-card border border-gray-200 dark:border-gray-700" ...attributes>
     <a href="javascript:;" class="{{@titleClass}} card-title border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900" {{on "click" (fn this.onTitleClick @order)}}>
         <span>{{@order.public_id}}</span>
         <div>
@@ -11,21 +11,21 @@
                 <FaIcon @icon="calendar" class="mr-2" />
                 <span class="font-semibold">Date scheduled</span>
             </div>
-            <span>{{@order.scheduledAt}}</span>
+            <span class={{unless @order.scheduled_at "dark:text-gray-600 text-gray-400"}}>{{n-a @order.scheduledAt "Not Scheduled"}}</span>
         </div>
         <div class="flex items-center justify-between">
             <div>
                 <FaIcon @icon="calendar" class="mr-2" />
                 <span class="font-semibold">Date created</span>
             </div>
-            <span>{{@order.createdAtWithTime}}</span>
+            <span>{{n-a @order.createdAtWithTime}}</span>
         </div>
         <div class="flex items-center justify-between">
             <div>
                 <FaIcon @icon="calendar" class="mr-2" />
                 <span class="font-semibold">Driver Assigned</span>
             </div>
-            <span>{{@order.driver_assigned.name "None"}}</span>
+            <span class={{unless @order.driver_assigned "dark:text-gray-600 text-gray-400"}}>{{n-a @order.driver_assigned.name "No Driver Assigned"}}</span>
         </div>
         <div class="z-20 relative">
             <RouteList @order={{@order}} />

package/addon/components/order/schedule-card.js

@@ -2,16 +2,23 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
 export default class OrderScheduleCardComponent extends Component {
-    @action setupComponent() {
-        const { order } = this.args;
+    constructor(owner, { order }) {
+        super(...arguments);
 
-        order?.loadDriver();
-        order?.loadPayload();
+        if (order && typeof order.loadDriver === 'function') {
+            order.loadDriver();
+        }
+
+        if (order && typeof order.loadPayload === 'function') {
+            order.loadPayload();
+        }
     }
 
     @action onTitleClick(order) {
-        if (typeof this.args.onTitleClick === 'function') {
-            this.args.onTitleClick(order);
+        const { onTitleClick } = this.args;
+
+        if (typeof onTitleClick === 'function') {
+            onTitleClick(order);
         }
     }
 }

package/addon/components/place-panel/details.hbs

@@ -1,6 +1,6 @@
 <div class="p-4 space-y-4">
-    <ContentPanel @title="Map" @open={{true}}>
-        <LeafletMap class="w-full h-48 rounded-b-md shadow-md" @lat={{@place.latitude}} @lng={{@place.longitude}} @zoom={{17}} as |layers|>
+    <ContentPanel @title="Map" @open={{false}}>
+        <LeafletMap class="w-full h-48 rounded-b-md shadow-md" @lat={{@place.latitude}} @lng={{@place.longitude}} @zoom={{17}} @zoomControl={{false}} as |layers|>
             <layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" />
             <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}} as |marker|>
                 <marker.popup>

package/addon/controllers/operations/orders/index.js

@@ -1,4 +1,4 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
@@ -9,20 +9,6 @@ import { timeout } from 'ember-concurrency';
 import { task } from 'ember-concurrency-decorators';
 
 export default class OperationsOrdersIndexController extends Controller {
-    /**
-     * Injection of the `ManagementDriversIndexController` controller
-     *
-     * @memberof OperationsOrdersIndexController
-     */
-    @controller('management.drivers.index') driversController;
-
-    /**
-     * Injection of the `ManagementFleetIndexController` controller
-     *
-     * @memberof OperationsOrdersIndexController
-     */
-    @controller('management.fleets.index') fleetController;
-
     /**
      * Inject the `currentUser` service
      *
@@ -266,6 +252,13 @@ export default class OperationsOrdersIndexController extends Controller {
      */
     @tracked leafletMap;
 
+    /**
+     * Reference to the drawer context API.
+     *
+     * @type {Object}
+     */
+    @tracked drawer;
+
     /**
      * Current layout type (e.g., 'map', 'table', 'kanban', 'analytics')
      *
@@ -722,6 +715,27 @@ export default class OperationsOrdersIndexController extends Controller {
         this.liveMap = liveMap;
     }
 
+    /**
+     * Sets the drawer component context api.
+     *
+     * @param {Object} drawerApi
+     * @memberof OperationsOrdersIndexController
+     */
+    @action setDrawerContext(drawerApi) {
+        this.drawer = drawerApi;
+    }
+
+    /**
+     * Toggles the LiveMap drawer component.
+     *
+     * @memberof OperationsOrdersIndexController
+     */
+    @action onPressLiveMapDrawerToggle() {
+        if (this.drawer) {
+            this.drawer.toggleMinimize();
+        }
+    }
+
     /**
      * Exports all orders.
      * @action

package/addon/controllers/operations/scheduler/index.js

@@ -1,31 +1,26 @@
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-import { computed, action } from '@ember/object';
+import { action } from '@ember/object';
 import { format, isValid as isValidDate } from 'date-fns';
+import createFullCalendarEventFromOrder from '../../../utils/create-full-calendar-event-from-order';
 
 export default class OperationsSchedulerIndexController extends Controller {
     @service modalsManager;
     @service notifications;
-
-    @computed('model.@each.scheduled_at') get scheduledOrders() {
-        return this.model.filter((order) => isValidDate(order.scheduled_at));
-    }
-
-    @computed('model.@each.scheduled_at') get unscheduledOrders() {
-        return this.model.filter((order) => !order.scheduled_at);
-    }
-
-    @computed('scheduledOrders.@each.scheduled_at') get events() {
-        return this.scheduledOrders.map((order) => ({
-            id: order.id,
-            title: `${order.scheduledAtTime} - ${order.public_id}`,
-            start: order.scheduled_at,
-            allDay: true,
-        }));
+    @service store;
+    @service hostRouter;
+    @tracked scheduledOrders = [];
+    @tracked unscheduledOrders = [];
+    @tracked events = [];
+
+    @action setCalendarApi(calendar) {
+        this.calendar = calendar;
     }
 
-    @action viewEvent(order, eventClickInfo) {
-        const { event } = eventClickInfo;
+    @action viewEvent(order) {
+        // get the event from the calendar
+        let event = this.calendar.getEventById(order.id);
 
         this.modalsManager.show('modals/order-event', {
             title: `Scheduling for ${order.public_id}`,
@@ -34,7 +29,7 @@ export default class OperationsSchedulerIndexController extends Controller {
             hideDeclineButton: true,
             order,
             reschedule: (date) => {
-                if (typeof date?.toDate === 'function') {
+                if (date && typeof date.toDate === 'function') {
                     date = date.toDate();
                 }
 
@@ -51,15 +46,27 @@ export default class OperationsSchedulerIndexController extends Controller {
                 }
 
                 return order.save().then((order) => {
-                    this.notifications.success(`'${order.public_id}' has been updated.`);
+                    // remove event from calendar
+                    if (event) {
+                        event.remove();
+                    }
 
-                    // update event props
-                    event?.setProp('title', order.eventTitle);
+                    if (order.scheduled_at) {
+                        // notify order has been scheduled
+                        this.notifications.success(`Order '${order.public_id}' has been scheduled at ${order.scheduledAt}.`);
+                        // add event to calendar
+                        event = this.calendar.addEvent(createFullCalendarEventFromOrder(order));
+                    } else {
+                        this.notifications.info(`Order '${order.public_id}' has been unscheduled.`);
+                    }
 
-                    // remove event from calendar if unscheduled
-                    if (!order.scheduled_at || !isValidDate(order.scheduled_at)) {
-                        event.remove();
+                    // update event props
+                    if (event && typeof event.setProp === 'function') {
+                        event.setProp('title', order.eventTitle);
                     }
+
+                    // refresh route
+                    this.hostRouter.refresh();
                 });
             },
         });
@@ -80,7 +87,9 @@ export default class OperationsSchedulerIndexController extends Controller {
         const order = this.store.peekRecord('order', data.id);
 
         order.set('scheduled_at', date);
-        order.save();
+        return order.save().then(() => {
+            this.hostRouter.refresh();
+        });
     }
 
     @action receivedEvent(eventReceivedInfo) {
@@ -88,7 +97,9 @@ export default class OperationsSchedulerIndexController extends Controller {
         const order = this.store.peekRecord('order', event.id);
 
         // update event props
-        event?.setProp('title', order.eventTitle);
+        if (typeof event.setProp === 'function') {
+            event.setProp('title', order.eventTitle);
+        }
     }
 
     @action rescheduleEventFromDrag(eventDropInfo) {
@@ -102,9 +113,13 @@ export default class OperationsSchedulerIndexController extends Controller {
 
         // set and save order props
         order.set('scheduled_at', isValidDate(newDate) ? newDate : start);
-        order.save();
+        order.save().then(() => {
+            this.hostRouter.refresh();
+        });
 
         // update event props
-        event?.setProp('title', order.eventTitle);
+        if (typeof event.setProp === 'function') {
+            event.setProp('title', order.eventTitle);
+        }
     }
 }

package/addon/routes/operations/scheduler/index.js

@@ -1,5 +1,16 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import { isValid as isValidDate } from 'date-fns';
+import { isNone } from '@ember/utils';
+import createFullCalendarEventFromOrder from '../../../utils/create-full-calendar-event-from-order';
+
+const getUnscheduledOrder = (order) => {
+    return isNone(order.scheduled_at);
+};
+
+const getScheduledOrder = (order) => {
+    return isValidDate(order.scheduled_at);
+};
 
 export default class OperationsSchedulerIndexRoute extends Route {
     @service store;
@@ -7,4 +18,18 @@ export default class OperationsSchedulerIndexRoute extends Route {
     model() {
         return this.store.query('order', { status: 'created', with: ['payload'] });
     }
+
+    setupController(controller, model) {
+        // get orders
+        const orders = model.toArray();
+
+        // set unscheduled orders
+        controller.unscheduledOrders = orders.filter(getUnscheduledOrder);
+
+        // set scheduled orders
+        controller.scheduledOrders = orders.filter(getScheduledOrder);
+
+        // create events from scheduledOrders
+        controller.events = controller.scheduledOrders.map(createFullCalendarEventFromOrder);
+    }
 }

package/addon/styles/fleetops-engine.css

@@ -0,0 +1,28 @@
+.scheduler-left-sidebar {
+    border-right: 1px rgba(229, 231, 235, 1) solid;
+    height: 100vh;
+    overflow-y: scroll;
+}
+
+body[data-theme="dark"] .scheduler-left-sidebar {
+    border-right: 1px rgba(55, 65, 81, 1) solid;
+}
+
+.scheduler-left-sidebar > .next-content-panel-wrapper  > .next-content-panel-container  > .next-content-panel > .next-content-panel-header.next-content-panel-is-closed {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.scheduler-left-sidebar > .next-content-panel-wrapper  > .next-content-panel-container  > .next-content-panel > .next-content-panel-header {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+}
+
+.scheduler-left-sidebar > .next-content-panel-wrapper  > .next-content-panel-container  > .next-content-panel > .next-content-panel-body {
+    border-left: 0;
+    border-right: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}

package/addon/templates/operations/orders/index.hbs

@@ -13,9 +13,9 @@
 {{#if this.isMapLayout}}
     <MapContainer @layout={{this.layout}} @onReady={{this.onMapContainerReady}}>
         <GlobalSearch @visible={{this.isSearchVisible}} @onPressOrder={{this.viewOrder}} />
-        <MapContainer::Toolbar @activeOrdersCount={{this.activeOrdersCount}} @liveMap={{this.liveMap}} @map={{this.leafletMap}} @onPressViewOrders={{this.toggleOrdersPanel}} @onPressSearch={{this.toggleSearch}} @onPressCreateOrder={{this.createOrder}} @onPressCreateDriver={{this.driversController.createDriver}} @onPressDriverProfile={{this.driversController.viewDriver}} />
+        <MapContainer::Toolbar @activeOrdersCount={{this.activeOrdersCount}} @liveMap={{this.liveMap}} @map={{this.leafletMap}} @onPressViewOrders={{this.toggleOrdersPanel}} @onPressSearch={{this.toggleSearch}} @onPressCreateOrder={{this.createOrder}} @onPressLiveMapDrawerToggle={{this.onPressLiveMapDrawerToggle}} />
         <OrderListOverlay @noBackdrop={{true}} @fullHeight={{true}} @outView={{not this.isOrdersPanelVisible}} @width={{if (media 'isMobile') "100%" "338px"}} @onPressCancel={{this.hideOrdersPanel}} @onPressCreateOrder={{this.createOrder}} @onPressViewOrder={{this.viewOrder}} @onPressCreateFleet={{this.fleetController.createFleet}} @onPressManageFleet={{this.fleetController.viewFleet}} @onPressCancelOrders={{this.bulkCancelOrders}} @onPressDeleteOrders={{this.bulkDeleteOrders}} />
-        <LiveMap id="leafletMap" class="next-leaflet-container-map" @lat={{1.3521}} @lng={{103.8198}} @zoom={{12}} @zoomControl={{false}} @onLoad={{this.setMapReference}} {{set-container-dimensions}} />
+        <LiveMap id="leafletMap" class="next-leaflet-container-map" @lat={{1.3521}} @lng={{103.8198}} @zoom={{12}} @zoomControl={{false}} @onLoad={{this.setMapReference}} @onDrawerReady={{this.setDrawerContext}} {{set-container-dimensions}} />
     </MapContainer>
 {{/if}}