More vibin
This commit is contained in:
Tim Zöller
parent
1901daf5ce
commit
c1729a629d
47 changed files with 5754 additions and 41 deletions
443
src/main/resources/templates/activities/detail.html
Normal file
443
src/main/resources/templates/activities/detail.html
Normal file
|
|
@ -0,0 +1,443 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<head>
|
||||
<title>Activity Details</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- Loading Indicator -->
|
||||
<div id="loadingIndicator" class="text-center py-5">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p class="mt-2 text-muted">Loading activity...</p>
|
||||
</div>
|
||||
|
||||
<!-- Error Alert -->
|
||||
<div id="errorAlert" class="alert alert-danger d-none" role="alert">
|
||||
<i class="bi bi-exclamation-triangle-fill"></i>
|
||||
<span id="errorMessage"></span>
|
||||
</div>
|
||||
|
||||
<!-- Activity Content -->
|
||||
<div id="activityContent" class="d-none">
|
||||
<!-- Activity Header -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<h2 id="activityTitle">Activity Title</h2>
|
||||
<p class="text-muted mb-2">
|
||||
<span id="activityType" class="activity-type-badge"></span>
|
||||
<span class="ms-2">
|
||||
<i class="bi bi-calendar"></i>
|
||||
<span id="activityDate"></span>
|
||||
</span>
|
||||
<span class="ms-2" id="visibilityBadge">
|
||||
<i class="bi bi-globe"></i>
|
||||
<span id="activityVisibility"></span>
|
||||
</span>
|
||||
</p>
|
||||
<p id="activityDescription" class="text-muted"></p>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<a href="#" id="editBtn" class="btn btn-outline-primary">
|
||||
<i class="bi bi-pencil"></i> Edit
|
||||
</a>
|
||||
<button id="deleteBtn" class="btn btn-outline-danger">
|
||||
<i class="bi bi-trash"></i> Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activity Metrics -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-3 col-6 mb-3">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h3 class="text-primary mb-0" id="metricDistance">--</h3>
|
||||
<p class="text-muted mb-0">Distance</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-3">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h3 class="text-primary mb-0" id="metricDuration">--</h3>
|
||||
<p class="text-muted mb-0">Duration</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-3">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h3 class="text-primary mb-0" id="metricElevation">--</h3>
|
||||
<p class="text-muted mb-0">Elevation Gain</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-3">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h3 class="text-primary mb-0" id="metricPace">--</h3>
|
||||
<p class="text-muted mb-0">Avg Pace</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Map -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-map"></i> Route Map
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div id="activityMap" class="map-container-large"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Elevation Chart -->
|
||||
<div class="row mb-4" id="elevationSection" style="display: none;">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-graph-up"></i> Elevation Profile
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="elevationChart" height="100"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Metrics -->
|
||||
<div class="row mb-4" id="additionalMetrics" style="display: none;">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-speedometer2"></i> Additional Metrics
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3" id="avgHeartRateContainer" style="display: none;">
|
||||
<strong>Average Heart Rate:</strong>
|
||||
<span id="avgHeartRate" class="float-end">-- bpm</span>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3" id="maxHeartRateContainer" style="display: none;">
|
||||
<strong>Max Heart Rate:</strong>
|
||||
<span id="maxHeartRate" class="float-end">-- bpm</span>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3" id="avgCadenceContainer" style="display: none;">
|
||||
<strong>Average Cadence:</strong>
|
||||
<span id="avgCadence" class="float-end">-- rpm</span>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3" id="avgSpeedContainer" style="display: none;">
|
||||
<strong>Average Speed:</strong>
|
||||
<span id="avgSpeed" class="float-end">-- km/h</span>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3" id="maxSpeedContainer" style="display: none;">
|
||||
<strong>Max Speed:</strong>
|
||||
<span id="maxSpeed" class="float-end">-- km/h</span>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3" id="caloriesContainer" style="display: none;">
|
||||
<strong>Calories:</strong>
|
||||
<span id="calories" class="float-end">-- kcal</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Back Button -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<a th:href="@{/activities}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left"></i> Back to Activities
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="deleteModalLabel">
|
||||
<i class="bi bi-exclamation-triangle text-danger"></i>
|
||||
Delete Activity
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete this activity?</p>
|
||||
<p class="text-danger mb-0"><strong>This action cannot be undone.</strong></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">
|
||||
<i class="bi bi-trash"></i> Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Scripts -->
|
||||
<th:block layout:fragment="scripts">
|
||||
<script th:inline="javascript">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const activityId = window.location.pathname.split('/').pop();
|
||||
const loadingIndicator = document.getElementById('loadingIndicator');
|
||||
const errorAlert = document.getElementById('errorAlert');
|
||||
const errorMessage = document.getElementById('errorMessage');
|
||||
const activityContent = document.getElementById('activityContent');
|
||||
|
||||
// Load activity details
|
||||
loadActivity();
|
||||
|
||||
async function loadActivity() {
|
||||
try {
|
||||
const response = await FitPubAuth.authenticatedFetch(`/api/activities/${activityId}`);
|
||||
|
||||
if (response.ok) {
|
||||
const activity = await response.json();
|
||||
renderActivity(activity);
|
||||
|
||||
// Hide loading, show content
|
||||
loadingIndicator.classList.add('d-none');
|
||||
activityContent.classList.remove('d-none');
|
||||
} else {
|
||||
throw new Error('Failed to load activity');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading activity:', error);
|
||||
loadingIndicator.classList.add('d-none');
|
||||
errorMessage.textContent = 'Failed to load activity. Please try again.';
|
||||
errorAlert.classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
function renderActivity(activity) {
|
||||
// Header
|
||||
document.getElementById('activityTitle').textContent = activity.title || 'Untitled Activity';
|
||||
document.getElementById('activityType').textContent = activity.activityType;
|
||||
document.getElementById('activityType').className = `activity-type-badge activity-type-${activity.activityType.toLowerCase()}`;
|
||||
document.getElementById('activityDate').textContent = new Date(activity.startedAt).toLocaleString();
|
||||
document.getElementById('activityVisibility').textContent = activity.visibility;
|
||||
|
||||
// Visibility icon
|
||||
const visIcon = getVisibilityIcon(activity.visibility);
|
||||
document.querySelector('#visibilityBadge i').className = `bi bi-${visIcon}`;
|
||||
document.getElementById('visibilityBadge').className = `ms-2 visibility-${activity.visibility.toLowerCase()}`;
|
||||
|
||||
// Description
|
||||
if (activity.description) {
|
||||
document.getElementById('activityDescription').textContent = activity.description;
|
||||
} else {
|
||||
document.getElementById('activityDescription').style.display = 'none';
|
||||
}
|
||||
|
||||
// Edit button
|
||||
document.getElementById('editBtn').href = `/activities/${activity.id}/edit`;
|
||||
|
||||
// Metrics
|
||||
document.getElementById('metricDistance').textContent = formatDistance(activity.totalDistance);
|
||||
document.getElementById('metricDuration').textContent = formatDuration(activity.totalDuration);
|
||||
document.getElementById('metricElevation').textContent = activity.elevationGain ? Math.round(activity.elevationGain) + 'm' : 'N/A';
|
||||
|
||||
// Calculate pace
|
||||
if (activity.totalDistance && activity.totalDuration) {
|
||||
const paceSeconds = activity.totalDuration / (activity.totalDistance / 1000);
|
||||
document.getElementById('metricPace').textContent = formatPace(paceSeconds);
|
||||
}
|
||||
|
||||
// Render map if track data exists
|
||||
if (activity.simplifiedTrack) {
|
||||
renderMap(activity.simplifiedTrack);
|
||||
}
|
||||
|
||||
// Render elevation chart if data exists
|
||||
if (activity.trackPoints && activity.trackPoints.length > 0) {
|
||||
const hasElevation = activity.trackPoints.some(p => p.elevation != null);
|
||||
if (hasElevation) {
|
||||
document.getElementById('elevationSection').style.display = 'block';
|
||||
renderElevationChart(activity.trackPoints);
|
||||
}
|
||||
}
|
||||
|
||||
// Additional metrics
|
||||
renderAdditionalMetrics(activity);
|
||||
}
|
||||
|
||||
function renderMap(simplifiedTrack) {
|
||||
// Parse GeoJSON from simplifiedTrack
|
||||
const geoJson = {
|
||||
type: 'LineString',
|
||||
coordinates: simplifiedTrack.coordinates
|
||||
};
|
||||
|
||||
// Create map
|
||||
FitPub.createActivityMap('activityMap', geoJson, {
|
||||
showStartEnd: true,
|
||||
fitBounds: true
|
||||
});
|
||||
}
|
||||
|
||||
function renderElevationChart(trackPoints) {
|
||||
const elevationData = trackPoints
|
||||
.filter(p => p.elevation != null)
|
||||
.map((p, index) => ({
|
||||
x: index,
|
||||
y: p.elevation
|
||||
}));
|
||||
|
||||
if (elevationData.length > 0) {
|
||||
FitPub.createElevationChart('elevationChart', elevationData);
|
||||
}
|
||||
}
|
||||
|
||||
function renderAdditionalMetrics(activity) {
|
||||
let hasAdditionalMetrics = false;
|
||||
|
||||
// Average Heart Rate
|
||||
if (activity.averageHeartRate) {
|
||||
document.getElementById('avgHeartRate').textContent = Math.round(activity.averageHeartRate) + ' bpm';
|
||||
document.getElementById('avgHeartRateContainer').style.display = 'block';
|
||||
hasAdditionalMetrics = true;
|
||||
}
|
||||
|
||||
// Max Heart Rate
|
||||
if (activity.maxHeartRate) {
|
||||
document.getElementById('maxHeartRate').textContent = Math.round(activity.maxHeartRate) + ' bpm';
|
||||
document.getElementById('maxHeartRateContainer').style.display = 'block';
|
||||
hasAdditionalMetrics = true;
|
||||
}
|
||||
|
||||
// Average Cadence
|
||||
if (activity.averageCadence) {
|
||||
document.getElementById('avgCadence').textContent = Math.round(activity.averageCadence) + ' rpm';
|
||||
document.getElementById('avgCadenceContainer').style.display = 'block';
|
||||
hasAdditionalMetrics = true;
|
||||
}
|
||||
|
||||
// Average Speed
|
||||
if (activity.averageSpeed) {
|
||||
document.getElementById('avgSpeed').textContent = (activity.averageSpeed * 3.6).toFixed(1) + ' km/h';
|
||||
document.getElementById('avgSpeedContainer').style.display = 'block';
|
||||
hasAdditionalMetrics = true;
|
||||
}
|
||||
|
||||
// Max Speed
|
||||
if (activity.maxSpeed) {
|
||||
document.getElementById('maxSpeed').textContent = (activity.maxSpeed * 3.6).toFixed(1) + ' km/h';
|
||||
document.getElementById('maxSpeedContainer').style.display = 'block';
|
||||
hasAdditionalMetrics = true;
|
||||
}
|
||||
|
||||
// Calories
|
||||
if (activity.calories) {
|
||||
document.getElementById('calories').textContent = Math.round(activity.calories) + ' kcal';
|
||||
document.getElementById('caloriesContainer').style.display = 'block';
|
||||
hasAdditionalMetrics = true;
|
||||
}
|
||||
|
||||
if (hasAdditionalMetrics) {
|
||||
document.getElementById('additionalMetrics').style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// Delete functionality
|
||||
document.getElementById('deleteBtn').addEventListener('click', function() {
|
||||
const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
|
||||
modal.show();
|
||||
});
|
||||
|
||||
document.getElementById('confirmDeleteBtn').addEventListener('click', async function() {
|
||||
try {
|
||||
const response = await FitPubAuth.authenticatedFetch(
|
||||
`/api/activities/${activityId}`,
|
||||
{ method: 'DELETE' }
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
// Close modal and redirect
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
|
||||
modal.hide();
|
||||
|
||||
FitPub.showAlert('Activity deleted successfully', 'success');
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = '/activities';
|
||||
}, 1000);
|
||||
} else {
|
||||
throw new Error('Failed to delete activity');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Delete error:', error);
|
||||
FitPub.showAlert('Failed to delete activity. Please try again.', 'danger');
|
||||
}
|
||||
});
|
||||
|
||||
// Helper functions
|
||||
function formatDistance(meters) {
|
||||
if (!meters) return 'N/A';
|
||||
if (meters >= 1000) {
|
||||
return (meters / 1000).toFixed(2) + ' km';
|
||||
}
|
||||
return Math.round(meters) + ' m';
|
||||
}
|
||||
|
||||
function formatDuration(seconds) {
|
||||
if (!seconds) return 'N/A';
|
||||
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(' ');
|
||||
}
|
||||
|
||||
function formatPace(secondsPerKm) {
|
||||
if (!secondsPerKm) return 'N/A';
|
||||
const minutes = Math.floor(secondsPerKm / 60);
|
||||
const seconds = Math.floor(secondsPerKm % 60);
|
||||
return `${minutes}:${seconds.toString().padStart(2, '0')}/km`;
|
||||
}
|
||||
|
||||
function getVisibilityIcon(visibility) {
|
||||
switch (visibility) {
|
||||
case 'PUBLIC': return 'globe';
|
||||
case 'FOLLOWERS': return 'people';
|
||||
case 'PRIVATE': return 'lock';
|
||||
default: return 'question-circle';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
</body>
|
||||
</html>
|
||||
330
src/main/resources/templates/activities/edit.html
Normal file
330
src/main/resources/templates/activities/edit.html
Normal file
|
|
@ -0,0 +1,330 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<head>
|
||||
<title>Edit Activity</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<h2 class="mb-4">
|
||||
<i class="bi bi-pencil text-primary"></i>
|
||||
Edit Activity
|
||||
</h2>
|
||||
|
||||
<!-- Loading Indicator -->
|
||||
<div id="loadingIndicator" class="text-center py-5">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p class="mt-2 text-muted">Loading activity...</p>
|
||||
</div>
|
||||
|
||||
<!-- Success Alert -->
|
||||
<div id="successAlert" class="alert alert-success d-none" role="alert">
|
||||
<i class="bi bi-check-circle-fill"></i>
|
||||
<span id="successMessage">Activity updated successfully!</span>
|
||||
</div>
|
||||
|
||||
<!-- Error Alert -->
|
||||
<div id="errorAlert" class="alert alert-danger d-none" role="alert">
|
||||
<i class="bi bi-exclamation-triangle-fill"></i>
|
||||
<span id="errorMessage"></span>
|
||||
</div>
|
||||
|
||||
<!-- Edit Form -->
|
||||
<div class="card shadow-sm d-none" id="editCard">
|
||||
<div class="card-body p-4">
|
||||
<form id="editForm">
|
||||
<!-- Title -->
|
||||
<div class="mb-3">
|
||||
<label for="title" class="form-label">
|
||||
Title <span class="text-danger">*</span>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="title"
|
||||
name="title"
|
||||
placeholder="e.g., Morning Run"
|
||||
maxlength="200"
|
||||
required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a title for your activity.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activity Type -->
|
||||
<div class="mb-3">
|
||||
<label for="activityType" class="form-label">
|
||||
Activity Type <span class="text-danger">*</span>
|
||||
</label>
|
||||
<select class="form-select" id="activityType" name="activityType" required>
|
||||
<option value="RUN">Run</option>
|
||||
<option value="RIDE">Ride</option>
|
||||
<option value="HIKE">Hike</option>
|
||||
<option value="WALK">Walk</option>
|
||||
<option value="SWIM">Swim</option>
|
||||
<option value="OTHER">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="mb-3">
|
||||
<label for="description" class="form-label">
|
||||
Description
|
||||
</label>
|
||||
<textarea class="form-control"
|
||||
id="description"
|
||||
name="description"
|
||||
rows="4"
|
||||
placeholder="Share details about your activity..."
|
||||
maxlength="5000"></textarea>
|
||||
<div class="form-text">
|
||||
<span id="descCharCount">0</span>/5000 characters
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visibility -->
|
||||
<div class="mb-4">
|
||||
<label for="visibility" class="form-label">
|
||||
Visibility <span class="text-danger">*</span>
|
||||
</label>
|
||||
<select class="form-select" id="visibility" name="visibility" required>
|
||||
<option value="PUBLIC">Public - Anyone can see</option>
|
||||
<option value="FOLLOWERS">Followers Only - Only your followers can see</option>
|
||||
<option value="PRIVATE">Private - Only you can see</option>
|
||||
</select>
|
||||
<div class="form-text">
|
||||
<i class="bi bi-info-circle"></i>
|
||||
Public activities will be shared on the Fediverse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activity Summary (Read-only) -->
|
||||
<div class="alert alert-info">
|
||||
<h6><i class="bi bi-info-circle"></i> Activity Summary</h6>
|
||||
<div id="summaryContent">
|
||||
<!-- Will be populated by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Buttons -->
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||||
<a th:href="@{/activities}" class="btn btn-outline-secondary" id="cancelBtn">
|
||||
<i class="bi bi-x-circle"></i> Cancel
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary" id="saveBtn">
|
||||
<span id="saveBtnText">
|
||||
<i class="bi bi-check-circle"></i> Save Changes
|
||||
</span>
|
||||
<span id="saveBtnSpinner" class="d-none">
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
Saving...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activity Preview Map (Optional) -->
|
||||
<div class="card mt-4 d-none" id="mapPreview">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-map"></i> Route Preview
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div id="activityMap" class="map-container-large"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Scripts -->
|
||||
<th:block layout:fragment="scripts">
|
||||
<script th:inline="javascript">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const activityId = window.location.pathname.split('/').slice(-2, -1)[0];
|
||||
const form = document.getElementById('editForm');
|
||||
const loadingIndicator = document.getElementById('loadingIndicator');
|
||||
const editCard = document.getElementById('editCard');
|
||||
const errorAlert = document.getElementById('errorAlert');
|
||||
const successAlert = document.getElementById('successAlert');
|
||||
const errorMessage = document.getElementById('errorMessage');
|
||||
const saveBtn = document.getElementById('saveBtn');
|
||||
const saveBtnText = document.getElementById('saveBtnText');
|
||||
const saveBtnSpinner = document.getElementById('saveBtnSpinner');
|
||||
const descriptionInput = document.getElementById('description');
|
||||
const descCharCount = document.getElementById('descCharCount');
|
||||
const cancelBtn = document.getElementById('cancelBtn');
|
||||
|
||||
// Load activity data
|
||||
loadActivity();
|
||||
|
||||
async function loadActivity() {
|
||||
try {
|
||||
const response = await FitPubAuth.authenticatedFetch(`/api/activities/${activityId}`);
|
||||
|
||||
if (response.ok) {
|
||||
const activity = await response.json();
|
||||
populateForm(activity);
|
||||
|
||||
// Hide loading, show form
|
||||
loadingIndicator.classList.add('d-none');
|
||||
editCard.classList.remove('d-none');
|
||||
|
||||
// Show map if track exists
|
||||
if (activity.simplifiedTrack) {
|
||||
document.getElementById('mapPreview').classList.remove('d-none');
|
||||
renderMap(activity.simplifiedTrack);
|
||||
}
|
||||
} else {
|
||||
throw new Error('Failed to load activity');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading activity:', error);
|
||||
loadingIndicator.classList.add('d-none');
|
||||
errorMessage.textContent = 'Failed to load activity. Please try again.';
|
||||
errorAlert.classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
function populateForm(activity) {
|
||||
// Populate form fields
|
||||
document.getElementById('title').value = activity.title || '';
|
||||
document.getElementById('activityType').value = activity.activityType || 'OTHER';
|
||||
document.getElementById('description').value = activity.description || '';
|
||||
document.getElementById('visibility').value = activity.visibility || 'PUBLIC';
|
||||
|
||||
// Update character count
|
||||
descCharCount.textContent = (activity.description || '').length;
|
||||
|
||||
// Populate summary
|
||||
document.getElementById('summaryContent').innerHTML = `
|
||||
<p class="mb-1"><strong>Date:</strong> ${new Date(activity.startedAt).toLocaleString()}</p>
|
||||
<p class="mb-1"><strong>Distance:</strong> ${formatDistance(activity.totalDistance)}</p>
|
||||
<p class="mb-1"><strong>Duration:</strong> ${formatDuration(activity.totalDuration)}</p>
|
||||
<p class="mb-0"><strong>Elevation Gain:</strong> ${activity.elevationGain ? Math.round(activity.elevationGain) + 'm' : 'N/A'}</p>
|
||||
`;
|
||||
|
||||
// Update cancel button to go back to activity detail
|
||||
cancelBtn.href = `/activities/${activityId}`;
|
||||
}
|
||||
|
||||
function renderMap(simplifiedTrack) {
|
||||
const geoJson = {
|
||||
type: 'LineString',
|
||||
coordinates: simplifiedTrack.coordinates
|
||||
};
|
||||
|
||||
FitPub.createActivityMap('activityMap', geoJson, {
|
||||
showStartEnd: true,
|
||||
fitBounds: true
|
||||
});
|
||||
}
|
||||
|
||||
// Description character count
|
||||
descriptionInput.addEventListener('input', function() {
|
||||
descCharCount.textContent = this.value.length;
|
||||
});
|
||||
|
||||
// Form submission
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Validate form
|
||||
if (!form.checkValidity()) {
|
||||
form.classList.add('was-validated');
|
||||
return;
|
||||
}
|
||||
|
||||
// Hide alerts
|
||||
errorAlert.classList.add('d-none');
|
||||
successAlert.classList.add('d-none');
|
||||
|
||||
// Show loading state
|
||||
saveBtn.disabled = true;
|
||||
saveBtnText.classList.add('d-none');
|
||||
saveBtnSpinner.classList.remove('d-none');
|
||||
|
||||
// Prepare update data
|
||||
const updateData = {
|
||||
title: document.getElementById('title').value,
|
||||
activityType: document.getElementById('activityType').value,
|
||||
description: document.getElementById('description').value,
|
||||
visibility: document.getElementById('visibility').value
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await FitPubAuth.authenticatedFetch(
|
||||
`/api/activities/${activityId}`,
|
||||
{
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(updateData)
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
// Show success
|
||||
successAlert.classList.remove('d-none');
|
||||
|
||||
// Redirect to activity detail page
|
||||
setTimeout(() => {
|
||||
window.location.href = `/activities/${activityId}`;
|
||||
}, 1500);
|
||||
} else {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.message || 'Failed to update activity');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Update error:', error);
|
||||
errorMessage.textContent = error.message || 'An error occurred while updating. Please try again.';
|
||||
errorAlert.classList.remove('d-none');
|
||||
|
||||
// Reset button state
|
||||
saveBtn.disabled = false;
|
||||
saveBtnText.classList.remove('d-none');
|
||||
saveBtnSpinner.classList.add('d-none');
|
||||
|
||||
// Scroll to error
|
||||
errorAlert.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
});
|
||||
|
||||
// Helper functions
|
||||
function formatDistance(meters) {
|
||||
if (!meters) return 'N/A';
|
||||
if (meters >= 1000) {
|
||||
return (meters / 1000).toFixed(2) + ' km';
|
||||
}
|
||||
return Math.round(meters) + ' m';
|
||||
}
|
||||
|
||||
function formatDuration(seconds) {
|
||||
if (!seconds) return 'N/A';
|
||||
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(' ');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
</body>
|
||||
</html>
|
||||
339
src/main/resources/templates/activities/list.html
Normal file
339
src/main/resources/templates/activities/list.html
Normal file
|
|
@ -0,0 +1,339 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<head>
|
||||
<title>My Activities</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2>
|
||||
<i class="bi bi-list-task text-primary"></i>
|
||||
My Activities
|
||||
</h2>
|
||||
<a th:href="@{/activities/upload}" class="btn btn-primary">
|
||||
<i class="bi bi-cloud-upload"></i> Upload Activity
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Loading Indicator -->
|
||||
<div id="loadingIndicator" class="text-center py-5">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p class="mt-2 text-muted">Loading your activities...</p>
|
||||
</div>
|
||||
|
||||
<!-- Error Alert -->
|
||||
<div id="errorAlert" class="alert alert-danger d-none" role="alert">
|
||||
<i class="bi bi-exclamation-triangle-fill"></i>
|
||||
<span id="errorMessage"></span>
|
||||
</div>
|
||||
|
||||
<!-- Activities List -->
|
||||
<div id="activitiesList" class="d-none">
|
||||
<!-- Will be populated by JavaScript -->
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div id="emptyState" class="text-center py-5 d-none">
|
||||
<i class="bi bi-inbox" style="font-size: 4rem; color: #d1d5db;"></i>
|
||||
<h4 class="mt-3">No Activities Yet</h4>
|
||||
<p class="text-muted">Upload your first FIT file to get started!</p>
|
||||
<a th:href="@{/activities/upload}" class="btn btn-primary mt-3">
|
||||
<i class="bi bi-cloud-upload"></i> Upload Activity
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<nav id="pagination" aria-label="Activities pagination" class="mt-4 d-none">
|
||||
<ul class="pagination justify-content-center" id="paginationList">
|
||||
<!-- Will be populated by JavaScript -->
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="deleteModalLabel">
|
||||
<i class="bi bi-exclamation-triangle text-danger"></i>
|
||||
Delete Activity
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete this activity?</p>
|
||||
<p class="text-danger mb-0"><strong>This action cannot be undone.</strong></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">
|
||||
<i class="bi bi-trash"></i> Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Scripts -->
|
||||
<th:block layout:fragment="scripts">
|
||||
<script th:inline="javascript">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const loadingIndicator = document.getElementById('loadingIndicator');
|
||||
const errorAlert = document.getElementById('errorAlert');
|
||||
const errorMessage = document.getElementById('errorMessage');
|
||||
const activitiesList = document.getElementById('activitiesList');
|
||||
const emptyState = document.getElementById('emptyState');
|
||||
const pagination = document.getElementById('pagination');
|
||||
|
||||
let currentPage = 0;
|
||||
let totalPages = 0;
|
||||
let activityToDelete = null;
|
||||
|
||||
// Load activities
|
||||
loadActivities(currentPage);
|
||||
|
||||
async function loadActivities(page) {
|
||||
try {
|
||||
// Show loading
|
||||
loadingIndicator.classList.remove('d-none');
|
||||
activitiesList.classList.add('d-none');
|
||||
emptyState.classList.add('d-none');
|
||||
errorAlert.classList.add('d-none');
|
||||
pagination.classList.add('d-none');
|
||||
|
||||
const response = await FitPubAuth.authenticatedFetch(
|
||||
`/api/activities?page=${page}&size=10&sort=startedAt,desc`
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
|
||||
// Hide loading
|
||||
loadingIndicator.classList.add('d-none');
|
||||
|
||||
if (data.content && data.content.length > 0) {
|
||||
renderActivities(data.content);
|
||||
renderPagination(data);
|
||||
activitiesList.classList.remove('d-none');
|
||||
pagination.classList.remove('d-none');
|
||||
} else {
|
||||
emptyState.classList.remove('d-none');
|
||||
}
|
||||
|
||||
totalPages = data.totalPages;
|
||||
currentPage = data.number;
|
||||
} else {
|
||||
throw new Error('Failed to load activities');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading activities:', error);
|
||||
loadingIndicator.classList.add('d-none');
|
||||
errorMessage.textContent = 'Failed to load activities. Please try again.';
|
||||
errorAlert.classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
function renderActivities(activities) {
|
||||
activitiesList.innerHTML = activities.map(activity => `
|
||||
<div class="card activity-card mb-3">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<h5 class="card-title">
|
||||
<a href="/activities/${activity.id}" class="text-decoration-none">
|
||||
${escapeHtml(activity.title || 'Untitled Activity')}
|
||||
</a>
|
||||
</h5>
|
||||
<p class="text-muted mb-2">
|
||||
<span class="activity-type-badge activity-type-${activity.activityType.toLowerCase()}">
|
||||
${activity.activityType}
|
||||
</span>
|
||||
<span class="ms-2">
|
||||
<i class="bi bi-calendar"></i>
|
||||
${new Date(activity.startedAt).toLocaleDateString()}
|
||||
</span>
|
||||
<span class="ms-2 visibility-${activity.visibility.toLowerCase()}">
|
||||
<i class="bi bi-${getVisibilityIcon(activity.visibility)}"></i>
|
||||
${activity.visibility}
|
||||
</span>
|
||||
</p>
|
||||
${activity.description ? `<p class="card-text">${escapeHtml(activity.description).substring(0, 150)}${activity.description.length > 150 ? '...' : ''}</p>` : ''}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="row text-center">
|
||||
<div class="col-4">
|
||||
<div class="metric-card">
|
||||
<div class="metric-value small">${formatDistance(activity.totalDistance)}</div>
|
||||
<div class="metric-label">Distance</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="metric-card">
|
||||
<div class="metric-value small">${formatDuration(activity.totalDuration)}</div>
|
||||
<div class="metric-label">Time</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="metric-card">
|
||||
<div class="metric-value small">${activity.elevationGain ? Math.round(activity.elevationGain) + 'm' : 'N/A'}</div>
|
||||
<div class="metric-label">Elevation</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 d-flex gap-2">
|
||||
<a href="/activities/${activity.id}" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-eye"></i> View
|
||||
</a>
|
||||
<a href="/activities/${activity.id}/edit" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-pencil"></i> Edit
|
||||
</a>
|
||||
<button class="btn btn-sm btn-outline-danger" onclick="confirmDelete('${activity.id}')">
|
||||
<i class="bi bi-trash"></i> Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function renderPagination(data) {
|
||||
const paginationList = document.getElementById('paginationList');
|
||||
let html = '';
|
||||
|
||||
// Previous button
|
||||
html += `
|
||||
<li class="page-item ${data.first ? 'disabled' : ''}">
|
||||
<a class="page-link" href="#" onclick="changePage(${data.number - 1}); return false;">
|
||||
<i class="bi bi-chevron-left"></i>
|
||||
</a>
|
||||
</li>
|
||||
`;
|
||||
|
||||
// Page numbers
|
||||
const startPage = Math.max(0, data.number - 2);
|
||||
const endPage = Math.min(data.totalPages - 1, data.number + 2);
|
||||
|
||||
if (startPage > 0) {
|
||||
html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
|
||||
}
|
||||
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
html += `
|
||||
<li class="page-item ${i === data.number ? 'active' : ''}">
|
||||
<a class="page-link" href="#" onclick="changePage(${i}); return false;">${i + 1}</a>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
|
||||
if (endPage < data.totalPages - 1) {
|
||||
html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
|
||||
}
|
||||
|
||||
// Next button
|
||||
html += `
|
||||
<li class="page-item ${data.last ? 'disabled' : ''}">
|
||||
<a class="page-link" href="#" onclick="changePage(${data.number + 1}); return false;">
|
||||
<i class="bi bi-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
`;
|
||||
|
||||
paginationList.innerHTML = html;
|
||||
}
|
||||
|
||||
// Global functions for pagination and delete
|
||||
window.changePage = function(page) {
|
||||
loadActivities(page);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
window.confirmDelete = function(activityId) {
|
||||
activityToDelete = activityId;
|
||||
const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
|
||||
modal.show();
|
||||
};
|
||||
|
||||
// Delete confirmation
|
||||
document.getElementById('confirmDeleteBtn').addEventListener('click', async function() {
|
||||
if (!activityToDelete) return;
|
||||
|
||||
try {
|
||||
const response = await FitPubAuth.authenticatedFetch(
|
||||
`/api/activities/${activityToDelete}`,
|
||||
{ method: 'DELETE' }
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
// Close modal
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
|
||||
modal.hide();
|
||||
|
||||
// Reload activities
|
||||
loadActivities(currentPage);
|
||||
|
||||
// Show success message
|
||||
FitPub.showAlert('Activity deleted successfully', 'success');
|
||||
} else {
|
||||
throw new Error('Failed to delete activity');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Delete error:', error);
|
||||
FitPub.showAlert('Failed to delete activity. Please try again.', 'danger');
|
||||
}
|
||||
|
||||
activityToDelete = null;
|
||||
});
|
||||
|
||||
// Helper functions
|
||||
function formatDistance(meters) {
|
||||
if (!meters) return 'N/A';
|
||||
if (meters >= 1000) {
|
||||
return (meters / 1000).toFixed(1) + ' km';
|
||||
}
|
||||
return Math.round(meters) + ' m';
|
||||
}
|
||||
|
||||
function formatDuration(seconds) {
|
||||
if (!seconds) return 'N/A';
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
|
||||
if (hours > 0) {
|
||||
return hours + 'h ' + minutes + 'm';
|
||||
}
|
||||
return minutes + 'm';
|
||||
}
|
||||
|
||||
function getVisibilityIcon(visibility) {
|
||||
switch (visibility) {
|
||||
case 'PUBLIC': return 'globe';
|
||||
case 'FOLLOWERS': return 'people';
|
||||
case 'PRIVATE': return 'lock';
|
||||
default: return 'question-circle';
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
</body>
|
||||
</html>
|
||||
420
src/main/resources/templates/activities/upload.html
Normal file
420
src/main/resources/templates/activities/upload.html
Normal file
|
|
@ -0,0 +1,420 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<head>
|
||||
<title>Upload Activity</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<h2 class="mb-4">
|
||||
<i class="bi bi-cloud-upload text-primary"></i>
|
||||
Upload Activity
|
||||
</h2>
|
||||
|
||||
<!-- Success Alert -->
|
||||
<div id="successAlert" class="alert alert-success d-none" role="alert">
|
||||
<i class="bi bi-check-circle-fill"></i>
|
||||
<span id="successMessage">Activity uploaded successfully!</span>
|
||||
<a href="#" id="viewActivityLink" class="alert-link">View activity</a>
|
||||
</div>
|
||||
|
||||
<!-- Error Alert -->
|
||||
<div id="errorAlert" class="alert alert-danger d-none" role="alert">
|
||||
<i class="bi bi-exclamation-triangle-fill"></i>
|
||||
<span id="errorMessage"></span>
|
||||
</div>
|
||||
|
||||
<!-- Upload Form -->
|
||||
<div class="card shadow-sm" id="uploadCard">
|
||||
<div class="card-body p-4">
|
||||
<form id="uploadForm" enctype="multipart/form-data">
|
||||
<!-- File Upload Area -->
|
||||
<div class="mb-4">
|
||||
<label class="form-label fw-bold">
|
||||
FIT File <span class="text-danger">*</span>
|
||||
</label>
|
||||
<div class="file-upload-area" id="fileUploadArea">
|
||||
<input type="file"
|
||||
id="fitFile"
|
||||
name="file"
|
||||
accept=".fit"
|
||||
class="d-none"
|
||||
required>
|
||||
<div class="file-upload-icon">
|
||||
<i class="bi bi-cloud-arrow-up"></i>
|
||||
</div>
|
||||
<p class="mb-2"><strong>Drop your FIT file here</strong></p>
|
||||
<p class="text-muted mb-2">or click to browse</p>
|
||||
<p class="file-upload-label text-primary fw-bold" id="fileLabel">
|
||||
No file selected
|
||||
</p>
|
||||
<small class="text-muted">Supported: .fit files from Garmin, Wahoo, etc. (Max 50MB)</small>
|
||||
</div>
|
||||
<div class="invalid-feedback">
|
||||
Please select a FIT file to upload.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div class="mb-4 d-none" id="progressContainer">
|
||||
<label class="form-label">Upload Progress</label>
|
||||
<div class="progress" style="height: 25px;">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated"
|
||||
id="progressBar"
|
||||
role="progressbar"
|
||||
style="width: 0%"
|
||||
aria-valuenow="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100">
|
||||
<span id="progressText">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
<small class="text-muted" id="progressStatus">Uploading...</small>
|
||||
</div>
|
||||
|
||||
<!-- Activity Metadata (shown after upload) -->
|
||||
<div id="metadataSection" class="d-none">
|
||||
<hr class="my-4">
|
||||
<h5 class="mb-3">Activity Details</h5>
|
||||
|
||||
<!-- Title -->
|
||||
<div class="mb-3">
|
||||
<label for="title" class="form-label">
|
||||
Title <span class="text-danger">*</span>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="title"
|
||||
name="title"
|
||||
placeholder="e.g., Morning Run"
|
||||
maxlength="200">
|
||||
<div class="invalid-feedback">
|
||||
Please provide a title for your activity.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="mb-3">
|
||||
<label for="description" class="form-label">
|
||||
Description
|
||||
</label>
|
||||
<textarea class="form-control"
|
||||
id="description"
|
||||
name="description"
|
||||
rows="4"
|
||||
placeholder="Share details about your activity..."
|
||||
maxlength="5000"></textarea>
|
||||
<div class="form-text">
|
||||
<span id="descCharCount">0</span>/5000 characters
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visibility -->
|
||||
<div class="mb-4">
|
||||
<label for="visibility" class="form-label">
|
||||
Visibility <span class="text-danger">*</span>
|
||||
</label>
|
||||
<select class="form-select" id="visibility" name="visibility">
|
||||
<option value="PUBLIC" selected>Public - Anyone can see</option>
|
||||
<option value="FOLLOWERS">Followers Only - Only your followers can see</option>
|
||||
<option value="PRIVATE">Private - Only you can see</option>
|
||||
</select>
|
||||
<div class="form-text">
|
||||
<i class="bi bi-info-circle"></i>
|
||||
Public activities will be shared on the Fediverse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activity Summary (from uploaded file) -->
|
||||
<div id="activitySummary" class="alert alert-info">
|
||||
<h6><i class="bi bi-info-circle"></i> Activity Summary</h6>
|
||||
<div id="summaryContent">
|
||||
<!-- Will be populated by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Buttons -->
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||||
<button type="button" class="btn btn-outline-secondary" id="cancelBtn">
|
||||
<i class="bi bi-x-circle"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" id="uploadBtn">
|
||||
<span id="uploadBtnText">
|
||||
<i class="bi bi-cloud-upload"></i> Upload Activity
|
||||
</span>
|
||||
<span id="uploadBtnSpinner" class="d-none">
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
Processing...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upload Tips -->
|
||||
<div class="card border-0 bg-light mt-4">
|
||||
<div class="card-body">
|
||||
<h6><i class="bi bi-lightbulb text-warning"></i> Upload Tips</h6>
|
||||
<ul class="mb-0 small">
|
||||
<li>FIT files can be exported from Garmin Connect, Strava, Wahoo, and most GPS devices</li>
|
||||
<li>The activity will be processed to extract GPS tracks, metrics, and statistics</li>
|
||||
<li>You can add a title and description after uploading</li>
|
||||
<li>Public activities will appear in your followers' timelines on the Fediverse</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Scripts -->
|
||||
<th:block layout:fragment="scripts">
|
||||
<script th:inline="javascript">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.getElementById('uploadForm');
|
||||
const fitFileInput = document.getElementById('fitFile');
|
||||
const fileLabel = document.getElementById('fileLabel');
|
||||
const uploadBtn = document.getElementById('uploadBtn');
|
||||
const uploadBtnText = document.getElementById('uploadBtnText');
|
||||
const uploadBtnSpinner = document.getElementById('uploadBtnSpinner');
|
||||
const cancelBtn = document.getElementById('cancelBtn');
|
||||
const errorAlert = document.getElementById('errorAlert');
|
||||
const successAlert = document.getElementById('successAlert');
|
||||
const errorMessage = document.getElementById('errorMessage');
|
||||
const progressContainer = document.getElementById('progressContainer');
|
||||
const progressBar = document.getElementById('progressBar');
|
||||
const progressText = document.getElementById('progressText');
|
||||
const progressStatus = document.getElementById('progressStatus');
|
||||
const metadataSection = document.getElementById('metadataSection');
|
||||
const descriptionInput = document.getElementById('description');
|
||||
const descCharCount = document.getElementById('descCharCount');
|
||||
|
||||
let uploadedActivityId = null;
|
||||
|
||||
// File selection handler
|
||||
fitFileInput.addEventListener('change', function() {
|
||||
if (this.files.length > 0) {
|
||||
const file = this.files[0];
|
||||
fileLabel.textContent = file.name;
|
||||
fileLabel.classList.add('text-success');
|
||||
}
|
||||
});
|
||||
|
||||
// Description character count
|
||||
if (descriptionInput) {
|
||||
descriptionInput.addEventListener('input', function() {
|
||||
descCharCount.textContent = this.value.length;
|
||||
});
|
||||
}
|
||||
|
||||
// Cancel button
|
||||
cancelBtn.addEventListener('click', function() {
|
||||
if (confirm('Are you sure you want to cancel? Any unsaved changes will be lost.')) {
|
||||
window.location.href = '/activities';
|
||||
}
|
||||
});
|
||||
|
||||
// Form submission
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
console.log('Form submitted');
|
||||
console.log('File input files:', fitFileInput.files);
|
||||
|
||||
// Validate form
|
||||
if (!form.checkValidity()) {
|
||||
console.log('Form validation failed');
|
||||
form.classList.add('was-validated');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if file is selected
|
||||
if (!fitFileInput.files || fitFileInput.files.length === 0) {
|
||||
console.error('No file selected');
|
||||
errorMessage.textContent = 'Please select a FIT file to upload.';
|
||||
errorAlert.classList.remove('d-none');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Starting upload...');
|
||||
|
||||
// Hide alerts
|
||||
errorAlert.classList.add('d-none');
|
||||
successAlert.classList.add('d-none');
|
||||
|
||||
// Show progress
|
||||
progressContainer.classList.remove('d-none');
|
||||
uploadBtn.disabled = true;
|
||||
cancelBtn.disabled = true;
|
||||
uploadBtnText.classList.add('d-none');
|
||||
uploadBtnSpinner.classList.remove('d-none');
|
||||
|
||||
// Prepare form data
|
||||
const formData = new FormData();
|
||||
formData.append('file', fitFileInput.files[0]);
|
||||
|
||||
// If metadata is filled, include it
|
||||
if (!metadataSection.classList.contains('d-none')) {
|
||||
formData.append('title', document.getElementById('title').value);
|
||||
formData.append('description', document.getElementById('description').value);
|
||||
formData.append('visibility', document.getElementById('visibility').value);
|
||||
}
|
||||
|
||||
try {
|
||||
// Upload with progress tracking
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.upload.addEventListener('progress', function(e) {
|
||||
if (e.lengthComputable) {
|
||||
const percentComplete = Math.round((e.loaded / e.total) * 100);
|
||||
progressBar.style.width = percentComplete + '%';
|
||||
progressBar.setAttribute('aria-valuenow', percentComplete);
|
||||
progressText.textContent = percentComplete + '%';
|
||||
}
|
||||
});
|
||||
|
||||
xhr.addEventListener('load', function() {
|
||||
console.log('XHR load event, status:', xhr.status);
|
||||
console.log('Response:', xhr.responseText);
|
||||
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
try {
|
||||
const response = JSON.parse(xhr.responseText);
|
||||
uploadedActivityId = response.id;
|
||||
|
||||
progressStatus.textContent = 'Processing complete!';
|
||||
progressBar.classList.remove('progress-bar-animated');
|
||||
progressBar.classList.add('bg-success');
|
||||
|
||||
// Show success message
|
||||
successAlert.classList.remove('d-none');
|
||||
document.getElementById('viewActivityLink').href = '/activities/' + uploadedActivityId;
|
||||
|
||||
// Show metadata section if not already shown
|
||||
if (metadataSection.classList.contains('d-none')) {
|
||||
metadataSection.classList.remove('d-none');
|
||||
|
||||
// Populate summary
|
||||
document.getElementById('summaryContent').innerHTML = `
|
||||
<p class="mb-1"><strong>Type:</strong> ${response.activityType || 'Unknown'}</p>
|
||||
<p class="mb-1"><strong>Distance:</strong> ${formatDistance(response.totalDistance)}</p>
|
||||
<p class="mb-1"><strong>Duration:</strong> ${formatDuration(response.totalDurationSeconds)}</p>
|
||||
<p class="mb-0"><strong>Date:</strong> ${new Date(response.startedAt).toLocaleString()}</p>
|
||||
`;
|
||||
|
||||
// Pre-fill title with activity type and date
|
||||
const activityDate = new Date(response.startedAt);
|
||||
document.getElementById('title').value = `${response.activityType || 'Activity'} - ${activityDate.toLocaleDateString()}`;
|
||||
}
|
||||
|
||||
// Reset form state
|
||||
uploadBtn.disabled = false;
|
||||
cancelBtn.disabled = false;
|
||||
uploadBtnText.classList.remove('d-none');
|
||||
uploadBtnSpinner.classList.add('d-none');
|
||||
uploadBtn.innerHTML = '<i class="bi bi-check-circle"></i> Save Details';
|
||||
} catch (parseError) {
|
||||
console.error('Error parsing response:', parseError);
|
||||
errorMessage.textContent = 'Error processing server response: ' + parseError.message;
|
||||
errorAlert.classList.remove('d-none');
|
||||
|
||||
// Reset button state
|
||||
uploadBtn.disabled = false;
|
||||
cancelBtn.disabled = false;
|
||||
uploadBtnText.classList.remove('d-none');
|
||||
uploadBtnSpinner.classList.add('d-none');
|
||||
progressContainer.classList.add('d-none');
|
||||
}
|
||||
} else {
|
||||
console.error('Upload failed with status:', xhr.status);
|
||||
let errorMsg = 'Upload failed';
|
||||
try {
|
||||
const errorData = JSON.parse(xhr.responseText);
|
||||
errorMsg = errorData.message || errorMsg;
|
||||
} catch (e) {
|
||||
errorMsg = xhr.responseText || errorMsg;
|
||||
}
|
||||
errorMessage.textContent = errorMsg;
|
||||
errorAlert.classList.remove('d-none');
|
||||
|
||||
// Reset button state
|
||||
uploadBtn.disabled = false;
|
||||
cancelBtn.disabled = false;
|
||||
uploadBtnText.classList.remove('d-none');
|
||||
uploadBtnSpinner.classList.add('d-none');
|
||||
progressContainer.classList.add('d-none');
|
||||
}
|
||||
});
|
||||
|
||||
xhr.addEventListener('error', function() {
|
||||
console.error('XHR error event');
|
||||
errorMessage.textContent = 'Network error during upload';
|
||||
errorAlert.classList.remove('d-none');
|
||||
|
||||
// Reset button state
|
||||
uploadBtn.disabled = false;
|
||||
cancelBtn.disabled = false;
|
||||
uploadBtnText.classList.remove('d-none');
|
||||
uploadBtnSpinner.classList.add('d-none');
|
||||
progressContainer.classList.add('d-none');
|
||||
});
|
||||
|
||||
// Add JWT token
|
||||
const token = localStorage.getItem('jwtToken');
|
||||
if (token) {
|
||||
xhr.open('POST', '/api/activities/upload');
|
||||
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
|
||||
xhr.send(formData);
|
||||
} else {
|
||||
throw new Error('Not authenticated. Please login first.');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Upload error:', error);
|
||||
errorMessage.textContent = error.message || 'An error occurred during upload. Please try again.';
|
||||
errorAlert.classList.remove('d-none');
|
||||
|
||||
// Reset button state
|
||||
uploadBtn.disabled = false;
|
||||
cancelBtn.disabled = false;
|
||||
uploadBtnText.classList.remove('d-none');
|
||||
uploadBtnSpinner.classList.add('d-none');
|
||||
progressContainer.classList.add('d-none');
|
||||
}
|
||||
});
|
||||
|
||||
// Helper functions
|
||||
function formatDistance(meters) {
|
||||
if (!meters) return 'N/A';
|
||||
if (meters >= 1000) {
|
||||
return (meters / 1000).toFixed(2) + ' km';
|
||||
}
|
||||
return Math.round(meters) + ' m';
|
||||
}
|
||||
|
||||
function formatDuration(seconds) {
|
||||
if (!seconds) return 'N/A';
|
||||
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(' ');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue