serversdown
f063383e61
The location map's tile-pane (z-index 200), marker-pane (600), and control-pane (800) outranked the page modals' z-50 because the map's container didn't establish its own stacking context. Modals opened over the page rendered BEHIND the map tiles (visible in the Edit Location, Assign, Remove, etc. modals — anywhere overlapping the right column). Fixed with `isolation: isolate` on the map container. That CSS property forces a new stacking context without needing to rewrite Leaflet's internal z-indexes, so all the map's panes stay contained inside the card and z-50 modals correctly render on top. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
206 lines
9.9 KiB
HTML
206 lines
9.9 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 == 'upcoming' %}
|
||
<span class="px-3 py-1 text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 rounded-full">Upcoming</span>
|
||
{% elif 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 == 'on_hold' %}
|
||
<span class="px-3 py-1 text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400 rounded-full">On Hold</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 'sound_monitoring' in modules and 'vibration_monitoring' not in modules %}
|
||
NRLs
|
||
{% else %}
|
||
Locations
|
||
{% endif %}
|
||
</h3>
|
||
<button onclick="openLocationModal('{% if 'sound_monitoring' in modules and 'vibration_monitoring' not in modules %}sound{% elif 'vibration_monitoring' in modules and 'sound_monitoring' not in modules %}vibration{% endif %}')" class="text-sm text-seismo-orange hover:text-seismo-navy">
|
||
{% if 'sound_monitoring' in modules and 'vibration_monitoring' not in modules %}
|
||
Add NRL
|
||
{% else %}
|
||
Add Location
|
||
{% endif %}
|
||
</button>
|
||
</div>
|
||
<div id="project-locations"
|
||
hx-get="/api/projects/{{ project.id }}/locations{% if 'sound_monitoring' in modules and 'vibration_monitoring' not in modules %}?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>
|
||
|
||
<!-- 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>
|
||
</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);
|
||
|
||
const markers = [];
|
||
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));
|
||
markers.push(marker);
|
||
bounds.push(loc.latlon);
|
||
});
|
||
|
||
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>
|