Fixed issues with the new weather module

CHANGELOG.md

@@ -21,6 +21,14 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Fixed unhandled error on bad git data in updatenotiifcation module [#1285](https://github.com/MichMich/MagicMirror/issues/1285).
 - Weather forecast now works with openweathermap in new weather module. Daily data are displayed, see issue [#1504](https://github.com/MichMich/MagicMirror/issues/1504).
 
+### New weather module
+- Fixed weather forecast table display [#1499](https://github.com/MichMich/MagicMirror/issues/1499).
+- Dimmed loading indicator for weather forecast.
+- Implemented config option `decimalSymbol` [#1499](https://github.com/MichMich/MagicMirror/issues/1499).
+- Aligned indoor values in current weather vertical [#1499](https://github.com/MichMich/MagicMirror/issues/1499).
+- Added humidity support to nunjuck unit filter.
+- Do not display degree symbol for temperature in Kelvin [#1503](https://github.com/MichMich/MagicMirror/issues/1503).
+
 ## [2.6.0] - 2019-01-01
 
 ℹ️ **Note:** This update uses new dependencies. Please update using the following command: `git pull && npm install`. If you are having issues updating, make sure you are running the latest version of Node.

modules/default/weather/current.njk

@@ -4,63 +4,68 @@
             <span class="wi wi-strong-wind dimmed"></span>
             <span>
                 {% if config.useBeaufort %}
-                    {{current.beaufortWindSpeed() | round}}
+                    {{ current.beaufortWindSpeed() | round }}
                 {% else %}
-                    {{current.windSpeed | round}}
+                    {{ current.windSpeed | round }}
                 {% endif %}
-
                 {% if config.showWindDirection %}
                     <sup> 
                         {% if config.showWindDirectionAsArrow %}
-                            <i class="fa fa-long-arrow-up" style="transform:rotate({{current.windDirection}}deg);"></i>    
+                            <i class="fa fa-long-arrow-up" style="transform:rotate({{ current.windDirection }}deg);"></i>
                         {% else %}
-                            {{current.cardinalWindDirection() | translate}}
+                            {{ current.cardinalWindDirection() | translate }}
                         {% endif %}
                         &nbsp;
                     </sup>
                 {% endif %}
             </span>
             {% if config.showHumidity and current.humidity %}
-                <span>{{ current.humidity }}</span><sup>&nbsp;<i class="wi wi-humidity humidityIcon"></i></sup>
+                <span>{{ current.humidity | decimalSymbol }}</span><sup>&nbsp;<i class="wi wi-humidity humidityIcon"></i></sup>
             {% endif %}
-            <span class="wi dimmed wi-{{current.nextSunAction()}}"></span>
+            <span class="wi dimmed wi-{{ current.nextSunAction() }}"></span>
             <span>
                 {% if current.nextSunAction() == "sunset" %}
-                    {{current.sunset | formatTime}}
+                    {{ current.sunset | formatTime }}
                 {% else %}
-                    {{current.sunrise | formatTime}}
+                    {{ current.sunrise | formatTime }}
                 {% endif %}
             </span>
         </div>
     {% endif %}
     <div class="large light">
         <span class="wi weathericon wi-{{current.weatherType}}"></span>
         <span class="bright">
-            {{current.temperature | roundValue | unit("temperature")}}
+            {{ current.temperature | roundValue | unit("temperature") | decimalSymbol }}
         </span>
+    </div>
+    <div class="normal light indoor">
         {% if config.showIndoorTemperature and indoor.temperature %}
-            <span class="fa fa-home"></span>
-            <span class="bright">
-                {{indoor.temperature | roundValue | unit("temperature")}}
-            </span>
+            <div>
+                <span class="fa fa-home"></span>
+                <span class="bright">
+                    {{ indoor.temperature | roundValue | unit("temperature") | decimalSymbol }}
+                </span>
+            </div>
         {% endif %}
         {% if config.showIndoorHumidity and indoor.humidity %}
-            <span class="fa fa-tint"></span>
-            <span class="bright">
-                {{indoor.humidity | roundValue}}%
-            </span>
+            <div>
+                <span class="fa fa-tint"></span>
+                <span class="bright">
+                    {{ indoor.humidity | roundValue | unit("humidity") | decimalSymbol }}
+                </span>
+            </div>
         {% endif %}
     </div>
     {% if config.showFeelsLike and not config.onlyTemp %}
         <div class="normal medium">
             <span class="dimmed">
-                {{ "FEELS" | translate }} {{ current.feelsLike() | roundValue | unit("temperature") }}
+                {{ "FEELS" | translate }} {{ current.feelsLike() | roundValue | unit("temperature") | decimalSymbol }}
             </span>
         </div>
     {% endif %}
 {% else %}
     <div class="dimmed light small">
-        {{"LOADING" | translate}}
+        {{ "LOADING" | translate }}
     </div>
 {% endif %}
 

modules/default/weather/forecast.njk

@@ -1,25 +1,27 @@
 {% if forecast %}
-    <table class="{{config.tableClass}}">
+    <table class="{{ config.tableClass }}">
         {% for f in forecast %}
             <tr {% if config.colored %}class="colored"{% endif %}>
-                <td class="day">{{f.date.format('ddd')}}</td>
-                <td class="bright weather-icon"><span class="wi weathericon wi-{{f.weatherType}}"></span></td>
+                <td class="day">{{ f.date.format('ddd') }}</td>
+                <td class="bright weather-icon"><span class="wi weathericon wi-{{ f.weatherType }}"></span></td>
                 <td class="align-right bright max-temp">
-                    {{f.maxTemperature | roundValue | unit("temperature")}}
+                    {{ f.maxTemperature | roundValue | unit("temperature") }}
                 </td>
                 <td class="align-right min-temp">
-                    {{f.minTemperature | roundValue | unit("temperature")}}
+                    {{ f.minTemperature | roundValue | unit("temperature") }}
                 </td>
                 {% if config.showRainAmount %}
                     <td class="align-right bright rain">
-                        {{f.rain | unit("rain")}}
+                        {{ f.rain | unit("rain") }}
                     </td>
                 {% endif %}
             </tr>
         {% endfor %}
     </table>
 {% else %}
-    {{"LOADING" | translate}}
+    <div class="dimmed light small">
+        {{ "LOADING" | translate }}
+    </div>
 {% endif %}
 
 <!-- Unclomment the line below to see the contents of the `current` object. -->

modules/default/weather/weather.css

@@ -36,6 +36,10 @@
   padding-right: 0;
 }
 
+.weather tr .weathericon {
+  line-height: 25px;
+}
+
 .weather tr.colored .min-temp {
   color: #bcddff;
 }

modules/default/weather/weather.js

@@ -30,6 +30,7 @@ Module.register("weather",{
 		lang: config.language,
 		showHumidity: false,
 		degreeLabel: false,
+		decimalSymbol: ".",
 		showIndoorTemperature: false,
 		showIndoorHumidity: false,
 
@@ -184,7 +185,9 @@ Module.register("weather",{
 
 		this.nunjucksEnvironment().addFilter("unit", function (value, type) {
 			if (type === "temperature") {
-				value += "°";
+				if (this.config.units === "metric" || this.config.units === "imperial") {
+					value += "°";
+				}
 				if (this.config.degreeLabel) {
 					if (this.config.units === "metric") {
 						value += "C";
@@ -200,6 +203,8 @@ Module.register("weather",{
 				} else {
 					value = `${value.toFixed(2)} ${this.config.units === "imperial" ? "in" : "mm"}`;
 				}
+			} else if (type === "humidity") {
+				value += "%"
 			}
 
 			return value;
@@ -208,5 +213,9 @@ Module.register("weather",{
 		this.nunjucksEnvironment().addFilter("roundValue", function(value) {
 			return this.roundValue(value);
 		}.bind(this));
+
+		this.nunjucksEnvironment().addFilter("decimalSymbol", function(value) {
+			return value.replace(/\./g, this.config.decimalSymbol);
+		}.bind(this));
 	}
 });