@fleetbase/fleetops-engine 0.6.64 → 0.6.66

package/addon/components/trailer/details/schedules.js

@@ -0,0 +1,40 @@
+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';
+
+export default class TrailerDetailsSchedulesComponent extends Component {
+    @service maintenanceScheduleActions;
+    @service notifications;
+    @service store;
+    @service trailerActions;
+    @tracked schedules = [];
+
+    get trailer() {
+        return this.args.resource;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadSchedules.perform();
+    }
+
+    @task *loadSchedules() {
+        try {
+            const schedules = yield this.store.query('maintenance-schedule', {
+                subject_uuid: this.trailer.id,
+                subject_type: 'fleet-ops:trailer',
+                sort: '-created_at',
+            });
+
+            this.schedules = Array.from(schedules ?? []);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action createSchedule() {
+        return this.trailerActions.scheduleMaintenance(this.trailer, {}, { refresh: false, callback: () => this.loadSchedules.perform() });
+    }
+}

package/addon/components/trailer/details/work-orders.hbs

@@ -0,0 +1,47 @@
+<div class="trailer-details-work-orders p-4">
+    <div class="flex flex-row items-center justify-end mb-3">
+        <Button @icon="plus" @text={{t "trailer.actions.create-work-order"}} @size="xs" @type="primary" @onClick={{this.createWorkOrder}} @permission="fleet-ops create work-order" />
+    </div>
+
+    {{#if this.loadWorkOrders.isRunning}}
+        <div class="flex items-center justify-center py-10">
+            <Spinner />
+        </div>
+    {{else if this.workOrders.length}}
+        <div class="overflow-x-auto">
+            <table class="min-w-full text-xs">
+                <thead>
+                    <tr class="border-b border-gray-200 dark:border-gray-700">
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.code"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.subject"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.priority"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "common.status"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.due"}}</th>
+                        <th class="py-2"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{#each this.workOrders as |workOrder|}}
+                        <tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <td class="py-2 pr-4 font-mono uppercase">{{workOrder.code}}</td>
+                            <td class="py-2 pr-4 font-medium">{{workOrder.subject}}</td>
+                            <td class="py-2 pr-4 text-gray-500">{{n-a (smart-humanize workOrder.priority)}}</td>
+                            <td class="py-2 pr-4"><Badge @status={{workOrder.status}} /></td>
+                            <td class="py-2 pr-4 text-gray-500">{{n-a (format-date-fns workOrder.due_at "dd MMM yyyy")}}</td>
+                            <td class="py-2 text-right">
+                                <Button @icon="eye" @size="xs" @helpText={{t "common.view"}} @onClick={{fn this.workOrderActions.transition.view workOrder}} />
+                            </td>
+                        </tr>
+                    {{/each}}
+                </tbody>
+            </table>
+        </div>
+    {{else}}
+        <div class="flex flex-col items-center justify-center py-10 text-gray-400 dark:text-gray-600">
+            <FaIcon @icon="clipboard-list" @size="2x" class="mb-3" />
+            <p class="text-sm font-semibold text-gray-600 dark:text-gray-300">{{t "trailer.empty.work-orders"}}</p>
+            <p class="text-xs">{{t "trailer.empty.work-orders-description"}}</p>
+            <Button @text={{t "trailer.actions.create-work-order"}} @icon="plus" @size="xs" @type="primary" class="mt-3" @onClick={{this.createWorkOrder}} @permission="fleet-ops create work-order" />
+        </div>
+    {{/if}}
+</div>

package/addon/components/trailer/details/work-orders.js

@@ -0,0 +1,40 @@
+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';
+
+export default class TrailerDetailsWorkOrdersComponent extends Component {
+    @service workOrderActions;
+    @service notifications;
+    @service store;
+    @service trailerActions;
+    @tracked workOrders = [];
+
+    get trailer() {
+        return this.args.resource;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadWorkOrders.perform();
+    }
+
+    @task *loadWorkOrders() {
+        try {
+            const workOrders = yield this.store.query('work-order', {
+                target_uuid: this.trailer.id,
+                target_type: 'trailer',
+                sort: '-created_at',
+            });
+
+            this.workOrders = Array.from(workOrders ?? []);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action createWorkOrder() {
+        return this.trailerActions.createWorkOrder(this.trailer, {}, { refresh: false, callback: () => this.loadWorkOrders.perform() });
+    }
+}

package/addon/components/trailer/details.hbs

@@ -0,0 +1,405 @@
+<div class="details-wrapper trailer-details" ...attributes>
+    {{! CORE DETAILS }}
+    <ContentPanel @title={{t "trailer.sections.details"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                {{t "trailer.sections.identification"}}
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.name"}}</div>
+                <div class="field-value">{{n-a @resource.name}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.id"}}</div>
+                <div class="field-value"><ClickToCopy @value={{@resource.public_id}}>{{n-a @resource.public_id}}</ClickToCopy></div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.code"}}</div>
+                <div class="field-value">{{n-a @resource.code}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.type"}}</div>
+                <div class="field-value">{{n-a this.typeLabel}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.status"}}</div>
+                <div class="field-value"><Badge @status={{@resource.status}} @text={{this.statusLabel}} /></div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.body-type"}}</div>
+                <div class="field-value">{{n-a @resource.body_type}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.color"}}</div>
+                <div class="field-value">{{n-a @resource.color}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.category"}}</div>
+                <div class="field-value">
+                    <Category::Pill @category={{resource-relation @resource "category"}} @titleFallback={{n-a @resource.category_name}} />
+                </div>
+            </div>
+
+            <div class="field-info-container col-span-2">
+                <div class="field-name">{{t "trailer.fields.description"}}</div>
+                <div class="field-value">{{n-a @resource.description}}</div>
+            </div>
+
+            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                {{t "trailer.sections.registration"}}
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.vin"}}</div>
+                <div class="field-value">{{n-a @resource.vin}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.plate-number"}}</div>
+                <div class="field-value">{{n-a @resource.plate_number}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.serial-number"}}</div>
+                <div class="field-value">{{n-a @resource.serial_number}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.make"}}</div>
+                <div class="field-value">{{n-a @resource.make}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.model"}}</div>
+                <div class="field-value">{{n-a @resource.model}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.year"}}</div>
+                <div class="field-value">{{n-a @resource.year}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    {{! TOWING CONNECTION }}
+    <ContentPanel @title={{t "trailer.sections.connection"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.attachment-state"}}</div>
+                <div class="field-value">
+                    <Badge @status={{if this.isAttached "attached" "detached"}} @text={{this.attachmentLabel}} @icon={{if this.isAttached "link" "link-slash"}} />
+                </div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.vehicle"}}</div>
+                <div class="field-value">
+                    {{#if this.isAttached}}
+                        <Vehicle::Pill @vehicle={{resource-relation @resource "current_vehicle"}} @titleFallback={{n-a this.currentVehicleName}} @onClick={{this.viewVehicle}} />
+                    {{else}}
+                        <span class="text-gray-400 dark:text-gray-500">{{t "trailer.attachment.no-vehicle"}}</span>
+                    {{/if}}
+                </div>
+            </div>
+
+            {{#if this.isAttached}}
+                <div class="field-info-container">
+                    <div class="field-name">{{t "trailer.fields.attached-at"}}</div>
+                    <div class="field-value">{{n-a (format-date-fns @resource.attached_at "dd MMM yyyy, HH:mm")}}</div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">{{t "trailer.fields.position"}}</div>
+                    <div class="field-value">{{n-a @resource.current_connection.position}}</div>
+                </div>
+            {{/if}}
+
+            <div class="col-span-2 flex flex-row items-center space-x-2 mt-1">
+                {{#if this.isAttached}}
+                    <Button @icon="unlink" @text={{t "trailer.actions.detach-vehicle"}} @size="xs" @type="danger" @onClick={{this.detachVehicle}} @permission="fleet-ops detach-vehicle-for trailer" />
+                {{else}}
+                    <Button @icon="link" @text={{t "trailer.actions.attach-vehicle"}} @size="xs" @type="primary" @onClick={{this.attachVehicle}} @permission="fleet-ops attach-vehicle-for trailer" />
+                {{/if}}
+            </div>
+        </div>
+    </ContentPanel>
+
+    {{! LOCATION & TELEMATICS }}
+    <ContentPanel @title={{t "trailer.sections.telemetry"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.connectivity"}}</div>
+                <div class="field-value"><Badge @status={{@resource.connectivity_status}} @text={{this.connectivityLabel}} /></div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.last-online"}}</div>
+                <div class="field-value">
+                    {{#if @resource.last_online_at}}
+                        {{format-date-fns @resource.last_online_at "dd MMM yyyy, HH:mm"}}
+                        <span class="text-gray-400 dark:text-gray-500">({{@resource.lastOnlineAgo}})</span>
+                    {{else}}
+                        {{t "trailer.connectivity.never_connected"}}
+                    {{/if}}
+                </div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.coordinates"}}</div>
+                <div class="field-value">
+                    {{#if this.hasValidCoordinates}}
+                        {{point-coordinates @resource.location}}
+                        <Button @icon="location-dot" @size="xs" @helpText={{t "trailer.actions.locate"}} @onClick={{this.locate}} class="ml-2" />
+                    {{else}}
+                        {{t "trailer.telemetry.no-location"}}
+                    {{/if}}
+                </div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.speed"}}</div>
+                <div class="field-value">{{n-a @resource.speed}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.heading"}}</div>
+                <div class="field-value">{{n-a @resource.heading}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.altitude"}}</div>
+                <div class="field-value">{{n-a @resource.altitude}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.devices-count"}}</div>
+                <div class="field-value">{{or @resource.devices_count 0}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.equipment-count"}}</div>
+                <div class="field-value">{{or @resource.equipment_count 0}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.last-provider"}}</div>
+                <div class="field-value">{{n-a this.lastProvider}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.last-event-at"}}</div>
+                <div class="field-value">{{n-a (format-date-fns this.lastEventAt "dd MMM yyyy, HH:mm")}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    {{! DIMENSIONS & CAPACITY }}
+    <ContentPanel @title={{t "trailer.sections.dimensions"}} @open={{false}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.measurement-system"}}</div>
+                <div class="field-value">{{n-a this.measurementLabel}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.odometer" unit=(or @resource.odometer_unit "")}}</div>
+                <div class="field-value">{{n-a @resource.odometer}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.length" unit=this.units.length}}</div>
+                <div class="field-value">{{n-a @resource.length}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.width" unit=this.units.length}}</div>
+                <div class="field-value">{{n-a @resource.width}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.height" unit=this.units.length}}</div>
+                <div class="field-value">{{n-a @resource.height}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.cargo-volume" unit=this.units.volume}}</div>
+                <div class="field-value">{{n-a @resource.cargo_volume}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.tare-weight" unit=this.units.weight}}</div>
+                <div class="field-value">{{n-a @resource.tare_weight}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.gvwr" unit=this.units.weight}}</div>
+                <div class="field-value">{{n-a @resource.gvwr}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.payload-capacity" unit=this.units.weight}}</div>
+                <div class="field-value">{{n-a @resource.payload_capacity}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    {{! RUNNING GEAR }}
+    <ContentPanel @title={{t "trailer.sections.running-gear"}} @open={{false}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.axle-count"}}</div>
+                <div class="field-value">{{n-a @resource.axle_count}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.tire-count"}}</div>
+                <div class="field-value">{{n-a @resource.tire_count}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.door-count"}}</div>
+                <div class="field-value">{{n-a @resource.door_count}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.coupling-type"}}</div>
+                <div class="field-value">{{n-a this.couplingLabel}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.brake-type"}}</div>
+                <div class="field-value">{{n-a this.brakeLabel}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.abs"}}</div>
+                <div class="field-value">{{if @resource.abs_equipped (t "common.yes") (t "common.no")}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.ebs"}}</div>
+                <div class="field-value">{{if @resource.ebs_equipped (t "common.yes") (t "common.no")}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    {{! REFRIGERATION }}
+    {{#if this.showRefrigeration}}
+        <ContentPanel @title={{t "trailer.sections.refrigeration"}} @open={{false}} @wrapperClass="bordered-top">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+                <div class="field-info-container">
+                    <div class="field-name">{{t "trailer.fields.refrigerated"}}</div>
+                    <div class="field-value">{{if @resource.refrigerated (t "common.yes") (t "common.no")}}</div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">{{t "trailer.fields.reefer-hours"}}</div>
+                    <div class="field-value">{{n-a @resource.reefer_engine_hours}}</div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">{{t "trailer.fields.temperature-min" unit=this.units.temperature}}</div>
+                    <div class="field-value">{{n-a @resource.temperature_min}}</div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">{{t "trailer.fields.temperature-max" unit=this.units.temperature}}</div>
+                    <div class="field-value">{{n-a @resource.temperature_max}}</div>
+                </div>
+            </div>
+        </ContentPanel>
+    {{/if}}
+
+    {{! OWNERSHIP & FINANCE }}
+    <ContentPanel @title={{t "trailer.sections.ownership"}} @open={{false}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.ownership-type"}}</div>
+                <div class="field-value">{{n-a this.ownershipLabel}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.financing-status"}}</div>
+                <div class="field-value">{{n-a @resource.financing_status}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.vendor"}}</div>
+                <div class="field-value">
+                    <Vendor::Pill @vendor={{resource-relation @resource "vendor"}} @titleFallback={{n-a @resource.vendor_name}} />
+                </div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.warranty"}}</div>
+                <div class="field-value">
+                    <Warranty::Pill @warranty={{resource-relation @resource "warranty"}} @titleFallback={{n-a @resource.warranty_name}} />
+                </div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.purchased-at"}}</div>
+                <div class="field-value">{{n-a (format-date-fns @resource.purchased_at "dd MMM yyyy")}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.lease-expires-at"}}</div>
+                <div class="field-value">{{n-a (format-date-fns @resource.lease_expires_at "dd MMM yyyy")}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.acquisition-cost"}}</div>
+                <div class="field-value">{{#if @resource.acquisition_cost}}{{format-currency @resource.acquisition_cost @resource.currency}}{{else}}-{{/if}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.current-value"}}</div>
+                <div class="field-value">{{#if @resource.current_value}}{{format-currency @resource.current_value @resource.currency}}{{else}}-{{/if}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.insurance-value"}}</div>
+                <div class="field-value">{{#if @resource.insurance_value}}{{format-currency @resource.insurance_value @resource.currency}}{{else}}-{{/if}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.depreciation-rate"}}</div>
+                <div class="field-value">{{#if @resource.depreciation_rate}}{{@resource.depreciation_rate}}%{{else}}-{{/if}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    {{! NOTES & TIMESTAMPS }}
+    <ContentPanel @title={{t "trailer.sections.notes"}} @open={{false}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="field-info-container col-span-2">
+                <div class="field-name">{{t "trailer.fields.notes"}}</div>
+                <div class="field-value whitespace-pre-line">{{n-a @resource.notes}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.created-at"}}</div>
+                <div class="field-value">{{n-a (format-date-fns @resource.created_at "dd MMM yyyy, HH:mm")}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "trailer.fields.updated-at"}}</div>
+                <div class="field-value">{{n-a (format-date-fns @resource.updated_at "dd MMM yyyy, HH:mm")}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+
+    <RegistryYield @registry="fleet-ops:component:trailer:details" as |RegistryComponent|>
+        <RegistryComponent @resource={{@resource}} />
+    </RegistryYield>
+</div>

package/addon/components/trailer/details.js

@@ -0,0 +1,122 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class TrailerDetailsComponent extends Component {
+    @service trailerActions;
+    @service vehicleActions;
+    @service intl;
+
+    get trailer() {
+        return this.args.resource;
+    }
+
+    get hasValidCoordinates() {
+        return Boolean(this.trailer?.location && this.trailer.hasValidCoordinates);
+    }
+
+    get isAttached() {
+        return this.trailer?.isAttached ?? this.trailer?.attachment_state === 'attached';
+    }
+
+    get currentVehicle() {
+        return this.trailer?.current_vehicle;
+    }
+
+    get currentVehicleName() {
+        return this.trailer?.current_vehicle_name ?? this.currentVehicle?.displayName ?? this.currentVehicle?.display_name ?? this.currentVehicle?.name;
+    }
+
+    get typeLabel() {
+        const type = this.trailer?.type;
+
+        return type ? this.intl.t(`trailer.types.${type}`, { default: type }) : null;
+    }
+
+    get statusLabel() {
+        const status = this.trailer?.status;
+
+        return status ? this.intl.t(`trailer.statuses.${status}`, { default: status }) : null;
+    }
+
+    get attachmentLabel() {
+        return this.intl.t(`trailer.attachment.${this.isAttached ? 'attached' : 'detached'}`);
+    }
+
+    get connectivityLabel() {
+        const status = this.trailer?.connectivity_status ?? 'never_connected';
+
+        return this.intl.t(`trailer.connectivity.${status}`, { default: status });
+    }
+
+    get ownershipLabel() {
+        const value = this.trailer?.ownership_type;
+
+        return value ? this.intl.t(`trailer.ownership-types.${value}`, { default: value }) : null;
+    }
+
+    get couplingLabel() {
+        const value = this.trailer?.coupling_type;
+
+        return value ? this.intl.t(`trailer.coupling-types.${value}`, { default: value }) : null;
+    }
+
+    get brakeLabel() {
+        const value = this.trailer?.brake_type;
+
+        return value ? this.intl.t(`trailer.brake-types.${value}`, { default: value }) : null;
+    }
+
+    get measurementLabel() {
+        const value = this.trailer?.measurement_system;
+
+        return value ? this.intl.t(`trailer.measurement.${value}`, { default: value }) : null;
+    }
+
+    get units() {
+        const system = this.trailer?.measurement_system === 'imperial' ? 'imperial' : 'metric';
+
+        return {
+            length: this.intl.t(`trailer.units.length-${system}`),
+            weight: this.intl.t(`trailer.units.weight-${system}`),
+            volume: this.intl.t(`trailer.units.volume-${system}`),
+            temperature: this.intl.t(`trailer.units.temperature-${system}`),
+        };
+    }
+
+    get showRefrigeration() {
+        return Boolean(this.trailer?.refrigerated) || this.trailer?.type === 'reefer';
+    }
+
+    get lastProvider() {
+        return this.trailer?.telematics?.last_provider ?? null;
+    }
+
+    get lastEventAt() {
+        return this.trailer?.telematics?.last_event_at ?? null;
+    }
+
+    @action viewVehicle() {
+        if (!this.currentVehicle) {
+            return;
+        }
+
+        if (this.vehicleActions.panel?.view) {
+            return this.vehicleActions.panel.view(this.currentVehicle);
+        }
+
+        return this.vehicleActions.transition.view(this.currentVehicle);
+    }
+
+    @action attachVehicle() {
+        return this.trailerActions.attachVehicle(this.trailer);
+    }
+
+    @action detachVehicle() {
+        return this.trailerActions.detachVehicle(this.trailer);
+    }
+
+    @action locate() {
+        return this.trailerActions.locate(this.trailer);
+    }
+}