serversdown/terra-view
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

Add MVP frontend scaffold with FastAPI + HTMX + TailwindCSS

Browse Source 
- 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.
This commit is contained in:
Claude
2025-11-22 00:16:26 +00:00
parent e7e660a9c3
commit 247405c361
16 changed files with 1390 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
templates/base.html Normal file
View File

@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Seismo Fleet Manager{% endblock %}</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- HTMX -->
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<!-- Leaflet for maps -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<!-- Custom Tailwind Config -->
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
seismo: {
orange: '#f48b1c',
navy: '#142a66',
burgundy: '#7d234d',
}
}
}
}
}
</script>
<style>
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Smooth transitions */
* {
transition: background-color 0.2s ease, color 0.2s ease;
}
</style>
{% block extra_head %}{% endblock %}
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-white dark:bg-slate-800 shadow-lg flex flex-col">
<!-- Logo -->
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
<h1 class="text-2xl font-bold text-seismo-navy dark:text-seismo-orange">
Seismo<br>
<span class="text-seismo-orange dark:text-seismo-burgundy">Fleet Manager</span>
</h1>
</div>
<!-- Navigation -->
<nav class="flex-1 p-4 space-y-2">
<a href="/" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 {% if request.url.path == '/' %}bg-gray-100 dark:bg-gray-700{% endif %}">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
Dashboard
</a>
<a href="/roster" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 {% if request.url.path == '/roster' %}bg-gray-100 dark:bg-gray-700{% endif %}">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
</svg>
Fleet Roster
</a>
<a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 opacity-50 cursor-not-allowed">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
</svg>
Projects
</a>
<a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 opacity-50 cursor-not-allowed">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
Settings
</a>
</nav>
<!-- Dark mode toggle -->
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<button onclick="toggleDarkMode()" class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
<svg id="theme-toggle-dark-icon" class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<svg id="theme-toggle-light-icon" class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
<span class="ml-3">Toggle theme</span>
</button>
</div>
</aside>
<!-- Main content -->
<main class="flex-1 overflow-y-auto">
<div class="p-8">
{% block content %}{% endblock %}
</div>
</main>
</div>
<script>
// Dark mode toggle
function toggleDarkMode() {
const html = document.documentElement;
if (html.classList.contains('dark')) {
html.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
html.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
}
// Load saved theme preference
if (localStorage.getItem('theme') === 'light') {
document.documentElement.classList.remove('dark');
} else if (localStorage.getItem('theme') === 'dark') {
document.documentElement.classList.add('dark');
}
</script>
{% block extra_scripts %}{% endblock %}
</body>
</html>

178
templates/dashboard.html Normal file
View File

@@ -0,0 +1,178 @@
{% extends "base.html" %}
{% block title %}Dashboard - Seismo Fleet Manager{% endblock %}
{% block content %}
<div class="mb-8">
<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>
<!-- 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-3 gap-6 mb-8">
<!-- Fleet Summary Card -->
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Fleet Summary</h2>
<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>
</div>
<div class="space-y-3">
<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-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-2xl font-bold text-blue-600 dark:text-blue-400">--</span>
</div>
<div class="border-t border-gray-200 dark:border-gray-700 pt-3 mt-3">
<div class="flex justify-between items-center mb-2">
<div class="flex items-center">
<span class="w-3 h-3 rounded-full bg-green-500 mr-2"></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">
<div class="flex items-center">
<span class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></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">
<div class="flex items-center">
<span class="w-3 h-3 rounded-full bg-red-500 mr-2"></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-800 p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Alerts</h2>
<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>
</div>
<div id="alerts-list" class="space-y-3">
<p class="text-sm text-gray-500 dark:text-gray-400">Loading alerts...</p>
</div>
</div>
<!-- Recent Photos Card -->
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Photos</h2>
<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="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>
</div>
<div class="text-center text-gray-500 dark:text-gray-400">
<svg class="w-16 h-16 mx-auto mb-2 opacity-50" 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>
<p class="text-sm">No recent photos</p>
</div>
</div>
</div>
<!-- Quick Access to Fleet Roster -->
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Fleet Status</h2>
<a href="/roster" class="text-seismo-orange hover:text-seismo-burgundy font-medium flex items-center">
View All
<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>
</div>
<div id="fleet-preview" class="space-y-2">
<p class="text-gray-500 dark:text-gray-400">Loading fleet data...</p>
</div>
</div>
</div>
<script>
function updateDashboard(event) {
try {
const data = JSON.parse(event.detail.xhr.response);
// Update fleet summary
document.getElementById('total-units').textContent = data.total_units || 0;
document.getElementById('deployed-units').textContent = data.deployed_units || 0;
document.getElementById('status-ok').textContent = data.status_summary.OK || 0;
document.getElementById('status-pending').textContent = data.status_summary.Pending || 0;
document.getElementById('status-missing').textContent = data.status_summary.Missing || 0;
// Update alerts list
const alertsList = document.getElementById('alerts-list');
const missingUnits = Object.entries(data.units).filter(([id, unit]) => unit.status === 'Missing');
const pendingUnits = Object.entries(data.units).filter(([id, unit]) => unit.status === 'Pending');
if (missingUnits.length === 0 && pendingUnits.length === 0) {
alertsList.innerHTML = '<p class="text-sm text-green-600 dark:text-green-400">✓ All units reporting normally</p>';
} else {
let alertsHtml = '';
missingUnits.slice(0, 3).forEach(([id, unit]) => {
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>
<p class="text-gray-600 dark:text-gray-400">Missing for ${unit.age}</p>
</div>
</div>
`;
});
pendingUnits.slice(0, 2).forEach(([id, unit]) => {
alertsHtml += `
<div class="flex items-start space-x-2 text-sm">
<span class="w-2 h-2 rounded-full bg-yellow-500 mt-1.5"></span>
<div>
<a href="/unit/${id}" class="font-medium text-yellow-600 dark:text-yellow-400 hover:underline">${id}</a>
<p class="text-gray-600 dark:text-gray-400">Pending for ${unit.age}</p>
</div>
</div>
`;
});
alertsList.innerHTML = alertsHtml;
}
// Update fleet preview
const fleetPreview = document.getElementById('fleet-preview');
const unitsList = Object.entries(data.units).slice(0, 5);
let previewHtml = '';
unitsList.forEach(([id, unit]) => {
const statusColor = unit.status === 'OK' ? 'green' : unit.status === 'Pending' ? 'yellow' : 'red';
const deployedDot = unit.deployed ? '<span class="w-2 h-2 rounded-full bg-blue-500"></span>' : '';
previewHtml += `
<a href="/unit/${id}" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
<div class="flex items-center space-x-3">
<span class="w-3 h-3 rounded-full bg-${statusColor}-500"></span>
${deployedDot}
<span class="font-medium">${id}</span>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400">${unit.age}</span>
</a>
`;
});
fleetPreview.innerHTML = previewHtml;
} catch (error) {
console.error('Error updating dashboard:', error);
}
}
</script>
{% endblock %}

87
templates/partials/roster_table.html Normal file
View File

@@ -0,0 +1,87 @@
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 overflow-hidden">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Status
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Unit ID
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Last Seen
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Age
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Note
</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Actions
</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-gray-700">
{% for unit in units %}
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center space-x-2">
{% if unit.status == 'OK' %}
<span class="w-3 h-3 rounded-full bg-green-500" title="OK"></span>
{% elif unit.status == 'Pending' %}
<span class="w-3 h-3 rounded-full bg-yellow-500" title="Pending"></span>
{% else %}
<span class="w-3 h-3 rounded-full bg-red-500" title="Missing"></span>
{% endif %}
{% if unit.deployed %}
<span class="w-2 h-2 rounded-full bg-blue-500" title="Deployed"></span>
{% else %}
<span class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600" title="Benched"></span>
{% endif %}
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900 dark:text-white">{{ unit.id }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-500 dark:text-gray-400">{{ unit.last_seen }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm
{% if unit.status == 'Missing' %}text-red-600 dark:text-red-400 font-semibold
{% elif unit.status == 'Pending' %}text-yellow-600 dark:text-yellow-400
{% else %}text-gray-500 dark:text-gray-400
{% endif %}">
{{ unit.age }}
</div>
</td>
<td class="px-6 py-4">
<div class="text-sm text-gray-500 dark:text-gray-400 truncate max-w-xs" title="{{ unit.note }}">
{{ unit.note if unit.note else '-' }}
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="/unit/{{ unit.id }}" class="text-seismo-orange hover:text-seismo-burgundy inline-flex items-center">
View
<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>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- Last updated indicator -->
<div class="px-6 py-3 bg-gray-50 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400 text-right">
Last updated: <span id="last-updated">{{ timestamp }}</span>
</div>
</div>
<script>
// Update timestamp
document.getElementById('last-updated').textContent = new Date().toLocaleTimeString();
</script>

29
templates/roster.html Normal file
View File

@@ -0,0 +1,29 @@
{% 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 %}

268
templates/unit_detail.html Normal file
View File

@@ -0,0 +1,268 @@
{% extends "base.html" %}
{% block title %}Unit {{ unit_id }} - Seismo Fleet Manager{% endblock %}
{% block content %}
<div class="mb-6">
<a href="/roster" class="text-seismo-orange hover:text-seismo-burgundy inline-flex items-center mb-4">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
Back to Fleet Roster
</a>
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Unit {{ unit_id }}</h1>
</div>
<!-- Auto-refresh unit data -->
<div hx-get="/api/unit/{{ unit_id }}" hx-trigger="load, every 10s" hx-swap="none" hx-on::after-request="updateUnitData(event)">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Left Column: Unit Info -->
<div class="space-y-6">
<!-- Status Card -->
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Unit Status</h2>
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="text-gray-600 dark:text-gray-400">Status</span>
<div class="flex items-center space-x-2">
<span id="status-indicator" class="w-3 h-3 rounded-full bg-gray-400"></span>
<span id="status-text" class="font-semibold">Loading...</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-600 dark:text-gray-400">Deployed</span>
<span id="deployed-status" class="font-semibold">--</span>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-600 dark:text-gray-400">Age</span>
<span id="age-value" class="font-semibold">--</span>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-600 dark:text-gray-400">Last Seen</span>
<span id="last-seen-value" class="font-semibold">--</span>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-600 dark:text-gray-400">Last File</span>
<span id="last-file-value" class="font-mono text-sm">--</span>
</div>
</div>
</div>
<!-- Notes Card -->
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Notes</h2>
<div id="notes-content" class="text-gray-600 dark:text-gray-400">
Loading...
</div>
</div>
<!-- Metadata Card -->
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Edit Metadata</h2>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Unit Note
</label>
<textarea
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange focus:border-transparent"
rows="3"
placeholder="Enter notes about this unit...">
</textarea>
</div>
<button
type="button"
class="w-full px-4 py-2 bg-seismo-orange hover:bg-seismo-burgundy text-white rounded-lg font-medium transition-colors"
onclick="alert('Mock: Save functionality not implemented')">
Save Changes
</button>
</form>
</div>
</div>
<!-- Right Column: Tabbed Interface -->
<div class="space-y-6">
<!-- Tabs -->
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 overflow-hidden">
<div class="border-b border-gray-200 dark:border-gray-700">
<nav class="flex -mb-px">
<button
onclick="switchTab('photos')"
id="tab-photos"
class="tab-button flex-1 py-4 px-6 text-center border-b-2 font-medium text-sm transition-colors border-seismo-orange text-seismo-orange">
Photos
</button>
<button
onclick="switchTab('map')"
id="tab-map"
class="tab-button flex-1 py-4 px-6 text-center border-b-2 font-medium text-sm transition-colors border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
Map
</button>
<button
onclick="switchTab('history')"
id="tab-history"
class="tab-button flex-1 py-4 px-6 text-center border-b-2 font-medium text-sm transition-colors border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
History
</button>
</nav>
</div>
<!-- Tab Content -->
<div class="p-6">
<!-- Photos Tab -->
<div id="content-photos" class="tab-content">
<div hx-get="/api/unit/{{ unit_id }}/photos" hx-trigger="load" hx-swap="none" hx-on::after-request="updatePhotos(event)">
<div id="photos-container" class="text-center">
<div class="animate-pulse">
<div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4"></div>
<div class="grid grid-cols-4 gap-2">
<div class="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
<div class="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
<div class="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
<div class="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Map Tab -->
<div id="content-map" class="tab-content hidden">
<div id="map" style="height: 500px; width: 100%;" class="rounded-lg"></div>
<div id="location-info" class="mt-4 text-sm text-gray-600 dark:text-gray-400">
<p><strong>Location:</strong> <span id="location-name">Loading...</span></p>
<p><strong>Coordinates:</strong> <span id="coordinates">--</span></p>
</div>
</div>
<!-- History Tab -->
<div id="content-history" class="tab-content hidden">
<div class="text-center text-gray-500 dark:text-gray-400 py-12">
<svg class="w-16 h-16 mx-auto mb-4 opacity-50" 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>
<p class="text-lg font-medium">Event History</p>
<p class="text-sm mt-2">Event history will be displayed here</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
let unitData = null;
let map = null;
let marker = null;
function switchTab(tabName) {
// Update tab buttons
document.querySelectorAll('.tab-button').forEach(btn => {
btn.classList.remove('border-seismo-orange', 'text-seismo-orange');
btn.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400');
});
document.getElementById(`tab-${tabName}`).classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400');
document.getElementById(`tab-${tabName}`).classList.add('border-seismo-orange', 'text-seismo-orange');
// Update tab content
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.add('hidden');
});
document.getElementById(`content-${tabName}`).classList.remove('hidden');
// Initialize map if switching to map tab
if (tabName === 'map' && !map && unitData) {
setTimeout(() => initMap(), 100);
}
}
function updateUnitData(event) {
try {
unitData = JSON.parse(event.detail.xhr.response);
// Update status
const statusIndicator = document.getElementById('status-indicator');
const statusText = document.getElementById('status-text');
const statusColors = {
'OK': 'bg-green-500',
'Pending': 'bg-yellow-500',
'Missing': 'bg-red-500'
};
statusIndicator.className = `w-3 h-3 rounded-full ${statusColors[unitData.status] || 'bg-gray-400'}`;
statusText.textContent = unitData.status;
statusText.className = `font-semibold ${unitData.status === 'OK' ? 'text-green-600 dark:text-green-400' : unitData.status === 'Pending' ? 'text-yellow-600 dark:text-yellow-400' : 'text-red-600 dark:text-red-400'}`;
// Update other fields
document.getElementById('deployed-status').textContent = unitData.deployed ? '✓ Deployed' : '✗ Benched';
document.getElementById('age-value').textContent = unitData.age;
document.getElementById('last-seen-value').textContent = unitData.last_seen;
document.getElementById('last-file-value').textContent = unitData.last_file;
document.getElementById('notes-content').textContent = unitData.note || 'No notes available';
// Update location info
if (unitData.coordinates) {
document.getElementById('location-name').textContent = unitData.coordinates.location;
document.getElementById('coordinates').textContent = `${unitData.coordinates.lat.toFixed(4)}, ${unitData.coordinates.lon.toFixed(4)}`;
}
} catch (error) {
console.error('Error updating unit data:', error);
}
}
function updatePhotos(event) {
try {
const data = JSON.parse(event.detail.xhr.response);
const container = document.getElementById('photos-container');
if (data.photos.length === 0) {
container.innerHTML = `
<div class="text-center text-gray-500 dark:text-gray-400 py-12">
<svg class="w-16 h-16 mx-auto mb-4 opacity-50" 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>
<p class="text-lg font-medium">No Photos Available</p>
<p class="text-sm mt-2">Photos will appear here when uploaded</p>
</div>
`;
} else {
let html = `
<div class="mb-4">
<img src="${data.photo_urls[0]}" alt="Primary photo" class="w-full h-auto rounded-lg shadow-lg" id="primary-image">
</div>
<div class="grid grid-cols-4 gap-2">
`;
data.photo_urls.forEach((url, index) => {
html += `
<img src="${url}" alt="Photo ${index + 1}"
class="w-full h-20 object-cover rounded cursor-pointer hover:opacity-75 transition-opacity"
onclick="document.getElementById('primary-image').src = this.src">
`;
});
html += '</div>';
container.innerHTML = html;
}
} catch (error) {
console.error('Error updating photos:', error);
}
}
function initMap() {
if (!unitData || !unitData.coordinates) return;
const coords = unitData.coordinates;
map = L.map('map').setView([coords.lat, coords.lon], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
marker = L.marker([coords.lat, coords.lon]).addTo(map)
.bindPopup(`<b>${unitData.id}</b><br>${coords.location}`)
.openPopup();
}
</script>
{% endblock %}