kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-06-28 04:02:12 +00:00
Code Issues Projects Releases Wiki Activity

Use templates to render weather.

Browse Source
This commit is contained in:
Michael Teeuw 2017-10-01 13:50:15 +02:00
parent 3fa810b7b8
commit 99e3a47dde
3 changed files with 34 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
modules/default/weather/current.html Normal file
View File

@ -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> -->

3
modules/default/weather/forecast.html Normal file
View File

@ -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>

126
modules/default/weather/weather.js
View File

@ -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.
getDom: function() {
switch (this.config.displayType) {
case "current":
return this.currentWeatherView()
break;
case "forecast":
return this.weatherForecastView()
break;
default:
return this.fullWeatherView()
break;
// Select the template depending on the display type.
getTemplate: function () {
return this.config.type.toLowerCase() + ".html"
},
// Add all the data to the template.
getTemplateData: function () {
return {
config: this.config,
current: this.weatherProvider.currentWeather(),
forecast: this.weatherProvider.weatherForecast()
}
},
@ -81,113 +80,18 @@ Module.register("weather",{
}
setTimeout(() => {
switch (this.config.displayType) {
case "current":
this.weatherProvider.fetchCurrentWeather()
break;
switch (this.config.type) {
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()) + "&nbsp;&nbsp;" : "&nbsp;", "", "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)
}
});