@fleetbase/fleetops-engine 0.2.7 → 0.2.9

package/addon/components/settings-window.hbs

@@ -1,4 +1,4 @@
-<Overlay @onLoad={{this.onLoad}} @isOpen={{@isOpen}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{true}} @isMaximizable={{true}} @isMinimizable={{true}} as |overlay|>
+<Overlay @onLoad={{this.onLoad}} @isOpen={{@isOpen}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{true}} @isMaximizable={{true}} @isMinimizable={{true}} @width="600px" as |overlay|>
     <Overlay::Header @overlay={{overlay}} @title="FleetOps Settings" @onPressCancel={{@onPressCancel}}>
         <Button @icon="save" @type="primary" @text={{if (media 'isMobile') "" "Save Changes"}} @onClick={{this.saveSettings}} @isLoading={{this.isSaving}} @disabled={{or this.isLoading this.isSaving}} />
     </Overlay::Header>

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

@@ -1,43 +1,43 @@
-<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width="700">
+<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
     <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">
-                {{#if @vehicle.id}}
+                {{#if this.vehicle.id}}
                     <Button @type="default" @icon="car" @helpText="View vehicle details" @onClick={{this.viewDetails}} />
                 {{/if}}
             </div>
             <div class="flex flex-1 justify-end">
                 <div class="mr-2">
-                    <Button @icon={{if @vehicle.id "save" "check"}} @type="primary" @text={{if @vehicle.id "Save Vehicle" "Create Vehicle"}} @onClick={{this.save}} />
+                    <Button @icon={{if this.vehicle.id "save" "check"}} @type="primary" @text={{if this.vehicle.id "Save Vehicle" "Create Vehicle"}} @onClick={{this.save}} />
                 </div>
-                <Button @type="default" @icon="times" @helpText={{if @vehicle.id "Cancel edit vehicle" "Cancel new vehicle"}} @onClick={{@onPressCancel}} />
+                <Button @type="default" @icon="times" @helpText={{if this.vehicle.id "Cancel edit vehicle" "Cancel new vehicle"}} @onClick={{@onPressCancel}} />
             </div>
         </div>
         <div class="flex flex-row justify-between w-full">
             <div class="flex flex-col flex-1 w-3/4">
                 <div class="flex flex-row">
                     <div class="w-14 flex items-center justify-center">
-                        <Image src={{@vehicle.photo_url}} @fallbackSrc={{config "defaultValues.vehicleImage"}} alt={{@vehicle.name}} height="48" width="48" class="h-12 w-12" />
+                        <Image src={{this.vehicle.photo_url}} @fallbackSrc={{config "defaultValues.vehicleImage"}} alt={{this.vehicle.name}} height="48" width="48" class="h-12 w-12" />
                         <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
-                            <InputInfo @text={{@vehicle.public_id}} />
+                            <InputInfo @text={{this.vehicle.public_id}} />
                         </Attach::Tooltip>
                     </div>
                     <div class="flex flex-col">
                         <h1 class="text-gray-900 dark:text-white text-2xl">
-                            {{#if @vehicle.id}}
-                                {{@vehicle.displayName}}
+                            {{#if this.vehicle.id}}
+                                {{this.vehicle.displayName}}
                             {{else}}
-                                {{#if @vehicle.displayName}}
-                                    {{@vehicle.displayName}}
+                                {{#if this.vehicle.displayName}}
+                                    {{this.vehicle.displayName}}
                                 {{else}}
                                     <span>New Vehicle</span>
                                 {{/if}}
                             {{/if}}
                         </h1>
                         <div class="-mt-1">
-                            {{#if @vehicle.driver}}
+                            {{#if this.vehicle.driver}}
                                 <div class="flex flex-row items-center">
-                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{@vehicle.driver.name}}</span>
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{this.vehicle.driver.name}}</span>
                                 </div>
                             {{else}}
                                 <div class="flex flex-row items-center">
@@ -49,7 +49,7 @@
                 </div>
             </div>
             <div class="flex justify-end w-1/4">
-                <Badge @status={{@vehicle.status}} />
+                <Badge @status={{this.vehicle.status}} />
             </div>
         </div>
     </Overlay::Header>
@@ -62,50 +62,50 @@
                         <label>
                             Internal ID
                         </label>
-                        <Input @value={{@vehicle.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
+                        <Input @value={{this.vehicle.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
                     </div>
 
                     <div class="input-group mb-2">
                         <label>
                             Plate Number
                         </label>
-                        <Input @value={{@vehicle.plate_number}} @type="text" class="w-full form-input" placeholder="Plate Number" />
+                        <Input @value={{this.vehicle.plate_number}} @type="text" class="w-full form-input" placeholder="Plate Number" />
                     </div>
 
                     <div class="input-group mb-2">
                         <label>
                             VIN Number
                         </label>
-                        <Input @value={{@vehicle.vin}} @type="text" class="w-full form-input" placeholder="VIN Number" />
+                        <Input @value={{this.vehicle.vin}} @type="text" class="w-full form-input" placeholder="VIN Number" />
                     </div>
 
                     <div class="input-group mb-2">
                         <label>
                             Make
                         </label>
-                        <Input @value={{@vehicle.make}} @type="text" class="w-full form-input" placeholder="Vehicle Make" />
+                        <Input @value={{this.vehicle.make}} @type="text" class="w-full form-input" placeholder="Vehicle Make" />
                     </div>
 
                     <div class="input-group mb-2">
                         <label>
                             Model
                         </label>
-                        <Input @value={{@vehicle.model}} @type="text" class="w-full form-input" placeholder="Vehicle Model" />
+                        <Input @value={{this.vehicle.model}} @type="text" class="w-full form-input" placeholder="Vehicle Model" />
                     </div>
 
                     <div class="input-group mb-2">
                         <label>
                             Year
                         </label>
-                        <Input @value={{@vehicle.year}} @type="text" class="w-full form-input" placeholder="Vehicle Year" />
+                        <Input @value={{this.vehicle.year}} @type="text" class="w-full form-input" placeholder="Vehicle Year" />
                     </div>
 
                     <div class="input-group mb-2">
                         <label>
                             Driver Assigned
                         </label>
-                        <ModelSelect @modelName="driver" @selectedModel={{@vehicle.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut
-                                @vehicle.driver)}} as |model|>
+                        <ModelSelect @modelName="driver" @selectedModel={{this.vehicle.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut
+                                this.vehicle.driver)}} as |model|>
                             {{model.name}}
                         </ModelSelect>
                     </div>
@@ -116,13 +116,13 @@
                 <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                     <div class="input-group mb-2">
                         <InputLabel @labelText="Select map avatar" @helpText="Select an avatar to be used for rendering on maps when using geolocation tracking features." />
-                        <FetchSelect class="w-60" @placeholder="Select avatar" @path="vehicles/avatars" @value={{@vehicle.avatar_url}} @onSelect={{fn (mut
-                                @vehicle.avatar_url)}} as |option key|>
+                        <FetchSelect class="w-60" @placeholder="Select avatar" @path="vehicles/avatars" @value={{this.vehicle.avatar_url}} @onSelect={{fn (mut
+                                this.vehicle.avatar_url)}} as |option key|>
                             {{titleize (humanize key)}}
                         </FetchSelect>
                     </div>
                     <div>
-                        <img alt={{@vehicle.public_id}} src={{@vehicle.avatar_url}} class="w-24 h-24" />
+                        <img alt={{this.vehicle.public_id}} src={{this.vehicle.avatar_url}} class="w-24 h-24" />
                     </div>
                 </div>
             </ContentPanel>

package/addon/components/vehicle-form-panel.js

@@ -7,9 +7,33 @@ export default class VehicleFormPanelComponent extends Component {
     @service notifications;
     @service hostRouter;
     @service loader;
+    @service contextPanel;
+
+    constructor() {
+        super(...arguments);
+        this.vehicle = this.args.vehicle;
+        this.applyDynamicArguments();
+    }
+
+    applyDynamicArguments() {
+        // Apply context if available
+        if (this.args.context) {
+            this.vehicle = this.args.context;
+        }
+
+        // Apply dynamic arguments if available
+        if (this.args.dynamicArgs) {
+            const keys = Object.keys(this.args.dynamicArgs);
+
+            keys.forEach((key) => {
+                this[key] = this.args.dynamicArgs[key];
+            });
+        }
+    }
 
     @action save() {
-        const { vehicle, onAfterSave } = this.args;
+        const { onAfterSave } = this.args;
+        const { vehicle } = this;
 
         this.loader.showLoader('.overlay-inner-content', 'Saving vehicle...');
 
@@ -33,7 +57,6 @@ export default class VehicleFormPanelComponent extends Component {
     }
 
     @action viewDetails() {
-        const { vehicle } = this.args;
-        return this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details', vehicle.public_id);
+        this.contextPanel.focus(this.vehicle, 'viewing');
     }
 }

package/addon/components/vehicle-panel.hbs

@@ -1,8 +1,7 @@
-<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width="700">
+<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
     <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">
-                {{!-- <Button @type="default" @icon="location-arrow" @helpText="Locate vehicle" @onClick={{@onPressCancel}} /> --}}
                 <Button @type="default" @icon="pen" @helpText="Edit vehicle" @onClick={{this.editVehicle}} />
             </div>
             <div class="flex flex-1 justify-end">
@@ -13,17 +12,17 @@
             <div class="flex flex-col flex-1 w-3/4">
                 <div class="flex flex-row">
                     <div class="w-14 flex items-center justify-center">
-                        <Image src={{@vehicle.photo_url}} @fallbackSrc={{@vehicle.avatar_url}} alt={{@vehicle.name}} height="48" width="48" class="h-12 w-12" />
+                        <Image src={{this.vehicle.photo_url}} @fallbackSrc={{this.vehicle.avatar_url}} alt={{this.vehicle.name}} height="48" width="48" class="h-12 w-12" />
                         <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
-                            <InputInfo @text={{@vehicle.public_id}} />
+                            <InputInfo @text={{this.vehicle.public_id}} />
                         </Attach::Tooltip>
                     </div>
                     <div class="flex flex-col">
-                        <h1 class="text-gray-900 dark:text-white text-2xl">{{@vehicle.display_name}}</h1>
+                        <h1 class="text-gray-900 dark:text-white text-2xl">{{this.vehicle.display_name}}</h1>
                         <div class="-mt-1">
-                            {{#if @vehicle.driver}}
+                            {{#if this.vehicle.driver}}
                                 <div class="flex flex-row items-center">
-                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{@vehicle.driver.name}}</span>
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{this.vehicle.driver.name}}</span>
                                 </div>
                             {{else}}
                                 <div class="flex flex-row items-center">
@@ -36,7 +35,7 @@
                 </div>
             </div>
             <div class="flex justify-end w-1/4">
-                <Badge @status={{@vehicle.status}} />
+                <Badge @status={{this.vehicle.status}} />
             </div>
         </div>
     </Overlay::Header>
@@ -54,7 +53,7 @@
             </div>
         </div>
         <div class="tab-content tab-{{this.currentTab}}">
-            {{component this.tab.component vehicle=@vehicle tabOptions=this.tab params=this.tab.componentParams}}
+            {{component this.tab.component vehicle=this.vehicle tabOptions=this.tab params=this.tab.componentParams}}
         </div>
     </Overlay::Body>
 </Overlay>

package/addon/components/vehicle-panel.js

@@ -11,6 +11,7 @@ export default class VehiclePanelComponent extends Component {
     @service universe;
     @service store;
     @service hostRouter;
+    @service contextPanel;
     @tracked currentTab;
     @tracked devices = [];
     @tracked deviceApi = {};
@@ -39,10 +40,27 @@ export default class VehiclePanelComponent extends Component {
     constructor() {
         super(...arguments);
         this.vehicle = this.args.vehicle;
-        this.changeTab(this.args.tab || 'details');
+        this.changeTab(this.args.tab);
+        this.applyDynamicArguments();
     }
 
-    @action async changeTab(tab) {
+    applyDynamicArguments() {
+        // Apply context if available
+        if (this.args.context) {
+            this.vehicle = this.args.context;
+        }
+
+        // Apply dynamic arguments if available
+        if (this.args.dynamicArgs) {
+            const keys = Object.keys(this.args.dynamicArgs);
+
+            keys.forEach((key) => {
+                this[key] = this.args.dynamicArgs[key];
+            });
+        }
+    }
+
+    @action async changeTab(tab = 'details') {
         this.currentTab = tab;
 
         if (typeof this.args.onTabChanged === 'function') {
@@ -51,7 +69,6 @@ export default class VehiclePanelComponent extends Component {
     }
 
     @action editVehicle() {
-        const { vehicle } = this.args;
-        return this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.edit', vehicle.public_id);
+        this.contextPanel.focus(this.vehicle, 'editing');
     }
 }

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

@@ -567,8 +567,7 @@ export default class OperationsOrdersIndexNewController extends Controller {
 
     @action setupInterface() {
         if (this.leafletMap && this.leafletMap.liveMap) {
-            this.leafletMap.liveMap.hideDrivers();
-            this.leafletMap.liveMap.hideRoutes();
+            this.leafletMap.liveMap.hideAll();
 
             // track all layers added from this view
             this.leafletMap.on('layeradd', ({ layer }) => {
@@ -585,7 +584,7 @@ export default class OperationsOrdersIndexNewController extends Controller {
             });
         } else {
             // setup interface when livemap is ready
-            this.universe.on('livemap.ready', () => {
+            this.universe.on('fleetops.livemap.ready', () => {
                 this.setupInterface();
             });
         }
@@ -596,8 +595,7 @@ export default class OperationsOrdersIndexNewController extends Controller {
 
     @action resetInterface() {
         if (this.leafletMap && this.leafletMap.liveMap) {
-            this.leafletMap.liveMap.showDrivers();
-            this.leafletMap.liveMap.showRoutes();
+            this.leafletMap.liveMap.show(['drivers', 'vehicles', 'routes']);
         }
     }
 

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

@@ -170,8 +170,7 @@ export default class OperationsOrdersIndexViewController extends Controller {
 
     @action resetInterface() {
         if (this.leafletMap && this.leafletMap.liveMap) {
-            this.leafletMap.liveMap.showDrivers();
-            this.leafletMap.liveMap.showRoutes();
+            this.leafletMap.liveMap.show(['drivers', 'routes']);
         }
     }
 
@@ -219,8 +218,7 @@ export default class OperationsOrdersIndexViewController extends Controller {
                 this,
                 () => {
                     if (this.leafletMap && this.leafletMap.liveMap) {
-                        this.leafletMap.liveMap.hideDrivers();
-                        this.leafletMap.liveMap.hideRoutes();
+                        this.leafletMap.liveMap.hideAll();
                     }
 
                     // display order route on map
@@ -236,14 +234,14 @@ export default class OperationsOrdersIndexViewController extends Controller {
         };
 
         // re-display order routes when livemap has coordinates
-        this.universe.on('livemap.has_coordinates', this, displayOrderRoute);
+        this.universe.on('fleetops.livemap.has_coordinates', this, displayOrderRoute);
 
         // when transitioning away kill event listener
         this.hostRouter.on('routeWillChange', () => {
-            const isListening = this.universe.has('livemap.has_coordinates');
+            const isListening = this.universe.has('fleetops.livemap.has_coordinates');
 
             if (isListening) {
-                this.universe.off('livemap.has_coordinates', this, displayOrderRoute);
+                this.universe.off('fleetops.livemap.has_coordinates', this, displayOrderRoute);
             }
         });
 

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

@@ -113,6 +113,20 @@ export default class OperationsOrdersIndexController extends Controller {
         'layout',
     ];
 
+    /**
+     * The current driver being focused.
+     *
+     * @var {DriverModel|null}
+     */
+    @tracked focusedDriver;
+
+    /**
+     * The current vehicle being focused.
+     *
+     * @var {VehicleModel|null}
+     */
+    @tracked focusedVehicle;
+
     /**
      * The current page of data being viewed
      *
@@ -628,8 +642,7 @@ export default class OperationsOrdersIndexController extends Controller {
 
     @action resetView() {
         if (this.leafletMap && this.leafletMap.liveMap) {
-            this.leafletMap.liveMap.hideDrivers();
-            this.leafletMap.liveMap.hideRoutes();
+            this.leafletMap.liveMap.hideAll();
         }
     }
 

package/addon/engine.js

@@ -42,6 +42,12 @@ export default class FleetOpsEngine extends Engine {
 
         // register the driver panel
         universe.createRegistry('component:driver-panel');
+
+        // register vehicle context menu
+        universe.createRegistry('contextmenu:vehicle');
+
+        // register driver context menu
+        universe.createRegistry('contextmenu:driver');
     };
 }
 

package/addon/routes/operations/orders/index/view.js

@@ -8,8 +8,10 @@ export default class OperationsOrdersIndexViewRoute extends Route {
     @service store;
     @service socket;
 
-    @action willTransition() {
-        if (this.controller) {
+    @action willTransition(transition) {
+        const shouldReset = typeof transition.to.name === 'string' && !transition.to.name.includes('operations.orders');
+
+        if (this.controller && shouldReset) {
             this.controller.resetView();
         }
     }

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

@@ -28,7 +28,11 @@ export default class OperationsOrdersIndexRoute extends Route {
     };
 
     @action willTransition(transition) {
-        this.controller?.resetView(transition);
+        const shouldReset = typeof transition.to.name === 'string' && !transition.to.name.includes('operations.orders');
+
+        if (this.controller && shouldReset) {
+            this.controller.resetView(transition);
+        }
     }
 
     @action model(params) {

package/addon/services/context-panel.js

@@ -0,0 +1,106 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import getModelName from '@fleetbase/ember-core/utils/get-model-name';
+
+/**
+ * Service to manage the context panel in the application.
+ */
+export default class ContextPanelService extends Service {
+    /**
+     * Registry to map models to their corresponding components and arguments.
+     */
+    registry = {
+        driver: {
+            viewing: {
+                component: 'driver-panel',
+                componentArguments: [{ isResizable: true }, { width: '550px' }],
+            },
+            editing: {
+                component: 'driver-form-panel',
+                componentArguments: [{ isResizable: true }, { width: '550px' }],
+            },
+        },
+        vehicle: {
+            viewing: {
+                component: 'vehicle-panel',
+                componentArguments: [{ isResizable: true }, { width: '600px' }],
+            },
+            editing: {
+                component: 'vehicle-form-panel',
+                componentArguments: [{ isResizable: true }, { width: '600px' }],
+            },
+        },
+    };
+
+    /**
+     * The current context model.
+     */
+    @tracked currentContext;
+
+    /**
+     * The current context registry.
+     */
+    @tracked currentContextRegistry;
+
+    /**
+     * The current context component arguments.
+     */
+    @tracked currentContextComponentArguments = {};
+
+    /**
+     * Focuses on a given model with a specific intent.
+     * @param {Object} model - The model to focus on.
+     * @param {string} [intent='viewing'] - The intent for focusing (e.g., 'viewing', 'editing').
+     */
+    @action focus(model, intent = 'viewing') {
+        const modelName = getModelName(model);
+        const registry = this.registry[modelName];
+
+        if (registry && registry[intent]) {
+            this.currentContext = model;
+            this.currentContextRegistry = registry[intent];
+            this.currentContextComponentArguments = this.createDynamicArgsFromRegistry(registry[intent], model);
+        }
+    }
+
+    /**
+     * Clears the current context.
+     */
+    @action clear() {
+        this.currentContext = null;
+        this.currentContextRegistry = null;
+        this.currentContextComponentArguments = {};
+    }
+
+    @action changeIntent(intent) {
+        if (this.currentContext) {
+            return this.focus(this.currentContext, intent);
+        }
+    }
+
+    /**
+     * Creates dynamic arguments from the registry.
+     * @param {Object} registry - The registry for the current context.
+     * @param {Object} model - The model to focus on.
+     * @returns {Object} The dynamic arguments.
+     */
+    createDynamicArgsFromRegistry(registry, model) {
+        // Generate dynamic arguments object
+        const dynamicArgs = {};
+        const componentArguments = registry.componentArguments || [];
+
+        componentArguments.forEach((arg, index) => {
+            if (typeof arg === 'string') {
+                dynamicArgs[arg] = model[arg]; // Map string arguments to model properties
+            } else if (typeof arg === 'object' && arg !== null) {
+                Object.assign(dynamicArgs, arg);
+            } else {
+                // Handle other types of arguments as needed
+                dynamicArgs[`arg${index}`] = arg;
+            }
+        });
+
+        return dynamicArgs;
+    }
+}