weather.html 4.04 KB
Newer Older
1

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

68
69
    </div>
</template>