Skip to content

Commit

Permalink
Merge pull request #128 from fleetbase/dev-v0.5.11
Browse files Browse the repository at this point in the history 
v0.5.11 - refactored the order list overlay component design and functionality,…
  • Loading branch information
@roncodes
roncodes authored Oct 15, 2024
2 parents 59b309d + 4dc7c8f commit 27558ad
Show file tree
Hide file tree
Showing 38 changed files with 1,500 additions and 295 deletions.
4 changes: 2 additions & 2 deletions addon/components/live-map.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
@publicId={{driver.public_id}}
@location={{point-to-coordinates driver.location}}
@rotationAngle={{driver.heading}}
@icon={{icon iconUrl=(or driver.vehicle_avatar (config "defaultValues.vehicleAvatar")) iconSize=(array 24 24)}}
@icon={{icon iconUrl=driver.vehicle_avatar iconSize=(array 24 24)}}
@onAdd={{fn this.triggerAction "onDriverAdded" driver}}
@onClick={{fn this.triggerAction "onDriverClicked" driver}}
as |marker|
Expand Down Expand Up @@ -73,7 +73,7 @@
@id={{vehicle.id}}
@publicId={{vehicle.public_id}}
@location={{point-to-coordinates vehicle.location}}
@icon={{icon iconUrl=(or vehicle.avatar_url (config "defaultValues.vehicleAvatar")) iconSize=(array 24 24)}}
@icon={{icon iconUrl=vehicle.avatar_url iconSize=(array 24 24)}}
@onAdd={{fn this.triggerAction "onVehicleAdded" vehicle}}
@onClick={{fn this.triggerAction "onVehicleClicked" vehicle}}
as |marker|
Expand Down
129 changes: 120 additions & 9 deletions addon/components/live-map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,20 @@ import { isArray } from '@ember/array';
import { dasherize, camelize, classify } from '@ember/string';
import { singularize } from 'ember-inflector';
import { later } from '@ember/runloop';
import { debug } from '@ember/debug';
import { allSettled } from 'rsvp';
import { task } from 'ember-concurrency-decorators';
import { OSRMv1, Control as RoutingControl } from '@fleetbase/leaflet-routing-machine';
import getRoutingHost from '@fleetbase/ember-core/utils/get-routing-host';
import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';

/**
* Component which displays live activity.
*
* @class
*/
const MAP_TARGET_FOCUS_PADDING_BOTTOM_RIGHT = [200, 0];
const MAP_TARGET_FOCUS_REFOCUS_PANBY = [150, 0];
export default class LiveMapComponent extends Component {
@service store;
@service intl;
Expand Down Expand Up @@ -208,6 +213,7 @@ export default class LiveMapComponent extends Component {
this.tileSourceUrl = 'https://{s}.tile.jawg.io/jawg-matrix/{z}/{x}/{y}{r}.png?access-token=';
}

this.movementTracker.registerTrackingMarker(owner);
this.setupComponent();
}

Expand Down Expand Up @@ -404,7 +410,7 @@ export default class LiveMapComponent extends Component {
* // To load data and execute specific actions on load and failure
* this.loadLiveData.perform('some/path', {
* params: { key: 'value' },
* onLoaded: (data) => { console.log('Data loaded', data); },
* onLoaded: (data) => { debug('Data loaded', data); },
* onFailure: (error) => { console.error('Failed to load data', error); }
* });
*/
Expand All @@ -417,13 +423,13 @@ export default class LiveMapComponent extends Component {
const callbackFnName = `on${internalName}Loaded`;
const params = getWithDefault(options, 'params', {});
const url = `fleet-ops/live/${path}`;
const data = yield this.fetch.get(url, params, { normalizeToEmberData: true, normalizeModelType: singularize(internalName) }).catch((error) => {
if (typeof options.onFailure === 'function') {
options.onFailure(error);

try {
let data = yield this.fetch.get(url, params, { normalizeToEmberData: true, normalizeModelType: singularize(internalName) });
if (isArray(data)) {
data = [...data];
}
});

if (data) {
this.triggerAction(callbackFnName);
this.createVisibilityControl(internalName);
this[internalName] = data;
Expand All @@ -432,9 +438,13 @@ export default class LiveMapComponent extends Component {
if (typeof options.onLoaded === 'function') {
options.onLoaded(data);
}
}

return data;
return data;
} catch (error) {
if (typeof options.onFailure === 'function') {
options.onFailure(error);
}
}
}

/**
Expand Down Expand Up @@ -1058,6 +1068,107 @@ export default class LiveMapComponent extends Component {
});
}

@action previewOrderRoute(order) {
// Hide all elements on map
this.hideAll();

// Show drivers
this.show('drivers');

// create order route preview
const waypoints = this.getRouteCoordinatesFromOrder(order);
const routingHost = getRoutingHost();
if (this.cannotRouteWaypoints(waypoints)) {
return;
}

// center on first coordinate
try {
this.leafletMap.stop();
this.leafletMap.flyTo(waypoints.firstObject);
} catch (error) {
// unable to stop map
debug(`Leaflet Map Error: ${error.message}`);
}

const router = new OSRMv1({
serviceUrl: `${routingHost}/route/v1`,
profile: 'driving',
});

this.routeControl = new RoutingControl({
fitSelectedRoutes: false,
router,
waypoints,
alternativeClassName: 'hidden',
addWaypoints: false,
markerOptions: {
draggable: false,
icon: L.icon({
iconUrl: '/assets/images/marker-icon.png',
iconRetinaUrl: '/assets/images/marker-icon-2x.png',
shadowUrl: '/assets/images/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
}),
},
}).addTo(this.leafletMap);

this.routeControl.on('routingerror', (error) => {
debug(`Routing Control Error: ${error.error.message}`);
});

this.routeControl.on('routesfound', () => {
this.leafletMap.flyToBounds(waypoints, {
paddingBottomRight: MAP_TARGET_FOCUS_PADDING_BOTTOM_RIGHT,
maxZoom: waypoints.length === 2 ? 13 : 12,
animate: true,
});
this.leafletMap.once('moveend', () => {
this.leafletMap.panBy(MAP_TARGET_FOCUS_REFOCUS_PANBY);
});
});
}

getRouteCoordinatesFromOrder(order) {
const payload = order.payload;
const waypoints = [];
const coordinates = [];

waypoints.pushObjects([payload.pickup, ...payload.waypoints.toArray(), payload.dropoff]);
waypoints.forEach((place) => {
if (place && place.get('longitude') && place.get('latitude')) {
if (place.hasInvalidCoordinates) {
return;
}

coordinates.pushObject([place.get('latitude'), place.get('longitude')]);
}
});

return coordinates;
}

cannotRouteWaypoints(waypoints = []) {
return !this.leafletMap || !isArray(waypoints) || waypoints.length < 2;
}

@action restoreDefaultLiveMap() {
this.removeRouteControl();
this.showAll();
this.leafletMap.flyTo([this.latitude, this.longitude], 13);
}

removeRouteControl() {
if (this.routeControl && this.routeControl instanceof RoutingControl) {
try {
this.routeControl.remove();
} catch (error) {
debug(`LiveMapComponent Error: ${error.message}`);
}
}
}

/**
* Handle the creation of the draw control.
*
Expand Down Expand Up @@ -1689,7 +1800,7 @@ export default class LiveMapComponent extends Component {
for await (let output of channel) {
const { event, data } = output;

console.log(`[channel ${channelId}]`, output, event, data);
debug(`[channel ${channelId}]`, output, event, data);
}
})();
}
Expand Down
5 changes: 3 additions & 2 deletions addon/components/order-config-manager/activity-flow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { inject as service } from '@ember/service';
import { action } from '@ember/object';
import { isArray } from '@ember/array';
import { later } from '@ember/runloop';
import { debug } from '@ember/debug';
import { task } from 'ember-concurrency-decorators';
import generateUUID from '@fleetbase/ember-core/utils/generate-uuid';
import createFlowActivity from '../../utils/create-flow-activity';
Expand Down Expand Up @@ -462,8 +463,8 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
let lastChildActivity = null;
return activityObject.forEach((childActivityObject, childIndex) => {
if (childIndex > 0 && lastChildActivity) {
console.log('[lastChildActivity]', lastChildActivity);
console.log('[childActivityObject]', childActivityObject);
debug('[lastChildActivity]', lastChildActivity);
debug('[childActivityObject]', childActivityObject);
this.addNewLinkedActivity(lastChildActivity, childActivityObject);
return;
}
Expand Down
1 change: 0 additions & 1 deletion addon/components/order-config/entities-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,6 @@ export default class OrderConfigEntitiesEditorComponent extends Component {
const { orderConfig } = this;
const { value } = target;

// console.log(value, get(orderConfig, `meta.entities.${index}.meta.${key}`));
set(orderConfig, `meta.entities.${index}.meta.${key}`, value);

if (typeof this.args.onEntitiesChanged === 'function') {
Expand Down
2 changes: 0 additions & 2 deletions addon/components/order-config/fields-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,11 +199,9 @@ export default class OrderConfigFieldsEditorComponent extends Component {

/* eslint no-unused-vars: "off" */
@action sortMetaFieldOptions(metaField, el, target) {
// console.log(`[sortMetaFieldOptions()]`, ...arguments);
// const { fields } = this;
// const { index } = el.dataset;
// const parentEl = el.parentElement();
// console.log(parentEl);
// const { metaGroupKey } = target.dataset;
// // get the index of the moved metafield
// const metaFieldIndex = fields.findIndex((field) => field.key === metaFieldKey);
Expand Down
Loading

0 comments on commit 27558ad

Please sign in to comment.