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.
96 lines
5.0 KiB
HTML
96 lines
5.0 KiB
HTML
<!-- Project Dashboard -->
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6">
|
|
<div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
|
|
<div>
|
|
<h2 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ project.name }}</h2>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
|
{% if project_type %}
|
|
{{ project_type.name }}
|
|
{% else %}
|
|
Project
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
{% if project.status == 'active' %}
|
|
<span class="px-3 py-1 text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 rounded-full">Active</span>
|
|
{% elif project.status == 'completed' %}
|
|
<span class="px-3 py-1 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 rounded-full">Completed</span>
|
|
{% elif project.status == 'archived' %}
|
|
<span class="px-3 py-1 text-xs font-medium bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300 rounded-full">Archived</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if project.description %}
|
|
<p class="text-gray-600 dark:text-gray-400 mt-4 max-w-3xl">{{ project.description }}</p>
|
|
{% endif %}
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Locations</p>
|
|
<p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ locations | length }}</p>
|
|
</div>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Assigned Units</p>
|
|
<p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ assigned_units | length }}</p>
|
|
</div>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Active Sessions</p>
|
|
<p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ active_sessions | length }}</p>
|
|
</div>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Completed Sessions</p>
|
|
<p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ completed_sessions_count }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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">
|
|
<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>
|
|
</div>
|
|
</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">Upcoming Actions</h3>
|
|
{% if upcoming_actions %}
|
|
<div class="space-y-3">
|
|
{% for action in upcoming_actions %}
|
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
|
|
<p class="font-medium text-gray-900 dark:text-white">{{ action.action_type }}</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ action.scheduled_time.strftime('%Y-%m-%d %H:%M') }}</p>
|
|
{% if action.description %}
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ action.description }}</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">No scheduled actions.</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|