@fleetbase/fleetops-engine 0.0.1

package/LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2022
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,32 @@
+# @fleetbase/fleetops-engine
+
+FleetOps extension for Fleetbase.
+
+
+## Compatibility
+
+* Ember.js v3.24 or above
+* Ember CLI v3.24 or above
+* Node.js v14 or above
+
+
+## Installation
+
+```
+ember install @fleetbase/fleetops-engine
+```
+
+
+## Usage
+
+[Longer description of how to use the addon in apps.]
+
+
+## Contributing
+
+See the [Contributing](CONTRIBUTING.md) guide for details.
+
+
+## License
+
+This project is licensed under the [MIT License](LICENSE.md).

package/addon/components/cell/driver-name.hbs

@@ -0,0 +1,13 @@
+{{#if this.driver}}
+    <div class="relative flex items-center" ...attributes>
+        <img src={{this.driver.photo_url}} alt={{this.driver.name}} {{fallback-img-src (config 'defaultValues.driverImage')}} class="w-5 h-5 mr-2 rounded-md" />
+        <a href="javascript:;" class="relative block" {{on "click" (fn this.onClick this.driver)}}>
+            <span>{{get-default-value this.driver.name}}</span>
+        </a>
+        <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 -mt-1 -ml-1 {{if this.driver.online "text-green-500" "text-yellow-200"}}" />
+    </div>
+{{else}}
+    <div class="flex items-center">
+        <span>No driver assigned</span>
+    </div>
+{{/if}}

package/addon/components/cell/driver-name.js

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+import { action, get, computed } from '@ember/object';
+
+export default class CellDriverNameComponent extends Component {
+    @computed('args.column.modelPath', 'args.row') get driver() {
+        const { column, row } = this.args;
+
+        if (typeof column?.modelPath === 'string') {
+            return get(row, column.modelPath);
+        }
+
+        return row;
+    }
+
+    @action onClick(driver) {
+        const { row, column, onClick } = this.args;
+
+        if (typeof onClick === 'function') {
+            onClick(driver, row);
+        }
+
+        if (typeof column?.action === 'function') {
+            column.action(driver, row);
+        }
+
+        if (typeof column?.onClick === 'function') {
+            column.onClick(driver, row);
+        }
+    }
+}

package/addon/components/custom-field-value.hbs

@@ -0,0 +1,11 @@
+<span class="custom-meta-field" {{did-insert this.setupComponent}} ...attributes>
+    {{#if this.isTextDisplay}}
+        {{@value}}
+    {{/if}}
+
+    {{#if this.isBooleanInput}}
+        <Badge @status={{if @metaField.value "success" ""}}>{{if @metaField.value "Yes" "No"}}</Badge>
+    {{/if}}
+
+    {{yield}}
+</span>

package/addon/components/custom-field-value.js

@@ -0,0 +1,41 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, computed } from '@ember/object';
+import { equal } from '@ember/object/computed';
+
+export default class CustomFieldValueComponent extends Component {
+    @service fetch;
+
+    @tracked selectedPort;
+    @tracked selectedVessel;
+
+    @equal('args.metaField.type', 'text') isTextInput;
+    @equal('args.metaField.type', 'select') isSelectInput;
+    @equal('args.metaField.type', 'vessel') isVesselInput;
+    @equal('args.metaField.type', 'port') isPortInput;
+    @equal('args.metaField.type', 'datetime') isDateTimeInput;
+    @equal('args.metaField.type', 'boolean') isBooleanInput;
+
+    @computed('args.metaField.type') get isTextDisplay() {
+        const { type } = this.args.metaField;
+
+        return ['text', 'select', 'vessel', 'port', 'datetime'].includes(type);
+    }
+
+    @action setupComponent() {
+        const { isPortInput, isVesselInput } = this;
+
+        if (isPortInput) {
+            this.fetchPort();
+        }
+
+        if (isVesselInput) {
+            this.fetchVessel();
+        }
+    }
+
+    @action fetchVessel() {}
+
+    @action fetchPort() {}
+}

package/addon/components/custom-field.hbs

@@ -0,0 +1,42 @@
+<div class="custom-meta-field" ...attributes>
+    {{#if this.isTextInput}}
+        <Input type="text" class="form-input w-full {{@inputClass}}" @value={{@value}} placeholder={{@placeholder}} />
+    {{/if}}
+
+    {{#if this.isSelectInput}}
+        <Select class="{{@inputClass}} w-full" @options={{@metaField.options}} @optionLabel="label" @optionValue="value" @value={{@value}} @placeholder={{@placeholder}} @humanize={{@metaField.humanizeOptions}} @onSelect={{@onChange}} />
+    {{/if}}
+
+    {{#if this.isDateTimeInput}}
+        <DateTimeInput class="form-input {{@inputClass}}" @value={{@value}} @onUpdate={{this.setDateValue}} />
+    {{/if}}
+
+    {{#if this.isPortInput}}
+        <ModelSelect @modelName="port" @selectedModel={{this.selectedPort}} @placeholder="Select Port" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @onChange={{this.selectPort}} as |port|>
+            <div class="flex items-center">
+                <span class="uppercase">
+                    {{port.name}} - {{port.portcode}}
+                </span>
+            </div>
+        </ModelSelect>
+    {{/if}}
+
+    {{#if this.isVesselInput}}
+        <ModelSelect @modelName="vessel" @selectedModel={{this.selectedVessel}} @placeholder="Select Vessel" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @onChange={{this.selectVessel}} as |vessel|>
+            <div class="flex items-center">
+                <div class="w-7">
+                    <FaIcon @icon="ship" />
+                </div>
+                <span class="uppercase">
+                    {{vessel.name}} - {{vessel.imo}}
+                </span>
+            </div>
+        </ModelSelect>
+    {{/if}}
+
+    {{#if this.isBooleanInput}}
+        <Toggle @label={{@metaField.label}} @wrapperClass="justify-start-i" @isToggled={{@value}} @onToggle={{this.onToggle}} @helpText={{@metaField.helpText}} />
+    {{/if}}
+
+    {{yield}}
+</div>

package/addon/components/custom-field.js

@@ -0,0 +1,46 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { equal } from '@ember/object/computed';
+
+export default class CustomFieldComponent extends Component {
+    @tracked selectedPort;
+    @tracked selectedVessel;
+
+    @equal('args.metaField.type', 'text') isTextInput;
+    @equal('args.metaField.type', 'select') isSelectInput;
+    @equal('args.metaField.type', 'vessel') isVesselInput;
+    @equal('args.metaField.type', 'port') isPortInput;
+    @equal('args.metaField.type', 'datetime') isDateTimeInput;
+    @equal('args.metaField.type', 'boolean') isBooleanInput;
+
+    @action onToggle() {
+        if (typeof this.args.onChange === 'function') {
+            this.args.onChange(...arguments);
+        }
+    }
+
+    @action setDateValue(dateInstance) {
+        const dateTime = dateInstance.toDate();
+
+        if (typeof this.args.onChange === 'function') {
+            this.args.onChange(dateTime);
+        }
+    }
+
+    @action selectPort(port) {
+        this.selectedPort = port;
+
+        if (typeof this.args.onChange === 'function') {
+            this.args.onChange(port.portcode);
+        }
+    }
+
+    @action selectVessel(vessel) {
+        this.selectedVessel = vessel;
+
+        if (typeof this.args.onChange === 'function') {
+            this.args.onChange(vessel.name);
+        }
+    }
+}

package/addon/components/display-place.hbs

@@ -0,0 +1,52 @@
+<div {{did-insert this.setupComponent}} ...attributes>
+    {{#let (or @place.place @place) as |place|}}
+        {{#if (is-empty place)}}
+            <div class={{@noAddressClass}}>
+                <span class="text-red-500">
+                    {{#if @type}}
+                        No {{@type}} address!
+                    {{else}}
+                        No address!
+                    {{/if}}
+                </span>
+            </div>
+        {{else}}
+            <address class={{@addressClass}}>
+                {{#if place.name}}
+                    {{place.name}}<br>
+                {{/if}}
+                {{#if place.street1}}
+                    {{place.street1}}<br>
+                {{/if}}
+                {{#if place.street2}}
+                    {{place.street2}}<br>
+                {{/if}}
+                <div class="comma-spans">
+                    {{#if place.city}}
+                        <span>{{place.city}}</span>
+                    {{/if}}
+                    {{#if place.province}}
+                        <span>{{place.province}}</span>
+                    {{/if}}
+                    {{#if place.postal_code}}
+                        <span>{{place.postal_code}}</span>
+                    {{/if}}
+                </div>
+                <div class="comma-spans">
+                    {{#if place.neighborhood}}
+                        <span>{{place.neighborhood}}</span>
+                    {{/if}}
+                    {{#if place.district}}
+                        <span>{{place.district}}</span>
+                    {{/if}}
+                    {{#if (and place.building (not place.street1))}}
+                        <span>{{place.building}}</span>
+                    {{/if}}
+                </div>
+                {{#if place.phone}}
+                    <a href="tel:{{place.phone}}" class="text-blue-500 hover:text-blue-400">{{place.phone}}</a><br>
+                {{/if}}
+            </address>
+        {{/if}}
+    {{/let}}
+</div>

package/addon/components/display-place.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DisplayPlaceComponent extends Component {
+    @tracked ref;
+
+    @action setupComponent(element) {
+        this.ref = element;
+    }
+}

package/addon/components/driver-card-mini.hbs

@@ -0,0 +1,12 @@
+<div class="driver-card-mini" ...attributes>
+    <div class="relative flex">
+        <img src={{@driver.photo_url}} alt={{@driver.name}} class="w-6 h-6 mx-2 rounded-md" />
+        <a href="javascript:;" class="relative block cursor-pointer" {{on "click" (fn this.viewDriver @driver)}}>
+            <div class="font-semibold">{{@driver.name}}</div>
+            {{#if @showCoordinates}}
+                <div>{{format-point @driver.location}}</div>
+            {{/if}}
+        </a>
+        <FaIcon @icon="circle" class="absolute left-0 top-0 {{if @driver.online "text-green-500" "text-yellow-200"}}" />
+    </div>
+</div>

package/addon/components/driver-card-mini.js

@@ -0,0 +1,25 @@
+import Component from '@glimmer/component';
+import { inject as controller } from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class DriverCardMiniComponent extends Component {
+    @controller('management.drivers.index') drivers;
+    @service store;
+
+    toModel(record, modelName) {
+        // set id
+        if (!record.id && record.uuid) {
+            record.id = record.uuid;
+        }
+
+        const normalized = this.store.normalize(modelName, record);
+        return this.store.push(normalized);
+    }
+
+    @action viewDriver(record) {
+        const driver = this.toModel(record, 'driver');
+
+        return this.drivers.viewDriver(driver);
+    }
+}

package/addon/components/driver-card.hbs

@@ -0,0 +1,27 @@
+<div class="driver-card flex flex-1" {{did-insert this.setupComponent}} ...attributes>
+    <a href="javascript:;" class="driver-card-details flex flex-1 bg-black bg-opacity-25 rounded-md px-4 py-3 shadow-sm" {{on "click" this.onClick}}>
+        <div class="flex flex-row">
+            <div class="mr-3">
+                <img src={{@driver.photoUrl}} alt={{@driver.name}} class="rounded-md w-12 h-12 shadow-sm" />
+            </div>
+            <div class="flex-1">
+                <h1 class="driver-name font-semibold text-base">{{@driver.name}}</h1>
+                <div>
+                    <div class="driver-info horizontal-li flex flex-row">
+                        {{#if @driver.vehicle_uuid}}
+                            <span class="horizontal-li-item truncate text-xs">{{@driver.vehicle_name}}</span>
+                        {{/if}}
+                        <span class="horizontal-li-item truncate text-xs">{{@driver.phone}}</span>
+                    </div>
+                    <div class="driver-fleets horizontal-li flex flex-row">
+                        {{#each @driver.fleets as |fleet|}}
+                            <span class="driver-fleet-name truncate horizontal-li-item text-xs">{{fleet.name}}</span>
+                        {{else}}
+                            <span class="text-xs text-muted">No fleets</span>
+                        {{/each}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </a>
+</div>

package/addon/components/driver-card.js

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class DriverCardComponent extends Component {
+    @action setupComponent() {}
+
+    @action onClick() {
+        const { driver, onClick } = this.args;
+
+        if (typeof onClick === 'function') {
+            onClick(driver, ...arguments);
+        }
+    }
+}

package/addon/components/event-timeline/event.hbs

@@ -0,0 +1,5 @@
+<div class="timeline__item">
+    <div class="timeline__content">
+        {{yield}}
+    </div>
+</div>

package/addon/components/event-timeline.hbs

@@ -0,0 +1,7 @@
+<div class="timeline" {{did-insert (fn this.createTimeline this.defaultSettings)}}>
+    <div class="timeline__wrap">
+        <div class="timeline__items">
+            {{yield}}
+        </div>
+    </div>
+</div>