Refactored rudibarani's pull request and added weather update broadcast

jclarke0000 · Dec 2, 2018 · cd48368 · cd48368
1 parent 020334f
commit cd48368
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 24 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/MMM-DarkSkyForecast.css b/MMM-DarkSkyForecast.css
@@ -77,19 +77,11 @@
   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 Header */
+
+.MMM-DarkSkyForecast .module-header.forecast-header {
+  margin-bottom: 0;
 }
 
 /* ------------ Forecast ------------ */
@@ -107,6 +99,10 @@
   border-top: solid 1px #222;
 }
 
+.MMM-DarkSkyForecast .wrapper.with-forecast-header.tiled .forecast-container {
+  border-top: none;
+}
+
 .MMM-DarkSkyForecast .wrapper.tiled .forecast-container .forecast-item {
   flex-grow: 1;
   flex-shrink: 1;
@@ -174,12 +170,18 @@
   width: 100%;
   font-size: 17px;
   line-height: 1;
+  border-bottom: solid 1px #222;
 }
 
 .MMM-DarkSkyForecast .wrapper.table .forecast-container .forecast-item,
 .MMM-DarkSkyForecast .wrapper.table .forecast-container .header-row {
   display: table-row;
-  border-bottom: solid 1px #222;  
+  border-top: solid 1px #222;
+}
+
+.MMM-DarkSkyForecast .wrapper.with-forecast-header.table .forecast-container > div:first-child,
+.MMM-DarkSkyForecast .wrapper.table .forecast-container .header-row {
+  border-top: none;
 }
 
 .MMM-DarkSkyForecast .wrapper.table .forecast-container .header-row .date-time-header {
@@ -196,12 +198,17 @@
   height: 40px;
 }
 
+
+
 .MMM-DarkSkyForecast .wrapper.table .forecast-container .header-row > span {
-  height: 30px;
+  height: 32px;
   font-size: 14px;
   text-transform: uppercase;
+  vertical-align: bottom;
+  padding-bottom: 2px;
 }
 
+
 .MMM-DarkSkyForecast .wrapper.table .forecast-container .forecast-item > span:first-child {
   text-align: left;
 }

diff --git a/MMM-DarkSkyForecast.js b/MMM-DarkSkyForecast.js
@@ -10,7 +10,7 @@ Module.register("MMM-DarkSkyForecast", {
     showCurrentConditions: true,
     showExtraCurrentConditions: true,
     showSummary: true,
-    forecastTableHeaderText: '',
+    forecastHeaderText: "",
     showForecastTableColumnHeaderIcons: true,
     showHourlyForecast: true,
     hourlyForecastInterval: 3,
@@ -134,6 +134,9 @@ Module.register("MMM-DarkSkyForecast", {
       }
       this.updateDom(this.config.updateFadeSpeed);
 
+      //broadcast weather update
+      this.sendNotification("DARK_SKY_FORECAST_WEATHER_UPDATE", payload);
+
       //start icon playback
       if (this.config.useAnimatedIcons) {
         var self = this;
@@ -153,7 +156,8 @@ Module.register("MMM-DarkSkyForecast", {
     wrapper.className = "wrapper " + this.config.forecastLayout + 
       " icon-set-" + this.config.iconset +
       (this.config.colored ? " colored" : "") +
-      (this.config.showInlineIcons ? " inline-icons" : "");
+      (this.config.showInlineIcons ? " inline-icons" : "") +
+      (this.config.forecastHeaderText != "" ? " with-forecast-header" : "");
 
     if (this.weatherData == null) {
       var loading = document.createElement("div");
@@ -310,11 +314,11 @@ Module.register("MMM-DarkSkyForecast", {
       wrapper.appendChild(summaryWrapper);
     }
 
-    //forecastTableHeaderText
-    if (this.config.forecastTableHeaderText != "") {
-      var forecastHeader = document.createElement("div");
-      forecastHeader.className = "module-header";
-      forecastHeader.innerHTML = this.config.forecastTableHeaderText;
+    //forecastHeaderText
+    if (this.config.forecastHeaderText != "") {
+      var forecastHeader = document.createElement("header");
+      forecastHeader.className = "module-header forecast-header";
+      forecastHeader.innerHTML = this.config.forecastHeaderText;
       wrapper.appendChild(forecastHeader);
     }
 

diff --git a/README.md b/README.md
@@ -83,11 +83,11 @@ Find out your latitude and longitude here:
     </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>
+      <td>Show a header above the forecast display.<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>
+      <td>Whether to show icons column headers on 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>
@@ -155,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>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>
+      <td>How you want the time formatted for hourly forecast display.  Accepts any valid moment.js format (https://momentjs.com/docs/#/displaying/format/). For example, specify short 24h format with <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>
@@ -194,6 +194,12 @@ Find out your latitude and longitude here:
 
 ![Icon Sets](icons/iconsets.png?raw=true "Icon Sets")
 
+
 ## Layouts
 
 ![Layouts](/../screenshots/forecast-layouts.png?raw=true "Layouts")
+
+
+## For Module Developers
+
+This module broadcasts a notification when it recieves a weather update.  The notification is `DARK_SKY_FORECAST_WEATHER_UPDATE` and the payload contains Dark Sky's JSON weather forecast object.  For details on the weather object, see https://darksky.net/dev/docs.