Commit d6167b70 authored by Zach Knox's avatar Zach Knox

Many little changes. Icons for rain, better card sizes

Still plenty broken though
parent 6a0cfde2
cd weather
meteor --settings config/settings.json
cd ..
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
.out-of-focus-card.mdl-card { .out-of-focus-card.mdl-card {
margin: auto; margin: auto;
width: auto; width: auto;
height: 30px; /* height: 30px; */
} }
.hourly-table.mdl-data-table { .hourly-table.mdl-data-table {
...@@ -47,3 +47,37 @@ ...@@ -47,3 +47,37 @@
.table-full-width { .table-full-width {
width: 100%; width: 100%;
} }
.degree0.mdl-card {
background-color: #000000;
}
.degree10.mdl-card {
background-color: #222222;
}
.degree20.mdl-card {
background-color: #444444;
}
.degree30.mdl-card {
background-color: #666666;
}
.degree40.mdl-card {
background-color: #777777;
}
.degree50.mdl-card {
background-color: #888888;
}
.degree60.mdl-card {
background-color: #999999;
}
.degree70.mdl-card {
background-color: #aaaaaa;
}
.degree80.mdl-card {
background-color: #bbbbbb;
}
.degree90.mdl-card {
background-color: #dddddd;
}
.degree100.mdl-card {
background-color: #ffffff;
}
<template name="footer"> <template name="footer">
<footer class="mdl-mini-footer"> <footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section"> <div class="mdl-mini-footer__left-section">
<div class="mdl-logo">SRCT Weather</div> <div class="mdl-logo">SRCT Weather | Powered by <a href="https://darksky.net/">Dark Sky</a></div>
</div> </div>
<div class="mdl-mini-footer__right-section" style="align: right"> <div class="mdl-mini-footer__right-section" style="align: right">
A project of Mason <a href="http://srct.gmu.edu/"><strong>SRCT</strong></a>, a registered student org. A project of Mason <a href="http://srct.gmu.edu/"><strong>SRCT</strong></a>, a registered student org.
......
<template name="weather"> <template name="weather">
<div class="mdl-grid"> <div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col"> <div class="mdl-cell mdl-cell--12-col">
<div class="weather-card mdl-card mdl-shadow--4dp"> <div class="weather-card mdl-card mdl-shadow--4dp">
<div class="mdl-card__title"> <div class="mdl-card__title">
<h1 class="mdl-card__title-text">Current Conditions<br /></h1> <h1 class="mdl-card__title-text">Current Conditions<br /></h1>
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</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> {{roundNumber weatherData.data.currently.windSpeed}}mph {{windDirection}} <br /><br /><i class="wi wi-{{precipitationIcons}}"></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 --> <!-- 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>
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
</div> </div>
{{#each dayWeather in weatherData.data.daily.data}} {{#each dayWeather in weatherData.data.daily.data}}
<div class="mdl-cell mdl-cell--4-col"> <div class="mdl-cell mdl-cell--4-col">
<div class="out-of-focus-card mdl-card mdl-shadow--4dp"> <div class="{{getColorStyle roundNumber dayWeather.temperatureMax}} out-of-focus-card mdl-card mdl-shadow--4dp">
<div class="mdl-card__title"> <div class="mdl-card__title">
<h1 class="mdl-card__title-text">{{getDayNameFromTime dayWeather.time}}<br /></h1> <h1 class="mdl-card__title-text">{{getDayNameFromTime dayWeather.time}}<br /></h1>
</div> </div>
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
</div> </div>
<div class="detail-size"> <div class="detail-size">
<br /> <br />
{{precipitationWords dayWeather.precipProbability}} <i class="wi wi-{{precipitationIcons dayWeather.precipProbability}}"></i> {{precipitationWords dayWeather.precipProbability}}
<br /><br /> <br /><br />
</div> </div>
</div> </div>
......
...@@ -10,10 +10,22 @@ Template.weather.helpers({ ...@@ -10,10 +10,22 @@ Template.weather.helpers({
if(weatherData === undefined) return "..."; if(weatherData === undefined) return "...";
var precipProb = weatherData.data.currently.precipProbability; var precipProb = weatherData.data.currently.precipProbability;
if(precipProb === 0) return "No Rain Expected"; if(precipProb === 0) return "No Rain Expected";
if(precipProb > 50 && precipProb < 95) return "Potential for Rain";
if(precipProb > 95) return "Bring an Umbrella"; if(precipProb > 95) return "Bring an Umbrella";
if(precipProb > 100) return "Wat."; //Wait. if(precipProb > 100) return "Wat."; //Wait.
return precipProb+"% Precipitation"; // Otherwise, return the percentage return precipProb+"% Precipitation"; // Otherwise, return the percentage
}, },
//Convert precipitation percentage to icons
precipitationIcons: function() {
weatherDataDependency.depend();
if(weatherData === undefined) return "...";
var precipProb = weatherData.data.currently.precipProbability;
if(precipProb === 0) return "cloud";
if(precipProb > 50 && precipProb < 95) return "showers";
if(precipProb > 95) return "umbrella";
if(precipProb > 100) return "alien"; //Wait.
return precipProb+"% Precipitation"; // Otherwise, return the percentage
},
//Converts degrees to words //Converts degrees to words
windDirection: function() { windDirection: function() {
weatherDataDependency.depend(); weatherDataDependency.depend();
...@@ -89,6 +101,42 @@ Template.weather.helpers({ ...@@ -89,6 +101,42 @@ Template.weather.helpers({
var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
return days[ given.getDay() ]; return days[ given.getDay() ];
},
getColorStyle: function(temp) {
var returning = "degree";
if(temp < 10) {
return returning + "0";
}
else if(temp >= 10 && temp < 20) {
return returning + "10";
}
else if(temp >= 20 && temp < 30) {
return returning + "20";
}
else if(temp >= 30 && temp < 40) {
return returning + "30";
}
else if(temp >= 40 && temp < 50) {
return returning + "40";
}
else if(temp >= 50 && temp < 60) {
return returning + "50";
}
else if(temp >= 60 && temp < 70) {
return returning + "60";
}
else if(temp >= 70 && temp < 80) {
return returning + "70";
}
else if(temp >= 80 && temp < 90) {
return returning + "80";
}
else if(temp >= 90 && temp < 100) {
return returning + "90";
}
else if(temp >= 100) {
return returning + "100";
}
} }
}); });
......
{ {
"weatherCacheExpireTime": "3600" "weatherCacheExpireTime": "1800"
} }
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