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