A
@@ -1628,12 +1669,60 @@
api(`/osint?vessel_id=${id}`)
]);
- // Draw track
- if (trackLine) map.removeLayer(trackLine);
+ // Draw track with timestamp markers
+ if (trackLine) {
+ if (Array.isArray(trackLine)) {
+ trackLine.forEach(layer => map.removeLayer(layer));
+ } else {
+ map.removeLayer(trackLine);
+ }
+ }
if (track?.length > 1) {
- trackLine = L.polyline(track.map(p => [p.latitude, p.longitude]), {
- color: getThreatColor(v.threat_level), weight: 2, opacity: 0.7, dashArray: '6'
+ const trackColor = getThreatColor(v.threat_level);
+ const line = L.polyline(track.map(p => [p.latitude, p.longitude]), {
+ color: trackColor, weight: 2, opacity: 0.7, dashArray: '6'
}).addTo(map);
+
+ // Add timestamp markers along the track
+ const markers = [];
+ const markerInterval = Math.max(1, Math.floor(track.length / 10)); // ~10 markers max
+
+ track.forEach((p, idx) => {
+ // Show markers at regular intervals, plus first and last
+ const isEndpoint = idx === 0 || idx === track.length - 1;
+ const isInterval = idx % markerInterval === 0;
+
+ if (isEndpoint || isInterval) {
+ const ts = p.timestamp ? new Date(p.timestamp) : null;
+ const timeStr = ts ? ts.toLocaleString('en-GB', {
+ day: '2-digit', month: 'short', year: '2-digit',
+ hour: '2-digit', minute: '2-digit'
+ }) : 'Unknown';
+
+ const size = isEndpoint ? 8 : 5;
+ const marker = L.circleMarker([p.latitude, p.longitude], {
+ radius: size,
+ color: trackColor,
+ fillColor: isEndpoint ? (idx === 0 ? '#27ae60' : '#e74c3c') : trackColor,
+ fillOpacity: 0.9,
+ weight: 1
+ }).addTo(map);
+
+ const label = idx === 0 ? 'START' : (idx === track.length - 1 ? 'LATEST' : '');
+ marker.bindTooltip(`
+
+ ${label ? `${label}
` : ''}
+ ${timeStr}
+ ${p.speed_knots ? `Speed: ${p.speed_knots.toFixed(1)} kts
` : ''}
+ ${p.course ? `Course: ${p.course.toFixed(0)}°` : ''}
+
+ `, { permanent: false, direction: 'top' });
+
+ markers.push(marker);
+ }
+ });
+
+ trackLine = [line, ...markers];
}
renderVesselPanel(v, events, osint);
@@ -1868,6 +1957,15 @@
function closeVesselPanel() {
document.getElementById('vessel-panel').classList.remove('active');
selectedVessel = null;
+ // Clear track line and markers
+ if (trackLine) {
+ if (Array.isArray(trackLine)) {
+ trackLine.forEach(layer => map.removeLayer(layer));
+ } else {
+ map.removeLayer(trackLine);
+ }
+ trackLine = null;
+ }
}
// Search
@@ -3268,6 +3366,15 @@
balticInfrastructure = result.infrastructure || [];
renderInfrastructure();
console.log(`Loaded ${balticInfrastructure.length} infrastructure assets`);
+
+ // Update legend count and show it
+ const countEl = document.getElementById('infra-count');
+ if (countEl) countEl.textContent = balticInfrastructure.length;
+
+ const legend = document.getElementById('infra-legend');
+ if (legend && showInfrastructure && balticInfrastructure.length > 0) {
+ legend.style.display = 'block';
+ }
} catch(e) {
console.log('Infrastructure data not available:', e);
}
@@ -3372,12 +3479,23 @@
${asset.name}
function toggleInfrastructure() {
showInfrastructure = !showInfrastructure;
const btn = document.getElementById('toggle-infrastructure');
+ const legend = document.getElementById('infra-legend');
if (btn) {
btn.classList.toggle('active', showInfrastructure);
}
+ if (legend) {
+ legend.style.display = showInfrastructure ? 'block' : 'none';
+ }
renderInfrastructure();
}
+ function toggleInfraLegend() {
+ const legend = document.getElementById('infra-legend');
+ if (legend) {
+ legend.style.display = legend.style.display === 'none' ? 'block' : 'none';
+ }
+ }
+
async function loadInfraAnalysis(vesselId) {
const display = document.getElementById('infra-analysis-display');
if (!display) return;
@@ -3602,12 +3720,18 @@
${asset.name}
const status = await api('/gfw/status');
if (!status.configured) {
display.innerHTML = `
-
+
`;
return;
@@ -3620,6 +3744,36 @@
${asset.name}
}
}
+ async function saveGFWToken() {
+ const input = document.getElementById('gfw-token-input');
+ const status = document.getElementById('gfw-save-status');
+ const token = input?.value?.trim();
+
+ if (!token) {
+ status.innerHTML = '
Please enter a token';
+ return;
+ }
+
+ status.innerHTML = '
Saving...';
+
+ try {
+ const result = await fetch('/api/gfw/configure', {
+ method: 'POST',
+ headers: {'Content-Type': 'application/json'},
+ body: JSON.stringify({token: token})
+ }).then(r => r.json());
+
+ if (result.success) {
+ status.innerHTML = '
✓ Token saved! Reload the page to use GFW.';
+ input.style.borderColor = '#27ae60';
+ } else {
+ status.innerHTML = `
${result.error || 'Failed to save'}`;
+ }
+ } catch(e) {
+ status.innerHTML = '
Error saving token';
+ }
+ }
+
function renderGFWData(data) {
const display = document.getElementById('gfw-display');
if (!display) return;