MMM-Soccer - Soccer Standings



  • Description

    This is a small module to show the standings of the european top soccer leagues.

    1. Install dependencies npm install -g request
    2. Insert the config in MagicMirror/config/config.js
    {
    			module: 'soccer',
    			position: 'top_right',
    			config: {
    				api_key: false,
    				favourite: 'GERMANY',
    				leagues: {
    					"GERMANY":394,
    					"FRANCE": 396,
    					"ENGLAND": 398,
    					"SPAIN": 399,
    					"ITALY": 401 
    				}
    			}
    		}
    

    2.1. Exchange the api_key if you restart your raspberry more than 50 times a day :nerd:
    2.2. Exchange favourite with one of the countrys of leagues

    Screenshot:

    https://raw.githubusercontent.com/fewieden/MMM-soccer/master/.github/example_focused.png

    Download:

    [ADMIN: Old information below …]

    1. Create a new folder “soccer” in MagicMirror/modules
    2. Create a new file “soccer.js” and paste
    Module.register("soccer",{
    
    	start: function() {
    		Log.info("Starting module: " + this.name);
    		this.currentLeague = this.config.leagues[this.config.favourite];
    		this.sendSocketNotification('GET_DATA', {league: this.currentLeague, api_key: this.config.api_key});
    	},
    
    	socketNotificationReceived: function(notification, payload){
    		if(notification === 'DATA'){
    			this.standing = payload;
    			this.updateDom();
    		}
    	},
    
    	getStyles: function() {
    		return ["soccer.css"];
    	},
    	
    	getDom: function() {
    		var wrapper = document.createElement("div");
    		if(this.standing){
    			var title = document.createElement("h4");
    			title.innerHTML = this.standing.leagueCaption;
    			wrapper.appendChild(title);
    			var subtitle = document.createElement("p");
    			subtitle.classList.add("xsmall");
    			subtitle.innerHTML = "Matchday: " + this.standing.matchday;
    			wrapper.appendChild(subtitle);
    
    			
    			var rows = document.createElement('div');
    			rows.classList.add("xsmall");
    			var row = document.createElement('div');
    			row.classList.add('row', 'keys');
    			var name = document.createElement('div');
    			name.classList.add('name');
    			name.innerHTML = 'Team';
    			row.appendChild(name);
    			var details = document.createElement('div');
    			details.classList.add('details');
    			var points = document.createElement('img');
    			points.classList.add('key-icon');
    			points.src = 'http://downloadicons.net/sites/default/files/rising-trend-chart-icon-70391.png';
    			details.appendChild(points);
    			var goals = document.createElement('img');
    			goals.classList.add('key-icon');
    			goals.src = 'https://www.iconexperience.com/_img/o_collection_png/green_dark_grey/512x512/plain/goal.png';
    			details.appendChild(goals);
    			row.appendChild(details);
    			rows.appendChild(row);
    			for(var i = 0; i < this.standing.standing.length; i++){
    				var row = document.createElement('div');
    				row.classList.add('row');
    				var icon = document.createElement('img');
    				icon.classList.add('icon');
    				icon.src = this.standing.standing[i].crestURI;
    				row.appendChild(icon);
    				var name = document.createElement('div');
    				name.classList.add('name');
    				name.innerHTML = this.standing.standing[i].teamName;
    				row.appendChild(name);
    				var details = document.createElement('div');
    				details.classList.add('details');
    				var points = document.createElement('span');
    				points.innerHTML = this.standing.standing[i].points;
    				details.appendChild(points);
    				var goals = document.createElement('span');
    				goals.innerHTML = this.standing.standing[i].goalDifference;
    				details.appendChild(goals);
    				row.appendChild(details);
    				rows.appendChild(row);
    			}
    			wrapper.appendChild(rows);
    
    
    		} else {
    			wrapper.innerHTML = "No data available";
    		}
    		return wrapper;
    	}
    });
    
    1. Create a file "node_helper.js and paste
    var request = require('request');
    var NodeHelper = require("node_helper");
    module.exports = NodeHelper.create({
    
    	start: function() {
    		console.log("Starting module: " + this.name);
    	},
    
    	socketNotificationReceived: function(notification, payload) {
    		if (notification === "GET_DATA") {
    			var options = {};
    			if(payload.api_key){
    				 options = {
    					url: "http://api.football-data.org/v1/soccerseasons/" + payload.league + "/leagueTable",
    					headers: {
    						'X-Auth-Token': payload.api_key
    					}
    				};
    			} else {
    				options = {
    					url: "http://api.football-data.org/v1/soccerseasons/" + payload.league + "/leagueTable"
    				};
    			}
    
    			this.getData(options);
    		}
    	},
    
    	getData: function(options) {
    		request(options, (error, response, body) => {
    			if (response.statusCode === 200) {
    				this.sendSocketNotification("DATA", JSON.parse(body)); 
    			} else {
    				console.log("Error "+response.statusCode)
    			}
    		});
    	}
    });
    
    1. Create a file “soccer.css” and paste
    .icon {
    	width: 24px;
    	height: 24px;
    	margin-right: 8px;
    	-webkit-filter: grayscale(100%);
    
    }
    
    .row {
    	display: flex;
    	align-items: center;
    	margin: 4px 0px;
    }
    
    .keys {
    	font-weight: bold;
    	justify-content: flex-end;
    }
    
    .key-icon {
    	height: 20px;
    	width: 20px;
    	-webkit-filter: invert(100%) grayscale(100%);
    }
    
    .name {
    	width: 210px;
    	text-align: left;
    }
    
    .details {
    	display: flex;
    	justify-content: space-between;
    	width: 50px;
    }
    
    h4 {
    	margin-bottom: 10px;
    }
    
    1. Start your MagicMirror


  • Good work :clap:


  • Moderator

    I recommend putting those files in a GitHub repository to make it easier for people to pull the files, instead of having to manually create them like that.



  • this is how the module looks like for the german league

    0_1466075701079_soccer standings


  • Module Developer

    @strawberry-3.141 nice one!

    I’ll be looking to add this for my son, this with a rss feed for team news will work great for him


  • Module Developer

    @strawberry-3.141 Are you putting them in a GitHub repository?



  • I dont get the standings , shows me “soccer_module_8” under the socer heading


  • Moderator

    That generally means there’s an error and the module isn’t loading properly.



  • So what could be the problem? The config.js file or the files in the soccer folder ?


  • Moderator

    I will leave that for the author of the module to help you with. I am not familiar with the module.


Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.