Merge pull request #43 from fewieden/develop

2.1.0

.codeclimate.yml

@@ -8,7 +8,7 @@ engines:
         - javascript
   eslint:
     enabled: true
-    channel: "eslint-3"
+    channel: "eslint-6"
     checks:
       import/no-unresolved:
         enabled: false

.eslintrc

@@ -22,6 +22,7 @@
         "no-console": 0,
         "curly": ["error", "all"],
         "array-bracket-spacing": 0,
-        "space-before-function-paren": 0
+        "space-before-function-paren": 0,
+        "object-property-newline": ["error", { "allowAllPropertiesOnSameLine": true }]
     }
 }

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: ['https://paypal.me/fewieden']

CHANGELOG.md

@@ -1,5 +1,11 @@
 # MMM-Fuel Changelog
 
+## [2.1.0]
+
+### Changed
+
+* Using [MMM-Modal](https://github.com/fewieden/MMM-Modal) to display modals like gas station and voice commands.
+
 ## [2.0.2]
 
 ### Added

MMM-Fuel.css

@@ -15,28 +15,7 @@
     text-align: center;
 }
 
-.MMM-Fuel-blur {
-    -webkit-filter: blur(2px) brightness(50%);
-    filter: blur(2px) brightness(50%);
-}
-
-.MMM-Fuel .modal {
-    position: fixed;
-    z-index: 9000;
-    text-align: left;
-    left: 50%;
-    top: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-}
-
-.MMM-Fuel .modal ul {
-    margin: 0;
-}
-
-.MMM-Fuel .no-color {
+.no-color .MMM-Fuel-map {
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%);
 }

MMM-Fuel.js

@@ -7,7 +7,7 @@
  * @see  https://github.com/fewieden/MMM-Fuel
  */
 
-/* global Module Log */
+/* global Module Log google */
 
 /**
  * @external Module
@@ -19,12 +19,18 @@
  * @see https://github.com/MichMich/MagicMirror/blob/master/js/logger.js
  */
 
+/**
+ * @external google
+ * @see https://maps.googleapis.com/maps/api/js
+ */
+
 /**
  * @module MMM-Fuel
  * @description Frontend for the module to display data.
  *
  * @requires external:Module
  * @requires external:Log
+ * @requires external:google
  */
 Module.register('MMM-Fuel', {
 
@@ -42,10 +48,6 @@ Module.register('MMM-Fuel', {
 
     /** @member {boolean} sortByPrice - Flag to switch between sorting (price and distance). */
     sortByPrice: true,
-    /** @member {boolean} help - Flag to switch between render help or not. */
-    help: false,
-    /** @member {boolean} map - Flag to switch between render map or not. */
-    map: false,
     /** @member {?Interval} interval - Toggles sortByPrice */
     interval: null,
 
@@ -218,9 +220,9 @@ Module.register('MMM-Fuel', {
         } else if (notification === 'VOICE_FUEL' && sender.name === 'MMM-voice') {
             this.checkCommands(payload);
         } else if (notification === 'VOICE_MODE_CHANGED' && sender.name === 'MMM-voice' && payload.old === this.voice.mode) {
-            this.help = false;
-            this.map = false;
-            this.updateDom(300);
+            this.sendNotification('CLOSE_MODAL');
+        } else if (notification === 'MODAL_CLOSED' && payload.identifier === this.identifier) {
+            this.deinitMap();
         }
     },
 
@@ -264,24 +266,85 @@ Module.register('MMM-Fuel', {
      * @returns {void}
      */
     checkCommands(data) {
+        console.log('command', data);
         if (/(HELP)/g.test(data)) {
-            if (/(CLOSE)/g.test(data) || this.help && !/(OPEN)/g.test(data)) {
-                this.help = false;
-                this.interval = this.createInterval();
-            } else if (/(OPEN)/g.test(data) || !this.help && !/(CLOSE)/g.test(data)) {
-                this.map = false;
-                this.help = true;
-                clearInterval(this.interval);
+            if (/(CLOSE)/g.test(data) && !/(OPEN)/g.test(data)) {
+                this.sendNotification('CLOSE_MODAL');
+            } else if (/(OPEN)/g.test(data) && !/(CLOSE)/g.test(data)) {
+                console.log('sending modal notification');
+                this.sendNotification('OPEN_MODAL', {
+                    template: 'templates/HelpModal.njk',
+                    data: {
+                        ...this.voice,
+                        fns: {
+                            translate: this.translate.bind(this)
+                        }
+                    }
+                });
             }
         } else if (/(HIDE)/g.test(data) && /(MAP)/g.test(data)) {
-            this.map = false;
-            this.interval = this.createInterval();
+            this.sendNotification('CLOSE_MODAL');
         } else if (/(GAS)/g.test(data) && /(STATIONS)/g.test(data)) {
-            this.help = false;
-            this.map = true;
-            clearInterval(this.interval);
+            this.sendNotification('OPEN_MODAL', {
+                template: 'templates/MapModal.njk',
+                data: {
+                    config: this.config,
+                    fns: {
+                        translate: this.translate.bind(this)
+                    }
+                },
+                options: {
+                    callback: this.initMap.bind(this)
+                }
+            });
+        }
+    },
+
+    initMap(success) {
+        if (!success || this.map) {
+            return;
+        }
+
+        const mapContainer = document.querySelector('div.MMM-Fuel-map');
+
+        if (!mapContainer) {
+            return;
         }
-        this.updateDom(300);
+
+        const center = new google.maps.LatLng(this.config.lat, this.config.lng);
+        const zoom = this.config.zoom;
+        this.map = new google.maps.Map(mapContainer, { center, zoom, disableDefaultUI: true });
+
+        this.trafficLayer = new google.maps.TrafficLayer();
+        this.trafficLayer.setMap(this.map);
+
+        const list = this.priceList.byPrice;
+        this.markers = [];
+
+        for (let i = 0; i < list.length; i += 1) {
+            this.markers.push(new google.maps.Marker({
+                position: { lat: list[i].lat, lng: list[i].lng },
+                label: i + 1 + '',
+                map: this.map
+            }));
+        }
+    },
+
+    deinitMap() {
+        if (!this.map) {
+            return;
+        }
+
+        this.trafficLayer.setMap(null);
+        this.trafficLayer = null;
+
+        for (let i = 0; i < this.markers.length; i += 1) {
+            this.markers[1].setMap(null);
+        }
+
+        this.markers = [];
+
+        this.map = null;
     },
 
     /**

README.md

@@ -6,12 +6,12 @@ Gas Station Price Module for MagicMirror<sup>2</sup>
 
 ## Examples
 
-![](.github/example.jpg) ![](.github/example2.jpg) ![](.github/example3.jpg)
+![](.github/example.jpg) ![](.github/example2.jpg) ![](.github/example3.png)
 
 ## Dependencies
 
 * An installation of [MagicMirror<sup>2</sup>](https://github.com/MichMich/MagicMirror)
-* OPTIONAL: [Voice Control](https://github.com/fewieden/MMM-voice)
+* OPTIONAL: [Voice Control](https://github.com/fewieden/MMM-voice) and [MMM-Modal](https://github.com/fewieden/MMM-Modal)
 * npm
 * [fs-extra](https://www.npmjs.com/package/fs-extra)
 * [node-fetch](https://www.npmjs.com/package/node-fetch)
@@ -30,7 +30,7 @@ Gas Station Price Module for MagicMirror<sup>2</sup>
         lat: 52.518611,
         lng: 13.408333,
         types: ["diesel"],
-        ...
+        // all your config options, which are different than their default values
     }
 }
 ```
@@ -95,9 +95,10 @@ Config options should be set accordingly `open`: false and `showOpenOnly`: false
 | `types` | `["diesel"]` | Valid options are `diesel`, `e5`. |
 | `radius` | `5` | Valid range not tested yet. |
 
-## OPTIONAL: Voice Control
+## OPTIONAL: Voice Control and Modal
 
-This module supports voice control by [MMM-voice](https://github.com/fewieden/MMM-voice). In order to use this feature, it's required to install the voice module. There are no extra config options for voice control needed.
+This module supports voice control by [MMM-voice](https://github.com/fewieden/MMM-voice) and [MMM-Modal](https://github.com/fewieden/MMM-Modal).
+In order to use this feature, it's required to install the voice and modal modules. There are no extra config options for voice control and modals needed.
 
 ### Mode