Commit 87db39f3 authored by Manuel Gauto's avatar Manuel Gauto
Browse files

Make icons dynamic. Dynamically load hourly forecast.

parent a6f7b067
...@@ -9,11 +9,12 @@ ...@@ -9,11 +9,12 @@
<div class="mdl-card__supporting-text"> <div class="mdl-card__supporting-text">
<h4>{{weatherData.data.currently.summary}}</h4> <h4>{{weatherData.data.currently.summary}}</h4>
<div class="temp-size"> <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>
<div class="detail-size"> <div class="detail-size">
Feels like {{roundNumber weatherData.data.currently.apparentTemperature}}<i class="wi wi-fahrenheit"></i> 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}} <br /><br /><i class="wi wi-sunset"></i> {{formatTimestamp weatherData.data.currently.time}}
</div> </div>
</div> </div>
...@@ -31,48 +32,15 @@ ...@@ -31,48 +32,15 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> {{#each hourWeather in getNext12 weatherData.data.hourly.data}}
<td class="mdl-data-table__cell--non-numeric">4 PM</td> <tr>
<td class="mdl-data-table__cell--non-numeric"><i class="wi wi-day-cloudy wi-fw"></i> Partly Cloudy</td> <td class="mdl-data-table__cell--non-numeric">{{formatTimestampToHour hourWeather.time}}</td>
<td>74<i class="wi wi-fahrenheit"></i></td> <td class="mdl-data-table__cell--non-numeric"><i class="wi {{convertIconName hourWeather.icon}} wi-fw"></i> {{hourWeather.summary}}</td>
<td>0%</td> <td>{{roundNumber hourWeather.temperature}}<i class="wi wi-fahrenheit"></i></td>
<td>3mph</td> <td>{{roundNumber hourWeather.precipProbability}}%</td>
</tr> <td>{{roundNumber hourWeather.windSpeed}}mph</td>
<tr> </tr>
<td class="mdl-data-table__cell--non-numeric">5 PM</td> {{/each}}
<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>
</tbody> </tbody>
</table> </table>
</div> </div>
......
...@@ -4,6 +4,7 @@ Template.weather.helpers({ ...@@ -4,6 +4,7 @@ Template.weather.helpers({
if(weatherData === undefined) return "..."; if(weatherData === undefined) return "...";
return weatherData; return weatherData;
}, },
//Convert precipitation percentage to words
precipitationWords: function() { precipitationWords: function() {
weatherDataDependency.depend(); weatherDataDependency.depend();
if(weatherData === undefined) return "..."; if(weatherData === undefined) return "...";
...@@ -13,25 +14,75 @@ Template.weather.helpers({ ...@@ -13,25 +14,75 @@ Template.weather.helpers({
if(precipProb > 100) return "Wat."; //Wait. if(precipProb > 100) return "Wat."; //Wait.
return precipProb+"%"; // Otherwise, return the percentage return precipProb+"%"; // Otherwise, return the percentage
}, },
//Converts degrees to words
windDirection: function() { windDirection: function() {
weatherDataDependency.depend(); weatherDataDependency.depend();
if(weatherData === undefined) return "..."; if(weatherData === undefined) return "...";
return degreesToWords(weatherData.data.currently.windBearing); return degreesToWords(weatherData.data.currently.windBearing);
}, },
//Gets the class name to be used by the wind icon
windDirectionClass: function() { windDirectionClass: function() {
weatherDataDependency.depend(); weatherDataDependency.depend();
if(weatherData === undefined) return "..."; if(weatherData === undefined) return "...";
return degreesToWords(weatherData.data.currently.windBearing).toLowerCase(); return degreesToWords(weatherData.data.currently.windBearing).toLowerCase();
}, },
//Rounds a number
roundNumber: function(number) { roundNumber: function(number) {
if(number === undefined) return "..."; if(number === undefined) return "...";
return Math.round(number); return Math.round(number);
}, },
formatTimestamp(timestamp) { //Formats a unix timestamp a full human readable time
formatTimestamp: function(timestamp) {
if(timestamp === undefined) return "..."; if(timestamp === undefined) return "...";
var d = new Date(timestamp*1000); var d = new Date(timestamp*1000);
console.log("GOT: "+timestamp) console.log("GOT: "+timestamp)
return d.toLocaleString("en-us", { hour: 'numeric', minute: 'numeric', timeZoneName:'short'}); 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)
} }
}); });
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment