@fleetbase/fleetops-engine 0.0.1

package/addon/components/event-timeline.js

@@ -0,0 +1,423 @@
+/* eslint-disable no-undef */
+import Component from '@glimmer/component';
+
+export default class EventTimelineComponent extends Component {
+    /**
+     * Default event timeline settings
+     *
+     * @var {Object}
+     */
+    defaultSettings = {
+        forceVerticalMode: {
+            type: 'integer',
+            defaultValue: 600,
+        },
+        horizontalStartPosition: {
+            type: 'string',
+            acceptedValues: ['bottom', 'top'],
+            defaultValue: 'top',
+        },
+        mode: {
+            type: 'string',
+            acceptedValues: ['horizontal', 'vertical'],
+            defaultValue: 'vertical',
+        },
+        moveItems: {
+            type: 'integer',
+            defaultValue: 1,
+        },
+        startIndex: {
+            type: 'integer',
+            defaultValue: 0,
+        },
+        verticalStartPosition: {
+            type: 'string',
+            acceptedValues: ['left', 'right'],
+            defaultValue: 'left',
+        },
+        verticalTrigger: {
+            type: 'string',
+            defaultValue: '15%',
+        },
+        visibleItems: {
+            type: 'integer',
+            defaultValue: 3,
+        },
+    };
+
+    /**
+     * Creates a timeline object from the component root element
+     *
+     * @param {HTMLElement} element
+     * @return
+     */
+    createTimeline(element, defaultSettings = {}) {
+        const timelineName = element.id ? `#${element.id}` : `.${element.className}`;
+        const errorPart = 'could not be found as a direct descendant of';
+        const data = element.dataset;
+        let wrap;
+        let scroller;
+        let items;
+        const settings = {};
+
+        // Test for correct HTML structure
+        try {
+            wrap = element.querySelector('.timeline__wrap');
+            if (!wrap) {
+                throw new Error(`${warningLabel} .timeline__wrap ${errorPart} ${timelineName}`);
+            } else {
+                scroller = wrap.querySelector('.timeline__items');
+                if (!scroller) {
+                    throw new Error(`${warningLabel} .timeline__items ${errorPart} .timeline__wrap`);
+                } else {
+                    items = [].slice.call(scroller.children, 0);
+                }
+            }
+        } catch (e) {
+            console.warn(e.message);
+            return false;
+        }
+
+        // Test setting input values
+        Object.keys(this.defaultSettings).forEach((key) => {
+            settings[key] = defaultSettings[key].defaultValue;
+
+            if (data[key]) {
+                settings[key] = data[key];
+            } else if (options && options[key]) {
+                settings[key] = options[key];
+            }
+
+            if (defaultSettings[key].type === 'integer') {
+                if (!settings[key] || !testValues(settings[key], key)) {
+                    settings[key] = defaultSettings[key].defaultValue;
+                }
+            } else if (defaultSettings[key].type === 'string') {
+                if (defaultSettings[key].acceptedValues && defaultSettings[key].acceptedValues.indexOf(settings[key]) === -1) {
+                    console.warn(`${warningLabel} The value "${settings[key]}" entered for the setting "${key}" was not recognised.`);
+                    settings[key] = defaultSettings[key].defaultValue;
+                }
+            }
+        });
+
+        // Further specific testing of input values
+        const defaultTrigger = defaultSettings.verticalTrigger.defaultValue.match(/(\d*\.?\d*)(.*)/);
+        const triggerArray = settings.verticalTrigger.match(/(\d*\.?\d*)(.*)/);
+        let [, triggerValue, triggerUnit] = triggerArray;
+        let triggerValid = true;
+        if (!triggerValue) {
+            console.warn(`${warningLabel} No numercial value entered for the 'verticalTrigger' setting.`);
+            triggerValid = false;
+        }
+        if (triggerUnit !== 'px' && triggerUnit !== '%') {
+            console.warn(`${warningLabel} The setting 'verticalTrigger' must be a percentage or pixel value.`);
+            triggerValid = false;
+        }
+        if (triggerUnit === '%' && (triggerValue > 100 || triggerValue < 0)) {
+            console.warn(`${warningLabel} The 'verticalTrigger' setting value must be between 0 and 100 if using a percentage value.`);
+            triggerValid = false;
+        } else if (triggerUnit === 'px' && triggerValue < 0) {
+            console.warn(`${warningLabel} The 'verticalTrigger' setting value must be above 0 if using a pixel value.`);
+            triggerValid = false;
+        }
+
+        if (triggerValid === false) {
+            [, triggerValue, triggerUnit] = defaultTrigger;
+        }
+
+        settings.verticalTrigger = {
+            unit: triggerUnit,
+            value: triggerValue,
+        };
+
+        if (settings.moveItems > settings.visibleItems) {
+            console.warn(
+                `${warningLabel} The value of "moveItems" (${settings.moveItems}) is larger than the number of "visibleItems" (${settings.visibleItems}). The value of "visibleItems" has been used instead.`
+            );
+            settings.moveItems = settings.visibleItems;
+        }
+
+        if (settings.startIndex >= items.length - settings.visibleItems) {
+            console.warn(
+                `${warningLabel} The 'startIndex' setting must be between 0 and ${items.length - settings.visibleItems} for this timeline. The value of ${
+                    items.length - settings.visibleItems
+                } has been used instead.`
+            );
+            settings.startIndex = items.length - settings.visibleItems;
+        } else if (settings.startIndex < 0) {
+            console.warn(`${warningLabel} The 'startIndex' setting must be between 0 and ${items.length - settings.visibleItems} for this timeline. The value of 0 has been used instead.`);
+            settings.startIndex = 0;
+        }
+
+        return this.initialize({
+            element,
+            wrap,
+            scroller,
+            items,
+            settings,
+        });
+    }
+
+    itemWrap(el, wrapper, classes = []) {
+        wrapper.classList.add(...classes);
+        el.parentNode.insertBefore(wrapper, el);
+        wrapper.appendChild(el);
+    }
+
+    // Helper function to wrap each element in a group with other HTML elements
+    wrapElements(items) {
+        items.forEach((item) => {
+            this.itemWrap(item.querySelector('.timeline__content'), document.createElement('div'), 'timeline__content__wrap');
+            this.itemWrap(item.querySelector('.timeline__content__wrap'), document.createElement('div'), 'timeline__item__inner');
+        });
+    }
+
+    // Helper function to check if an element is partially in the viewport
+    isElementInViewport(el, triggerPosition) {
+        const rect = el.getBoundingClientRect();
+        const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+        const defaultTrigger = defaultSettings.verticalTrigger.defaultValue.match(/(\d*\.?\d*)(.*)/);
+        let triggerUnit = triggerPosition.unit;
+        let triggerValue = triggerPosition.value;
+        let trigger = windowHeight;
+        if (triggerUnit === 'px' && triggerValue >= windowHeight) {
+            console.warn('The value entered for the setting "verticalTrigger" is larger than the window height. The default value will be used instead.');
+            [, triggerValue, triggerUnit] = defaultTrigger;
+        }
+        if (triggerUnit === 'px') {
+            trigger = parseInt(trigger - triggerValue, 10);
+        } else if (triggerUnit === '%') {
+            trigger = parseInt(trigger * ((100 - triggerValue) / 100), 10);
+        }
+        return rect.top <= trigger && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.top + rect.height >= 0 && rect.left + rect.width >= 0;
+    }
+
+    // Helper function to add transform styles
+    addTransforms(el, transform) {
+        el.style.webkitTransform = transform;
+        el.style.msTransform = transform;
+        el.style.transform = transform;
+    }
+
+    // Set height and widths of timeline elements and viewport
+    setHeightandWidths(tl) {
+        // Set widths of items and viewport
+        function setWidths() {
+            tl.itemWidth = tl.wrap.offsetWidth / tl.settings.visibleItems;
+            tl.items.forEach((item) => {
+                item.style.width = `${tl.itemWidth}px`;
+            });
+            tl.scrollerWidth = tl.itemWidth * tl.items.length;
+            tl.scroller.style.width = `${tl.scrollerWidth}px`;
+        }
+
+        // Set height of items and viewport
+        function setHeights() {
+            let oddIndexTallest = 0;
+            let evenIndexTallest = 0;
+            tl.items.forEach((item, i) => {
+                item.style.height = 'auto';
+                const height = item.offsetHeight;
+                if (i % 2 === 0) {
+                    evenIndexTallest = height > evenIndexTallest ? height : evenIndexTallest;
+                } else {
+                    oddIndexTallest = height > oddIndexTallest ? height : oddIndexTallest;
+                }
+            });
+
+            const transformString = `translateY(${evenIndexTallest}px)`;
+            tl.items.forEach((item, i) => {
+                if (i % 2 === 0) {
+                    item.style.height = `${evenIndexTallest}px`;
+                    if (tl.settings.horizontalStartPosition === 'bottom') {
+                        item.classList.add('timeline__item--bottom');
+                        addTransforms(item, transformString);
+                    } else {
+                        item.classList.add('timeline__item--top');
+                    }
+                } else {
+                    item.style.height = `${oddIndexTallest}px`;
+                    if (tl.settings.horizontalStartPosition !== 'bottom') {
+                        item.classList.add('timeline__item--bottom');
+                        addTransforms(item, transformString);
+                    } else {
+                        item.classList.add('timeline__item--top');
+                    }
+                }
+            });
+            tl.scroller.style.height = `${evenIndexTallest + oddIndexTallest}px`;
+        }
+
+        if (window.innerWidth > tl.settings.forceVerticalMode) {
+            setWidths();
+            setHeights();
+        }
+    }
+
+    // Create and add arrow controls to horizontal timeline
+    addNavigation(tl) {
+        if (tl.items.length > tl.settings.visibleItems) {
+            const prevArrow = document.createElement('button');
+            const nextArrow = document.createElement('button');
+            const topPosition = tl.items[0].offsetHeight;
+            prevArrow.className = 'timeline-nav-button timeline-nav-button--prev';
+            nextArrow.className = 'timeline-nav-button timeline-nav-button--next';
+            prevArrow.textContent = 'Previous';
+            nextArrow.textContent = 'Next';
+            prevArrow.style.top = `${topPosition}px`;
+            nextArrow.style.top = `${topPosition}px`;
+            if (currentIndex === 0) {
+                prevArrow.disabled = true;
+            } else if (currentIndex + 1 === tl.items.length) {
+                nextArrow.disabled = true;
+            }
+            tl.timelineEl.appendChild(prevArrow);
+            tl.timelineEl.appendChild(nextArrow);
+        }
+    }
+
+    // Add the centre line to the horizontal timeline
+    addHorizontalDivider(tl) {
+        const divider = tl.timelineEl.querySelector('.timeline-divider');
+        if (divider) {
+            tl.timelineEl.removeChild(divider);
+        }
+        const topPosition = tl.items[0].offsetHeight;
+        const horizontalDivider = document.createElement('span');
+        horizontalDivider.className = 'timeline-divider';
+        horizontalDivider.style.top = `${topPosition}px`;
+        tl.timelineEl.appendChild(horizontalDivider);
+    }
+
+    // Calculate the new position of the horizontal timeline
+    timelinePosition(tl) {
+        const position = tl.items.length > 2 ? tl.items[currentIndex].offsetLeft : 0;
+        const str = `translate3d(-${position}px, 0, 0)`;
+        addTransforms(tl.scroller, str);
+    }
+
+    // Make the horizontal timeline slide
+    slideTimeline(tl) {
+        const navArrows = tl.timelineEl.querySelectorAll('.timeline-nav-button');
+        const arrowPrev = tl.timelineEl.querySelector('.timeline-nav-button--prev');
+        const arrowNext = tl.timelineEl.querySelector('.timeline-nav-button--next');
+        const maxIndex = tl.items.length - tl.settings.visibleItems;
+        const moveItems = parseInt(tl.settings.moveItems, 10);
+        [].forEach.call(navArrows, (arrow) => {
+            arrow.addEventListener('click', function (e) {
+                e.preventDefault();
+                currentIndex = this.classList.contains('timeline-nav-button--next') ? (currentIndex += moveItems) : (currentIndex -= moveItems);
+                if (currentIndex === 0 || currentIndex < 0) {
+                    currentIndex = 0;
+                    arrowPrev.disabled = true;
+                    arrowNext.disabled = false;
+                } else if (currentIndex === maxIndex || currentIndex > maxIndex) {
+                    currentIndex = maxIndex;
+                    arrowPrev.disabled = false;
+                    arrowNext.disabled = true;
+                } else {
+                    arrowPrev.disabled = false;
+                    arrowNext.disabled = false;
+                }
+                timelinePosition(tl);
+            });
+        });
+    }
+
+    // Set up horizontal timeline
+    setUpHorinzontalTimeline(tl) {
+        tl.timelineEl.classList.add('timeline--horizontal');
+        this.setHeightandWidths(tl);
+        this.timelinePosition(tl);
+        this.addNavigation(tl);
+        this.addHorizontalDivider(tl);
+        this.slideTimeline(tl);
+    }
+
+    // Set up vertical timeline
+    setUpVerticalTimeline(tl) {
+        let lastVisibleIndex = 0;
+        tl.items.forEach((item, i) => {
+            item.classList.remove('animated', 'fadeIn');
+            if (!this.isElementInViewport(item, tl.settings.verticalTrigger) && i > 0) {
+                item.classList.add('animated');
+            } else {
+                lastVisibleIndex = i;
+            }
+            const divider = tl.settings.verticalStartPosition === 'left' ? 1 : 0;
+            if (i % 2 === divider && window.innerWidth > tl.settings.forceVerticalMode) {
+                item.classList.add('timeline__item--right');
+            } else {
+                item.classList.add('timeline__item--left');
+            }
+        });
+        for (let i = 0; i < lastVisibleIndex; i += 1) {
+            tl.items[i].classList.remove('animated', 'fadeIn');
+        }
+        // Bring elements into view as the page is scrolled
+        window.addEventListener('scroll', () => {
+            tl.items.forEach((item) => {
+                if (this.isElementInViewport(item, tl.settings.verticalTrigger)) {
+                    item.classList.add('fadeIn');
+                }
+            });
+        });
+        // also bring element into view it the container element is scrollable
+        const tlContainer = window.$(tl.timelineEl).parent();
+        if ((tlContainer.length && tlContainer.css('overflow-y') == 'scroll') || tlContainer.css('overflow-y') == 'auto') {
+            const tlContainerDOM = tlContainer.get(0);
+            // console.log(tlContainerDOM);
+            tlContainerDOM.addEventListener('scroll', () => {
+                tl.items.forEach((item) => {
+                    if (this.isElementInViewport(item, tl.settings.verticalTrigger)) {
+                        item.classList.add('fadeIn');
+                    }
+                });
+            });
+        }
+    }
+
+    /**
+     * Reset the timeline
+     *
+     * @param tl timeline
+     * @void
+     */
+    reset(tl) {
+        tl.timelineEl.classList.remove('timeline--horizontal', 'timeline--mobile');
+        tl.scroller.removeAttribute('style');
+        tl.items.forEach((item) => {
+            item.removeAttribute('style');
+            item.classList.remove('animated', 'fadeIn', 'timeline__item--left', 'timeline__item--right');
+        });
+        const navArrows = tl.timelineEl.querySelectorAll('.timeline-nav-button');
+        [].forEach.call(navArrows, (arrow) => {
+            arrow.parentNode.removeChild(arrow);
+        });
+    }
+
+    /**
+     * Initialize timeline
+     *
+     * @void
+     */
+    initialize(tl) {
+        tl.timelineEl.style.opacity = 0;
+        if (!tl.timelineEl.classList.contains('timeline--loaded')) {
+            this.wrapElements(tl.items);
+        }
+        this.reset(tl);
+        if (window.innerWidth <= tl.settings.forceVerticalMode) {
+            tl.timelineEl.classList.add('timeline--mobile');
+        }
+        if (tl.settings.mode === 'horizontal' && window.innerWidth > tl.settings.forceVerticalMode) {
+            this.setUpHorinzontalTimeline(tl);
+        } else {
+            this.setUpVerticalTimeline(tl);
+        }
+        tl.timelineEl.classList.add('timeline--loaded');
+        setTimeout(() => {
+            tl.timelineEl.style.opacity = 1;
+        }, 500);
+    }
+}

package/addon/components/file-icon.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/console/components/file-icon';

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

@@ -0,0 +1,73 @@
+<div class="fleet-driver-listing" {{did-insert this.setupComponent}} ...attributes>
+    <div class="mb-2 flex items-center justify-between">
+        <div class="flex items-center">
+            <div class="fleet-driver-listing-search">
+                <Input @type="text" {{on "keyup" this.search}} placeholder="Search drivers 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 @onAddDriver}}
+                <ModelSelect @modelName="driver" @selectedModel={{@options.selectedDriver}} @placeholder="Add driver to fleet" @triggerClass="form-select form-input form-select-sm form-input-sm" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onAdd}} as |model|>
+                    {{model.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">Driver</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 drivers...</span>
+                </div>
+            {{/unless}}
+            {{#each this.drivers as |driver|}}
+                <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={{driver.selected}} @onToggle={{fn this.select driver}} />
+                            </div>
+                        {{/if}}
+                        <div class="flex items-center">
+                            <div class="flex flex-row items-start">
+                                <div class="mr-2">
+                                    <div class="relative">
+                                        <img src={{driver.photo_url}} alt={{driver.name}} class="w-5 h-5" />
+                                        <FaIcon @icon="circle" class="absolute right-0 top-0 -mr-1 -mt-1 {{if driver.online "text-green-500" "text-yellow-200"}}" />
+                                    </div>
+                                </div>
+                                <div>
+                                    <div class="font-semibold">{{driver.name}}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex items-center justify-end">
+                        {{#if @onRemoveDriver}}
+                            <a href="javascript:;" class="text-danger text-opacity-75" {{on "click" (fn this.onRemove driver)}}>
+                                <FaIcon @icon="times" @prefix="fas" class="mr-1" />
+                                <span>Remove</span>
+                            </a>
+                        {{/if}}
+                    </div>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</div>

package/addon/components/fleet-driver-listing.js

@@ -0,0 +1,117 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, computed } from '@ember/object';
+import { isArray } from '@ember/array';
+import { task, timeout } from 'ember-concurrency';
+
+export default class FleetDriverListingComponent extends Component {
+    @service store;
+    @service appCache;
+
+    @tracked drivers = [];
+    @tracked selected = [];
+    @tracked query;
+    @tracked isLoading = false;
+    @tracked isLoaded = false;
+
+    @computed ('selected.[]') get ids() {
+        return this.selected.map(selection => selection.id);
+    }
+
+    @action async setupComponent() {
+        const { selected, fleet } = this.args;
+
+        this.selected = (isArray(selected) && selected.length) ? selected : [];
+        this.drivers = await this.queryFleetDrivers(fleet);
+    }
+
+    @action setSelected() {
+        const { selected } = this.args;
+
+        if (isArray(selected) && selected.length) {
+            this.selected = selected;
+        }
+    }
+
+    @action select(option, selected) {
+        if (selected) {
+            this.selected.pushObject(option);
+        } else {
+            this.selected.removeObject(option);
+        }
+
+        option.setProperties({ selected });
+
+        if (typeof this.args.onChange === 'function') {
+            this.args.onChange(this.selected);
+        }
+    }
+
+    @action onAdd(driver) {
+        if (typeof this.args.onRemoveDriver === 'function') {
+            this.args.onAddDriver(driver);
+        }
+
+        const index = this.drivers.findIndex((d) => d.id === driver.id);
+
+        if (index === -1) {
+            this.drivers.pushObject(driver);
+        }
+    }
+
+    @action onRemove(driver) {
+        if (typeof this.args.onRemoveDriver === 'function') {
+            this.args.onRemoveDriver(driver);
+        }
+
+        this.drivers.removeObject(driver);
+    }
+
+    @action queryFleetDrivers(fleet, query = null) {
+        this.isLoading = true;
+
+        const cacheKey = `${fleet.id}:fleetDrivers`;
+        // const cachedResults = this.appCache.getEmberData(cacheKey, 'driver');
+
+        // if (cachedResults) {
+        //     this.drivers = this.toggleSelected(cachedResults);
+        //     this.isLoaded = true;
+        // }
+
+        return new Promise((resolve) => {
+            this.store.query('driver', { query, fleet: fleet.id }).then((drivers) => {
+                this.isLoading = false;
+                this.isLoaded = true;
+
+                // save to cache
+                if (!query) {
+                    this.appCache.setEmberData(cacheKey, drivers);
+                }
+
+                resolve(this.toggleSelected(drivers));
+            });
+        });
+    }
+
+    @action toggleSelected(options = []) {
+        return options.map(option => {
+            option.set('selected', this.ids.includes(option.id));
+
+            return option;
+        });
+    }
+
+     @action search({ target }) {
+        const { value } = target;
+        const { fleet } = this.args;
+
+        this.searchTask.perform(fleet, value);
+     }
+ 
+     @task(function* (fleet, query) {
+        yield timeout(300);
+ 
+        this.drivers = yield this.queryFleetDrivers(fleet, query);
+     }).restartable() searchTask;
+}

package/addon/components/full-calendar/draggable.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/console/components/full-calendar/draggable';

package/addon/components/full-calendar.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/console/components/full-calendar';

package/addon/components/full-size.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/console/components/full-size';