Commit 8638d616 authored by Manuel Gauto's avatar Manuel Gauto

Guess who's back.

parent 1e331099
......@@ -5,3 +5,7 @@
<link rel="stylesheet" href="weather.css">
<link rel="icon" type="image/x-icon" href="lib/favicon.ico" />
</head>
<body>
{{> home}}
</body>
// client entry point, imports all client code
import { Template } from 'meteor/templating';
import '../imports/ui/body.js';
import './main.html';
<template name="footer">
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">SRCT Weather</div>
</div>
<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.
<br />Read and <a href="https://git.gmu.edu//srct/weather/milestones/">contribute</a>
to our <a href="https://www.gnu.org/licenses/quick-guide-gplv3.html">freely-licensed</a>
<a href="http://git.gmu.edu/srct/weather/" target="_blank">source code</a>.
</div>
</footer>
</template>
<template name="home">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Weather</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#fairfax" class="mdl-layout__tab is-active locationTab">Fairfax</a>
<a href="#arlington" class="mdl-layout__tab locationTab">Arlington</a>
<a href="#scitech" class="mdl-layout__tab locationTab">SciTech</a>
<a href="#korea" class="mdl-layout__tab locationTab">Mason Korea</a>
<a href="#saudi" class="mdl-layout__tab locationTab">Ras-Al-Khaimah</a>
</div>
</header>
<main class="mdl-layout__content">
<div class="bg">
<section class="mdl-layout__tab-panel is-active" id="fairfax">
<div class="page-content">{{> weather}}</div>
</section>
<section class="mdl-layout__tab-panel" id="arlington">
<div class="page-content">{{> weather}}</div>
</section>
<section class="mdl-layout__tab-panel" id="scitech">
<div class="page-content">{{> weather}}</div>
</section>
<section class="mdl-layout__tab-panel" id="korea">
<div class="page-content">{{> weather}}</div>
</section>
<section class="mdl-layout__tab-panel" id="saudi">
<div class="page-content">{{> weather}}</div>
</section>
</div>
{{> footer}}
</main>
</div>
</template>
Template.home.events({
'click .locationTab' (event) {
console.log(event);
}
});
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Weather</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#fairfax" class="mdl-layout__tab is-active">Fairfax</a>
<a href="#arlington" class="mdl-layout__tab">Arlington</a>
<a href="#scitech" class="mdl-layout__tab">SciTech</a>
<a href="#korea" class="mdl-layout__tab">Mason Korea</a>
<a href="#saudi" class="mdl-layout__tab">Ras-Al-Khaimah</a>
</div>
</header>
<main class="mdl-layout__content">
<div class="bg">
<section class="mdl-layout__tab-panel is-active" id="fairfax">
<div class="page-content">{{> weather}}</div>
</section>
<section class="mdl-layout__tab-panel" id="arlington">
<div class="page-content">{{> weather}}</div>
</section>
<section class="mdl-layout__tab-panel" id="scitech">
<div class="page-content">{{> weather}}</div>
</section>
<section class="mdl-layout__tab-panel" id="korea">
<div class="page-content">{{> weather}}</div>
</section>
<section class="mdl-layout__tab-panel" id="saudi">
<div class="page-content">{{> weather}}</div>
</section>
</div>
{{> footer}}
</main>
</div>
</body>
<template name="weather">
<div class="mdl-grid">
......@@ -45,14 +7,14 @@
<h1 class="mdl-card__title-text">Current Conditions<br /></h1>
</div>
<div class="mdl-card__supporting-text">
<h4>Partly Cloudy</h4>
<h4>{{weatherData.data.currently.summary}}</h4>
<div class="temp-size">
<i class="wi wi-day-cloudy wi-fw"></i> 76<i class="wi wi-fahrenheit"></i>
<i class="wi wi-day-cloudy wi-fw"></i> {{roundNumber weatherData.data.currently.temperature}}<i class="wi wi-fahrenheit"></i>
</div>
<div class="detail-size">
Feels like 72<i class="wi wi-fahrenheit"></i>
<br /><br /><i class="wi wi-cloud"></i> No Rain today. <i class="wi wi-wind wi-towards-nne"></i> 5mph NNE
<br /><br /><i class="wi wi-sunset"></i> 7:22 PM EDT
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-sunset"></i> {{formatTimestamp weatherData.data.currently.time}}
</div>
</div>
</div>
......@@ -194,17 +156,3 @@
</div>
</div>
</template>
<template name="footer">
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">SRCT Weather</div>
</div>
<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.
<br />Read and <a href="https://git.gmu.edu//srct/weather/milestones/">contribute</a>
to our <a href="https://www.gnu.org/licenses/quick-guide-gplv3.html">freely-licensed</a>
<a href="http://git.gmu.edu/srct/weather/" target="_blank">source code</a>.
</div>
</footer>
</template>
Template.weather.helpers({
weatherData: function() {
weatherDataDependency.depend();
return weatherData;
},
precipitationWords: function() {
weatherDataDependency.depend();
var precipProb = weatherData.data.currently.precipProbability;
if(precipProb === 0) return "No Rain Expected";
if(precipProb > 95) return "Bring an Umbrella";
if(precipProb > 100) return "Wat."; //Wait.
return precipProb+"%"; // Otherwise, return the percentage
},
windDirection: function() {
weatherDataDependency.depend();
return degreesToWords(weatherData.data.currently.windBearing);
},
windDirectionClass: function() {
weatherDataDependency.depend();
return degreesToWords(weatherData.data.currently.windBearing).toLowerCase();
},
roundNumber: function(number) {
return Math.round(number);
},
formatTimestamp(timestamp) {
var d = new Date();
return d.toLocaleString("en-us", { hour: 'numeric', minute: 'numeric', timeZoneName:'short'});
}
});
var weatherData = {};
var weatherDataDependency = new Tracker.Dependency;
Template.weather.onCreated(function(){
Meteor.call('getWeather', 38.830295, -77.307717, function(error, result) {
weatherData = result;
weatherDataDependency.changed();
});
});
//Converts the bearing to a compass direction
function degreesToWords(d) {
if (typeof d !== 'number' || isNaN(d)) {
return -1;
}
// keep within the range: 0 <= d < 360
d = d % 360;
if (11.25 <= d && d < 33.75) {
return "NNE";
} else if (33.75 <= d && d < 56.25) {
return "NE";
} else if (56.25 <= d && d < 78.75) {
return "ENE";
} else if (78.75 <= d && d < 101.25) {
return "E";
} else if (101.25 <= d && d < 123.75) {
return "ESE";
} else if (123.75 <= d && d < 146.25) {
return "SE";
} else if (146.25 <= d && d < 168.75) {
return "SSE";
} else if (168.75 <= d && d < 191.25) {
return "S";
} else if (191.25 <= d && d < 213.75) {
return "SSW";
} else if (213.75 <= d && d < 236.25) {
return "SW";
} else if (236.25 <= d && d < 258.75) {
return "WSW";
} else if (258.75 <= d && d < 281.25) {
return "W";
} else if (281.25 <= d && d < 303.75) {
return "WNW";
} else if (303.75 <= d && d < 326.25) {
return "NW";
} else if (326.25 <= d && d < 348.75) {
return "NNW";
} else {
return "N";
}
};
WeatherData = new Meteor.Collection("weatherdata");
if(Meteor.isClient) {
Meteor.subscribe("weatherdata");
}
if(Meteor.isServer) {
Meteor.publish("weatherdata", function () {
return WeatherData.find();
});
WeatherData.deny({
//No one is allowed to insert but server
insert: function () {
return false;
}
});
}
import './body.html';
for(var key in LOCATIONS) {
var current = LOCATIONS[key];
console.log(current.name);
Meteor.call('weatherDataForLoc', current.lat, current.long, function(err, res){
console.log(res);
//Sends the result of the API call to the browser console, will change
});
}
//Template file for secrets.js
//Duplicate this file and name it 'secrets.js'
//Replace 'YOUR_API_KEY_HERE' with your Forcast.io API key
//You can get an API key at https://darksky.net/dev/
//(Dark Sky's API was formerly called Forecast.io)
Meteor.startup(function () {
process.env.API_KEY = 'YOUR_API_KEY_HERE';
});
Meteor.methods({
getWeather: function(latitude, longitude) {
return getWeather(latitude, longitude);
}
});
function getWeather(latitude, longitude) {
var curWeatherData = WeatherData.find({}, {sort: {retrievalTime: -1, limit: 1}}).fetch()[0];
//Check if there is data at all
if(curWeatherData === undefined) {
var weatherData = getWeatherFromAPI(latitude, longitude);
WeatherData.insert(weatherData);
return curWeatherData;
}
var date = new Date();
var timeDiff = (date.getTime()) - curWeatherData.retrievalTime; //Subtract the data timestamp form cur time to get age
if(timeDiff > Meteor.settings.weatherCacheExpireTime) {
//Data is expired, retrieve again.
console.log("Cache expired. Retrieving...")
var weatherData = getWeatherFromAPI(latitude, longitude);
if(weatherData === undefined) {
//There was an error. Mark the latest record as error state.
curWeatherData.error = true;
//Return it
return curWeatherData;
} else {
//Technically the else isn't needed but it looks nice.
//Save this data.
WeatherData.insert(curWeatherData);
return curWeatherData;
}
} else {
//The data is still valid, return it
return curWeatherData;
}
}
function getWeatherFromAPI(latitude, longitude) {
//Keep the key out of the keybase
var darkskyAPIKey = process.env.DARKSKY_API_KEY;
var urlBase = "https://api.darksky.net/forecast/"+darkskyAPIKey+"/"+latitude+","+longitude
console.log(urlBase);
try {
//Make a blocking call
//I don't think we should add this.unblock() in case that comes up.
var result = HTTP.call("GET", urlBase);
//Get current time
var date = new Date();
var linuxTime = date.getTime(); //convert millis to seconds
//Store the retrieval time with the data. We shouldn't get the same data every time someone goes to the page.
var weatherData = {
retrievalTime: linuxTime,
data: result.data,
error: false
};
//Return it
return weatherData;
} catch (e) {
// Got a network error, time-out or HTTP error in the 400 or 500 range.
console.log(e);
return undefined;
}
}
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