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

feat(projects): reusable location-map partial + add map to Vibration tab

Browse Source 
The map sidebar that replaced Upcoming Actions on the project overview
is now also on the deeper Vibration tab — operators get the same
spatial context when they drill into vibration monitoring locations.

Refactor
- New partial templates/partials/projects/location_map.html.
  Self-contained: includes the map div + a self-fetch script that
  pulls coords from /api/projects/{p}/locations-json on load.
  Accepts:
    - project_id  (required)
    - map_height  (default "320px")
    - location_type ('vibration' | 'sound' | none = all)
- project_dashboard.html: ~150 lines of inline map JS deleted, replaced
  with {% include 'partials/projects/location_map.html' %}.  Identical
  behavior, less duplication.
- projects/detail.html Vibration tab: locations list converted to a
  2/3 + 1/3 grid; right column hosts the same map partial filtered
  to location_type=vibration with a taller 450px viewport.

Bidirectional hover-highlight (card ↔ pin) works on both surfaces
since the partial registers its own document-level mouseover/mouseout
handlers.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
serversdown
2026-05-15 06:36:55 +00:00
parent 825c7370b8
commit 4dcfcbdc45
3 changed files with 199 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/projects/detail.html
+26 -15
View File
@@ -101,22 +101,33 @@
</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">
<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>
Add Location
</button>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 lg:col-span-2">
<div class="flex items-center justify-between mb-6">
<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>
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 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>
{# Reusable location map — fetches from /locations-json
on its own. Hovering any of the location cards on the
left highlights the matching pin on this map. #}
<div>
{% with project_id=project_id, location_type='vibration', map_height='450px' %}
{% include 'partials/projects/location_map.html' %}
{% endwith %}
</div>
</div>
</div>