@fleetbase/fleetops-engine 0.3.1 → 0.3.3

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

@@ -0,0 +1,240 @@
+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 driver listing component.
+ * This component is responsible for displaying and interacting with a list of drivers on a live map.
+ *
+ * @extends Component
+ */
+export default class LiveMapDrawerDriverListingComponent extends Component {
+    /**
+     * Service for managing context panels within the application.
+     * @service
+     */
+    @service contextPanel;
+
+    /**
+     * Service for triggering notifications.
+     * @service
+     */
+    @service notifications;
+
+    /**
+     * Service for triggering notifications.
+     * @service
+     */
+    @service hostRouter;
+
+    /**
+     * Service for CRUD operations.
+     * @service
+     */
+    @service crud;
+
+    /**
+     * The list of drivers to display, tracked for reactivity.
+     * @tracked
+     */
+    @tracked drivers = [];
+
+    /**
+     * The internal list of drivers used for searching, tracked for reactivity.
+     * @tracked
+     */
+    @tracked _drivers = [];
+
+    /**
+     * 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: 'Driver',
+            valuePath: 'name',
+            photoPath: 'photo_url',
+            width: '100px',
+            cellComponent: 'cell/driver-name',
+            onClick: this.focus,
+        },
+        {
+            label: 'Location',
+            valuePath: 'location',
+            width: '80px',
+            cellComponent: 'table/cell/point',
+            onClick: this.locate,
+        },
+        {
+            label: 'Current Job',
+            valuePath: 'current_job_id',
+            width: '80px',
+            cellComponent: 'table/cell/anchor',
+            onClick: this.job,
+        },
+        {
+            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 driver details...',
+                    fn: this.focus,
+                },
+                {
+                    label: 'Edit driver...',
+                    fn: (driver) => {
+                        return this.focus(driver, 'editing');
+                    },
+                },
+                {
+                    label: 'Locate driver...',
+                    fn: this.locate,
+                },
+                {
+                    label: 'Delete driver...',
+                    fn: this.delete,
+                },
+            ],
+            sortable: false,
+            filterable: false,
+            resizable: false,
+            searchable: false,
+        },
+    ];
+
+    /**
+     * Initializes the component with drivers passed in from `this.args` and sets up the live map reference.
+     */
+    constructor() {
+        super(...arguments);
+        this.drivers = getWithDefault(this.args, 'drivers', []);
+        this._drivers = [...this.drivers];
+        this.liveMap = this.args.liveMap;
+    }
+
+    /**
+     * Filters the drivers list based on a query.
+     *
+     * @param {string} query - The query string to filter the drivers list.
+     */
+    search(query) {
+        if (typeof query !== 'string' && !isBlank(query)) {
+            return;
+        }
+
+        this.drivers = [
+            ...this._drivers.filter((driver) => {
+                return typeof driver.name === 'string' && driver.name.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 driver in the live map and context panel.
+     *
+     * @param {object} driver - The driver object to focus on.
+     * @param {string} intent - The intent for focusing, default is 'viewing'.
+     */
+    @action focus(driver, intent = 'viewing') {
+        if (this.liveMap) {
+            this.liveMap.focusLayerByRecord(driver, 16, {
+                onAfterFocusWithRecord: () => {
+                    later(
+                        this,
+                        () => {
+                            this.contextPanel.focus(driver, intent);
+                        },
+                        600 * 2
+                    );
+                },
+            });
+        } else {
+            this.contextPanel.focus(driver, intent);
+        }
+    }
+
+    /**
+     * Action to locate a driver on the live map.
+     *
+     * @param {object} driver - The driver object to locate.
+     */
+    @action locate(driver) {
+        if (this.liveMap) {
+            this.liveMap.focusLayerByRecord(driver, 18);
+        } else {
+            this.notifications.warning('Unable to locate driver.');
+        }
+    }
+
+    /**
+     * Transitino to view the drivers current job
+     *
+     * @param {DriverModel} driver
+     * @memberof LiveMapDrawerDriverListingComponent
+     */
+    @action job(driver) {
+        if (driver.current_job_id) {
+            this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index.view', driver.current_job_id);
+        }
+    }
+
+    /**
+     * Action to delete a driver from the list and perform cleanup.
+     *
+     * @param {object} driver - The driver object to delete.
+     * @param {object} options - Additional options for the delete operation.
+     */
+    @action delete(driver, options = {}) {
+        this.crud.delete(driver, {
+            onSuccess: () => {
+                this._drivers.removeObject(driver);
+                this.drivers.removeObject(driver);
+            },
+            ...options,
+        });
+    }
+}

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

@@ -0,0 +1,6 @@
+<div class="flex flex-row items-center px-5 py-2 border-b border-gray-200 dark:border-gray-700">
+    <div>
+        <Input @value={{this.query}} {{on "input" this.performSearch}} @type="text" class="form-input form-input-sm w-60" placeholder="Filter places by keyword..." />
+    </div>
+</div>
+<Table @rows={{this.places}} @columns={{this.columns}} @onSetup={{fn (mut this.table)}} />

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

@@ -0,0 +1,204 @@
+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 place listing component.
+ * This component is responsible for displaying and interacting with a list of places on a live map.
+ *
+ * @extends Component
+ */
+export default class LiveMapDrawerPlaceListingComponent 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 places to display, tracked for reactivity.
+     * @tracked
+     */
+    @tracked places = [];
+
+    /**
+     * The internal list of places used for searching, tracked for reactivity.
+     * @tracked
+     */
+    @tracked _places = [];
+
+    /**
+     * 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: 'Place',
+            valuePath: 'address',
+            width: '200px',
+            cellComponent: 'table/cell/anchor',
+            onClick: this.focus,
+            showOnlineIndicator: true,
+        },
+        {
+            label: 'Location',
+            valuePath: 'location',
+            width: '80px',
+            cellComponent: 'table/cell/point',
+            onClick: this.locate,
+        },
+        {
+            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 place details...',
+                    fn: this.focus,
+                },
+                {
+                    label: 'Edit place...',
+                    fn: (place) => {
+                        return this.focus(place, 'editing');
+                    },
+                },
+                {
+                    label: 'Locate place...',
+                    fn: this.locate,
+                },
+                {
+                    label: 'Delete place...',
+                    fn: this.delete,
+                },
+            ],
+            sortable: false,
+            filterable: false,
+            resizable: false,
+            searchable: false,
+        },
+    ];
+
+    /**
+     * Initializes the component with places passed in from `this.args` and sets up the live map reference.
+     */
+    constructor() {
+        super(...arguments);
+        this.places = getWithDefault(this.args, 'places', []);
+        this._places = [...this.places];
+        this.liveMap = this.args.liveMap;
+    }
+
+    /**
+     * Filters the places list based on a query.
+     *
+     * @param {string} query - The query string to filter the places list.
+     */
+    search(query) {
+        if (typeof query !== 'string' && !isBlank(query)) {
+            return;
+        }
+
+        this.places = [
+            ...this._places.filter((place) => {
+                return typeof place.address === 'string' && place.address.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 place in the live map and context panel.
+     *
+     * @param {object} place - The place object to focus on.
+     * @param {string} intent - The intent for focusing, default is 'viewing'.
+     */
+    @action focus(place, intent = 'viewing') {
+        if (this.liveMap) {
+            this.liveMap.focusLayerByRecord(place, 17, {
+                onAfterFocusWithRecord: () => {
+                    later(
+                        this,
+                        () => {
+                            this.contextPanel.focus(place, intent);
+                        },
+                        600 * 2
+                    );
+                },
+            });
+        } else {
+            this.contextPanel.focus(place, intent);
+        }
+    }
+
+    /**
+     * Action to locate a place on the live map.
+     *
+     * @param {object} place - The place object to locate.
+     */
+    @action locate(place) {
+        if (this.liveMap) {
+            this.liveMap.focusLayerByRecord(place, 18);
+        } else {
+            this.notifications.warning('Unable to locate place.');
+        }
+    }
+
+    /**
+     * Action to delete a place from the list and perform cleanup.
+     *
+     * @param {object} place - The place object to delete.
+     * @param {object} options - Additional options for the delete operation.
+     */
+    @action delete(place, options = {}) {
+        this.crud.delete(place, {
+            onSuccess: () => {
+                this._places.removeObject(place);
+                this.places.removeObject(place);
+            },
+            ...options,
+        });
+    }
+}

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

@@ -0,0 +1,6 @@
+<div class="flex flex-row items-center px-5 py-2 border-b border-gray-200 dark:border-gray-700">
+    <div>
+        <Input @value={{this.query}} {{on "input" this.performSearch}} @type="text" class="form-input form-input-sm w-60" placeholder="Filter vehicles by keyword..." />
+    </div>
+</div>
+<Table @rows={{this.vehicles}} @columns={{this.columns}} @onSetup={{fn (mut this.table)}} />

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 @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>