Dev v0.2.37

addon/components/content-panel.js

@@ -72,7 +72,7 @@ export default class ContentPanelComponent extends Component {
         this.dropdownButtonRenderInPlace = dropdownButtonRenderInPlace === true;
 
         if (typeof onInsert === 'function') {
-            onInsert(...arguments);
+            onInsert(this.context);
         }
     }
 

addon/components/coordinates-input.hbs

@@ -42,8 +42,8 @@
             </div>
             <div class="flex flex-col">
                 <div class="flex flex-row items-center pb-4">
-                    <Input @type="text" class="form-input mr-2" @value={{this.lookupQuery}} aria-label="Address Search" disabled={{or this.disabled this.isLoading}} placeholder="Enter address" />
-                    <Button @wrapperClass="mr-2" @icon="search-location" @type="primary" @size="sm" @text="Lookup" @onClick={{this.reverseLookup}} @isLoading={{this.isLoading}} />
+                    <Input @type="text" class="form-input mr-2" @value={{this.lookupQuery}} aria-label="Address Search" disabled={{or this.disabled this.reverseLookup.isRunning}} placeholder="Enter address" />
+                    <Button @wrapperClass="mr-2" @icon="search-location" @type="primary" @size="sm" @text="Lookup" @onClick={{perofrm this.reverseLookup}} @isLoading={{this.reverseLookup.isRunning}} />
                     <Button @type="default" @iconPrefix="fas" @icon="times" @size="sm" @text="Done" @onClick={{dd.actions.close}} />
                 </div>
             </div>

addon/components/coordinates-input.js

@@ -5,132 +5,65 @@ import { action } from '@ember/object';
 import { isBlank } from '@ember/utils';
 import { isArray } from '@ember/array';
 import { later } from '@ember/runloop';
+import { debug } from '@ember/debug';
+import { task } from 'ember-concurrency';
 import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
 
 const DEFAULT_LATITUDE = 1.3521;
 const DEFAULT_LONGITUDE = 103.8198;
 
 export default class CoordinatesInputComponent extends Component {
-    /**
-     * Service for fetching data.
-     * @type {Service}
-     * @memberof CoordinatesInputComponent
-     */
     @service fetch;
-
-    /**
-     * Service for accessing current user information.
-     * @type {Service}
-     * @memberof CoordinatesInputComponent
-     */
     @service currentUser;
-
-    /**
-     * Current zoom level of the map.
-     * @type {number}
-     * @memberof CoordinatesInputComponent
-     */
     @tracked zoom;
-
-    /**
-     * Controls whether zoom controls are shown.
-     * @type {boolean}
-     * @memberof CoordinatesInputComponent
-     */
     @tracked zoomControl;
-
-    /**
-     * Reference to the Leaflet map instance.
-     * @type {Object}
-     * @memberof CoordinatesInputComponent
-     */
     @tracked leafletMap;
-
-    /**
-     * Current latitude of the map center.
-     * @type {number}
-     * @memberof CoordinatesInputComponent
-     */
     @tracked latitude;
-
-    /**
-     * Current longitude of the map center.
-     * @type {number}
-     * @memberof CoordinatesInputComponent
-     */
     @tracked longitude;
-
-    /**
-     * Latitude for map positioning.
-     * @type {number}
-     * @memberof CoordinatesInputComponent
-     */
     @tracked mapLat;
-
-    /**
-     * Longitude for map positioning.
-     * @type {number}
-     * @memberof CoordinatesInputComponent
-     */
     @tracked mapLng;
-
-    /**
-     * Query used for location lookup.
-     * @type {string}
-     * @memberof CoordinatesInputComponent
-     */
     @tracked lookupQuery;
-
-    /**
-     * Indicates if the component is loading data.
-     * @type {boolean}
-     * @memberof CoordinatesInputComponent
-     */
     @tracked isLoading = false;
-
-    /**
-     * Indicates if the map is ready.
-     * @type {boolean}
-     * @memberof CoordinatesInputComponent
-     */
     @tracked isReady = false;
-
-    /**
-     * Flag to track if the initial map movement has ended.
-     * @type {boolean}
-     * @memberof CoordinatesInputComponent
-     */
     @tracked isInitialMoveEnded = false;
-
-    /**
-     * The URL for the map's tile source.
-     * @type {string}
-     * @memberof CoordinatesInputComponent
-     */
     @tracked tileSourceUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
-
-    /**
-     * Disable input.
-     *
-     * @memberof CoordinatesInputComponent
-     */
+    @tracked mapTheme = 'light';
     @tracked disabled = false;
 
     /**
      * Constructor for CoordinatesInputComponent. Sets initial map coordinates and values.
      * @memberof CoordinatesInputComponent
      */
-    constructor() {
+    constructor(owner, { onInit, value, darkMode = false, zoom = 9, zoomControl = false, disabled = false }) {
         super(...arguments);
-
         this.setInitialMapCoordinates();
-        this.setInitialValueFromPoint(this.args.value);
-        this.zoom = getWithDefault(this.args, 'zoom', 9);
-        this.zoomControl = getWithDefault(this.args, 'zoomControl', false);
-        this.disabled = getWithDefault(this.args, 'disabled', false);
+        this.setInitialValueFromPoint(value);
+        this.changeTileSource(darkMode ? 'dark' : 'light');
+        this.zoom = zoom;
+        this.zoomControl = zoomControl;
+        this.disabled = disabled;
+
+        if (typeof onInit === 'function') {
+            onInit(this);
+        }
+    }
 
-        if (typeof this.args.onInit === 'function') {
-            this.args.onInit(this);
+    changeTileSource(sourceUrl = null) {
+        if (sourceUrl === 'dark') {
+            this.mapTheme = 'dark';
+            this.tileSourceUrl = 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png';
+        } else if (sourceUrl === 'dark_all') {
+            this.mapTheme = 'dark_all';
+            this.tileSourceUrl = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
+        } else if (sourceUrl === 'light') {
+            this.mapTheme = 'light';
+            this.tileSourceUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
+        } else if (typeof sourceUrl === 'string' && sourceUrl.startsWith('https://')) {
+            this.mapTheme = 'custom';
+            this.tileSourceUrl = sourceUrl;
+        } else {
+            this.mapTheme = 'light';
+            this.tileSourceUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
         }
     }
 
@@ -255,53 +188,46 @@ export default class CoordinatesInputComponent extends Component {
      * @memberof CoordinatesInputComponent
      */
     @action setCoordinatesFromMap(event) {
-        const { target } = event;
         const { onUpdatedFromMap } = this.args;
-        const { lat, lng } = target.getCenter();
+        const { target } = event;
+        const center = target.getCenter();
+        const geographicalCenter = typeof center.wrap === 'function' ? center.wrap() : center;
+        const { lat, lng } = geographicalCenter;
 
         this.updateCoordinates(lat, lng, { updateMap: false });
-
         if (typeof onUpdatedFromMap === 'function') {
             onUpdatedFromMap({ latitude: lat, longitude: lng });
         }
     }
 
     /**
-     * Ember action for performing a reverse geolocation lookup. Updates the coordinates based on the lookup query result.
+     * Task which performs a reverse geolocation lookup. Updates the coordinates based on the lookup query result.
+     *
+     * @return {AsyncGenerator<Promise>}
      * @memberof CoordinatesInputComponent
      */
-    @action reverseLookup() {
-        const { onGeocode, onGeocodeError } = this.args;
-        const query = this.lookupQuery;
-
-        if (isBlank(query)) {
+    @task *reverseLookup() {
+        if (isBlank(this.lookupQuery)) {
             return;
         }
 
-        this.isLoading = true;
-
-        this.fetch
-            .get('geocoder/query', { query, single: true })
-            .then((place) => {
-                if (isBlank(place)) {
-                    return;
-                }
-
+        try {
+            const place = yield this.fetch.get('geocoder/query', { query: this.lookupQuery, single: true });
+            if (place) {
                 const [longitude, latitude] = place.location.coordinates;
-
                 this.updateCoordinates(latitude, longitude);
 
-                if (typeof onGeocode === 'function') {
-                    onGeocode(place);
-                }
-            })
-            .catch((error) => {
-                if (typeof onGeocodeError === 'function') {
-                    onGeocodeError(error);
+                if (typeof this.args.onGeocode === 'function') {
+                    this.args.onGeocode(place);
                 }
-            })
-            .finally(() => {
-                this.isLoading = false;
-            });
+            }
+
+            return place;
+        } catch (error) {
+            debug('Coordinates input reverse lookup query failed:', error);
+            if (typeof this.args.onGeocodeError === 'function') {
+                this.args.onGeocodeError(error);
+            }
+        }
     }
 }

addon/helpers/is-dark-mode.js

@@ -0,0 +1,16 @@
+import Helper from '@ember/component/helper';
+import { getOwner } from '@ember/application';
+
+export default class IsDarkModeHelper extends Helper {
+    compute() {
+        const owner = getOwner(this);
+        if (owner) {
+            const theme = owner.lookup('service:theme');
+            if (theme) {
+                return theme.activeTheme === 'dark';
+            }
+        }
+
+        return false;
+    }
+}

addon/styles/components/badge.css

@@ -139,7 +139,8 @@
 .status-badge[class*='4'] > span,
 .status-badge.yellow-status-badge > span,
 .status-badge.enroute-status-badge > span,
-.status-badge.driver-enroute-status-badge > span .status-badge.offline-status-badge > span,
+.status-badge.driver-enroute-status-badge > span,
+.status-badge.offline-status-badge > span,
 .status-badge.pending-review-status-badge > span,
 .status-badge.awaiting-review-status-badge > span,
 .status-badge.scheduled-maintenance-status-badge > span,

app/helpers/is-dark-mode.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/helpers/is-dark-mode';

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.2.36",
+    "version": "0.2.37",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",

tests/integration/helpers/is-dark-mode-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | is-dark-mode', function (hooks) {
+    setupRenderingTest(hooks);
+
+    // TODO: Replace this with your real tests.
+    test('it renders', async function (assert) {
+        this.set('inputValue', '1234');
+
+        await render(hbs`{{is-dark-mode this.inputValue}}`);
+
+        assert.dom().hasText('1234');
+    });
+});