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
SRCT
weather
Commits
87db39f3
Commit
87db39f3
authored
Nov 24, 2016
by
Manuel Gauto
Browse files
Make icons dynamic. Dynamically load hourly forecast.
parent
a6f7b067
Changes
2
Hide whitespace changes
Inline
Side-by-side
weather/client/views/weather/weather.html
View file @
87db39f3
...
...
@@ -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}}
<i
class=
"wi wi-wind wi-towards-{{windDirectionClass}}"
></i>
{{weatherData.data.currently.windSpeed}}mph {{windDirection}}
<br
/><br
/><i
class=
"wi wi-cloud"
></i>
{{precipitationWords}}
<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>
...
...
weather/client/views/weather/weather.js
View file @
87db39f3
...
...
@@ -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
)
}
});
...
...
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