332 lines
14 KiB
HTML
332 lines
14 KiB
HTML
{% 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>
|
|
|
|
<!-- Fleet Map -->
|
|
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6 mb-8">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Fleet Map</h2>
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">Deployed units</span>
|
|
</div>
|
|
<div id="fleet-map" class="w-full h-96 rounded-lg"></div>
|
|
</div>
|
|
|
|
<!-- Fleet Status Section with Tabs -->
|
|
<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">
|
|
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>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
|
|
|
|
<!-- 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;
|
|
}
|
|
</style>
|
|
|
|
|
|
<script>
|
|
function updateDashboard(event) {
|
|
try {
|
|
const data = JSON.parse(event.detail.xhr.response);
|
|
|
|
// ===== Fleet summary numbers =====
|
|
document.getElementById('total-units').textContent = data.summary?.total ?? 0;
|
|
document.getElementById('deployed-units').textContent = data.summary?.active ?? 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;
|
|
|
|
// ===== Alerts =====
|
|
const alertsList = document.getElementById('alerts-list');
|
|
const missingUnits = Object.entries(data.units).filter(([_, u]) => u.status === 'Missing');
|
|
const pendingUnits = Object.entries(data.units).filter(([_, u]) => u.status === 'Pending');
|
|
|
|
if (!missingUnits.length && !pendingUnits.length) {
|
|
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 Map =====
|
|
updateFleetMap(data);
|
|
|
|
} catch (err) {
|
|
console.error("Dashboard update error:", err);
|
|
}
|
|
}
|
|
|
|
// Handle tab switching
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
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 = [];
|
|
|
|
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);
|
|
|
|
// Add OpenStreetMap tiles
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors',
|
|
maxZoom: 18
|
|
}).addTo(fleetMap);
|
|
}
|
|
|
|
function updateFleetMap(data) {
|
|
if (!fleetMap) return;
|
|
|
|
// Clear existing markers
|
|
fleetMarkers.forEach(marker => fleetMap.removeLayer(marker));
|
|
fleetMarkers = [];
|
|
|
|
// Get deployed units with location data
|
|
const deployedUnits = Object.entries(data.units).filter(([_, u]) => u.deployed && u.location);
|
|
|
|
if (deployedUnits.length === 0) {
|
|
return;
|
|
}
|
|
|
|
const bounds = [];
|
|
|
|
deployedUnits.forEach(([id, unit]) => {
|
|
const coords = parseLocation(unit.location);
|
|
if (coords) {
|
|
const [lat, lon] = coords;
|
|
|
|
// Create marker with custom color based on status
|
|
const markerColor = unit.status === 'OK' ? 'green' : unit.status === 'Pending' ? 'orange' : 'red';
|
|
|
|
const marker = L.circleMarker([lat, lon], {
|
|
radius: 8,
|
|
fillColor: markerColor,
|
|
color: '#fff',
|
|
weight: 2,
|
|
opacity: 1,
|
|
fillOpacity: 0.8
|
|
}).addTo(fleetMap);
|
|
|
|
// Add popup with unit info
|
|
marker.bindPopup(`
|
|
<div class="p-2">
|
|
<h3 class="font-bold text-lg">${id}</h3>
|
|
<p class="text-sm">Status: <span style="color: ${markerColor}">${unit.status}</span></p>
|
|
<p class="text-sm">Type: ${unit.device_type}</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 map to show all markers
|
|
if (bounds.length > 0) {
|
|
fleetMap.fitBounds(bounds, { padding: [50, 50] });
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
</script>
|
|
|
|
{% endblock %}
|