Refactor project dashboard and device list templates; add modals for editing projects and locations

- 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.
This commit is contained in:
serversdwn
2026-01-12 23:07:25 +00:00
parent 8a5fadb5df
commit 04c66bdf9c
9 changed files with 705 additions and 226 deletions

View File

@@ -44,47 +44,34 @@
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Locations</h3>
{% if locations %}
<div class="space-y-3">
{% for location in locations %}
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
<p class="font-medium text-gray-900 dark:text-white">{{ location.name }}</p>
{% if location.address %}
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ location.address }}</p>
{% endif %}
{% if location.coordinates %}
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ location.coordinates }}</p>
{% endif %}
</div>
{% endfor %}
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
{% if project_type and project_type.id == 'sound_monitoring' %}
NRLs
{% else %}
Locations
{% endif %}
</h3>
<button onclick="openLocationModal('{% if project_type and project_type.id == 'sound_monitoring' %}sound{% elif project_type and project_type.id == 'vibration_monitoring' %}vibration{% else %}{% endif %}')" class="text-sm text-seismo-orange hover:text-seismo-navy">
{% if project_type and project_type.id == 'sound_monitoring' %}
Add NRL
{% else %}
Add Location
{% endif %}
</button>
</div>
<div id="project-locations"
hx-get="/api/projects/{{ project.id }}/locations{% if project_type and project_type.id == 'sound_monitoring' %}?location_type=sound{% endif %}"
hx-trigger="load"
hx-swap="innerHTML">
<div class="animate-pulse space-y-3">
<div class="bg-gray-200 dark:bg-gray-700 h-16 rounded-lg"></div>
<div class="bg-gray-200 dark:bg-gray-700 h-16 rounded-lg"></div>
<div class="bg-gray-200 dark:bg-gray-700 h-16 rounded-lg"></div>
</div>
{% else %}
<p class="text-sm text-gray-500 dark:text-gray-400">No locations added yet.</p>
{% endif %}
</div>
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Assigned Units</h3>
{% if assigned_units %}
<div class="space-y-3">
{% for item in assigned_units %}
<a href="/slm/{{ item.unit.id }}" class="block border border-gray-200 dark:border-gray-700 rounded-lg p-3 hover:border-seismo-orange transition-colors">
<p class="font-medium text-gray-900 dark:text-white">{{ item.unit.id }}</p>
{% if item.unit.slm_model %}
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ item.unit.slm_model }}</p>
{% endif %}
{% if item.unit.address %}
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ item.unit.address }}</p>
{% endif %}
</a>
{% endfor %}
</div>
{% else %}
<p class="text-sm text-gray-500 dark:text-gray-400">No units assigned yet.</p>
{% endif %}
</div>
</div>
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">