@fleetbase/fleetops-engine 0.6.21 → 0.6.23

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/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>

package/addon/components/device/manager.js

@@ -0,0 +1,95 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action, get } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { debug } from '@ember/debug';
+import { task } from 'ember-concurrency';
+import getModelName from '@fleetbase/ember-core/utils/get-model-name';
+
+export default class DeviceManagerComponent extends Component {
+    @service store;
+    @service modalsManager;
+    @service notifications;
+    @tracked devices = [];
+
+    get resourceName() {
+        const record = this.args.resource;
+        if (!record) return 'resource';
+
+        return (
+            get(record, this.args.namePath ?? 'name') ??
+            get(record, 'display_name') ??
+            get(record, 'displayName') ??
+            get(record, 'tracking') ??
+            get(record, 'public_id') ??
+            getModelName(record)
+        );
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadDevices.perform();
+    }
+
+    @action addDevice() {
+        this.modalsManager.show('modals/attach-device', {
+            title: 'Select device to attach',
+            acceptButtonText: 'Confirm & Attach Device',
+            selectedDevice: null,
+            confirm: async (modal) => {
+                const selectedDevice = modal.getOption('selectedDevice');
+                if (!selectedDevice) return;
+
+                selectedDevice.setProperties({
+                    attachable_uuid: this.args.resource.id,
+                    attachable_type: `fleet-ops:${getModelName(this.args.resource)}`,
+                });
+
+                modal.startLoading();
+
+                try {
+                    await selectedDevice.save();
+                    await this.loadDevices.perform();
+                    this.notifications.success('Device attached successfully.');
+                    modal.done();
+                } catch (err) {
+                    this.notifications.serverError(err);
+                    modal.stopLoading();
+                }
+            },
+        });
+    }
+
+    @action removeDevice(device) {
+        this.modalsManager.confirm({
+            title: `Are you sure you want to detach this device (${device.name}) from (${this.resourceName})?`,
+            body: `Removing this device will stop all telematic updates and events for this ${getModelName(this.args.resource)}.`,
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                device.setProperties({ attachable_uuid: null, attachable_type: null });
+
+                try {
+                    await device.save();
+                    await this.loadDevices.perform();
+                    this.notifications.success('Device removed.');
+                    modal.done();
+                } catch (error) {
+                    this.notifications.serverError(error);
+                    modal.stopLoading();
+                }
+            },
+        });
+    }
+
+    @task *loadDevices() {
+        if (!this.args.resource) return;
+
+        try {
+            const devices = yield this.store.query('device', { attachable_uuid: this.args.resource.id });
+            this.devices = devices;
+        } catch (err) {
+            debug('Unable to load devices: ' + err.message);
+        }
+    }
+}

package/addon/components/device/pill.hbs

@@ -0,0 +1,16 @@
+{{#let (or @device @resource) as |resource|}}
+    <Pill
+        @resource={{resource}}
+        @imageSrc={{resource.photo_url}}
+        @subtitle={{or resource.device_id resource.serial_number resource.imei resource.public_id}}
+        @showOnlineIndicator={{true}}
+        @onClick={{@onClick}}
+        @anchorClass={{@anchorClass}}
+        @imageClass={{@imageClass}}
+        @imageWrapperClass={{@imageWrapperClass}}
+        @contentWrapperClass={{@contentWrapperClass}}
+        @titleClass={{@titleClass}}
+        @subtitleClass={{@subtitleClass}}
+        ...attributes
+    />
+{{/let}}

package/addon/components/device/pill.js

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

package/addon/components/driver/details.hbs

@@ -53,4 +53,8 @@
     </ContentPanel>
 
     <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+
+    <ContentPanel @title={{t "common.metadata"}} @open={{true}} @actionButtons={{this.metadataButtons}} @wrapperClass="bordered-top" @panelBodyWrapperClass={{unless (is-object-empty @resource.meta) "px-0i" ""}}>
+        <MetadataViewer @metadata={{@resource.meta}} />
+    </ContentPanel>
 </div>

package/addon/components/driver/details.js

@@ -1,3 +1,21 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 
-export default class DriverDetailsComponent extends Component {}
+export default class DriverDetailsComponent extends Component {
+    @service resourceMetadata;
+
+    get metadataButtons() {
+        return [
+            {
+                type: 'default',
+                text: 'Edit',
+                icon: 'pencil',
+                iconPrefix: 'fas',
+                permission: 'fleet-ops update driver',
+                onClick: () => {
+                    this.resourceMetadata.edit(this.args.resource);
+                },
+            },
+        ];
+    }
+}

package/addon/components/driver/form.hbs

@@ -51,7 +51,14 @@
     <ContentPanel @title={{t "driver.fields.driver-details"}} @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}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{@resource.name}} height="48" width="48" class="h-14 w-14 rounded-full shadow-sm" />
+                <Image
+                    src={{@resource.photo_url}}
+                    @fallbackSrc={{config "defaultValues.driverImage"}}
+                    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>
@@ -133,7 +140,7 @@
             </InputGroup>
 
             <InputGroup @name={{t "common.status"}}>
-                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
                         @options={{get-fleet-ops-options "driverStatuses"}}
                         @selected={{find-by "value" @resource.status (get-fleet-ops-options "driverStatuses")}}
@@ -168,4 +175,8 @@
     <ContentPanel @title={{t "avatar-picker.avatar"}} @open={{true}} @wrapperClass="bordered-top">
         <AvatarPicker @model={{@resource}} @defaultAvatar={{config "defaultValues.driverAvatar"}} />
     </ContentPanel>
+
+    <ContentPanel @title={{t "common.metadata"}} @open={{true}} @wrapperClass="bordered-top">
+        <MetadataEditor @value={{@resource.meta}} @onChange={{fn (mut @resource.meta)}} />
+    </ContentPanel>
 </div>

package/addon/components/driver/pill.hbs

@@ -0,0 +1,17 @@
+{{#let (or @driver @resource) as |resource|}}
+    <Pill
+        @resource={{resource}}
+        @imageSrc={{avatar-url resource.photo_url}}
+        @subtitle={{n-a resource.phone "No Phone"}}
+        @fallbackImageType="driverImage"
+        @showOnlineIndicator={{true}}
+        @onClick={{@onClick}}
+        @anchorClass={{@anchorClass}}
+        @imageClass={{@imageClass}}
+        @imageWrapperClass={{@imageWrapperClass}}
+        @contentWrapperClass={{@contentWrapperClass}}
+        @titleClass={{@titleClass}}
+        @subtitleClass={{@subtitleClass}}
+        ...attributes
+    />
+{{/let}}

package/addon/components/driver/pill.js

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

package/addon/components/map/drawer/device-event-listing.hbs

@@ -52,6 +52,12 @@
                 class="w-full form-input form-input-sm w-48"
             />
         </div>
+
+        {{#if this.loadEvents.isRunning}}
+            <div>
+                <Spinner />
+            </div>
+        {{/if}}
     </div>
 </div>
 <Table @rows={{this.events}} @columns={{this.columns}} />

package/addon/components/map/drawer/position-listing.hbs

@@ -10,20 +10,24 @@
                     @triggerClass="form-select form-input form-input-sm w-48"
                     as |option|
                 >
-                    <div class="flex flex-row items-center space-x-2">
+                    <div class="flex flex-row items-start space-x-2">
                         <div class="inline-block">
-                            <Image src={{or option.avatar_url option.photo_url}} class="w-4 h-4" />
+                            {{#if (eq (get-model-name option) "driver")}}
+                                <Image src={{option.photo_url}} @fallbackSrc={{config "defaultValues.driverAvatar"}} class="w-4 h-4" />
+                            {{else}}
+                                <Image src={{option.avatar_url}} @fallbackSrc={{config "defaultValues.vehicleAvatar"}} class="w-4 h-4" />
+                            {{/if}}
                         </div>
-                        <div class="inline-block text-sm">
-                            <div class="font-semibold normalize-in-trigger">{{or option.name option.displayName option.public_id}}</div>
-                            <div class="hide-from-trigger">{{or option.email option.serial_number option.plate_number option.internal_id}}</div>
+                        <div class="inline-block text-sm truncate">
+                            <div class="font-semibold text-sm normalize-in-trigger">{{or option.name option.displayName option.public_id}}</div>
+                            <div class="hide-from-trigger text-xs">{{or option.email option.serial_number option.plate_number option.internal_id}}</div>
                         </div>
                     </div>
                 </PowerSelect>
             </div>
         </div>
 
-        <div class="w-48">
+        <div class="w-48 {{if this.isReplaying 'hidden' ''}}">
             <DatePicker
                 @value={{this.dateFilter}}
                 @range={{true}}
@@ -33,23 +37,35 @@
                 class="w-full form-input form-input-sm"
             />
         </div>
+
+        {{#if this.loadPositions.isRunning}}
+            <div>
+                <Spinner />
+            </div>
+        {{/if}}
     </div>
 
     <div class="replay-controls">
         <div class="flex items-center justify-between space-x-2">
             <div class="flex items-center space-x-2">
-                <Button @type="danger" @text="Stop" @icon="stop" @size="xs" @onClick={{this.stopReplay}} />
-                <Button
-                    @type="success"
-                    @text="Play"
-                    @icon="play"
-                    @size="xs"
-                    @isLoading={{this.isReplaying}}
-                    @disabled={{or this.replayPositions.isRunning (not this.hasPositions)}}
-                    @onClick={{this.startReplay}}
-                />
+                <Button @type="danger" @text="Stop" @icon="stop" @size="xs" @disabled={{not (or this.isReplaying this.isPaused)}} @onClick={{this.stopReplay}} />
+
+                {{#if (or this.isReplaying this.isPaused)}}
+                    {{#if this.isReplaying}}
+                        <Button @type="warning" @text="Pause" @icon="pause" @size="xs" @onClick={{this.pauseReplay}} />
+                    {{else}}
+                        <Button @type="success" @text="Resume" @icon="play" @size="xs" @onClick={{this.startReplay}} />
+                    {{/if}}
+                {{else}}
+                    <Button @type="success" @text="Play" @icon="play" @size="xs" @disabled={{not this.hasPositions}} @onClick={{this.startReplay}} />
+                {{/if}}
+
+                <div class="step-controls flex items-center space-x-1 border-l border-gray-300 dark:border-gray-700 pl-2 ml-2">
+                    <Button @type="default" @icon="backward-step" @size="xs" @disabled={{not this.hasPositions}} @onClick={{this.stepBackward}} title="Step backward" />
+                    <Button @type="default" @icon="forward-step" @size="xs" @disabled={{not this.hasPositions}} @onClick={{this.stepForward}} title="Step forward" />
+                </div>
 
-                <div class="speed-control">
+                <div class="speed-control border-l border-gray-300 dark:border-gray-700 pl-2 ml-2">
                     <label class="text-xs uppercase tracking-wide font-medium text-gray-700 dark:text-gray-400 mr-1">
                         Speed:
                     </label>
@@ -64,7 +80,7 @@
                 </div>
             </div>
 
-            {{#if this.isReplaying}}
+            {{#if (or this.isReplaying this.isPaused)}}
                 <div class="replay-progress flex items-center space-x-1">
                     <span class="text-sm text-gray-600 dark:text-gray-400">
                         {{this.currentReplayIndex}}/{{this.totalPositions}}
@@ -81,4 +97,4 @@
     </div>
 </div>
 <Table @rows={{this.positions}} @columns={{this.columns}} />
-<Spacer @height="200px" />
+<Spacer @height="400px" />