weather.html 4.78 KB
Newer Older
1

Zach's avatar
Zach committed
2
<template name="weather">
Zach's avatar
Zach committed
3
    <div class="mdl-grid">
Zach Knox's avatar
Zach Knox committed
4
5
6
7
8
9
10
11
12
13
14
15
        {{#if weatherData.alerts.title}}
        <div class="mdl-cell mdl-cell--12-col">
            <div class="alert-card weather-card mdl-card mdl-shadow--4dp">
                <div class="mdl-card__title">
                    <h1 class="mdl-card__title-text"><a href="{{weatherData.alerts.url}}">{{weatherData.alerts.title}}</a> until {{formatTimestamp weatherData.alerts.expires}}<br /></h1>
                </div>
                <div class="mdl-card__supporting-text">
                    {{waatherData.alerts.description}}
                </div>
            </div>
        </div>
        {{/if}}
16
        <div class="mdl-cell mdl-cell--12-col">
Zach Knox's avatar
Zach Knox committed
17
            <div class="{{getColorStyle (roundNumber weatherData.data.currently.temperature)}} weather-card mdl-card mdl-shadow--4dp">
Zach's avatar
Zach committed
18
                <div class="mdl-card__title">
Zach's avatar
tab bar    
Zach committed
19
                    <h1 class="mdl-card__title-text">Current Conditions<br /></h1>
Zach's avatar
Zach committed
20
21
                </div>
                <div class="mdl-card__supporting-text">
Manuel Gauto's avatar
Manuel Gauto committed
22
                    <h4>{{weatherData.data.currently.summary}}</h4>
Zach's avatar
Zach committed
23
                    <div class="temp-size">
24
                        <i class="wi {{convertIconName weatherData.data.currently.icon}} wi-fw"></i> {{roundNumber weatherData.data.currently.temperature}}<i class="wi wi-fahrenheit"></i>
Zach's avatar
Zach committed
25
                    </div>
Zach's avatar
Zach committed
26
                    <div class="detail-size">
Manuel Gauto's avatar
Manuel Gauto committed
27
                        Feels like {{roundNumber weatherData.data.currently.apparentTemperature}}<i class="wi wi-fahrenheit"></i>
Zach Knox's avatar
Zach Knox committed
28
                        <br /><br /><i class="wi wi-{{precipitationIcons weatherData.data.currently.precipProbability}}"></i> {{precipitationWords weatherData.data.currently.precipProbability}}  &nbsp;&nbsp;&nbsp;<i class="wi wi-wind wi-towards-{{windDirectionClass}}"></i> {{roundNumber weatherData.data.currently.windSpeed}}mph {{windDirection}}
29
                        <!-- TODO: Change the icon based on time -->
Manuel Gauto's avatar
Manuel Gauto committed
30
                        <br /><br /><i class="wi wi-sunset"></i> {{formatTimestamp weatherData.data.currently.time}}
Zach's avatar
Zach committed
31
                    </div>
Zach's avatar
Zach committed
32
33
34
                </div>
            </div>
        </div>
Zach's avatar
Zach committed
35
        <div class="hourly-table mdl-cell mdl-cell--6-col mdl-shadow--4dp table-full-width">
Zach's avatar
Zach committed
36
37
38
            <table class="mdl-data-table mdl-js-data-table">
                <thead>
                    <tr>
Zach's avatar
Zach committed
39
                        <th class="mdl-data-table__cell--non-numeric table-full-width">Hourly Forcast</th>
Zach's avatar
Zach committed
40
41
42
43
                        <th class="mdl-data-table__cell--non-numeric">Condition</th>
                        <th class="mdl-data-table__cell--non-numeric"><i class="wi wi-fahrenheit"></i></th>
                        <th class="mdl-data-table__cell--non-numeric">Precipitation</th>
                        <th class="mdl-data-table__cell--non-numeric">Wind</th>
Zach's avatar
Zach committed
44
45
46
                    </tr>
                </thead>
                <tbody>
47
48
49
50
51
52
53
54
55
                  {{#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}}
Zach's avatar
Zach committed
56
57
58
                </tbody>
            </table>
        </div>
59
        {{#each dayWeather in weatherData.data.daily.data}}
Zach's avatar
Zach committed
60
        <div class="mdl-cell mdl-cell--4-col">
Zach Knox's avatar
Zach Knox committed
61
            <div class="{{getColorStyle (roundNumber dayWeather.temperatureMax)}} weather-card mdl-card mdl-shadow--4dp">
Zach's avatar
Zach committed
62
                <div class="mdl-card__title">
63
                    <h1 class="mdl-card__title-text">{{getDayNameFromTime dayWeather.time}}<br /></h1>
Zach's avatar
Zach committed
64
65
                </div>
                <div class="mdl-card__supporting-text">
66
                    <h5>{{dayWeather.summary}}</h5>
Zach's avatar
Zach committed
67
                    <div class="oof-size">
68
                        <i class="wi {{convertIconName dayWeather.icon}} wi-fw"></i> {{roundNumber dayWeather.temperatureMax}}<i class="wi wi-fahrenheit"></i> / {{roundNumber dayWeather.temperatureMin}}<i class="wi wi-fahrenheit"></i>
Zach's avatar
Zach committed
69
                    </div>
70
71
                    <div class="detail-size">
                        <br />
72
                        <i class="wi wi-{{precipitationIcons dayWeather.precipProbability}}"></i> {{precipitationWords dayWeather.precipProbability}}
73
                        <br /><br />
74
75
76
77
                    </div>
                </div>
            </div>
        </div>
78
79
        {{/each}}

80
81
    </div>
</template>