Skip to content

Commit

Permalink
Add preferredRoads - Select ALL or make own selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@htilburgs
htilburgs authored Apr 16, 2019
1 parent 8235449 commit fa951e3
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 85 deletions.
12 changes: 12 additions & 0 deletions MMM-MyTraffic.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
/*
//-------------------------------------------
MMM-MyTraffic - CSS
Copyright (C) 2019 - H. Tilburgs
MIT License
//-------------------------------------------
The functions are annotated to make things as easy as possible for you.
Use any colors you want! Go to - "http://htmlcolorcodes.com/color-picker/"
Pick your color, copy and paste the HEX number. Example - #62FF00 = bright green.
*/

.wrapper {}

.trafficicon-jam {
Expand Down Expand Up @@ -59,6 +70,7 @@
line-height: 20px;
text-align: left;
}

hr {
height: 1px;
color: dimgray;
Expand Down
186 changes: 103 additions & 83 deletions MMM-MyTraffic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,21 @@ Module.register('MMM-MyTraffic', {
showJams: true, // Show Traffic jams
showConstructions: true, // Show Constructions
showRadars: true, // Show Radar controles
preferredRoads: null, // Display only preferred roads - FUTURE OPTION
preferredRoads: ['ALL'], // Display only preferred roads - All is everything, other "A1",A2",..
maxWidth: "500px", // Max width wrapper
animationSpeed: 1000, // fade in and out speed
initialLoadDelay: 1000,
retryDelay: 2500,
updateInterval: 10 * 60 * 1000 // every 10 minutes
updateInterval: 60 * 1000 // every 1 minute
},



// Create lists of jams, construction-zones and radar positions, with their road name
MTR: null,
jams : [],
constructions : [],
radars : [],

// Define stylesheet
getStyles: function () {
return ["MMM-MyTraffic.css"];
Expand All @@ -45,8 +52,8 @@ Module.register('MMM-MyTraffic', {

// Set locales
this.url = "https://www.anwb.nl/feeds/gethf"
this.MTR = []; // <-- Create empty MyTraffic array
this.scheduleUpdate(); // <-- When the module updates (see below)
this.MTR = []; // <-- Create empty MyTraffic array
this.scheduleUpdate(); // <-- When the module updates (see below)
},

getDom: function () {
Expand All @@ -57,122 +64,134 @@ Module.register('MMM-MyTraffic', {
wrapper.style.maxWidth = this.config.maxWidth;

// The loading sequence
if (!this.loaded) {
wrapper.innerHTML = "Loading....";
wrapper.classList.add("bright", "light", "small");
return wrapper;
}

var MTR = this.MTR;
var ROADS = this.preferredRoads;

// Create lists of jams, construction-zones and radar positions, with their road name
var jams = []
var constructions = []
var radars = []

for (var road of MTR.roadEntries){
for (var jam of road.events.trafficJams){
jams.push({name: road.road, jam})
}
for (var construction of road.events.roadWorks){
constructions.push({name: road.road,construction})
}
for (var radar of road.events.radars){
radars.push({name: road.road,radar})
}
}

if (!this.loaded) {
wrapper.innerHTML = "Loading....";
wrapper.classList.add("bright", "light", "small");

return wrapper;
}

//Display Traffic Jam information
if (this.config.showJams != false) {
for (var i = 0; i < jams.length; i++) {
for (var j of this.jams) {

var warnWrapper = document.createElement("div");
var icon = document.createElement("div");
icon.classList.add('trafficicon-jam', 'small-icon');
var event = document.createElement("div");
event.className = "event xsmall";
var information = document.createElement("div");
information.className = "bold"
if (typeof jams[i].jam.startDate !== "undefined") {
information.innerHTML = jams[i].name + " - " + jams[i].jam.startDate + " - " + (jams[i].jam.distance/1000) + "KM";
if (typeof j.jam.startDate !== "undefined") {
information.innerHTML = j.name + " - " + j.jam.startDate + " - " + (j.jam.distance/1000) + "KM";
} else {
information.innerHTML = jams[i].name;
information.innerHTML = j.name;
}
var description = document.createElement("div");
description.className.add = "description xsmall";
description.innerHTML = jams[i].jam.description;
description.innerHTML = j.jam.description;
var horLine = document.createElement("hr");
event.appendChild(information);
event.appendChild(description);
warnWrapper.appendChild(icon);
warnWrapper.appendChild(event);
wrapper.appendChild(warnWrapper);
wrapper.appendChild(horLine);
}
}
}
}

//Display Traffic Camera (Radar) information
if (this.config.showRadars != false) {
for (var i = 0; i < radars.length; i++) {
var warnWrapper = document.createElement("div");
var icon = document.createElement("div");
icon.classList.add('trafficicon-camera', 'small-icon');
var event = document.createElement("div");
event.className = "event xsmall";
var information = document.createElement("div");
information.className = "bold"
information.innerHTML = radars[i].radar.location;
var description = document.createElement("div");
description.className.add = "description xsmall";
description.innerHTML = radars[i].radar.description;
var horLine = document.createElement("hr");
event.appendChild(information);
event.appendChild(description);
warnWrapper.appendChild(icon);
warnWrapper.appendChild(event);
wrapper.appendChild(warnWrapper);
wrapper.appendChild(horLine);
}
for (var r of this.radars) {

var warnWrapper = document.createElement("div");
var icon = document.createElement("div");
icon.classList.add('trafficicon-camera', 'small-icon');
var event = document.createElement("div");
event.className = "event xsmall";
var information = document.createElement("div");
information.className = "bold"
information.innerHTML = r.radar.location;
var description = document.createElement("div");
description.className.add = "description xsmall";
description.innerHTML = r.radar.description;
var horLine = document.createElement("hr");
event.appendChild(information);
event.appendChild(description);
warnWrapper.appendChild(icon);
warnWrapper.appendChild(event);
wrapper.appendChild(warnWrapper);
wrapper.appendChild(horLine);
}
}

//Display Traffic Constructions information
if (this.config.showConstructions != false) {
for (var i = 0; i < radars.length; i++) {
var warnWrapper = document.createElement("div");
var icon = document.createElement("div");
icon.classList.add('trafficicon-construction', 'small-icon');
var event = document.createElement("div");
event.className = "event xsmall";
var information = document.createElement("div");
information.className = "bold"
information.innerHTML = constructions[i].name + " - " + constructions[i].construction.startDate + " t/m " + constructions[i].construction.stopDate;
var description = document.createElement("div");
description.className.add = "description xsmall";
description.innerHTML = constructions[i].construction.description;
var horLine = document.createElement("hr");
event.appendChild(information);
event.appendChild(description);
warnWrapper.appendChild(icon);
warnWrapper.appendChild(event);
wrapper.appendChild(warnWrapper);
wrapper.appendChild(horLine);
}
}
for (var c of this.constructions) {
var warnWrapper = document.createElement("div");
var icon = document.createElement("div");
icon.classList.add('trafficicon-construction', 'small-icon');
var event = document.createElement("div");
event.className = "event xsmall";
var information = document.createElement("div");
information.className = "bold"
information.innerHTML = c.name + " - " + c.construction.startDate + " t/m " + c.construction.stopDate;
var description = document.createElement("div");
description.className.add = "description xsmall";
description.innerHTML = c.construction.description;
var horLine = document.createElement("hr");
event.appendChild(information);
event.appendChild(description);
warnWrapper.appendChild(icon);
warnWrapper.appendChild(event);
wrapper.appendChild(warnWrapper);
wrapper.appendChild(horLine);
}
}

return wrapper;
}, // <-- closes the getDom function from above


// this processes your data
processTRAFFIC: function (data) {
this.MTR = data;
this.MTR = data;
this.jams=[]
this.constructions=[]
this.radars=[]

// Convert preferredRoads Array to upper case
var pRoads = this.config.preferredRoads;
this.pRoads = pRoads.map(function(x){ return x.toUpperCase() })

for (var road of this.MTR.roadEntries){
Log.log(" typeof="+typeof this.pRoads)
if(this.pRoads.includes(road.road) || this.pRoads.includes("ALL"))
{

for (var j1 of road.events.trafficJams){
Log.log("pushing entry for road="+ road.road)
this.jams.push({name: road.road, jam:j1})
}

for (var construction of road.events.roadWorks){
this.constructions.push({name: road.road,construction:construction})
}

for (var radar of road.events.radars){
this.radars.push({name: road.road,radar:radar})
}
}
}

// console.log(this.MTR); // uncomment to see if you're getting data (in dev console)
this.loaded = true;
},

// this tells module when to update
scheduleUpdate: function () {
setInterval(() => {
this.getTRAFFIC();
this.getTRAFFIC();
}, this.config.updateInterval);
this.getTRAFFIC();
var self = this;
Expand All @@ -186,8 +205,9 @@ Module.register('MMM-MyTraffic', {
// this gets data from node_helper
socketNotificationReceived: function(notification, payload) {
if (notification === "MYTRAFFIC_RESULT") {
this.processTRAFFIC(payload);
this.processTRAFFIC(payload);
this.updateDom(100);
}
this.updateDom(this.config.initialLoadDelay);
//this.updateDom(this.config.initialLoadDelay);
},
});
8 changes: 8 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ Add the module to your modules array in your config.js.
showJams: true, // Show Traffic jams
showConstructions: true, // Show Constructions
showRadars: true, // Show Speed Traps (Radar Controls)
preferredRoads: ['ALL'] // Show All roads or show you're selection -> ['A1','A50','A67']
}
},
```
Expand Down Expand Up @@ -53,9 +54,16 @@ Here is the documentation of options for the modules configuration:
<td><code>showRadars</code></td>
<td>Show Speed traps (Radar Controls) on the Dutch highways<br /><br /><strong>True/False</strong><br />Default: <code>True</code></td>
</tr>
<tr>
<td><code>preferredRoads</code></td>
<td>Show ALL roads or show you're own selection<br /><br /><strong>Array</strong><br />Default: <code>['ALL']</code><br /><br /><strong>Example selection:</strong> preferredRoads: ['A1' , 'A2' , 'A50' , 'A67']</td>
</tr>
</tbody>
</table>

### Special thanks
A special thanks to Sam Detweil for helping me out with some issues!

## License
### The MIT License (MIT)

Expand Down
4 changes: 2 additions & 2 deletions node_helper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ module.exports = NodeHelper.create({
method: 'GET'
}, (error, response, body) => {
if (!error && response.statusCode == 200) {
var result = JSON.parse(body); // JSON data path
// console.log(response.statusCode + result); // Uncomment to see in terminal for test purposes
var result = JSON.parse(body); // JSON data path
//console.log(response.statusCode + result); // Uncomment to see in terminal for test purposes
this.sendSocketNotification('MYTRAFFIC_RESULT', result);
}
});
Expand Down

0 comments on commit fa951e3

Please sign in to comment.