@fleetbase/fleetops-engine 0.2.0 → 0.2.2

package/addon/components/driver-card.hbs

@@ -1,4 +1,4 @@
-<div class="driver-card flex flex-1" {{did-insert this.setupComponent}} ...attributes>
+<div class="driver-card flex flex-1" ...attributes>
     <a href="javascript:;" class="driver-card-details flex flex-1 bg-black bg-opacity-25 rounded-md px-4 py-3 shadow-sm" {{on "click" this.onClick}}>
         <div class="flex flex-row">
             <div class="mr-3">

package/addon/components/live-map.hbs

@@ -4,14 +4,27 @@
 
         {{#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">
+                <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|>
+                    <marker.popup @maxWidth="500" @minWidth="225">
                         <DriverCard @driver={{driver}} @showCoordinates={{true}} @textClass="text-gray-900 dark:text-gray-100" />
-                    </marker.popup> --}}
+                    </marker.popup>
+                    <marker.tooltip @permanent={{true}} @sticky={{true}}>{{driver.name}}</marker.tooltip>
                 </layers.rotated-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|>
+                    <marker.popup>
+                        <div>{{place.address}}</div>
+                        <div>{{format-point place.location}}</div>
+                    </marker.popup>
+                    <marker.tooltip @permanent={{false}} @sticky={{true}} @direction="bottom">{{place.name}}</marker.tooltip>
+                </layers.marker>
+            {{/each}}
+        {{/if}}
+
         {{!-- {{#if this.isRoutesVisible}}
             {{#each this.routes as |route|}}
                 <layers.polyline @locations={{route.details.coordinates}} />

package/addon/components/live-map.js

@@ -25,10 +25,12 @@ export default class LiveMapComponent extends Component {
 
     @tracked routes = [];
     @tracked drivers = [];
+    @tracked places = [];
     @tracked channels = [];
     @tracked isLoading = true;
     @tracked isReady = false;
     @tracked isDriversVisible = true;
+    @tracked isPlacesVisible = true;
     @tracked isRoutesVisible = true;
     @tracked isDrawControlsVisible = false;
     @tracked isCreatingServiceArea = false;
@@ -105,6 +107,7 @@ export default class LiveMapComponent extends Component {
 
         this.routes = await this.fetchActiveRoutes();
         this.drivers = await this.fetchActiveDrivers();
+        this.places = await this.fetchActivePlaces();
         this.serviceAreaRecords = await this.fetchServiceAreas();
         this.isReady = true;
 
@@ -478,6 +481,18 @@ export default class LiveMapComponent extends Component {
         this.isDriversVisible = !this.isDriversVisible;
     }
 
+    @action hidePlaces() {
+        this.isPlacesVisible = false;
+    }
+
+    @action showPlaces() {
+        this.isPlacesVisible = true;
+    }
+
+    @action togglePlaces() {
+        this.isPlacesVisible = !this.isPlacesVisible;
+    }
+
     @action hideRoutes() {
         this.isRoutesVisible = false;
     }
@@ -842,6 +857,25 @@ export default class LiveMapComponent extends Component {
         });
     }
 
+    @action fetchActivePlaces() {
+        this.isLoading = true;
+
+        // get the center of map
+        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;
+
+                if (typeof this.args.onPlacesLoaded === 'function') {
+                    this.args.onPlacesLoaded(places);
+                }
+
+                resolve(places);
+            });
+        });
+    }
+
     @action fetchServiceAreas() {
         this.isLoading = true;
 

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

@@ -47,5 +47,11 @@
                 <MapContainer::Toolbar::ZonesPanel @dd={{dd}} @map={{@map}} @onPressCreateServiceArea={{@onPressCreateServiceArea}} />
             </dd.Content>
         </BasicDropdown>
+        <button type="button" class="toolbar-button relative" {{on "click" (fn this.onAction "onPressDisplayPlaces")}}>
+            <FaIcon @icon="city" />
+            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                <InputInfo @text="Toggle Places" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+            </Attach::Tooltip>
+        </button>
     </div>
 </MapContainer::ToolbarContainer>

package/addon/controllers/management/contacts/index.js

@@ -384,13 +384,13 @@ export default class ManagementContactsIndexController extends Controller {
                     {
                         path: `uploads/${contact.company_uuid}/contacts/${contact.slug}`,
                         subject_uuid: contact.id,
-                        subject_type: `contact`,
-                        type: `contact_photo`,
+                        subject_type: 'contact',
+                        type: 'contact_photo',
                     },
                     (uploadedFile) => {
                         contact.setProperties({
                             photo_uuid: uploadedFile.id,
-                            photo_url: uploadedFile.s3url,
+                            photo_url: uploadedFile.url,
                             photo: uploadedFile,
                         });
                     }

package/addon/controllers/management/vehicles/index.js

@@ -562,7 +562,7 @@ export default class ManagementVehiclesIndexController extends ManagementControl
                     (uploadedFile) => {
                         vehicle.setProperties({
                             photo_uuid: uploadedFile.id,
-                            photo_url: uploadedFile.s3url,
+                            photo_url: uploadedFile.url,
                             photo: uploadedFile,
                         });
                     }

package/addon/controllers/operations/orders/index/new.js

@@ -1220,7 +1220,7 @@ export default class OperationsOrdersIndexNewController extends Controller {
                     (uploadedFile) => {
                         entity.setProperties({
                             photo_uuid: uploadedFile.id,
-                            photo_url: uploadedFile.s3url,
+                            photo_url: uploadedFile.url,
                             photo: uploadedFile,
                         });
                     }

package/addon/controllers/operations/orders/index/view.js

@@ -833,7 +833,7 @@ export default class OperationsOrdersIndexViewController extends Controller {
                     (uploadedFile) => {
                         entity.setProperties({
                             photo_uuid: uploadedFile.id,
-                            photo_url: uploadedFile.s3url,
+                            photo_url: uploadedFile.url,
                             photo: uploadedFile,
                         });
                     }

package/addon/controllers/operations/orders/index.js

@@ -561,12 +561,25 @@ export default class OperationsOrdersIndexController extends Controller {
         this.query = value;
     }
 
+    @action viewPlacesOnMap() {
+        const {
+            leafletMap: { liveMap },
+        } = this;
+
+        if (liveMap) {
+            liveMap.togglePlaces();
+        }
+    }
+
     @action resetView() {
-        const { leafletMap } = this;
+        const {
+            leafletMap: { liveMap },
+        } = this;
 
-        leafletMap?.liveMap?.hideDrivers();
-        leafletMap?.liveMap?.hideRoutes();
-        // leafletMap?.remove();
+        if (liveMap) {
+            liveMap.hideDrivers();
+            liveMap.hideRoutes();
+        }
     }
 
     @action toggleSearch() {

package/addon/templates/operations/orders/index.hbs

@@ -13,7 +13,7 @@
 {{#if this.isMapLayout}}
     <MapContainer @layout={{this.layout}} @onReady={{this.onMapContainerReady}}>
         <GlobalSearch @visible={{this.isSearchVisible}} @onPressOrder={{this.viewOrder}} />
-        <MapContainer::Toolbar @activeOrdersCount={{this.activeOrdersCount}} @map={{this.leafletMap}} @onPressViewOrders={{this.toggleOrdersPanel}} @onPressSearch={{this.toggleSearch}} @onPressCreateOrder={{this.createOrder}} @onPressCreateDriver={{this.driversController.createDriver}} @onPressDriverProfile={{this.driversController.viewDriver}} />
+        <MapContainer::Toolbar @activeOrdersCount={{this.activeOrdersCount}} @map={{this.leafletMap}} @onPressDisplayPlaces={{this.viewPlacesOnMap}} @onPressViewOrders={{this.toggleOrdersPanel}} @onPressSearch={{this.toggleSearch}} @onPressCreateOrder={{this.createOrder}} @onPressCreateDriver={{this.driversController.createDriver}} @onPressDriverProfile={{this.driversController.viewDriver}} />
         <OrderListOverlay @noBackdrop={{true}} @fullHeight={{true}} @outView={{not this.isOrdersPanelVisible}} @width={{if (media 'isMobile') "100%" "338px"}} @onPressCancel={{this.hideOrdersPanel}} @onPressCreateOrder={{this.createOrder}} @onPressViewOrder={{this.viewOrder}} @onPressCreateFleet={{this.fleetController.createFleet}} @onPressManageFleet={{this.fleetController.viewFleet}} @onPressCancelOrders={{this.bulkCancelOrders}} @onPressDeleteOrders={{this.bulkDeleteOrders}} />
         <LiveMap id="leafletMap" class="next-leaflet-container-map" @lat={{1.3521}} @lng={{103.8198}} @zoom={{12}} @zoomControl={{false}} @onLoad={{this.setMapReference}} {{set-container-dimensions}} />
     </MapContainer>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/fleetops-engine",
-    "version": "0.2.0",
+    "version": "0.2.2",
     "description": "Fleetbase Fleet-Ops extension provides a fleet management and last mile delivery operations system module.",
     "fleetbase": {
         "route": "fleet-ops",
@@ -39,8 +39,8 @@
         "publish:github": "npm config set '@fleetbase:registry' https://npm.pkg.github.com/ && npm publish"
     },
     "dependencies": {
-        "@fleetbase/ember-core": "^0.1.1",
-        "@fleetbase/ember-ui": "^0.1.4",
+        "@fleetbase/ember-core": "^0.1.2",
+        "@fleetbase/ember-ui": "^0.1.8",
         "@fleetbase/fleetops-data": "^0.0.6",
         "@fleetbase/leaflet-routing-machine": "^3.2.16",
         "@fortawesome/ember-fontawesome": "^0.4.1",