ADDED: Support to display the data for multiple Bubi station. Version…

… bumped to 2.0.0.

CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project is documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2.0.0]
+
+BREAKING CHANGE: Support for displaying the data of multiple stations in a single module.
+
 ## [1.0.0]
 
 First public release.

Gruntfile.js

@@ -40,6 +40,7 @@ module.exports = function (grunt) {
             'MD010': false,
             'MD001': false,
             'MD031': false,
+            'MD034': false,
             'MD040': false,
             'MD002': false,
             'MD029': false,

MMM-Bubi.css

@@ -1,4 +1,23 @@
-.MMM-Bubi .symbol {
-  margin-left: 10px;
-  margin-right: 10px;
+.MMM-Bubi table {
+  width: auto !important;
+}
+
+.MMM-Bubi table.align-right {
+  float: right;
+}
+
+.MMM-Bubi .clearfix::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+.MMM-Bubi .symbol-cell,
+.MMM-Bubi .count-cell {
+  padding-right: 10px;
+  text-align: right;
+}
+
+.MMM-Bubi .name-cell {
+  text-align: left;
 }

MMM-Bubi.js

@@ -9,9 +9,17 @@
 Module.register('MMM-Bubi', {
   defaults: {
     updateInterval: 600000,
-    placeId: 248398,
     showPlaceName: true,
-    placeName: ''
+    align: 'left',
+    places: [
+      { id: 1758935, name: 'MOMKult' },
+      { id: 1758923, name: 'MOM Park' },
+      { id: 366538, name: 'BAH csomópont' }
+    ]
+  },
+
+  viewModel: {
+    places: []
   },
 
   requiresVersion: '2.1.0',
@@ -24,7 +32,6 @@ Module.register('MMM-Bubi', {
 
   start() {
     const self = this;
-    this.viewModel = null;
     this.hasData = false;
 
     this._getData(() => self.updateDom());
@@ -38,24 +45,42 @@ Module.register('MMM-Bubi', {
     const wrapper = document.createElement('div');
 
     if (this.viewModel) {
-      const firstLine = document.createElement('div');
+      const tableEl = document.createElement('table');
+      tableEl.classList = 'small';
+
+      if (this.config.align === 'left') {
+        tableEl.classList += ' align-left';
+      }
 
-      const symbolEl = document.createElement('span');
-      symbolEl.classList = 'fa fa-bicycle dimmed symbol';
-      firstLine.appendChild(symbolEl);
+      if (this.config.align === 'right') {
+        tableEl.classList += ' align-right';
+      }
 
-      const countEl = document.createElement('span');
-      countEl.innerText = this.viewModel.numberOfBikes;
-      firstLine.appendChild(countEl);
+      this.viewModel.places.forEach((place) => {
+        const rowEl = document.createElement('tr');
 
-      wrapper.appendChild(firstLine);
+        const symbolEl = document.createElement('td');
+        symbolEl.classList = 'fa fa-bicycle dimmed symbol-cell';
+        rowEl.appendChild(symbolEl);
 
-      if (this.config.showPlaceName) {
-        const secondLine = document.createElement('div');
-        secondLine.classList = 'dimmed small';
-        secondLine.innerText = this.config.placeName ? this.config.placeName : this.viewModel.officalPlaceName;
-        wrapper.appendChild(secondLine);
-      }
+        const countEl = document.createElement('td');
+        countEl.classList = 'count-cell';
+        countEl.innerText = place.numberOfBikes;
+        rowEl.appendChild(countEl);
+
+        const nameEl = document.createElement('td');
+        nameEl.classList = 'dimmed small name-cell';
+        nameEl.innerText = place.name;
+        rowEl.appendChild(nameEl);
+
+        tableEl.appendChild(rowEl);
+      });
+
+      wrapper.appendChild(tableEl);
+
+      const clearfixEl = document.createElement('div');
+      clearfixEl.classList = 'clearfix';
+      wrapper.appendChild(clearfixEl);
     } else {
       const loadingEl = document.createElement('span');
       loadingEl.innerHTML = this.translate('LOADING');
@@ -91,12 +116,16 @@ Module.register('MMM-Bubi', {
     const response = JSON.parse(responseBody);
 
     const places = response.countries[0].cities[0].places;
-    const place = places.find(p => p.uid === this.config.placeId);
 
-    this.viewModel = {
-      officalPlaceName: place.name,
-      numberOfBikes: place.bikes
-    };
+    for (let i = 0; i < this.config.places.length; i++) {
+      const place = places.find(p => p.uid === this.config.places[i].id);
+      this.viewModel.places.push({
+        name: this.config.showPlaceName
+          ? this.config.places[i].name || place.name
+          : null,
+        numberOfBikes: place.bikes
+      });
+    }
 
     if (!this.hasData) {
       this.updateDom();

README.md

@@ -1,22 +1,20 @@
 # MMM-Bubi
 
-This is a module for the [MagicMirror²](https://github.com/MichMich/MagicMirror/) to display the number of available bikes on a particular station of the Budapest public bike system (aka MOL Bubi).
+This is a module for the [MagicMirror²](https://github.com/MichMich/MagicMirror/) to display the number of available bikes on the selected stations of the Budapest public bike system (aka MOL Bubi).
 
 ## Features
 
-By default this module displays the number of available bikes and the official name of the specified station:
+By default this module displays the number of available bikes and the official names of the specified stations:
 
-![](https://raw.githubusercontent.com/balassy/MMM-Bubi/master/doc/screenshot-default.png)
+![Default](https://raw.githubusercontent.com/balassy/MMM-Bubi/master/doc/screenshot-default.png)
 
-You can configure the module to display a custom (typically shorter) name for the station:
+You can configure the module to display a custom (typically shorter) names for the stations:
 
-![](https://raw.githubusercontent.com/balassy/MMM-Bubi/master/doc/screenshot-custom-place-name.png)
+![With custom station names](https://raw.githubusercontent.com/balassy/MMM-Bubi/master/doc/screenshot-custom-place-name.png)
 
-If you wish, you can completely remove the station name:
+If you wish, you can completely remove the station names:
 
-![](https://raw.githubusercontent.com/balassy/MMM-Bubi/master/doc/screenshot-no-place-name.png)
-
-This module is capable to display the bike availability only for a single station. If you would like to see the number of bikes for multiple stations, add this module multiple times.
+![With hidden station names](https://raw.githubusercontent.com/balassy/MMM-Bubi/master/doc/screenshot-no-place-name.png)
 
 For updates, please check the [CHANGELOG](https://github.com/balassy/MMM-Bubi/blob/master/CHANGELOG.md).
 
@@ -40,9 +38,13 @@ var config = {
       position: 'top_right',
       config: {
         updateInterval: 600000, // 10 minutes in milliseconds
-        placeId: 248398,
         showPlaceName: true,
-        placeName: ''
+        align: 'left',
+        places: [
+          { id: 1758935, name: 'MOMKult' },
+          { id: 1758923, name: 'MOM Park' },
+          { id: 366538,  name: 'BAH csomópont' }
+        ]
       }
     }
   ]
@@ -51,7 +53,30 @@ var config = {
 
 ## Configuration options
 
-Coming soon...
+| Option                 | Description
+|------------------------|-----------
+| `places`               | **REQUIRED** The list of Bubi stations to display. The unique `id` of the station is used to lookup the data from the webservice. The `name` is optional, and can be used to display a custom name for the station instead of the official name if the `showPlaceName` option is set to `true`. <br><br> **Type:** `Array<{ id: number, name: string }>` <br>**Default value:** 3 preconfigured stations
+| `showPlaceName`        | *Optional* Specifies whether the module should display not only the number of available bikes for each station, but also the names of the stations. If the `name` property is set in the `places` array, then it will be displayed, otherwise the official names of the stations will be rendered onto the Mirror.<br><br> **Type:** `boolean` <br>**Default value:** `true`
+| `align`                | *Optional* Determines how the text is aligned within the module. Set this to `left` if the module is displayed on left side of the mirror, or to `right` if you positioned this module to the right column of the mirror.<br><br>**Type:** `string`<br>**Possible values**: `'left'` or `'right'`<br>**Default value:** `'left'`
+| `updateInterval`       | *Optional* The frequency of how often the module should query the number of available bikes from the webservice. <br><br>**Type:** `int` (milliseconds) <br>**Default value:** `600000` milliseconds (10 minutes)
+
+## How to get the place ID
+
+In the `id` property of the objects in the `places` array of the configuration settings you have to specify the unique identifier of the station for which the module should display the bike availability.
+
+To obtain the unique identifier of the station, follow these steps:
+
+1. Navigate to the [MOL Bubi homepage](https://molbubi.bkk.hu/) with your favorite webbrowser.
+
+2. Use the map on the page to find your favorite MOL Bubi station and click its icon.
+
+3. Note the official name of the station, e.g. `1201-BAH csomópont`.
+
+4. Navigate to the https://bubi.nextbike.net/maps/nextbike-live.xml?&domains=mb URL and use the browser's find function (CTRL+F) to locate the place by its name.
+
+![Locate the station by its name](https://raw.githubusercontent.com/balassy/MMM-Bubi/master/doc/find-place-id.png)
+
+5. Find the `uid` attribute in the same row, it is the unique identifier of the station.
 
 ## How it works
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MMM-Bubi",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "MagicMirror module that displays bike availability in the Budapest public bike System (aka MOL Bubi).",
   "main": "MMM-Bubi.js",
   "author": "György Balássy",