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/partials/projects/project_dashboard.html
+14 -168
View File
@@ -78,173 +78,19 @@
</div>
</div>
<!-- Location Map — replaces the old Upcoming Actions panel for the
overview. Operators get a quick visual of where their locations
sit relative to each other. Pins clickable → scroll to + flash
the matching card. Locations without coordinates land in a
"missing coords" hint below the map.
For projects with scheduled monitoring activity, the full
Upcoming Actions list is still available on the Schedules tab. -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-4">
<div class="flex items-center justify-between mb-3">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Location Map</h3>
{% if upcoming_actions %}
<a href="javascript:void(0)" onclick="switchTab('schedules')"
class="text-xs text-seismo-orange hover:text-seismo-navy whitespace-nowrap">
{{ upcoming_actions | length }} upcoming action{{ '' if upcoming_actions | length == 1 else 's' }} →
</a>
{% endif %}
</div>
<!-- `isolation: isolate` forces a new stacking context so Leaflet's
internal z-indexes (panes at 200-700, controls at 800) stay
contained inside this div instead of leaking into the root
stacking context and rendering over modals (which have z-50). -->
<div id="project-location-map" class="w-full rounded-lg border border-gray-200 dark:border-gray-700"
style="height: 320px; background: rgba(0,0,0,0.05); isolation: isolate;"></div>
<div id="project-location-map-empty" class="hidden text-xs text-gray-500 dark:text-gray-400 mt-2 italic text-center">
No location coordinates set. Edit a location and add a <code class="font-mono">lat,lon</code> pair to see it here.
</div>
<div id="project-location-map-missing" class="hidden text-xs text-gray-500 dark:text-gray-400 mt-2"></div>
</div>
{# Location map — uses the reusable partial that fetches from
/api/projects/{p}/locations-json. Same render is reused on the
deeper Vibration tab so both surfaces stay in sync. #}
{% with project_id=project.id %}
{% include 'partials/projects/location_map.html' %}
{% endwith %}
</div>
<script>
(function () {
// Build location data from server-side render. Skip removed
// locations (their pins would clutter the active operations view)
// and skip ones without parseable coordinates.
const locationsRaw = [
{% for loc in locations %}
{% if not loc.removed_at %}
{
id: {{ loc.id | tojson }},
name: {{ loc.name | tojson }},
coords: {{ loc.coordinates | tojson if loc.coordinates else 'null' }},
}{% if not loop.last %},{% endif %}
{% endif %}
{% endfor %}
];
function parseCoords(s) {
if (!s) return null;
const parts = String(s).split(',').map(x => parseFloat(x.trim()));
if (parts.length !== 2 || parts.some(isNaN)) return null;
const [lat, lon] = parts;
if (lat < -90 || lat > 90 || lon < -180 || lon > 180) return null;
return [lat, lon];
}
const withCoords = [];
const withoutCoords = [];
for (const loc of locationsRaw) {
const xy = parseCoords(loc.coords);
if (xy) withCoords.push({ ...loc, latlon: xy });
else withoutCoords.push(loc);
}
const emptyMsg = document.getElementById('project-location-map-empty');
const missingMsg = document.getElementById('project-location-map-missing');
const mapEl = document.getElementById('project-location-map');
if (!mapEl) return;
if (withCoords.length === 0) {
// Hide the map block and show a hint. Don't init Leaflet at all.
mapEl.classList.add('hidden');
emptyMsg.classList.remove('hidden');
return;
}
// Initialise Leaflet. `L` is loaded globally by base.html.
const map = L.map(mapEl, { scrollWheelZoom: false });
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
maxZoom: 18,
}).addTo(map);
// Marker store keyed by location id so card-click can find + flash
// the matching pin (bidirectional highlight).
const markersById = {};
const bounds = [];
withCoords.forEach(loc => {
const marker = L.circleMarker(loc.latlon, {
radius: 8,
fillColor: '#f48b1c',
color: '#fff',
weight: 2,
opacity: 1,
fillOpacity: 0.9,
}).addTo(map);
marker.bindTooltip(loc.name, { direction: 'top', offset: [0, -6] });
marker.on('click', () => _flashLocationCard(loc.id));
markersById[loc.id] = marker;
bounds.push(loc.latlon);
});
// Wire up the reverse direction: hovering a card highlights its
// pin on the map. Hover-based instead of click-based because
// clicking the card navigates to the location detail page, so the
// flash would never be visible. Event delegation so cards that
// appear later (htmx swap or reorder) still work.
let _hoverPinId = null;
document.addEventListener('mouseover', (e) => {
const card = e.target.closest('.location-card');
if (!card) return;
const locId = card.dataset.locationId;
if (locId === _hoverPinId) return;
if (_hoverPinId) _unhighlightPin(_hoverPinId);
_highlightPin(locId);
_hoverPinId = locId;
});
document.addEventListener('mouseout', (e) => {
const card = e.target.closest('.location-card');
if (!card) return;
// Only un-highlight if the mouse actually left the card,
// not just moved to a child element.
const related = e.relatedTarget && e.relatedTarget.closest('.location-card');
if (related === card) return;
if (_hoverPinId) {
_unhighlightPin(_hoverPinId);
_hoverPinId = null;
}
});
function _highlightPin(locId) {
const marker = markersById[locId];
if (!marker) return;
marker.setStyle({ radius: 12, fillColor: '#dc2626', weight: 3 });
marker.openTooltip();
marker.bringToFront();
}
function _unhighlightPin(locId) {
const marker = markersById[locId];
if (!marker) return;
marker.setStyle({ radius: 8, fillColor: '#f48b1c', weight: 2 });
marker.closeTooltip();
}
if (bounds.length === 1) {
map.setView(bounds[0], 14);
} else {
map.fitBounds(bounds, { padding: [20, 20] });
}
// Without this the map renders into a 0×0 area when the partial
// first lands via htmx (container size not yet stable).
setTimeout(() => map.invalidateSize(), 100);
if (withoutCoords.length > 0) {
const names = withoutCoords.map(l => l.name).join(', ');
missingMsg.textContent = `${withoutCoords.length} location${withoutCoords.length === 1 ? '' : 's'} not shown (no coordinates): ${names}`;
missingMsg.classList.remove('hidden');
}
// Briefly highlight the matching card to confirm the click.
function _flashLocationCard(locId) {
const card = document.querySelector(`.location-card[data-location-id="${locId}"]`);
if (!card) return;
card.scrollIntoView({ behavior: 'smooth', block: 'center' });
card.classList.add('ring-2', 'ring-seismo-orange');
setTimeout(() => card.classList.remove('ring-2', 'ring-seismo-orange'), 1500);
}
})();
</script>
{% if upcoming_actions %}
<div class="mt-3 text-xs text-right text-gray-500 dark:text-gray-400">
<a href="javascript:void(0)" onclick="switchTab('schedules')"
class="text-seismo-orange hover:text-seismo-navy">
{{ upcoming_actions | length }} upcoming action{{ '' if upcoming_actions | length == 1 else 's' }} →
</a>
</div>
{% endif %}