feat: Add Rename Unit functionality and improve navigation in SLM dashboard
- Implemented a modal for renaming units with validation and confirmation prompts. - Added JavaScript functions to handle opening, closing, and submitting the rename unit form. - Enhanced the back navigation in the SLM detail page to check referrer history. - Updated breadcrumb navigation in the legacy dashboard to accommodate NRL locations. - Improved the sound level meters page with a more informative header and device list. - Introduced a live measurement chart with WebSocket support for real-time data streaming. - Added functionality to manage active devices and projects with auto-refresh capabilities.
This commit is contained in:
serversdwn
@@ -372,6 +372,12 @@
|
||||
<button type="submit" class="flex-1 px-4 py-2 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors">
|
||||
Save Changes
|
||||
</button>
|
||||
<button type="button" onclick="openRenameUnitModal()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
|
||||
</svg>
|
||||
Rename
|
||||
</button>
|
||||
<button type="button" onclick="closeEditUnitModal()" 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>
|
||||
@@ -380,6 +386,59 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rename Unit Modal -->
|
||||
<div id="renameUnitModal" 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-md 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">Rename Unit</h2>
|
||||
<button onclick="closeRenameUnitModal()" 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="renameUnitForm" class="p-6 space-y-4">
|
||||
<div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5" 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>
|
||||
<p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Important: Renaming Changes All References</p>
|
||||
<p class="text-xs text-yellow-700 dark:text-yellow-300 mt-1">
|
||||
This will update the unit ID everywhere including history, assignments, and sessions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Current Unit ID</label>
|
||||
<input type="text" id="renameOldId" readonly
|
||||
class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed font-mono">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Unit ID *</label>
|
||||
<input type="text" id="renameNewId" required pattern="[^\s]+" title="Unit ID cannot contain spaces"
|
||||
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-blue-500 font-mono"
|
||||
placeholder="Enter new unit ID (no spaces)">
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3 pt-4">
|
||||
<button type="submit" class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors font-medium">
|
||||
Rename Unit
|
||||
</button>
|
||||
<button type="button" onclick="closeRenameUnitModal()" 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">
|
||||
@@ -1077,6 +1136,76 @@
|
||||
function filterRosterTable() {
|
||||
filterDevices();
|
||||
}
|
||||
|
||||
// Rename Unit Modal Functions
|
||||
function openRenameUnitModal() {
|
||||
const currentUnitId = document.getElementById('editUnitId').value;
|
||||
document.getElementById('renameOldId').value = currentUnitId;
|
||||
document.getElementById('renameNewId').value = '';
|
||||
document.getElementById('renameUnitModal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function closeRenameUnitModal() {
|
||||
document.getElementById('renameUnitModal').classList.add('hidden');
|
||||
document.getElementById('renameUnitForm').reset();
|
||||
}
|
||||
|
||||
// Handle Rename Unit form submission
|
||||
document.getElementById('renameUnitForm').addEventListener('submit', async function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const oldId = document.getElementById('renameOldId').value;
|
||||
const newId = document.getElementById('renameNewId').value.trim();
|
||||
|
||||
if (!newId) {
|
||||
alert('Please enter a new unit ID');
|
||||
return;
|
||||
}
|
||||
|
||||
if (oldId === newId) {
|
||||
alert('New unit ID must be different from the current ID');
|
||||
return;
|
||||
}
|
||||
|
||||
// Final confirmation
|
||||
const confirmed = confirm(
|
||||
`Are you sure you want to rename '${oldId}' to '${newId}'?\n\n` +
|
||||
`This will update:\n` +
|
||||
`• Unit roster entry\n` +
|
||||
`• All history records\n` +
|
||||
`• Project assignments\n` +
|
||||
`• Recording sessions\n` +
|
||||
`• Modem references\n\n` +
|
||||
`This action cannot be undone.`
|
||||
);
|
||||
|
||||
if (!confirmed) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('old_id', oldId);
|
||||
formData.append('new_id', newId);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/roster/rename', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result.success) {
|
||||
alert(`✓ Successfully renamed unit from '${oldId}' to '${newId}'`);
|
||||
closeRenameUnitModal();
|
||||
closeEditUnitModal();
|
||||
// Reload the page to show updated unit ID
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert(`Error: ${result.detail || result.message || 'Failed to rename unit'}`);
|
||||
}
|
||||
} catch (error) {
|
||||
alert(`Error renaming unit: ${error.message}`);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user