Add a small forecast example.

modules/default/weather/providers/openweathermap.js

@@ -42,6 +42,28 @@ WeatherProvider.register("openweathermap", {
 			})
 	},
 
+	// Overwrite the fetchCurrentWeather method.
+	fetchWeatherForecast: function() {
+
+		// I haven't yet implemented the real api call, so let's just generate some random data.
+
+		var forecast = []
+		var today = moment()
+
+		for (var i = 0; i < 5; i++ ) {
+			var weatherObject = new WeatherObject()
+
+			weatherObject.date = moment(today).add(i, "days")
+			weatherObject.minTemperature = Math.random() * 10 + 10
+			weatherObject.maxTemperature = Math.random() * 15 + 10
+
+			forecast.push(weatherObject)
+		}
+
+		this.setWeatherForecast(forecast)
+	},
+
+
 
 	/** OpenWeatherMap Specific Methods - These are not part of the default provider methods */
 
@@ -52,6 +74,8 @@ WeatherProvider.register("openweathermap", {
 	generateWeatherObjectFromCurrentWeather: function(currentWeatherData) {
 		var currentWeather = new WeatherObject()
 
+		currentWeather.date = new Date
+
 		currentWeather.humidity = currentWeatherData.main.humidity ? parseFloat(currentWeatherData.main.humidity) : null
 		currentWeather.temperature = currentWeatherData.main.temp ? parseFloat(currentWeatherData.main.temp) : null
 		currentWeather.windSpeed = currentWeatherData.wind.speed ? parseFloat(currentWeatherData.wind.speed) : null

modules/default/weather/weather.js

@@ -14,7 +14,8 @@ Module.register("weather",{
 		updateInterval: 10 * 60 * 1000,
 		weatherProvider: "openweathermap",
 		units: config.units,
-		roundTemp: false
+		roundTemp: false,
+		displayType: "full" //current, forecast, full
 	},
 
 	// Module properties.
@@ -52,7 +53,17 @@ Module.register("weather",{
 
 	// Generate the dom. This is now pretty simple for debugging.
 	getDom: function() {
-		return this.currentWeatherView(this.weatherProvider.currentWeather())
+		switch (this.config.displayType) {
+		case "current":
+			return this.currentWeatherView()
+			break;
+		case "forecast":
+			return this.weatherForecastView()
+			break;
+		default:
+			return this.fullWeatherView()
+			break;
+		}
 	},
 
 	// What to do when the weather provider has new information available?
@@ -70,19 +81,27 @@ Module.register("weather",{
 		}
 
 		setTimeout(() => {
-			// Currently we are fetching the currentWeather.
+			switch (this.config.displayType) {
-			// In the future, it depends what we want to show.
+			case "current":
-			// So there needs to be some logic here...
-			// if config.weatherType == 'current', do this...
-			// if config.weatherType === 'forecast, do that ...
 				this.weatherProvider.fetchCurrentWeather()
+				break;
+			case "forecast":
+				this.weatherProvider.fetchWeatherForecast()
+				break;
+			default:
+				this.weatherProvider.fetchCurrentWeather()
+				this.weatherProvider.fetchWeatherForecast()
+				break;
+			}
 		}, nextLoad);
 	},
 
 	/* Views */
 
 	// Generate the current weather view
-	currentWeatherView: function (currentWeather) {
+	currentWeatherView: function () {
+
+		var currentWeather = this.weatherProvider.currentWeather()
 		var wrapper = document.createElement("div")
 
 		if (currentWeather === null) {
@@ -95,7 +114,7 @@ Module.register("weather",{
 
 		this.addValueToWrapper(detailBar, null, "wi wi-strong-wind dimmed", "span", true) // Wind Icon
 		this.addValueToWrapper(detailBar, currentWeather.windSpeed ? Math.round(currentWeather.windSpeed) : null) // WindSpeed
-		this.addValueToWrapper(detailBar, currentWeather.windDirection ? this.translate(currentWeather.cardinalWindDirection()) + "  " : null, "", "sup") // WindDirection	
+		this.addValueToWrapper(detailBar, currentWeather.windDirection ? this.translate(currentWeather.cardinalWindDirection()) + "  " : " ", "", "sup") // WindDirection	
 
 		var now = new Date();
 		var sunriseSunsetTime = (currentWeather.sunrise < now && currentWeather.sunset > now) ?  currentWeather.sunset : currentWeather.sunrise
@@ -111,7 +130,7 @@ Module.register("weather",{
 		var mainInfo = document.createElement("div")
 
 		this.addValueToWrapper(mainInfo, null, "weathericon wi wi-" + currentWeather.weatherType, "span", true) // Wind Icon	
-		this.addValueToWrapper(mainInfo, parseFloat(currentWeather.temperature).toFixed(this.config.roundTemp ? 0 : 1) + "&deg;", "bright" ) // WindSpeed
+		this.addValueToWrapper(mainInfo, currentWeather.temperature.toFixed(this.config.roundTemp ? 0 : 1) + "&deg;", "bright" ) // WindSpeed
 
 		mainInfo.className = "large light"
 		wrapper.appendChild(mainInfo)
@@ -119,6 +138,39 @@ Module.register("weather",{
 		return wrapper
 	},
 
+	weatherForecastView: function() {
+		// This is just a dummy view to test it ... it needs A LOT of work :)
+		// Currently it outputs a div, it should be a table.
+
+		var wrapper = document.createElement("div")
+		wrapper.className = "small"
+
+		if (this.weatherProvider.weatherForecast() === null) {
+			return wrapper
+		}
+
+		this.weatherProvider.weatherForecast().forEach((weatherObject) => {
+			var day = document.createElement("div")
+
+			this.addValueToWrapper(day, moment(weatherObject.date).format("dd"))
+			this.addValueToWrapper(day, weatherObject.maxTemperature ? weatherObject.maxTemperature.toFixed(this.config.roundTemp ? 0 : 1) : null, "bright")
+			this.addValueToWrapper(day, weatherObject.minTemperature ? weatherObject.minTemperature.toFixed(this.config.roundTemp ? 0 : 1) : null, "dimmed")
+
+			wrapper.appendChild(day)
+		});
+
+		return wrapper
+	},
+
+	fullWeatherView: function() {
+		var wrapper = document.createElement("div")
+
+		wrapper.appendChild(this.currentWeatherView())
+		wrapper.appendChild(this.weatherForecastView())
+
+		return wrapper
+	},
+
 	// A convenience function to add an element to a wrapper with a specific value and class. 
 	addValueToWrapper: function(wrapper, value, classNames, element = "span", forceAdd = false, addSpacer = true) {
 		if (value === null && !forceAdd) {

modules/default/weather/weatherobject.js

@@ -14,11 +14,14 @@
 
 class WeatherObject {
 	constructor() {
+		this.date = null
 		this.windSpeed = null
 		this.windDirection = null
 		this.sunrise = null
 		this.sunset = null
 		this.temperature = null
+		this.minTemperature = null,
+		this.maxTemperature = null,
 		this.weatherType = null
 	}
 

modules/default/weather/weatherprovider.js

@@ -57,8 +57,8 @@ var WeatherProvider = Class.extend({
 
 	// This method should start the API request to fetch the weather forecast.
 	// This method should definetly be overwritten in the provider.
-	fetchWeatherForeCast: function() {
+	fetchWeatherForecast: function() {
-		Log.warn("Weather provider: " + this.providerName + " does not subclass the fetchWeatherForeCast method.")
+		Log.warn("Weather provider: " + this.providerName + " does not subclass the fetchWeatherForecast method.")
 	},
 
 	// This returns a WeatherDay object for the current weather.
@@ -71,7 +71,7 @@ var WeatherProvider = Class.extend({
 		return this.weatherForecastArray
 	},
 
-	// Set the currentWeather and notify the delegate that new information is availabe.
+	// Set the currentWeather and notify the delegate that new information is available.
 	setCurrentWeather: function(currentWeatherObject) {
 		// We should check here if we are passing a WeatherDay
 		this.currentWeatherObject = currentWeatherObject
@@ -79,6 +79,14 @@ var WeatherProvider = Class.extend({
 		this.updateAvailable()
 	},
 
+	// Set the weatherForecastArray and notify the delegate that new information is available.
+	setWeatherForecast: function(weatherForecastArray) {
+		// We should check here if we are passing a WeatherDay
+		this.weatherForecastArray = weatherForecastArray
+
+		this.updateAvailable()
+	},
+
 	// Notify the delegate that new weather is available.
 	updateAvailable: function() {
 		this.delegate.updateAvailable(this)