MVP done
This commit is contained in:
Tim Zöller
parent
c1729a629d
commit
ac53f04e0a
27 changed files with 3019 additions and 88 deletions
243
src/main/resources/templates/profile/edit.html
Normal file
243
src/main/resources/templates/profile/edit.html
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
<!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 Profile</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="mb-0">
|
||||
<i class="bi bi-pencil"></i> Edit Profile
|
||||
</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- 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 profile...</p>
|
||||
</div>
|
||||
|
||||
<!-- Edit Form -->
|
||||
<form id="editProfileForm" class="d-none">
|
||||
<!-- Display Name -->
|
||||
<div class="mb-3">
|
||||
<label for="displayName" class="form-label">Display Name</label>
|
||||
<input type="text" class="form-control" id="displayName" name="displayName" maxlength="100">
|
||||
<div class="form-text">Your name as it appears to others</div>
|
||||
</div>
|
||||
|
||||
<!-- Bio -->
|
||||
<div class="mb-3">
|
||||
<label for="bio" class="form-label">Bio</label>
|
||||
<textarea class="form-control" id="bio" name="bio" rows="4" maxlength="500"></textarea>
|
||||
<div class="form-text">
|
||||
<span id="bioCharCount">0</span>/500 characters
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Avatar URL -->
|
||||
<div class="mb-3">
|
||||
<label for="avatarUrl" class="form-label">Avatar URL</label>
|
||||
<input type="url" class="form-control" id="avatarUrl" name="avatarUrl" placeholder="https://example.com/avatar.jpg">
|
||||
<div class="form-text">URL to your profile picture</div>
|
||||
</div>
|
||||
|
||||
<!-- Avatar Preview -->
|
||||
<div class="mb-3" id="avatarPreviewContainer" style="display: none;">
|
||||
<label class="form-label">Avatar Preview</label>
|
||||
<div>
|
||||
<img id="avatarPreview" src="" alt="Avatar preview" class="rounded-circle" width="100" height="100">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email (read-only for now) -->
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="email" name="email" readonly>
|
||||
<div class="form-text">Email cannot be changed here</div>
|
||||
</div>
|
||||
|
||||
<!-- Username (read-only) -->
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Username</label>
|
||||
<input type="text" class="form-control" id="username" name="username" readonly>
|
||||
<div class="form-text">Username cannot be changed</div>
|
||||
</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>
|
||||
|
||||
<!-- Success Alert -->
|
||||
<div id="successAlert" class="alert alert-success d-none" role="alert">
|
||||
<i class="bi bi-check-circle-fill"></i>
|
||||
Profile updated successfully!
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="d-flex justify-content-between">
|
||||
<a th:href="@{/profile}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left"></i> Cancel
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary" id="saveBtn">
|
||||
<span id="saveBtnText">
|
||||
<i class="bi bi-save"></i> Save Changes
|
||||
</span>
|
||||
<span id="saveBtnLoading" class="d-none">
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
Saving...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Scripts -->
|
||||
<th:block layout:fragment="scripts">
|
||||
<script th:inline="javascript">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Redirect to login if not authenticated
|
||||
if (!FitPubAuth.isAuthenticated()) {
|
||||
window.location.href = '/login';
|
||||
return;
|
||||
}
|
||||
|
||||
const form = document.getElementById('editProfileForm');
|
||||
const bioInput = document.getElementById('bio');
|
||||
const bioCharCount = document.getElementById('bioCharCount');
|
||||
const avatarUrlInput = document.getElementById('avatarUrl');
|
||||
const avatarPreview = document.getElementById('avatarPreview');
|
||||
const avatarPreviewContainer = document.getElementById('avatarPreviewContainer');
|
||||
|
||||
loadProfile();
|
||||
|
||||
// Bio character counter
|
||||
bioInput.addEventListener('input', function() {
|
||||
bioCharCount.textContent = bioInput.value.length;
|
||||
});
|
||||
|
||||
// Avatar preview
|
||||
avatarUrlInput.addEventListener('input', function() {
|
||||
const url = avatarUrlInput.value.trim();
|
||||
if (url) {
|
||||
avatarPreview.src = url;
|
||||
avatarPreviewContainer.style.display = 'block';
|
||||
} else {
|
||||
avatarPreviewContainer.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Form submission
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Hide alerts
|
||||
document.getElementById('errorAlert').classList.add('d-none');
|
||||
document.getElementById('successAlert').classList.add('d-none');
|
||||
|
||||
// Show loading state
|
||||
document.getElementById('saveBtnText').classList.add('d-none');
|
||||
document.getElementById('saveBtnLoading').classList.remove('d-none');
|
||||
document.getElementById('saveBtn').disabled = true;
|
||||
|
||||
try {
|
||||
const formData = {
|
||||
displayName: document.getElementById('displayName').value.trim(),
|
||||
bio: document.getElementById('bio').value.trim(),
|
||||
avatarUrl: document.getElementById('avatarUrl').value.trim()
|
||||
};
|
||||
|
||||
const response = await FitPubAuth.authenticatedFetch('/api/users/me', {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
// Show success message
|
||||
document.getElementById('successAlert').classList.remove('d-none');
|
||||
|
||||
// Scroll to top
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
|
||||
// Redirect to profile after 2 seconds
|
||||
setTimeout(() => {
|
||||
window.location.href = '/profile';
|
||||
}, 2000);
|
||||
} else {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.message || 'Failed to update profile');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating profile:', error);
|
||||
document.getElementById('errorMessage').textContent = error.message;
|
||||
document.getElementById('errorAlert').classList.remove('d-none');
|
||||
|
||||
// Reset button state
|
||||
document.getElementById('saveBtnText').classList.remove('d-none');
|
||||
document.getElementById('saveBtnLoading').classList.add('d-none');
|
||||
document.getElementById('saveBtn').disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
async function loadProfile() {
|
||||
try {
|
||||
const response = await FitPubAuth.authenticatedFetch('/api/users/me');
|
||||
|
||||
if (response.ok) {
|
||||
const user = await response.json();
|
||||
populateForm(user);
|
||||
|
||||
// Show form, hide loading
|
||||
document.getElementById('loadingIndicator').classList.add('d-none');
|
||||
document.getElementById('editProfileForm').classList.remove('d-none');
|
||||
} else {
|
||||
throw new Error('Failed to load profile');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading profile:', error);
|
||||
document.getElementById('loadingIndicator').classList.add('d-none');
|
||||
document.getElementById('errorMessage').textContent = 'Failed to load profile. Please try again.';
|
||||
document.getElementById('errorAlert').classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
function populateForm(user) {
|
||||
document.getElementById('displayName').value = user.displayName || '';
|
||||
document.getElementById('bio').value = user.bio || '';
|
||||
document.getElementById('avatarUrl').value = user.avatarUrl || '';
|
||||
document.getElementById('email').value = user.email || '';
|
||||
document.getElementById('username').value = user.username || '';
|
||||
|
||||
// Update character count
|
||||
bioCharCount.textContent = (user.bio || '').length;
|
||||
|
||||
// Show avatar preview if URL exists
|
||||
if (user.avatarUrl) {
|
||||
avatarPreview.src = user.avatarUrl;
|
||||
avatarPreviewContainer.style.display = 'block';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
</body>
|
||||
</html>
|
||||
327
src/main/resources/templates/profile/public.html
Normal file
327
src/main/resources/templates/profile/public.html
Normal file
|
|
@ -0,0 +1,327 @@
|
|||
<!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>User Profile</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 profile...</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>
|
||||
|
||||
<!-- Profile Content -->
|
||||
<div id="profileContent" class="d-none">
|
||||
<!-- Profile Header -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-2 text-center">
|
||||
<!-- Avatar -->
|
||||
<div id="avatarContainer" class="mb-3">
|
||||
<img id="avatarImage" src="" alt="Avatar" class="rounded-circle d-none" width="120" height="120">
|
||||
<div id="avatarPlaceholder" class="avatar-placeholder-large rounded-circle mx-auto">
|
||||
<i class="bi bi-person-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||
<div>
|
||||
<h2 id="displayName" class="mb-1"></h2>
|
||||
<p class="text-muted mb-2">
|
||||
<span id="username"></span>
|
||||
</p>
|
||||
<p id="bio" class="mb-3"></p>
|
||||
</div>
|
||||
<div id="followButtonContainer" class="d-none">
|
||||
<button class="btn btn-primary" id="followBtn">
|
||||
<i class="bi bi-person-plus"></i> Follow
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="row text-center">
|
||||
<div class="col-4">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="activitiesCount">0</div>
|
||||
<div class="stat-label">Activities</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="followersCount">0</div>
|
||||
<div class="stat-label">Followers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="followingCount">0</div>
|
||||
<div class="stat-label">Following</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Info -->
|
||||
<div class="mt-3 text-muted small">
|
||||
<i class="bi bi-calendar"></i> Joined <span id="joinedDate"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Public Activities -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-list-task"></i> Public Activities
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Loading Indicator for Activities -->
|
||||
<div id="activitiesLoading" class="text-center py-3">
|
||||
<div class="spinner-border spinner-border-sm text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activities List -->
|
||||
<div id="activitiesList" class="d-none">
|
||||
<!-- Will be populated by JavaScript -->
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div id="activitiesEmpty" class="text-center py-4 d-none">
|
||||
<i class="bi bi-inbox" style="font-size: 3rem; color: #d1d5db;"></i>
|
||||
<p class="text-muted mt-2">No public activities yet</p>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<nav id="pagination" aria-label="Activities pagination" class="mt-3 d-none">
|
||||
<ul class="pagination justify-content-center" id="paginationList">
|
||||
<!-- Will be populated by JavaScript -->
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Scripts -->
|
||||
<th:block layout:fragment="scripts">
|
||||
<script th:inline="javascript">
|
||||
const targetUsername = /*[[${username}]]*/ '';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadProfile();
|
||||
|
||||
function loadProfile() {
|
||||
// For now, we'll fetch from the user API endpoint
|
||||
// In the future, this should use /api/users/{username}
|
||||
fetch(`/api/users/${targetUsername}`)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('User not found');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(user => {
|
||||
renderProfile(user);
|
||||
loadPublicActivities(user.id);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading profile:', error);
|
||||
document.getElementById('loadingIndicator').classList.add('d-none');
|
||||
document.getElementById('errorMessage').textContent = 'User not found or profile could not be loaded.';
|
||||
document.getElementById('errorAlert').classList.remove('d-none');
|
||||
});
|
||||
}
|
||||
|
||||
function renderProfile(user) {
|
||||
// Hide loading, show content
|
||||
document.getElementById('loadingIndicator').classList.add('d-none');
|
||||
document.getElementById('profileContent').classList.remove('d-none');
|
||||
|
||||
// Display name
|
||||
document.getElementById('displayName').textContent = user.displayName || user.username;
|
||||
|
||||
// Username
|
||||
document.getElementById('username').textContent = '@' + user.username;
|
||||
|
||||
// Bio
|
||||
const bioElement = document.getElementById('bio');
|
||||
if (user.bio) {
|
||||
bioElement.textContent = user.bio;
|
||||
} else {
|
||||
bioElement.innerHTML = '<span class="text-muted">No bio</span>';
|
||||
}
|
||||
|
||||
// Avatar
|
||||
if (user.avatarUrl) {
|
||||
document.getElementById('avatarImage').src = user.avatarUrl;
|
||||
document.getElementById('avatarImage').classList.remove('d-none');
|
||||
document.getElementById('avatarPlaceholder').classList.add('d-none');
|
||||
}
|
||||
|
||||
// Joined date
|
||||
const joinedDate = new Date(user.createdAt);
|
||||
document.getElementById('joinedDate').textContent = joinedDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
|
||||
|
||||
// Show follow button if viewing another user's profile
|
||||
// TODO: implement follow functionality
|
||||
}
|
||||
|
||||
let currentPage = 0;
|
||||
|
||||
async function loadPublicActivities(userId) {
|
||||
try {
|
||||
const response = await fetch(`/api/activities/user/${targetUsername}?page=${currentPage}&size=10`);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
|
||||
document.getElementById('activitiesLoading').classList.add('d-none');
|
||||
|
||||
// Update count
|
||||
document.getElementById('activitiesCount').textContent = data.totalElements || 0;
|
||||
|
||||
if (data.content && data.content.length > 0) {
|
||||
renderActivities(data.content);
|
||||
renderPagination(data);
|
||||
document.getElementById('activitiesList').classList.remove('d-none');
|
||||
|
||||
if (data.totalPages > 1) {
|
||||
document.getElementById('pagination').classList.remove('d-none');
|
||||
}
|
||||
} else {
|
||||
document.getElementById('activitiesEmpty').classList.remove('d-none');
|
||||
}
|
||||
} else {
|
||||
throw new Error('Failed to load activities');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading activities:', error);
|
||||
document.getElementById('activitiesLoading').classList.add('d-none');
|
||||
document.getElementById('activitiesEmpty').classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
function renderActivities(activities) {
|
||||
const list = document.getElementById('activitiesList');
|
||||
list.innerHTML = activities.map(activity => `
|
||||
<div class="activity-item mb-3 pb-3 border-bottom">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-1">
|
||||
<a href="/activities/${activity.id}" class="text-decoration-none">
|
||||
${escapeHtml(activity.title || 'Untitled Activity')}
|
||||
</a>
|
||||
</h6>
|
||||
<p class="text-muted small 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>
|
||||
</p>
|
||||
<div class="d-flex gap-3 text-muted small">
|
||||
<span><i class="bi bi-arrow-left-right"></i> ${formatDistance(activity.totalDistance)}</span>
|
||||
<span><i class="bi bi-clock"></i> ${formatDuration(activity.totalDuration)}</span>
|
||||
${activity.elevationGain ? `<span><i class="bi bi-arrow-up"></i> ${Math.round(activity.elevationGain)}m</span>` : ''}
|
||||
</div>
|
||||
</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);
|
||||
|
||||
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>
|
||||
`;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
window.changePage = function(page) {
|
||||
currentPage = page;
|
||||
loadPublicActivities();
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
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 escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
</body>
|
||||
</html>
|
||||
290
src/main/resources/templates/profile/view.html
Normal file
290
src/main/resources/templates/profile/view.html
Normal file
|
|
@ -0,0 +1,290 @@
|
|||
<!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 Profile</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 profile...</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>
|
||||
|
||||
<!-- Profile Content -->
|
||||
<div id="profileContent" class="d-none">
|
||||
<!-- Profile Header -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-2 text-center">
|
||||
<!-- Avatar -->
|
||||
<div id="avatarContainer" class="mb-3">
|
||||
<img id="avatarImage" src="" alt="Avatar" class="rounded-circle d-none" width="120" height="120">
|
||||
<div id="avatarPlaceholder" class="avatar-placeholder-large rounded-circle mx-auto">
|
||||
<i class="bi bi-person-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||
<div>
|
||||
<h2 id="displayName" class="mb-1"></h2>
|
||||
<p class="text-muted mb-2">
|
||||
<span id="username"></span>
|
||||
</p>
|
||||
<p id="bio" class="mb-3"></p>
|
||||
</div>
|
||||
<div>
|
||||
<a th:href="@{/profile/edit}" class="btn btn-outline-primary">
|
||||
<i class="bi bi-pencil"></i> Edit Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="row text-center">
|
||||
<div class="col-4">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="activitiesCount">0</div>
|
||||
<div class="stat-label">Activities</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="followersCount">0</div>
|
||||
<div class="stat-label">Followers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="followingCount">0</div>
|
||||
<div class="stat-label">Following</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Info -->
|
||||
<div class="mt-3 text-muted small">
|
||||
<i class="bi bi-envelope"></i> <span id="email"></span>
|
||||
<span class="ms-3">
|
||||
<i class="bi bi-calendar"></i> Joined <span id="joinedDate"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activities -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-list-task"></i> Recent Activities
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Loading Indicator for Activities -->
|
||||
<div id="activitiesLoading" class="text-center py-3">
|
||||
<div class="spinner-border spinner-border-sm text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activities List -->
|
||||
<div id="activitiesList" class="d-none">
|
||||
<!-- Will be populated by JavaScript -->
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div id="activitiesEmpty" class="text-center py-4 d-none">
|
||||
<i class="bi bi-inbox" style="font-size: 3rem; color: #d1d5db;"></i>
|
||||
<p class="text-muted mt-2">No activities yet</p>
|
||||
<a th:href="@{/activities/upload}" class="btn btn-sm btn-primary">
|
||||
<i class="bi bi-cloud-upload"></i> Upload Activity
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- View All Link -->
|
||||
<div id="viewAllActivities" class="text-center mt-3 d-none">
|
||||
<a th:href="@{/activities}" class="btn btn-sm btn-outline-primary">
|
||||
View All Activities
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Scripts -->
|
||||
<th:block layout:fragment="scripts">
|
||||
<script th:inline="javascript">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Redirect to login if not authenticated
|
||||
if (!FitPubAuth.isAuthenticated()) {
|
||||
window.location.href = '/login';
|
||||
return;
|
||||
}
|
||||
|
||||
loadProfile();
|
||||
|
||||
async function loadProfile() {
|
||||
try {
|
||||
// Fetch user profile
|
||||
const response = await FitPubAuth.authenticatedFetch('/api/users/me');
|
||||
|
||||
if (response.ok) {
|
||||
const user = await response.json();
|
||||
renderProfile(user);
|
||||
loadRecentActivities();
|
||||
} else {
|
||||
throw new Error('Failed to load profile');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading profile:', error);
|
||||
document.getElementById('loadingIndicator').classList.add('d-none');
|
||||
document.getElementById('errorMessage').textContent = 'Failed to load profile. Please try again.';
|
||||
document.getElementById('errorAlert').classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
function renderProfile(user) {
|
||||
// Hide loading, show content
|
||||
document.getElementById('loadingIndicator').classList.add('d-none');
|
||||
document.getElementById('profileContent').classList.remove('d-none');
|
||||
|
||||
// Display name
|
||||
document.getElementById('displayName').textContent = user.displayName || user.username;
|
||||
|
||||
// Username
|
||||
document.getElementById('username').textContent = '@' + user.username;
|
||||
|
||||
// Bio
|
||||
const bioElement = document.getElementById('bio');
|
||||
if (user.bio) {
|
||||
bioElement.textContent = user.bio;
|
||||
} else {
|
||||
bioElement.innerHTML = '<span class="text-muted">No bio yet. <a href="/profile/edit">Add one?</a></span>';
|
||||
}
|
||||
|
||||
// Avatar
|
||||
if (user.avatarUrl) {
|
||||
document.getElementById('avatarImage').src = user.avatarUrl;
|
||||
document.getElementById('avatarImage').classList.remove('d-none');
|
||||
document.getElementById('avatarPlaceholder').classList.add('d-none');
|
||||
}
|
||||
|
||||
// Email
|
||||
document.getElementById('email').textContent = user.email;
|
||||
|
||||
// Joined date
|
||||
const joinedDate = new Date(user.createdAt);
|
||||
document.getElementById('joinedDate').textContent = joinedDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
|
||||
|
||||
// Stats (activities count will be loaded separately)
|
||||
// Followers/Following counts TODO: implement when federation is ready
|
||||
}
|
||||
|
||||
async function loadRecentActivities() {
|
||||
try {
|
||||
const response = await FitPubAuth.authenticatedFetch('/api/activities?page=0&size=5');
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
|
||||
document.getElementById('activitiesLoading').classList.add('d-none');
|
||||
|
||||
// Update activities count
|
||||
document.getElementById('activitiesCount').textContent = data.totalElements || 0;
|
||||
|
||||
if (data.content && data.content.length > 0) {
|
||||
renderActivities(data.content);
|
||||
document.getElementById('activitiesList').classList.remove('d-none');
|
||||
|
||||
if (data.totalElements > 5) {
|
||||
document.getElementById('viewAllActivities').classList.remove('d-none');
|
||||
}
|
||||
} else {
|
||||
document.getElementById('activitiesEmpty').classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading activities:', error);
|
||||
document.getElementById('activitiesLoading').classList.add('d-none');
|
||||
document.getElementById('activitiesEmpty').classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
function renderActivities(activities) {
|
||||
const list = document.getElementById('activitiesList');
|
||||
list.innerHTML = activities.map(activity => `
|
||||
<div class="activity-item mb-3 pb-3 border-bottom">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-1">
|
||||
<a href="/activities/${activity.id}" class="text-decoration-none">
|
||||
${escapeHtml(activity.title || 'Untitled Activity')}
|
||||
</a>
|
||||
</h6>
|
||||
<p class="text-muted small 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>
|
||||
</p>
|
||||
<div class="d-flex gap-3 text-muted small">
|
||||
<span><i class="bi bi-arrow-left-right"></i> ${formatDistance(activity.totalDistance)}</span>
|
||||
<span><i class="bi bi-clock"></i> ${formatDuration(activity.totalDuration)}</span>
|
||||
${activity.elevationGain ? `<span><i class="bi bi-arrow-up"></i> ${Math.round(activity.elevationGain)}m</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
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 escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue