serversdown/terra-view
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat: add functionality to manage deleted projects in settings

Browse Source 
- Introduced a new section for displaying soft-deleted projects.
- Implemented loading of deleted projects via an API call.
- Added restore and permanently delete options for each deleted project.
- Integrated loading of deleted projects when the data tab is shown.
This commit is contained in:
serversdown
2026-04-01 05:42:10 +00:00
parent 20e180644e
commit f50cf2b7f6
4 changed files with 458 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
backend/routers/projects.py
View File

@@ -654,6 +654,40 @@ async def create_project(request: Request, db: Session = Depends(get_db)):
})
@router.get("/deleted")
async def list_deleted_projects(db: Session = Depends(get_db)):
"""List all soft-deleted projects."""
projects = (
db.query(Project)
.filter(Project.status == "deleted")
.order_by(Project.deleted_at.desc())
.all()
)
return JSONResponse([
{
"id": p.id,
"name": p.name,
"client_name": p.client_name,
"deleted_at": p.deleted_at.isoformat() if p.deleted_at else None,
}
for p in projects
])
@router.post("/{project_id}/restore")
async def restore_project(project_id: str, db: Session = Depends(get_db)):
"""Restore a soft-deleted project back to active."""
project = db.query(Project).filter_by(id=project_id).first()
if not project:
raise HTTPException(status_code=404, detail="Project not found")
if project.status != "deleted":
raise HTTPException(status_code=400, detail="Project is not deleted")
project.status = "active"
project.deleted_at = None
db.commit()
return {"success": True, "message": f"Project '{project.name}' restored."}
@router.get("/{project_id}")
async def get_project(project_id: str, db: Session = Depends(get_db)):
"""

5
templates/partials/projects/location_list.html
View File

@@ -10,11 +10,6 @@
class="font-semibold text-gray-900 dark:text-white hover:text-seismo-orange truncate">
{{ item.location.name }}
</a>
{% if item.location.location_type %}
<span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300">
{{ item.location.location_type|capitalize }}
</span>
{% endif %}
</div>
{% if item.location.description %}
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ item.location.description }}</p>

458
templates/projects/detail.html
View File

@@ -35,30 +35,21 @@
class="tab-button px-4 py-3 border-b-2 font-medium text-sm transition-colors border-seismo-orange text-seismo-orange whitespace-nowrap">
Overview
</button>
<button onclick="switchTab('locations')"
data-tab="locations"
class="tab-button px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
<span id="locations-tab-label">Locations</span>
<button id="vibration-tab-btn" onclick="switchTab('vibration')"
data-tab="vibration"
class="tab-button hidden px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
<svg class="w-4 h-4 inline mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
Vibration
</button>
<button id="units-tab-btn" onclick="switchTab('units')"
data-tab="units"
class="tab-button px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
Assigned Units
</button>
<button id="schedules-tab-btn" onclick="switchTab('schedules')"
data-tab="schedules"
class="tab-button px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
Schedules
</button>
<button id="sessions-tab-btn" onclick="switchTab('sessions')"
data-tab="sessions"
class="tab-button px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
Monitoring Sessions
</button>
<button id="data-tab-btn" onclick="switchTab('data')"
data-tab="data"
class="tab-button px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
Data Files
<button id="sound-tab-btn" onclick="switchTab('sound')"
data-tab="sound"
class="tab-button hidden px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
<svg class="w-4 h-4 inline mr-1.5" 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.072M12 6a7 7 0 010 14M8.464 8.464a5 5 0 000 7.072"/>
</svg>
Sound
</button>
<button onclick="switchTab('settings')"
data-tab="settings"
@@ -86,24 +77,81 @@
</div>
</div>
<!-- Locations Tab -->
<div id="locations-tab" class="tab-panel hidden">
<!-- Vibration Tab -->
<div id="vibration-tab" class="tab-panel hidden">
<!-- Vibration sub-nav -->
<div class="flex gap-0 mb-5 border-b border-gray-200 dark:border-gray-700">
<button id="vib-sub-locations-btn" onclick="switchVibSubTab('locations')"
class="vib-sub-tab px-4 py-2 text-sm font-medium border-b-2 border-seismo-orange text-seismo-orange -mb-px transition-colors whitespace-nowrap">
Locations
</button>
<!-- Future sub-tabs: Sessions, Data Files -->
</div>
<!-- Vibration Locations sub-panel -->
<div id="vib-sub-locations" class="vib-sub-panel">
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">
<span id="locations-header">Locations</span>
</h2>
<button onclick="openLocationModal()" id="add-location-btn"
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Monitoring Locations</h2>
<button onclick="openLocationModal('vibration')"
class="px-4 py-2 bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors">
<svg class="w-5 h-5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
<span id="add-location-label">Add Location</span>
Add Location
</button>
</div>
<div id="vibration-locations"
hx-get="/api/projects/{{ project_id }}/locations?location_type=vibration"
hx-trigger="load"
hx-swap="innerHTML">
<div class="text-center py-8 text-gray-500">Loading locations...</div>
</div>
</div>
</div>
</div>
<!-- Sound Tab -->
<div id="sound-tab" class="tab-panel hidden">
<!-- Sound sub-nav -->
<div class="flex gap-0 mb-5 border-b border-gray-200 dark:border-gray-700">
<button id="sound-sub-locations-btn" onclick="switchSoundSubTab('locations')"
class="sound-sub-tab px-4 py-2 text-sm font-medium border-b-2 border-seismo-orange text-seismo-orange -mb-px transition-colors whitespace-nowrap">
NRLs
</button>
<button id="sound-sub-sessions-btn" onclick="switchSoundSubTab('sessions')"
class="sound-sub-tab px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 -mb-px transition-colors whitespace-nowrap">
Sessions
</button>
<button id="sound-sub-data-btn" onclick="switchSoundSubTab('data')"
class="sound-sub-tab px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 -mb-px transition-colors whitespace-nowrap">
Data Files
</button>
<button id="sound-sub-units-btn" onclick="switchSoundSubTab('units')"
class="sound-sub-tab hidden px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 -mb-px transition-colors whitespace-nowrap">
Assigned Units
</button>
<button id="sound-sub-schedules-btn" onclick="switchSoundSubTab('schedules')"
class="sound-sub-tab hidden px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 -mb-px transition-colors whitespace-nowrap">
Schedules
</button>
</div>
<div id="project-locations"
hx-get="/api/projects/{{ project_id }}/locations"
<!-- NRLs sub-panel -->
<div id="sound-sub-locations" class="sound-sub-panel">
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Noise Recording Locations</h2>
<button onclick="openLocationModal('sound')"
class="px-4 py-2 bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors">
<svg class="w-5 h-5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
Add NRL
</button>
</div>
<div id="sound-locations"
hx-get="/api/projects/{{ project_id }}/locations?location_type=sound"
hx-trigger="load"
hx-swap="innerHTML">
<div class="text-center py-8 text-gray-500">Loading locations...</div>
@@ -111,86 +159,11 @@
</div>
</div>
<!-- Units Tab -->
<div id="units-tab" class="tab-panel hidden">
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Assigned Units</h2>
<div class="text-sm text-gray-500">
Units currently assigned to this project's locations
</div>
</div>
<div id="project-units"
hx-get="/api/projects/{{ project_id }}/units"
hx-trigger="load, every 30s"
hx-swap="innerHTML">
<div class="text-center py-8 text-gray-500">Loading units...</div>
</div>
</div>
</div>
<!-- Schedules Tab -->
<div id="schedules-tab" class="tab-panel hidden">
<!-- Recurring Schedules Section -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6">
<div class="flex items-center justify-between mb-6">
<div>
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Recurring Schedules</h2>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
Automated patterns that generate scheduled actions
</p>
</div>
<button onclick="openScheduleModal()"
class="px-4 py-2 bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors">
<svg class="w-5 h-5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
Create Schedule
</button>
</div>
<div id="recurring-schedule-list"
hx-get="/api/projects/{{ project_id }}/recurring-schedules/partials/list"
hx-trigger="load, refresh from:#recurring-schedule-list"
hx-swap="innerHTML">
<div class="text-center py-8 text-gray-500">Loading recurring schedules...</div>
</div>
</div>
<!-- Scheduled Actions Section -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
<div class="flex items-center justify-between mb-6">
<div>
<h2 id="schedules-title" class="text-xl font-semibold text-gray-900 dark:text-white">Upcoming Actions</h2>
<p id="schedules-subtitle" class="text-sm text-gray-500 dark:text-gray-400 mt-1">
Scheduled start/stop/download actions
</p>
</div>
<select id="schedules-filter" onchange="filterScheduledActions()"
class="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm">
<option value="pending">Pending</option>
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="failed">Failed</option>
</select>
</div>
<div id="project-schedules"
hx-get="/api/projects/{{ project_id }}/schedules?status=pending"
hx-trigger="load, every 30s, refresh from:#project-schedules"
hx-swap="innerHTML">
<div class="text-center py-8 text-gray-500">Loading scheduled actions...</div>
</div>
</div>
</div>
<!-- Monitoring Sessions Tab -->
<div id="sessions-tab" class="tab-panel hidden">
<!-- Sessions sub-panel -->
<div id="sound-sub-sessions" class="sound-sub-panel hidden">
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Monitoring Sessions</h2>
<div class="flex items-center gap-4">
<select id="sessions-filter" onchange="filterSessions()"
class="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm">
<option value="all">All Sessions</option>
@@ -199,8 +172,6 @@
<option value="failed">Failed</option>
</select>
</div>
</div>
<div id="project-sessions"
hx-get="/api/projects/{{ project_id }}/sessions"
hx-trigger="load, every 30s"
@@ -208,12 +179,9 @@
<div class="text-center py-8 text-gray-500">Loading sessions...</div>
</div>
</div>
<!-- Monthly Calendar -->
<div class="mt-6 bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Calendar View</h3>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Calendar View</h3>
<div id="sessions-calendar"
hx-get="/api/projects/{{ project_id }}/sessions-calendar"
hx-trigger="load"
@@ -223,9 +191,9 @@
</div>
</div>
<!-- Data Files Tab -->
<div id="data-tab" class="tab-panel hidden">
<!-- FTP File Browser (Download from Devices) -->
<!-- Data Files sub-panel -->
<div id="sound-sub-data" class="sound-sub-panel hidden">
<!-- FTP File Browser (remote projects only) -->
<div id="ftp-browser" class="mb-6"
hx-get="/api/projects/{{ project_id }}/ftp-browser"
hx-trigger="load"
@@ -234,14 +202,11 @@
<div class="text-center py-8 text-gray-500">Loading FTP browser...</div>
</div>
</div>
<!-- Unified Files View (Database + Filesystem) -->
<!-- Unified Files View -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg">
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">
Project Files
</h2>
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Project Files</h2>
<div class="flex items-center gap-3">
<button onclick="toggleUploadAll()"
class="px-3 py-2 text-sm bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors flex items-center gap-1.5">
@@ -260,7 +225,6 @@
</div>
</div>
</div>
<!-- Upload Data Panel -->
<div id="upload-all-panel" class="hidden border-b border-gray-200 dark:border-gray-700">
<div class="px-6 py-4 bg-gray-50 dark:bg-gray-800/50">
@@ -288,7 +252,6 @@
</button>
<span id="upload-all-status" class="text-sm hidden"></span>
</div>
<!-- Progress bar -->
<div id="upload-all-progress-wrap" class="hidden mt-3">
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
<span id="upload-all-progress-label">Uploading…</span>
@@ -299,11 +262,9 @@
style="width: 0%"></div>
</div>
</div>
<!-- Result summary -->
<div id="upload-all-results" class="hidden mt-3 text-sm space-y-1"></div>
</div>
</div>
<div id="unified-files"
hx-get="/api/projects/{{ project_id }}/files-unified"
hx-trigger="load, refresh from:#unified-files"
@@ -313,6 +274,69 @@
</div>
</div>
<!-- Assigned Units sub-panel (remote only) -->
<div id="sound-sub-units" class="sound-sub-panel hidden">
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Assigned Units</h2>
<div class="text-sm text-gray-500">Units currently assigned to this project's NRLs</div>
</div>
<div id="project-units"
hx-get="/api/projects/{{ project_id }}/units"
hx-trigger="load, every 30s"
hx-swap="innerHTML">
<div class="text-center py-8 text-gray-500">Loading units...</div>
</div>
</div>
</div>
<!-- Schedules sub-panel (remote only) -->
<div id="sound-sub-schedules" class="sound-sub-panel hidden">
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6">
<div class="flex items-center justify-between mb-6">
<div>
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Recurring Schedules</h2>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Automated patterns that generate scheduled actions</p>
</div>
<button onclick="openScheduleModal()"
class="px-4 py-2 bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors">
<svg class="w-5 h-5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
Create Schedule
</button>
</div>
<div id="recurring-schedule-list"
hx-get="/api/projects/{{ project_id }}/recurring-schedules/partials/list"
hx-trigger="load, refresh from:#recurring-schedule-list"
hx-swap="innerHTML">
<div class="text-center py-8 text-gray-500">Loading recurring schedules...</div>
</div>
</div>
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
<div class="flex items-center justify-between mb-6">
<div>
<h2 id="schedules-title" class="text-xl font-semibold text-gray-900 dark:text-white">Upcoming Actions</h2>
<p id="schedules-subtitle" class="text-sm text-gray-500 dark:text-gray-400 mt-1">Scheduled start/stop/download actions</p>
</div>
<select id="schedules-filter" onchange="filterScheduledActions()"
class="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm">
<option value="pending">Pending</option>
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="failed">Failed</option>
</select>
</div>
<div id="project-schedules"
hx-get="/api/projects/{{ project_id }}/schedules?status=pending"
hx-trigger="load, every 30s, refresh from:#project-schedules"
hx-swap="innerHTML">
<div class="text-center py-8 text-gray-500">Loading scheduled actions...</div>
</div>
</div>
</div>
</div>
<!-- Settings Tab -->
<div id="settings-tab" class="tab-panel hidden">
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
@@ -350,30 +374,6 @@
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Data Collection</label>
<div class="grid grid-cols-2 gap-3">
<label class="flex items-start gap-3 p-3 border-2 rounded-lg cursor-pointer" id="settings-mode-manual-label">
<input type="radio" name="data_collection_mode" id="settings-mode-manual" value="manual"
onchange="settingsUpdateModeStyles()"
class="mt-0.5 accent-seismo-orange shrink-0">
<div>
<p class="text-sm font-medium text-gray-900 dark:text-white">Manual</p>
<p class="text-xs text-gray-500 dark:text-gray-400">SD card retrieved daily</p>
</div>
</label>
<label class="flex items-start gap-3 p-3 border-2 rounded-lg cursor-pointer" id="settings-mode-remote-label">
<input type="radio" name="data_collection_mode" id="settings-mode-remote" value="remote"
onchange="settingsUpdateModeStyles()"
class="mt-0.5 accent-seismo-orange shrink-0">
<div>
<p class="text-sm font-medium text-gray-900 dark:text-white">Remote</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Modem, data pulled via FTP</p>
</div>
</label>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Site Address</label>
<input type="text" name="site_address" id="settings-site-address"
@@ -400,6 +400,40 @@
</div>
</div>
<div id="sound-settings-section" class="hidden">
<div class="border-t border-gray-200 dark:border-gray-700 pt-5 mb-4">
<h3 class="text-base font-semibold text-gray-900 dark:text-white 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.536 8.464a5 5 0 010 7.072M12 6a7 7 0 010 14M8.464 8.464a5 5 0 000 7.072"/>
</svg>
Sound Monitoring
</h3>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Data Collection</label>
<div class="grid grid-cols-2 gap-3">
<label class="flex items-start gap-3 p-3 border-2 rounded-lg cursor-pointer" id="settings-mode-manual-label">
<input type="radio" name="data_collection_mode" id="settings-mode-manual" value="manual"
onchange="settingsUpdateModeStyles()"
class="mt-0.5 accent-seismo-orange shrink-0">
<div>
<p class="text-sm font-medium text-gray-900 dark:text-white">Manual</p>
<p class="text-xs text-gray-500 dark:text-gray-400">SD card retrieved daily</p>
</div>
</label>
<label class="flex items-start gap-3 p-3 border-2 rounded-lg cursor-pointer" id="settings-mode-remote-label">
<input type="radio" name="data_collection_mode" id="settings-mode-remote" value="remote"
onchange="settingsUpdateModeStyles()"
class="mt-0.5 accent-seismo-orange shrink-0">
<div>
<p class="text-sm font-medium text-gray-900 dark:text-white">Remote</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Modem, data pulled via FTP</p>
</div>
</label>
</div>
</div>
</div>
<div id="settings-success" class="hidden text-sm text-green-600 dark:text-green-400"></div>
<div id="settings-error" class="hidden text-sm text-red-600"></div>
@@ -792,34 +826,52 @@ async function quickUpdateStatus(newStatus) {
// Tab switching
function switchTab(tabName) {
// Hide all tab panels
document.querySelectorAll('.tab-panel').forEach(panel => {
panel.classList.add('hidden');
});
// Reset all tab buttons
document.querySelectorAll('.tab-panel').forEach(panel => panel.classList.add('hidden'));
document.querySelectorAll('.tab-button').forEach(button => {
button.classList.remove('border-seismo-orange', 'text-seismo-orange');
button.classList.add('border-transparent', 'text-gray-600', 'dark:text-gray-400');
});
// Show selected tab panel
const panel = document.getElementById(`${tabName}-tab`);
if (panel) {
panel.classList.remove('hidden');
}
if (panel) panel.classList.remove('hidden');
// Highlight selected tab button
const button = document.querySelector(`[data-tab="${tabName}"]`);
if (button) {
button.classList.remove('border-transparent', 'text-gray-600', 'dark:text-gray-400');
button.classList.add('border-seismo-orange', 'text-seismo-orange');
}
// Persist active tab in URL hash so refresh stays on this tab
history.replaceState(null, '', `#${tabName}`);
}
function switchVibSubTab(name) {
document.querySelectorAll('.vib-sub-panel').forEach(p => p.classList.add('hidden'));
document.querySelectorAll('.vib-sub-tab').forEach(b => {
b.classList.remove('border-seismo-orange', 'text-seismo-orange');
b.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400');
});
document.getElementById(`vib-sub-${name}`)?.classList.remove('hidden');
const btn = document.getElementById(`vib-sub-${name}-btn`);
if (btn) {
btn.classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400');
btn.classList.add('border-seismo-orange', 'text-seismo-orange');
}
}
function switchSoundSubTab(name) {
document.querySelectorAll('.sound-sub-panel').forEach(p => p.classList.add('hidden'));
document.querySelectorAll('.sound-sub-tab').forEach(b => {
b.classList.remove('border-seismo-orange', 'text-seismo-orange');
b.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400');
});
document.getElementById(`sound-sub-${name}`)?.classList.remove('hidden');
const btn = document.getElementById(`sound-sub-${name}-btn`);
if (btn) {
btn.classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400');
btn.classList.add('border-seismo-orange', 'text-seismo-orange');
}
}
// Load project details
async function loadProjectDetails() {
try {
@@ -849,23 +901,20 @@ async function loadProjectDetails() {
if (modeRadio) modeRadio.checked = true;
settingsUpdateModeStyles();
// Update tab labels and visibility based on active modules
// Show/hide module tabs based on active modules
const hasSoundModule = projectModules.includes('sound_monitoring');
const hasVibrationModule = projectModules.includes('vibration_monitoring');
if (hasSoundModule && !hasVibrationModule) {
document.getElementById('locations-tab-label').textContent = 'NRLs';
document.getElementById('locations-header').textContent = 'Noise Recording Locations';
document.getElementById('add-location-label').textContent = 'Add NRL';
}
// Monitoring Sessions and Data Files tabs are sound-only
// Data Files also hides the FTP browser section for manual projects
const isRemote = mode === 'remote';
document.getElementById('sessions-tab-btn').classList.toggle('hidden', !hasSoundModule);
document.getElementById('data-tab-btn').classList.toggle('hidden', !hasSoundModule);
// Schedules and Assigned Units: hidden when no sound module; for sound, only show if remote
document.getElementById('schedules-tab-btn')?.classList.toggle('hidden', !hasSoundModule || !isRemote);
document.getElementById('units-tab-btn')?.classList.toggle('hidden', !hasSoundModule || !isRemote);
// FTP browser within Data Files tab
document.getElementById('vibration-tab-btn').classList.toggle('hidden', !hasVibrationModule);
document.getElementById('sound-tab-btn').classList.toggle('hidden', !hasSoundModule);
document.getElementById('sound-settings-section')?.classList.toggle('hidden', !hasSoundModule);
// Within Sound: show Assigned Units + Schedules sub-tabs only for remote projects
document.getElementById('sound-sub-units-btn')?.classList.toggle('hidden', !isRemote);
document.getElementById('sound-sub-schedules-btn')?.classList.toggle('hidden', !isRemote);
// FTP browser: only show for remote projects
document.getElementById('ftp-browser')?.classList.toggle('hidden', !isRemote);
document.getElementById('settings-error').classList.add('hidden');
@@ -983,7 +1032,14 @@ function updateModeLabels() {
}
}
// Tracks the active location type tab so "Add Location" opens with the right type
let _activeLocationType = null;
function setActiveLocationType(type) {
_activeLocationType = type;
}
function openLocationModal(defaultType) {
defaultType = defaultType || _activeLocationType || defaultType;
editingLocationId = null;
document.getElementById('location-modal-title').textContent = 'Add Location';
document.getElementById('location-id').value = '';
@@ -1110,12 +1166,8 @@ document.getElementById('location-form').addEventListener('submit', async functi
}
closeLocationModal();
refreshLocationLists();
refreshProjectDashboard();
// Refresh locations tab if visible
htmx.ajax('GET', `/api/projects/${projectId}/locations`, {
target: '#project-locations',
swap: 'innerHTML'
});
} catch (err) {
const errorEl = document.getElementById('location-error');
errorEl.textContent = err.message || 'Failed to save location.';
@@ -1123,6 +1175,15 @@ document.getElementById('location-form').addEventListener('submit', async functi
}
});
function refreshLocationLists() {
htmx.ajax('GET', `/api/projects/${projectId}/locations?location_type=sound`, {
target: '#sound-locations', swap: 'innerHTML'
});
htmx.ajax('GET', `/api/projects/${projectId}/locations?location_type=vibration`, {
target: '#vibration-locations', swap: 'innerHTML'
});
}
async function deleteLocation(locationId) {
if (!confirm('Delete this location?')) return;
@@ -1134,11 +1195,8 @@ async function deleteLocation(locationId) {
const data = await response.json().catch(() => ({}));
throw new Error(data.detail || 'Failed to delete location');
}
refreshLocationLists();
refreshProjectDashboard();
htmx.ajax('GET', `/api/projects/${projectId}/locations`, {
target: '#project-locations',
swap: 'innerHTML'
});
} catch (err) {
alert(err.message || 'Failed to delete location.');
}
@@ -1212,11 +1270,8 @@ document.getElementById('assign-form').addEventListener('submit', async function
throw new Error(data.detail || 'Failed to assign unit');
}
closeAssignModal();
refreshLocationLists();
refreshProjectDashboard();
htmx.ajax('GET', `/api/projects/${projectId}/locations`, {
target: '#project-locations',
swap: 'innerHTML'
});
} catch (err) {
const errorEl = document.getElementById('assign-error');
errorEl.textContent = err.message || 'Failed to assign unit.';
@@ -1235,11 +1290,8 @@ async function unassignUnit(assignmentId) {
const data = await response.json().catch(() => ({}));
throw new Error(data.detail || 'Failed to unassign unit');
}
refreshLocationLists();
refreshProjectDashboard();
htmx.ajax('GET', `/api/projects/${projectId}/locations`, {
target: '#project-locations',
swap: 'innerHTML'
});
} catch (err) {
alert(err.message || 'Failed to unassign unit.');
}
@@ -1839,11 +1891,21 @@ function submitUploadAll() {
document.addEventListener('DOMContentLoaded', function() {
loadProjectDetails();
// Restore tab from URL hash (e.g. #schedules, #settings)
// Restore tab from URL hash
const hash = window.location.hash.replace('#', '');
const validTabs = ['overview', 'locations', 'units', 'schedules', 'sessions', 'data', 'settings'];
if (hash && validTabs.includes(hash)) {
switchTab(hash);
const validTabs = ['overview', 'vibration', 'sound', 'settings'];
// Backwards compat: map old tab names to new ones
const hashMap = { locations: 'sound', units: 'sound', schedules: 'sound', sessions: 'sound', data: 'sound' };
const subTabMap = { units: 'units', schedules: 'schedules', sessions: 'sessions', data: 'data' };
if (hash) {
const mappedTab = hashMap[hash] || hash;
if (validTabs.includes(mappedTab)) {
switchTab(mappedTab);
// Open the relevant sub-tab for backwards compat
if (subTabMap[hash]) {
switchSoundSubTab(subTabMap[hash]);
}
}
}
});

83
templates/settings.html
View File

@@ -355,6 +355,25 @@
</form>
<div id="uploadResult" class="hidden mt-3"></div>
</div>
<!-- Deleted Projects -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
<div class="flex items-center justify-between mb-4">
<div>
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Deleted Projects</h2>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Projects that have been soft-deleted. Restore them or permanently remove them.</p>
</div>
<button onclick="loadDeletedProjects()" class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
</svg>
Refresh
</button>
</div>
<div id="deletedProjectsList">
<p class="text-sm text-gray-400 dark:text-gray-500 italic">Loading...</p>
</div>
</div>
</div>
</div>
@@ -584,6 +603,67 @@
</style>
<script>
// ========== DELETED PROJECTS ==========
async function loadDeletedProjects() {
const container = document.getElementById('deletedProjectsList');
container.innerHTML = '<p class="text-sm text-gray-400 dark:text-gray-500 italic">Loading...</p>';
try {
const resp = await fetch('/api/projects/deleted');
const projects = await resp.json();
if (!projects.length) {
container.innerHTML = '<p class="text-sm text-gray-400 dark:text-gray-500 italic">No deleted projects.</p>';
return;
}
container.innerHTML = `
<div class="divide-y divide-gray-100 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
${projects.map(p => `
<div class="flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-gray-900/30">
<div>
<div class="font-medium text-gray-900 dark:text-white">${p.name}</div>
<div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
${p.client_name ? p.client_name + ' &middot; ' : ''}Deleted ${new Date(p.deleted_at).toLocaleDateString()}
</div>
</div>
<div class="flex items-center gap-2 ml-4">
<button onclick="restoreProject('${p.id}', '${p.name.replace(/'/g, "\\'")}')"
class="px-3 py-1 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
Restore
</button>
<button onclick="permanentlyDeleteProject('${p.id}', '${p.name.replace(/'/g, "\\'")}')"
class="px-3 py-1 text-xs bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
Delete Permanently
</button>
</div>
</div>`).join('')}
</div>`;
} catch (e) {
container.innerHTML = '<p class="text-sm text-red-500">Failed to load deleted projects.</p>';
}
}
async function restoreProject(projectId, name) {
if (!confirm(`Restore "${name}"?`)) return;
const resp = await fetch(`/api/projects/${projectId}/restore`, { method: 'POST' });
if (resp.ok) {
loadDeletedProjects();
} else {
const d = await resp.json();
alert('Failed to restore: ' + (d.detail || 'Unknown error'));
}
}
async function permanentlyDeleteProject(projectId, name) {
if (!confirm(`Permanently delete "${name}" and all its data? This cannot be undone.`)) return;
const resp = await fetch(`/api/projects/${projectId}/permanent`, { method: 'DELETE' });
if (resp.ok) {
loadDeletedProjects();
} else {
const d = await resp.json();
alert('Failed to delete: ' + (d.detail || 'Unknown error'));
}
}
// ========== TAB MANAGEMENT ==========
function showTab(tabName) {
@@ -609,9 +689,10 @@ function showTab(tabName) {
// Save last active tab to localStorage
localStorage.setItem('settings-last-tab', tabName);
// Load roster table when data tab is shown
// Load roster table and deleted projects when data tab is shown
if (tabName === 'data') {
loadRosterTable();
loadDeletedProjects();
}
}