Added tabs and data for other campuses (Closes #28)

weather/client/views/home/home.html

@@ -9,39 +9,19 @@
         </div>
         <!-- Tab Bar Container , and Tab links -->
         <div class="mdl-layout__tab-bar mdl-js-ripple-effect header-bg" style="background: #006633;">
-            <a id="fairfax-tab-button" 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 id="fairfax-tab-button" href="#weather" class="mdl-layout__tab is-active">Fairfax</a>
+            <a id="arlington-tab-button" href="#weather" class="mdl-layout__tab">Arlington</a>
+            <a id="scitech-tab-button" href="#weather" class="mdl-layout__tab">SciTech</a>
+            <a id="korea-tab-button" href="#weather" class="mdl-layout__tab">Mason Korea</a>
         </div>
       </header>
         <!-- MDL Layout Header -->
       <main class="mdl-layout__content">
-        <!-- "is-active" class to set the default active tab -->
-        <section class="mdl-layout__tab-panel is-active" id="fairfax">
+        <section class="mdl-layout__tab-panel is-active" id="weather">
           <div class="page-content">
             <div class="page-content">{{> weather}}</div>
           </div>
         </section>
-<!--
-        <section class="mdl-layout__tab-panel" id="arlington">
-          <div class="page-content">
-            <div class="page-content">{{> weather}}</div>
-          </div>
-        </section>
-
-        <section class="mdl-layout__tab-panel" id="scitech">
-          <div class="page-content">
-           <div class="page-content">{{> weather}}</div>
-          </div>
-        </section>
-
-        <section class="mdl-layout__tab-panel" id="korea">
-          <div class="page-content">
-            <div class="page-content">{{> weather}}</div>
-          </div>
-        </section>
-    -->
         {{> footer}}
       </main>
     </div>

weather/client/views/home/home.js

+Template.home.onRendered(function(){
+
+  // Add listeners to each tab to change the current location.
+  // When locationName changes, the weather data is obained for the new location.
+  //TODO: Use Meteor's built in event system (see below)
+  document.getElementById('fairfax-tab-button').addEventListener('click', function(){
+    Session.set('locationName', 'FAIRFAX');
+  });
+  document.getElementById('arlington-tab-button').addEventListener('click', function(){
+    Session.set('locationName', 'ARLINGTON');
+  });
+  document.getElementById('scitech-tab-button').addEventListener('click', function(){
+    Session.set('locationName', 'SCITECH');
+  });
+  document.getElementById('korea-tab-button').addEventListener('click', function(){
+    Session.set('locationName', 'KOREA');
+  });
+
+});
+
+/*
+  This is the proper way to handle event listeners in Meteor, but
+  for some reason the events don't fire this way. Can't find a fix, so I
+  implmented them using normal JavaScript + HTML seen above.
+
 Template.home.events({
-  'click #fairfax-tab-button' (event) {
+  'click #fairfax-tab-button': function() {
+    Session.set('locationName', 'FAIRFAX');
   },
-  'click a.mdl-layout__tab-bar' (event) {
-    console.log(event);
+  'click #arlington-tab-button': function() {
+    Session.set('locationName', 'ARLINGTON');
+  },
+  'click #scitech-tab-button': function() {
+    Session.set('locationName', 'SCITECH');
+  },
+  'click #korea-tab-button': function() {
+    Session.set('locationName', 'KOREA');
   }
 });
-Template.home.onRendered(function() {
-  document.getElementById("#fairfax-tab-button").addEventListener("click", function(){
-  });
-});
+*/

weather/client/views/weather/weather.js

@@ -101,7 +101,7 @@ Template.weather.helpers({
   },
   getDayNameFromTime: function(timestamp) {
       var given = new Date(timestamp * 1000);
-      console.log(given);
+      //console.log(given);
       var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
       return days[ given.getDay() ];
   },
@@ -147,13 +147,16 @@ Template.weather.helpers({
 
 var weatherData = {};
 var weatherDataDependency = new Tracker.Dependency;
+
 Template.weather.onCreated(function(){
+  // Set default location to fairfax
   Session.set("locationName", "FAIRFAX");
+  // Function that is ran when any dependencies change
   Tracker.autorun(function () {
     var locName = Session.get("locationName");
     var location = LOCATIONS[locName];
-
-    Meteor.call('getWeather', location.lat, location.long, function(error, result) {
+    // Get weather for current location
+    Meteor.call('getWeather', location, function(error, result) {
       weatherData = result;
       document.title = "SRCT Weather • "+Math.round(result.data.currently.temperature)+"° F"
       weatherDataDependency.changed();

weather/server/methods.js

@@ -6,8 +6,8 @@
  * https://guide.meteor.com/methods.html
  */
 Meteor.methods({
-  getWeather: function(latitude, longitude) {
-    return getWeather(latitude, longitude);
+  getWeather: function(location) {
+    return getWeather(location);
   }
 });
 
@@ -15,21 +15,23 @@ Meteor.methods({
  * Gets the most recent wether data based on the given Lat. and Long. and then
  * returns it. Only gets new data if we have left the acceptable cache time.
  *
- * @param latitude - A long that represents the Lat. of the weather data we
- *                   want.
- * @param longitude - A long that represents the Long. of the weather data we
- *                    want.
+ * @param location - A dictionary from locations.js containing latitude, longitude,
+ *                   and name of the campus we want to retrive the weather for.
+ *
  * @return weatherData - An object holding the API call data and retrieval time.
  */
-function getWeather(latitude, longitude) {
-  var curWeatherData = WeatherData.find({}, {sort: {retrievalTime: -1, limit: 1}}).fetch()[0];
+function getWeather(location) {
+  // Query the database for the weather data at given location
+  var curWeatherData = WeatherData.find({ locationName: { $eq: location.name }}, {sort: {retrievalTime: -1, limit: 1}}).fetch()[0];
 
   // Check if there is data at all
   if(curWeatherData === undefined) {
     console.log("Getting first time data.")
-    var weatherData = getWeatherFromAPI(latitude, longitude);
+    // If not, get data from API
+    var weatherData = getWeatherFromAPI(location.lat, location.long);
+    // Insert data into database
     WeatherData.insert(weatherData);
-    return curWeatherData;
+    return weatherData;
   }
 
   // Get current time
@@ -93,9 +95,27 @@ function getWeatherFromAPI(latitude, longitude) {
     var date = new Date();
     var linuxTime = date.getTime(); // convert millis to seconds
 
+    // Find which location the data is for
+    var location = "undefined";
+    switch(latitude) {
+      case LOCATIONS.FAIRFAX.lat:
+        location = LOCATIONS.FAIRFAX.name;
+        break;
+      case LOCATIONS.ARLINGTON.lat:
+        location = LOCATIONS.ARLINGTON.name;
+        break;
+      case LOCATIONS.SCITECH.lat:
+        location = LOCATIONS.SCITECH.name;
+        break;
+      case LOCATIONS.KOREA.lat:
+        location = LOCATIONS.KOREA.name;
+        break;
+    }
+
     // Store the retrieval time with the data. We shouldn't get the same data
     // every time someone goes to the page.
     var weatherData = {
+      locationName: location,
       retrievalTime: linuxTime,
       data: result.data,
       error: false