@fleetbase/fleetops-engine 0.2.8 → 0.2.9

package/addon/components/context-panel.hbs

@@ -0,0 +1,5 @@
+{{#if this.contextPanel.currentContextRegistry}}
+    {{#let this.contextPanel.currentContext this.contextPanel.currentContextRegistry  this.contextPanel.currentContextComponentArguments as |model registry dynamicArgs|}}
+        {{component registry.component context=model dynamicArgs=dynamicArgs onPressCancel=this.contextPanel.clear}}
+    {{/let}}
+{{/if}}

package/addon/components/context-panel.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class ContextPanelComponent extends Component {
+    @service contextPanel;
+}

package/addon/components/driver-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 @driver.id}}
+                {{#if this.driver.id}}
                     <Button @type="default" @icon="id-card" @helpText="View driver details" @onClick={{this.viewDetails}} />
                 {{/if}}
             </div>
             <div class="flex flex-1 justify-end">
                 <div class="mr-2">
-                    <Button @icon={{if @driver.id "save" "check"}} @type="primary" @text={{if @driver.id "Save Driver" "Create Driver"}} @onClick={{this.save}} />
+                    <Button @icon={{if this.driver.id "save" "check"}} @type="primary" @text={{if this.driver.id "Save Driver" "Create Driver"}} @onClick={{this.save}} />
                 </div>
-                <Button @type="default" @icon="times" @helpText={{if @driver.id "Cancel edit driver" "Cancel new driver"}} @onClick={{@onPressCancel}} />
+                <Button @type="default" @icon="times" @helpText={{if this.driver.id "Cancel edit driver" "Cancel new driver"}} @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-start">
-                        <Image src={{@driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{@driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                        <Image src={{this.driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{this.driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
                         <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
-                            <InputInfo @text={{@driver.public_id}} />
+                            <InputInfo @text={{this.driver.public_id}} />
                         </Attach::Tooltip>
                     </div>
                     <div class="flex flex-col pt-2">
                         <h1 class="text-gray-900 dark:text-white text-2xl">
-                            {{#if @driver.id}}
-                                {{@driver.name}}
+                            {{#if this.driver.id}}
+                                {{this.driver.name}}
                             {{else}}
-                                {{#if @driver.name}}
-                                    {{@driver.name}}
+                                {{#if this.driver.name}}
+                                    {{this.driver.name}}
                                 {{else}}
                                     <span>New Driver</span>
                                 {{/if}}
                             {{/if}}
                         </h1>
                         <div class="-mt-1">
-                            {{#if @driver.vehicle}}
+                            {{#if this.driver.vehicle}}
                                 <div class="flex flex-row items-center">
-                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{@driver.vehicle.displayName}}</span>
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{this.driver.vehicle.displayName}}</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={{@driver.status}} />
+                <Badge @status={{this.driver.status}} />
             </div>
         </div>
     </Overlay::Header>
@@ -61,7 +61,7 @@
                     <label>
                         Name
                     </label>
-                    <Input @value={{@driver.name}} @type="text" class="w-full form-input" placeholder="Name" />
+                    <Input @value={{this.driver.name}} @type="text" class="w-full form-input" placeholder="Name" />
                 </div>
             </div>
 
@@ -70,35 +70,35 @@
                     <label>
                         Internal ID
                     </label>
-                    <Input @value={{@driver.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
+                    <Input @value={{this.driver.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
                 </div>
 
                 <div class="input-group">
                     <label>
                         Drivers License
                     </label>
-                    <Input @value={{@driver.drivers_license_number}} @type="text" class="w-full form-input" placeholder="Drivers License" />
+                    <Input @value={{this.driver.drivers_license_number}} @type="text" class="w-full form-input" placeholder="Drivers License" />
                 </div>
 
                 <div class="input-group">
                     <label>
                         Email
                     </label>
-                    <Input @value={{@driver.email}} @type="text" class="w-full form-input" placeholder="Email" />
+                    <Input @value={{this.driver.email}} @type="text" class="w-full form-input" placeholder="Email" />
                 </div>
 
                 <div class="input-group">
                     <label>
                         Phone
                     </label>
-                    <PhoneInput @value={{@driver.phone}} @onInput={{fn (mut @driver.phone)}} class="form-input w-full" />
+                    <PhoneInput @value={{this.driver.phone}} @onInput={{fn (mut this.driver.phone)}} class="form-input w-full" />
                 </div>
 
                 <div class="input-group">
                     <label>
                         Vendor
                     </label>
-                    <ModelSelect @modelName="vendor" @selectedModel={{@driver.vendor}} @placeholder="Select Vendor" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @driver.vendor)}} as |model|>
+                    <ModelSelect @modelName="vendor" @selectedModel={{this.driver.vendor}} @placeholder="Select Vendor" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.driver.vendor)}} as |model|>
                         {{model.name}}
                     </ModelSelect>
                 </div>
@@ -107,7 +107,7 @@
                     <label>
                         Vehicle
                     </label>
-                    <ModelSelect @modelName="vehicle" @selectedModel={{@driver.vehicle}} @placeholder="Select Vehicle" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @driver.vehicle)}} as |model|>
+                    <ModelSelect @modelName="vehicle" @selectedModel={{this.driver.vehicle}} @placeholder="Select Vehicle" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.driver.vehicle)}} as |model|>
                         {{model.display_name}}
                     </ModelSelect>
                 </div>
@@ -116,14 +116,14 @@
                     <label>
                         City
                     </label>
-                    <Input @value={{@driver.city}} @type="text" class="w-full form-input" placeholder="City" />
+                    <Input @value={{this.driver.city}} @type="text" class="w-full form-input" placeholder="City" />
                 </div>
 
                 <div class="input-group">
                     <label>
                         Country
                     </label>
-                    <CountrySelect class="w-full form-input form-select form-datalist" @value={{@driver.country}} @onChange={{fn (mut @driver.country)}} placeholder="Country" />
+                    <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.driver.country}} @onChange={{fn (mut this.driver.country)}} placeholder="Country" />
                 </div>
             </div>
         </div>

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

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 
@@ -6,10 +7,35 @@ export default class DriverFormPanelComponent extends Component {
     @service store;
     @service notifications;
     @service hostRouter;
+    @service contextPanel;
     @service loader;
+    @tracked driver;
+
+    constructor() {
+        super(...arguments);
+        this.driver = this.args.driver;
+        this.applyDynamicArguments();
+    }
+
+    applyDynamicArguments() {
+        // Apply context if available
+        if (this.args.context) {
+            this.driver = 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 { driver, onAfterSave } = this.args;
+        const { driver } = this;
+        const { onAfterSave } = this.args;
 
         this.loader.showLoader('.overlay-inner-content', 'Saving driver...');
 
@@ -33,7 +59,6 @@ export default class DriverFormPanelComponent extends Component {
     }
 
     @action viewDetails() {
-        const { driver } = this.args;
-        return this.hostRouter.transitionTo('console.fleet-ops.management.drivers.index.details', driver.public_id);
+        this.contextPanel.focus(this.driver, 'viewing');
     }
 }

package/addon/components/driver-panel.hbs

@@ -1,4 +1,4 @@
-<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">
@@ -13,17 +13,17 @@
             <div class="flex flex-col flex-1 w-3/4">
                 <div class="flex flex-row">
                     <div class="w-14 flex items-center justify-start">
-                        <Image src={{@driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{@driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                        <Image src={{this.driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{this.driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
                         <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
-                            <InputInfo @text={{@driver.public_id}} />
+                            <InputInfo @text={{this.driver.public_id}} />
                         </Attach::Tooltip>
                     </div>
                     <div class="flex flex-col">
-                        <h1 class="text-gray-900 dark:text-white text-2xl">{{@driver.name}}</h1>
+                        <h1 class="text-gray-900 dark:text-white text-2xl">{{this.driver.name}}</h1>
                         <div class="-mt-1">
-                            {{#if @driver.vehicle}}
+                            {{#if this.driver.vehicle}}
                                 <div class="flex flex-row items-center">
-                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{@driver.vehicle.displayName}}</span>
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{this.driver.vehicle.displayName}}</span>
                                 </div>
                             {{else}}
                                 <div class="flex flex-row items-center">
@@ -36,7 +36,7 @@
                 </div>
             </div>
             <div class="flex justify-end w-1/4">
-                <Badge @status={{@driver.status}} />
+                <Badge @status={{this.driver.status}} />
             </div>
         </div>
     </Overlay::Header>
@@ -54,7 +54,7 @@
             </div>
         </div>
         <div class="tab-content tab-{{this.currentTab}}">
-            {{component this.tab.component driver=@driver tabOptions=this.tab params=this.tab.componentParams}}
+            {{component this.tab.component driver=this.driver tabOptions=this.tab params=this.tab.componentParams}}
         </div>
     </Overlay::Body>
 </Overlay>

package/addon/components/driver-panel.js

@@ -11,10 +11,11 @@ export default class DriverPanelComponent extends Component {
     @service universe;
     @service store;
     @service hostRouter;
+    @service contextPanel;
     @tracked currentTab;
     @tracked devices = [];
     @tracked deviceApi = {};
-    @tracked vehicle;
+    @tracked driver;
 
     get tabs() {
         const registeredTabs = this.universe.getMenuItemsFromRegistry('component:driver-panel');
@@ -38,11 +39,28 @@ export default class DriverPanelComponent extends Component {
 
     constructor() {
         super(...arguments);
-        this.vehicle = this.args.vehicle;
-        this.changeTab(this.args.tab || 'details');
+        this.driver = this.args.driver;
+        this.changeTab(this.args.tab);
+        this.applyDynamicArguments();
     }
 
-    @action async changeTab(tab) {
+    applyDynamicArguments() {
+        // Apply context if available
+        if (this.args.context) {
+            this.driver = 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 DriverPanelComponent extends Component {
     }
 
     @action editDriver() {
-        const { driver } = this.args;
-        return this.hostRouter.transitionTo('console.fleet-ops.management.drivers.index.edit', driver.public_id);
+        this.contextPanel.focus(this.driver, 'editing');
     }
 }

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

@@ -13,7 +13,7 @@
         </div>
         <div class="w-56">
             {{#if @onAddVehicle}}
-                <ModelSelect @modelName="vehicle" @selectedModel={{@options.selectedVehicle}} @placeholder="Add vehicle to fleet" @triggerClass="form-select form-input form-select-sm form-input-sm" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onAdd}} as |model|>
+                <ModelSelect @modelName="vehicle" @query={{hash assignedFleet=false}}  @selectedModel={{@options.selectedVehicle}} @placeholder="Add vehicle to fleet" @triggerClass="form-select form-input form-select-sm form-input-sm" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onAdd}} as |model|>
                     {{model.display_name}}
                 </ModelSelect>
             {{/if}}

package/addon/components/live-map.hbs

@@ -1,10 +1,10 @@
-<div class="live-map-component {{@wrapperClass}}" {{did-insert this.setupLiveMap}}>
-    <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.setMapReference}} {{will-destroy this.closeChannels}} ...attributes as |layers|>
+<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|>
         <layers.tile @url={{this.tileSourceUrl}} />
 
-        {{#if this.isDriversVisible}}
+        {{#if this.visibilityControls.drivers}}
             {{#each this.drivers as |driver|}}
-                <layers.drift-marker @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.onAction "onDriverAdded" driver}} as |marker|>
+                <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|>
                     <marker.popup @maxWidth="500" @minWidth="225">
                         <DriverCard @driver={{driver}} @showCoordinates={{true}} @textClass="text-gray-900 dark:text-gray-100" />
                     </marker.popup>
@@ -13,9 +13,20 @@
             {{/each}}
         {{/if}}
 
-        {{#if this.isPlacesVisible}}
+        {{#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|>
+                    <marker.tooltip @permanent={{false}} @sticky={{true}}>
+                        <div>{{vehicle.displayName}}</div>
+                        <div>{{if vehicle.online "Online" "Offline"}}</div>
+                    </marker.tooltip>
+                </layers.drift-marker>
+            {{/each}}
+        {{/if}}
+
+        {{#if this.visibilityControls.places}}
             {{#each this.places as |place|}}
-                <layers.marker @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|>
+                <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>
@@ -57,15 +68,15 @@
             {{/each}}
         {{/if}} --}}
 
-        <layers.draw-control @position="topright" @draw={{hash marker=false circlemarker=false circle=false polyline=false}} @onDrawDrawstop={{fn this.onAction "onDrawDrawstop"}} @onDrawDeleted={{fn this.onAction "onDrawDeleted"}} @onDrawEdited={{fn this.onAction "onDrawEdited"}} @onDrawDeletestart={{fn this.onAction "onDrawDeletestart"}} @onDrawEditstop={{fn this.onAction "onDrawEditstop"}} @onDrawControlCreated={{fn this.onAction "onDrawControlCreated"}} @onDrawFeatureGroupCreated={{fn this.onAction "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.onAction "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.onAction "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}}