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

Make icons dynamic. Dynamically load hourly forecast.

parent a6f7b067
......@@ -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>
......
......@@ -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)
}
});
......
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