@fleetbase/fleetops-engine 0.2.2 → 0.2.4

package/addon/components/driver-form-panel.hbs

@@ -0,0 +1,131 @@
+<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width="700">
+    <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
+        <div class="flex flex-row items-center justify-between w-full mb-4">
+            <div class="flex flex-1 space-x-2">
+                {{#if @driver.id}}
+                    <Button @type="default" @icon="id-card" @helpText="View driver details" @onClick={{this.viewDetails}} />
+                {{/if}}
+            </div>
+            <div class="flex flex-1 justify-end">
+                <div class="mr-2">
+                    <Button @icon={{if @driver.id "save" "check"}} @type="primary" @text={{if @driver.id "Save Driver" "Create Driver"}} @onClick={{this.save}} />
+                </div>
+                <Button @type="default" @icon="times" @helpText={{if @driver.id "Cancel edit driver" "Cancel new driver"}} @onClick={{@onPressCancel}} />
+            </div>
+        </div>
+        <div class="flex flex-row justify-between w-full">
+            <div class="flex flex-col flex-1 w-3/4">
+                <div class="flex flex-row">
+                    <div class="w-14 flex items-center justify-start">
+                        <Image src={{@driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{@driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
+                            <InputInfo @text={{@driver.public_id}} />
+                        </Attach::Tooltip>
+                    </div>
+                    <div class="flex flex-col pt-2">
+                        <h1 class="text-gray-900 dark:text-white text-2xl">
+                            {{#if @driver.id}}
+                                {{@driver.name}}
+                            {{else}}
+                                {{#if @driver.name}}
+                                    {{@driver.name}}
+                                {{else}}
+                                    <span>New Driver</span>
+                                {{/if}}
+                            {{/if}}
+                        </h1>
+                        <div class="-mt-1">
+                            {{#if @driver.vehicle}}
+                                <div class="flex flex-row items-center">
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{@driver.vehicle.displayName}}</span>
+                                </div>
+                            {{else}}
+                                <div class="flex flex-row items-center">
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">No vehicle assigned</span>
+                                </div>
+                            {{/if}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-end w-1/4">
+                <Badge @status={{@driver.status}} />
+            </div>
+        </div>
+    </Overlay::Header>
+
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
+        <div class="flex-1">
+            <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100 mb-4">
+                <div class="input-group">
+                    <label>
+                        Name
+                    </label>
+                    <Input @value={{@driver.name}} @type="text" class="w-full form-input" placeholder="Name" />
+                </div>
+            </div>
+
+            <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
+                <div class="input-group">
+                    <label>
+                        Internal ID
+                    </label>
+                    <Input @value={{@driver.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
+                </div>
+
+                <div class="input-group">
+                    <label>
+                        Drivers License
+                    </label>
+                    <Input @value={{@driver.drivers_license_number}} @type="text" class="w-full form-input" placeholder="Drivers License" />
+                </div>
+
+                <div class="input-group">
+                    <label>
+                        Email
+                    </label>
+                    <Input @value={{@driver.email}} @type="text" class="w-full form-input" placeholder="Email" />
+                </div>
+
+                <div class="input-group">
+                    <label>
+                        Phone
+                    </label>
+                    <PhoneInput @value={{@driver.phone}} @onInput={{fn (mut @driver.phone)}} class="form-input w-full" />
+                </div>
+
+                <div class="input-group">
+                    <label>
+                        Vendor
+                    </label>
+                    <ModelSelect @modelName="vendor" @selectedModel={{@driver.vendor}} @placeholder="Select Vendor" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @driver.vendor)}} as |model|>
+                        {{model.name}}
+                    </ModelSelect>
+                </div>
+
+                <div class="input-group">
+                    <label>
+                        Vehicle
+                    </label>
+                    <ModelSelect @modelName="vehicle" @selectedModel={{@driver.vehicle}} @placeholder="Select Vehicle" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @driver.vehicle)}} as |model|>
+                        {{model.display_name}}
+                    </ModelSelect>
+                </div>
+
+                <div class="input-group">
+                    <label>
+                        City
+                    </label>
+                    <Input @value={{@driver.city}} @type="text" class="w-full form-input" placeholder="City" />
+                </div>
+
+                <div class="input-group">
+                    <label>
+                        Country
+                    </label>
+                    <CountrySelect class="w-full form-input form-select form-datalist" @value={{@driver.country}} @onChange={{fn (mut @driver.country)}} placeholder="Country" />
+                </div>
+            </div>
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/components/driver-form-panel.js

@@ -0,0 +1,39 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class DriverFormPanelComponent extends Component {
+    @service store;
+    @service notifications;
+    @service hostRouter;
+    @service loader;
+
+    @action save() {
+        const { driver, onAfterSave } = this.args;
+
+        this.loader.showLoader('.overlay-inner-content', 'Saving driver...');
+
+        try {
+            return driver
+                .save()
+                .then((vehicle) => {
+                    this.notifications.success(`Driver (${driver.name}) saved successfully.`);
+
+                    if (typeof onAfterSave === 'function') {
+                        onAfterSave(vehicle);
+                    }
+                })
+                .catch(this.notifications.serverError)
+                .finally(() => {
+                    this.loader.removeLoader();
+                });
+        } catch (error) {
+            this.loader.removeLoader();
+        }
+    }
+
+    @action viewDetails() {
+        const { driver } = this.args;
+        return this.hostRouter.transitionTo('console.fleet-ops.management.drivers.index.details', driver.public_id);
+    }
+}

package/addon/components/driver-panel/details.hbs

@@ -0,0 +1,48 @@
+<div class="p-4">
+    <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+        <div class="grid grid-cols-2 gap-2 text-xs md:mb-6 dark:text-gray-100">
+            <div class="field-info-container ">
+                <div class="field-name">Name</div>
+                <div class="field-value">{{n-a @driver.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">ID</div>
+                <div class="field-value">{{n-a @driver.public_id}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Internal ID</div>
+                <div class="field-value">{{n-a @driver.internal_id}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Drivers License</div>
+                <div class="field-value">{{n-a @driver.drivers_license}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Email</div>
+                <div class="field-value">{{n-a @driver.email}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Phone</div>
+                <div class="field-value">{{n-a @driver.phone}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Current Job</div>
+                <div class="field-value">{{n-a @driver.current_job_id}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">City</div>
+                <div class="field-value">{{n-a @driver.city}}</div>
+            </div>
+            {{!-- <div class="field-info-container">
+                <div class="field-name">Country</div>
+                <div class="field-value">
+                    <CountryName @country={{@driver.country}} />
+                </div>
+            </div> --}}
+            <div class="field-info-container md:col-span-3">
+                <div class="field-name">Coordinates</div>
+                <div class="field-value">{{point-coordinates @driver.location}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+</div>

package/addon/components/driver-panel.hbs

@@ -0,0 +1,60 @@
+<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width="700">
+     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
+        <div class="flex flex-row items-center justify-between w-full mb-4">
+            <div class="flex flex-1 space-x-2">
+                {{!-- <Button @type="default" @icon="location-arrow" @helpText="Locate driver" @onClick={{@onPressCancel}} /> --}}
+                <Button @type="default" @icon="pen" @helpText="Edit driver" @onClick={{this.editDriver}} />
+            </div>
+            <div class="flex flex-1 justify-end">
+                <Button @type="default" @icon="times" @helpText="Close driver details" @onClick={{@onPressCancel}} />
+            </div>
+        </div>
+        <div class="flex flex-row justify-between w-full">
+            <div class="flex flex-col flex-1 w-3/4">
+                <div class="flex flex-row">
+                    <div class="w-14 flex items-center justify-start">
+                        <Image src={{@driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{@driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
+                            <InputInfo @text={{@driver.public_id}} />
+                        </Attach::Tooltip>
+                    </div>
+                    <div class="flex flex-col">
+                        <h1 class="text-gray-900 dark:text-white text-2xl">{{@driver.name}}</h1>
+                        <div class="-mt-1">
+                            {{#if @driver.vehicle}}
+                                <div class="flex flex-row items-center">
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{@driver.vehicle.displayName}}</span>
+                                </div>
+                            {{else}}
+                                <div class="flex flex-row items-center">
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">No vehicle assigned</span>
+                                    {{!-- <Button @icon="plus" @size="xs" @helpText="Assign a vehicle to driver" /> --}}
+                                </div>
+                            {{/if}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-end w-1/4">
+                <Badge @status={{@driver.status}} />
+            </div>
+        </div>
+    </Overlay::Header>
+    <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
+        <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
+            <div class="ui-tabs mt-4">
+                <nav>
+                    {{#each this.tabs as |tab|}}
+                        <a href="javascript:;" class="ui-tab {{if (eq this.currentTab tab.slug) 'active' }}" {{on "click" (fn this.changeTab tab.slug)}}>
+                            <FaIcon @icon={{tab.icon}} class="mr-1" />
+                            <span>{{tab.title}}</span>
+                        </a>
+                    {{/each}}
+                </nav>
+            </div>
+        </div>
+        <div class="tab-content tab-{{this.currentTab}}">
+            {{component this.tab.component driver=@driver tabOptions=this.tab params=this.tab.componentParams}}
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/components/driver-panel.js

@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action, computed } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import DriverPanelDetailComponent from './driver-panel/details';
+
+export default class DriverPanelComponent extends Component {
+    @service fetch;
+    @service modalsManager;
+    @service universe;
+    @service store;
+    @service hostRouter;
+    @tracked currentTab;
+    @tracked devices = [];
+    @tracked deviceApi = {};
+    @tracked vehicle;
+
+    get tabs() {
+        const registeredTabs = this.universe.getMenuItemsFromRegistry('component:driver-panel');
+        // this.universe._createMenuItem('Tracking', null, { icon: 'satellite-dish', component: DriverPanelTrackingComponent }),
+        const defaultTabs = [this.universe._createMenuItem('Details', null, { icon: 'circle-info', component: DriverPanelDetailComponent })];
+
+        if (isArray(registeredTabs)) {
+            return [...defaultTabs, ...registeredTabs];
+        }
+
+        return defaultTabs;
+    }
+
+    @computed('currentTab', 'tabs') get tab() {
+        if (this.currentTab) {
+            return this.tabs.find(({ slug }) => slug === this.currentTab);
+        }
+
+        return null;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.vehicle = this.args.vehicle;
+        this.changeTab(this.args.tab || 'details');
+    }
+
+    @action async changeTab(tab) {
+        this.currentTab = tab;
+
+        if (typeof this.args.onTabChanged === 'function') {
+            this.args.onTabChanged(tab);
+        }
+    }
+
+    @action editDriver() {
+        const { driver } = this.args;
+        return this.hostRouter.transitionTo('console.fleet-ops.management.drivers.index.edit', driver.public_id);
+    }
+}

package/addon/components/fleet-form-panel.hbs

@@ -0,0 +1,46 @@
+<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width="700">
+    <Overlay::Header @title={{if @fleet.public_id "Update Fleet" "New Fleet"}} @status={{@fleet.public_id}} @hideStatusDot={{true}} @createdAt={{@fleet.createdAt}} @onPressCancel={{@onPressCancel}}>
+        {{#if @fleet.id}}
+            <Button @icon="save" @type="primary" @text="Save Fleet" @onClick={{@onUpdateFleet}} />
+        {{else}}
+            <Button @icon="check" @type="primary" @text="Create Fleet" @onClick={{@onCreateFleet}} />
+        {{/if}}
+    </Overlay::Header>
+
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
+        <div class="modal-body-container">
+            <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
+                <div class="col-span-2 mb-2">
+                    <InputGroup @name="Fleet Name" @value={{@fleet.name}} />
+                </div>
+                <InputGroup @name="Assign to Service Area" @value={{@fleet.service_area}}>
+                    <ModelSelect @modelName="service-area" @selectedModel={{@fleet.service_area}} @placeholder="Select service area to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @fleet.service_area)}} as |model|>
+                        {{model.name}}
+                    </ModelSelect>
+                </InputGroup>
+                {{#if @fleet.service_area}}
+                    <InputGroup @name="Assign to Zone" @value={{@fleet.zone}}>
+                        <ModelSelect @modelName="zone" @selectedModel={{@fleet.zone}} @query={{hash service_area_uuid=@fleet.service_area.id}} @placeholder="Select zone to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @fleet.zone)}} as |model|>
+                            {{model.name}}
+                        </ModelSelect>
+                    </InputGroup>
+                {{/if}}
+                <InputGroup @name="Task/ Mission" @helpText="Give a description of this fleet's primary task or mission if applicable." @value={{@fleet.task}} />
+                <InputGroup @name="Status" @helpText="Select the status of the fleet.">
+                    <Select this={{@statusOptions}} @value={{@fleet.status}} @onSelect={{fn (mut @fleet.status)}} @placeholder="Select status" class="w-full" />
+                </InputGroup>
+                <InputGroup @name="Vendor" @value={{@fleet.vendor}}>
+                    <ModelSelect @modelName="vendor" @selectedModel={{@fleet.vendor}} @placeholder="Select vendor to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @fleet.vendor)}} as |model|>
+                        {{model.name}}
+                    </ModelSelect>
+                </InputGroup>
+                <InputGroup @name="Fleet" @value={{@fleet.parent_fleet}}>
+                    <ModelSelect @modelName="fleet" @selectedModel={{@fleet.parent_fleet}} @placeholder="Select parent fleet to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @fleet.parent_fleet)}} as |model|>
+                        {{model.name}}
+                    </ModelSelect>
+                </InputGroup>
+            </div>
+        </div>
+        {{yield}}
+    </Overlay::Body>
+</Overlay>

package/addon/components/fleet-form-panel.js

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

package/addon/components/fleet-panel.hbs

@@ -0,0 +1,70 @@
+<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width="700">
+    <Overlay::Header @title="Vehicle Details" @status={{@fleet.public_id}} @hideStatusDot={{true}}
+        @createdAt={{@fleet.createdAt}} @onPressCancel={{@onPressCancel}}>
+    </Overlay::Header>
+
+    <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
+        <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
+            <div class="ui-tabs mt-4">
+                <nav>
+                    <a href="javascript:;" class="ui-tab {{if (eq this.currentTab "details") 'active' }}" {{on "click" (fn this.changeTab "details" )}}>
+                        <FaIcon @icon="circle-info" class="mr-1" />
+                        <span>Details</span>
+                    </a>
+                    <a href="javascript:;" class="ui-tab {{if (eq this.currentTab "vehicles") 'active' }}" {{on "click" (fn this.changeTab "vehicles" )}}>
+                        <FaIcon @icon="satellite-dish" class="mr-1" />
+                        <span>Vehicles</span>
+                    </a>
+                    <a href="javascript:;" class="ui-tab {{if (eq this.currentTab "drivers") 'active' }}" {{on "click" (fn this.changeTab "drivers" )}}>
+                        <FaIcon @icon="hard-drive" class="mr-1" />
+                        <span>Drivers</span>
+                    </a>
+                </nav>
+            </div>
+        </div>
+        <div class="tab-content tab-{{this.currentTab}}">
+            <div class="p-4">
+                {{#if (eq this.currentTab "details")}}
+                    <div class="modal-body-container">
+                        <div class="grid grid-cols-2 flex-col md:flex-row gap-2 mb-6">
+                            <div class="field-info-container">
+                                <div class="field-name">Name</div>
+                                <div class="field-value">{{n-a @fleet.name}}</div>
+                            </div>
+                            <div class="field-info-container">
+                                <div class="field-name">Service Area</div>
+                                <div class="field-value">{{n-a @fleet.serviceArea.name}}</div>
+                            </div>
+                            <div class="field-info-container">
+                                <div class="field-name">Zone</div>
+                                <div class="field-value">{{n-a @fleet.zone.name}}</div>
+                            </div>
+                            <div class="field-info-container">
+                                <div class="field-name">Task</div>
+                                <div class="field-value">{{n-a @fleet.task}}</div>
+                            </div>
+                            <div class="field-info-container">
+                                <div class="field-name">Active Manpower</div>
+                                <div class="field-value">{{@fleet.drivers_online_count}} of {{@fleet.drivers_count}} Online</div>
+                            </div>
+                            <div class="field-info-container">
+                                <div class="field-name">Date Created</div>
+                                <div class="field-value">{{@fleet.createdAtShort}}</div>
+                            </div>
+                        </div>
+                    </div>
+                {{/if}}
+                {{#if (eq this.currentTab "vehicles")}}
+                    <div class="modal-body-container">
+                        <FleetVehicleListing @fleet={{@fleet}} @onAddVehicle={{this.addVehicle}} @onRemoveVehicle={{this.removeVehicle}} />
+                    </div>
+                {{/if}}
+                {{#if (eq this.currentTab "drivers")}}
+                    <div class="modal-body-container">
+                        <FleetDriverListing @fleet={{@fleet}} @onAddDriver={{this.addDriver}} @onRemoveDriver={{this.removeDriver}} />
+                    </div>
+                {{/if}}
+            </div>
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/components/fleet-panel.js

@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+export default class FleetPanelComponent extends Component {
+    @service fetch;
+    @service modalsManager;
+    @service store;
+    @service fetch;
+    @tracked currentTab;
+    @tracked fleet;
+
+    constructor() {
+        super(...arguments);
+        this.fleet = this.args.fleet;
+        this.changeTab(this.args.tab || 'details');
+    }
+
+    @action async changeTab(tab) {
+        this.currentTab = tab;
+
+        if (typeof this.args.onTabChanged === 'function') {
+            this.args.onTabChanged(tab);
+        }
+    }
+
+    @action addDriver(driver) {
+        this.fetch.post('fleets/assign-device', { driver: driver.id, fleet: this.fleet.id });
+    }
+
+    @action removeDriver(driver) {
+        this.fetch.post('fleets/remove-device', { driver: driver.id, fleet: this.fleet.id });
+    }
+
+    @action addVehicle(vehicle) {
+        this.fetch.post('fleets/assign-vehicle', { vehicle: vehicle.id, fleet: this.fleet.id });
+    }
+
+    @action removeVehicle(vehicle) {
+        this.fetch.post('fleets/remove-vehicle', { vehicle: vehicle.id, fleet: this.fleet.id });
+    }
+}

package/addon/components/fleet-vehicle-listing.hbs

@@ -0,0 +1,73 @@
+{{yield}}<div class="fleet-vehicle-listing" {{did-insert this.setupComponent}} ...attributes>
+    <div class="mb-2 flex items-center justify-between">
+        <div class="flex items-center">
+            <div class="fleet-vehicle-listing-search">
+                <Input @type="text" {{on "keyup" (perform this.search)}} placeholder="Search vehicle in fleet" class="w-64 form-input form-input-sm" />
+            </div>
+
+            {{#if this.isLoading}}
+                <div class="mx-2">
+                    <Spinner @iconClass="text-sky-500 fa-spin-800ms" />
+                </div>
+            {{/if}}
+        </div>
+        <div class="w-56">
+            {{#if @onAddVehicle}}
+                <ModelSelect @modelName="vehicle" @selectedModel={{@options.selectedVehicle}} @placeholder="Add vehicle to fleet" @triggerClass="form-select form-input form-select-sm form-input-sm" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onAdd}} as |model|>
+                    {{model.display_name}}
+                </ModelSelect>
+            {{/if}}
+        </div>
+    </div>
+    <div class="bg-white border border-gray-200 rounded shadow-sm dark:bg-gray-800 dark:border-gray-900 text-xs">
+        <div class="w-full">
+            <div class="grid grid-cols-12 text-xs p-3 font-bold text-gray-800 dark:text-gray-100 border-b border-gray-900 shadow">
+                {{#if @selectable}}
+                    <div></div>
+                {{/if}}
+                <div class="col-span-4 flex items-center">Vehicle</div>
+                <div class="col-span-7 flex items-center"></div>
+            </div>
+        </div>
+        <div class="h-48 overflow-y-scroll">
+            {{#unless this.isLoaded}}
+                <div class="flex text-center items-center justify-center p-4 dark:text-gray-100">
+                    <Spinner class="mr-2" @iconClass="text-sky-500" />
+                    <span>Loading fleet vehicle...</span>
+                </div>
+            {{/unless}}
+            {{#each this.vehicles as |vehicle|}}
+                <div class="flex flex-row items-center justify-between text-xs py-2 px-3 text-gray-800 border-b border-gray-200 dark:border-gray-900 dark:text-gray-100">
+                    <div>
+                        {{#if @selectable}}
+                            <div class="flex items-center">
+                                <Checkbox @value={{vehicle.selected}} @onToggle={{fn this.select vehicle}} />
+                            </div>
+                        {{/if}}
+                        <div class="flex items-center">
+                            <div class="flex flex-row items-start">
+                                <div class="mr-2">
+                                    <div class="relative">
+                                        <img src={{vehicle.photo_url}} alt={{vehicle.display_name}} class="w-5 h-5" />
+                                        <FaIcon @icon="circle" class="absolute right-0 top-0 -mr-1 -mt-1 {{if vehicle.online "text-green-500" "text-yellow-200"}}" />
+                                    </div>
+                                </div>
+                                <div>
+                                    <div class="font-semibold">{{vehicle.display_name}}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex items-center justify-end">
+                        {{#if @onRemoveVehicle}}
+                            <a href="javascript:;" class="text-danger text-opacity-75" {{on "click" (fn this.onRemove vehicle)}}>
+                                <FaIcon @icon="times" @prefix="fas" class="mr-1" />
+                                <span>Remove</span>
+                            </a>
+                        {{/if}}
+                    </div>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</div>