Merge pull request #1 from rudibarani/master

Added forecast table header and option to hide forecast table column header icons

MMM-DarkSkyForecast.css

@@ -77,6 +77,20 @@
   margin: 15px 0;
 }
 
+/* Module Header below current conditions */
+
+.MMM-DarkSkyForecast .module-header {
+  text-transform: uppercase;
+  font-size: 15px;
+  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
+  font-weight: 400;
+  border-bottom: 1px solid #666;
+  line-height: 15px;
+  padding-bottom: 5px;
+  padding-top: 5px;
+  margin-bottom: 10px;
+  color: #999;
+}
 
 /* ------------ Forecast ------------ */
 

MMM-DarkSkyForecast.js

@@ -10,6 +10,8 @@ Module.register("MMM-DarkSkyForecast", {
     showCurrentConditions: true,
     showExtraCurrentConditions: true,
     showSummary: true,
+    forecastTableHeaderText: '',
+    showForecastTableColumnHeaderIcons: true,
     showHourlyForecast: true,
     hourlyForecastInterval: 3,
     maxHourliesToShow: 3,
@@ -306,16 +308,22 @@ Module.register("MMM-DarkSkyForecast", {
       summaryWrapper.appendChild(summary);
 
       wrapper.appendChild(summaryWrapper);
-
-
+    }
+
+    //forecastTableHeaderText
+    if (this.config.forecastTableHeaderText != "") {
+      var forecastHeader = document.createElement("div");
+      forecastHeader.className = "module-header";
+      forecastHeader.innerHTML = this.config.forecastTableHeaderText;
+      wrapper.appendChild(forecastHeader);
     }
 
     var forecastWrapper;
     if (this.config.showHourlyForecast || this.config.showDailyForecast) {
       forecastWrapper = document.createElement("div");
       forecastWrapper.className = "forecast-container";
 
-      if (this.config.forecastLayout == "table") {
+      if (this.config.forecastLayout == "table" && this.config.showForecastTableColumnHeaderIcons) {
         var headerRow = document.createElement("div");
         headerRow.className = "header-row";
 
@@ -694,4 +702,4 @@ Module.register("MMM-DarkSkyForecast", {
   }
 
 
-});
+});

README.md

@@ -81,6 +81,14 @@ Find out your latitude and longitude here:
       <td><code>showSummary</code></td>
       <td>Whether to show the forecast summary.<br><br><strong>Type</strong> <code>Boolean</code><br>Defaults to <code>true</code></td>
     </tr>
+    <tr>
+      <td><code>forecastTableHeaderText</code></td>
+      <td>Show a header above the forecast table. Can be used instead of the regular header.<br><br><strong>Type</strong> <code>String</code><br>Defaults to <code>''</code></td>
+    </tr>
+    <tr>
+      <td><code>showForecastTableColumnHeaderIcons</code></td>
+      <td>Whether to show icons for the columns of the forecast table.<br><br><strong>Type</strong> <code>Boolean</code><br>Defaults to <code>true</code></td>
+    </tr>
     <tr>
       <td><code>showHourlyForecast</code></td>
       <td>Whether to show hourly forecast information. when set to <code>true</code> it works with the <code>hourlyForecastInterval</code> and <code>maxHourliesToShow</code> parameters.<br><br><strong>Type</strong> <code>Boolean</code><br>Defaults to <code>true</code></td>
@@ -131,7 +139,7 @@ Find out your latitude and longitude here:
     </tr>
     <tr>
       <td><code>forecastLayout</code></td>
-      <td>Can be set to <code>tiled</code> or <code>table</code>. How to display hourly and forecast information.  See below for screenshot examples of each.<br><br><strong>Type</strong> <code>String</code><br>Defaults to <code>true</code></td>
+      <td>Can be set to <code>tiled</code> or <code>table</code>. How to display hourly and forecast information.  See below for screenshot examples of each.<br><br><strong>Type</strong> <code>String</code><br>Defaults to <code>tiled</code></td>
     </tr>
     <tr>
       <td><code>label_maximum</code></td>
@@ -147,7 +155,7 @@ Find out your latitude and longitude here:
     </tr>
     <tr>
       <td><code>label_timeFormat</code></td>
-      <td>How you want the time formatted for hourly forecast display.  Accepts any valid moment.js format (https://momentjs.com/docs/#/displaying/format/).<br><br><strong>Type</strong> <code>String</code><br>Defaults to <code>"h a"</code> (e.g.: <code>9 am</code>)</td>
+      <td>How you want the time formatted for hourly forecast display.  Accepts any valid moment.js format (https://momentjs.com/docs/#/displaying/format/).<br>The short 24h format kann be displayed by <code>"k[h]"</code> (e.g.: <code>14h</code>)<br><br><strong>Type</strong> <code>String</code><br>Defaults to <code>"h a"</code> (e.g.: <code>9 am</code>)</td>
     </tr>
     <tr>
       <td><code>label_days</code></td>
@@ -188,4 +196,4 @@ Find out your latitude and longitude here:
 
 ## Layouts
 
-![Layouts](/../screenshots/forecast-layouts.png?raw=true "Layouts")
+![Layouts](/../screenshots/forecast-layouts.png?raw=true "Layouts")