Merge pull request #28 from fleetbase/dev-0.2.4

prepare 0.2.4 release branch

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>

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);
+    }
+}

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>

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);
+    }
+}

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>

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>

addon/components/fleet-form-panel.js

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