Skip to content

Commit a9f193b

Browse files
author
nkl-kst
authored
Merge pull request #11 from nkl-kst/dev
Version 1.2.0
2 parents 38febc8 + 43ddf17 commit a9f193b

16 files changed

+457
-360
lines changed

‎.eslintrc.json

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"rules": {
1616
"indent": ["error", 4],
1717
"no-trailing-spaces": ["error", { "skipBlankLines": true }],
18+
"no-unused-vars": ["warn"],
1819
"padded-blocks": ["off"],
1920
"semi": ["error", "always"],
2021
"space-before-function-paren": ["error", {

‎CHANGELOG.md

+21
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,27 @@ This project adheres to [Semantic Versioning](http://semver.org/).
55

66
---
77

8+
## [1.2.0] - 2018-11-14
9+
10+
### Added
11+
- Rendering Nunjucks templates for modules HTML ouput
12+
- lodash.clonedeep@^4.5.0 to devDependencies
13+
- nunjucks@^3.0.1 to devDependencies
14+
- 'no-unused-vars' warning in eslint config
15+
16+
### Fixed
17+
- Use Font Awesome (and Font Awesome 5) CSS files in getStyles()
18+
- Use Font Awesome 5 icons not before MagicMirror version 2.6.0
19+
- Forecast table data is now right aligned
20+
21+
### Updated
22+
- Test setup with ModuleTestEnv.js and NunjucksTestEnv.js
23+
- Moved endpoint integration tests into 'endpoint' subfolder
24+
25+
### Removed
26+
- getDom() and getCurrentDiv() module functions (use Nunjucks template instead)
27+
- decache@^4.4.0 and jsdom@^13.0.0 dependencies
28+
829
## [1.1.1] - 2018-10-31
930

1031
### Added

‎MMM-RBB-Weather.css

+4
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ table.weather-table td:not(:last-child) {
3434
padding-right: 0.6em;
3535
}
3636

37+
table.weather-table td {
38+
text-align: right;
39+
}
40+
3741
table.weather-table td.day {
3842
text-align: center;
3943
}

‎MMM-RBB-Weather.js

+51-153
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ Module.register('MMM-RBB-Weather', {
4343

4444
getStyles: function() {
4545
return [
46+
'font-awesome.css',
47+
'font-awesome5.css', // Only available in MagicMirror Version > 2.5.0
4648
'weather-icons.css',
4749
'weather-icons-wind.css',
4850
'MMM-RBB-Weather.css'
@@ -83,109 +85,64 @@ Module.register('MMM-RBB-Weather', {
8385
},
8486

8587
/**
86-
* getDom - Build and returns the whole module dom, including current data and forecast
87-
* table.
88+
* getTemplate - Return the Nunjucks template that should be rendered. If there is no weather
89+
* data available yet, the 'nodata' template is returned.
8890
*
89-
* @return {Element} Module dom as div element.
91+
* @return {String} Template to render
9092
*/
91-
getDom: function() {
93+
getTemplate: function() {
9294

93-
// Dom wrapper
94-
let wrapper = document.createElement('div');
95-
if (this.config.whiteIcons) {
96-
wrapper.className = 'white';
97-
}
98-
99-
// No data
95+
// No data available
10096
if (this.weatherData === null || this.weatherData.length === 0) {
101-
wrapper.innerHTML = this.translate('TEXT_NODATA');
102-
return wrapper;
97+
return 'templates/nodata.njk';
10398
}
10499

105-
// Table with data (without current data)
106-
let table = document.createElement('table');
107-
table.className = this.config.tableClass + ' weather-table';
108-
109-
// Current weather
110-
let currentData = this.weatherData[0];
111-
let currentDiv = this.getCurrentDiv(currentData);
112-
wrapper.appendChild(currentDiv);
100+
// Default module template
101+
return 'templates/module.njk';
102+
},
113103

114-
// Fill table with data
115-
for (let [day, data] of Object.entries(this.weatherData)) {
104+
/**
105+
* getTemplateData - Return the data that is included in the rendered Nunjucks remplate. The
106+
* whole module instance is returned here, because several functions are called in the template.
107+
*
108+
* @return {Object} Data to put into templates
109+
*/
110+
getTemplateData: function() {
111+
return { module: this };
112+
},
116113

117-
// Don't create table row for current data
118-
if (day === '0') {
119-
continue;
120-
}
114+
/**
115+
* getDayText - Return the formatted day text for the given day index. This is used for forecast
116+
* days, so index 1 represents today, 2 represents tomorrow and so on.
117+
*
118+
* @param {Number} dayIndex Day index
119+
* @return {String} Formatted day text
120+
*/
121+
getForecastDayText: function(dayIndex) {
121122

122-
// Create data row
123-
let row = document.createElement('tr');
124-
125-
// Date
126-
let dayCol = document.createElement('td');
127-
dayCol.className = 'day';
128-
dayCol.innerHTML = moment().add(day - 1, 'days').format('ddd');
129-
row.appendChild(dayCol);
130-
131-
// Icon
132-
let iconCol = document.createElement('td');
133-
iconCol.className = 'weather-icon';
134-
135-
// Icon path
136-
let iconFolder = this.config.animateForecastIcon ? 'animated' : 'static';
137-
let iconPath = IconMapper.getIconPath(data.nww, iconFolder);
138-
139-
// Set icon url
140-
let iconUrl = this.file(iconPath);
141-
iconCol.style = `background-image: url('${iconUrl}')`;
142-
row.appendChild(iconCol);
143-
144-
// Split temparatures
145-
let maxTemp = data.temp.split(';')[0];
146-
let minTemp = data.temp.split(';')[1];
147-
148-
// Use icons depending on temperature value
149-
let maxTempIcon = this.getTempIcon(maxTemp);
150-
let minTempIcon = this.getTempIcon(minTemp);
151-
152-
// Max temparature
153-
let maxCol = document.createElement('td');
154-
maxCol.className = 'title bright';
155-
maxCol.innerHTML = `${maxTemp}° <i class='fa fa-fw ${maxTempIcon}'></i>`;
156-
row.appendChild(maxCol);
157-
158-
// Min temparature
159-
let minCol = document.createElement('td');
160-
minCol.innerHTML = `${minTemp}° <i class='fa fa-fw ${minTempIcon}'></i>`;
161-
row.appendChild(minCol);
162-
163-
// Wind
164-
if (this.config.showWindspeed) {
165-
let windCol = document.createElement('td');
166-
windCol.innerHTML = `${data.ffkmh} <span>km/h</span> ` +
167-
`<i class='wi wi-wind from-${data.dd}-deg fa-fw'>`;
168-
windCol.className = 'wind';
169-
row.appendChild(windCol);
170-
}
123+
let day = moment().add(dayIndex - 1, 'days');
124+
let dayText = day.format('ddd'); // TODO: Set format in config
171125

172-
// Rain
173-
if (this.config.showRainProbability) {
126+
return dayText;
127+
},
174128

175-
// Use icons depending on probability
176-
let icon = this.getRainProbabilityIcon(data.prr);
129+
/**
130+
* getIconUrl - Return URL to the animated or static icon mapped to the given RBB icon.
131+
*
132+
* @param {Boolean} animate Use animated icons
133+
* @param {String} rbbIcon RBB icon to be mapped
134+
* @return {String} URL to mapped icon
135+
*/
136+
getIconUrl: function(animate, rbbIcon) {
177137

178-
let rainCol = document.createElement('td');
179-
rainCol.innerHTML = `${data.prr}% <i class='fa fa-fw ${icon}'></i>`;
180-
row.appendChild(rainCol);
181-
}
138+
// Icon path
139+
let iconFolder = animate ? 'animated' : 'static';
140+
let iconPath = IconMapper.getIconPath(rbbIcon, iconFolder);
182141

183-
table.appendChild(row);
184-
}
142+
// Set icon url
143+
let iconUrl = this.file(iconPath);
185144

186-
// Append table to wrapper and return it
187-
wrapper.appendChild(table);
188-
return wrapper;
145+
return iconUrl;
189146
},
190147

191148
/**
@@ -203,8 +160,8 @@ Module.register('MMM-RBB-Weather', {
203160
if (temp >= 8) return 'fa-thermometer-quarter';
204161
if (temp >= 0) return 'fa-thermometer-empty';
205162

206-
// Font Awesome 5 (with fa-snowflake) is not available in MagicMirror <= 2.5.0
207-
if (version.localeCompare('2.5.0', 'en', { numeric: true }) <= 0) {
163+
// Font Awesome 5 (with fa-snowflake) is not available in MagicMirror < 2.6.0
164+
if (version.localeCompare('2.6.0', 'en', { numeric: true }) < 0) {
208165
return 'fa-asterisk';
209166
}
210167

@@ -223,8 +180,8 @@ Module.register('MMM-RBB-Weather', {
223180

224181
if (prob <= 15) {
225182

226-
// Font Awesome 5 (with fa-tint-slash) is not available in MagicMirror <= 2.5.0
227-
if (version.localeCompare('2.5.0', 'en', { numeric: true }) <= 0) {
183+
// Font Awesome 5 (with fa-tint-slash) is not available in MagicMirror < 2.6.0
184+
if (version.localeCompare('2.6.0', 'en', { numeric: true }) < 0) {
228185
return 'fa-tint dimmed';
229186
}
230187

@@ -238,72 +195,13 @@ Module.register('MMM-RBB-Weather', {
238195
return 'fa-tint';
239196
},
240197

241-
/**
242-
* getCurrentDiv - Builds and returns the special div for current weather informations.
243-
*
244-
* @param {Object} data Data object fetched from RBB with all weather informations
245-
* @return {Element} Special div for current weather informations
246-
*/
247-
getCurrentDiv: function(data) {
248-
249-
// Wrapper
250-
let wrapper = document.createElement('div');
251-
wrapper.className = 'current';
252-
253-
// Data wrapper
254-
let dataDiv = document.createElement('div');
255-
dataDiv.className = 'large bright light';
256-
257-
// Icon
258-
let iconImg = document.createElement('img');
259-
iconImg.className = 'weather-icon';
260-
261-
// Icon path
262-
let iconFolder = this.config.animateCurrentIcon ? 'animated' : 'static';
263-
let iconPath = IconMapper.getIconPath(data.nww, iconFolder);
264-
265-
// Set icon as image source
266-
iconImg.src = this.file(iconPath);
267-
dataDiv.appendChild(iconImg);
268-
269-
// Temparature
270-
let tempDiv = document.createElement('span');
271-
tempDiv.innerHTML = `${data.temp}°C`;
272-
dataDiv.appendChild(tempDiv);
273-
274-
// Append data div (temp and icon) to wrapper
275-
wrapper.appendChild(dataDiv);
276-
277-
// Current header text
278-
let textDiv = document.createElement('div');
279-
textDiv.className = 'medium normal';
280-
textDiv.innerHTML = data.wwtext;
281-
wrapper.appendChild(textDiv);
282-
283-
// Wind
284-
if (this.config.showCurrentWindspeed) {
285-
let wind = document.createElement('div');
286-
wind.className = 'small dimmed';
287-
288-
// Wind direction text
289-
let windDirKey = this.getWindDirKey(data.dd);
290-
let windDirText = this.translate(`WIND_${windDirKey}`);
291-
292-
wind.innerHTML = `${data.ffkmh} km/h <i class='wi wi-strong-wind'></i> ` +
293-
`${windDirText}<i class='wi wi-wind from-${data.dd}-deg fa-fw'>`;
294-
wrapper.appendChild(wind);
295-
}
296-
297-
return wrapper;
298-
},
299-
300198
/**
301199
* getWindDirKey - Get wind direction short key based on wind direction degrees.
302200
*
303201
* @param {Number} deg Wind direction in degrees
304202
* @return {String} Wind direction short text
305203
*/
306-
getWindDirKey(deg) {
204+
getWindDirKey: function(deg) {
307205

308206
if (deg <= 22) return 'N';
309207
if (deg <= 67) return 'NE';

‎package.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "MMM-RBB-Weather",
3-
"version": "1.1.1",
3+
"version": "1.2.0",
44
"description": "MagicMirror module to display RBB weather data.",
55
"author": "Nikolai Keist",
66
"license": "MIT",
@@ -11,6 +11,7 @@
1111
"main": "MMM-RBB-Weather.js",
1212
"scripts": {
1313
"test": "nyc mocha \"test/unit/**/*.js\"",
14+
"test-tpl": "mocha \"test/int/templates/*.js\"",
1415
"test-int": "mocha \"test/int/**/*.js\"",
1516
"coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"
1617
},
@@ -20,17 +21,17 @@
2021
},
2122
"devDependencies": {
2223
"coveralls": "^3.0.2",
23-
"decache": "^4.4.0",
2424
"eslint": "^5.7.0",
2525
"eslint-config-standard": "^12.0.0",
2626
"eslint-plugin-import": "^2.14.0",
2727
"eslint-plugin-node": "^8.0.0",
2828
"eslint-plugin-promise": "^4.0.1",
2929
"eslint-plugin-standard": "^4.0.0",
30-
"jsdom": "^13.0.0",
3130
"libxmljs": "^0.19.5",
31+
"lodash.clonedeep": "^4.5.0",
3232
"mocha": "^5.2.0",
3333
"moment": "^2.22.2",
34+
"nunjucks": "^3.0.1",
3435
"nyc": "^13.1.0",
3536
"proxyquire": "^2.1.0",
3637
"sinon": "^7.0.0"

0 commit comments

Comments
 (0)