266 lines
9.5 KiB
HTML
266 lines
9.5 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 -->
|
|
<<<<<<< Updated upstream
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- SLM List -->
|
|
<div class="lg:col-span-1">
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
|
|
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Active Units</h2>
|
|
|
|
<!-- Search/Filter -->
|
|
<div class="mb-4">
|
|
<input type="text"
|
|
placeholder="Search units..."
|
|
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
hx-get="/api/slm-dashboard/units"
|
|
hx-trigger="keyup changed delay:300ms"
|
|
hx-target="#slm-list"
|
|
hx-include="this"
|
|
name="search">
|
|
</div>
|
|
|
|
<!-- SLM List -->
|
|
<div id="slm-list"
|
|
class="space-y-2 max-h-[600px] overflow-y-auto"
|
|
hx-get="/api/slm-dashboard/units"
|
|
hx-trigger="load, every 10s"
|
|
hx-swap="innerHTML">
|
|
<!-- Loading skeleton -->
|
|
<div class="animate-pulse space-y-2">
|
|
<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 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 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>
|
|
|
|
<<<<<<< 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
|
|
function selectUnit(unitId) {
|
|
// Remove active state from all items
|
|
document.querySelectorAll('.slm-unit-item').forEach(item => {
|
|
item.classList.remove('bg-seismo-orange', 'text-white');
|
|
item.classList.add('bg-gray-100', 'dark:bg-gray-700');
|
|
});
|
|
|
|
// Add active state to clicked item
|
|
event.currentTarget.classList.remove('bg-gray-100', 'dark:bg-gray-700');
|
|
event.currentTarget.classList.add('bg-seismo-orange', 'text-white');
|
|
|
|
// Load live view for this unit
|
|
htmx.ajax('GET', `/api/slm-dashboard/live-view/${unitId}`, {
|
|
target: '#live-view-panel',
|
|
swap: 'innerHTML'
|
|
});
|
|
}
|
|
|
|
// Configuration modal functions
|
|
function openConfigModal(unitId) {
|
|
const modal = document.getElementById('config-modal');
|
|
modal.classList.remove('hidden');
|
|
|
|
// Load configuration form via HTMX
|
|
htmx.ajax('GET', `/api/slm-dashboard/config/${unitId}`, {
|
|
target: '#config-modal-content',
|
|
swap: 'innerHTML'
|
|
});
|
|
}
|
|
|
|
function closeConfigModal() {
|
|
document.getElementById('config-modal').classList.add('hidden');
|
|
}
|
|
|
|
// Close modal on escape key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
closeConfigModal();
|
|
}
|
|
});
|
|
|
|
// Close modal when clicking outside
|
|
document.getElementById('config-modal')?.addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeConfigModal();
|
|
}
|
|
});
|
|
|
|
// Initialize WebSocket for selected unit
|
|
let currentWebSocket = null;
|
|
|
|
function initLiveDataStream(unitId) {
|
|
// Close existing connection if any
|
|
if (currentWebSocket) {
|
|
currentWebSocket.close();
|
|
}
|
|
|
|
// WebSocket URL for SLMM backend via proxy
|
|
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
const wsUrl = `${wsProtocol}//${window.location.host}/api/slmm/${unitId}/live`;
|
|
|
|
currentWebSocket = new WebSocket(wsUrl);
|
|
|
|
currentWebSocket.onopen = function() {
|
|
console.log('WebSocket connected');
|
|
// Toggle button visibility
|
|
const startBtn = document.getElementById('start-stream-btn');
|
|
const stopBtn = document.getElementById('stop-stream-btn');
|
|
if (startBtn) startBtn.style.display = 'none';
|
|
if (stopBtn) stopBtn.style.display = 'flex';
|
|
};
|
|
|
|
currentWebSocket.onmessage = function(event) {
|
|
const data = JSON.parse(event.data);
|
|
updateLiveChart(data);
|
|
updateLiveMetrics(data);
|
|
};
|
|
|
|
currentWebSocket.onerror = function(error) {
|
|
console.error('WebSocket error:', error);
|
|
};
|
|
|
|
currentWebSocket.onclose = function() {
|
|
console.log('WebSocket closed');
|
|
// Toggle button visibility
|
|
const startBtn = document.getElementById('start-stream-btn');
|
|
const stopBtn = document.getElementById('stop-stream-btn');
|
|
if (startBtn) startBtn.style.display = 'flex';
|
|
if (stopBtn) stopBtn.style.display = 'none';
|
|
};
|
|
}
|
|
|
|
function stopLiveDataStream() {
|
|
if (currentWebSocket) {
|
|
currentWebSocket.close();
|
|
currentWebSocket = null;
|
|
}
|
|
}
|
|
|
|
// Update live chart with new data point
|
|
let chartData = {
|
|
timestamps: [],
|
|
lp: [],
|
|
leq: []
|
|
};
|
|
|
|
function updateLiveChart(data) {
|
|
const now = new Date();
|
|
chartData.timestamps.push(now.toLocaleTimeString());
|
|
chartData.lp.push(parseFloat(data.lp || 0));
|
|
chartData.leq.push(parseFloat(data.leq || 0));
|
|
|
|
// Keep only last 60 data points (1 minute at 1 sample/sec)
|
|
if (chartData.timestamps.length > 60) {
|
|
chartData.timestamps.shift();
|
|
chartData.lp.shift();
|
|
chartData.leq.shift();
|
|
}
|
|
|
|
// Update chart (using Chart.js if available)
|
|
if (window.liveChart) {
|
|
window.liveChart.data.labels = chartData.timestamps;
|
|
window.liveChart.data.datasets[0].data = chartData.lp;
|
|
window.liveChart.data.datasets[1].data = chartData.leq;
|
|
window.liveChart.update('none'); // Update without animation for smooth real-time
|
|
}
|
|
}
|
|
|
|
function updateLiveMetrics(data) {
|
|
// Update metric displays
|
|
if (document.getElementById('live-lp')) {
|
|
document.getElementById('live-lp').textContent = data.lp || '--';
|
|
}
|
|
if (document.getElementById('live-leq')) {
|
|
document.getElementById('live-leq').textContent = data.leq || '--';
|
|
}
|
|
if (document.getElementById('live-lmax')) {
|
|
document.getElementById('live-lmax').textContent = data.lmax || '--';
|
|
}
|
|
if (document.getElementById('live-lmin')) {
|
|
document.getElementById('live-lmin').textContent = data.lmin || '--';
|
|
}
|
|
}
|
|
|
|
// Cleanup on page unload
|
|
window.addEventListener('beforeunload', function() {
|
|
if (currentWebSocket) {
|
|
currentWebSocket.close();
|
|
}
|
|
});
|
|
</script>
|
|
=======
|
|
>>>>>>> Stashed changes
|
|
{% endblock %}
|