486 lines
15 KiB
JavaScript
486 lines
15 KiB
JavaScript
// FitPub - Main JavaScript
|
|
|
|
/**
|
|
* Initialize application when DOM is ready
|
|
*/
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('FitPub initialized');
|
|
|
|
// Initialize file upload areas
|
|
initFileUploadAreas();
|
|
|
|
// Initialize HTMX event listeners
|
|
initHtmxListeners();
|
|
});
|
|
|
|
/**
|
|
* Initialize drag-and-drop file upload areas
|
|
*/
|
|
function initFileUploadAreas() {
|
|
const uploadAreas = document.querySelectorAll('.file-upload-area');
|
|
|
|
uploadAreas.forEach(area => {
|
|
const fileInput = area.querySelector('input[type="file"]');
|
|
|
|
// Drag and drop events
|
|
area.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
area.classList.add('drag-over');
|
|
});
|
|
|
|
area.addEventListener('dragleave', (e) => {
|
|
e.preventDefault();
|
|
area.classList.remove('drag-over');
|
|
});
|
|
|
|
area.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
area.classList.remove('drag-over');
|
|
|
|
if (e.dataTransfer.files.length > 0) {
|
|
fileInput.files = e.dataTransfer.files;
|
|
updateFileInputLabel(fileInput);
|
|
}
|
|
});
|
|
|
|
// Click to upload
|
|
area.addEventListener('click', () => {
|
|
fileInput.click();
|
|
});
|
|
|
|
// File input change
|
|
if (fileInput) {
|
|
fileInput.addEventListener('change', () => {
|
|
updateFileInputLabel(fileInput);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Update file input label with selected file name
|
|
*/
|
|
function updateFileInputLabel(input) {
|
|
const label = input.parentElement.querySelector('.file-upload-label');
|
|
if (label && input.files.length > 0) {
|
|
const fileName = input.files[0].name;
|
|
label.textContent = fileName;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Initialize HTMX event listeners for custom behavior
|
|
*/
|
|
function initHtmxListeners() {
|
|
// Show loading indicator on HTMX requests
|
|
document.body.addEventListener('htmx:beforeRequest', (event) => {
|
|
console.log('HTMX request started:', event.detail.path);
|
|
});
|
|
|
|
// Hide loading indicator when request completes
|
|
document.body.addEventListener('htmx:afterRequest', (event) => {
|
|
console.log('HTMX request completed:', event.detail.path);
|
|
});
|
|
|
|
// Handle HTMX errors
|
|
document.body.addEventListener('htmx:responseError', (event) => {
|
|
console.error('HTMX error:', event.detail);
|
|
showAlert('An error occurred. Please try again.', 'danger');
|
|
});
|
|
|
|
// Scroll to top after swapping content
|
|
document.body.addEventListener('htmx:afterSwap', (event) => {
|
|
if (event.detail.target.id === 'main-content') {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Create and render a Leaflet map with a GPS track
|
|
*
|
|
* @param {string} containerId - The ID of the map container element
|
|
* @param {Object} geoJsonData - GeoJSON track data (LineString or FeatureCollection)
|
|
* @param {Object} options - Map options
|
|
* @param {boolean} options.showStartEnd - Show start/finish markers (default: true)
|
|
* @param {boolean} options.fitBounds - Auto-fit map to track bounds (default: true)
|
|
* @param {Function} options.onTrackClick - Callback when track is clicked
|
|
* @returns {Object} Leaflet map instance
|
|
*/
|
|
function createActivityMap(containerId, geoJsonData, options = {}) {
|
|
const container = document.getElementById(containerId);
|
|
if (!container) {
|
|
console.error('Map container not found:', containerId);
|
|
return null;
|
|
}
|
|
|
|
// Clear any existing map instance
|
|
if (container._leaflet_id) {
|
|
container._leaflet_id = undefined;
|
|
container.innerHTML = '';
|
|
}
|
|
|
|
// Default options
|
|
const defaultOptions = {
|
|
zoomControl: true,
|
|
attributionControl: true,
|
|
scrollWheelZoom: true,
|
|
showStartEnd: true,
|
|
fitBounds: true
|
|
};
|
|
|
|
const mapOptions = { ...defaultOptions, ...options };
|
|
|
|
// Initialize Leaflet map
|
|
const map = L.map(containerId, {
|
|
zoomControl: mapOptions.zoomControl,
|
|
attributionControl: mapOptions.attributionControl,
|
|
scrollWheelZoom: mapOptions.scrollWheelZoom
|
|
});
|
|
|
|
// Add OpenStreetMap tile layer
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
maxZoom: 19,
|
|
minZoom: 3
|
|
}).addTo(map);
|
|
|
|
// Add GeoJSON track if provided
|
|
if (geoJsonData) {
|
|
let trackLayer;
|
|
|
|
// Handle both GeoJSON FeatureCollection and plain LineString
|
|
if (geoJsonData.type === 'LineString') {
|
|
trackLayer = L.geoJSON({
|
|
type: 'Feature',
|
|
geometry: geoJsonData,
|
|
properties: {}
|
|
}, {
|
|
style: {
|
|
color: '#2563eb',
|
|
weight: 4,
|
|
opacity: 0.8,
|
|
lineCap: 'round',
|
|
lineJoin: 'round'
|
|
},
|
|
onEachFeature: (feature, layer) => {
|
|
// Add click handler if provided
|
|
if (mapOptions.onTrackClick) {
|
|
layer.on('click', (e) => {
|
|
mapOptions.onTrackClick(e, feature);
|
|
});
|
|
}
|
|
}
|
|
}).addTo(map);
|
|
} else {
|
|
trackLayer = L.geoJSON(geoJsonData, {
|
|
style: {
|
|
color: '#2563eb',
|
|
weight: 4,
|
|
opacity: 0.8,
|
|
lineCap: 'round',
|
|
lineJoin: 'round'
|
|
},
|
|
onEachFeature: (feature, layer) => {
|
|
// Add popups with point-in-time metrics if available
|
|
if (feature.properties) {
|
|
const props = feature.properties;
|
|
let popupContent = '<div class="map-popup">';
|
|
|
|
if (props.time) {
|
|
popupContent += `<strong>Time:</strong> ${new Date(props.time).toLocaleTimeString()}<br>`;
|
|
}
|
|
if (props.heartRate) {
|
|
popupContent += `<strong>Heart Rate:</strong> ${props.heartRate} bpm<br>`;
|
|
}
|
|
if (props.speed !== undefined) {
|
|
// Speed is already in km/h from backend (converted in FitParser)
|
|
popupContent += `<strong>Speed:</strong> ${props.speed.toFixed(2)} km/h<br>`;
|
|
}
|
|
if (props.elevation !== undefined) {
|
|
popupContent += `<strong>Elevation:</strong> ${props.elevation.toFixed(1)} m<br>`;
|
|
}
|
|
if (props.cadence) {
|
|
popupContent += `<strong>Cadence:</strong> ${props.cadence} rpm<br>`;
|
|
}
|
|
|
|
popupContent += '</div>';
|
|
layer.bindPopup(popupContent);
|
|
}
|
|
|
|
// Add click handler if provided
|
|
if (mapOptions.onTrackClick) {
|
|
layer.on('click', (e) => {
|
|
mapOptions.onTrackClick(e, feature);
|
|
});
|
|
}
|
|
}
|
|
}).addTo(map);
|
|
}
|
|
|
|
// Fit map bounds to track
|
|
if (mapOptions.fitBounds) {
|
|
try {
|
|
const bounds = trackLayer.getBounds();
|
|
console.log('Track bounds:', bounds);
|
|
if (bounds.isValid()) {
|
|
map.fitBounds(bounds, { padding: [50, 50] });
|
|
console.log('Map bounds fitted successfully');
|
|
} else {
|
|
console.warn('Track bounds are invalid');
|
|
}
|
|
} catch (e) {
|
|
console.warn('Could not fit map bounds:', e);
|
|
map.setView([0, 0], 2);
|
|
}
|
|
}
|
|
|
|
// Add start/finish markers
|
|
if (mapOptions.showStartEnd) {
|
|
addStartFinishMarkers(map, geoJsonData);
|
|
}
|
|
|
|
// Store track layer reference for potential future use
|
|
map.trackLayer = trackLayer;
|
|
} else {
|
|
// No track data, show default view
|
|
map.setView([0, 0], 2);
|
|
}
|
|
|
|
// Invalidate size to ensure proper rendering and re-fit bounds
|
|
setTimeout(() => {
|
|
map.invalidateSize();
|
|
|
|
// Re-fit bounds after size invalidation if we have a track
|
|
if (mapOptions.fitBounds && map.trackLayer) {
|
|
try {
|
|
const bounds = map.trackLayer.getBounds();
|
|
if (bounds.isValid()) {
|
|
map.fitBounds(bounds, { padding: [50, 50] });
|
|
console.log('Map bounds re-fitted after invalidateSize');
|
|
}
|
|
} catch (e) {
|
|
console.warn('Could not re-fit bounds after invalidateSize:', e);
|
|
}
|
|
}
|
|
}, 100);
|
|
|
|
return map;
|
|
}
|
|
|
|
/**
|
|
* Add start and finish markers to the map
|
|
* PRIVACY: This function is deprecated and does nothing.
|
|
* Start/finish markers are no longer displayed to protect athlete privacy.
|
|
*
|
|
* @param {Object} map - Leaflet map instance
|
|
* @param {Object} geoJsonData - GeoJSON track data
|
|
*/
|
|
function addStartFinishMarkers(map, geoJsonData) {
|
|
// Privacy protection: Do not show start/end markers to hide athlete home locations
|
|
return;
|
|
}
|
|
|
|
/**
|
|
* Create an elevation profile chart
|
|
*
|
|
* @param {string} canvasId - The ID of the canvas element
|
|
* @param {Array} elevationData - Array of {distance, elevation} objects
|
|
*/
|
|
function createElevationChart(canvasId, elevationData) {
|
|
const ctx = document.getElementById(canvasId);
|
|
if (!ctx) {
|
|
console.error('Chart canvas not found:', canvasId);
|
|
return null;
|
|
}
|
|
|
|
return new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: elevationData.map(d => (d.distance / 1000).toFixed(2)),
|
|
datasets: [{
|
|
label: 'Elevation (m)',
|
|
data: elevationData.map(d => d.elevation),
|
|
borderColor: '#10b981',
|
|
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
|
borderWidth: 2,
|
|
fill: true,
|
|
tension: 0.3,
|
|
pointRadius: 0,
|
|
pointHoverRadius: 5
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
title: (context) => {
|
|
return `Distance: ${context[0].label} km`;
|
|
},
|
|
label: (context) => {
|
|
return `Elevation: ${context.parsed.y.toFixed(1)} m`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Distance (km)'
|
|
}
|
|
},
|
|
y: {
|
|
title: {
|
|
display: true,
|
|
text: 'Elevation (m)'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Show an alert message
|
|
*
|
|
* @param {string} message - The message to display
|
|
* @param {string} type - Alert type: success, danger, warning, info
|
|
*/
|
|
function showAlert(message, type = 'info') {
|
|
const alertDiv = document.createElement('div');
|
|
alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
|
|
alertDiv.setAttribute('role', 'alert');
|
|
alertDiv.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
`;
|
|
|
|
const container = document.querySelector('main.container');
|
|
if (container) {
|
|
container.insertBefore(alertDiv, container.firstChild);
|
|
|
|
// Auto-dismiss after 5 seconds
|
|
setTimeout(() => {
|
|
alertDiv.classList.remove('show');
|
|
setTimeout(() => alertDiv.remove(), 150);
|
|
}, 5000);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Format duration from seconds to human-readable string
|
|
*
|
|
* @param {number} seconds - Duration in seconds
|
|
* @returns {string} Formatted duration (e.g., "1h 23m 45s")
|
|
*/
|
|
function formatDuration(seconds) {
|
|
const hours = Math.floor(seconds / 3600);
|
|
const minutes = Math.floor((seconds % 3600) / 60);
|
|
const secs = Math.floor(seconds % 60);
|
|
|
|
const parts = [];
|
|
if (hours > 0) parts.push(`${hours}h`);
|
|
if (minutes > 0) parts.push(`${minutes}m`);
|
|
if (secs > 0 || parts.length === 0) parts.push(`${secs}s`);
|
|
|
|
return parts.join(' ');
|
|
}
|
|
|
|
/**
|
|
* Format distance in meters to human-readable string
|
|
*
|
|
* @param {number} meters - Distance in meters
|
|
* @returns {string} Formatted distance (e.g., "12.34 km" or "856 m")
|
|
*/
|
|
function formatDistance(meters) {
|
|
if (meters >= 1000) {
|
|
return `${(meters / 1000).toFixed(2)} km`;
|
|
}
|
|
return `${Math.round(meters)} m`;
|
|
}
|
|
|
|
/**
|
|
* Format pace from m/s to min/km
|
|
*
|
|
* @param {number} speed - Speed in m/s
|
|
* @returns {string} Formatted pace (e.g., "5:23 /km")
|
|
*/
|
|
function formatPace(speed) {
|
|
if (speed === 0) return '--';
|
|
|
|
const paceSeconds = 1000 / speed;
|
|
const minutes = Math.floor(paceSeconds / 60);
|
|
const seconds = Math.floor(paceSeconds % 60);
|
|
|
|
return `${minutes}:${seconds.toString().padStart(2, '0')} /km`;
|
|
}
|
|
|
|
/**
|
|
* Format a timestamp with timezone awareness
|
|
*
|
|
* @param {string} timestamp - ISO timestamp or LocalDateTime string
|
|
* @param {string} timezone - IANA timezone ID (e.g., "Europe/Berlin")
|
|
* @param {object} options - Intl.DateTimeFormat options
|
|
* @returns {string} Formatted date/time string
|
|
*/
|
|
function formatDateTimeWithTimezone(timestamp, timezone, options = {}) {
|
|
if (!timestamp) return '';
|
|
|
|
// Parse the timestamp - backend sends LocalDateTime without 'Z'
|
|
// We need to interpret it in the specified timezone
|
|
const date = new Date(timestamp);
|
|
|
|
// Default options for date/time display
|
|
const defaultOptions = {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
timeZone: timezone || 'UTC',
|
|
...options
|
|
};
|
|
|
|
try {
|
|
return new Intl.DateTimeFormat('en-US', defaultOptions).format(date);
|
|
} catch (e) {
|
|
console.error('Error formatting date with timezone:', e);
|
|
// Fallback to simple formatting
|
|
return date.toLocaleString();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Format a date with timezone awareness (date only, no time)
|
|
*
|
|
* @param {string} timestamp - ISO timestamp or LocalDateTime string
|
|
* @param {string} timezone - IANA timezone ID
|
|
* @returns {string} Formatted date string
|
|
*/
|
|
function formatDateWithTimezone(timestamp, timezone) {
|
|
return formatDateTimeWithTimezone(timestamp, timezone, {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: undefined,
|
|
minute: undefined
|
|
});
|
|
}
|
|
|
|
// Make functions available globally for inline scripts
|
|
window.FitPub = {
|
|
createActivityMap,
|
|
createElevationChart,
|
|
showAlert,
|
|
formatDuration,
|
|
formatDistance,
|
|
formatPace,
|
|
formatDateTimeWithTimezone,
|
|
formatDateWithTimezone
|
|
};
|