@fleetbase/fleetops-engine 0.4.3 → 0.4.5

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

@@ -103,5 +103,6 @@
                 </div>
             </InputGroup>
         </div>
+        <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>

package/addon/components/driver-panel.hbs

@@ -79,5 +79,6 @@
         <div class="tab-content tab-{{this.tab.slug}}">
             {{component this.tab.component driver=this.driver tabOptions=this.tab options=this.tab.componentParams}}
         </div>
+        <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>

package/addon/components/edit-order-route-panel.hbs

@@ -0,0 +1,183 @@
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @onOpen={{this.onOpen}}
+    @onClose={{this.onClose}}
+    @onToggle={{this.onToggle}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizeble={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "570px"}}
+>
+    <Overlay::Header @title={{concat "Edit order " this.order.public_id " route"}}>
+        <Button @type="primary" @icon="check" @text="Save" @helpText="Save order route changes" @onClick={{this.onSave}} @wrapperClass="mr-2" />
+        <Button @type="default" @icon="times" @helpText={{t "fleet-ops.common.cancel"}} @onClick={{this.onPressCancel}} />
+    </Overlay::Header>
+
+    <Overlay::Body @increaseInnerBodyHeightBy={{1000}}>
+        <div class="p-4">
+            <div class="flex flex-row justify-between mb-6">
+                <div class="flex">
+                    <Toggle @isToggled={{this.order.payload.isMultiDrop}} @onToggle={{this.toggleMultiDropOrder}} @label={{t "fleet-ops.component.modals.order-route-form.toggle"}} />
+                </div>
+                <div class="flex flex-1 justify-end space-x-2">
+                    {{#if this.order.payload.isMultiDrop}}
+                        {{!-- <Button @type="magic" @icon="magic" @text={{t "fleet-ops.component.modals.order-route-form.optimize"}} @size="sm" @onClick={{fn this.optimizeRoute}} @helpText={{t "fleet-ops.component.modals.order-route-form.optimize-text"}} @disabled={{lt this.order.payload.waypoints.length 3}} @isLoading={{this.isOptimizingRoute}} /> --}}
+                        <Button
+                            @icon="map-marked-alt"
+                            @text={{t "fleet-ops.component.modals.order-route-form.add"}}
+                            @size="sm"
+                            @onClick={{this.addWaypoint}}
+                            @helpText={{t "fleet-ops.component.modals.order-route-form.add-text"}}
+                        />
+                    {{/if}}
+                </div>
+            </div>
+
+            {{#if this.order.payload.isMultiDrop}}
+                <DragSortList class="overflow-visible" @items={{this.order.payload.waypoints}} @dragEndAction={{this.sortWaypoints}} as |waypoint index|>
+                    <div id={{concat "waypoint_" (add index 1)}} class="py-1 mb-3">
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center justify-between cursor-move">
+                                <FaIcon @icon="grip-lines" @prefix="fas" class="mr-3 text-gray-100" />
+                                <label class="waypoint-label dark:text-gray-100 text-sm">
+                                    {{waypoint-label (add index 1)}}
+                                </label>
+                            </div>
+
+                            <div class="flex-1 px-4">
+                                <ModelSelect
+                                    @modelName="place"
+                                    @selectedModel={{waypoint}}
+                                    @placeholder={{concat (t "fleet-ops.operations.orders.index.new.select-waypoint-placeholder") " " (add index 1)}}
+                                    @triggerClass="form-select form-input truncate max-w-300px"
+                                    @infiniteScroll={{false}}
+                                    @customSearchEndpoint="places/search"
+                                    @query={{hash geo=true latitude=this.latitude longitude=this.longitude}}
+                                    @renderInPlace={{true}}
+                                    @onChange={{fn this.setWaypointPlace index}}
+                                    as |model|
+                                >
+                                    {{model.address}}
+                                </ModelSelect>
+
+                                {{#unless waypoint.isNew}}
+                                    {{#if waypoint.hasInvalidCoordinates}}
+                                        <div class="leading-5 text-sm text-red-400 mt-2">
+                                            <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                                            {{t "fleet-ops.component.modals.order-route-form.invalid"}}
+                                        </div>
+                                    {{/if}}
+                                {{/unless}}
+                            </div>
+
+                            <div class="flex items-center">
+                                <Button class="mr-2" @icon="edit" @size="sm" @onClick={{fn this.editPlace waypoint}} />
+                                <Button @type="danger" @icon="trash" @iconPrefix="fas" @size="sm" @onClick={{fn this.removeWaypoint waypoint}} />
+                            </div>
+                        </div>
+                    </div>
+                </DragSortList>
+            {{else}}
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs dark:text-gray-100">
+                    <div class="input-group">
+                        <div class="flex items-center justify-between">
+                            <label>{{t "fleet-ops.component.modals.order-route-form.pickup"}}</label>
+
+                            {{#if this.order.payload.pickup}}
+                                <a href="javascript:;" {{on "click" (fn this.editPlace this.order.payload.pickup)}}>{{t "fleet-ops.component.modals.order-route-form.edit-address"}}</a>
+                            {{/if}}
+                        </div>
+
+                        <ModelSelect
+                            @modelName="place"
+                            @selectedModel={{this.order.payload.pickup}}
+                            @placeholder={{t "fleet-ops.component.modals.order-route-form.select-pickup"}}
+                            @triggerClass="form-select form-input"
+                            @infiniteScroll={{false}}
+                            @customSearchEndpoint="places/search"
+                            @query={{hash geo=true latitude=this.latitude longitude=this.longitude}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn this.setPayloadPlace "pickup"}}
+                            as |model|
+                        >
+                            {{model.address}}
+                        </ModelSelect>
+
+                        {{#if this.order.payload.pickup.hasInvalidCoordinates}}
+                            <div class="leading-5 text-sm text-red-400 mt-2">
+                                <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                                {{t "fleet-ops.component.modals.order-route-form.invalid"}}
+                            </div>
+                        {{/if}}
+                    </div>
+
+                    <div class="input-group">
+                        <div class="flex items-center justify-between">
+                            <label>{{t "fleet-ops.component.modals.order-route-form.dropoff"}}</label>
+
+                            {{#if this.order.payload.dropoff}}
+                                <a href="javascript:;" {{on "click" (fn this.editPlace this.order.payload.dropoff)}}>{{t "fleet-ops.component.modals.order-route-form.edit-address"}}</a>
+                            {{/if}}
+                        </div>
+
+                        <ModelSelect
+                            @modelName="place"
+                            @selectedModel={{this.order.payload.dropoff}}
+                            @placeholder={{t "fleet-ops.component.modals.order-route-form.select-dropoff"}}
+                            @triggerClass="form-select form-input"
+                            @infiniteScroll={{false}}
+                            @customSearchEndpoint="places/search"
+                            @query={{hash geo=true latitude=this.latitude longitude=this.longitude}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn this.setPayloadPlace "dropoff"}}
+                            as |model|
+                        >
+                            {{model.address}}
+                        </ModelSelect>
+
+                        {{#if this.order.payload.dropoff.hasInvalidCoordinates}}
+                            <div class="leading-5 text-sm text-red-400 mt-2">
+                                <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                                {{t "fleet-ops.component.modals.order-route-form.invalid"}}
+                            </div>
+                        {{/if}}
+                    </div>
+
+                    <div class="input-group">
+                        <div class="flex items-center justify-between">
+                            <label>{{t "fleet-ops.component.modals.order-route-form.return"}}</label>
+
+                            {{#if this.order.payload.return}}
+                                <a href="javascript:;" {{on "click" (fn this.editPlace this.order.payload.return)}}>{{t "fleet-ops.component.modals.order-route-form.edit-address"}}</a>
+                            {{/if}}
+                        </div>
+
+                        <ModelSelect
+                            @modelName="place"
+                            @selectedModel={{this.order.payload.return}}
+                            @placeholder={{t "fleet-ops.component.modals.order-route-form.select-return"}}
+                            @triggerClass="form-select form-input"
+                            @infiniteScroll={{false}}
+                            @customSearchEndpoint="places/search"
+                            @query={{hash geo=true latitude=this.latitude longitude=this.longitude}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn this.setPayloadPlace "return"}}
+                            as |model|
+                        >
+                            {{model.address}}
+                        </ModelSelect>
+
+                        {{#if this.order.payload.return.hasInvalidCoordinates}}
+                            <div class="leading-5 text-sm text-red-400 mt-2">
+                                <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                                {{t "fleet-ops.component.modals.order-route-form.invalid"}}
+                            </div>
+                        {{/if}}
+                    </div>
+                </div>
+            {{/if}}
+        </div>
+        <Spacer @height="300px" />
+    </Overlay::Body>
+</Overlay>

package/addon/components/edit-order-route-panel.js

@@ -0,0 +1,265 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+import getRoutingHost from '@fleetbase/ember-core/utils/get-routing-host';
+import Point from '@fleetbase/fleetops-data/utils/geojson/point';
+import findClosestWaypoint from '@fleetbase/ember-core/utils/find-closest-waypoint';
+
+export default class EditOrderRoutePanelComponent extends Component {
+    /**
+     * Fetch service.
+     *
+     * @type {Service}
+     */
+    @service fetch;
+
+    /**
+     * Ember data store service.
+     *
+     * @type {Service}
+     */
+    @service store;
+
+    /**
+     * Service for managing routing within the host app.
+     *
+     * @type {Service}
+     */
+    @service hostRouter;
+
+    /**
+     * Service for managing the modals.
+     *
+     * @type {Service}
+     */
+    @service modalsManager;
+
+    /**
+     * Service for managing the context panel.
+     *
+     * @type {Service}
+     */
+    @service contextPanel;
+
+    /**
+     * Service for internationalization.
+     *
+     * @type {Service}
+     */
+    @service intl;
+
+    /**
+     * Service for notifications
+     *
+     * @type {Service}
+     */
+    @service notifications;
+
+    /**
+     * The orderwhich route is being edited.
+     *
+     * @type {OrderModel}
+     * @tracked
+     */
+    @tracked order;
+
+    /**
+     * Initializes the vehicle panel component.
+     */
+    constructor() {
+        super(...arguments);
+        this.order = this.args.order;
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Handles save action for the order route.
+     *
+     * @method
+     * @action
+     */
+    @action onSave() {
+        const isActionOverrided = contextComponentCallback(this, 'onSave', this.order);
+
+        if (!isActionOverrided) {
+            return this.order
+                .save()
+                .then((order) => {
+                    this.notifications.success(this.intl.t('fleet-ops.operations.orders.index.view.update-success', { orderId: order.public_id }));
+                    contextComponentCallback(this, 'onAfterSave', order);
+                })
+                .catch((error) => {
+                    this.notifications.serverError(error);
+                });
+        }
+    }
+
+    /**
+     * Handles the cancel action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.order);
+    }
+
+    @action async editPlace(place) {
+        await this.modalsManager.done();
+
+        this.contextPanel.focus(place, 'editing', {
+            args: {
+                onClose: () => {
+                    this.editOrderRoute(this.order);
+                },
+            },
+        });
+    }
+
+    @action toggleMultiDropOrder(isMultiDrop) {
+        const { pickup, dropoff } = this.order.payload;
+
+        if (isMultiDrop) {
+            // if pickup move it to multipdrop
+            if (pickup) {
+                this.addWaypointFromExistingPlace(pickup);
+            }
+
+            // if pickup move it to multipdrop
+            if (dropoff) {
+                this.addWaypointFromExistingPlace(dropoff);
+            }
+
+            this.order.payload.setProperties({
+                pickup_uuid: null,
+                dropoff_uuid: null,
+            });
+        } else {
+            const waypoint = this.store.createRecord('waypoint');
+            this.order.payload.waypoints.pushObject(waypoint);
+
+            this.order.payload.setProperties({
+                pickup_uuid: null,
+                dropoff_uuid: null,
+                pickup: null,
+                dropoff: null,
+            });
+        }
+
+        contextComponentCallback(this, 'onRouteChanged');
+    }
+
+    addWaypointFromExistingPlace(place) {
+        const waypoint = this.store.createRecord('waypoint', { place, location: place.location });
+        this.order.payload.waypoints.pushObject(waypoint);
+
+        // fire callback
+        contextComponentCallback(this, 'onWaypointAdded', waypoint);
+    }
+
+    @action removeWaypoint(waypoint) {
+        this.order.payload.waypoints.removeObject(waypoint);
+
+        // fire callback
+        contextComponentCallback(this, 'onWaypointRemoved', waypoint);
+        contextComponentCallback(this, 'onRouteChanged');
+    }
+
+    @action addWaypoint() {
+        const location = new Point(0, 0);
+        const place = this.store.createRecord('place', { location });
+        const waypoint = this.store.createRecord('waypoint', { place, location });
+
+        this.order.payload.waypoints.pushObject(waypoint);
+        // fire callback
+        contextComponentCallback(this, 'onWaypointAdded', waypoint);
+    }
+
+    @action setWaypointPlace(index, place) {
+        if (isArray(this.order.payload.waypoints) && !this.order.payload.waypoints.objectAt(index)) {
+            return;
+        }
+
+        this.order.payload.waypoints.objectAt(index).setProperties({
+            name: place.name,
+            place_uuid: place.id,
+            location: place.location,
+            place,
+        });
+
+        // fire callback waypoint place selected
+        contextComponentCallback(this, 'onWaypointPlaceSelected', place);
+        contextComponentCallback(this, 'onRouteChanged');
+    }
+
+    @action setPayloadPlace(prop, place) {
+        this.order.payload.set(prop, place);
+
+        // fire callback
+        contextComponentCallback(this, 'onPlaceSelected', place);
+        contextComponentCallback(this, 'onRouteChanged');
+    }
+
+    @action async optimizeRoute() {
+        this.isOptimizingRoute = true;
+
+        const coordinates = this.order.payload.payloadCoordinates;
+        const routingHost = getRoutingHost(this.order.payload, this.order.payload.waypoints);
+        let sortedWaypoints = [];
+
+        const response = await this.fetch.routing(coordinates, { source: 'any', destination: 'any', annotations: true }, { host: routingHost }).catch(() => {
+            this.notifications.error(this.intl.t('fleet-ops.operations.orders.index.view.route-error'));
+            this.isOptimizingRoute = false;
+        });
+
+        if (response && response.code === 'Ok') {
+            if (response.waypoints && isArray(response.waypoints)) {
+                const responseWaypoints = response.waypoints.sortBy('waypoint_index');
+
+                for (let i = 0; i < responseWaypoints.length; i++) {
+                    const optimizedWaypoint = responseWaypoints.objectAt(i);
+                    const optimizedWaypointLongitude = optimizedWaypoint.location.firstObject;
+                    const optimizedWaypointLatitude = optimizedWaypoint.location.lastObject;
+                    const waypointModel = findClosestWaypoint(optimizedWaypointLatitude, optimizedWaypointLongitude, this.order.payload.waypoints);
+
+                    sortedWaypoints.pushObject(waypointModel);
+                }
+
+                this.order.payload.waypoints = sortedWaypoints;
+            }
+        } else {
+            this.notifications.error(this.intl.t('fleet-ops.operations.orders.index.view.route-error'));
+        }
+
+        this.isOptimizingRoute = false;
+    }
+
+    @action sortWaypoints({ sourceList, sourceIndex, targetList, targetIndex }) {
+        if (sourceList === targetList && sourceIndex === targetIndex) {
+            return;
+        }
+
+        const item = sourceList.objectAt(sourceIndex);
+
+        sourceList.removeAt(sourceIndex);
+        targetList.insertAt(targetIndex, item);
+
+        contextComponentCallback(this, 'onRouteChanged');
+    }
+}

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

@@ -99,5 +99,6 @@
             </div>
         </div>
         {{yield}}
+        <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>

package/addon/components/fleet-panel.hbs

@@ -20,5 +20,6 @@
         <div class="tab-content tab-{{this.tab.slug}}">
             {{component this.tab.component fleet=this.fleet tabOptions=this.tab options=this.tab.componentParams}}
         </div>
+        <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>

package/addon/components/fleet-panel.js

@@ -61,12 +61,12 @@ export default class FleetPanelComponent extends Component {
     @tracked tab;
 
     /**
-     * The vehicle being displayed or edited.
+     * The fleet being displayed or edited.
      *
-     * @type {VehicleModel}
+     * @type {FleetModel}
      * @tracked
      */
-    @tracked vehicle;
+    @tracked fleet;
 
     /**
      * Returns the array of tabs available for the panel.

package/addon/components/fuel-report-form-panel.hbs

@@ -116,5 +116,6 @@
                 <CoordinatesInput @value={{this.fuelReport.location}} @onChange={{fn (mut this.fuelReport.location)}} />
             </InputGroup>
         </div>
+        <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>

package/addon/components/fuel-report-panel.hbs

@@ -29,5 +29,6 @@
         <div class="tab-content tab-{{this.tab.slug}}">
             {{component this.tab.component fuelReport=this.fuelReport tabOptions=this.tab options=this.tab.componentParams}}
         </div>
+        <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>

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

@@ -172,5 +172,6 @@
                 <CoordinatesInput @value={{this.issue.location}} @onChange={{fn (mut this.issue.location)}} />
             </InputGroup>
         </div>
+        <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>

package/addon/components/issue-panel.hbs

@@ -29,5 +29,6 @@
         <div class="tab-content tab-{{this.tab.slug}}">
             {{component this.tab.component issue=this.issue tabOptions=this.tab options=this.tab.componentParams}}
         </div>
+        <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>

package/addon/components/map-container/toolbar.hbs

@@ -33,14 +33,14 @@
             </div>
             <FaIcon @icon="layer-group" />
             <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                <InputInfo @text={{t "fleet-ops.component.map-container.toolbar.view"}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+                <InputInfo @text={{t "fleet-ops.component.map-container.toolbar.view-order"}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
             </Attach::Tooltip>
         </button>
         <BasicDropdown id="map-toolbar-service-areas-button" @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
             <dd.Trigger class="toolbar-button">
                 <FaIcon @icon="map-marked-alt" />
                 <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                    <InputInfo @text={{t "fleet-ops.component.map-container.toolbar.view"}} @iconClass="hidden" class="{{if dd.isOpen 'hidden'}} py-1 px-2 bg-gray-900 -mt-1" />
+                    <InputInfo @text={{t "fleet-ops.component.map-container.toolbar.view-service-area"}} @iconClass="hidden" class="{{if dd.isOpen 'hidden'}} py-1 px-2 bg-gray-900 -mt-1" />
                 </Attach::Tooltip>
             </dd.Trigger>
             <dd.Content>

package/addon/components/modals/order-route-form.hbs

@@ -2,7 +2,7 @@
     <div class="modal-body-container">
         <div class="flex flex-row justify-between mb-6">
             <div class="flex">
-                <ShortToggle @isToggled={{@options.order.payload.isMultiDrop}} @onToggle={{@options.toggleMultiDropOrder}} @label={{t "fleet-ops.component.modals.order-route-form.toggle"}} />
+                <Toggle @isToggled={{@options.order.payload.isMultiDrop}} @onToggle={{@options.toggleMultiDropOrder}} @label={{t "fleet-ops.component.modals.order-route-form.toggle"}} />
             </div>
             <div class="flex flex-1 justify-end space-x-2">
                 {{#if @options.order.payload.isMultiDrop}}

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

@@ -56,5 +56,6 @@
                 <PhoneInput @value={{this.place.phone}} @autocomplete="nope" @onInput={{this.phone}} class="form-input w-full" />
             </InputGroup>
         </div>
+        <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>

package/addon/components/place-panel.hbs

@@ -29,5 +29,6 @@
         <div class="tab-content tab-{{this.tab.slug}}">
             {{component this.tab.component place=this.place tabOptions=this.tab options=this.tab.componentParams}}
         </div>
+        <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>

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

@@ -180,5 +180,6 @@
                 </div>
             </ContentPanel>
         </div>
+        <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>

package/addon/components/vehicle-panel.hbs

@@ -74,5 +74,6 @@
         <div class="tab-content tab-{{this.tab.slug}}">
             {{component this.tab.component vehicle=this.vehicle tabOptions=this.tab options=this.tab.componentParams}}
         </div>
+        <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>

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

@@ -87,5 +87,6 @@
                 @onVendorChanged={{this.onVendorChanged}}
             />
         {{/if}}
+        <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>

package/addon/components/vendor-panel.hbs

@@ -71,5 +71,6 @@
         <div class="tab-content tab-{{this.tab.slug}}">
             {{component this.tab.component vendor=this.vendor tabOptions=this.tab params=this.tab.componentParams}}
         </div>
+        <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>

package/addon/components/widget/fleet-ops-key-metrics.hbs

@@ -0,0 +1,19 @@
+<div class="fleet-ops-key-metrics" ...attributes>
+    <div class="flex flex-col">
+        <div class="flex flex-row items-center justify-between px-4 py-2 border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-lg shadow-sm">
+            <span class="text-base font-bold text-black dark:text-gray-100">{{t "fleet-ops.component.widget.key-metrics.title"}}</span>
+        </div>
+
+        <div class="mt-4">
+            {{#if this.getDashboardMetrics.isRunning}}
+                <Spinner />
+            {{else}}
+                <div class="grid grid-cols-2 lg:grid-cols-12 gap-4">
+                    {{#each-in this.metrics as |title options|}}
+                        <Dashboard::Count @title={{smart-humanize title}} @options={{options}} />
+                    {{/each-in}}
+                </div>
+            {{/if}}
+        </div>
+    </div>
+</div>