More vibin
This commit is contained in:
Tim Zöller
parent
1901daf5ce
commit
c1729a629d
47 changed files with 5754 additions and 41 deletions
207
src/main/resources/static/css/fitpub.css
Normal file
207
src/main/resources/static/css/fitpub.css
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
/* FitPub - Custom Styles */
|
||||
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--secondary-color: #10b981;
|
||||
--danger-color: #ef4444;
|
||||
--warning-color: #f59e0b;
|
||||
--dark-color: #1f2937;
|
||||
--light-color: #f3f4f6;
|
||||
--border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.navbar-brand {
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Map container */
|
||||
.map-container {
|
||||
height: 400px;
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.map-container-large {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
/* Activity cards */
|
||||
.activity-card {
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.activity-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.activity-type-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.activity-type-run {
|
||||
background-color: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.activity-type-ride {
|
||||
background-color: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.activity-type-hike {
|
||||
background-color: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
/* Metrics display */
|
||||
.metric-card {
|
||||
background: var(--light-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* File upload area */
|
||||
.file-upload-area {
|
||||
border: 2px dashed #d1d5db;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
transition: border-color 0.2s, background-color 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-upload-area:hover,
|
||||
.file-upload-area.drag-over {
|
||||
border-color: var(--primary-color);
|
||||
background-color: #eff6ff;
|
||||
}
|
||||
|
||||
.file-upload-icon {
|
||||
font-size: 3rem;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* Timeline */
|
||||
.timeline-item {
|
||||
border-left: 3px solid var(--light-color);
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -0.5rem;
|
||||
top: 0.5rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--primary-color);
|
||||
border: 3px solid white;
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Charts */
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Loading states */
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: 3px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
border-top-color: var(--primary-color);
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* HTMX loading indicator */
|
||||
.htmx-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.htmx-request .htmx-indicator {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.htmx-request.htmx-indicator {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
.text-muted {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.text-small {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.visibility-public {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.visibility-followers {
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.visibility-private {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.map-container {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.map-container-large {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
308
src/main/resources/static/js/auth.js
Normal file
308
src/main/resources/static/js/auth.js
Normal file
|
|
@ -0,0 +1,308 @@
|
|||
// FitPub - Authentication Management
|
||||
|
||||
/**
|
||||
* Authentication utilities for managing JWT tokens and user sessions
|
||||
*/
|
||||
const FitPubAuth = {
|
||||
/**
|
||||
* Get the stored JWT token
|
||||
* @returns {string|null} JWT token or null if not found
|
||||
*/
|
||||
getToken: function() {
|
||||
return localStorage.getItem('jwtToken');
|
||||
},
|
||||
|
||||
/**
|
||||
* Store JWT token
|
||||
* @param {string} token - JWT token to store
|
||||
*/
|
||||
setToken: function(token) {
|
||||
localStorage.setItem('jwtToken', token);
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove stored JWT token
|
||||
*/
|
||||
removeToken: function() {
|
||||
localStorage.removeItem('jwtToken');
|
||||
localStorage.removeItem('username');
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the stored username
|
||||
* @returns {string|null} Username or null if not found
|
||||
*/
|
||||
getUsername: function() {
|
||||
return localStorage.getItem('username');
|
||||
},
|
||||
|
||||
/**
|
||||
* Store username
|
||||
* @param {string} username - Username to store
|
||||
*/
|
||||
setUsername: function(username) {
|
||||
localStorage.setItem('username', username);
|
||||
},
|
||||
|
||||
/**
|
||||
* Check if user is authenticated
|
||||
* @returns {boolean} True if authenticated, false otherwise
|
||||
*/
|
||||
isAuthenticated: function() {
|
||||
const token = this.getToken();
|
||||
if (!token) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if token is expired
|
||||
try {
|
||||
const payload = this.parseJwt(token);
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
|
||||
if (payload.exp && payload.exp < now) {
|
||||
// Token expired, remove it
|
||||
this.removeToken();
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.error('Error parsing JWT:', e);
|
||||
this.removeToken();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Parse JWT token to extract payload
|
||||
* @param {string} token - JWT token
|
||||
* @returns {object} Decoded payload
|
||||
*/
|
||||
parseJwt: function(token) {
|
||||
try {
|
||||
const base64Url = token.split('.')[1];
|
||||
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
|
||||
const jsonPayload = decodeURIComponent(
|
||||
atob(base64).split('').map(function(c) {
|
||||
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
|
||||
}).join('')
|
||||
);
|
||||
return JSON.parse(jsonPayload);
|
||||
} catch (e) {
|
||||
console.error('Error parsing JWT:', e);
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get time until token expiration
|
||||
* @returns {number} Seconds until expiration, or 0 if expired/invalid
|
||||
*/
|
||||
getTokenExpirationTime: function() {
|
||||
const token = this.getToken();
|
||||
if (!token) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
try {
|
||||
const payload = this.parseJwt(token);
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
|
||||
if (payload.exp) {
|
||||
return Math.max(0, payload.exp - now);
|
||||
}
|
||||
|
||||
return 0;
|
||||
} catch (e) {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Logout user
|
||||
*/
|
||||
logout: function() {
|
||||
this.removeToken();
|
||||
window.location.href = '/login';
|
||||
},
|
||||
|
||||
/**
|
||||
* Make an authenticated API request
|
||||
* @param {string} url - API endpoint URL
|
||||
* @param {object} options - Fetch options
|
||||
* @returns {Promise<Response>} Fetch response
|
||||
*/
|
||||
authenticatedFetch: async function(url, options = {}) {
|
||||
const token = this.getToken();
|
||||
|
||||
if (!token) {
|
||||
throw new Error('No authentication token found');
|
||||
}
|
||||
|
||||
// Add Authorization header
|
||||
const headers = {
|
||||
...options.headers,
|
||||
'Authorization': `Bearer ${token}`,
|
||||
};
|
||||
|
||||
// If body is an object, set Content-Type to JSON
|
||||
if (options.body && typeof options.body === 'object') {
|
||||
headers['Content-Type'] = 'application/json';
|
||||
options.body = JSON.stringify(options.body);
|
||||
}
|
||||
|
||||
const response = await fetch(url, {
|
||||
...options,
|
||||
headers
|
||||
});
|
||||
|
||||
// If unauthorized, redirect to login
|
||||
if (response.status === 401) {
|
||||
this.removeToken();
|
||||
window.location.href = '/login';
|
||||
throw new Error('Authentication failed');
|
||||
}
|
||||
|
||||
return response;
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize authentication checks and setup
|
||||
*/
|
||||
init: function() {
|
||||
// Update navigation UI based on auth status
|
||||
this.updateNavigationUI();
|
||||
|
||||
// Check authentication status on page load
|
||||
this.checkAuthStatus();
|
||||
|
||||
// Set up session expiration warning
|
||||
this.setupExpirationWarning();
|
||||
},
|
||||
|
||||
/**
|
||||
* Update navigation UI based on authentication status
|
||||
*/
|
||||
updateNavigationUI: function() {
|
||||
const authUserMenu = document.getElementById('authUserMenu');
|
||||
const guestMenu = document.getElementById('guestMenu');
|
||||
const usernameDisplay = document.getElementById('usernameDisplay');
|
||||
const myActivitiesLink = document.getElementById('myActivitiesLink');
|
||||
const uploadLink = document.getElementById('uploadLink');
|
||||
|
||||
if (this.isAuthenticated()) {
|
||||
// Show authenticated menu, hide guest menu
|
||||
if (authUserMenu) {
|
||||
authUserMenu.classList.remove('d-none');
|
||||
}
|
||||
if (guestMenu) {
|
||||
guestMenu.style.display = 'none';
|
||||
}
|
||||
|
||||
// Show authenticated navigation links
|
||||
if (myActivitiesLink) {
|
||||
myActivitiesLink.style.display = '';
|
||||
myActivitiesLink.parentElement.style.display = '';
|
||||
}
|
||||
if (uploadLink) {
|
||||
uploadLink.style.display = '';
|
||||
uploadLink.parentElement.style.display = '';
|
||||
}
|
||||
|
||||
// Display username
|
||||
const username = this.getUsername();
|
||||
if (usernameDisplay && username) {
|
||||
usernameDisplay.textContent = username;
|
||||
}
|
||||
} else {
|
||||
// Show guest menu, hide authenticated menu
|
||||
if (authUserMenu) {
|
||||
authUserMenu.classList.add('d-none');
|
||||
}
|
||||
if (guestMenu) {
|
||||
guestMenu.style.display = '';
|
||||
}
|
||||
|
||||
// Hide authenticated navigation links
|
||||
if (myActivitiesLink) {
|
||||
myActivitiesLink.style.display = 'none';
|
||||
myActivitiesLink.parentElement.style.display = 'none';
|
||||
}
|
||||
if (uploadLink) {
|
||||
uploadLink.style.display = 'none';
|
||||
uploadLink.parentElement.style.display = 'none';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Check authentication status and handle accordingly
|
||||
*/
|
||||
checkAuthStatus: function() {
|
||||
const currentPath = window.location.pathname;
|
||||
const publicPaths = ['/', '/login', '/register', '/timeline'];
|
||||
|
||||
// Skip check for public paths
|
||||
if (publicPaths.includes(currentPath)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if authenticated
|
||||
if (!this.isAuthenticated()) {
|
||||
// Redirect to login for protected pages
|
||||
window.location.href = '/login?redirect=' + encodeURIComponent(currentPath);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Set up warning for session expiration
|
||||
*/
|
||||
setupExpirationWarning: function() {
|
||||
const token = this.getToken();
|
||||
if (!token) {
|
||||
return;
|
||||
}
|
||||
|
||||
const expirationTime = this.getTokenExpirationTime();
|
||||
|
||||
if (expirationTime > 0) {
|
||||
// Warn 5 minutes before expiration
|
||||
const warningTime = Math.max(0, (expirationTime - 300) * 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
if (this.isAuthenticated()) {
|
||||
this.showExpirationWarning();
|
||||
}
|
||||
}, warningTime);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Show session expiration warning
|
||||
*/
|
||||
showExpirationWarning: function() {
|
||||
if (window.FitPub && window.FitPub.showAlert) {
|
||||
window.FitPub.showAlert(
|
||||
'Your session will expire soon. Please save your work.',
|
||||
'warning'
|
||||
);
|
||||
} else {
|
||||
console.warn('Session expiring soon');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Refresh the current page with authentication
|
||||
*/
|
||||
refreshPage: function() {
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize authentication on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
FitPubAuth.init();
|
||||
});
|
||||
|
||||
// Make available globally
|
||||
window.FitPubAuth = FitPubAuth;
|
||||
468
src/main/resources/static/js/fitpub.js
Normal file
468
src/main/resources/static/js/fitpub.js
Normal file
|
|
@ -0,0 +1,468 @@
|
|||
// 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) {
|
||||
const speedKmh = props.speed * 3.6;
|
||||
popupContent += `<strong>Speed:</strong> ${speedKmh.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();
|
||||
if (bounds.isValid()) {
|
||||
map.fitBounds(bounds, { padding: [50, 50] });
|
||||
}
|
||||
} 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
|
||||
setTimeout(() => {
|
||||
map.invalidateSize();
|
||||
}, 100);
|
||||
|
||||
return map;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add start and finish markers to the map
|
||||
*
|
||||
* @param {Object} map - Leaflet map instance
|
||||
* @param {Object} geoJsonData - GeoJSON track data
|
||||
*/
|
||||
function addStartFinishMarkers(map, geoJsonData) {
|
||||
if (!geoJsonData) {
|
||||
return;
|
||||
}
|
||||
|
||||
let coordinates;
|
||||
|
||||
// Handle both LineString and FeatureCollection
|
||||
if (geoJsonData.type === 'LineString') {
|
||||
coordinates = geoJsonData.coordinates;
|
||||
} else if (geoJsonData.type === 'Feature') {
|
||||
coordinates = geoJsonData.geometry.coordinates;
|
||||
} else if (geoJsonData.type === 'FeatureCollection' && geoJsonData.features && geoJsonData.features.length > 0) {
|
||||
coordinates = geoJsonData.features[0].geometry.coordinates;
|
||||
}
|
||||
|
||||
if (!coordinates || coordinates.length < 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Start marker (green)
|
||||
const startCoord = coordinates[0];
|
||||
const startMarker = L.marker([startCoord[1], startCoord[0]], {
|
||||
icon: L.divIcon({
|
||||
className: 'start-finish-marker',
|
||||
html: `<div style="
|
||||
background-color: #10b981;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid white;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||||
"></div>`,
|
||||
iconSize: [24, 24],
|
||||
iconAnchor: [12, 12]
|
||||
}),
|
||||
title: 'Start'
|
||||
}).addTo(map);
|
||||
|
||||
startMarker.bindPopup('<strong>Start</strong>');
|
||||
|
||||
// Finish marker (red)
|
||||
const finishCoord = coordinates[coordinates.length - 1];
|
||||
const finishMarker = L.marker([finishCoord[1], finishCoord[0]], {
|
||||
icon: L.divIcon({
|
||||
className: 'start-finish-marker',
|
||||
html: `<div style="
|
||||
background-color: #ef4444;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid white;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||||
"></div>`,
|
||||
iconSize: [24, 24],
|
||||
iconAnchor: [12, 12]
|
||||
}),
|
||||
title: 'Finish'
|
||||
}).addTo(map);
|
||||
|
||||
finishMarker.bindPopup('<strong>Finish</strong>');
|
||||
}
|
||||
|
||||
/**
|
||||
* 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)',
|
||||
fill: true,
|
||||
tension: 0.4
|
||||
}]
|
||||
},
|
||||
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`;
|
||||
}
|
||||
|
||||
// Make functions available globally for inline scripts
|
||||
window.FitPub = {
|
||||
createActivityMap,
|
||||
createElevationChart,
|
||||
showAlert,
|
||||
formatDuration,
|
||||
formatDistance,
|
||||
formatPace
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue