@fleetbase/fleetops-engine 0.6.17 → 0.6.19

package/addon/components/map/drawer/vehicle-listing.js

@@ -0,0 +1,125 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class MapDrawerVehicleListingComponent extends Component {
+    @service vehicleActions;
+    @service leafletMapManager;
+    @service hostRouter;
+    @service intl;
+    @tracked query = '';
+
+    get filteredVehicles() {
+        const vehicles = this.leafletMapManager._livemap?.vehicles ?? [];
+        const query = this.query?.toLowerCase();
+        if (!query) {
+            return vehicles;
+        }
+
+        return vehicles.filter((vehicle) => {
+            const vehicleName = vehicle.searchString?.toLowerCase();
+            if (vehicleName) {
+                return vehicleName.includes(query.toLowerCase());
+            }
+            return true;
+        });
+    }
+
+    /** columns */
+    get columns() {
+        return [
+            {
+                label: this.intl.t('column.vehicle'),
+                valuePath: 'display_name',
+                photoPath: 'photo_url',
+                width: '100px',
+                cellComponent: 'table/cell/vehicle-name',
+                onClick: this.view,
+                showOnlineIndicator: true,
+            },
+            {
+                label: this.intl.t('column.location'),
+                valuePath: 'location',
+                width: '80px',
+                cellComponent: 'table/cell/point',
+                onClick: this.locate,
+            },
+            {
+                label: this.intl.t('common.status'),
+                valuePath: 'status',
+                cellComponent: 'table/cell/status',
+                width: '60px',
+            },
+            {
+                label: this.intl.t('column.last-seen'),
+                valuePath: 'updatedAgo',
+                width: '60px',
+            },
+            {
+                label: '',
+                cellComponent: 'table/cell/dropdown',
+                ddButtonText: false,
+                ddButtonIcon: 'ellipsis-h',
+                ddButtonIconPrefix: 'fas',
+                ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.vehicle') }),
+                cellClassNames: 'overflow-visible',
+                wrapperClass: 'flex items-center justify-end mx-2',
+                width: '90px',
+                actions: [
+                    {
+                        label: this.intl.t('common.view-resource', { resource: this.intl.t('resource.vehicle') }),
+                        fn: this.view,
+                        permission: 'fleet-ops view vehicle',
+                    },
+                    {
+                        label: this.intl.t('common.edit-resource', { resource: this.intl.t('resource.vehicle') }),
+                        fn: this.edit,
+                        permission: 'fleet-ops update vehicle',
+                    },
+                    {
+                        label: this.intl.t('vehicle.actions.locate-vehicle'),
+                        fn: this.locate,
+                        permission: 'fleet-ops view vehicle',
+                    },
+                    {
+                        separator: true,
+                    },
+                    {
+                        label: this.intl.t('common.delete-resource', { resource: this.intl.t('resource.vehicle') }),
+                        fn: this.vehicleActions.delete,
+                        permission: 'fleet-ops delete vehicle',
+                    },
+                ],
+                sortable: false,
+                filterable: false,
+                resizable: false,
+                searchable: false,
+            },
+        ];
+    }
+
+    @action view(vehicle) {
+        this.leafletMapManager.flyToRecordLayer(vehicle, 16, {
+            paddingBottomRight: [300, 200],
+            moveend: () => {
+                this.vehicleActions.panel.view(vehicle);
+            },
+        });
+    }
+
+    @action edit(vehicle) {
+        this.leafletMapManager.flyToRecordLayer(vehicle, 16, {
+            paddingBottomRight: [300, 200],
+            moveend: () => {
+                this.vehicleActions.panel.edit(vehicle);
+            },
+        });
+    }
+
+    @action locate(vehicle) {
+        this.leafletMapManager.flyToRecordLayer(vehicle, 18, {
+            paddingBottomRight: [300, 200],
+        });
+    }
+}

package/addon/components/map/drawer.hbs

@@ -0,0 +1,5 @@
+<Drawer @onResizeEnd={{this.mapDrawer.handleResizeEnd}} @onResizeStart={{@onResizeStart}} @isMinimized={{this.mapDrawer.isMinimized}} @isOpen={{@isOpen}} @notchEnabled={{true}} @onLoad={{this.setDrawerContext}}>
+    <TabNavigation @tabs={{this.tabs}} @activeTabId={{this.mapDrawer.activeTabId}} @onTabChange={{this.mapDrawer.setActiveTab}} as |activeTab|>
+        {{component activeTab.component}}
+    </TabNavigation>
+</Drawer>

package/addon/components/map/drawer.js

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+
+export default class MapDrawerComponent extends Component {
+    @service mapDrawer;
+    @service universe;
+
+    get tabs() {
+        const registeredTabs = this.universe.getMenuItemsFromRegistry('fleet-ops:component:map:drawer');
+        return [
+            this.universe._createMenuItem('Vehicles', null, { icon: 'car', component: 'map/drawer/vehicle-listing' }),
+            this.universe._createMenuItem('Drivers', null, { icon: 'id-card', component: 'map/drawer/driver-listing' }),
+            this.universe._createMenuItem('Places', null, { icon: 'building', component: 'map/drawer/place-listing' }),
+            ...(isArray(registeredTabs) ? registeredTabs : []),
+        ];
+    }
+
+    @action setDrawerContext(drawerContextApi) {
+        this.mapDrawer.setDrawer(drawerContextApi, this);
+    }
+}

package/addon/components/map/leaflet-live-map.hbs

@@ -0,0 +1,177 @@
+<div class="live-map-component {{@wrapperClass}}">
+    <LeafletMap
+        id={{this.id}}
+        class="next-leaflet-container-map {{@mapClass}}"
+        @lat={{this.latitude}}
+        @lng={{this.longitude}}
+        @zoom={{this.zoom}}
+        @zoomControl={{false}}
+        @contextmenu={{true}}
+        @contextmenuWidth={{140}}
+        @onLoad={{this.didLoad}}
+        {{set-container-dimensions}}
+        ...attributes
+        as |layers|
+    >
+        <layers.tile @url={{this.tileUrl}} />
+
+        <layers.draw-control
+            @position="topright"
+            @draw={{hash marker=false circlemarker=false polyline=false}}
+            @onDrawDrawstop={{fn this.trigger "onDrawDrawstop"}}
+            @onDrawDeleted={{fn this.trigger "onDrawDeleted"}}
+            @onDrawEdited={{fn this.trigger "onDrawEdited"}}
+            @onDrawDeletestart={{fn this.trigger "onDrawDeletestart"}}
+            @onDrawEditstop={{fn this.trigger "onDrawEditstop"}}
+            @onDrawControlCreated={{this.didCreateDrawControl}}
+            @onDrawFeatureGroupCreated={{this.didCreateDrawControlFeatureGroup}}
+        />
+
+        {{#if this.load.isIdle}}
+            {{#each this.drivers as |driver|}}
+                <layers.tracking-marker
+                    @id={{driver.id}}
+                    @publicId={{driver.public_id}}
+                    @location={{point-to-coordinates driver.location}}
+                    @rotationAngle={{driver.heading}}
+                    @icon={{icon iconUrl=driver.vehicle_avatar iconSize=(array 24 24)}}
+                    @onAdd={{fn this.trigger "onDriverAdded" driver}}
+                    @onClick={{fn this.trigger "onDriverClicked" driver}}
+                    @draggable={{false}}
+                    as |marker|
+                >
+                    <marker.popup @maxWidth="500" @minWidth="225">
+                        <div class="flex flex-row">
+                            <div class="w-14">
+                                <img src={{driver.photoUrl}} alt={{driver.name}} class="rounded-md w-12 h-12 shadow-sm" />
+                            </div>
+                            <div class="flex-1">
+                                <div class="text-xs font-semibold">{{driver.name}}</div>
+                                <div class="text-xs">{{t "common.phone"}}: {{n-a driver.phone}}</div>
+                                <div class="text-xs">{{t "resource.vehicle"}}: {{n-a driver.vehicle_name}}</div>
+                                <div class="text-xs">{{t "common.status"}}: <span class="{{if driver.online 'text-green-500' 'text-red-400'}}">{{if driver.online "Online" "Offline"}}</span></div>
+                                <div class="text-xs truncate">{{t "common.pos"}}: {{point-coordinates driver.location}}</div>
+                            </div>
+                        </div>
+                    </marker.popup>
+                    <marker.tooltip @permanent={{false}} @sticky={{true}}>
+                        <div class="flex items-center space-x-1">
+                            <div class="text-xs font-semibold">{{driver.name}}</div>
+                            <div>•</div>
+                            <div class="text-xs {{if driver.online 'text-green-500' 'text-red-400'}}">{{if driver.online "Online" "Offline"}}</div>
+                        </div>
+                        <div class="text-xs truncate"><FaIcon @icon="location-dot" @size="xs" class="mr-0.5" />{{point-coordinates driver.location}}</div>
+                    </marker.tooltip>
+                </layers.tracking-marker>
+            {{/each}}
+
+            {{#each this.vehicles as |vehicle|}}
+                <layers.marker
+                    @id={{vehicle.id}}
+                    @publicId={{vehicle.public_id}}
+                    @location={{point-to-coordinates vehicle.location}}
+                    @icon={{icon iconUrl=vehicle.avatar_url iconSize=(array 24 24)}}
+                    @onAdd={{fn this.trigger "onVehicleAdded" vehicle}}
+                    @onClick={{fn this.trigger "onVehicleClicked" vehicle}}
+                    @draggable={{false}}
+                    as |marker|
+                >
+                    <marker.popup @permanent={{false}} @sticky={{true}}>
+                        <div class="flex flex-row">
+                            <div class="w-14 mr-2">
+                                <img src={{vehicle.photo_url}} alt={{vehicle.display_name}} class="rounded-md w-14 h-12 shadow-sm" />
+                            </div>
+                            <div class="flex-1">
+                                <div class="text-xs font-semibold">{{vehicle.displayName}}</div>
+                                <div class="text-xs">Driver: {{n-a vehicle.driver_name}}</div>
+                                <div class="text-xs">Status: <span class="{{if vehicle.online 'text-green-500' 'text-red-400'}}">{{if vehicle.online "Online" "Offline"}}</span></div>
+                                <div class="text-xs truncate">Pos: {{point-coordinates vehicle.location}}</div>
+                            </div>
+                        </div>
+                    </marker.popup>
+                    <marker.tooltip @permanent={{false}} @sticky={{true}}>
+                        <div class="flex items-center space-x-1">
+                            <div class="text-xs font-semibold">{{vehicle.displayName}}</div>
+                            <div>•</div>
+                            <div class="text-xs {{if vehicle.online 'text-green-500' 'text-red-400'}}">{{if vehicle.online "Online" "Offline"}}</div>
+                        </div>
+                        <div class="text-xs truncate"><FaIcon @icon="location-dot" @size="xs" class="mr-0.5" />{{point-coordinates vehicle.location}}</div>
+                    </marker.tooltip>
+                </layers.marker>
+            {{/each}}
+
+            {{#each this.places as |place|}}
+                <layers.marker
+                    @id={{place.id}}
+                    @publicId={{place.public_id}}
+                    @location={{point-to-coordinates place.location}}
+                    @icon={{icon iconUrl=(or place.avatar_url "/engines-dist/images/building-marker.png") iconSize=(array 16 16)}}
+                    @riseOnHover={{true}}
+                    @title={{place.address}}
+                    @alt={{place.address}}
+                    @onAdd={{fn this.trigger "onPlaceAdded" place}}
+                    @onClick={{fn this.trigger "onPlaceClicked" place}}
+                    @draggable={{false}}
+                    as |marker|
+                >
+                    <marker.popup>
+                        <div>{{place.address}}</div>
+                        <div>{{format-point place.location}}</div>
+                    </marker.popup>
+                    <marker.tooltip @permanent={{false}} @sticky={{true}} @direction="bottom">{{or place.name place.address}}</marker.tooltip>
+                </layers.marker>
+            {{/each}}
+
+            {{#each this.serviceAreaActions.serviceAreas as |serviceArea|}}
+                <layers.polygon
+                    @id={{serviceArea.id}}
+                    @record={{serviceArea}}
+                    @locations={{unwrap-coordinates serviceArea.leafletCoordinates}}
+                    @fillColor={{serviceArea.color}}
+                    @color={{serviceArea.stroke_color}}
+                    @onAdd={{fn this.trigger "onServiceAreaLayerAdded" serviceArea}}
+                    as |polygon|
+                >
+                    <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{serviceArea.name}} {{t "resource.service-area"}}</polygon.tooltip>
+                </layers.polygon>
+
+                {{#each serviceArea.zones as |zone|}}
+                    <layers.polygon
+                        @id={{zone.id}}
+                        @record={{zone}}
+                        @locations={{unwrap-coordinates zone.leafletCoordinates}}
+                        @fillColor={{zone.color}}
+                        @color={{zone.stroke_color}}
+                        @onAdd={{fn this.trigger "onZoneLayerAdd" zone}}
+                        as |polygon|
+                    >
+                        <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{zone.name}} {{t "resource.zone"}}</polygon.tooltip>
+                    </layers.polygon>
+                {{/each}}
+            {{/each}}
+        {{/if}}
+
+        {{yield layers}}
+    </LeafletMap>
+    {{#unless this.ready}}
+        <div class="flex w-full h-full items-center justify-center">
+            <Spinner />
+        </div>
+    {{/unless}}
+</div>
+
+{{!-- {{#if (and this.isDataLoaded (not-eq @drawerTab false))}}
+    <LiveMapDrawer
+        @tab={{@drawerTab}}
+        @onTabChanged={{@onDrawerTabChanged}}
+        @onResizeEnd={{@onDrawerResizeEnd}}
+        @onResizeStart={{@onDrawerResizeStart}}
+        @isMinimized={{@isDrawerMinimized}}
+        @isOpen={{@isDrawerOpen}}
+        @vehicles={{this.vehicles}}
+        @drivers={{this.drivers}}
+        @places={{this.places}}
+        @liveMap={{this}}
+        @onDrawerReady={{this.setDrawerContext}}
+    />
+{{/if}} --}}