@fleetbase/fleetops-engine 0.2.2 → 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/leaflet-drift-marker.js

@@ -0,0 +1,53 @@
+import MarkerLayer from 'ember-leaflet/components/marker-layer';
+
+export default class LeafletDriftMarkerComponent extends MarkerLayer {
+    leafletOptions = [
+        ...this.leafletOptions,
+
+        /**
+         * Required, duration im miliseconds marker will take to destination point.
+         *
+         * @argument duration
+         * @type {Number}
+         */
+        'duration',
+
+        /**
+         * Makes map view follow marker.
+         *
+         * @argument keepAtCenter
+         * @type {Boolean}
+         */
+        'keepAtCenter',
+
+        /**
+         * Rotation angle, in degrees, clockwise.
+         *
+         * @argument rotationAngle
+         * @type {Number}
+         */
+        'rotationAngle',
+
+        /**
+         * The rotation center, as a transform-origin CSS rule.
+         *
+         * @argument rotationOrigin
+         * @type {String}
+         */
+        'rotationOrigin',
+
+        /**
+         * The Public ID of the driver.
+         *
+         * @argument publicId
+         * @type {String}
+         */
+        'publicId',
+    ];
+
+    createLayer() {
+        const { DriftMarker } = window;
+
+        return new DriftMarker(...this.requiredOptions, this.options);
+    }
+}

package/addon/components/live-map.hbs

@@ -4,18 +4,18 @@
 
         {{#if this.isDriversVisible}}
             {{#each this.drivers as |driver|}}
-                <layers.rotated-marker @icon={{icon iconUrl=driver.vehicle_avatar iconSize=(array 32 32)}} @location={{point-to-coordinates driver.location}} @onAdd={{fn this.onAction "onDriverAdded" driver}} as |marker|>
+                <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|>
                     <marker.popup @maxWidth="500" @minWidth="225">
                         <DriverCard @driver={{driver}} @showCoordinates={{true}} @textClass="text-gray-900 dark:text-gray-100" />
                     </marker.popup>
-                    <marker.tooltip @permanent={{true}} @sticky={{true}}>{{driver.name}}</marker.tooltip>
-                </layers.rotated-marker>
+                    <marker.tooltip @permanent={{false}} @sticky={{true}}>{{driver.name}}</marker.tooltip>
+                </layers.drift-marker>
             {{/each}}
         {{/if}}
 
         {{#if this.isPlacesVisible}}
             {{#each this.places as |place|}}
-                <layers.marker @icon={{icon iconUrl="/engines-dist/images/building-marker.png" iconSize=(array 32 32)}} @location={{point-to-coordinates place.location}} @riseOnHover={{true}} @title={{place.address}} @alt={{place.address}} as |marker|>
+                <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|>
                     <marker.popup>
                         <div>{{place.address}}</div>
                         <div>{{format-point place.location}}</div>

package/addon/components/live-map.js

@@ -112,6 +112,7 @@ export default class LiveMapComponent extends Component {
         this.isReady = true;
 
         this.watchDrivers(this.drivers);
+        this.listenForOrders();
 
         if (typeof this.args.onReady === 'function') {
             this.args.onReady(this);
@@ -334,6 +335,11 @@ export default class LiveMapComponent extends Component {
     @action onDriverAdded(driver, event) {
         const { target } = event;
 
+        // set the marker instance to the driver model
+        set(driver, '_marker', target);
+
+        console.log('onDriverAdded()', ...arguments);
+
         this.createContextMenuForDriver(driver, target);
     }
 
@@ -721,6 +727,30 @@ export default class LiveMapComponent extends Component {
      * Functions are used to fetch date or handle socket callbacks/initializations.
      *
      */
+    @action async listenForOrders() {
+        // setup socket
+        const socket = this.socket.instance();
+
+        // listen on company channel
+        const channelId = `company.${this.currentUser.companyId}`;
+        const channel = socket.subscribe(channelId);
+
+        // track channel
+        this.channels.pushObject(channel);
+
+        // listen to channel for events
+        await channel.listener('subscribe').once();
+
+        // get incoming data and console out
+        (async () => {
+            for await (let output of channel) {
+                const { event, data } = output;
+
+                console.log(`[channel ${channelId}]`, output, event, data);
+            }
+        })();
+    }
+
     @action watchDrivers(drivers = []) {
         // setup socket
         const socket = this.socket.instance();
@@ -734,29 +764,54 @@ export default class LiveMapComponent extends Component {
 
     @action async listenForDriver(driver, socket) {
         // listen on company channel
-        const channelId = `driver.${driver.uuid}`;
+        const channelId = `driver.${driver.id}`;
         const channel = socket.subscribe(channelId);
 
-        // debug
-        // console.log(`socket subscribed to ${channelId}`);
-
         // track channel
         this.channels.pushObject(channel);
 
         // listen to channel for events
         await channel.listener('subscribe').once();
 
+        // Initialize an empty buffer to store incoming events
+        const eventBuffer = [];
+
+        // Time to wait in milliseconds before processing buffered events
+        const bufferTime = 1000 * 10;
+
+        // Function to process buffered events
+        const processBuffer = () => {
+            // Sort events by created_at
+            eventBuffer.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+
+            // Process sorted events
+            for (const output of eventBuffer) {
+                const { event, data } = output;
+                console.log(`${event} - #${data.additionalData.index} (${output.created_at}) [ ${data.location.coordinates.join(' ')} ]`);
+                // update driver heading degree
+                driver._marker.setRotationAngle(data.heading);
+                // move driver's marker to new coordinates
+                driver._marker.slideTo(data.location.coordinates, { duration: 2000 });
+            }
+
+            // Clear the buffer
+            eventBuffer.length = 0;
+        };
+
+        // Start a timer to process the buffer at intervals
+        setInterval(processBuffer, bufferTime);
+
         // get incoming data and console out
-        for await (let output of channel) {
-            const { event, data } = output;
-
-            if (event === 'driver.location_changed') {
-                driver.location = data.location;
-                driver.altitude = data.altitude;
-                driver.heading = data.heading;
-                driver.speed = data.speed;
+        (async () => {
+            for await (let output of channel) {
+                const { event } = output;
+
+                if (event === 'driver.location_changed' || event === 'driver.simulated_location_changed') {
+                    // Add the incoming event to the buffer
+                    eventBuffer.push(output);
+                }
             }
-        }
+        })();
     }
 
     @action closeChannels() {
@@ -829,15 +884,20 @@ export default class LiveMapComponent extends Component {
         this.isLoading = true;
 
         return new Promise((resolve) => {
-            this.fetch.get('fleet-ops/live/routes').then((routes) => {
-                this.isLoading = false;
+            this.fetch
+                .get('fleet-ops/live/routes')
+                .then((routes) => {
+                    this.isLoading = false;
 
-                if (typeof this.args.onRoutesLoaded === 'function') {
-                    this.args.onRoutesLoaded(routes);
-                }
+                    if (typeof this.args.onRoutesLoaded === 'function') {
+                        this.args.onRoutesLoaded(routes);
+                    }
 
-                resolve(routes);
-            });
+                    resolve(routes);
+                })
+                .catch(() => {
+                    resolve([]);
+                });
         });
     }
 
@@ -845,15 +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);
-            });
+                    resolve(drivers);
+                })
+                .catch(() => {
+                    resolve([]);
+                });
         });
     }
 
@@ -864,15 +929,20 @@ export default class LiveMapComponent extends Component {
         const center = this.leafletMap.getCenter();
 
         return new Promise((resolve) => {
-            this.fetch.get('fleet-ops/live/places', { within: center }, { normalizeToEmberData: true, normalizeModelType: 'place' }).then((places) => {
-                this.isLoading = false;
+            this.fetch
+                .get('fleet-ops/live/places', { within: center }, { normalizeToEmberData: true, normalizeModelType: 'place' })
+                .then((places) => {
+                    this.isLoading = false;
 
-                if (typeof this.args.onPlacesLoaded === 'function') {
-                    this.args.onPlacesLoaded(places);
-                }
+                    if (typeof this.args.onPlacesLoaded === 'function') {
+                        this.args.onPlacesLoaded(places);
+                    }
 
-                resolve(places);
-            });
+                    resolve(places);
+                })
+                .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}}