229 lines
12 KiB
HTML
229 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Fleet Roster - Seismo Fleet Manager{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="mb-8">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<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>
|
|
<div class="flex gap-3">
|
|
<button onclick="openAddUnitModal()" class="px-4 py-2 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg flex items-center gap-2 transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
|
</svg>
|
|
Add Unit
|
|
</button>
|
|
<button onclick="openImportModal()" class="px-4 py-2 bg-seismo-navy hover:bg-blue-800 text-white rounded-lg flex items-center gap-2 transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
|
|
</svg>
|
|
Import CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
<!-- Add Unit Modal -->
|
|
<div id="addUnitModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
|
|
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Add Unit</h2>
|
|
<button onclick="closeAddUnitModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<form id="addUnitForm" hx-post="/api/roster/add" hx-swap="none" class="p-6 space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Unit ID *</label>
|
|
<input type="text" name="id" required
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange"
|
|
placeholder="BE1234">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Unit Type</label>
|
|
<input type="text" name="unit_type" value="series3"
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project ID</label>
|
|
<input type="text" name="project_id"
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange"
|
|
placeholder="PROJ-001">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Location</label>
|
|
<input type="text" name="location"
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange"
|
|
placeholder="San Francisco, CA">
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" name="deployed" value="true" checked
|
|
class="w-4 h-4 text-seismo-orange focus:ring-seismo-orange rounded">
|
|
<span class="text-sm text-gray-700 dark:text-gray-300">Deployed</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Notes</label>
|
|
<textarea name="note" rows="3"
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange"
|
|
placeholder="Additional notes..."></textarea>
|
|
</div>
|
|
<div class="flex gap-3 pt-4">
|
|
<button type="submit" class="flex-1 px-4 py-2 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors">
|
|
Add Unit
|
|
</button>
|
|
<button type="button" onclick="closeAddUnitModal()" class="px-4 py-2 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-700 dark:text-white rounded-lg transition-colors">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Import CSV Modal -->
|
|
<div id="importModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl max-w-lg w-full mx-4">
|
|
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Import CSV</h2>
|
|
<button onclick="closeImportModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<form id="importForm" class="p-6 space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CSV File *</label>
|
|
<input type="file" name="file" accept=".csv" required
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Format: unit_id,unit_type,deployed,retired,note,project_id,location</p>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<input type="checkbox" name="update_existing" id="updateExisting" checked
|
|
class="w-4 h-4 text-seismo-orange focus:ring-seismo-orange rounded">
|
|
<label for="updateExisting" class="text-sm text-gray-700 dark:text-gray-300 cursor-pointer">Update existing units</label>
|
|
</div>
|
|
<div class="flex gap-3 pt-4">
|
|
<button type="submit" class="flex-1 px-4 py-2 bg-seismo-navy hover:bg-blue-800 text-white rounded-lg transition-colors">
|
|
Import
|
|
</button>
|
|
<button type="button" onclick="closeImportModal()" class="px-4 py-2 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-700 dark:text-white rounded-lg transition-colors">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
<div id="importResult" class="hidden mt-4 p-4 rounded-lg"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Add Unit Modal
|
|
function openAddUnitModal() {
|
|
document.getElementById('addUnitModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeAddUnitModal() {
|
|
document.getElementById('addUnitModal').classList.add('hidden');
|
|
document.getElementById('addUnitForm').reset();
|
|
}
|
|
|
|
// Import Modal
|
|
function openImportModal() {
|
|
document.getElementById('importModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeImportModal() {
|
|
document.getElementById('importModal').classList.add('hidden');
|
|
document.getElementById('importForm').reset();
|
|
document.getElementById('importResult').classList.add('hidden');
|
|
}
|
|
|
|
// Handle Add Unit form submission
|
|
document.getElementById('addUnitForm').addEventListener('htmx:afterRequest', function(event) {
|
|
if (event.detail.successful) {
|
|
closeAddUnitModal();
|
|
// Trigger roster refresh
|
|
htmx.trigger(document.querySelector('[hx-get="/partials/roster-table"]'), 'load');
|
|
// Show success message
|
|
alert('Unit added successfully!');
|
|
} else {
|
|
alert('Error adding unit. Please check the form and try again.');
|
|
}
|
|
});
|
|
|
|
// Handle CSV Import
|
|
document.getElementById('importForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
const resultDiv = document.getElementById('importResult');
|
|
|
|
try {
|
|
const response = await fetch('/api/roster/import-csv', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
resultDiv.className = 'mt-4 p-4 rounded-lg bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200';
|
|
resultDiv.innerHTML = `
|
|
<p class="font-semibold mb-2">Import Successful!</p>
|
|
<ul class="text-sm space-y-1">
|
|
<li>✅ Added: ${result.summary.added}</li>
|
|
<li>🔄 Updated: ${result.summary.updated}</li>
|
|
<li>⏭️ Skipped: ${result.summary.skipped}</li>
|
|
<li>❌ Errors: ${result.summary.errors}</li>
|
|
</ul>
|
|
`;
|
|
resultDiv.classList.remove('hidden');
|
|
|
|
// Trigger roster refresh
|
|
htmx.trigger(document.querySelector('[hx-get="/partials/roster-table"]'), 'load');
|
|
|
|
// Close modal after 2 seconds
|
|
setTimeout(() => closeImportModal(), 2000);
|
|
} else {
|
|
resultDiv.className = 'mt-4 p-4 rounded-lg bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
|
|
resultDiv.innerHTML = `<p class="font-semibold">Import Failed</p><p class="text-sm">${result.detail || 'Unknown error'}</p>`;
|
|
resultDiv.classList.remove('hidden');
|
|
}
|
|
} catch (error) {
|
|
resultDiv.className = 'mt-4 p-4 rounded-lg bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
|
|
resultDiv.innerHTML = `<p class="font-semibold">Import Failed</p><p class="text-sm">${error.message}</p>`;
|
|
resultDiv.classList.remove('hidden');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|