Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Corey Sheldon
weather
Commits
416bb11c
Commit
416bb11c
authored
May 24, 2017
by
Zac Wood
Browse files
Added tabs and data for other campuses (Closes #28)
parent
7d3dc1d0
Changes
4
Hide whitespace changes
Inline
Side-by-side
weather/client/views/home/home.html
View file @
416bb11c
...
...
@@ -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
View file @
416bb11c
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
View file @
416bb11c
...
...
@@ -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
View file @
416bb11c
...
...
@@ -6,8 +6,8 @@
* https://guide.meteor.com/methods.html
*/
Meteor
.
methods
({
getWeather
:
function
(
lati
tude
,
longitude
)
{
return
getWeather
(
lati
tude
,
longitude
);
getWeather
:
function
(
l
oc
ati
on
)
{
return
getWeather
(
l
oc
ati
on
);
}
});
...
...
@@ -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
curW
eatherData
;
return
w
eatherData
;
}
// 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
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment