444 lines
16 KiB
HTML
444 lines
16 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
|
<style>
|
|
#map {
|
|
height: 600px;
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.candidate-card {
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.candidate-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.candidate-card.active {
|
|
border-color: #0d6efd;
|
|
background-color: #f8f9fa;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h2>Segment Discovery</h2>
|
|
<p class="text-muted">Find frequent routes in your activity history.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<ul class="nav nav-tabs card-header-tabs" id="discoveryTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="global-tab" data-bs-toggle="tab" data-bs-target="#global-pane"
|
|
type="button" role="tab">Global Discovery</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="single-tab" data-bs-toggle="tab" data-bs-target="#single-pane"
|
|
type="button" role="tab">Single Activity</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="tab-content" id="discoveryTabContent">
|
|
<!-- Global Discovery Pane -->
|
|
<div class="tab-pane fade show active" id="global-pane" role="tabpanel">
|
|
<form id="discoveryForm" class="row g-3 align-items-end">
|
|
<div class="col-md-4">
|
|
<label for="activityType" class="form-label">Activity Type</label>
|
|
<select id="activityType" class="form-select">
|
|
<option value="cycling">Cycling</option>
|
|
<option value="running">Running</option>
|
|
<option value="hiking">Hiking</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="startDate" class="form-label">Start Date</label>
|
|
<input type="date" class="form-control" id="startDate"
|
|
value="{{ (now - timedelta(days=90)).strftime('%Y-%m-%d') }}">
|
|
</div>
|
|
<div class="col-md-2 d-flex align-items-end mb-2">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="showDebugLayer">
|
|
<label class="form-check-label small" for="showDebugLayer">Show All</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<button type="submit" class="btn btn-primary w-100" id="searchBtn">
|
|
<span class="spinner-border spinner-border-sm d-none" role="status"
|
|
aria-hidden="true"></span>
|
|
Discover
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Single Activity Pane -->
|
|
<div class="tab-pane fade" id="single-pane" role="tabpanel">
|
|
<form id="singleForm" class="row g-3 align-items-end">
|
|
<div class="col-md-8">
|
|
<label for="activityId" class="form-label">Activity ID</label>
|
|
<input type="number" class="form-control" id="activityId" placeholder="e.g. 12345" required>
|
|
<div class="form-text">Enter the ID of the activity to slice into segments.</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<button type="submit" class="btn btn-primary w-100" id="singleSearchBtn">
|
|
<span class="spinner-border spinner-border-sm d-none" role="status"
|
|
aria-hidden="true"></span>
|
|
Analyze Activity
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Save Modal -->
|
|
<div class="modal fade" id="saveSegmentModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Save Segment</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="segmentName" class="form-label">Segment Name</label>
|
|
<input type="text" class="form-control" id="segmentName" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="segmentDesc" class="form-label">Description (Optional)</label>
|
|
<textarea class="form-control" id="segmentDesc" rows="2"></textarea>
|
|
</div>
|
|
<input type="hidden" id="saveCandidateIndex">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="confirmSave()">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- List Column -->
|
|
<div class="col-md-5">
|
|
<div id="resultsArea" class="row">
|
|
<!-- Results will be injected here -->
|
|
<div class="col-12 text-center text-muted" id="placeholder">
|
|
Run a search to see recommendations.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map Column -->
|
|
<div class="col-md-7">
|
|
<div class="sticky-top" style="top: 20px; z-index: 0;">
|
|
<div id="map"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Initialize Map
|
|
const map = L.map('map').setView([0, 0], 2);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors'
|
|
}).addTo(map);
|
|
|
|
let currentLayers = [];
|
|
let debugLayerGroup = L.layerGroup().addTo(map);
|
|
let debugPathsData = [];
|
|
let currentCandidates = []; // Store data for saving
|
|
|
|
|
|
// Results DOM
|
|
const resultsArea = document.getElementById('resultsArea');
|
|
|
|
// Toggle listener
|
|
document.getElementById('showDebugLayer').addEventListener('change', function (e) {
|
|
if (e.target.checked) {
|
|
renderDebugLayer();
|
|
} else {
|
|
debugLayerGroup.clearLayers();
|
|
}
|
|
});
|
|
|
|
function renderDebugLayer() {
|
|
debugLayerGroup.clearLayers();
|
|
if (!debugPathsData || debugPathsData.length === 0) return;
|
|
|
|
debugPathsData.forEach(path => {
|
|
const latlngs = path.map(p => [p[1], p[0]]);
|
|
L.polyline(latlngs, {
|
|
color: '#999',
|
|
weight: 1,
|
|
opacity: 0.3,
|
|
dashArray: '5, 10'
|
|
}).addTo(debugLayerGroup);
|
|
});
|
|
}
|
|
|
|
function renderCandidates(candidates, append = false) {
|
|
if (!append) {
|
|
resultsArea.innerHTML = '';
|
|
currentCandidates = candidates;
|
|
} else {
|
|
currentCandidates = currentCandidates.concat(candidates);
|
|
}
|
|
|
|
const bounds = L.latLngBounds();
|
|
|
|
if (!candidates || candidates.length === 0) {
|
|
resultsArea.innerHTML = '<div class="col-12 text-center">No segments found matching criteria.</div>';
|
|
return;
|
|
}
|
|
|
|
candidates.forEach((cand, index) => {
|
|
// Check if bounds valid
|
|
let latlngs;
|
|
try {
|
|
latlngs = cand.points.map(p => [p[1], p[0]]);
|
|
} catch (e) { return; }
|
|
|
|
if (latlngs.length < 2) return;
|
|
|
|
const polyline = L.polyline(latlngs, {
|
|
color: 'blue',
|
|
weight: 4,
|
|
opacity: 0.7
|
|
}).addTo(map);
|
|
|
|
polyline.bindPopup(`<strong>Matches: ${cand.frequency}</strong><br>Dist: ${(cand.distance / 1000).toFixed(2)}km`);
|
|
|
|
// Add interactions
|
|
polyline.on('mouseover', function () {
|
|
this.setStyle({ color: 'red', weight: 6 });
|
|
highlightCard(index);
|
|
});
|
|
polyline.on('mouseout', function () {
|
|
this.setStyle({ color: 'blue', weight: 4 });
|
|
unhighlightCard(index);
|
|
});
|
|
|
|
currentLayers.push(polyline);
|
|
bounds.extend(latlngs);
|
|
|
|
const card = `
|
|
<div class="col-12 mb-2">
|
|
<div class="card candidate-card" id="card-${index}"
|
|
onmouseover="highlightMap(${index})"
|
|
onmouseout="unhighlightMap(${index})"
|
|
onclick="focusMap(${index})">
|
|
<div class="card-body p-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0">Candidate #${index + 1}</h6>
|
|
<span class="badge bg-success">${cand.frequency} Runs</span>
|
|
</div>
|
|
<small class="text-muted">Distance: ${(cand.distance / 1000).toFixed(2)} km</small>
|
|
<div class="mt-2">
|
|
<div class="mt-2">
|
|
<button class="btn btn-sm btn-outline-primary w-100" onclick="openSaveModal(${index})">Save to Library</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
resultsArea.insertAdjacentHTML('beforeend', card);
|
|
const cardEl = document.getElementById(`card-${index}`);
|
|
if (cardEl) cardEl.dataset.layerId = currentLayers.length - 1;
|
|
});
|
|
|
|
if (currentLayers.length > 0) {
|
|
map.fitBounds(bounds, { padding: [50, 50] });
|
|
}
|
|
}
|
|
|
|
document.getElementById('discoveryForm').addEventListener('submit', async function (e) {
|
|
e.preventDefault();
|
|
const btn = document.getElementById('searchBtn');
|
|
const spinner = btn.querySelector('.spinner-border');
|
|
|
|
btn.disabled = true;
|
|
spinner.classList.remove('d-none');
|
|
|
|
const type = document.getElementById('activityType').value;
|
|
const start = document.getElementById('startDate').value;
|
|
|
|
try {
|
|
const response = await fetch('/api/discovery/segments', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
activity_type: type,
|
|
start_date: start ? new Date(start).toISOString() : null
|
|
})
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Discovery failed');
|
|
|
|
const data = await response.json();
|
|
|
|
// Clear map
|
|
currentLayers.forEach(l => map.removeLayer(l));
|
|
currentLayers = [];
|
|
|
|
debugLayerGroup.clearLayers();
|
|
debugPathsData = data.debug_paths || [];
|
|
if (document.getElementById('showDebugLayer').checked) {
|
|
renderDebugLayer();
|
|
}
|
|
|
|
renderCandidates(data.candidates);
|
|
|
|
} catch (err) {
|
|
console.error(err);
|
|
resultsArea.innerHTML = `<div class="alert alert-danger">Error: ${err.message}</div>`;
|
|
} finally {
|
|
btn.disabled = false;
|
|
spinner.classList.add('d-none');
|
|
}
|
|
});
|
|
|
|
document.getElementById('singleForm').addEventListener('submit', async function (e) {
|
|
e.preventDefault();
|
|
const btn = document.getElementById('singleSearchBtn');
|
|
const spinner = btn.querySelector('.spinner-border');
|
|
const actId = document.getElementById('activityId').value;
|
|
|
|
btn.disabled = true;
|
|
spinner.classList.remove('d-none');
|
|
|
|
try {
|
|
const response = await fetch('/api/discovery/single', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ activity_id: parseInt(actId) })
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Single Analysis failed');
|
|
const data = await response.json();
|
|
|
|
// Clear map
|
|
currentLayers.forEach(l => map.removeLayer(l));
|
|
currentLayers = [];
|
|
debugLayerGroup.clearLayers();
|
|
|
|
renderCandidates(data.candidates);
|
|
|
|
} catch (err) {
|
|
console.error(err);
|
|
resultsArea.innerHTML = `<div class="alert alert-danger">Error: ${err.message}</div>`;
|
|
} finally {
|
|
btn.disabled = false;
|
|
spinner.classList.add('d-none');
|
|
}
|
|
});
|
|
|
|
// Helper functions for interaction
|
|
function highlightMap(index) {
|
|
const layer = currentLayers[index];
|
|
if (layer) {
|
|
layer.setStyle({ color: 'red', weight: 6 }).bringToFront();
|
|
}
|
|
}
|
|
|
|
function unhighlightMap(index) {
|
|
const layer = currentLayers[index];
|
|
if (layer) {
|
|
layer.setStyle({ color: 'blue', weight: 4 });
|
|
}
|
|
}
|
|
|
|
function focusMap(index) {
|
|
const layer = currentLayers[index];
|
|
if (layer) {
|
|
map.fitBounds(layer.getBounds(), { maxZoom: 14 });
|
|
}
|
|
}
|
|
|
|
function highlightCard(index) {
|
|
const card = document.getElementById(`card-${index}`);
|
|
if (card) card.classList.add('active');
|
|
}
|
|
|
|
function unhighlightCard(index) {
|
|
const card = document.getElementById(`card-${index}`);
|
|
if (card) card.classList.remove('active');
|
|
}
|
|
|
|
// Save Logic
|
|
let saveModal = null;
|
|
|
|
function openSaveModal(index) {
|
|
if (!saveModal) {
|
|
saveModal = new bootstrap.Modal(document.getElementById('saveSegmentModal'));
|
|
}
|
|
document.getElementById('saveCandidateIndex').value = index;
|
|
document.getElementById('segmentName').value = `New Segment #${index + 1}`;
|
|
document.getElementById('segmentDesc').value = 'Discovered from activity analysis';
|
|
saveModal.show();
|
|
}
|
|
|
|
async function confirmSave() {
|
|
const index = document.getElementById('saveCandidateIndex').value;
|
|
const name = document.getElementById('segmentName').value;
|
|
const desc = document.getElementById('segmentDesc').value;
|
|
const cand = currentCandidates[index];
|
|
|
|
if (!name) {
|
|
alert("Name is required");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Determine activity type (from form or candidate if we stored it?
|
|
// Candidate doesn't strictly have type, but we can infer or pass it.
|
|
// For now, let's grab from the global form or default to 'cycling'.
|
|
// Single Mode: We don't have type selector easily accessible if tab switched?
|
|
// Actually Activity ID analysis implies we know the activity...
|
|
// but the candidate obj doesn't have type.
|
|
// Let's assume 'cycling' or try to grab from UI.
|
|
|
|
let actType = document.getElementById('activityType').value;
|
|
// If single tab active, we might not know.
|
|
|
|
const payload = {
|
|
name: name,
|
|
description: desc,
|
|
activity_type: actType, // Best guess
|
|
points: cand.points
|
|
};
|
|
|
|
const response = await fetch('/api/segments/save_custom', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Save failed');
|
|
const data = await response.json();
|
|
|
|
alert('Segment saved successfully!');
|
|
saveModal.hide();
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert('Error saving segment: ' + err.message);
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %} |