@fleetbase/fleetops-engine 0.3.2 → 0.3.4

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

@@ -0,0 +1,216 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isBlank } from '@ember/utils';
+import { later } from '@ember/runloop';
+import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
+
+/**
+ * Represents a live map drawer vehicle listing component.
+ * This component is responsible for displaying and interacting with a list of vehicles on a live map.
+ *
+ * @extends Component
+ */
+export default class LiveMapDrawerVehicleListingComponent extends Component {
+    /**
+     * Service for managing context panels within the application.
+     * @service
+     */
+    @service contextPanel;
+
+    /**
+     * Service for triggering notifications.
+     * @service
+     */
+    @service notifications;
+
+    /**
+     * Service for CRUD operations.
+     * @service
+     */
+    @service crud;
+
+    /**
+     * The list of vehicles to display, tracked for reactivity.
+     * @tracked
+     */
+    @tracked vehicles = [];
+
+    /**
+     * The internal list of vehicles used for searching, tracked for reactivity.
+     * @tracked
+     */
+    @tracked _vehicles = [];
+
+    /**
+     * The current search query, tracked for reactivity.
+     * @tracked
+     */
+    @tracked query = '';
+
+    /**
+     * The table component reference, tracked for reactivity.
+     * @tracked
+     */
+    @tracked table = null;
+
+    /**
+     * The configuration for table columns including details like label, valuePath, and cellComponent,
+     * tracked for reactivity.
+     * @tracked
+     */
+    @tracked columns = [
+        {
+            label: 'Vehicle',
+            valuePath: 'display_name',
+            photoPath: 'avatar_url',
+            width: '100px',
+            cellComponent: 'table/cell/vehicle-name',
+            onClick: this.focus,
+            showOnlineIndicator: true,
+        },
+        {
+            label: 'Location',
+            valuePath: 'location',
+            width: '80px',
+            cellComponent: 'table/cell/point',
+            onClick: this.locate,
+        },
+        {
+            label: 'Status',
+            valuePath: 'status',
+            cellComponent: 'table/cell/status',
+            width: '60px',
+        },
+        {
+            label: 'Last Seen',
+            valuePath: 'updatedAgo',
+            width: '60px',
+        },
+        {
+            label: '',
+            cellComponent: 'table/cell/dropdown',
+            ddButtonText: false,
+            ddButtonIcon: 'ellipsis-h',
+            ddButtonIconPrefix: 'fas',
+            ddMenuLabel: 'Actions',
+            cellClassNames: 'overflow-visible',
+            wrapperClass: 'flex items-center justify-end mx-2',
+            width: '90px',
+            actions: [
+                {
+                    label: 'View vehicle details...',
+                    fn: this.focus,
+                },
+                {
+                    label: 'Edit vehicle...',
+                    fn: (vehicle) => {
+                        return this.focus(vehicle, 'editing');
+                    },
+                },
+                {
+                    label: 'Locate vehicle...',
+                    fn: this.locate,
+                },
+                {
+                    label: 'Delete vehicle...',
+                    fn: this.delete,
+                },
+            ],
+            sortable: false,
+            filterable: false,
+            resizable: false,
+            searchable: false,
+        },
+    ];
+
+    /**
+     * Initializes the component with vehicles passed in from `this.args` and sets up the live map reference.
+     */
+    constructor() {
+        super(...arguments);
+        this.vehicles = getWithDefault(this.args, 'vehicles', []);
+        this._vehicles = [...this.vehicles];
+        this.liveMap = this.args.liveMap;
+    }
+
+    /**
+     * Filters the vehicles list based on a query.
+     *
+     * @param {string} query - The query string to filter the vehicles list.
+     */
+    search(query) {
+        if (typeof query !== 'string' && !isBlank(query)) {
+            return;
+        }
+
+        this.vehicles = [
+            ...this._vehicles.filter((vehicle) => {
+                return typeof vehicle.displayName === 'string' && vehicle.displayName.toLowerCase().includes(query.toLowerCase());
+            }),
+        ];
+    }
+
+    /**
+     * Action to perform a search based on the input event's value.
+     *
+     * @param {Event} event - The input event containing the search value.
+     */
+    @action performSearch({ target: { value } }) {
+        this.search(value);
+    }
+
+    /**
+     * Action to focus on a vehicle in the live map and context panel.
+     *
+     * @param {object} vehicle - The vehicle object to focus on.
+     * @param {string} intent - The intent for focusing, default is 'viewing'.
+     */
+    @action focus(vehicle, intent = 'viewing') {
+        if (this.liveMap) {
+            this.liveMap.focusLayerByRecord(vehicle, 16, {
+                onAfterFocusWithRecord: () => {
+                    later(
+                        this,
+                        () => {
+                            this.contextPanel.focus(vehicle, intent);
+                        },
+                        600 * 2
+                    );
+                },
+            });
+        } else {
+            this.contextPanel.focus(vehicle, intent);
+        }
+    }
+
+    /**
+     * Action to locate a vehicle on the live map.
+     *
+     * @param {object} vehicle - The vehicle object to locate.
+     */
+    @action locate(vehicle) {
+        if (this.liveMap) {
+            this.liveMap.focusLayerByRecord(vehicle, 18);
+        } else {
+            this.notifications.warning('Unable to locate vehicle.');
+        }
+    }
+
+    /**
+     * Action to delete a vehicle from the list and perform cleanup.
+     *
+     * @param {object} vehicle - The vehicle object to delete.
+     * @param {object} options - Additional options for the delete operation.
+     */
+    @action delete(vehicle, options = {}) {
+        this.crud.delete(vehicle, {
+            onSuccess: () => {
+                this._vehicles.removeObject(vehicle);
+                this.vehicles.removeObject(vehicle);
+            },
+            ...options,
+        });
+    }
+}

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

@@ -0,0 +1,17 @@
+<Drawer @onResizeEnd={{@onResizeEnd}} @onResizeStart={{@onResizeStart}} @isMinimized={{@isMinimized}} @isOpen={{@isOpen}} @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 @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}}

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/driver-assign-vehicle.hbs

@@ -2,19 +2,10 @@
     <div class="modal-body-container">
         <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100">
             <InputGroup @name="Select Vehicle" @value={{@options.driver.vehicle_uuid}}>
-                <ModelSelect
-                    @modelName="vehicle"
-                    @selectedModel={{@options.driver.vehicle_uuid}}
-                    @placeholder="Select Vehicle to Assign"
-                    @triggerClass="form-select form-input"
-                    @infiniteScroll={{false}}
-                    @renderInPlace={{true}}
-                    @onChange={{fn (mut @options.driver.vehicle_uuid)}} as |model|
-                >
-                    {{model.name}}
+                <ModelSelect @modelName="vehicle" @selectedModel={{@options.driver.vehicle_uuid}} @placeholder="Select Vehicle to Assign" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.driver.vehicle)}} @onChangeId={{fn (mut @options.driver.vehicle_uuid)}} as |model|>
+                    {{model.display_name}}
                 </ModelSelect>
             </InputGroup>
         </div>
     </div>
-    {{yield}}
 </Modal::Default>

package/addon/components/modals/driver-assign-vendor.hbs

@@ -2,15 +2,7 @@
     <div class="modal-body-container">
         <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100">
             <InputGroup @name="Select Vendor" @value={{@options.driver.vendor_uuid}}>
-                <ModelSelect
-                    @modelName="vendor"
-                    @selectedModel={{@options.driver.vendor_uuid}}
-                    @placeholder="Select Vendor"
-                    @triggerClass="form-select form-input"
-                    @infiniteScroll={{false}}
-                    @renderInPlace={{true}}
-                    @onChange={{fn (mut @options.driver.vendor_uuid)}} as |model|
-                >
+                <ModelSelect @modelName="vendor" @selectedModel={{@options.driver.vendor_uuid}} @placeholder="Select Vendor" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.driver.vendor)}} @onChangeId={{fn (mut @options.driver.vendor_uuid)}} as |model|>
                     {{model.name}}
                 </ModelSelect>
             </InputGroup>

package/addon/components/modals/fuel-report-details.hbs

@@ -1,6 +1,10 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
         <div class="grid grid-cols-2 flex-col md:flex-row gap-2 mb-6">
+            <div class="field-info-container">
+                <div class="field-name">ID</div>
+                <div class="field-value">{{n-a @options.fuelReport.public_id}}</div>
+            </div>
             <div class="field-info-container">
                 <div class="field-name">Driver</div>
                 <div class="field-value">{{n-a @options.fuelReport.driver_name}}</div>

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,25 +11,53 @@
                 <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>
+            <div class="flex flex-row items-center">
                 <FaIcon @icon="calendar" class="mr-2" />
                 <span class="font-semibold">Driver Assigned</span>
+                <div class="ml-2">
+                    <a href="javascript:;" class="text-blue-400 hover:opacity-75" {{on "click" this.startAssignDriver}}>
+                        <FaIcon @icon="edit" @size="xs" />
+                    </a>
+                </div>
+            </div>
+            <div>
+                {{#if this.isAssigningDriver}}
+                    <ModelSelect @modelName="driver" @selectedModel={{@order.driver_assigned}} @placeholder="Select Driver" @triggerClass="form-select form-input form-input-sm w-48" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @disabled={{@model.isLoading}} @onChange={{this.assignDriver}} as |model|>
+                        <div class="flex items-center">
+                            <div class="w-5">
+                                <FaIcon @icon="id-card-alt" @size="xs" />
+                            </div>
+                            <div class="flex-1 flex flex-row truncate text-xs">
+                                <span class="uppercase mr-1.5 text-xs">{{model.name}}</span>
+                                <span class="uppercase text-xs">{{model.phone}}</span>
+                            </div>
+                        </div>
+                    </ModelSelect>
+                {{else}}
+                    <a href="javascript:;" disabled={{not @order.driver_assigned}} class={{unless @order.driver_assigned "dark:text-gray-600 text-gray-400"}} {{on "click" (fn this.onClickDriver @order.driver_assigned)}}>{{n-a @order.driver_assigned.name "No Driver Assigned"}}</a>
+                {{/if}}
             </div>
-            <span>{{@order.driver_assigned.name "None"}}</span>
         </div>
-        <div class="z-20 relative">
-            <RouteList @order={{@order}} />
+        <div class="flex items-center justify-between">
+            <div class="flex flex-row items-center">
+                <FaIcon @icon="calendar" class="mr-2" />
+                <span class="font-semibold">Vehicle Assigned</span>
+            </div>
+            <a href="javascript:;" disabled={{not @order.driver_assigned.vehicle}} class={{unless @order.driver_assigned.vehicle_uuid "dark:text-gray-600 text-gray-400"}} {{on "click" (fn this.onClickVehicle @order.driver_assigned.vehicle)}}>{{n-a @order.driver_assigned.vehicle_name "No Vehicle Assigned"}}</a>
         </div>
+        {{!-- <div class="z-20 relative">
+            <RouteList @order={{@order}} />
+        </div> --}}
     </div>
     {{yield}}
 </div>