247405c361
- Created complete frontend structure with Jinja2 templates - Implemented three main pages: Dashboard, Fleet Roster, and Unit Detail - Added HTMX auto-refresh for real-time updates (10s interval) - Integrated dark/light mode toggle with localStorage persistence - Built responsive card-based UI with sidebar navigation - Created API endpoints for status snapshot, roster, unit details, and photos - Added mock data service for development (emit_status_snapshot) - Implemented tabbed interface on unit detail page (Photos, Map, History) - Integrated Leaflet maps for unit location visualization - Configured static file serving and photo management - Updated requirements.txt with Jinja2 and aiofiles - Reorganized backend structure into routers and services - Added comprehensive FRONTEND_README.md documentation Frontend features: - Auto-refreshing dashboard with fleet summary and alerts - Sortable fleet roster table (prioritizes Missing > Pending > OK) - Unit detail view with status, deployment info, and notes - Photo gallery with thumbnail navigation - Interactive maps showing unit coordinates - Consistent styling with brand colors (orange, navy, burgundy) Ready for integration with real Series3 emitter data.
30 lines
1.1 KiB
HTML
30 lines
1.1 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Fleet Roster - Seismo Fleet Manager{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Fleet Roster</h1>
|
|
<p class="text-gray-600 dark:text-gray-400 mt-1">Real-time status of all seismograph units</p>
|
|
</div>
|
|
|
|
<!-- Auto-refresh roster every 10 seconds -->
|
|
<div hx-get="/partials/roster-table" hx-trigger="load, every 10s" hx-swap="innerHTML">
|
|
<!-- Initial loading state -->
|
|
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
|
|
<div class="flex items-center justify-center py-12">
|
|
<div class="animate-pulse flex space-x-4">
|
|
<div class="flex-1 space-y-4 py-1">
|
|
<div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4"></div>
|
|
<div class="space-y-2">
|
|
<div class="h-4 bg-gray-300 dark:bg-gray-600 rounded"></div>
|
|
<div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-5/6"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|