Make icons dynamic. Dynamically load hourly forecast.

weather/client/views/weather/weather.html

@@ -9,11 +9,12 @@
                 <div class="mdl-card__supporting-text">
                     <h4>{{weatherData.data.currently.summary}}</h4>
                     <div class="temp-size">
-                        <i class="wi wi-day-cloudy wi-fw"></i> {{roundNumber weatherData.data.currently.temperature}}<i class="wi wi-fahrenheit"></i>
+                        <i class="wi {{convertIconName weatherData.data.currently.icon}} wi-fw"></i> {{roundNumber weatherData.data.currently.temperature}}<i class="wi wi-fahrenheit"></i>
                     </div>
                     <div class="detail-size">
                         Feels like {{roundNumber weatherData.data.currently.apparentTemperature}}<i class="wi wi-fahrenheit"></i>
-                        <br /><br /><i class="wi wi-cloud"></i> {{precipitationWords}}  &nbsp;&nbsp;&nbsp;<i class="wi wi-wind wi-towards-{{windDirectionClass}}"></i> {{weatherData.data.currently.windSpeed}}mph {{windDirection}}
+                        <br /><br /><i class="wi wi-cloud"></i> {{precipitationWords}}  &nbsp;&nbsp;&nbsp;<i class="wi wi-wind wi-towards-{{windDirectionClass}}"></i> {{roundNumber weatherData.data.currently.windSpeed}}mph {{windDirection}}
+                        <!-- TODO: Change the icon based on time -->
                         <br /><br /><i class="wi wi-sunset"></i> {{formatTimestamp weatherData.data.currently.time}}
                     </div>
                 </div>
@@ -31,48 +32,15 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr>
-                        <td class="mdl-data-table__cell--non-numeric">4 PM</td>
-                        <td class="mdl-data-table__cell--non-numeric"><i class="wi wi-day-cloudy wi-fw"></i> Partly Cloudy</td>
-                        <td>74<i class="wi wi-fahrenheit"></i></td>
-                        <td>0%</td>
-                        <td>3mph</td>
-                    </tr>
-                    <tr>
-                        <td class="mdl-data-table__cell--non-numeric">5 PM</td>
-                        <td class="mdl-data-table__cell--non-numeric"><i class="wi wi-day-sunny wi-fw"></i>Sunny</td>
-                        <td>72<i class="wi wi-fahrenheit"></i></td>
-                        <td>0%</td>
-                        <td>4mph</td>
-                    </tr>
-                    <tr>
-                        <td class="mdl-data-table__cell--non-numeric">6 PM</td>
-                        <td class="mdl-data-table__cell--non-numeric"><i class="wi wi-night-clear wi-fw"></i>Clear</td>
-                        <td>70<i class="wi wi-fahrenheit"></i></td>
-                        <td>0%</td>
-                        <td>6mph</td>
-                    </tr>
-                    <tr>
-                        <td class="mdl-data-table__cell--non-numeric">7 PM</td>
-                        <td class="mdl-data-table__cell--non-numeric"><i class="wi wi-night-cloudy wi-fw"></i>Partly Cloudy</td>
-                        <td>69<i class="wi wi-fahrenheit"></i></td>
-                        <td>0%</td>
-                        <td>11mph</td>
-                    </tr>
-                    <tr>
-                        <td class="mdl-data-table__cell--non-numeric">8 PM</td>
-                        <td class="mdl-data-table__cell--non-numeric"><i class="wi wi-night-cloudy wi-fw"></i>Partly Cloudy</td>
-                        <td>69<i class="wi wi-fahrenheit"></i></td>
-                        <td>0%</td>
-                        <td>10mph</td>
-                    </tr>
-                    <tr>
-                        <td class="mdl-data-table__cell--non-numeric">9 PM</td>
-                        <td class="mdl-data-table__cell--non-numeric"><i class="wi wi-night-cloudy wi-fw"></i>Partly Cloudy</td>
-                        <td>68<i class="wi wi-fahrenheit"></i></td>
-                        <td>0%</td>
-                        <td>7mph</td>
-                    </tr>
+                  {{#each hourWeather in getNext12 weatherData.data.hourly.data}}
+                      <tr>
+                          <td class="mdl-data-table__cell--non-numeric">{{formatTimestampToHour hourWeather.time}}</td>
+                          <td class="mdl-data-table__cell--non-numeric"><i class="wi {{convertIconName hourWeather.icon}} wi-fw"></i> {{hourWeather.summary}}</td>
+                          <td>{{roundNumber hourWeather.temperature}}<i class="wi wi-fahrenheit"></i></td>
+                          <td>{{roundNumber hourWeather.precipProbability}}%</td>
+                          <td>{{roundNumber hourWeather.windSpeed}}mph</td>
+                      </tr>
+                  {{/each}}
                 </tbody>
             </table>
         </div>

weather/client/views/weather/weather.js

@@ -4,6 +4,7 @@ Template.weather.helpers({
     if(weatherData === undefined) return "...";
     return weatherData;
   },
+  //Convert precipitation percentage to words
   precipitationWords: function() {
     weatherDataDependency.depend();
     if(weatherData === undefined) return "...";
@@ -13,25 +14,75 @@ Template.weather.helpers({
     if(precipProb > 100) return "Wat."; //Wait.
     return precipProb+"%"; // Otherwise, return the percentage
   },
+  //Converts degrees to words
   windDirection: function() {
     weatherDataDependency.depend();
     if(weatherData === undefined) return "...";
     return degreesToWords(weatherData.data.currently.windBearing);
   },
+  //Gets the class name to be used by the wind icon
   windDirectionClass: function() {
     weatherDataDependency.depend();
     if(weatherData === undefined) return "...";
     return degreesToWords(weatherData.data.currently.windBearing).toLowerCase();
   },
+  //Rounds a number
   roundNumber: function(number) {
     if(number === undefined) return "...";
     return Math.round(number);
   },
-  formatTimestamp(timestamp) {
+  //Formats a unix timestamp a full human readable time
+  formatTimestamp: function(timestamp) {
     if(timestamp === undefined) return "...";
     var d = new Date(timestamp*1000);
     console.log("GOT: "+timestamp)
     return d.toLocaleString("en-us", { hour: 'numeric', minute: 'numeric', timeZoneName:'short'});
+  },
+  //Formats unix time to just a 12 hour time
+  formatTimestampToHour: function(timestamp) {
+    if(timestamp === undefined) return "...";
+    var d = new Date(timestamp*1000);
+    console.log("GOT: "+timestamp)
+    return d.toLocaleString("en-us", { hour: 'numeric'});
+  },
+  //Converts icon names from darksky to those that can be used by our css library
+  convertIconName: function(apiIcon) {
+    var iconMap = {
+      "clear-day": "wi-day-sunny",
+      "clear-night": "wi-night-clear",
+      "rain": "wi-rain",
+      "snow": "wi-snow",
+      "sleet": "wi-sleet",
+      "wind": "wi-strong-wind",
+      "fog": "wi-fog",
+      "cloudy": "wi-cloudy",
+      "partly-cloudy-day": "wi-day-cloudy",
+      "partly-cloudy-night": "wi-night-cloudy"
+    }
+    //It is possible for this to be undefined but it should be ok to show no icon
+    var icon = iconMap[apiIcon];
+    return icon;
+  },
+  //Returns current unix time
+  currentLinuxTime: function() {
+    return (new Date).getTime()/1000;
+  },
+  //Used to check if a unix timestamp is in the future
+  timeAfterNow: function(time) {
+    return time>((new Date).getTime()/1000);
+  },
+  //This is used to trim the hourly data array down to the next 12 hours since it return 2 days worth of data
+  getNext12: function(hourDataArray) {
+    //I'm sure this can be cleaned but. oh well.
+    var startIndex = 0;
+    for(var i = 0; i < hourDataArray.length; i++) {
+      if(hourDataArray[i].time > ((new Date).getTime()/1000)) {
+        startIndex = i;
+        break;
+      }
+    }
+    debugger;
+    return hourDataArray.slice(startIndex, startIndex+12)
   }
 });