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.
269 lines
13 KiB
HTML
269 lines
13 KiB
HTML
{% 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 %}
|