Use templates to render weather.

modules/default/weather/current.html

@@ -0,0 +1,16 @@
+<div class="normal medium">
+    <span class="wi wi-strong-wind dimmed"></span>
+    <span>
+        {{current.windSpeed}} <!-- should be converted to wind speed in correct unit ... -->
+        <sup>{{current.cardinalWindDirection()}}</sup>
+    </span>
+    <span class="wi dimmed wi-sunset"></span> <!-- hard coded, should use logic ... -->
+    <span> 00:00</span> <!-- hard coded, should use logic ... -->
+</div>
+<div class="large light">
+    <span class="wi weathericon wi-{{current.weatherType}}"></span>
+    <span class="bright"> {{current.temperature}}°</span></div> <!-- should show in correct number of decimals -->
+</div>
+
+<!-- Unclomment the line below to see the contents of the `current` object. -->
+<!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{current | dump}}</div> -->

modules/default/weather/forecast.html

@@ -0,0 +1,3 @@
+<div class="small">Forecast template not yet implemented.</div>
+
+<div style="word-wrap:break-word" class="xsmall dimmed">{{forecast | dump}}</div>

modules/default/weather/weather.js

@@ -15,7 +15,7 @@ Module.register("weather",{
 		weatherProvider: "openweathermap",
 		units: config.units,
 		roundTemp: false,
-		displayType: "full" //current, forecast, full
+		type: "current" //current, forecast
 	},
 
 	// Module properties.
@@ -51,18 +51,17 @@ Module.register("weather",{
 		this.scheduleUpdate(0)
 	},
 
-	// Generate the dom. This is now pretty simple for debugging.
+	// Select the template depending on the display type.
-	getDom: function() {
+	getTemplate: function () {
-		switch (this.config.displayType) {
+		return this.config.type.toLowerCase() + ".html"
-		case "current":
+	},
-			return this.currentWeatherView()
+
-			break;
+	// Add all the data to the template.
-		case "forecast":
+	getTemplateData: function () {
-			return this.weatherForecastView()
+		return {
-			break;
+			config: this.config,
-		default:
+			current: this.weatherProvider.currentWeather(),
-			return this.fullWeatherView()
+			forecast: this.weatherProvider.weatherForecast()
-			break;
 		}
 	},
 
@@ -81,113 +80,18 @@ Module.register("weather",{
 		}
 
 		setTimeout(() => {
-			switch (this.config.displayType) {
+			switch (this.config.type) {
-			case "current":
-				this.weatherProvider.fetchCurrentWeather()
-				break;
 			case "forecast":
 				this.weatherProvider.fetchWeatherForecast()
 				break;
 			default:
+			case "current":
 				this.weatherProvider.fetchCurrentWeather()
-				this.weatherProvider.fetchWeatherForecast()
 				break;
 			}
 		}, nextLoad);
 	},
 
-	/* Views */
 	
-	// Generate the current weather view
-	currentWeatherView: function () {
-
-		var currentWeather = this.weatherProvider.currentWeather()
-		var wrapper = document.createElement("div")
-
-		if (currentWeather === null) {
-			return wrapper
-		}
-
-		// Detail bar.
-
-		var detailBar = document.createElement("div")
-
-		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()) + "  " : " ", "", "sup") // WindDirection	
-
-		var now = new Date();
-		var sunriseSunsetTime = (currentWeather.sunrise < now && currentWeather.sunset > now) ?  currentWeather.sunset : currentWeather.sunrise
-		var sunriseSunsetIcon = (currentWeather.sunrise < now && currentWeather.sunset > now) ? "wi-sunset" : "wi-sunrise"
-		this.addValueToWrapper(detailBar, null, "wi dimmed " + sunriseSunsetIcon, "span", true) // Sunrise / Sunset Icon
-		this.addValueToWrapper(detailBar, moment(sunriseSunsetTime).format("HH:mm")) // Sunrise / Sunset Time
-
-		detailBar.className = "normal medium"
-		wrapper.appendChild(detailBar)
-
-		// Main info
-
-		var mainInfo = document.createElement("div")
-
-		this.addValueToWrapper(mainInfo, null, "weathericon wi wi-" + currentWeather.weatherType, "span", true) // Wind Icon	
-		this.addValueToWrapper(mainInfo, currentWeather.temperature.toFixed(this.config.roundTemp ? 0 : 1) + "&deg;", "bright" ) // WindSpeed
-
-		mainInfo.className = "large light"
-		wrapper.appendChild(mainInfo)
-
-		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) {
-			return
-		}
-
-		var valueWrapper = document.createElement(element)
-		valueWrapper.className = classNames
-		if (addSpacer) {
-			valueWrapper.innerHTML = " "
-		}
-
-		if (value !== null) {
-			valueWrapper.innerHTML += value
-		}
-
-		wrapper.appendChild(valueWrapper)
-	}
 
 });