When filtering readings on dashboard show selected start/end date and show filter accordion by default

This commit is contained in:
Peter Stockings
2024-12-24 20:22:52 +11:00
parent 7d18320575
commit cd8f9453c5
2 changed files with 19 additions and 8 deletions

View File

@@ -47,6 +47,10 @@ def logout():
def dashboard():
from datetime import datetime, timedelta
# Default values
start_date = None
end_date = None
# Default to all readings
readings_query = Reading.query.filter_by(user_id=current_user.id)
@@ -56,13 +60,17 @@ def dashboard():
end_date = request.form.get('end_date')
if start_date and end_date:
start_date = datetime.strptime(start_date, '%Y-%m-%d')
end_date = datetime.strptime(end_date, '%Y-%m-%d')
start_date_obj = datetime.strptime(start_date, '%Y-%m-%d')
end_date_obj = datetime.strptime(end_date, '%Y-%m-%d')
readings_query = readings_query.filter(
Reading.timestamp >= start_date,
Reading.timestamp <= end_date
Reading.timestamp >= start_date_obj,
Reading.timestamp <= end_date_obj
)
# Format start_date and end_date for the template
start_date = start_date_obj.strftime('%Y-%m-%d')
end_date = end_date_obj.strftime('%Y-%m-%d')
# Fetch and order readings
readings = readings_query.order_by(Reading.timestamp.desc()).all()
@@ -103,7 +111,9 @@ def dashboard():
timestamps=timestamps,
systolic=systolic,
diastolic=diastolic,
heart_rate=heart_rate
heart_rate=heart_rate,
start_date=start_date,
end_date=end_date
)
@main.route('/add-reading', methods=['GET', 'POST'])

View File

@@ -125,7 +125,8 @@
</div>
</div>
<div x-data="{ open: false }" class="p-4 bg-white rounded-lg shadow-md">
<div x-data="{ open: {{ 'true' if start_date or end_date else 'false' }} }"
class="p-4 bg-white rounded-lg shadow-md">
<!-- Collapsible Header -->
<div class="flex justify-between items-center">
<h3 class="text-lg font-bold text-gray-800">Filter Readings</h3>
@@ -146,12 +147,12 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="start_date" class="block text-sm font-medium text-gray-700">Start Date</label>
<input type="date" name="start_date" id="start_date"
<input type="date" name="start_date" id="start_date" value="{{ start_date or '' }}"
class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="end_date" class="block text-sm font-medium text-gray-700">End Date</label>
<input type="date" name="end_date" id="end_date"
<input type="date" name="end_date" id="end_date" value="{{ end_date or '' }}"
class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
</div>