@fleetbase/fleetops-engine 0.2.8 → 0.3.0

package/addon/components/live-map.hbs

@@ -1,10 +1,10 @@
-<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|>
+<div class="live-map-component {{@wrapperClass}}" {{did-insert this.setupComponent}}>
+    <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.setupMap}} {{will-destroy this.closeChannels}} ...attributes as |layers|>
         <layers.tile @url={{this.tileSourceUrl}} />
 
-        {{#if this.isDriversVisible}}
+        {{#if this.visibilityControls.drivers}}
             {{#each this.drivers as |driver|}}
-                <layers.drift-marker @rotationAngle={{driver.heading}} @duration={{300}} @icon={{icon iconUrl=driver.vehicle_avatar iconSize=(array 24 24)}} @location={{point-to-coordinates driver.location}} @publicId={{driver.public_id}} @onAdd={{fn this.onAction "onDriverAdded" driver}} as |marker|>
+                <layers.drift-marker @id={{driver.id}} @rotationAngle={{driver.heading}} @duration={{300}} @icon={{icon iconUrl=driver.vehicle_avatar iconSize=(array 24 24)}} @location={{point-to-coordinates driver.location}} @publicId={{driver.public_id}} @onAdd={{fn this.triggerAction "onDriverAdded" driver}} @onClick={{fn this.triggerAction "onDriverClicked" driver}} as |marker|>
                     <marker.popup @maxWidth="500" @minWidth="225">
                         <DriverCard @driver={{driver}} @showCoordinates={{true}} @textClass="text-gray-900 dark:text-gray-100" />
                     </marker.popup>
@@ -13,9 +13,20 @@
             {{/each}}
         {{/if}}
 
-        {{#if this.isPlacesVisible}}
+        {{#if this.visibilityControls.vehicles}}
+            {{#each this.vehicles as |vehicle|}}
+                <layers.drift-marker @id={{vehicle.id}} @rotationAngle={{vehicle.heading}} @duration={{300}} @icon={{icon iconUrl=vehicle.avatar_url iconSize=(array 24 24)}} @location={{point-to-coordinates vehicle.location}} @publicId={{vehicle.public_id}} @onAdd={{fn this.triggerAction "onVehicleAdded" vehicle}} @onClick={{fn this.triggerAction "onVehicleClicked" vehicle}} as |marker|>
+                    <marker.tooltip @permanent={{false}} @sticky={{true}}>
+                        <div>{{vehicle.displayName}}</div>
+                        <div>{{if vehicle.online "Online" "Offline"}}</div>
+                    </marker.tooltip>
+                </layers.drift-marker>
+            {{/each}}
+        {{/if}}
+
+        {{#if this.visibilityControls.places}}
             {{#each this.places as |place|}}
-                <layers.marker @icon={{icon iconUrl="/engines-dist/images/building-marker.png" iconSize=(array 16 16)}} @location={{point-to-coordinates place.location}} @riseOnHover={{true}} @title={{place.address}} @alt={{place.address}} as |marker|>
+                <layers.marker @id={{place.id}} @icon={{icon iconUrl="/engines-dist/images/building-marker.png" iconSize=(array 16 16)}} @location={{point-to-coordinates place.location}} @riseOnHover={{true}} @title={{place.address}} @alt={{place.address}} @onAdd={{fn this.triggerAction "onPlaceAdded" place}} @onClick={{fn this.triggerAction "onPlaceClicked" place}} as |marker|>
                     <marker.popup>
                         <div>{{place.address}}</div>
                         <div>{{format-point place.location}}</div>
@@ -57,15 +68,15 @@
             {{/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"}} />
+        <layers.draw-control @position="topright" @draw={{hash marker=false circlemarker=false circle=false polyline=false}} @onDrawDrawstop={{fn this.triggerAction "onDrawDrawstop"}} @onDrawDeleted={{fn this.triggerAction "onDrawDeleted"}} @onDrawEdited={{fn this.triggerAction "onDrawEdited"}} @onDrawDeletestart={{fn this.triggerAction "onDrawDeletestart"}} @onDrawEditstop={{fn this.triggerAction "onDrawEditstop"}} @onDrawControlCreated={{fn this.triggerAction "onDrawControlCreated"}} @onDrawFeatureGroupCreated={{fn this.triggerAction "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|>
+            <layers.polygon @id={{serviceArea.id}} @record={{serviceArea}} @locations={{serviceArea.bounds}} @fillColor={{serviceArea.color}} @color={{serviceArea.stroke_color}} @onAdd={{fn this.triggerAction "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|>
+                <layers.polygon @id={{zone.id}} @record={{zone}} @locations={{zone.locations}} @fillColor={{zone.color}} @color={{zone.stroke_color}} @onAdd={{fn this.triggerAction "onZoneLayerAdd" zone}} as |polygon|>
                     <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{zone.name}} Zone</polygon.tooltip>
                 </layers.polygon>
             {{/each}}