@fleetbase/fleetops-engine 0.0.1

package/addon/components/global-search.hbs

@@ -0,0 +1,84 @@
+{{#if @visible}}
+    <div class="next-map-search-bar-container {{if @visible "is-visible"}}" {{did-insert this.setupComponent}}>
+        <div class="next-map-search-bar">
+            <FaIcon @icon="search" class="ml-4" />
+            <Input @value={{@value}} {{on "input" this.search}} placeholder="Search by keyword..." />
+            <div class="pr-4 flex items-center justify-center">
+                {{#if this.isLoading}}
+                    <Spinner class="text-sky-400" />
+                {{/if}}
+            </div>
+        </div>
+        <div class="next-map-search-results flex flex-col {{if this.results "has-results"}}">
+            {{#each this.results as |result|}}
+                <a href="javascript:;" class="next-map-search-result" {{on "click" (fn this.onAction "onPressOrder" result)}}>
+                    <div class="px-4">
+                        <div class="flex items-start justify-between mb-2">
+                            <div class="flex-1 truncate">
+                                <h3 class="text-base font-semibold">{{result.public_id}}</h3>
+                                <div class="flex flex-row items-center space-x-2">
+                                    <Badge @hideStatusDot={{true}} @status="default">{{result.createdAt}}</Badge>
+                                    <Badge @hideStatusDot={{true}} @status={{if result.has_driver_assigned "assigned" "default"}}>
+                                        <div class="flex flex-row items-center {{if result.has_driver_assigned "text-indigo-900" "text-gray-900"}}">
+                                            <FaIcon @icon="steering-wheel" @size="xs" class="mr-1" />
+                                            {{if result.has_driver_assigned result.driver_name "Unassigned"}}
+                                        </div>
+                                    </Badge>
+                                </div>
+                            </div>
+                            <div>
+                                <Badge @status={{result.status}} />
+                            </div>
+                        </div>
+                        <div class="text-xs">
+                            <div class="order-route-list">
+                                {{#if result.payload.pickup}}
+                                    <div class="{{@itemClass}} order-route-stop">
+                                        <div class="order-route-stop-index">
+                                            <div class="index-count">1</div>
+                                        </div>
+                                        <div class="order-route-location dark:text-gray-100">
+                                            {{result.payload.pickup.address}}
+                                        </div>
+                                    </div>
+                                {{/if}}
+
+                                {{#if result.payload.waypoints}}
+                                    {{#each result.payload.waypoints as |waypoint index|}}
+                                        <div class="{{@itemClass}} order-route-stop">
+                                            <div class="order-route-stop-index">
+                                                <div class="index-count">{{index}}</div>
+                                            </div>
+                                            <div class="order-route-location dark:text-gray-100">{{waypoint.address}}</div>
+                                        </div>
+                                    {{/each}}
+                                {{/if}}
+
+                                {{#if result.payload.dropoff}}
+                                    <div class="{{@itemClass}} order-route-stop">
+                                        <div class="order-route-stop-index">
+                                            <div class="index-count">{{add result.payload.waypoints.length 2}}</div>
+                                        </div>
+                                        <div class="order-route-location dark:text-gray-100">{{result.payload.dropoff.address}}</div>
+                                    </div>
+                                {{/if}}
+                            </div>
+                            <div>
+                                <div class="grid grid-cols-8 gap-2">
+                                    {{#each result.payload.entities as |entity|}}
+                                        <div role="listitem" title={{entity.name}}>
+                                            <div class="mb-1.5">
+                                                <img src={{entity.photo_url}} alt={{entity.name}} class="w-full" />
+                                            </div>
+                                            <div class="text-xs truncate">{{entity.name}}</div>
+                                        </div>
+                                    {{/each}}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </a>
+            {{/each}}
+        </div>
+    </div>
+{{/if}}

package/addon/components/global-search.js

@@ -0,0 +1,52 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { later } from '@ember/runloop';
+
+export default class GlobalSearchComponent extends Component {
+    @service store;
+    @tracked results = [];
+    @tracked isLoading;
+
+    @action setupComponent(element) {
+        later(
+            this,
+            () => {
+                element.querySelector('input').focus();
+            },
+            300
+        );
+    }
+
+    @action search(event) {
+        const { target } = event;
+        const { value } = target;
+
+        if (!value) {
+            this.results = [];
+            return;
+        }
+
+        this.isLoading = true;
+
+        this.store
+            .query('order', { query: value })
+            .then((orders) => {
+                this.results = orders;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action onAction(actionName, ...params) {
+        if (typeof this[actionName] === 'function') {
+            this[actionName](...params);
+        }
+
+        if (typeof this.args[actionName] === 'function') {
+            this.args[actionName](...params);
+        }
+    }
+}

package/addon/components/horizontal-route.hbs

@@ -0,0 +1,33 @@
+<div class="horizontal-route-scroller">
+    <div class="horizontal-route-scroller--scollbar">
+        {{#if (has-block)}}
+            {{#each this.locations as |location|}}
+                {{#let (eq location.uuid this.destination.uuid) as |isDestination|}}
+                    {{yield location isDestination}}
+                {{/let}}
+            {{/each}}
+        {{else}}
+            {{#each this.locations as |location|}}
+                <div>
+                    <div class="horizontal-route {{if (eq location.uuid this.destination.uuid) 'is-destination'}}">
+                        <div class="notch">
+                            {{#if (eq location.uuid this.destination.uuid)}}
+                                <Attach::Tooltip @class="clean" @animation="scale" @placement="top" @showOn="mouseenter focus">
+                                    <InputInfo @text="Destination" @iconClass="text-green-400" class="flex items-center" @spanClass="flex items-start justify-start text-left ml-1" />
+                                </Attach::Tooltip>
+                            {{/if}}
+                        </div>
+                        <div class="place mx-4">
+                            <div class="rounded-md shadow-sm text-xs font-semibold border border-gray-900 dark:bg-gray-900 truncate w-24 p-1 cursor-help">
+                                <span>{{location.street1}}</span>
+                                <Attach::Tooltip @class="clean" @animation="scale" @placement="top" @showOn="mouseenter focus">
+                                    <InputInfo @text={{location.address}} class="flex items-center" @spanClass="flex items-start justify-start text-left text-xs ml-1 truncate block" />
+                                </Attach::Tooltip>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {{/each}}
+        {{/if}}
+    </div>
+</div>

package/addon/components/horizontal-route.js

@@ -0,0 +1,48 @@
+import Component from '@glimmer/component';
+import { computed } from '@ember/object';
+import { isArray } from '@ember/array';
+
+export default class HorizontalRouteComponent extends Component {
+    @computed('args.payload') get locations() {
+        const { payload } = this.args;
+        const { pickup, dropoff, waypoints } = payload;
+        const locations = [];
+
+        if (pickup) {
+            locations.pushObject(pickup);
+        }
+
+        if (isArray(waypoints) && waypoints.length) {
+            for (let i = 0; i < waypoints.length; i++) {
+                const waypoint = waypoints.objectAt(i);
+
+                locations.pushObject(waypoint);
+            }
+        }
+
+        if (dropoff) {
+            locations.pushObject(dropoff);
+        }
+
+        return locations;
+    }
+
+    @computed('args.payload') get destination() {
+        const { payload } = this.args;
+        const { dropoff, waypoints } = payload;
+
+        if (isArray(waypoints) && waypoints.length) {
+            const waypoint = waypoints.find((location, index) => {
+                if (payload.current_waypoint_uuid) {
+                    return payload.current_waypoint_uuid === location.uuid;
+                }
+
+                return index === 0;
+            });
+
+            return waypoint;
+        }
+
+        return dropoff;
+    }
+}

package/addon/components/integrated-order-details.hbs

@@ -0,0 +1,117 @@
+<div>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-2">
+        {{#if this.isLalamove}}
+            <div class="field-info-container space-y-2">
+                <div class="field-name">Order ID</div>
+                <div class="field-value">
+                    {{n-a @details.orderId}}
+                </div>
+            </div>
+            <div class="field-info-container space-y-2">
+                <div class="field-name">Quotation ID</div>
+                <div class="field-value">
+                    {{n-a @details.quotationId}}
+                </div>
+            </div>
+
+            <div class="field-info-container space-y-2">
+                <div class="field-name">Driver ID</div>
+                <div class="field-value">
+                    {{n-a @details.driverId "No Driver Assigned"}}
+                </div>
+            </div>
+            <div class="field-info-container space-y-2">
+                <div class="field-name">Status</div>
+                <div class="field-value">
+                    {{smart-humanize @details.status}}
+                </div>
+            </div>
+            <div class="field-info-container space-y-2">
+                <div class="field-name">Distance</div>
+                <div class="field-value">
+                    {{format-meters @details.distance.value}}
+                </div>
+            </div>
+            <div class="field-info-container space-y-2">
+                <div class="field-name">Shareable Link</div>
+                <div class="field-value">
+                    <a href={{@details.shareLink}} class="break-words anchor-button" target="_lalamove_link">
+                        <div>
+                            <FaIcon @icon="link" />
+                        </div>
+                        <div>{{@details.shareLink}}</div>
+                    </a>
+                </div>
+            </div>
+            <div class="field-info-container space-y-2 lg:col-span-2">
+                <div class="field-name">Price Breakdown</div>
+                <div class="field-value">
+                    <div class="next-table-wrapper">
+                        <table class="table table-fixed w-full">
+                            <thead>
+                                <tr>
+                                    <th class="text-left">Item</th>
+                                    <th class="text-left">Amount</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {{#each-in @details.priceBreakdown as |key value|}}
+                                    {{#if (not (includes key this.skipInPriceBreakdown))}}
+                                        <tr>
+                                            <td>{{smart-humanize key}}</td>
+                                            <td>{{format-currency (mult value 100) @details.priceBreakdown.currency}}</td>
+                                        </tr>
+                                    {{/if}}
+                                {{/each-in}}
+                                <tr>
+                                    <td class="font-bold">Total</td>
+                                    <td class="font-bold">{{format-currency (mult @details.priceBreakdown.total 100) @details.priceBreakdown.currency}}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <div class="field-info-container space-y-2 lg:col-span-2">
+                <div class="field-name">Metadata</div>
+                <div class="field-value">
+                    <div class="next-table-wrapper">
+                        <table class="table table-fixed w-full">
+                            <thead>
+                                <tr>
+                                    <th class="text-left">Key</th>
+                                    <th class="text-left">Value</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {{#each-in @details.metadata as |key value|}}
+                                    <tr>
+                                        <td>{{smart-humanize key}}</td>
+                                        <td>{{value}}</td>
+                                    </tr>
+                                {{/each-in}}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        {{else}}
+            {{#each-in @details as |key value|}}
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">{{smart-humanize key}}</div>
+                    <div class="field-value">
+                        {{#if (is-array value)}}
+                            {{join ', ' value}}
+                        {{else if (is-object value)}}
+                            {{#each-in value as |k v|}}
+                                <div>{{smart-humanize k}}: {{v}}</div>
+                            {{/each-in}}
+                        {{else}}
+                            {{n-a value}}
+                        {{/if}}
+                    </div>
+                </div>
+            {{/each-in}}
+        {{/if}}
+    </div>
+</div>

package/addon/components/integrated-order-details.js

@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action, computed } from '@ember/object';
+import { equal } from '@ember/object/computed';
+
+export default class IntegratedOrderDetailsComponent extends Component {
+    @equal('args.integratedVendor.provider', 'lalamove') isLalamove;
+    @tracked skipInPriceBreakdown = ['currency', 'total'];
+    @action setupComponent() {}
+}

package/addon/components/leaflet-draw-control.js

@@ -0,0 +1,147 @@
+import 'leaflet-draw-src';
+import BaseLayer from 'ember-leaflet/components/base-layer';
+import { getProperties, computed } from '@ember/object';
+import { run } from '@ember/runloop';
+import { assign } from '@ember/polyfills';
+import { scheduleOnce } from '@ember/runloop';
+import { classify, camelize } from '@ember/string';
+import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
+
+export default class LeafletDrawControl extends BaseLayer {
+    leafletEvents = [
+        L.Draw.Event.CREATED,
+        L.Draw.Event.EDITED,
+        L.Draw.Event.EDITMOVE,
+        L.Draw.Event.EDITRESIZE,
+        L.Draw.Event.EDITSTART,
+        L.Draw.Event.EDITSTOP,
+        L.Draw.Event.EDITVERTEX,
+        L.Draw.Event.DELETED,
+        L.Draw.Event.DELETESTART,
+        L.Draw.Event.DELETESTOP,
+        L.Draw.Event.DRAWSTART,
+        L.Draw.Event.DRAWSTOP,
+        L.Draw.Event.DRAWVERTEX,
+    ];
+
+    leafletOptions = ['draw', 'edit', 'remove', 'poly', 'position'];
+
+    @computed('args', 'leaflefEvents.[]', 'leafletEvents') get usedLeafletEvents() {
+        return this.leafletEvents.filter((eventName) => {
+            eventName = camelize(eventName.replace(':', ' '));
+            let methodName = `_${eventName}`;
+            let actionName = `on${classify(eventName)}`;
+
+            return this[methodName] !== undefined || this.args[actionName] !== undefined;
+        });
+    }
+
+    @computed('args.draw', 'args.edit', 'args.remove', 'args.poly', 'args.position') get options() {
+        return {
+            position: getWithDefault(this.args, 'position', 'topright'),
+            draw: getWithDefault(this.args, 'draw', { marker: false, circlemarker: false, circle: false, polyline: false }),
+            edit: getWithDefault(this.args, 'edit', {}),
+            remove: getWithDefault(this.args, 'remove', {}),
+            poly: getWithDefault(this.args, 'poly', null),
+        };
+    }
+
+    @computed('args.parent._layer') get map() {
+        return this.args.parent._layer;
+    }
+
+    addToContainer() {
+        if (this._layer) {
+            this.map.addLayer(this._layer);
+        }
+    }
+
+    createLayer() {
+        const { onDrawFeatureGroupCreated } = this.args;
+        const drawingLayerGroup = new this.L.FeatureGroup();
+        const showDrawingLayer = getWithDefault(this.args, 'showDrawingLayer', true);
+
+        if (showDrawingLayer) {
+            if (typeof onDrawFeatureGroupCreated === 'function') {
+                onDrawFeatureGroupCreated(drawingLayerGroup, this.map);
+            }
+
+            drawingLayerGroup.addTo(this.map);
+        }
+
+        return drawingLayerGroup;
+    }
+
+    didCreateLayer() {
+        const { onDrawControlCreated, onDrawControlAddedToMap } = this.args;
+        const showDrawingLayer = getWithDefault(this.args, 'showDrawingLayer', true);
+
+        if (this.map && this._layer) {
+            this.options.edit = assign({ featureGroup: this._layer }, this.options.edit);
+            this.options.draw = assign({}, this.L.drawLocal.draw, this.options.draw);
+
+            // create draw control
+            const drawControl = new this.L.Control.Draw(this.options);
+
+            // trigger action/event draw control created
+            if (typeof onDrawControlCreated === 'function') {
+                onDrawControlCreated(drawControl, this.map);
+            }
+
+            // Add the draw control to the map
+            this.map.addControl(drawControl);
+
+            // trigger action/event draw control added to map
+            if (typeof onDrawControlAddedToMap === 'function') {
+                onDrawControlAddedToMap(drawControl, this.map);
+            }
+
+            // If showDrawingLayer, add new layer to the layerGroup
+            if (showDrawingLayer) {
+                this.map.on(this.L.Draw.Event.CREATED, ({ layer }) => {
+                    this._layer.addLayer(layer);
+                });
+            }
+        }
+    }
+
+    _addEventListeners() {
+        this._eventHandlers = {};
+
+        for (let eventName of this.usedLeafletEvents) {
+            const originalEventName = eventName;
+            // fix event name
+            eventName = camelize(eventName.replace(':', ' '));
+            const actionName = `on${classify(eventName)}`;
+            const methodName = `_${eventName}`;
+
+            // create an event handler that runs the function inside an event loop.
+            this._eventHandlers[originalEventName] = function (e) {
+                let fn = () => {
+                    // try to invoke/send an action for this event
+                    if (typeof this.args[actionName] === 'function') {
+                        this.args[actionName](e, this._layer, this.map);
+                    }
+
+                    // allow classes to add custom logic on events as well
+                    if (typeof this[methodName] === 'function') {
+                        this[methodName](e, this._layer, this.map);
+                    }
+                };
+
+                scheduleOnce('actions', this, fn);
+            };
+
+            this.map.addEventListener(originalEventName, this._eventHandlers[originalEventName], this);
+        }
+    }
+
+    _removeEventListeners() {
+        if (this._eventHandlers) {
+            for (let eventName of this.usedLeafletEvents) {
+                this.map.removeEventListener(eventName, this._eventHandlers[eventName], this);
+                delete this._eventHandlers[eventName];
+            }
+        }
+    }
+}

package/addon/components/leaflet-rotated-marker.js

@@ -0,0 +1,24 @@
+import MarkerLayer from 'ember-leaflet/components/marker-layer';
+import 'leaflet-rotatedmarker';
+
+export default class LeafletRotatedMarkerComponent extends MarkerLayer {
+    leafletOptions = [
+        ...this.leafletOptions,
+
+        /**
+         * Rotation angle, in degrees, clockwise.
+         *
+         * @argument rotationAngle
+         * @type {Number}
+         */
+        'rotationAngle',
+
+        /**
+         * The rotation center, as a transform-origin CSS rule.
+         *
+         * @argument rotationOrigin
+         * @type {String}
+         */
+        'rotationOrigin',
+    ];
+}

package/addon/components/live-map.hbs

@@ -0,0 +1,63 @@
+<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|>
+        <layers.tile @url={{this.tileSourceUrl}} />
+
+        {{#if this.isDriversVisible}}
+            {{#each this.drivers as |driver|}}
+                <layers.rotated-marker @icon={{icon iconUrl=driver.vehicle_avatar iconSize=(array 40 40)}} @location={{point-to-coordinates driver.location}} @onAdd={{fn this.onAction "onDriverAdded" driver}}>
+                    {{!-- <marker.popup @maxWidth="500" @minWidth="225">
+                        <DriverCard @driver={{driver}} @showCoordinates={{true}} @textClass="text-gray-900 dark:text-gray-100" />
+                    </marker.popup> --}}
+                </layers.rotated-marker>
+            {{/each}}
+        {{/if}}
+
+        {{!-- {{#if this.isRoutesVisible}}
+            {{#each this.routes as |route|}}
+                <layers.polyline @locations={{route.details.coordinates}} />
+
+                {{#if route.payload.pickup}}
+                    <layers.marker @location={{point-to-coordinates route.payload.pickup.location}} as |marker|>
+                        <marker.popup>
+                            <div>{{route.payload.pickup.address}}</div>
+                            <div>{{format-point route.payload.pickup.location}}</div>
+                        </marker.popup>
+                    </layers.marker>
+                {{/if}}
+                {{#each route.payload.waypoints as |waypoint|}}
+                    <layers.marker @location={{point-to-coordinates waypoint.location}} as |marker|>
+                        <marker.popup>
+                            <div>{{waypoint.address}}</div>
+                            <div>{{format-point waypoint.location}}</div>
+                        </marker.popup>
+                    </layers.marker>
+                {{/each}}
+
+                {{#if route.payload.dropoff}}
+                    <layers.marker @location={{point-to-coordinates route.payload.dropoff.location}} as |marker|>
+                        <marker.popup>
+                            <div>{{route.payload.dropoff.address}}</div>
+                            <div>{{format-point route.payload.dropoff.location}}</div>
+                        </marker.popup>
+                    </layers.marker>
+                {{/if}}
+            {{/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"}} />
+
+        {{#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|>
+                <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|>
+                    <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{zone.name}} Zone</polygon.tooltip>
+                </layers.polygon>
+            {{/each}}
+        {{/each}}
+
+        {{yield layers}}
+    </LeafletMap>
+</div>