04c66bdf9c
- Updated project_dashboard.html to conditionally display NRLs or Locations based on project type, and added a button to open a modal for adding locations. - Enhanced slm_device_list.html with a configuration button for each unit, allowing users to open a modal for device configuration. - Modified detail.html to include an edit project modal with a form for updating project details, including client name, status, and dates. - Improved sound_level_meters.html by restructuring the layout and adding a configuration modal for SLM devices. - Implemented JavaScript functions for handling modal interactions, including opening, closing, and submitting forms for project and location management.
116 lines
4.7 KiB
HTML
116 lines
4.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Sound Level Meters - Seismo Fleet Manager{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Sound Level Meters</h1>
|
|
<p class="text-gray-600 dark:text-gray-400 mt-1">Monitor and manage sound level measurement devices</p>
|
|
</div>
|
|
|
|
<!-- Summary Stats -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"
|
|
hx-get="/api/slm-dashboard/stats"
|
|
hx-trigger="load, every 10s"
|
|
hx-swap="innerHTML">
|
|
<!-- Stats will be loaded here -->
|
|
<div class="animate-pulse bg-gray-200 dark:bg-gray-700 h-24 rounded-xl"></div>
|
|
<div class="animate-pulse bg-gray-200 dark:bg-gray-700 h-24 rounded-xl"></div>
|
|
<div class="animate-pulse bg-gray-200 dark:bg-gray-700 h-24 rounded-xl"></div>
|
|
<div class="animate-pulse bg-gray-200 dark:bg-gray-700 h-24 rounded-xl"></div>
|
|
</div>
|
|
|
|
<!-- Main Content Grid -->
|
|
<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>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<!-- 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>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Configuration Modal -->
|
|
<div id="slm-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="closeDeviceConfigModal()" 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>
|
|
</div>
|
|
|
|
<div id="slm-config-modal-content">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openDeviceConfigModal(unitId) {
|
|
const modal = document.getElementById('slm-config-modal');
|
|
modal.classList.remove('hidden');
|
|
|
|
htmx.ajax('GET', `/api/slm-dashboard/config/${unitId}`, {
|
|
target: '#slm-config-modal-content',
|
|
swap: 'innerHTML'
|
|
});
|
|
}
|
|
|
|
function closeDeviceConfigModal() {
|
|
document.getElementById('slm-config-modal').classList.add('hidden');
|
|
}
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
closeDeviceConfigModal();
|
|
}
|
|
});
|
|
|
|
document.getElementById('slm-config-modal')?.addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeDeviceConfigModal();
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|