1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
{% extends 'base.html' %}
{% block content %}
<div class=content>
<div class=topbar>
<div class=searchbar>
<form method="post">
{{ form.csrf_token }}
{{ form.location }}
{{ form.submit() }}
</form>
</div>
<div class=location>
<p class=location>
{{ location_data["name"]}}, {{ location_data["admin1"]}}, {{ location_data["country_code"]}}
</p>
</div>
</div>
<div class=current>
{% set is_day = data["current_weather"]["is_day"] %}
{% set weather_code = data["current_weather"]["weathercode"] %}
<div class=current-info>
<div class=current-weather>{{ weather_codes[weather_code] }}</div>
<div class=current-temp> {{ data["current_weather"]["temperature"]}}°F </div>
<div class=current-wind>
Wind: {{ data["current_weather"]["windspeed"] }} MPH
<img class=wind-icon src="/static/icons/directions/{{get_direction_icon(data["current_weather"]["winddirection"])}}.svg">
</div>
<div class=current-sunrise>Sunrise: {{ data["daily"]["sunrise"][0] }} </div>
<div class=current-sunset>Sunset: {{ data["daily"]["sunset"][0] }} </div>
</div>
<div class=current-icon>
<img class=weather-icon src="/static/icons/svg/{{ weather_icons[weather_code][is_day]}}.svg" width=100px height=100px>
</div>
</div>
<div class=forecast-header> <h2 class=forecast-header>Hourly Forecast</h2> </div>
<div class=hourly>
{% for i in range(hour, hour + 48) %}
<div class=hourly-box>
<div class=hourly-info>
<div class=hourly-time><strong>{{ data["hourly"]["time"][i] }}</strong></div>
<div class=hourly-weather>
{{ weather_codes[data["hourly"]["weathercode"][i]] }}
{% if data["hourly"]["weathercode"][i] > 50 %}
({{ data["hourly"]["precipitation"][i] }}in, {{ data["hourly"]["precipitation_probability"][i] }}%)
{% endif %}
</div>
<div class=hourly-temp>{{ data["hourly"]["temperature_2m"][i]}}°F</div>
<div class=hourly-humidity>Humidity: {{ data["hourly"]["relativehumidity_2m"][i] }}%</div>
<div class=hourly-wind>
Wind: {{ data["hourly"]["windspeed_10m"][i] }}MPH
<img class=wind-icon src="/static/icons/directions/{{get_direction_icon(data["hourly"]["winddirection_10m"][i])}}.svg">
</div>
</div>
<div class=hourly-icon>
{% set time = datetime.datetime.strptime(data["hourly"]["time"][i], "%a %x %I:%M %p") %}
{% set sunrise = datetime.datetime.strptime(data["daily"]["sunrise"][0], "%I:%M %p").replace(year=time.year, month=time.month, day=time.day) %}
{% set sunset = datetime.datetime.strptime(data["daily"]["sunset"][0], "%I:%M %p").replace(year=time.year, month=time.month, day=time.day) %}
{% set is_day = 1 %}
{% if time > sunrise and time < sunset %}
{% set is_day = 0 %}
{% endif %}
{% set weather_code = data["hourly"]["weathercode"][i] %}
<img class=weather-icon src="/static/icons/svg/{{weather_icons[weather_code][is_day]}}.svg" width=100px height=100px>
</div>
</div>
{% endfor %}
</div>
<div class=forecast-header>
<h2 class=forecast-header>Daily Forecast</h2>
</div>
<div class=daily>
{% for i in range(7) %}
<div class=daily-box>
<div class=daily-info>
<div class=daily-time><strong>{{ data["daily"]["time"][i] }}</strong></div>
<div class=daily-weather>
{{ weather_codes[data["daily"]["weathercode"][i]] }}
{% if data["daily"]["weathercode"][i] > 50 %}
({{ data["daily"]["precipitation_sum"][i] }}in, {{ data["daily"]["precipitation_probability_max"][i] }}%)
{% endif %}
</div>
<div class=daily-high>High: {{ data["daily"]["temperature_2m_max"][i] }}°F</div>
<div class=daily-low>Low: {{ data["daily"]["temperature_2m_min"][i] }}°F</div>
<div class=daily-sunrise>Sunrise: {{ data["daily"]["sunrise"][i] }}</div>
<div class=daily-sunset>Sunset: {{ data["daily"]["sunset"][i] }}</div>
</div>
<div class=daily-icon>
{% set weather_code = data["daily"]["weathercode"][i] %}
<img class=weather-icon src="/static/icons/svg/{{ weather_icons[weather_code][0]}}.svg" width=100px height=100px>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
|
