From 202a198e56a86e3e466559e3d502298d13d8a87a Mon Sep 17 00:00:00 2001 From: Jeff Clarke Date: Tue, 27 Jun 2017 10:28:06 -0400 Subject: [PATCH] Fixed a bug where module didn;t respect time format config, and updated styles for horizontal layout --- MMM-MyWeather.css | 31 ++++++++++++---- MMM-MyWeather.js | 92 +++++++++++++++++++++++++---------------------- 2 files changed, 74 insertions(+), 49 deletions(-) diff --git a/MMM-MyWeather.css b/MMM-MyWeather.css index d45c10f..c0bdef4 100644 --- a/MMM-MyWeather.css +++ b/MMM-MyWeather.css @@ -44,8 +44,7 @@ text-align: center; } -.MMM-MyWeather .hour { - font-size: 75%; +.MMM-MyWeather .horizontal td, { text-align: center; } @@ -96,10 +95,9 @@ font-size: 75%; line-height: 65px; display: inline-block; - -ms-transform: translate(0, -3px); /* IE 9 */ - -webkit-transform: translate(0, -3px); /* Safari */ - transform: translate(0, -3px); width: 50%; + display: block; + margin: auto; } .MMM-MyWeather .moonPhaseIcon { @@ -132,12 +130,29 @@ } -.MMM-MyWeather td.hourv, -.MMM-MyWeather td.day { +.MMM-MyWeather .vertical td.hourv, +.MMM-MyWeather .vertical td.day { text-align: left; color: #FFF; } +.MMM-MyWeather table.horizontal, +.MMM-MyWeather table.horizontal { + text-align: center; + line-height: 1.5; + font-size: 17px; + font-weight: normal; + margin-bottom: 20px; +} + +.MMM-MyWeather table.horizontal .hour, +.MMM-MyWeather table.horizontal .day { + line-height: 25px; + font-size: 20px; + color: #FFF; +} + + .MMM-MyWeather .min-temp { color: #6fc4f5; @@ -150,3 +165,5 @@ color: #FFF; } + + diff --git a/MMM-MyWeather.js b/MMM-MyWeather.js index 2b24b24..0244c0d 100644 --- a/MMM-MyWeather.js +++ b/MMM-MyWeather.js @@ -279,25 +279,25 @@ Module.register("MMM-MyWeather", { small.appendChild(table_sitrep); } - var large = document.createElement("div"); - large.className = "large light"; + var large = document.createElement("div"); + large.className = "large light"; - var weatherIcon = document.createElement("span"); - if (this.config.coloricon) { - weatherIcon.innerHTML = this.weatherTypeTxt; - } else { - weatherIcon.className = "wi " + this.weatherType; - } - weatherIcon.classList.add("currentWeatherIconWrapper"); + var weatherIcon = document.createElement("span"); + if (this.config.coloricon) { + weatherIcon.innerHTML = this.weatherTypeTxt; + } else { + weatherIcon.className = "wi " + this.weatherType; + } + weatherIcon.classList.add("currentWeatherIconWrapper"); - var temperature = document.createElement("span"); - temperature.className = "bright"; - temperature.innerHTML = " " + this.temperature + "°"; - large.appendChild(weatherIcon); - large.appendChild(temperature); + var temperature = document.createElement("span"); + temperature.className = "bright"; + temperature.innerHTML = " " + this.temperature + "°"; + large.appendChild(weatherIcon); + large.appendChild(temperature); - wrapper.appendChild(small); - wrapper.appendChild(large); + wrapper.appendChild(small); + wrapper.appendChild(large); } @@ -318,6 +318,7 @@ Module.register("MMM-MyWeather", { if (this.config.layout == "vertical") { // vertical layout + table.classList.add("vertical"); var row = document.createElement("tr"); table.appendChild(row); @@ -384,16 +385,19 @@ Module.register("MMM-MyWeather", { hourCell = document.createElement("td"); hourCell.className = "hourv"; - var amPm = "am"; - var timeSplit = forecast.hour.split(":"); - var hourVal = Number(timeSplit[0]); - if (hourVal > 12) { - hourVal = hourVal - 12; - amPm = "pm"; - } else if (hourVal == 0) { - hourVal = 12; - } - hourCell.innerHTML = hourVal + " " + amPm; + // var amPm = "am"; + // var timeSplit = forecast.hour.split(":"); + // var hourVal = Number(timeSplit[0]); + // if (hourVal == 12) { + // amPm = "pm"; + // } else if (hourVal > 12) { + // hourVal = hourVal - 12; + // amPm = "pm"; + // } else if (hourVal == 0) { + // hourVal = 12; + // } + // hourCell.innerHTML = hourVal + " " + amPm; + hourCell.innerHTML = moment(forecast.hour, "HH:mm").format(this.config.timeFormat); row.appendChild(hourCell); iconCell = document.createElement("td"); @@ -514,10 +518,11 @@ Module.register("MMM-MyWeather", { // horizontal layout + var fctable = document.createElement("div"); var divider = document.createElement("hr"); divider.className = "hrDivider"; - fctable.appendChild(divider); + // fctable.appendChild(divider); if (this.config.fctext == 1) { var row = document.createElement("tr"); @@ -536,6 +541,7 @@ Module.register("MMM-MyWeather", { table = document.createElement("table"); table.className = "small"; table.setAttribute("width", "25%"); + table.classList.add("horizontal"); if (this.config.sysstat == 1) { @@ -638,7 +644,7 @@ Module.register("MMM-MyWeather", { hourCell = document.createElement("td"); hourCell.className = "hour"; - hourCell.innerHTML = forecast.hour; + hourCell.innerHTML = moment(forecast.hour, "HH:mm").format(this.config.timeFormat); row_time.appendChild(hourCell); @@ -654,18 +660,18 @@ Module.register("MMM-MyWeather", { row_icon.appendChild(iconCell); maxTempCell = document.createElement("td"); - maxTempCell.innerHTML = forecast.maxTemp + "°/" + forecast.minTemp + "°"; - maxTempCell.className = "hour"; + maxTempCell.innerHTML = forecast.maxTemp + "°"; + maxTempCell.className = "temp hourly-temp"; row_temp.appendChild(maxTempCell); mmCell = document.createElement("td"); if (this.config.units == "metric") { - mmCell.innerHTML = forecast.pop + "%/" + forecast.mm; - mmCell.className = "hour"; + mmCell.innerHTML = forecast.pop + "% / " + forecast.mm; + mmCell.className = "prec"; } else { - mmCell.innerHTML = forecast.pop + "%/" + forecast.mm; - mmCell.className = "hour"; + mmCell.innerHTML = forecast.pop + "% / " + forecast.mm; + mmCell.className = "prec"; } row_pop.appendChild(mmCell); @@ -727,13 +733,15 @@ Module.register("MMM-MyWeather", { table.appendChild(row_pop); table.appendChild(row_wind); fctable.appendChild(table); - fctable.appendChild(divider.cloneNode(true)); + // fctable.appendChild(divider.cloneNode(true)); } table = document.createElement("table"); table.className = "small"; table.setAttribute("width", "25%"); + table.classList.add("horizontal"); + row_time = document.createElement("tr"); row_icon = document.createElement("tr"); @@ -746,7 +754,7 @@ Module.register("MMM-MyWeather", { forecast = this.forecast[f]; dayCell = document.createElement("td"); - dayCell.className = "hour"; + dayCell.className = "day"; dayCell.innerHTML = forecast.day; row_time.appendChild(dayCell); @@ -764,17 +772,17 @@ Module.register("MMM-MyWeather", { row_icon.appendChild(iconCell); maxTempCell = document.createElement("td"); - maxTempCell.innerHTML = forecast.maxTemp + "°/" + forecast.minTemp + "°"; - maxTempCell.className = "hour"; + maxTempCell.innerHTML = "" + forecast.maxTemp + "° / " + "" + forecast.minTemp + "°"; + maxTempCell.className = "temp"; row_temp.appendChild(maxTempCell); mmCell = document.createElement("td"); if (this.config.units == "metric") { - mmCell.innerHTML = forecast.pop + "%/" + forecast.mm; - mmCell.className = "hour"; + mmCell.innerHTML = forecast.pop + "% / " + forecast.mm; + mmCell.className = "prec"; } else { - mmCell.innerHTML = forecast.pop + "%/" + forecast.mm; - mmCell.className = "hour"; + mmCell.innerHTML = forecast.pop + "% / " + forecast.mm; + mmCell.className = "prec"; } row_pop.appendChild(mmCell);