Move SLM control center groundwork onto dev

This commit is contained in:
serversdwn
2026-01-12 18:07:26 +00:00
parent 893cb96e8d
commit 8a5fadb5df
22 changed files with 3960 additions and 29 deletions

View File

@@ -21,6 +21,7 @@
</div>
<!-- Main Content Grid -->
<<<<<<< Updated upstream
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- SLM List -->
<div class="lg:col-span-1">
@@ -52,46 +53,59 @@
<div class="bg-gray-200 dark:bg-gray-700 h-20 rounded-lg"></div>
</div>
</div>
=======
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Projects Card -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Projects</h2>
<a href="/projects" class="text-sm text-seismo-orange hover:text-seismo-navy">View all</a>
>>>>>>> Stashed changes
</div>
</div>
<!-- Live View Panel -->
<div class="lg:col-span-2">
<div id="live-view-panel" class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
<!-- Initial state - no unit selected -->
<div class="flex flex-col items-center justify-center h-[600px] text-gray-400 dark:text-gray-500">
<svg class="w-24 h-24 mb-4" 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>
<p class="text-lg font-medium">No unit selected</p>
<p class="text-sm mt-2">Select a sound level meter from the list to view live data</p>
<div id="slm-projects-list"
class="space-y-3 max-h-[600px] overflow-y-auto"
hx-get="/api/projects/list?status=active&project_type_id=sound_monitoring&view=compact"
hx-trigger="load, every 60s"
hx-swap="innerHTML">
<div class="animate-pulse space-y-3">
<div class="bg-gray-200 dark:bg-gray-700 h-20 rounded-lg"></div>
<div class="bg-gray-200 dark:bg-gray-700 h-20 rounded-lg"></div>
<div class="bg-gray-200 dark:bg-gray-700 h-20 rounded-lg"></div>
</div>
</div>
</div>
</div>
<!-- Configuration Modal -->
<div id="config-modal" 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 p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
<div class="flex items-center justify-between mb-6">
<h3 class="text-2xl font-bold text-gray-900 dark:text-white">Configure SLM</h3>
<button onclick="closeConfigModal()" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
<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>
<!-- Devices Card -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Devices</h2>
<a href="/roster" class="text-sm text-seismo-orange hover:text-seismo-navy">Manage roster</a>
</div>
<<<<<<< Updated upstream
<div id="config-modal-content">
<!-- Content loaded via HTMX -->
<div class="animate-pulse space-y-4">
<div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
<div class="h-4 bg-gray-200 dark:bg-gray-700 rounded"></div>
<div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-5/6"></div>
=======
<div id="slm-devices-list"
class="space-y-3 max-h-[600px] overflow-y-auto"
hx-get="/api/slm-dashboard/units?include_measurement=true"
hx-trigger="load, every 15s"
hx-swap="innerHTML">
<div class="animate-pulse space-y-3">
<div class="bg-gray-200 dark:bg-gray-700 h-20 rounded-lg"></div>
<div class="bg-gray-200 dark:bg-gray-700 h-20 rounded-lg"></div>
<div class="bg-gray-200 dark:bg-gray-700 h-20 rounded-lg"></div>
>>>>>>> Stashed changes
</div>
</div>
</div>
</div>
<<<<<<< Updated upstream
<script>
// Function to select a unit and load live view
@@ -246,4 +260,6 @@ window.addEventListener('beforeunload', function() {
}
});
</script>
=======
>>>>>>> Stashed changes
{% endblock %}