diff --git a/weather/__init__.py b/weather/__init__.py index cf91bbc..be8795b 100644 --- a/weather/__init__.py +++ b/weather/__init__.py @@ -1,6 +1,7 @@ import os from flask import Flask +from datetime import datetime def create_app(test_config=None): app = Flask(__name__, instance_relative_config=True) @@ -19,6 +20,10 @@ def create_app(test_config=None): except OSError: pass + @app.template_filter('format_datetime') + def format_datetime(value, format): + return datetime.strptime(value, "%Y-%m-%d %H:%M:%S").strftime(format) + from . import db db.init_app(app) diff --git a/weather/static/style.css b/weather/static/style.css index ddc1ec7..d7307cf 100644 --- a/weather/static/style.css +++ b/weather/static/style.css @@ -46,8 +46,7 @@ grid-template-areas: "shortDescription" "longDescription" - "currentTemp" - "waterConditions"; + "currentTemp"; grid-area: forecast; } @@ -62,10 +61,9 @@ } .currentTemp { grid-area: currentTemp; } -.currentTemp > .temperature { font-size: 6em; } +.currentTemp > .temperature { font-size: 6em; line-height: 1; } .currentTemp > .unit { font-size: 2em; } -.waterConditions { grid-area: waterConditions; } .secondaryInfo { display: grid; @@ -75,23 +73,16 @@ grid-auto-flow: row; grid-template-areas: "windContainer" - "solarClock"; + "waterConditions"; grid-area: secondaryInfo; } .windContainer { grid-area: windContainer; } +.windContainer > div { font-size: 2em; } -.solarClock { grid-area: solarClock; } +.waterConditions { grid-area: waterConditions; } +.waterConditions > div { font-size: 2em; } .hourlyReport { grid-area: hourlyReport; } -.weeklyReport { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-rows: 1fr; - gap: 0px 0px; - grid-auto-flow: row; - grid-template-areas: - ". . . . . ."; - grid-area: weeklyReport; -} +.weeklyReport { grid-area: weeklyReport; } diff --git a/weather/static/tailwind.css b/weather/static/tailwind.css index 720fa83..137f97d 100644 --- a/weather/static/tailwind.css +++ b/weather/static/tailwind.css @@ -13,6 +13,14 @@ -moz-osx-font-smoothing: grayscale; } +.text-white { + color: white; +} + +.text-shadow { + text-shadow: 0 2px 8px #0009,0 4px 16px #0006,0 8px 32px #0003; +} + .min-h-screen { min-height: 100vh; } .grid { display: grid; } @@ -25,12 +33,14 @@ .flex { display: flex; } +.items-start { align-items: start; } + .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } -.p-4 { padding: 1rem; } +.p-4 { padding: 1em; } -.my-6 { margin-top: 1.25rem; margin-bottom: 1.25rem; } +.font-lg { font-size: 1.25em; } diff --git a/weather/templates/base.html b/weather/templates/base.html index ea6d8af..9e29e3e 100644 --- a/weather/templates/base.html +++ b/weather/templates/base.html @@ -20,7 +20,7 @@
-
0:00:00 AM
+
0:00:00 AM
{% block content %}{% endblock %}
diff --git a/weather/templates/weather/index.html b/weather/templates/weather/index.html index 2040c14..203abb4 100644 --- a/weather/templates/weather/index.html +++ b/weather/templates/weather/index.html @@ -4,50 +4,70 @@
-
{{ current_conditions['short_forecast'] }}
-
{{ current_conditions['detailed_forecast'] }}
-
- {{ current_conditions['temperature'] }}°{{ current_conditions['temperature_unit'] }} +
{{ current_conditions['short_forecast'] }}
+
{{ current_conditions['detailed_forecast'] }}
+
+ {{ current_conditions['temperature'] }}°F
-
{{ current_conditions['precipitation_probability'] }}% percip | {{ current_conditions['relative_humidity'] }}% humidity (relative)
+
{{ current_conditions['relative_humidity'] }}% humidity
-
-
-
Wind Status
-
{{ current_conditions['wind_speed'] }}
-
-
-
-
- Direction: {{ current_conditions['wind_direction'] }} +
+

Wind Status

+
+ + + + + +
{{ current_conditions['wind_speed'] }} {{ current_conditions['wind_direction'] }}
-
-
-
Sunrise
-
Sunset
-
-
-
-
-
Time AM
-
Time PM
+ +
+

Precipitation

+
+ + + +
{{ current_conditions['precipitation_probability'] }}%
-
+

Hourly Forecast

- {{ current_conditions | tojson(2) }} + {% for forecast in hourly_conditions %} +
+
{{ forecast['start_time'] | format_datetime('%I %p') }}
+
+
{{ forecast['temperature'] }}°F
+
+ + + +
{{ forecast['precipitation_probability'] }}%
+
+
+ {% endfor %}
-
+

Weekly Forecast

- {% for period in periods %} -
{{ period['start_time'] }} - {{ period['end_time'] }} | {{ period['temperature'] }}{{ period['temperature_unit'] }}
+ {% for forecast in week_forcasts %} +
+
{{ forecast['forecasted_date'] | format_datetime('%a') }}
+
+
{{ forecast['temperature_high'] }}°F
+
+ + + +
{{ forecast['precipitation_probability'] }}%
+
+
{% endfor %}
diff --git a/weather/weather.py b/weather/weather.py index 98b7ff4..931639a 100644 --- a/weather/weather.py +++ b/weather/weather.py @@ -4,7 +4,9 @@ from flask import ( from werkzeug.exceptions import abort from datetime import datetime -from weather.db import get_db +from weather.db import ( + get_db, close_db +) from weather.ingest import ( fetchHourlyForecasts, fetchDailyForecasts ) @@ -51,6 +53,7 @@ def index(): 'SELECT * FROM `current_forecasts` WHERE `start_time` > DATETIME("now", "+1 hour") LIMIT 7' ).fetchall() + close_db() return render_template( 'weather/index.html', condition_image=condition_image, @@ -61,7 +64,7 @@ def index(): def mapForecastToImage(condition: str): if not condition: - return 'cloudy' + return 'clear' condition = condition.lower() if 'thunder' in condition or 'storm' in condition: @@ -76,9 +79,9 @@ def mapForecastToImage(condition: str): return 'clear' elif 'cloud' in condition or 'overcast' in condition: return 'cloudy' - elif 'fog' in condition or 'mist' in condition: - return 'cloudy' + elif 'haze' in condition or 'mist' in condition or 'fog' in condition: + return 'hazy' else: - return 'cloudy' + return 'clear'