@fleetbase/fleetops-engine 0.4.0 → 0.4.1

package/addon/components/issue-form-panel.hbs

@@ -10,28 +10,28 @@
     @width={{or this.width @width "570px"}}
 >
     <Overlay::Header
-        @title={{if this.issue.public_id this.issue.name "New Issue"}}
+        @title={{if this.issue.public_id this.issue.name (t "fleet-ops.component.issue-form-panel.issue") }}
         @status={{this.issue.public_id}}
         @hideStatusDot={{true}}
         @createdAt={{this.issue.createdAt}}
         @titleWrapperClass="leading-5"
     >
         <div class="flex flex-1 justify-end">
-            <Button @icon={{if this.issue.id "save" "check"}} @type="primary" @text={{if this.issue.id "Save Issue" "Create Issue"}} @onClick={{this.save}} @wrapperClass="mr-2" />
+            <Button @icon={{if this.issue.id "save" "check"}} @type="primary" @text={{if this.issue.id (t "fleet-ops.component.issue-form-panel.save-issue")(t "fleet-ops.component.issue-form-panel.create-issue") }} @onClick={{this.save}} @wrapperClass="mr-2" />
             {{#if this.issue.id}}
-                <Button @type="default" @icon="circle-exclamation" @helpText="View issue details" @onClick={{this.onViewDetails}} @wrapperClass="mr-2" />
+                <Button @type="default" @icon="circle-exclamation" @helpText={{t "fleet-ops.component.issue-form-panel.view-details"}} @onClick={{this.onViewDetails}} @wrapperClass="mr-2" />
             {{/if}}
-            <Button @type="default" @icon="times" @helpText={{if this.issue.id "Cancel edit issue" "Cancel new issue"}} @onClick={{this.onPressCancel}} />
+            <Button @type="default" @icon="times" @helpText={{if this.issue.id (t "fleet-ops.component.issue-form-panel.cancel-edit-issue")(t "fleet-ops.component.issue-form-panel.cancel-new-issue") }} @onClick={{this.onPressCancel}} />
         </div>
     </Overlay::Header>
 
     <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
         <div class="grid grid-cols-1 text-xs dark:text-gray-100">
-            <InputGroup @name="Reported By">
+            <InputGroup @name={{t "fleet-ops.component.issue-form-panel.reported-by"}}>
                 <ModelSelect
                     @modelName="user"
                     @selectedModel={{this.issue.reporter}}
-                    @placeholder="Select Reporter"
+                    @placeholder={{t "fleet-ops.component.issue-form-panel.select-reporter"}}
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
@@ -43,11 +43,11 @@
                 </ModelSelect>
             </InputGroup>
 
-            <InputGroup @name="Assigned To">
+            <InputGroup @name={{t "fleet-ops.component.issue-form-panel.assigned"}}>
                 <ModelSelect
                     @modelName="user"
                     @selectedModel={{this.issue.assignee}}
-                    @placeholder="Select Assignee"
+                    @placeholder={{t "fleet-ops.component.issue-form-panel.select-assign"}}
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
@@ -59,11 +59,11 @@
                 </ModelSelect>
             </InputGroup>
 
-            <InputGroup @name="Driver">
+            <InputGroup @name={{t "fleet-ops.common.driver"}}>
                 <ModelSelect
                     @modelName="driver"
                     @selectedModel={{this.issue.driver}}
-                    @placeholder="Select Driver"
+                    @placeholder={{t "fleet-ops.component.issue-form-panel.select-driver"}}
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
@@ -74,11 +74,11 @@
                 </ModelSelect>
             </InputGroup>
 
-            <InputGroup @name="Vehicle">
+            <InputGroup @name={{t "fleet-ops.common.vehicle"}}>
                 <ModelSelect
                     @modelName="vehicle"
                     @selectedModel={{this.issue.vehicle}}
-                    @placeholder="Select Vehicle"
+                    @placeholder={{t "fleet-ops.component.issue-form-panel.select-vehicle"}}
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
@@ -89,13 +89,13 @@
                 </ModelSelect>
             </InputGroup>
 
-            <InputGroup @name="Issue Type">
+            <InputGroup @name={{t "fleet-ops.component.issue-form-panel.type"}}>
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
                         @options={{this.issueTypes}}
                         @selected={{this.issue.type}}
                         @onChange={{this.onSelectIssueType}}
-                        @placeholder="Select issue type"
+                        @placeholder={{t "fleet-ops.component.issue-form-panel.select-type"}}
                         @triggerClass="form-select form-input"
                         as |type|
                     >
@@ -104,13 +104,13 @@
                 </div>
             </InputGroup>
 
-            <InputGroup @name="Issue Category">
+            <InputGroup @name={{t "fleet-ops.component.issue-form-panel.category"}}>
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
                         @options={{this.issueCategories}}
                         @selected={{this.issue.category}}
                         @onChange={{fn (mut this.issue.category)}}
-                        @placeholder="Select issue category"
+                        @placeholder={{t "fleet-ops.component.issue-form-panel.select-category"}}
                         @triggerClass="form-select form-input"
                         @disabled={{not this.issueCategories}}
                         as |category|
@@ -120,14 +120,14 @@
                 </div>
             </InputGroup>
 
-            <InputGroup @name="Issue Report">
-                <Textarea @value={{this.issue.report}} aria-label="Issue Report" class="w-full form-input" placeholder="Issue Report" rows={{5}} />
+            <InputGroup @name={{t "fleet-ops.component.issue-form-panel.report"}}>
+                <Textarea @value={{this.issue.report}} aria-label="Issue Report" class="w-full form-input" placeholder={{t "fleet-ops.component.issue-form-panel.report"}} rows={{5}} />
             </InputGroup>
 
-            <InputGroup @name="Issue Tags">
+            <InputGroup @name={{t "fleet-ops.component.issue-form-panel.tags"}}>
                 <TagInput
                     class="form-input"
-                    @placeholder="Add tags"
+                    @placeholder={{t "fleet-ops.component.issue-form-panel.add-tags"}}
                     @allowSpacesInTags={{true}}
                     @tags={{this.issue.tags}}
                     @addTag={{this.addTag}}
@@ -138,13 +138,13 @@
                 </TagInput>
             </InputGroup>
 
-            <InputGroup @name="Issue Priority">
+            <InputGroup @name={{t "fleet-ops.component.issue-form-panel.priority"}}>
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
                         @options={{this.issuePriorityOptions}}
                         @selected={{this.issue.priority}}
                         @onChange={{fn (mut this.issue.priority)}}
-                        @placeholder="Select issue priority"
+                        @placeholder={{t "fleet-ops.component.issue-form-panel.select-priority"}}
                         @triggerClass="form-select form-input"
                         as |priority|
                     >
@@ -153,13 +153,13 @@
                 </div>
             </InputGroup>
 
-            <InputGroup @name="Status">
+            <InputGroup @name={{t "fleet-ops.common.status"}}>
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
                         @options={{this.issueStatusOptions}}
                         @selected={{this.issue.status}}
                         @onChange={{fn (mut this.issue.status)}}
-                        @placeholder="Select issue status"
+                        @placeholder={{t "fleet-ops.component.issue-form-panel.select-status"}}
                         @triggerClass="form-select form-input"
                         as |status|
                     >
@@ -168,7 +168,7 @@
                 </div>
             </InputGroup>
 
-            <InputGroup @name="Coordinates">
+            <InputGroup @name={{t "fleet-ops.common.coordinates"}}>
                 <CoordinatesInput @value={{this.issue.location}} @onChange={{fn (mut this.issue.location)}} />
             </InputGroup>
         </div>

package/addon/components/issue-form-panel.js

@@ -20,6 +20,11 @@ export default class IssueFormPanelComponent extends Component {
      */
     @service fetch;
 
+    /**
+     * @service intl
+     */
+    @service intl;
+
     /**
      * @service notifications
      */
@@ -126,7 +131,7 @@ export default class IssueFormPanelComponent extends Component {
             return issue
                 .save()
                 .then((issue) => {
-                    this.notifications.success(`Issue (${issue.public_id}) saved successfully.`);
+                    this.notifications.success(this.intl.t('fleet-ops.component.issue-form-panel.success-message', { publicId: issue.public_id }));
                     contextComponentCallback(this, 'onAfterSave', issue);
                 })
                 .catch((error) => {

package/addon/components/issue-panel/details.hbs

@@ -1,46 +1,46 @@
 <div class="p-4">
-    <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+    <ContentPanel @title={{t "fleet-ops.common.details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs md:mb-6 dark:text-gray-100">
             <div class="field-info-container">
-                <div class="field-name">Reporter</div>
+                <div class="field-name">{{t "fleet-ops.common.reporter"}}</div>
                 <div class="field-value">{{n-a @issue.reporter_name}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Assigned To</div>
+                <div class="field-name">{{t "fleet-ops.component.issue-panel.details.assigned"}}</div>
                 <div class="field-value">{{n-a @issue.assignee_name}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Driver</div>
+                <div class="field-name">{{t "fleet-ops.common.driver"}}</div>
                 <div class="field-value">{{n-a @issue.driver_name}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Vehicle</div>
+                <div class="field-name">{{t "fleet-ops.common.vehicle"}}</div>
                 <div class="field-value">{{n-a @issue.vehicle_name}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Issue Type</div>
+                <div class="field-name">{{t "fleet-ops.component.issue-panel.details.type"}}</div>
                 <div class="field-value">{{n-a @issue.type}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Issue Category</div>
+                <div class="field-name">{{t "fleet-ops.component.issue-panel.details.category"}}</div>
                 <div class="field-value">{{n-a @issue.category}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Issue Priority</div>
+                <div class="field-name">{{t "fleet-ops.component.issue-panel.details.priority"}}</div>
                 <div class="field-value">
                     <Badge @status={{@issue.priority}} />
                 </div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Date Created</div>
+                <div class="field-name">{{t "fleet-ops.common.date-created"}}</div>
                 <div class="field-value">{{@issue.createdAtShort}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Coordinates</div>
+                <div class="field-name">{{t "fleet-ops.common.coordinates"}}</div>
                 <div class="field-value">{{point-coordinates @issue.location}}</div>
             </div>
             <div class="field-info-container col-span-2">
-                <div class="field-name">Report</div>
+                <div class="field-name">{{t "fleet-ops.component.issue-panel.details.report"}}</div>
                 <div class="field-value">{{n-a @issue.report}}</div>
             </div>
         </div>

package/addon/components/issue-panel.hbs

@@ -9,9 +9,9 @@
     @isResizable={{or this.isResizable @isResizable}}
     @width={{or this.width @width "570px"}}
 >
-    <Overlay::Header @title="Issue Details" @status={{this.issue.public_id}} @hideStatusDot={{true}} @createdAt={{this.issue.createdAt}}>
-        <Button @type="default" @icon="pen" @helpText="Edit Issue" @onClick={{this.onEdit}} @wrapperClass="mr-2" />
-        <Button @type="default" @icon="times" @helpText={{if this.issue.id "Cancel edit Issue" "Cancel new Issue"}} @onClick={{this.onPressCancel}} />
+    <Overlay::Header @title={{t "fleet-ops.component.issue-panel.title"}} @status={{this.issue.public_id}} @hideStatusDot={{true}} @createdAt={{this.issue.createdAt}}>
+        <Button @type="default" @icon="pen" @helpText={{t "fleet-ops.component.issue-panel.edit-issue"}} @onClick={{this.onEdit}} @wrapperClass="mr-2" />
+        <Button @type="default" @icon="times" @helpText={{if this.issue.id (t "fleet-ops.component.issue-panel.cancel-edit-issue")(t "fleet-ops.component.issue-panel.cancel-new-issue") }} @onClick={{this.onPressCancel}} />
     </Overlay::Header>
     <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
         <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">

package/addon/components/layout/fleet-ops-sidebar.hbs

@@ -1,5 +1,5 @@
 <div id="create-order-button-menu-wrapper" class="create-order-menu-button-wrapper mb-2">
-    <Button @text="Create new order" @type="primary" @size="xs" @icon="paper-plane" @iconPrefix="fas" @iconSize="sm" @wrapperClass="w-full create-order-button-wrapper" class="w-full create-order-button" @onClick={{this.onClickCreateOrder}} />
+    <Button @text={{t "fleet-ops.component.layout.fleet-ops-sidebar.title"}} @type="primary" @size="xs" @icon="paper-plane" @iconPrefix="fas" @iconSize="sm" @wrapperClass="w-full create-order-button-wrapper" class="w-full create-order-button" @onClick={{this.onClickCreateOrder}} />
 </div>
 {{#each this.universeMenuItems as |menuItem|}}
     {{#if menuItem.renderComponentInPlace}}
@@ -26,5 +26,5 @@
         {{/each}}
     </Layout::Sidebar::Panel>
 {{/each}}
-<Layout::Sidebar::Item @onClick={{this.onClickSettings}} @icon="cogs">Settings</Layout::Sidebar::Item>
+<Layout::Sidebar::Item @onClick={{this.onClickSettings}} @icon="cogs">{{t "fleet-ops.component.layout.fleet-ops-sidebar.settings"}}</Layout::Sidebar::Item>
 {{yield}}

package/addon/components/layout/fleet-ops-sidebar.js

@@ -15,6 +15,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
     @service universe;
     @service contextPanel;
     @service store;
+    @service intl;
     @tracked routePrefix = 'console.fleet-ops.';
     @tracked menuPanels = [];
     @tracked universeMenuItems = [];
@@ -36,20 +37,32 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
      */
     createMenuPanels() {
         const operationsItems = [
-            { title: 'Dashboard', icon: 'home', route: 'operations.orders' },
-            { title: 'Service Rates', icon: 'file-invoice-dollar', route: 'operations.service-rates' },
-            { title: 'Scheduler', icon: 'calendar-day', route: 'operations.scheduler' },
+            { title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.dashboard'), icon: 'home', route: 'operations.orders' },
+            { title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.service-rates'), icon: 'file-invoice-dollar', route: 'operations.service-rates' },
+            { title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.scheduler'), icon: 'calendar-day', route: 'operations.scheduler' },
         ];
 
         const resourcesItems = [
-            { title: 'Drivers', icon: 'id-card', route: 'management.drivers', renderComponentInPlace: true, component: DriverListingComponent },
-            { title: 'Vehicles', icon: 'truck', route: 'management.vehicles' },
-            { title: 'Fleets', icon: 'user-group', route: 'management.fleets', renderComponentInPlace: true, component: FleetListingComponent },
-            { title: 'Vendors', icon: 'warehouse', route: 'management.vendors' },
-            { title: 'Contacts', icon: 'address-book', route: 'management.contacts' },
-            { title: 'Places', icon: 'location-dot', route: 'management.places' },
-            { title: 'Fuel Reports', icon: 'gas-pump', route: 'management.fuel-reports' },
-            { title: 'Issues', icon: 'triangle-exclamation', route: 'management.issues' },
+            {
+                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.drivers'),
+                icon: 'id-card',
+                route: 'management.drivers',
+                renderComponentInPlace: true,
+                component: DriverListingComponent,
+            },
+            { title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.vehicles'), icon: 'truck', route: 'management.vehicles' },
+            {
+                title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.fleets'),
+                icon: 'user-group',
+                route: 'management.fleets',
+                renderComponentInPlace: true,
+                component: FleetListingComponent,
+            },
+            { title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.vendors'), icon: 'warehouse', route: 'management.vendors' },
+            { title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.contacts'), icon: 'address-book', route: 'management.contacts' },
+            { title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.places'), icon: 'location-dot', route: 'management.places' },
+            { title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.fuel-reports'), icon: 'gas-pump', route: 'management.fuel-reports' },
+            { title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.issues'), icon: 'triangle-exclamation', route: 'management.issues' },
         ];
 
         const createPanel = (title, routePrefix, items = []) => ({
@@ -64,7 +77,10 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 .filter((item) => item.visible),
         });
 
-        this.menuPanels = [createPanel('Operations', 'operations', operationsItems), createPanel('Resources', 'management', resourcesItems)].filter((panel) => {
+        this.menuPanels = [
+            createPanel(this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.operations'), 'operations', operationsItems),
+            createPanel(this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.resources'), 'management', resourcesItems),
+        ].filter((panel) => {
             const isVisible = panel.visible && panel.items.length > 0;
             return isVisible;
         });

package/addon/components/live-map-drawer/driver-listing.hbs

@@ -1,6 +1,6 @@
 <div class="flex flex-row items-center px-5 py-2 border-b border-gray-200 dark:border-gray-700">
     <div>
-        <Input @value={{this.query}} {{on "input" this.performSearch}} @type="text" class="form-input form-input-sm w-60" placeholder="Filter drivers by keyword..." />
+        <Input @value={{this.query}} {{on "input" this.performSearch}} @type="text" class="form-input form-input-sm w-60" placeholder={{t "fleet-ops.component.live-map-drawer.driver-listing.message"}} />
     </div>
 </div>
 <Table @rows={{this.drivers}} @columns={{this.columns}} @onSetup={{fn (mut this.table)}} />

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

@@ -37,6 +37,12 @@ export default class LiveMapDrawerDriverListingComponent extends Component {
      */
     @service crud;
 
+    /**
+     * Service for intl.
+     * @service
+     */
+    @service intl;
+
     /**
      * The list of drivers to display, tracked for reactivity.
      * @tracked
@@ -68,7 +74,7 @@ export default class LiveMapDrawerDriverListingComponent extends Component {
      */
     @tracked columns = [
         {
-            label: 'Driver',
+            label: this.intl.t('fleet-ops.common.driver'),
             valuePath: 'name',
             photoPath: 'photo_url',
             width: '100px',
@@ -76,27 +82,27 @@ export default class LiveMapDrawerDriverListingComponent extends Component {
             onClick: this.focus,
         },
         {
-            label: 'Location',
+            label: this.intl.t('fleet-ops.component.live-map-drawer.driver-listing.location'),
             valuePath: 'location',
             width: '80px',
             cellComponent: 'table/cell/point',
             onClick: this.locate,
         },
         {
-            label: 'Current Job',
+            label: this.intl.t('fleet-ops.component.live-map-drawer.driver-listing.current-job'),
             valuePath: 'current_job_id',
             width: '80px',
             cellComponent: 'table/cell/anchor',
             onClick: this.job,
         },
         {
-            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.driver-listing.last-seen'),
             valuePath: 'updatedAgo',
             width: '60px',
         },
@@ -112,21 +118,21 @@ export default class LiveMapDrawerDriverListingComponent extends Component {
             width: '90px',
             actions: [
                 {
-                    label: 'View driver details...',
+                    label: this.intl.t('fleet-ops.component.live-map-drawer.driver-listing.view-driver'),
                     fn: this.focus,
                 },
                 {
-                    label: 'Edit driver...',
+                    label: this.intl.t('fleet-ops.component.live-map-drawer.driver-listing.edit-driver'),
                     fn: (driver) => {
                         return this.focus(driver, 'editing');
                     },
                 },
                 {
-                    label: 'Locate driver...',
+                    label: this.intl.t('fleet-ops.component.live-map-drawer.driver-listing.locate-driver'),
                     fn: this.locate,
                 },
                 {
-                    label: 'Delete driver...',
+                    label: this.intl.t('fleet-ops.component.live-map-drawer.driver-listing.delete-driver'),
                     fn: this.delete,
                 },
             ],
@@ -206,7 +212,7 @@ export default class LiveMapDrawerDriverListingComponent extends Component {
         if (this.liveMap) {
             this.liveMap.focusLayerByRecord(driver, 18);
         } else {
-            this.notifications.warning('Unable to locate driver.');
+            this.notifications.warning(this.intl.t('fleet-ops.component.live-map-drawer.driver-listing.warning-message'));
         }
     }
 

package/addon/components/live-map-drawer/place-listing.hbs

@@ -1,6 +1,6 @@
 <div class="flex flex-row items-center px-5 py-2 border-b border-gray-200 dark:border-gray-700">
     <div>
-        <Input @value={{this.query}} {{on "input" this.performSearch}} @type="text" class="form-input form-input-sm w-60" placeholder="Filter places by keyword..." />
+        <Input @value={{this.query}} {{on "input" this.performSearch}} @type="text" class="form-input form-input-sm w-60" placeholder={{t "fleet-ops.component.live-map-drawer.place-listing.message"}} />
     </div>
 </div>
 <Table @rows={{this.places}} @columns={{this.columns}} @onSetup={{fn (mut this.table)}} />

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

@@ -31,6 +31,11 @@ export default class LiveMapDrawerPlaceListingComponent extends Component {
      */
     @service crud;
 
+    /**
+     * Service for intl.
+     * @service
+     */
+    @service intl;
     /**
      * The list of places to display, tracked for reactivity.
      * @tracked
@@ -62,7 +67,7 @@ export default class LiveMapDrawerPlaceListingComponent extends Component {
      */
     @tracked columns = [
         {
-            label: 'Place',
+            label: this.intl.t('fleet-ops.component.live-map-drawer.place-listing.place'),
             valuePath: 'address',
             width: '200px',
             cellComponent: 'table/cell/anchor',
@@ -70,7 +75,7 @@ export default class LiveMapDrawerPlaceListingComponent extends Component {
             showOnlineIndicator: true,
         },
         {
-            label: 'Location',
+            label: this.intl.t('fleet-ops.component.live-map-drawer.place-listing.location'),
             valuePath: 'location',
             width: '80px',
             cellComponent: 'table/cell/point',
@@ -88,21 +93,21 @@ export default class LiveMapDrawerPlaceListingComponent extends Component {
             width: '90px',
             actions: [
                 {
-                    label: 'View place details...',
+                    label: this.intl.t('fleet-ops.component.live-map-drawer.place-listing.view-place'),
                     fn: this.focus,
                 },
                 {
-                    label: 'Edit place...',
+                    label: this.intl.t('fleet-ops.component.live-map-drawer.place-listing.edit-place'),
                     fn: (place) => {
                         return this.focus(place, 'editing');
                     },
                 },
                 {
-                    label: 'Locate place...',
+                    label: this.intl.t('fleet-ops.component.live-map-drawer.place-listing.locate-place'),
                     fn: this.locate,
                 },
                 {
-                    label: 'Delete place...',
+                    label: this.intl.t('fleet-ops.component.live-map-drawer.place-listing.delete-place'),
                     fn: this.delete,
                 },
             ],
@@ -182,7 +187,7 @@ export default class LiveMapDrawerPlaceListingComponent extends Component {
         if (this.liveMap) {
             this.liveMap.focusLayerByRecord(place, 18);
         } else {
-            this.notifications.warning('Unable to locate place.');
+            this.notifications.warning(this.intl.t('fleet-ops.component.live-map-drawer.place-listing.warning-message'));
         }
     }
 

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

@@ -1,6 +1,6 @@
 <div class="flex flex-row items-center px-5 py-2 border-b border-gray-200 dark:border-gray-700">
     <div>
-        <Input @value={{this.query}} {{on "input" this.performSearch}} @type="text" class="form-input form-input-sm w-60" placeholder="Filter vehicles by keyword..." />
+        <Input @value={{this.query}} {{on "input" this.performSearch}} @type="text" class="form-input form-input-sm w-60" placeholder={{t "fleet-ops.component.live-map-drawer.vehicle-listing.message"}} />
     </div>
 </div>
 <Table @rows={{this.vehicles}} @columns={{this.columns}} @onSetup={{fn (mut this.table)}} />

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'));
         }
     }