@fleetbase/fleetops-engine 0.4.0 → 0.4.2

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

@@ -25,6 +25,12 @@ export default class LiveMapDrawerVehicleListingComponent extends Component {
      */
     @service notifications;
 
+    /**
+     * Service for intl.
+     * @service
+     */
+    @service intl;
+
     /**
      * Service for CRUD operations.
      * @service
@@ -62,7 +68,7 @@ export default class LiveMapDrawerVehicleListingComponent extends Component {
      */
     @tracked columns = [
         {
-            label: 'Vehicle',
+            label: this.intl.t('fleet-ops.common.vehicle'),
             valuePath: 'display_name',
             photoPath: 'avatar_url',
             width: '100px',
@@ -71,20 +77,20 @@ export default class LiveMapDrawerVehicleListingComponent extends Component {
             showOnlineIndicator: true,
         },
         {
-            label: 'Location',
+            label: this.intl.t('fleet-ops.component.live-map-drawer.vehicle-listing.location'),
             valuePath: 'location',
             width: '80px',
             cellComponent: 'table/cell/point',
             onClick: this.locate,
         },
         {
-            label: 'Status',
+            label: this.intl.t('fleet-ops.common.status'),
             valuePath: 'status',
             cellComponent: 'table/cell/status',
             width: '60px',
         },
         {
-            label: 'Last Seen',
+            label: this.intl.t('fleet-ops.component.live-map-drawer.vehicle-listing.last-seen'),
             valuePath: 'updatedAgo',
             width: '60px',
         },
@@ -100,21 +106,21 @@ export default class LiveMapDrawerVehicleListingComponent extends Component {
             width: '90px',
             actions: [
                 {
-                    label: 'View vehicle details...',
+                    label: this.intl.t('fleet-ops.component.live-map-drawer.vehicle-listing.view-vehicle'),
                     fn: this.focus,
                 },
                 {
-                    label: 'Edit vehicle...',
+                    label: this.intl.t('fleet-ops.component.live-map-drawer.vehicle-listing.edit-vehicle'),
                     fn: (vehicle) => {
                         return this.focus(vehicle, 'editing');
                     },
                 },
                 {
-                    label: 'Locate vehicle...',
+                    label: this.intl.t('fleet-ops.component.live-map-drawer.vehicle-listing.locate-vehicle'),
                     fn: this.locate,
                 },
                 {
-                    label: 'Delete vehicle...',
+                    label: this.intl.t('fleet-ops.component.live-map-drawer.vehicle-listing.delete-vehicle'),
                     fn: this.delete,
                 },
             ],
@@ -194,7 +200,7 @@ export default class LiveMapDrawerVehicleListingComponent extends Component {
         if (this.liveMap) {
             this.liveMap.focusLayerByRecord(vehicle, 18);
         } else {
-            this.notifications.warning('Unable to locate vehicle.');
+            this.notifications.warning(this.intl.t('fleet-ops.component.live-map-drawer.vehicle-listing.warning-message'));
         }
     }
 

package/addon/components/live-map.hbs

@@ -1,33 +1,9 @@
 <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|
-    >
+    <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.visibilityControls.drivers}}
             {{#each this.drivers as |driver|}}
-                <layers.drift-marker
-                    @id={{driver.id}}
-                    @rotationAngle={{driver.heading}}
-                    @duration={{300}}
-                    @icon={{icon iconUrl=(or driver.vehicle_avatar (config "defaultValues.vehicleAvatar")) 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|
-                >
+                <layers.drift-marker @id={{driver.id}} @rotationAngle={{driver.heading}} @duration={{300}} @icon={{icon iconUrl=(or driver.vehicle_avatar (config "defaultValues.vehicleAvatar")) 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>
@@ -38,17 +14,7 @@
 
         {{#if this.visibilityControls.vehicles}}
             {{#each this.vehicles as |vehicle|}}
-                <layers.drift-marker
-                    @id={{vehicle.id}}
-                    @rotationAngle={{vehicle.heading}}
-                    @duration={{300}}
-                    @icon={{icon iconUrl=(or vehicle.avatar_url (config "defaultValues.vehicleAvatar")) 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|
-                >
+                <layers.drift-marker @id={{vehicle.id}} @rotationAngle={{vehicle.heading}} @duration={{300}} @icon={{icon iconUrl=(or vehicle.avatar_url (config "defaultValues.vehicleAvatar")) 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>
@@ -59,17 +25,7 @@
 
         {{#if this.visibilityControls.places}}
             {{#each this.places as |place|}}
-                <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|
-                >
+                <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>
@@ -111,42 +67,16 @@
             {{/each}}
         {{/if}} --}}
 
-        <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"}}
-        />
+        <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.triggerAction "onServiceAreaLayerAdded" serviceArea}}
-                as |polygon|
-            >
-                <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{serviceArea.name}} Service Area</polygon.tooltip>
+            <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}} {{t "fleet-ops.component.live-map.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.triggerAction "onZoneLayerAdd" zone}}
-                    as |polygon|
-                >
-                    <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{zone.name}} Zone</polygon.tooltip>
+                <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}} {{t "fleet-ops.component.live-map.zone"}}</polygon.tooltip>
                 </layers.polygon>
             {{/each}}
         {{/each}}
@@ -156,17 +86,5 @@
 </div>
 
 {{#if this.isDataLoaded}}
-    <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}}
-    />
+    <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}}

package/addon/components/live-map.js

@@ -26,6 +26,11 @@ export default class LiveMapComponent extends Component {
      */
     @service store;
 
+    /**
+     * @service intl
+     */
+    @service intl;
+
     /**
      * Inject the `fetch` service.
      *
@@ -776,8 +781,8 @@ export default class LiveMapComponent extends Component {
         const toggle = !this.isVisible('drawControls');
 
         this.leafletContextmenuManager.toggleContextMenuItem('map', 'draw controls', {
-            onText: 'Hide draw controls...',
-            offText: 'Enable draw controls...',
+            onText: this.intl.t('fleet-ops.component.live-map.onText'),
+            offText: this.intl.t('fleet-ops.component.live-map.offText'),
             toggle,
             callback: (isToggled) => {
                 if (isToggled) {
@@ -1457,27 +1462,27 @@ export default class LiveMapComponent extends Component {
     @action createMapContextMenu(map) {
         const contextmenuItems = [
             {
-                text: 'Show coordinates...',
+                text: this.intl.t('fleet-ops.component.live-map.show-coordinates'),
                 callback: this.showCoordinates,
                 index: 0,
             },
             {
-                text: 'Center map here...',
+                text: this.intl.t('fleet-ops.component.live-map.center-map'),
                 callback: this.centerMap,
                 index: 1,
             },
             {
-                text: 'Zoom in...',
+                text: this.intl.t('fleet-ops.component.live-map.zoom-in'),
                 callback: this.zoomIn,
                 index: 2,
             },
             {
-                text: 'Zoom out...',
+                text: this.intl.t('fleet-ops.component.live-map.zoom-out'),
                 callback: this.zoomOut,
                 index: 3,
             },
             {
-                text: this.isVisible('drawControls') ? `Hide draw controls...` : `Enable draw controls...`,
+                text: this.isVisible('drawControls') ? this.intl.t('fleet-ops.component.live-map.hide-draw') : this.intl.t('fleet-ops.component.live-map.enable-draw'),
                 callback: this.toggleDrawControlContextMenuItem.bind(this),
                 index: 4,
             },
@@ -1485,7 +1490,7 @@ export default class LiveMapComponent extends Component {
                 separator: true,
             },
             {
-                text: 'Create new Service Area...',
+                text: this.intl.t('fleet-ops.component.live-map.create-new-service'),
                 callback: this.serviceAreas.createServiceArea,
                 index: 5,
             },
@@ -1505,7 +1510,7 @@ export default class LiveMapComponent extends Component {
                 const nextIndex = contextmenuItems.length + 2;
 
                 contextmenuItems.pushObject({
-                    text: `Focus Service Area: ${serviceArea.name}`,
+                    text: this.intl.t('fleet-ops.component.live-map.focus-service', { serviceName: serviceArea.name }),
                     callback: () => this.focusServiceArea(serviceArea),
                     index: nextIndex,
                 });
@@ -1543,19 +1548,19 @@ export default class LiveMapComponent extends Component {
                 separator: true,
             },
             {
-                text: `View Driver: ${driver.name}`,
+                text: this.intl.t('fleet-ops.component.live-map.view-driver', { driverName: driver.name }),
                 callback: () => this.contextPanel.focus(driver),
             },
             {
-                text: `Edit Driver: ${driver.name}`,
+                text: this.intl.t('fleet-ops.component.live-map.edit-driver', { driverName: driver.name }),
                 callback: () => this.contextPanel.focus(driver, 'editing'),
             },
             {
-                text: `Delete Driver: ${driver.name}`,
+                text: this.intl.t('fleet-ops.component.live-map.delete-driver', { driverName: driver.name }),
                 callback: () => this.crud.delete(driver),
             },
             {
-                text: `View Vehicle for: ${driver.name}`,
+                text: this.intl.t('fleet-ops.component.live-map.view-vehicle-for', { driverName: driver.name }),
                 callback: () => this.contextPanel.focus(driver.vehicle),
             },
         ];
@@ -1604,15 +1609,15 @@ export default class LiveMapComponent extends Component {
                 separator: true,
             },
             {
-                text: `View Vehicle: ${vehicle.displayName}`,
+                text: this.intl.t('fleet-ops.component.live-map.view-vehicle', { vehicleName: vehicle.displayName }),
                 callback: () => this.contextPanel.focus(vehicle),
             },
             {
-                text: `Edit Vehicle: ${vehicle.displayName}`,
+                text: this.intl.t('fleet-ops.component.live-map.edit-vehicle', { vehicleName: vehicle.displayName }),
                 callback: () => this.contextPanel.focus(vehicle, 'editing'),
             },
             {
-                text: `Delete Vehicle: ${vehicle.displayName}`,
+                text: this.intl.t('fleet-ops.component.live-map.delete-vehicle', { vehicleName: vehicle.displayName }),
                 callback: () => this.crud.delete(vehicle),
             },
         ];
@@ -1661,11 +1666,11 @@ export default class LiveMapComponent extends Component {
                 separator: true,
             },
             {
-                text: `Edit Zone: ${zone.name}`,
+                text: this.intl.t('fleet-ops.component.live-map.edit-zone', { zoneName: zone.name }),
                 callback: () => this.serviceAreas.editZone(zone),
             },
             {
-                text: `Delete Zone: ${zone.name}`,
+                text: this.intl.t('fleet-ops.component.live-map.delete-zone', { zoneName: zone.name }),
                 callback: () =>
                     this.serviceAreas.deleteZone(zone, {
                         onFinish: () => {
@@ -1674,7 +1679,7 @@ export default class LiveMapComponent extends Component {
                     }),
             },
             {
-                text: `Assign Fleet to Zone: (${zone.name})`,
+                text: this.intl.t('fleet-ops.component.live-map.assign-zone', { zoneName: zone.name }),
                 callback: () => {},
             },
         ];
@@ -1701,23 +1706,23 @@ export default class LiveMapComponent extends Component {
                 separator: true,
             },
             {
-                text: `Blur Service Area: ${serviceArea.name}`,
+                text: this.intl.t('fleet-ops.component.live-map.blur-service', { serviceName: serviceArea.name }),
                 callback: () => this.blurServiceArea(serviceArea),
             },
             {
-                text: `Create Zone within: ${serviceArea.name}`,
+                text: this.intl.t('fleet-ops.component.live-map.create-zone', { serviceName: serviceArea.name }),
                 callback: () => this.serviceAreas.createZone(serviceArea),
             },
             {
-                text: `Assign Fleet to Service Area: ${serviceArea.name}`,
+                text: this.intl.t('fleet-ops.component.live-map.assign-fleet', { serviceName: serviceArea.name }),
                 callback: () => {},
             },
             {
-                text: `Edit Service Area: ${serviceArea.name}`,
+                text: this.intl.t('fleet-ops.component.live-map.edit-service', { serviceName: serviceArea.name }),
                 callback: () => this.serviceAreas.editServiceAreaDetails(serviceArea),
             },
             {
-                text: `Delete Service Area: ${serviceArea.name}`,
+                text: this.intl.t('fleet-ops.component.live-map.delete-service', { serviceName: serviceArea.name }),
                 callback: () =>
                     this.serviceAreas.deleteServiceArea(serviceArea, {
                         onFinish: () => {

package/addon/components/map-container/toolbar/visibility-control-panel.hbs

@@ -1,7 +1,7 @@
 <div class="next-dd-menu overflow-visible">
     <div class="px-1">
         <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1 text-gray-800 dark:text-gray-300">
-            Visibility Controls
+            {{t "fleet-ops.component.map-container.visibility-control-panel.title"}}
         </div>
     </div>
     <div class="next-dd-menu-seperator"></div>
@@ -13,9 +13,9 @@
                 </div>
                 <span>
                     {{#if (is-visibility-control-visible this.liveMap "places")}}
-                        Hide all places...
+                        {{t "fleet-ops.component.map-container.visibility-control-panel.hide-places"}}
                     {{else}}
-                        Show all places...
+                        {{t "fleet-ops.component.map-container.visibility-control-panel.show-places"}}
                     {{/if}}
                 </span>
             </div>
@@ -29,7 +29,7 @@
                     <div class="w-6">
                         <FaIcon @icon="car" />
                     </div>
-                    <span>Vehicles</span>
+                    <span>{{t "fleet-ops.component.map-container.visibility-control-panel.vehicles"}}</span>
                 </div>
                 <div>
                     <Badge @status="info" @hideStatusDot={{true}} @spanClass="rounded-full -mr-2">{{this.liveMap.originalResources.vehicles.length}}</Badge>
@@ -40,23 +40,23 @@
                     <div class="px-1">
                         <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1 text-gray-800 dark:text-gray-300 truncate">
                             <FaIcon @icon="binoculars" class="mr-2" />
-                            <span>Vehicle Visibility Controls...</span>
+                            <span>{{t "fleet-ops.component.map-container.visibility-control-panel.vehicle-controls"}}</span>
                         </div>
                     </div>
                     <div class="next-dd-menu-seperator"></div>
                     <div class="px-1">
                         <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.triggerCallback "toggleAllOnlineOffline" "vehicles")}}>
                             {{#if (is-visibility-control-visible this.liveMap "vehicles")}}
-                                Hide all vehicles...
+                                {{t "fleet-ops.component.map-container.visibility-control-panel.hide-vehicles"}}
                             {{else}}
-                                Show all vehicles...
+                                {{t "fleet-ops.component.map-container.visibility-control-panel.show-vehicles"}}
                             {{/if}}
                         </a>
                         <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.triggerCallback "showOnline" "vehicles")}}>
-                            Only show online vehicles...
+                            {{t "fleet-ops.component.map-container.visibility-control-panel.online-vehicles"}}
                         </a>
                         <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.triggerCallback "showOffline" "vehicles")}}>
-                            Only show offline vehicles...
+                            {{t "fleet-ops.component.map-container.visibility-control-panel.offline-vehicles"}}
                         </a>
                     </div>
                 </div>

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

@@ -1,14 +1,14 @@
 <div class="next-dd-menu overflow-visible">
     <div class="px-1">
         <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1 text-gray-800 dark:text-gray-300">
-            Service Areas
+            {{t "fleet-ops.component.map-container.zones-panel.title"}}
         </div>
     </div>
     <div class="next-dd-menu-seperator"></div>
     <div class="px-1">
-        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn @dd this.triggerCallback "createServiceArea")}}>Create new service area...</a>
-        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn @dd this.triggerCallback "focusAllServiceAreas")}}>Show all service areas</a>
-        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn @dd this.triggerCallback "blurAllServiceAreas")}}>Hide all service areas</a>
+        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn @dd this.triggerCallback "createServiceArea")}}>{{t "fleet-ops.component.map-container.zones-panel.create-service"}}</a>
+        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn @dd this.triggerCallback "focusAllServiceAreas")}}>{{t "fleet-ops.component.map-container.zones-panel.show"}}</a>
+        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn @dd this.triggerCallback "blurAllServiceAreas")}}>{{t "fleet-ops.component.map-container.zones-panel.hide"}}</a>
         {{#each this.serviceAreaRecords as |serviceArea|}}
             <BasicDropdownHover @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
                 <dd.Trigger class="next-dd-item {{if dd.isOpen 'active'}}">
@@ -20,18 +20,18 @@
                         <div class="px-1">
                             <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1 text-gray-800 dark:text-gray-300 truncate">
                                 <FaIcon @icon="drafting-compass" class="mr-2" />
-                                <span>{{serviceArea.name}} Actions...</span>
+                                <span>{{serviceArea.name}} {{t "fleet-ops.component.map-container.zones-panel.action"}}</span>
                             </div>
                         </div>
                         <div class="next-dd-menu-seperator"></div>
                         <div class="px-1">
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.triggerCallback "focusServiceArea" serviceArea)}}>Focus {{serviceArea.name}}...</a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.triggerCallback "focusServiceArea" serviceArea)}}>{{t "fleet-ops.component.map-container.zones-panel.focus"}} {{serviceArea.name}}...</a>
                             {{#if (eq serviceArea this.liveMap.activeServiceArea)}}
-                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.triggerCallback "blurServiceArea" serviceArea)}}>Blur service area...</a>
+                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.triggerCallback "blurServiceArea" serviceArea)}}>{{t "fleet-ops.component.map-container.zones-panel.blur"}}</a>
                             {{/if}}
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.triggerCallback "createZone" serviceArea)}}>Create zone inside...</a>
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.triggerCallback "editServiceAreaDetails" serviceArea)}}>Edit {{serviceArea.name}}...</a>
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.triggerCallback "deleteServiceArea" serviceArea)}}>Delete {{serviceArea.name}}...</a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.triggerCallback "createZone" serviceArea)}}>{{t "fleet-ops.component.map-container.zones-panel.create-zone"}}</a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.triggerCallback "editServiceAreaDetails" serviceArea)}}>{{t "fleet-ops.common.edit"}} {{serviceArea.name}}...</a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.triggerCallback "deleteServiceArea" serviceArea)}}>{{t "fleet-ops.common.delete"}} {{serviceArea.name}}...</a>
                         </div>
                     </div>
                 </dd.Content>

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

@@ -15,13 +15,13 @@
         <button type="button" id="map-toolbar-create-order-button" class="toolbar-button is-action" {{on "click" (fn this.onAction "onPressCreateOrder")}}>
             <FaIcon @icon="paper-plane" />
             <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                <InputInfo @text="Create Order" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+                <InputInfo @text={{t "fleet-ops.component.map-container.toolbar.create"}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
             </Attach::Tooltip>
         </button>
         <button type="button" id="map-toolbar-search-button" class="toolbar-button" {{on "click" (fn this.onAction "onPressSearch")}}>
             <FaIcon @icon="search" />
             <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                <InputInfo @text="Search" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+                <InputInfo @text={{t "fleet-ops.common.search"}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
             </Attach::Tooltip>
         </button>
         <button type="button" id="map-toolbar-view-orders-button" class="toolbar-button relative" {{on "click" (fn this.onAction "onPressViewOrders")}}>
@@ -33,14 +33,14 @@
             </div>
             <FaIcon @icon="layer-group" />
             <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                <InputInfo @text="View Orders" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+                <InputInfo @text={{t "fleet-ops.component.map-container.toolbar.view"}} @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="Service Areas" @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"}} @iconClass="hidden" class="{{if dd.isOpen 'hidden'}} py-1 px-2 bg-gray-900 -mt-1" />
                 </Attach::Tooltip>
             </dd.Trigger>
             <dd.Content>
@@ -51,7 +51,7 @@
             <dd.Trigger class="toolbar-button">
                 <FaIcon @icon="eye" />
                 <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                    <InputInfo @text="Visibility Controls" @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.visibility"}} @iconClass="hidden" class="{{if dd.isOpen 'hidden'}} py-1 px-2 bg-gray-900 -mt-1" />
                 </Attach::Tooltip>
             </dd.Trigger>
             <dd.Content>
@@ -61,7 +61,7 @@
         <button type="button" id="map-toolbar-live-map-drawer-button" class="toolbar-button is-action mb-0i" {{on "click" (fn this.onAction "onPressLiveMapDrawerToggle")}}>
             <FaIcon @icon="binoculars" />
             <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                <InputInfo @text="Scope" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+                <InputInfo @text={{t "fleet-ops.component.map-container.toolbar.scope"}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
             </Attach::Tooltip>
         </button>
     </div>

package/addon/components/modals/assign-driver.hbs

@@ -1,7 +1,7 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
-        <InputGroup @name="Select Driver">
-            <ModelSelect @modelName="driver" @selectedModel={{@options.order.driver_assigned}} @placeholder="Select Driver to Assign" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.order.driver_assigned)}} as |model|>
+        <InputGroup @name={{t "fleet-ops.component.modals.assign-driver.select-driver"}}>
+            <ModelSelect @modelName="driver" @selectedModel={{@options.order.driver_assigned}} @placeholder={{t "fleet-ops.component.modals.assign-driver.select-assign"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.order.driver_assigned)}} as |model|>
                 <div class="flex items-center">
                     <div class="w-7">
                         <FaIcon @icon="id-card-alt" />

package/addon/components/modals/clone-config-form.hbs

@@ -1,6 +1,6 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
-        <InputGroup @name="Config Name" @value={{@options.name}} />
-        <InputGroup @name="Config Description" @value={{@options.description}} />
+        <InputGroup @name={{t "fleet-ops.component.modals.clone-config-form.name"}} @value={{@options.name}} />
+        <InputGroup @name={{t "fleet-ops.component.modals.clone-config-form.description"}} @value={{@options.description}} />
     </div>
 </Modal::Default>

package/addon/components/modals/contact-details.hbs

@@ -8,32 +8,32 @@
                 <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-4 text-xs dark:text-gray-100">
 
                     <div class="field-info-container">
-                        <div class="field-name">Website URL</div>
+                        <div class="field-name">{{t "fleet-ops.common.website-url"}}</div>
                         <div class="field-value">{{n-a @options.contact.name}}</div>
                     </div>
 
                     <div class="field-info-container">
-                        <div class="field-name">Title</div>
+                        <div class="field-name">{{t "fleet-ops.common.title"}}</div>
                         <div class="field-value">{{n-a @options.contact.title}}</div>
                     </div>
 
                     <div class="field-info-container">
-                        <div class="field-name">Internal ID</div>
+                        <div class="field-name">{{t "fleet-ops.common.internal-id"}}</div>
                         <div class="field-value">{{n-a @options.contact.internal_id}}</div>
                     </div>
 
                     <div class="field-info-container">
-                        <div class="field-name">Email</div>
+                        <div class="field-name">{{t "fleet-ops.common.email"}}</div>
                         <div class="field-value">{{n-a @options.contact.email}}</div>
                     </div>
 
                     <div class="field-info-container">
-                        <div class="field-name">Phone</div>
+                        <div class="field-name">{{t "fleet-ops.common.phone"}}</div>
                         <div class="field-value">{{n-a @options.contact.phone}}</div>
                     </div>
 
                     <div class="field-info-container">
-                        <div class="field-name">Type</div>
+                        <div class="field-name">{{t "fleet-ops.common.type"}}</div>
                         <div class="field-value"><Badge @status={{@options.contact.type}} /></div>
                     </div>
                 </div>