@fleetbase/fleetops-engine 0.6.20 → 0.6.22

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/panel-header.hbs

@@ -0,0 +1,32 @@
+<div class="px-4 py-2">
+    <div class="flex flex-1 flex-row items-start justify-between">
+        <div class="flex flex-row space-x-3">
+            <div class="flex items-start justify-start rounded-full">
+                <Image src={{@resource.photo_url}} @fallbackSrc={{config "defaultValues.placeholderImage"}} alt={{@resource.displayName}} height="48" width="48" class="h-14 w-14 rounded-full shadow-sm" />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                    <InputInfo @text={{@resource.displayName}} />
+                </Attach::Tooltip>
+            </div>
+            <div class="flex flex-col">
+                <h1 class="text-gray-900 dark:text-white font-semibold text-lg">{{@resource.displayName}}</h1>
+                <div>
+                    <div class="text-xs text-gray-400 dark:text-gray-500">{{concat (n-a (titleize @resource.provider)) " " (n-a (get-fleet-ops-option-label "deviceTypes" @resource.type))}}</div>
+                    <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.serial_number}}</div>
+                </div>
+                <Badge @status={{if @resource.online "online" "offline"}}>{{if @resource.online (t "common.online") (t "common.offline")}}</Badge>
+            </div>
+        </div>
+        <div class="next-view-header-right">
+            <Layout::Resource::Panel::HeaderActions
+                @resource={{@resource}}
+                @saveTask={{@saveTask}}
+                @saveOptions={{@saveOptions}}
+                @saveDisabled={{@saveDisabled}}
+                @pojoResource={{@pojoResource}}
+                @authSchema={{@authSchema}}
+                @actionButtons={{@actionButtons}}
+                @onPressCancel={{@onPressCancel}}
+            />
+        </div>
+    </div>
+</div>

package/addon/components/device/panel-header.js

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

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,9 +51,16 @@
     <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 "driver.fields.upload-new-photo"}} />
+                    <InputInfo @text={{t "common.upload-new-photo"}} />
                 </Attach::Tooltip>
             </div>
             <div>
@@ -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/form.js

@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
 
@@ -9,55 +8,58 @@ export default class DriverFormComponent extends Component {
     @service currentUser;
     @service notifications;
     @service modalsManager;
-    @tracked userAccountActionButtons = [
-        {
-            icon: 'user-plus',
-            size: 'xs',
-            permission: 'iam create user',
-            onClick: () => {
-                const user = this.store.createRecord('user', {
-                    status: 'pending',
-                    type: 'user',
-                });
 
-                this.modalsManager.show('modals/user-form', {
-                    title: 'Create a new user',
-                    user,
-                    formPermission: 'iam create user',
-                    uploadNewPhoto: (file) => {
-                        this.fetch.uploadFile.perform(
-                            file,
-                            {
-                                path: `uploads/${this.currentUser.companyId}/users/${user.slug}`,
-                                subject_uui: user.id,
-                                subject_type: 'user',
-                                type: 'user_photo',
-                            },
-                            (uploadedFile) => {
-                                user.setProperties({
-                                    avatar_uuid: uploadedFile.id,
-                                    avatar_url: uploadedFile.url,
-                                    avatar: uploadedFile,
-                                });
-                            }
-                        );
-                    },
-                    confirm: async (modal) => {
-                        modal.startLoading();
+    get userAccountActionButtons() {
+        return [
+            {
+                icon: 'user-plus',
+                size: 'xs',
+                permission: 'iam create user',
+                onClick: () => {
+                    const user = this.store.createRecord('user', {
+                        status: 'pending',
+                        type: 'user',
+                    });
 
-                        try {
-                            await user.save();
-                            this.notifications.success('New user created successfully!');
-                            modal.done();
-                        } catch (error) {
-                            this.notifications.serverError(error);
-                            modal.stopLoading();
-                        }
-                    },
-                });
+                    this.modalsManager.show('modals/user-form', {
+                        title: 'Create a new user',
+                        user,
+                        formPermission: 'iam create user',
+                        uploadNewPhoto: (file) => {
+                            this.fetch.uploadFile.perform(
+                                file,
+                                {
+                                    path: `uploads/${this.currentUser.companyId}/users/${user.slug}`,
+                                    subject_uui: user.id,
+                                    subject_type: 'user',
+                                    type: 'user_photo',
+                                },
+                                (uploadedFile) => {
+                                    user.setProperties({
+                                        avatar_uuid: uploadedFile.id,
+                                        avatar_url: uploadedFile.url,
+                                        avatar: uploadedFile,
+                                    });
+                                }
+                            );
+                        },
+                        confirm: async (modal) => {
+                            modal.startLoading();
+
+                            try {
+                                await user.save();
+                                this.notifications.success('New user created successfully!');
+                                modal.done();
+                            } catch (error) {
+                                this.notifications.serverError(error);
+                                modal.stopLoading();
+                            }
+                        },
+                    });
+                },
             },
-        },
-    ];
+        ];
+    }
 
     @task *handlePhotoUpload(file) {
         try {

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/entity/form.hbs

@@ -25,11 +25,7 @@
                 <InputGroup @name={{t "common.internal-id"}} @value={{@resource.internal_id}} @helpText={{t "modals.entity-form.id-text"}} />
                 <InputGroup @name={{t "modals.entity-form.sku"}} @value={{@resource.sku}} @helpText={{t "modals.entity-form.sku-text"}} />
                 <div></div>
-                <InputGroup
-                    @name={{t "modals.entity-form.description"}}
-                    @helpText={{t "modals.entity-form.description-text"}}
-                    @wrapperClass="col-span-2"
-                >
+                <InputGroup @name={{t "modals.entity-form.description"}} @helpText={{t "modals.entity-form.description-text"}} @wrapperClass="col-span-2">
                     <Textarea @value={{@resource.description}} type="text" class="w-full form-input" placeholder={{t "modals.entity-form.description"}} />
                 </InputGroup>
             </div>
@@ -83,4 +79,10 @@
             </div>
         </div>
     </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
+
+    <RegistryYield @registry="fleet-ops:component:entity:form" as |RegistryComponent|>
+        <RegistryComponent @resource={{@resource}} @controller={{this.controller}} @permission={{get-write-permission @resource}} />
+    </RegistryYield>
 </div>

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

@@ -171,14 +171,14 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 permission: 'fleet-ops list device-event',
                 visible: this.abilities.can('fleet-ops see device-event'),
             },
-            {
-                intl: 'menu.tracking',
-                title: this.intl.t('menu.tracking'),
-                icon: 'map-marked-alt',
-                route: 'connectivity.tracking',
-                permission: 'fleet-ops list device',
-                visible: this.abilities.can('fleet-ops see device'),
-            },
+            // {
+            //     intl: 'menu.tracking',
+            //     title: this.intl.t('menu.tracking'),
+            //     icon: 'map-marked-alt',
+            //     route: 'connectivity.tracking',
+            //     permission: 'fleet-ops list device',
+            //     visible: this.abilities.can('fleet-ops see device'),
+            // },
         ];
 
         const maintenanceItems = [
@@ -284,10 +284,10 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             //     open: this.appCache.get('fleet-ops:sidebar:maintenance:open', false),
             //     onToggle: (open) => this.appCache.set('fleet-ops:sidebar:maintenance:open', open),
             // }),
-            // createPanel('menu.connectivity', 'connectivity', connectivityItems, {
-            //     open: this.appCache.get('fleet-ops:sidebar:connectivity:open', false),
-            //     onToggle: (open) => this.appCache.set('fleet-ops:sidebar:connectivity:open', open),
-            // }),
+            createPanel('menu.connectivity', 'connectivity', connectivityItems, {
+                open: this.appCache.get('fleet-ops:sidebar:connectivity:open', false),
+                onToggle: (open) => this.appCache.set('fleet-ops:sidebar:connectivity:open', open),
+            }),
             createPanel('menu.analytics', 'analytics', analyticsItems, {
                 open: this.appCache.get('fleet-ops:sidebar:analytics:open', false),
                 onToggle: (open) => this.appCache.set('fleet-ops:sidebar:analytics:open', open),

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

@@ -0,0 +1,64 @@
+<div class="flex flex-row items-center justify-between w-full px-5 py-2 border-b border-gray-200 dark:border-gray-700">
+    <div class="flex flex-row items-center space-x-2">
+        <div>
+            <ModelSelect
+                @modelName="telematic"
+                @selectedModel={{this.telematic}}
+                @placeholder="Filter by Telematic"
+                @triggerClass="form-select form-input form-input-sm w-48"
+                @infiniteScroll={{false}}
+                @renderInPlace={{true}}
+                @onChange={{this.onTelematicSelected}}
+                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>
+        </div>
+
+        <div>
+            <ModelSelect
+                @modelName="device"
+                @selectedModel={{this.device}}
+                @placeholder="Filter by Device"
+                @triggerClass="form-select form-input form-input-sm w-48"
+                @infiniteScroll={{false}}
+                @renderInPlace={{true}}
+                @onChange={{this.onDeviceSelected}}
+                as |model|
+            >
+                <div class="text-sm">
+                    <div class="font-semibold normalize-in-trigger">{{model.name}}</div>
+                    <div class="hide-from-trigger">{{n-a model.serial_number}}</div>
+                </div>
+            </ModelSelect>
+        </div>
+
+        <div class="w-48">
+            <DatePicker
+                @value={{this.dateFilter}}
+                @range={{true}}
+                @onSelect={{this.onDateRangeChanged}}
+                @autoClose={{true}}
+                @placeholder="Select date range"
+                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}} />
+<Spacer @height="200px" />

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

@@ -0,0 +1,181 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+import { isArray } from '@ember/array';
+import { startOfWeek, endOfWeek, format } from 'date-fns';
+
+export default class MapDrawerDeviceEventListingComponent extends Component {
+    @service store;
+    @service hostRouter;
+    @service notifications;
+    @service deviceEventActions;
+    @service deviceActions;
+    @service intl;
+
+    @tracked events = [];
+    @tracked telematic = null;
+    @tracked device = null;
+    @tracked dateFilter = [format(startOfWeek(new Date(), { weekStartsOn: 1 }), 'yyyy-MM-dd'), format(endOfWeek(new Date(), { weekStartsOn: 1 }), 'yyyy-MM-dd')];
+
+    get columns() {
+        return [
+            {
+                label: 'Event',
+                valuePath: 'event_type',
+                cellComponent: 'table/cell/anchor',
+                cellClassNames: 'uppercase',
+                action: this.deviceEventActions.panel.view,
+                permission: 'fleet-ops view device-event',
+                resizable: true,
+                sortable: true,
+                filterable: true,
+                filterParam: 'name',
+                filterComponent: 'filter/string',
+            },
+            {
+                label: 'Device',
+                valuePath: 'device.displayName',
+                cellComponent: 'table/cell/anchor',
+                action: this.deviceActions.panel.view,
+                permission: 'fleet-ops view device',
+                resizable: true,
+                sortable: true,
+                filterable: true,
+                filterComponent: 'filter/model',
+                filterComponentPlaceholder: 'Select device',
+                filterParam: 'device',
+                model: 'device',
+            },
+            {
+                label: 'Provider',
+                valuePath: 'provider',
+                resizable: true,
+                sortable: true,
+                filterable: true,
+                filterParam: 'provider',
+                filterComponent: 'filter/string',
+            },
+            {
+                label: 'Severity',
+                valuePath: 'severity',
+                resizable: true,
+                sortable: true,
+                filterable: true,
+                filterParam: 'severity',
+                filterComponent: 'filter/string',
+            },
+            {
+                label: 'IDENT',
+                valuePath: 'ident',
+                hidden: true,
+                resizable: true,
+                sortable: true,
+            },
+            {
+                label: 'Protocol',
+                valuePath: 'protocol',
+                hidden: true,
+                resizable: true,
+                sortable: true,
+            },
+            {
+                label: 'State',
+                valuePath: 'state',
+                hidden: true,
+                resizable: true,
+                sortable: true,
+            },
+            {
+                label: 'Code',
+                valuePath: 'code',
+                resizable: true,
+                sortable: true,
+                filterable: true,
+                filterParam: 'code',
+                filterComponent: 'filter/string',
+            },
+            {
+                label: this.intl.t('column.created-at'),
+                valuePath: 'createdAt',
+                sortParam: 'created_at',
+                width: '10%',
+                resizable: true,
+                sortable: true,
+                filterable: true,
+                filterComponent: 'filter/date',
+            },
+            {
+                label: '',
+                cellComponent: 'table/cell/dropdown',
+                ddButtonText: false,
+                ddButtonIcon: 'ellipsis-h',
+                ddButtonIconPrefix: 'fas',
+                ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.device-event') }),
+                cellClassNames: 'overflow-visible',
+                wrapperClass: 'flex items-center justify-end mx-2',
+                width: '10%',
+                actions: [
+                    {
+                        label: this.intl.t('common.view-resource', { resource: this.intl.t('resource.device-event') }),
+                        fn: this.deviceEventActions.panel.view,
+                        permission: 'fleet-ops view device-event',
+                    },
+                ],
+                sortable: false,
+                filterable: false,
+                resizable: false,
+                searchable: false,
+            },
+        ];
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadEvents.perform();
+    }
+
+    @action onDeviceSelected(device) {
+        this.device = device;
+        this.loadEvents.perform();
+    }
+
+    @action onTelematicSelected(telematic) {
+        this.telematic = telematic;
+        this.loadEvents.perform();
+    }
+
+    @action onDateRangeChanged({ formattedDate }) {
+        if (isArray(formattedDate) && formattedDate.length === 2) {
+            this.dateFilter = formattedDate;
+            this.loadEvents.perform();
+        }
+    }
+
+    @task *loadEvents() {
+        try {
+            const params = {
+                limit: 900,
+                sort: 'created_at',
+            };
+
+            if (this.telematic) {
+                params.telematic = this.telematic.id;
+            }
+
+            if (this.device) {
+                params.device = this.device.id;
+            }
+
+            if (isArray(this.dateFilter) && this.dateFilter.length === 2) {
+                params.created_at = this.dateFilter.join(',');
+            }
+
+            const events = yield this.store.query('device-event', params);
+            this.positions = isArray(events) ? events : [];
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+}