@fleetbase/fleetops-engine 0.6.19 → 0.6.21

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/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,58 @@
+<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>
+    </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);
+        }
+    }
+}

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

@@ -0,0 +1,84 @@
+<div class="positions-replay-component 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>
+            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                <PowerSelect
+                    @options={{this.trackables}}
+                    @selected={{this.resource}}
+                    @onChange={{this.onResourceSelected}}
+                    @placeholder={{t "common.select-field" field="trackable"}}
+                    @triggerClass="form-select form-input form-input-sm w-48"
+                    as |option|
+                >
+                    <div class="flex flex-row items-center space-x-2">
+                        <div class="inline-block">
+                            <Image src={{or option.avatar_url option.photo_url}} class="w-4 h-4" />
+                        </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>
+                    </div>
+                </PowerSelect>
+            </div>
+        </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"
+            />
+        </div>
+    </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}}
+                />
+
+                <div class="speed-control">
+                    <label class="text-xs uppercase tracking-wide font-medium text-gray-700 dark:text-gray-400 mr-1">
+                        Speed:
+                    </label>
+                    <Select
+                        @value={{this.replaySpeed}}
+                        @options={{this.speedOptions}}
+                        @optionValue="value"
+                        @optionLabel="label"
+                        @onSelect={{this.onSpeedChanged}}
+                        class="form-select speed-select"
+                    />
+                </div>
+            </div>
+
+            {{#if this.isReplaying}}
+                <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}}
+                    </span>
+                    <div class="progress-bar w-32 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                        <div class="progress-fill h-full bg-blue-600 transition-all duration-300" style={{this.replayProgressWidth}}></div>
+                    </div>
+                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                        {{this.replayProgress}}%
+                    </span>
+                </div>
+            {{/if}}
+        </div>
+    </div>
+</div>
+<Table @rows={{this.positions}} @columns={{this.columns}} />
+<Spacer @height="200px" />