@fleetbase/fleetops-engine 0.6.20 → 0.6.22

package/addon/components/custom-entity/form.hbs

@@ -1,12 +1,12 @@
 <div class="form-wrapper" ...attributes>
-    <ContentPanel @title={{t "custom-entity.form.details"}} @open={{true}} @wrapperClass="bordered-top">
+    <ContentPanel @title={{t "custom-entity.fields.details"}} @open={{true}} @wrapperClass="bordered-top">
         <div class="space-y-2">
-            <InputGroup @name={{t "custom-entity.form.name"}} @value={{@resource.name}} />
-            <InputGroup @name={{t "custom-entity.form.description"}} @value={{@resource.description}} />
-            <InputGroup @name={{t "custom-entity.form.type"}} @value={{@resource.type}} {{on "input" this.setCustomEntityType}} />
+            <InputGroup @name={{t "custom-entity.fields.name"}} @value={{@resource.name}} />
+            <InputGroup @name={{t "custom-entity.fields.description"}} @value={{@resource.description}} />
+            <InputGroup @name={{t "custom-entity.fields.type"}} @value={{@resource.type}} {{on "input" this.setCustomEntityType}} />
         </div>
     </ContentPanel>
-    <ContentPanel @title={{t "custom-entity.form.entity-image"}} @open={{true}} @wrapperClass="bordered-top">
+    <ContentPanel @title={{t "custom-entity.fields.entity-image"}} @open={{true}} @wrapperClass="bordered-top">
         <div class="w-32 flex flex-col items-center">
             <Image src={{@resource.photo_url}} alt={{@resource.name}} height="128" width="128" class="h-32 w-32 rounded-md" />
             <UploadButton
@@ -19,32 +19,32 @@
             />
         </div>
     </ContentPanel>
-    <ContentPanel @title={{t "custom-entity.form.measurements"}} @open={{true}} @wrapperClass="bordered-top">
+    <ContentPanel @title={{t "custom-entity.fields.measurements"}} @open={{true}} @wrapperClass="bordered-top">
         <div class="grid grid-cols-2 gap-2">
             <InputGroup
-                @name={{t "custom-entity.form.length"}}
-                @helpText={{t "custom-entity.form.length-text"}}
+                @name={{t "custom-entity.fields.length"}}
+                @helpText={{t "custom-entity.fields.length-text"}}
                 @wrapperClass="mb-2"
             >
                 <UnitInput class="w-full" @value={{@resource.length}} @unit={{@resource.dimensions_unit}} @canSelectUnit={{true}} @onUnitChange={{this.updateCustomEntityDimensionsUnit}} />
             </InputGroup>
             <InputGroup
-                @name={{t "custom-entity.form.width"}}
-                @helpText={{t "custom-entity.form.width-text"}}
+                @name={{t "custom-entity.fields.width"}}
+                @helpText={{t "custom-entity.fields.width-text"}}
                 @wrapperClass="mb-2"
             >
                 <UnitInput class="w-full" @value={{@resource.width}} @unit={{@resource.dimensions_unit}} @canSelectUnit={{true}} @onUnitChange={{this.updateCustomEntityDimensionsUnit}} />
             </InputGroup>
             <InputGroup
-                @name={{t "custom-entity.form.height"}}
-                @helpText={{t "custom-entity.form.height-text"}}
+                @name={{t "custom-entity.fields.height"}}
+                @helpText={{t "custom-entity.fields.height-text"}}
                 @wrapperClass="mb-2"
             >
                 <UnitInput class="w-full" @value={{@resource.height}} @unit={{@resource.dimensions_unit}} @canSelectUnit={{true}} @onUnitChange={{this.updateCustomEntityDimensionsUnit}} />
             </InputGroup>
             <InputGroup
-                @name={{t "custom-entity.form.weight"}}
-                @helpText={{t "custom-entity.form.weight-text"}}
+                @name={{t "custom-entity.fields.weight"}}
+                @helpText={{t "custom-entity.fields.weight-text"}}
                 @wrapperClass="mb-2"
             >
                 <UnitInput

package/addon/components/device/card.hbs

@@ -0,0 +1 @@
+{{yield}}

package/addon/components/device/card.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class DeviceCardComponent extends Component {}

package/addon/components/device/details.hbs

@@ -1,14 +1,44 @@
 <div class="details-wrapper" ...attributes>
-    <ContentPanel @title={{t "device.fields.title"}} @open={{true}} @wrapperClass="bordered-top">
+    <ContentPanel @title="Integration" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
+            <div class="field-info-container lg:col-span-3">
+                <div class="field-name">{{t "device.fields.telematic"}}</div>
+                <div class="field-value">
+                    {{#if @resource.telematic}}
+                        <div class="flex flex-row space-x-2 text-sm">
+                            <div class="pt-1.5">
+                                <Image src={{@resource.telematic.provider_descriptor.icon}} class="w-5 h-5" />
+                            </div>
+                            <div>
+                                <div class="font-semibold">{{@resource.telematic.provider_descriptor.label}}</div>
+                                <div class="text-xs text-gray-400 dark:text-gray-500">
+                                    {{n-a @resource.telematic.provider_descriptor.description}}
+                                </div>
+                            </div>
+                        </div>
+                    {{else}}
+                        {{n-a null}}
+                    {{/if}}
+                </div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.data-frequency"}}</div>
+                <div class="field-value">{{n-a @resource.data_frequency}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title="Identity" @open={{true}} @wrapperClass="bordered-top">
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
             <div class="field-info-container">
                 <div class="field-name">{{t "device.fields.device-name"}}</div>
-                <div class="field-value">{{n-a @resource.device_name}}</div>
+                <div class="field-value">{{n-a @resource.name}}</div>
             </div>
 
             <div class="field-info-container">
                 <div class="field-name">{{t "device.fields.device-type"}}</div>
-                <div class="field-value">{{smart-humanize @resource.device_type}}</div>
+                <div class="field-value">{{n-a (get-fleet-ops-option-label "deviceTypes" @resource.type)}}</div>
             </div>
 
             <div class="field-info-container">
@@ -17,13 +47,22 @@
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.provider"}}</div>
-                <div class="field-value">{{n-a @resource.device_provider}}</div>
+                <div class="field-name">Internal ID</div>
+                <div class="field-value">{{n-a @resource.internal_id}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title="Hardware" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.device-provider"}}</div>
+                <div class="field-value">{{n-a (titleize @resource.provider)}}</div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.model"}}</div>
-                <div class="field-value">{{n-a @resource.device_model}}</div>
+                <div class="field-name">{{t "device.fields.device-model"}}</div>
+                <div class="field-value">{{n-a @resource.model}}</div>
             </div>
 
             <div class="field-info-container">
@@ -31,70 +70,80 @@
                 <div class="field-value">{{n-a @resource.manufacturer}}</div>
             </div>
 
-            <div class="field-info-container">
+            <div class="field-info-container lg:col-span-3">
                 <div class="field-name">{{t "device.fields.serial-number"}}</div>
                 <div class="field-value">{{n-a @resource.serial_number}}</div>
             </div>
+        </div>
+    </ContentPanel>
 
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.location"}}</div>
-                <div class="field-value">{{n-a @resource.device_location}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.status"}}</div>
-                <div class="field-value">
-                    <Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge>
-                </div>
+    <ContentPanel @title="Installation & Maintenance" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
+            <div class="field-info-container lg:col-span-2">
+                <div class="field-name">{{t "device.fields.device-location"}}</div>
+                <div class="field-value">{{n-a @resource.location}}</div>
             </div>
 
             <div class="field-info-container">
                 <div class="field-name">{{t "device.fields.installation-date"}}</div>
-                <div class="field-value">{{format-date @resource.installation_date}}</div>
+                <div class="field-value">{{or (format-date @resource.installation_date) "-"}}</div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.last-maintenance"}}</div>
-                <div class="field-value">{{format-date @resource.last_maintenance_date}}</div>
+                <div class="field-name">{{t "device.fields.last-maintenance-date"}}</div>
+                <div class="field-value">{{or (format-date @resource.last_maintenance_date) "-"}}</div>
             </div>
+        </div>
+    </ContentPanel>
 
+    <ContentPanel @title="Connectivity" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
             <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.data-frequency"}}</div>
-                <div class="field-value">{{n-a @resource.data_frequency}}</div>
+                <div class="field-name">{{t "common.online"}}</div>
+                <div class="field-value">
+                    {{#if @resource.is_online}}
+                        <Badge @status="online">{{t "common.online"}}</Badge>
+                    {{else}}
+                        <Badge @status="offline">{{t "common.offline"}}</Badge>
+                    {{/if}}
+                </div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.telematic"}}</div>
-                <div class="field-value">{{n-a @resource.telematic_name}}</div>
+                <div class="field-name">{{t "common.last-seen-at"}}</div>
+                <div class="field-value">{{or (format-date @resource.last_online_at) "-"}}</div>
             </div>
 
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.warranty"}}</div>
-                <div class="field-value">{{n-a @resource.warranty_name}}</div>
-            </div>
+            {{#if @resource.signal_strength}}
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.signal-strength"}}</div>
+                    <div class="field-value">{{n-a @resource.signal_strength}}</div>
+                </div>
+            {{/if}}
+        </div>
+    </ContentPanel>
 
+    <ContentPanel @title="Warranty & Status" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
             <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.online-status"}}</div>
+                <div class="field-name">{{t "device.fields.status"}}</div>
                 <div class="field-value">
-                    {{#if @resource.is_online}}
-                        <Badge @status="success">{{t "device.fields.online"}}</Badge>
-                    {{else}}
-                        <Badge @status="danger">{{t "device.fields.offline"}}</Badge>
-                    {{/if}}
+                    <Badge @status={{@resource.status}}>
+                        {{smart-humanize @resource.status}}
+                    </Badge>
                 </div>
             </div>
 
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.attached-to"}}</div>
-                <div class="field-value">{{n-a @resource.attached_to_name}}</div>
+            <div class="field-info-container lg:col-span-2">
+                <div class="field-name">{{t "device.fields.warranty"}}</div>
+                <div class="field-value">{{n-a @resource.warranty.name}}</div>
             </div>
+        </div>
+    </ContentPanel>
 
+    <ContentPanel @title="Notes" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-1 gap-2">
             <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.last-online"}}</div>
-                <div class="field-value">{{format-date @resource.last_online_at}}</div>
-            </div>
-
-            <div class="field-info-container col-span-3">
                 <div class="field-name">{{t "device.fields.notes"}}</div>
                 <div class="field-value">{{n-a @resource.notes}}</div>
             </div>

package/addon/components/device/form.hbs

@@ -1,45 +1,109 @@
 <div class="form-wrapper" ...attributes>
-    <ContentPanel @title={{t "device.fields.title"}} @open={{true}} @wrapperClass="bordered-top">
+    <ContentPanel @title="Integration" @open={{true}} @wrapperClass="bordered-top">
         <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
-            <InputGroup @name={{t "device.fields.device-name"}} @wrapperClass="col-span-2">
-                <Input
-                    @value={{@resource.device_name}}
-                    @type="text"
-                    class="w-full form-input"
-                    placeholder={{t "device.fields.device-name-placeholder"}}
-                    disabled={{cannot-write @resource}}
-                />
+            <InputGroup @name={{t "device.fields.telematic"}}>
+                <ModelSelect
+                    @modelName="telematic"
+                    @selectedModel={{@resource.telematic}}
+                    @placeholder={{t "device.fields.telematic-placeholder"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{this.selectTelematic}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    <div class="space-x-2 text-sm">
+                        <div class="inline-block align-top">
+                            <div class="hide-from-trigger h-1.5 w-full" />
+                            <Image src={{model.provider_descriptor.icon}} class="w-5 h-5" />
+                        </div>
+                        <div class="inline-block">
+                            <div class="font-semibold normalize-in-trigger">{{or model.name model.public_id}}</div>
+                            <div class="hide-from-trigger">{{n-a model.provider_descriptor.label (titleize model.provider)}}</div>
+                        </div>
+                    </div>
+                </ModelSelect>
             </InputGroup>
 
             <InputGroup @name={{t "device.fields.device-type"}}>
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
-                        @options={{this.deviceTypeOptions}}
-                        @selected={{@resource.device_type}}
-                        @onChange={{fn (mut @resource.device_type)}}
-                        @placeholder={{t "device.fields.device-type-placeholder"}}
+                        @options={{get-fleet-ops-options "deviceTypes"}}
+                        @selected={{find-by "value" @resource.type (get-fleet-ops-options "deviceTypes")}}
+                        @onChange={{set-model-attr @resource "type"}}
+                        @placeholder={{t "common.select-field" field=(t "common.type")}}
                         @triggerClass="form-select form-input"
                         @disabled={{cannot-write @resource}}
-                        as |type|
+                        as |option|
                     >
-                        {{smart-humanize type}}
+                        <div class="text-sm">
+                            <div class="font-semibold normalize-in-trigger">{{option.label}}</div>
+                            <div class="hide-from-trigger">{{option.description}}</div>
+                        </div>
                     </PowerSelect>
                 </div>
             </InputGroup>
 
-            <InputGroup @name={{t "device.fields.device-id"}}>
+            <InputGroup @name={{t "device.fields.data-frequency"}}>
                 <Input
-                    @value={{@resource.device_id}}
+                    @value={{@resource.data_frequency}}
                     @type="text"
                     class="w-full form-input"
-                    placeholder={{t "device.fields.device-id-placeholder"}}
+                    placeholder={{t "device.fields.data-frequency-placeholder"}}
                     disabled={{cannot-write @resource}}
                 />
             </InputGroup>
+        </div>
+    </ContentPanel>
 
+    <ContentPanel @title="Identity" @open={{true}} @wrapperClass="bordered-top">
+        <div class="flex flex-row space-x-3 mb-3">
+            <div class="flex items-center justify-start rounded-full">
+                <Image src={{@resource.photo_url}} alt={{@resource.name}} height="48" width="48" class="h-14 w-14 rounded-full shadow-sm" />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                    <InputInfo @text={{t "common.upload-new-photo"}} />
+                </Attach::Tooltip>
+            </div>
+            <div>
+                <UploadButton
+                    @name={{t "common.photos"}}
+                    @accept="image/*"
+                    @onFileAdded={{perform this.handlePhotoUpload}}
+                    @icon="upload"
+                    @size="xs"
+                    @buttonText={{t "common.upload-image"}}
+                    @disabled={{cannot-write @resource}}
+                />
+                <div class="px-1">
+                    <span class="text-gray-300 dark:text-gray-600 text-xs">{{t "common.upload-image-supported"}}</span>
+                </div>
+            </div>
+        </div>
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <InputGroup @name={{t "device.fields.device-name"}}>
+                <Input
+                    @value={{@resource.name}}
+                    @type="text"
+                    class="w-full form-input"
+                    placeholder={{t "device.fields.device-name-placeholder"}}
+                    disabled={{cannot-write @resource}}
+                />
+            </InputGroup>
+
+            <InputGroup @name={{t "device.fields.device-id"}}>
+                <Input @value={{@resource.device_id}} @type="text" class="w-full form-input" placeholder={{t "device.fields.device-id-placeholder"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name="Internal ID" @value={{@resource.internal_id}} disabled={{cannot-write @resource}} />
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title="Hardware" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-3 lg:gap-2 no-input-group-padding text-xs">
             <InputGroup @name={{t "device.fields.device-provider"}}>
                 <Input
-                    @value={{@resource.device_provider}}
+                    @value={{@resource.provider}}
                     @type="text"
                     class="w-full form-input"
                     placeholder={{t "device.fields.device-provider-placeholder"}}
@@ -49,7 +113,7 @@
 
             <InputGroup @name={{t "device.fields.device-model"}}>
                 <Input
-                    @value={{@resource.device_model}}
+                    @value={{@resource.model}}
                     @type="text"
                     class="w-full form-input"
                     placeholder={{t "device.fields.device-model-placeholder"}}
@@ -67,7 +131,7 @@
                 />
             </InputGroup>
 
-            <InputGroup @name={{t "device.fields.serial-number"}}>
+            <InputGroup @name={{t "device.fields.serial-number"}} @wrapperClass="lg:col-span-3">
                 <Input
                     @value={{@resource.serial_number}}
                     @type="text"
@@ -76,10 +140,14 @@
                     disabled={{cannot-write @resource}}
                 />
             </InputGroup>
+        </div>
+    </ContentPanel>
 
-            <InputGroup @name={{t "device.fields.device-location"}}>
+    <ContentPanel @title="Installation & Maintenance" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-3 lg:gap-2 no-input-group-padding text-xs">
+            <InputGroup @name={{t "device.fields.device-location"}} @wrapperClass="lg:col-span-2">
                 <Input
-                    @value={{@resource.device_location}}
+                    @value={{@resource.location}}
                     @type="text"
                     class="w-full form-input"
                     placeholder={{t "device.fields.device-location-placeholder"}}
@@ -106,50 +174,30 @@
                     class="w-full form-input"
                 />
             </InputGroup>
+        </div>
+    </ContentPanel>
 
-            <InputGroup @name={{t "device.fields.data-frequency"}}>
-                <Input
-                    @value={{@resource.data_frequency}}
-                    @type="text"
-                    class="w-full form-input"
-                    placeholder={{t "device.fields.data-frequency-placeholder"}}
-                    disabled={{cannot-write @resource}}
-                />
-            </InputGroup>
-
+    <ContentPanel @title="Warranty & Status" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
             <InputGroup @name={{t "device.fields.status"}}>
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
-                        @options={{this.statusOptions}}
-                        @selected={{@resource.status}}
-                        @onChange={{fn (mut @resource.status)}}
-                        @placeholder={{t "device.fields.status-placeholder"}}
+                        @options={{get-fleet-ops-options "deviceStatuses"}}
+                        @selected={{find-by "value" @resource.status (get-fleet-ops-options "deviceStatuses")}}
+                        @onChange={{set-model-attr @resource "status"}}
+                        @placeholder={{t "common.select-field" field=(t "common.status")}}
                         @triggerClass="form-select form-input"
                         @disabled={{cannot-write @resource}}
-                        as |status|
+                        as |option|
                     >
-                        {{smart-humanize status}}
+                        <div class="text-sm">
+                            <div class="font-semibold normalize-in-trigger">{{option.label}}</div>
+                            <div class="hide-from-trigger">{{option.description}}</div>
+                        </div>
                     </PowerSelect>
                 </div>
             </InputGroup>
 
-            <InputGroup @name={{t "device.fields.telematic"}}>
-                <ModelSelect
-                    @modelName="telematic"
-                    @selectedModel={{@resource.telematic}}
-                    @placeholder={{t "device.fields.telematic-placeholder"}}
-                    @triggerClass="form-select form-input"
-                    @infiniteScroll={{false}}
-                    @renderInPlace={{true}}
-                    @onChange={{fn (mut @resource.telematic)}}
-                    @onChangeId={{fn (mut @resource.telematic_uuid)}}
-                    @disabled={{cannot-write @resource}}
-                    as |model|
-                >
-                    {{model.name}}
-                </ModelSelect>
-            </InputGroup>
-
             <InputGroup @name={{t "device.fields.warranty"}}>
                 <ModelSelect
                     @modelName="warranty"
@@ -168,7 +216,11 @@
                     {{model.provider}}
                 </ModelSelect>
             </InputGroup>
+        </div>
+    </ContentPanel>
 
+    <ContentPanel @title="Notes" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 no-input-group-padding text-xs">
             <InputGroup @name={{t "device.fields.notes"}} @wrapperClass="col-span-2">
                 <Textarea
                     @value={{@resource.notes}}
@@ -179,10 +231,6 @@
                     rows={{4}}
                 />
             </InputGroup>
-
-            <RegistryYield @registry="fleet-ops:component:device:form:details" as |RegistryComponent|>
-                <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
-            </RegistryYield>
         </div>
     </ContentPanel>
 

package/addon/components/device/form.js

@@ -1,13 +1,41 @@
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
 
 export default class DeviceFormComponent extends Component {
-    /**
-     * Device type options
-     */
-    deviceTypeOptions = ['dashcam', 'obd', 'blackbox', 'tablet', 'tracker', 'sensor'];
+    @service fetch;
+    @service currentUser;
+    @service notifications;
 
-    /**
-     * Status options for devices
-     */
-    statusOptions = ['active', 'inactive', 'maintenance', 'retired'];
+    @action selectTelematic(telematic) {
+        this.args.resource.setProperties({
+            telematic,
+            telematic_uuid: telematic.id,
+            provider: telematic.provider,
+        });
+    }
+
+    @task *handlePhotoUpload(file) {
+        try {
+            yield this.fetch.uploadFile.perform(
+                file,
+                {
+                    path: `uploads/${this.currentUser.companyId}/devices/${this.args.resource.id}`,
+                    subject_uuid: this.args.resource.id,
+                    subject_type: 'fleet-ops:device',
+                    type: 'device_photo',
+                },
+                (uploadedFile) => {
+                    this.args.resource.setProperties({
+                        photo_uuid: uploadedFile.id,
+                        photo_url: uploadedFile.url,
+                        photo: uploadedFile,
+                    });
+                }
+            );
+        } catch (err) {
+            this.notifications.error('Unable to upload photo: ' + err.message);
+        }
+    }
 }

package/addon/components/device/manager.hbs

@@ -0,0 +1,29 @@
+<div class="fleetops-device-manager" ...attributes>
+    <div class="flex flex-row items-center justify-between mb-4 px-3 pt-2">
+        <div></div>
+        <div>
+            <Button @icon="plus" @text="Attach device" @onClick={{this.addDevice}} @disabled={{not @resource}} />
+        </div>
+    </div>
+    <div>
+        {{#each this.devices as |device|}}
+            <div class="flex flex-row justify-between px-3 py-4 border-t border-gray-200 dark:border-gray-700">
+                <Device::Pill @device={{device}} />
+                <div>
+                    <Button @type="danger" @icon="times" @text="Detach" @size="xs" @onClick={{fn this.removeDevice device}} />
+                </div>
+            </div>
+        {{else}}
+            <div class="empty-state bg-white dark:bg-gray-800 rounded-lg shadow-sm p-12 text-center">
+                <FaIcon @icon="hard-drive" @size="2x" class="text-gray-400 mb-2" />
+                <h3 class="text-base font-semibold text-gray-700 dark:text-gray-300">
+                    No Devices Attached
+                </h3>
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                    Click Attach device above to start receiving telematic data for this
+                    {{get-model-name @resource}}
+                </p>
+            </div>
+        {{/each}}
+    </div>
+</div>