5ee6f5eb28
- Added a new filtering system to the dashboard for device types and statuses. - Implemented asynchronous SLM status synchronization to update the Emitter table. - Updated the status snapshot endpoint to sync SLM status before generating the snapshot. - Refactored the dashboard HTML to include filter controls and JavaScript for managing filter state. - Improved the unit detail page to handle modem associations and cascade updates to paired devices. - Removed redundant code related to syncing start time for measuring devices.
922 lines
42 KiB
HTML
922 lines
42 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Dashboard - Seismo Fleet Manager{% endblock %}
|
|
|
|
{% block content %}
|
|
{% if environment == 'development' %}
|
|
<div class="mb-4 p-4 bg-yellow-100 dark:bg-yellow-900 border-l-4 border-yellow-500 text-yellow-700 dark:text-yellow-200 rounded">
|
|
<p class="font-bold">Development Environment</p>
|
|
<p class="text-sm">You are currently viewing the development version of Seismo Fleet Manager.</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mb-8 flex justify-between items-center">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
|
|
<p class="text-gray-600 dark:text-gray-400 mt-1">Fleet overview and recent activity</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Last updated</p>
|
|
<p id="last-refresh" class="text-sm text-gray-700 dark:text-gray-300 font-mono">--</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard cards with auto-refresh -->
|
|
<div hx-get="/api/status-snapshot"
|
|
hx-trigger="load, every 10s"
|
|
hx-swap="none"
|
|
hx-on::after-request="updateDashboard(event)">
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
|
|
<!-- Fleet Summary Card -->
|
|
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-700 p-6" id="fleet-summary-card">
|
|
<div class="flex items-center justify-between mb-4 cursor-pointer md:cursor-default" onclick="toggleCard('fleet-summary')">
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Fleet Summary</h2>
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-6 h-6 text-seismo-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
|
|
</path>
|
|
</svg>
|
|
<svg class="w-5 h-5 text-gray-500 transition-transform md:hidden chevron" id="fleet-summary-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-3 card-content" id="fleet-summary-content">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 dark:text-gray-400">Total Units</span>
|
|
<span id="total-units" class="text-3xl md:text-2xl font-bold text-gray-900 dark:text-white">--</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 dark:text-gray-400">Deployed</span>
|
|
<span id="deployed-units" class="text-3xl md:text-2xl font-bold text-blue-600 dark:text-blue-400">--</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 dark:text-gray-400">Benched</span>
|
|
<span id="benched-units" class="text-3xl md:text-2xl font-bold text-gray-600 dark:text-gray-400">--</span>
|
|
</div>
|
|
<div class="border-t border-gray-200 dark:border-gray-700 pt-3 mt-3">
|
|
<p class="text-xs text-gray-500 dark:text-gray-500 mb-2 italic">By Device Type:</p>
|
|
<div class="flex justify-between items-center mb-1">
|
|
<div class="flex items-center">
|
|
<svg class="w-4 h-4 mr-1.5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
|
</svg>
|
|
<a href="/seismographs" class="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">Seismographs</a>
|
|
</div>
|
|
<span id="seismo-count" class="font-semibold text-blue-600 dark:text-blue-400">--</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<div class="flex items-center">
|
|
<svg class="w-4 h-4 mr-1.5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"></path>
|
|
</svg>
|
|
<a href="/sound-level-meters" class="text-sm text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400">Sound Level Meters</a>
|
|
</div>
|
|
<span id="slm-count" class="font-semibold text-purple-600 dark:text-purple-400">--</span>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-gray-200 dark:border-gray-700 pt-3 mt-3">
|
|
<p class="text-xs text-gray-500 dark:text-gray-500 mb-2 italic">Deployed Status:</p>
|
|
<div class="flex justify-between items-center mb-2" title="Units reporting normally (last seen < 12 hours)">
|
|
<div class="flex items-center">
|
|
<span class="w-3 h-3 rounded-full bg-green-500 mr-2 flex items-center justify-center">
|
|
<svg class="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</span>
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">OK</span>
|
|
</div>
|
|
<span id="status-ok" class="font-semibold text-green-600 dark:text-green-400">--</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-2" title="Units with delayed reports (12-24 hours)">
|
|
<div class="flex items-center">
|
|
<span class="w-3 h-3 rounded-full bg-yellow-500 mr-2 flex items-center justify-center">
|
|
<svg class="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</span>
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">Pending</span>
|
|
</div>
|
|
<span id="status-pending" class="font-semibold text-yellow-600 dark:text-yellow-400">--</span>
|
|
</div>
|
|
<div class="flex justify-between items-center" title="Units not reporting (> 24 hours)">
|
|
<div class="flex items-center">
|
|
<span class="w-3 h-3 rounded-full bg-red-500 mr-2 flex items-center justify-center">
|
|
<svg class="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</span>
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">Missing</span>
|
|
</div>
|
|
<span id="status-missing" class="font-semibold text-red-600 dark:text-red-400">--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Alerts Card -->
|
|
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-700 p-6" id="recent-alerts-card">
|
|
<div class="flex items-center justify-between mb-4 cursor-pointer md:cursor-default" onclick="toggleCard('recent-alerts')">
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Alerts</h2>
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
|
|
</path>
|
|
</svg>
|
|
<svg class="w-5 h-5 text-gray-500 transition-transform md:hidden chevron" id="recent-alerts-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div id="alerts-list" class="space-y-3 card-content" id-content="recent-alerts-content">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Loading alerts...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recently Called In Units Card -->
|
|
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-700 p-6" id="recent-callins-card">
|
|
<div class="flex items-center justify-between mb-4 cursor-pointer md:cursor-default" onclick="toggleCard('recent-callins')">
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Call-Ins</h2>
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-6 h-6 text-seismo-burgundy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z">
|
|
</path>
|
|
</svg>
|
|
<svg class="w-5 h-5 text-gray-500 transition-transform md:hidden chevron" id="recent-callins-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="card-content" id="recent-callins-content">
|
|
<div id="recent-callins-list" class="space-y-2">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Loading recent call-ins...</p>
|
|
</div>
|
|
<button id="show-all-callins" class="hidden mt-3 w-full text-center text-sm text-seismo-orange hover:text-seismo-burgundy font-medium">
|
|
Show all recent call-ins
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Today's Scheduled Actions Card -->
|
|
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-700 p-6" id="todays-actions-card">
|
|
<div class="flex items-center justify-between mb-4 cursor-pointer md:cursor-default" onclick="toggleCard('todays-actions')">
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Today's Schedule</h2>
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-6 h-6 text-seismo-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z">
|
|
</path>
|
|
</svg>
|
|
<svg class="w-5 h-5 text-gray-500 transition-transform md:hidden chevron" id="todays-actions-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="card-content" id="todays-actions-content"
|
|
hx-get="/dashboard/todays-actions"
|
|
hx-trigger="load, every 30s"
|
|
hx-swap="innerHTML">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Loading scheduled actions...</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Dashboard Filters -->
|
|
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-700 p-4 mb-4" id="dashboard-filters-card">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Filter Dashboard</h3>
|
|
<button onclick="resetFilters()" class="text-xs text-gray-500 hover:text-seismo-orange dark:hover:text-seismo-orange transition-colors">
|
|
Reset Filters
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-6">
|
|
<!-- Device Type Filters -->
|
|
<div class="flex flex-col gap-1">
|
|
<span class="text-xs text-gray-500 dark:text-gray-400 font-medium uppercase tracking-wide">Device Type</span>
|
|
<div class="flex gap-4">
|
|
<label class="flex items-center gap-1.5 cursor-pointer">
|
|
<input type="checkbox" id="filter-seismograph" checked
|
|
class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-slate-800"
|
|
onchange="applyFilters()">
|
|
<span class="text-sm text-gray-700 dark:text-gray-300">Seismographs</span>
|
|
</label>
|
|
<label class="flex items-center gap-1.5 cursor-pointer">
|
|
<input type="checkbox" id="filter-slm" checked
|
|
class="rounded border-gray-300 text-purple-600 focus:ring-purple-500 dark:border-gray-600 dark:bg-slate-800"
|
|
onchange="applyFilters()">
|
|
<span class="text-sm text-gray-700 dark:text-gray-300">SLMs</span>
|
|
</label>
|
|
<label class="flex items-center gap-1.5 cursor-pointer">
|
|
<input type="checkbox" id="filter-modem" checked
|
|
class="rounded border-gray-300 text-cyan-600 focus:ring-cyan-500 dark:border-gray-600 dark:bg-slate-800"
|
|
onchange="applyFilters()">
|
|
<span class="text-sm text-gray-700 dark:text-gray-300">Modems</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Filters -->
|
|
<div class="flex flex-col gap-1">
|
|
<span class="text-xs text-gray-500 dark:text-gray-400 font-medium uppercase tracking-wide">Status</span>
|
|
<div class="flex gap-4">
|
|
<label class="flex items-center gap-1.5 cursor-pointer">
|
|
<input type="checkbox" id="filter-ok" checked
|
|
class="rounded border-gray-300 text-green-600 focus:ring-green-500 dark:border-gray-600 dark:bg-slate-800"
|
|
onchange="applyFilters()">
|
|
<span class="text-sm text-green-600 dark:text-green-400">OK</span>
|
|
</label>
|
|
<label class="flex items-center gap-1.5 cursor-pointer">
|
|
<input type="checkbox" id="filter-pending" checked
|
|
class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500 dark:border-gray-600 dark:bg-slate-800"
|
|
onchange="applyFilters()">
|
|
<span class="text-sm text-yellow-600 dark:text-yellow-400">Pending</span>
|
|
</label>
|
|
<label class="flex items-center gap-1.5 cursor-pointer">
|
|
<input type="checkbox" id="filter-missing" checked
|
|
class="rounded border-gray-300 text-red-600 focus:ring-red-500 dark:border-gray-600 dark:bg-slate-800"
|
|
onchange="applyFilters()">
|
|
<span class="text-sm text-red-600 dark:text-red-400">Missing</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fleet Map -->
|
|
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-700 p-6 mb-8" id="fleet-map-card">
|
|
<div class="flex items-center justify-between mb-4 cursor-pointer md:cursor-default" onclick="toggleCard('fleet-map')">
|
|
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Fleet Map</h2>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">Deployed units</span>
|
|
<svg class="w-5 h-5 text-gray-500 transition-transform md:hidden chevron" id="fleet-map-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="card-content" id="fleet-map-content">
|
|
<div id="fleet-map" class="w-full h-64 md:h-96 rounded-lg"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Photos Section -->
|
|
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-700 p-6 mb-8" id="recent-photos-card">
|
|
<div class="flex items-center justify-between mb-4 cursor-pointer md:cursor-default" onclick="toggleCard('recent-photos')">
|
|
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Recent Photos</h2>
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-6 h-6 text-seismo-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
|
</svg>
|
|
<svg class="w-5 h-5 text-gray-500 transition-transform md:hidden chevron" id="recent-photos-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="card-content" id="recent-photos-content">
|
|
<div id="recentPhotosGallery" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 col-span-full">Loading recent photos...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fleet Status Section with Tabs -->
|
|
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-700 p-6" id="fleet-status-card">
|
|
|
|
<div class="flex items-center justify-between mb-4 cursor-pointer md:cursor-default" onclick="toggleCard('fleet-status')">
|
|
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Fleet Status</h2>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<a href="/roster" class="text-seismo-orange hover:text-seismo-burgundy font-medium flex items-center" onclick="event.stopPropagation()">
|
|
Full Roster
|
|
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</a>
|
|
<svg class="w-5 h-5 text-gray-500 transition-transform md:hidden chevron" id="fleet-status-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-content" id="fleet-status-content">
|
|
<!-- Tab Bar -->
|
|
<div class="flex border-b border-gray-200 dark:border-gray-700 mb-4">
|
|
<button
|
|
class="px-4 py-2 text-sm font-medium tab-button active-tab"
|
|
hx-get="/dashboard/active"
|
|
hx-target="#fleet-table"
|
|
hx-swap="innerHTML">
|
|
Active
|
|
</button>
|
|
|
|
<button
|
|
class="px-4 py-2 text-sm font-medium tab-button"
|
|
hx-get="/dashboard/benched"
|
|
hx-target="#fleet-table"
|
|
hx-swap="innerHTML">
|
|
Benched
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Content Target -->
|
|
<div id="fleet-table" class="space-y-2"
|
|
hx-get="/dashboard/active"
|
|
hx-trigger="load"
|
|
hx-swap="innerHTML">
|
|
<p class="text-gray-500 dark:text-gray-400">Loading fleet data...</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- TAB STYLE -->
|
|
<style>
|
|
.tab-button {
|
|
color: #6b7280; /* gray-500 */
|
|
border-bottom: 2px solid transparent;
|
|
}
|
|
.tab-button:hover {
|
|
color: #374151; /* gray-700 */
|
|
}
|
|
.active-tab {
|
|
color: #b84a12 !important; /* seismo orange */
|
|
border-bottom: 2px solid #b84a12 !important;
|
|
}
|
|
|
|
/* Collapsible cards (mobile only) */
|
|
@media (max-width: 767px) {
|
|
.card-content.collapsed {
|
|
display: none;
|
|
}
|
|
.chevron.collapsed {
|
|
transform: rotate(-90deg);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
<script>
|
|
// ===== Dashboard Filtering System =====
|
|
let currentSnapshotData = null; // Store latest snapshot data for re-filtering
|
|
|
|
// Filter state - tracks which device types and statuses to show
|
|
const filters = {
|
|
deviceTypes: {
|
|
seismograph: true,
|
|
sound_level_meter: true,
|
|
modem: true
|
|
},
|
|
statuses: {
|
|
OK: true,
|
|
Pending: true,
|
|
Missing: true
|
|
}
|
|
};
|
|
|
|
// Load saved filter preferences from localStorage
|
|
function loadFilterPreferences() {
|
|
const saved = localStorage.getItem('dashboardFilters');
|
|
if (saved) {
|
|
try {
|
|
const parsed = JSON.parse(saved);
|
|
if (parsed.deviceTypes) Object.assign(filters.deviceTypes, parsed.deviceTypes);
|
|
if (parsed.statuses) Object.assign(filters.statuses, parsed.statuses);
|
|
} catch (e) {
|
|
console.error('Error loading filter preferences:', e);
|
|
}
|
|
}
|
|
|
|
// Sync checkboxes with loaded state
|
|
const seismoCheck = document.getElementById('filter-seismograph');
|
|
const slmCheck = document.getElementById('filter-slm');
|
|
const modemCheck = document.getElementById('filter-modem');
|
|
const okCheck = document.getElementById('filter-ok');
|
|
const pendingCheck = document.getElementById('filter-pending');
|
|
const missingCheck = document.getElementById('filter-missing');
|
|
|
|
if (seismoCheck) seismoCheck.checked = filters.deviceTypes.seismograph;
|
|
if (slmCheck) slmCheck.checked = filters.deviceTypes.sound_level_meter;
|
|
if (modemCheck) modemCheck.checked = filters.deviceTypes.modem;
|
|
if (okCheck) okCheck.checked = filters.statuses.OK;
|
|
if (pendingCheck) pendingCheck.checked = filters.statuses.Pending;
|
|
if (missingCheck) missingCheck.checked = filters.statuses.Missing;
|
|
}
|
|
|
|
// Save filter preferences to localStorage
|
|
function saveFilterPreferences() {
|
|
localStorage.setItem('dashboardFilters', JSON.stringify(filters));
|
|
}
|
|
|
|
// Apply filters - called when any checkbox changes
|
|
function applyFilters() {
|
|
// Update filter state from checkboxes
|
|
const seismoCheck = document.getElementById('filter-seismograph');
|
|
const slmCheck = document.getElementById('filter-slm');
|
|
const modemCheck = document.getElementById('filter-modem');
|
|
const okCheck = document.getElementById('filter-ok');
|
|
const pendingCheck = document.getElementById('filter-pending');
|
|
const missingCheck = document.getElementById('filter-missing');
|
|
|
|
if (seismoCheck) filters.deviceTypes.seismograph = seismoCheck.checked;
|
|
if (slmCheck) filters.deviceTypes.sound_level_meter = slmCheck.checked;
|
|
if (modemCheck) filters.deviceTypes.modem = modemCheck.checked;
|
|
if (okCheck) filters.statuses.OK = okCheck.checked;
|
|
if (pendingCheck) filters.statuses.Pending = pendingCheck.checked;
|
|
if (missingCheck) filters.statuses.Missing = missingCheck.checked;
|
|
|
|
saveFilterPreferences();
|
|
|
|
// Re-render with current data and filters
|
|
if (currentSnapshotData) {
|
|
renderFilteredDashboard(currentSnapshotData);
|
|
}
|
|
}
|
|
|
|
// Reset all filters to show everything
|
|
function resetFilters() {
|
|
filters.deviceTypes = { seismograph: true, sound_level_meter: true, modem: true };
|
|
filters.statuses = { OK: true, Pending: true, Missing: true };
|
|
|
|
// Update all checkboxes
|
|
const checkboxes = [
|
|
'filter-seismograph', 'filter-slm', 'filter-modem',
|
|
'filter-ok', 'filter-pending', 'filter-missing'
|
|
];
|
|
checkboxes.forEach(id => {
|
|
const el = document.getElementById(id);
|
|
if (el) el.checked = true;
|
|
});
|
|
|
|
saveFilterPreferences();
|
|
|
|
if (currentSnapshotData) {
|
|
renderFilteredDashboard(currentSnapshotData);
|
|
}
|
|
}
|
|
|
|
// Check if a unit passes the current filters
|
|
function unitPassesFilter(unit) {
|
|
const deviceType = unit.device_type || 'seismograph';
|
|
const status = unit.status || 'Missing';
|
|
|
|
// Check device type filter
|
|
if (!filters.deviceTypes[deviceType]) {
|
|
return false;
|
|
}
|
|
|
|
// Check status filter
|
|
if (!filters.statuses[status]) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
// Get display label for device type
|
|
function getDeviceTypeLabel(deviceType) {
|
|
switch(deviceType) {
|
|
case 'sound_level_meter': return 'SLM';
|
|
case 'modem': return 'Modem';
|
|
default: return 'Seismograph';
|
|
}
|
|
}
|
|
|
|
// Render dashboard with filtered data
|
|
function renderFilteredDashboard(data) {
|
|
// Filter active units for alerts
|
|
const filteredActive = {};
|
|
Object.entries(data.active || {}).forEach(([id, unit]) => {
|
|
if (unitPassesFilter(unit)) {
|
|
filteredActive[id] = unit;
|
|
}
|
|
});
|
|
|
|
// Update alerts with filtered data
|
|
updateAlertsFiltered(filteredActive);
|
|
|
|
// Update map with filtered data
|
|
updateFleetMapFiltered(data.units);
|
|
}
|
|
|
|
// Update the Recent Alerts section with filtering
|
|
function updateAlertsFiltered(filteredActive) {
|
|
const alertsList = document.getElementById('alerts-list');
|
|
const missingUnits = Object.entries(filteredActive).filter(([_, u]) => u.status === 'Missing');
|
|
|
|
if (!missingUnits.length) {
|
|
// Check if this is because of filters or genuinely no alerts
|
|
const anyMissing = currentSnapshotData && Object.values(currentSnapshotData.active || {}).some(u => u.status === 'Missing');
|
|
if (anyMissing) {
|
|
alertsList.innerHTML = '<p class="text-sm text-gray-500 dark:text-gray-400">No alerts match current filters</p>';
|
|
} else {
|
|
alertsList.innerHTML = '<p class="text-sm text-green-600 dark:text-green-400">All units reporting normally</p>';
|
|
}
|
|
} else {
|
|
let alertsHtml = '';
|
|
missingUnits.forEach(([id, unit]) => {
|
|
const deviceLabel = getDeviceTypeLabel(unit.device_type);
|
|
alertsHtml += `
|
|
<div class="flex items-start space-x-2 text-sm">
|
|
<span class="w-2 h-2 rounded-full bg-red-500 mt-1.5"></span>
|
|
<div>
|
|
<a href="/unit/${id}" class="font-medium text-red-600 dark:text-red-400 hover:underline">${id}</a>
|
|
<span class="text-xs text-gray-500 ml-1">(${deviceLabel})</span>
|
|
<p class="text-gray-600 dark:text-gray-400">Missing for ${unit.age}</p>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
alertsList.innerHTML = alertsHtml;
|
|
}
|
|
}
|
|
|
|
// Update map with filtered data
|
|
function updateFleetMapFiltered(allUnits) {
|
|
if (!fleetMap) return;
|
|
|
|
// Clear existing markers
|
|
fleetMarkers.forEach(marker => fleetMap.removeLayer(marker));
|
|
fleetMarkers = [];
|
|
|
|
// Get deployed units with coordinates that pass the filter
|
|
const deployedUnits = Object.entries(allUnits || {})
|
|
.filter(([_, u]) => u.deployed && u.coordinates && unitPassesFilter(u));
|
|
|
|
if (deployedUnits.length === 0) {
|
|
return;
|
|
}
|
|
|
|
const bounds = [];
|
|
|
|
deployedUnits.forEach(([id, unit]) => {
|
|
const coords = parseLocation(unit.coordinates);
|
|
if (coords) {
|
|
const [lat, lon] = coords;
|
|
|
|
// Color based on status
|
|
const markerColor = unit.status === 'OK' ? 'green' :
|
|
unit.status === 'Pending' ? 'orange' : 'red';
|
|
|
|
// Different marker style per device type
|
|
const deviceType = unit.device_type || 'seismograph';
|
|
let radius = 8;
|
|
let weight = 2;
|
|
|
|
if (deviceType === 'modem') {
|
|
radius = 6;
|
|
weight = 2;
|
|
} else if (deviceType === 'sound_level_meter') {
|
|
radius = 8;
|
|
weight = 3;
|
|
}
|
|
|
|
const marker = L.circleMarker([lat, lon], {
|
|
radius: radius,
|
|
fillColor: markerColor,
|
|
color: '#fff',
|
|
weight: weight,
|
|
opacity: 1,
|
|
fillOpacity: 0.8
|
|
}).addTo(fleetMap);
|
|
|
|
// Popup with device type
|
|
const deviceLabel = getDeviceTypeLabel(deviceType);
|
|
|
|
marker.bindPopup(`
|
|
<div class="p-2">
|
|
<h3 class="font-bold text-lg">${id}</h3>
|
|
<p class="text-sm text-gray-600">${deviceLabel}</p>
|
|
<p class="text-sm">Status: <span style="color: ${markerColor}">${unit.status}</span></p>
|
|
${unit.note ? `<p class="text-sm text-gray-600">${unit.note}</p>` : ''}
|
|
<a href="/unit/${id}" class="text-blue-600 hover:underline text-sm">View Details</a>
|
|
</div>
|
|
`);
|
|
|
|
fleetMarkers.push(marker);
|
|
bounds.push([lat, lon]);
|
|
}
|
|
});
|
|
|
|
// Fit bounds if we have markers
|
|
if (bounds.length > 0) {
|
|
const padding = window.innerWidth < 768 ? [20, 20] : [50, 50];
|
|
fleetMap.fitBounds(bounds, { padding: padding });
|
|
fleetMapInitialized = true;
|
|
}
|
|
}
|
|
|
|
// Toggle card collapse/expand (mobile only)
|
|
function toggleCard(cardName) {
|
|
// Only work on mobile
|
|
if (window.innerWidth >= 768) return;
|
|
|
|
const content = document.getElementById(`${cardName}-content`);
|
|
const chevron = document.getElementById(`${cardName}-chevron`);
|
|
|
|
if (!content || !chevron) return;
|
|
|
|
// Toggle collapsed state
|
|
const isCollapsed = content.classList.contains('collapsed');
|
|
|
|
if (isCollapsed) {
|
|
content.classList.remove('collapsed');
|
|
chevron.classList.remove('collapsed');
|
|
|
|
// If expanding the fleet map, invalidate size after animation
|
|
if (cardName === 'fleet-map' && window.fleetMap) {
|
|
setTimeout(() => {
|
|
window.fleetMap.invalidateSize();
|
|
}, 300);
|
|
}
|
|
} else {
|
|
content.classList.add('collapsed');
|
|
chevron.classList.add('collapsed');
|
|
}
|
|
|
|
// Save state to localStorage
|
|
const cardStates = JSON.parse(localStorage.getItem('dashboardCardStates') || '{}');
|
|
cardStates[cardName] = !isCollapsed;
|
|
localStorage.setItem('dashboardCardStates', JSON.stringify(cardStates));
|
|
}
|
|
|
|
// Restore card states from localStorage on page load
|
|
function restoreCardStates() {
|
|
const cardStates = JSON.parse(localStorage.getItem('dashboardCardStates') || '{}');
|
|
const cardNames = ['fleet-summary', 'recent-alerts', 'recent-callins', 'todays-actions', 'fleet-map', 'fleet-status'];
|
|
|
|
cardNames.forEach(cardName => {
|
|
const content = document.getElementById(`${cardName}-content`);
|
|
const chevron = document.getElementById(`${cardName}-chevron`);
|
|
|
|
if (!content || !chevron) return;
|
|
|
|
// Default to expanded (true) if no saved state
|
|
const isCollapsed = cardStates[cardName] === false;
|
|
|
|
if (isCollapsed) {
|
|
content.classList.add('collapsed');
|
|
chevron.classList.add('collapsed');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Restore states when DOM is ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', restoreCardStates);
|
|
} else {
|
|
restoreCardStates();
|
|
}
|
|
|
|
function updateDashboard(event) {
|
|
try {
|
|
// Only process responses from /api/status-snapshot
|
|
const requestUrl = event.detail.xhr.responseURL || event.detail.pathInfo?.requestPath;
|
|
if (!requestUrl || !requestUrl.includes('/api/status-snapshot')) {
|
|
return; // Ignore responses from other endpoints (like /dashboard/todays-actions)
|
|
}
|
|
|
|
const data = JSON.parse(event.detail.xhr.response);
|
|
|
|
// Store data for filter re-application
|
|
currentSnapshotData = data;
|
|
|
|
// Update "Last updated" timestamp with timezone
|
|
const now = new Date();
|
|
const timezone = localStorage.getItem('timezone') || 'America/New_York';
|
|
document.getElementById('last-refresh').textContent = now.toLocaleTimeString('en-US', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
timeZone: timezone,
|
|
timeZoneName: 'short'
|
|
});
|
|
|
|
// ===== Fleet summary numbers (always unfiltered) =====
|
|
document.getElementById('total-units').textContent = data.summary?.total ?? 0;
|
|
document.getElementById('deployed-units').textContent = data.summary?.active ?? 0;
|
|
document.getElementById('benched-units').textContent = data.summary?.benched ?? 0;
|
|
document.getElementById('status-ok').textContent = data.summary?.ok ?? 0;
|
|
document.getElementById('status-pending').textContent = data.summary?.pending ?? 0;
|
|
document.getElementById('status-missing').textContent = data.summary?.missing ?? 0;
|
|
|
|
// ===== Device type counts (always unfiltered) =====
|
|
let seismoCount = 0;
|
|
let slmCount = 0;
|
|
let modemCount = 0;
|
|
Object.values(data.units || {}).forEach(unit => {
|
|
if (unit.retired) return; // Don't count retired units
|
|
const deviceType = unit.device_type || 'seismograph';
|
|
if (deviceType === 'seismograph') {
|
|
seismoCount++;
|
|
} else if (deviceType === 'sound_level_meter') {
|
|
slmCount++;
|
|
} else if (deviceType === 'modem') {
|
|
modemCount++;
|
|
}
|
|
});
|
|
document.getElementById('seismo-count').textContent = seismoCount;
|
|
document.getElementById('slm-count').textContent = slmCount;
|
|
|
|
// ===== Apply filters and render map + alerts =====
|
|
renderFilteredDashboard(data);
|
|
|
|
} catch (err) {
|
|
console.error("Dashboard update error:", err);
|
|
}
|
|
}
|
|
|
|
// Handle tab switching and initialize components
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Load filter preferences
|
|
loadFilterPreferences();
|
|
|
|
const tabButtons = document.querySelectorAll('.tab-button');
|
|
|
|
tabButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
// Remove active-tab class from all buttons
|
|
tabButtons.forEach(btn => btn.classList.remove('active-tab'));
|
|
// Add active-tab class to clicked button
|
|
this.classList.add('active-tab');
|
|
});
|
|
});
|
|
|
|
// Initialize fleet map
|
|
initFleetMap();
|
|
});
|
|
|
|
let fleetMap = null;
|
|
let fleetMarkers = [];
|
|
let fleetMapInitialized = false;
|
|
|
|
// Make fleetMap accessible globally for toggleCard function
|
|
window.fleetMap = null;
|
|
|
|
function initFleetMap() {
|
|
// Initialize the map centered on the US (can adjust based on your deployment area)
|
|
fleetMap = L.map('fleet-map').setView([39.8283, -98.5795], 4);
|
|
window.fleetMap = fleetMap;
|
|
|
|
// Add OpenStreetMap tiles
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors',
|
|
maxZoom: 18
|
|
}).addTo(fleetMap);
|
|
|
|
// Force map to recalculate size after a brief delay to ensure container is fully rendered
|
|
setTimeout(() => {
|
|
fleetMap.invalidateSize();
|
|
}, 100);
|
|
}
|
|
|
|
function parseLocation(location) {
|
|
if (!location) return null;
|
|
|
|
// Try to parse as "lat,lon" format
|
|
const parts = location.split(',').map(s => s.trim());
|
|
if (parts.length === 2) {
|
|
const lat = parseFloat(parts[0]);
|
|
const lon = parseFloat(parts[1]);
|
|
if (!isNaN(lat) && !isNaN(lon)) {
|
|
return [lat, lon];
|
|
}
|
|
}
|
|
|
|
// TODO: Add geocoding support for address strings
|
|
return null;
|
|
}
|
|
|
|
// Load and display recent photos
|
|
async function loadRecentPhotos() {
|
|
try {
|
|
const response = await fetch('/api/recent-photos?limit=12');
|
|
if (!response.ok) {
|
|
throw new Error('Failed to load recent photos');
|
|
}
|
|
|
|
const data = await response.json();
|
|
const gallery = document.getElementById('recentPhotosGallery');
|
|
|
|
if (data.photos && data.photos.length > 0) {
|
|
gallery.innerHTML = '';
|
|
data.photos.forEach(photo => {
|
|
const photoDiv = document.createElement('div');
|
|
photoDiv.className = 'relative group';
|
|
photoDiv.innerHTML = `
|
|
<a href="/unit/${photo.unit_id}" class="block">
|
|
<img src="${photo.path}" alt="${photo.unit_id}"
|
|
class="w-full h-32 object-cover rounded-lg shadow hover:shadow-lg transition-shadow">
|
|
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2 rounded-b-lg">
|
|
<p class="text-white text-xs font-semibold">${photo.unit_id}</p>
|
|
</div>
|
|
</a>
|
|
`;
|
|
gallery.appendChild(photoDiv);
|
|
});
|
|
} else {
|
|
gallery.innerHTML = '<p class="text-sm text-gray-500 dark:text-gray-400 col-span-full">No photos uploaded yet. Upload photos from unit detail pages.</p>';
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading recent photos:', error);
|
|
document.getElementById('recentPhotosGallery').innerHTML = '<p class="text-sm text-red-500 col-span-full">Failed to load recent photos</p>';
|
|
}
|
|
}
|
|
|
|
// Load recent photos on page load and refresh every 30 seconds
|
|
loadRecentPhotos();
|
|
setInterval(loadRecentPhotos, 30000);
|
|
|
|
// Load and display recent call-ins
|
|
let showingAllCallins = false;
|
|
const DEFAULT_CALLINS_DISPLAY = 5;
|
|
|
|
async function loadRecentCallins() {
|
|
try {
|
|
const response = await fetch('/api/recent-callins?hours=6');
|
|
if (!response.ok) {
|
|
throw new Error('Failed to load recent call-ins');
|
|
}
|
|
|
|
const data = await response.json();
|
|
const callinsList = document.getElementById('recent-callins-list');
|
|
const showAllButton = document.getElementById('show-all-callins');
|
|
|
|
if (data.call_ins && data.call_ins.length > 0) {
|
|
// Determine how many to show
|
|
const displayCount = showingAllCallins ? data.call_ins.length : Math.min(DEFAULT_CALLINS_DISPLAY, data.call_ins.length);
|
|
const callinsToDisplay = data.call_ins.slice(0, displayCount);
|
|
|
|
// Build HTML for call-ins list
|
|
let html = '';
|
|
callinsToDisplay.forEach(callin => {
|
|
// Status color
|
|
const statusColor = callin.status === 'OK' ? 'green' : callin.status === 'Pending' ? 'yellow' : 'red';
|
|
const statusClass = callin.status === 'OK' ? 'bg-green-500' : callin.status === 'Pending' ? 'bg-yellow-500' : 'bg-red-500';
|
|
|
|
// Build location/note line
|
|
let subtitle = '';
|
|
if (callin.location) {
|
|
subtitle = callin.location;
|
|
} else if (callin.note) {
|
|
subtitle = callin.note;
|
|
}
|
|
|
|
html += `
|
|
<div class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-700 last:border-0">
|
|
<div class="flex items-center space-x-3">
|
|
<span class="w-2 h-2 rounded-full ${statusClass}"></span>
|
|
<div>
|
|
<a href="/unit/${callin.unit_id}" class="font-medium text-gray-900 dark:text-white hover:text-seismo-orange">
|
|
${callin.unit_id}
|
|
</a>
|
|
${subtitle ? `<p class="text-xs text-gray-500 dark:text-gray-400">${subtitle}</p>` : ''}
|
|
</div>
|
|
</div>
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">${callin.time_ago}</span>
|
|
</div>`;
|
|
});
|
|
|
|
callinsList.innerHTML = html;
|
|
|
|
// Show/hide the "Show all" button
|
|
if (data.call_ins.length > DEFAULT_CALLINS_DISPLAY) {
|
|
showAllButton.classList.remove('hidden');
|
|
showAllButton.textContent = showingAllCallins
|
|
? `Show fewer (${DEFAULT_CALLINS_DISPLAY})`
|
|
: `Show all (${data.call_ins.length})`;
|
|
} else {
|
|
showAllButton.classList.add('hidden');
|
|
}
|
|
} else {
|
|
callinsList.innerHTML = '<p class="text-sm text-gray-500 dark:text-gray-400">No units have called in within the past 6 hours</p>';
|
|
showAllButton.classList.add('hidden');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading recent call-ins:', error);
|
|
document.getElementById('recent-callins-list').innerHTML = '<p class="text-sm text-red-500">Failed to load recent call-ins</p>';
|
|
}
|
|
}
|
|
|
|
// Toggle show all/show fewer
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const showAllButton = document.getElementById('show-all-callins');
|
|
showAllButton.addEventListener('click', function() {
|
|
showingAllCallins = !showingAllCallins;
|
|
loadRecentCallins();
|
|
});
|
|
});
|
|
|
|
// Load recent call-ins on page load and refresh every 30 seconds
|
|
loadRecentCallins();
|
|
setInterval(loadRecentCallins, 30000);
|
|
</script>
|
|
|
|
{% endblock %}
|