@fleetbase/fleetops-engine 0.2.3 → 0.2.4

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

@@ -0,0 +1,117 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, computed } from '@ember/object';
+import { isArray } from '@ember/array';
+import { isBlank } from '@ember/utils';
+import { timeout } from 'ember-concurrency';
+import { task } from 'ember-concurrency-decorators';
+
+export default class FleetVehicleListingComponent extends Component {
+    @service store;
+    @service appCache;
+    @tracked vehicles = [];
+    @tracked selected = [];
+    @tracked query;
+    @tracked isLoading = false;
+    @tracked isLoaded = false;
+
+    @computed('selected.[]') get ids() {
+        return this.selected.map((selection) => selection.id);
+    }
+
+    @action async setupComponent() {
+        const { selected, fleet } = this.args;
+
+        this.selected = isArray(selected) && selected.length ? selected : [];
+        this.vehicles = await this.queryFleetVehicles(fleet);
+    }
+
+    @action setSelected() {
+        const { selected } = this.args;
+
+        if (isArray(selected) && selected.length) {
+            this.selected = selected;
+        }
+    }
+
+    @action select(option, selected) {
+        if (selected) {
+            this.selected.pushObject(option);
+        } else {
+            this.selected.removeObject(option);
+        }
+
+        option.setProperties({ selected });
+
+        if (typeof this.args.onChange === 'function') {
+            this.args.onChange(this.selected);
+        }
+    }
+
+    @action onAdd(vehicle) {
+        if (typeof this.args.onRemoveVehicle === 'function') {
+            this.args.onAddVehicle(vehicle);
+        }
+
+        const index = this.vehicles.findIndex((d) => d.id === vehicle.id);
+
+        if (index === -1) {
+            this.vehicles.pushObject(vehicle);
+        }
+    }
+
+    @action onRemove(vehicle) {
+        if (typeof this.args.onRemoveVehicle === 'function') {
+            this.args.onRemoveVehicle(vehicle);
+        }
+
+        this.vehicles.removeObject(vehicle);
+    }
+
+    @action queryFleetVehicles(fleet, query = null) {
+        this.isLoading = true;
+
+        const cacheKey = `${fleet.id}:fleetVehicles`;
+        // const cachedResults = this.appCache.getEmberData(cacheKey, 'vehicle');
+
+        // if (cachedResults) {
+        //     this.vehicles = this.toggleSelected(cachedResults);
+        //     this.isLoaded = true;
+        // }
+
+        return new Promise((resolve) => {
+            this.store.query('vehicle', { query, fleet: fleet.id }).then((vehicles) => {
+                this.isLoading = false;
+                this.isLoaded = true;
+
+                // save to cache
+                if (!query) {
+                    this.appCache.setEmberData(cacheKey, vehicles);
+                }
+
+                resolve(this.toggleSelected(vehicles));
+            });
+        });
+    }
+
+    @action toggleSelected(options = []) {
+        return options.map((option) => {
+            option.set('selected', this.ids.includes(option.id));
+
+            return option;
+        });
+    }
+
+    @task({ restartable: true }) *search({ target: { value } }) {
+        const { fleet } = this.args;
+
+        if (isBlank(value)) {
+            return;
+        }
+
+        yield timeout(300);
+
+        this.vehicles = yield this.queryFleetVehicles(fleet, value);
+    }
+}

package/addon/components/live-map.js

@@ -804,7 +804,7 @@ export default class LiveMapComponent extends Component {
         // get incoming data and console out
         (async () => {
             for await (let output of channel) {
-                const { event, data } = output;
+                const { event } = output;
 
                 if (event === 'driver.location_changed' || event === 'driver.simulated_location_changed') {
                     // Add the incoming event to the buffer
@@ -905,17 +905,20 @@ export default class LiveMapComponent extends Component {
         this.isLoading = true;
 
         return new Promise((resolve) => {
-            this.fetch.get('fleet-ops/live/drivers', {}, { normalizeToEmberData: true, normalizeModelType: 'driver' }).then((drivers) => {
-                this.isLoading = false;
+            this.fetch
+                .get('fleet-ops/live/drivers', {}, { normalizeToEmberData: true, normalizeModelType: 'driver' })
+                .then((drivers) => {
+                    this.isLoading = false;
 
-                if (typeof this.args.onDriversLoaded === 'function') {
-                    this.args.onDriversLoaded(drivers);
-                }
+                    if (typeof this.args.onDriversLoaded === 'function') {
+                        this.args.onDriversLoaded(drivers);
+                    }
 
-                resolve(drivers);
-            });
-        }).catch(() => {
-            resolve([]);
+                    resolve(drivers);
+                })
+                .catch(() => {
+                    resolve([]);
+                });
         });
     }
 

package/addon/components/modals/fleet-details.hbs

@@ -27,5 +27,6 @@
             </div>
         </div>
         <FleetDriverListing @fleet={{@options.fleet}} @onAddDriver={{@options.addDriver}} @onRemoveDriver={{@options.removeDriver}} />
+        <FleetVehicleListing @fleet={{@options.fleet}} @onAddVehicle={{@options.addVehicle}} @onRemoveVehicle={{@options.removeVehicle}} />
     </div>
 </Modal::Default>

package/addon/components/settings-window.hbs

@@ -1,6 +1,6 @@
 <Overlay @onLoad={{this.onLoad}} @isOpen={{@isOpen}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{true}} @isMaximizable={{true}} @isMinimizable={{true}} 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}} @isSubscriptionRequired={{true}} />
+        <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>
 
     <Overlay::Body>

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

@@ -0,0 +1,131 @@
+<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width="700">
+    <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}}
+                    <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}} />
+                </div>
+                <Button @type="default" @icon="times" @helpText={{if @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" />
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
+                            <InputInfo @text={{@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}}
+                            {{else}}
+                                {{#if @vehicle.displayName}}
+                                    {{@vehicle.displayName}}
+                                {{else}}
+                                    <span>New Vehicle</span>
+                                {{/if}}
+                            {{/if}}
+                        </h1>
+                        <div class="-mt-1">
+                            {{#if @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>
+                                </div>
+                            {{else}}
+                                <div class="flex flex-row items-center">
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">No driver assigned</span>
+                                </div>
+                            {{/if}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-end w-1/4">
+                <Badge @status={{@vehicle.status}} />
+            </div>
+        </div>
+    </Overlay::Header>
+
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
+        <div class="flex-1 space-y-4">
+            <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
+                    <div class="input-group mb-2">
+                        <label>
+                            Internal ID
+                        </label>
+                        <Input @value={{@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" />
+                    </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" />
+                    </div>
+
+                    <div class="input-group mb-2">
+                        <label>
+                            Make
+                        </label>
+                        <Input @value={{@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" />
+                    </div>
+
+                    <div class="input-group mb-2">
+                        <label>
+                            Year
+                        </label>
+                        <Input @value={{@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|>
+                            {{model.name}}
+                        </ModelSelect>
+                    </div>
+                </div>
+            </ContentPanel>
+
+            <ContentPanel @title="Avatar" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <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|>
+                            {{titleize (humanize key)}}
+                        </FetchSelect>
+                    </div>
+                    <div>
+                        <img alt={{@vehicle.public_id}} src={{@vehicle.avatar_url}} class="w-24 h-24" />
+                    </div>
+                </div>
+            </ContentPanel>
+        </div>
+    </Overlay::Body>
+</Overlay>

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

@@ -0,0 +1,39 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class VehicleFormPanelComponent extends Component {
+    @service store;
+    @service notifications;
+    @service hostRouter;
+    @service loader;
+
+    @action save() {
+        const { vehicle, onAfterSave } = this.args;
+
+        this.loader.showLoader('.overlay-inner-content', 'Saving vehicle...');
+
+        try {
+            return vehicle
+                .save()
+                .then((vehicle) => {
+                    this.notifications.success(`Vehicle (${vehicle.displayName}) saved successfully.`);
+
+                    if (typeof onAfterSave === 'function') {
+                        onAfterSave(vehicle);
+                    }
+                })
+                .catch(this.notifications.serverError)
+                .finally(() => {
+                    this.loader.removeLoader();
+                });
+        } catch (error) {
+            this.loader.removeLoader();
+        }
+    }
+
+    @action viewDetails() {
+        const { vehicle } = this.args;
+        return this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details', vehicle.public_id);
+    }
+}

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

@@ -0,0 +1,34 @@
+<div class="p-4">
+    <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+        <div class="grid grid-cols-2 gap-2 text-xs md:mb-6 dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">Name</div>
+                <div class="field-value">{{n-a @vehicle.display_name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Internal ID</div>
+                <div class="field-value">{{n-a @vehicle.internal_id}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Plate Number</div>
+                <div class="field-value">{{n-a @vehicle.plate_number}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">VIN Number</div>
+                <div class="field-value">{{n-a @vehicle.vin}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Make</div>
+                <div class="field-value">{{n-a @vehicle.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Model</div>
+                <div class="field-value">{{n-a @vehicle.model}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Year</div>
+                <div class="field-value">{{n-a @vehicle.year}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+</div>

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

@@ -0,0 +1 @@
+{{yield}}

package/addon/components/vehicle-panel.hbs

@@ -0,0 +1,60 @@
+<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width="700">
+    <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">
+                <Button @type="default" @icon="times" @helpText="Close vehicle details" @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={{@vehicle.avatar_url}} alt={{@vehicle.name}} height="48" width="48" class="h-12 w-12" />
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
+                            <InputInfo @text={{@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>
+                        <div class="-mt-1">
+                            {{#if @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>
+                                </div>
+                            {{else}}
+                                <div class="flex flex-row items-center">
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">No driver assigned</span>
+                                    {{!-- <Button @icon="user-plus" @size="xs" @helpText="Assign a driver to vehicle" /> --}}
+                                </div>
+                            {{/if}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-end w-1/4">
+                <Badge @status={{@vehicle.status}} />
+            </div>
+        </div>
+    </Overlay::Header>
+    <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
+        <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
+            <div class="ui-tabs mt-4">
+                <nav>
+                    {{#each this.tabs as |tab|}}
+                        <a href="javascript:;" class="ui-tab {{if (eq this.currentTab tab.slug) 'active' }}" {{on "click" (fn this.changeTab tab.slug)}}>
+                            <FaIcon @icon={{tab.icon}} class="mr-1" />
+                            <span>{{tab.title}}</span>
+                        </a>
+                    {{/each}}
+                </nav>
+            </div>
+        </div>
+        <div class="tab-content tab-{{this.currentTab}}">
+            {{component this.tab.component vehicle=@vehicle tabOptions=this.tab params=this.tab.componentParams}}
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/components/vehicle-panel.js

@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action, computed } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import VehiclePanelDetailComponent from './vehicle-panel/details';
+
+export default class VehiclePanelComponent extends Component {
+    @service fetch;
+    @service modalsManager;
+    @service universe;
+    @service store;
+    @service hostRouter;
+    @tracked currentTab;
+    @tracked devices = [];
+    @tracked deviceApi = {};
+    @tracked vehicle;
+
+    get tabs() {
+        const registeredTabs = this.universe.getMenuItemsFromRegistry('component:vehicle-panel');
+        // this.universe._createMenuItem('Tracking', null, { icon: 'satellite-dish', component: VehiclePanelTrackingComponent }),
+        const defaultTabs = [this.universe._createMenuItem('Details', null, { icon: 'circle-info', component: VehiclePanelDetailComponent })];
+
+        if (isArray(registeredTabs)) {
+            return [...defaultTabs, ...registeredTabs];
+        }
+
+        return defaultTabs;
+    }
+
+    @computed('currentTab', 'tabs') get tab() {
+        if (this.currentTab) {
+            return this.tabs.find(({ slug }) => slug === this.currentTab);
+        }
+
+        return null;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.vehicle = this.args.vehicle;
+        this.changeTab(this.args.tab || 'details');
+    }
+
+    @action async changeTab(tab) {
+        this.currentTab = tab;
+
+        if (typeof this.args.onTabChanged === 'function') {
+            this.args.onTabChanged(tab);
+        }
+    }
+
+    @action editVehicle() {
+        const { vehicle } = this.args;
+        return this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.edit', vehicle.public_id);
+    }
+}

package/addon/controllers/management/drivers/index/details.js

@@ -0,0 +1,8 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class ManagementDriverIndexDetailsController extends Controller {
+    @action transitionBack() {
+        return this.transitionToRoute('management.drivers.index');
+    }
+}

package/addon/controllers/management/drivers/index/edit.js

@@ -0,0 +1,80 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ManagementDriversIndexEditController extends Controller {
+    /**
+     * True if updating service rate.
+     *
+     * @var {Boolean}
+     */
+    @tracked isUpdatingDriver = false;
+    /**
+     * Inject the `loader` service
+     *
+     * @var {Service}
+     */
+    @service loader;
+    /**
+     * Inject the `notifications` service
+     *
+     * @var {Service}
+     */
+    @service notifications;
+    /**
+     * Inject the `hostRouter` service
+     *
+     * @var {Service}
+     */
+    @service hostRouter;
+    /**
+     * Inject the `currentUser` service
+     *
+     * @var {Service}
+     */
+    @service store;
+    /**
+     * Updates the drivers to server
+     *
+     * @void
+     */
+    @action updateDriver() {
+        const { driver } = this;
+
+        this.isUpdatingDriver = true;
+        this.loader.showLoader('.overlay-inner-content', 'Updating driver...');
+
+        try {
+            return driver
+                .save()
+                .then((driver) => {
+                    return this.transitionToRoute('management.drivers.index').then(() => {
+                        this.notifications.success(`Driver '${driver.name}' updated`);
+                        this.resetForm();
+                        this.hostRouter.refresh();
+                    });
+                })
+                .catch(this.notifications.serverError)
+                .finally(() => {
+                    this.isUpdatingDriver = false;
+                    this.loader.removeLoader();
+                });
+        } catch (error) {
+            this.isUpdatingDriver = false;
+            this.loader.removeLoader();
+        }
+    }
+
+    @action transitionBack() {
+        return this.transitionToRoute('management.drivers.index');
+    }
+    /**
+     * Resets the driver form
+     *
+     * @void
+     */
+    @action resetForm() {
+        this.driver = this.store.createRecord('driver');
+    }
+}