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

@@ -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>