McPringle/fitpub
1
0
Fork 0
Code Issues 24 Pull requests 6 Projects Releases Packages Wiki Activity Actions

Added Heatmaps

Browse source
This commit is contained in:
Tim Zöller 2026-01-01 23:48:05 +01:00
parent c8b37f4720
commit f391028061
22 changed files with 1696 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

132
src/main/resources/templates/heatmap.html Normal file
View file

@ -0,0 +1,132 @@
<!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 Heatmap - FitPub</title>
<style>
#heatmapContainer {
height: 80vh;
min-height: 500px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.heatmap-stats {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin-bottom: 1.5rem;
}
.stat-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.stat-item i {
font-size: 1.5rem;
color: var(--bs-primary);
}
</style>
</head>
<body>
<div layout:fragment="content">
<div class="row">
<div class="col-12">
<div class="mb-4">
<h2 class="mb-3">
<i class="bi bi-map text-primary"></i>
My Activity Heatmap
</h2>
<p class="text-muted">
Visualize all your activities on a single map. Hotter colors show areas you visit more frequently.
</p>
</div>
<!-- Stats Card -->
<div class="heatmap-stats mb-4" id="statsCard" style="display: none;">
<div class="row">
<div class="col-md-4 mb-3 mb-md-0">
<div class="stat-item">
<i class="bi bi-grid-3x3"></i>
<div>
<small class="text-muted d-block">Grid Cells</small>
<strong id="cellCount">0</strong>
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="stat-item">
<i class="bi bi-fire"></i>
<div>
<small class="text-muted d-block">Max Intensity</small>
<strong id="maxIntensity">0</strong>
</div>
</div>
</div>
<div class="col-md-4">
<div class="stat-item">
<i class="bi bi-clock-history"></i>
<div>
<small class="text-muted d-block">Last Updated</small>
<strong id="lastUpdated">Just now</strong>
</div>
</div>
</div>
</div>
</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 heatmap...</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>
<!-- Empty State -->
<div id="emptyState" class="empty-state empty-state-activities d-none">
<div class="empty-state-icon">
<i class="bi bi-map"></i>
</div>
<h3>No Activities Yet</h3>
<p>Upload your first activity to see your heatmap!</p>
<a th:href="@{/upload}" class="btn btn-primary">
<i class="bi bi-upload"></i> Upload Activity
</a>
</div>
<!-- Map Container -->
<div id="heatmapContainer" style="display: none;"></div>
<!-- Legend -->
<div class="mt-3 text-center text-muted" id="legend" style="display: none;">
<small>
<span style="color: blue;">●</span> Low Activity
<span class="ms-2" style="color: cyan;">●</span> Moderate
<span class="ms-2" style="color: yellow;">●</span> High
<span class="ms-2" style="color: red;">●</span> Very High
</small>
</div>
</div>
</div>
</div>
<th:block layout:fragment="scripts">
<script th:src="@{/js/heatmap.js}"></script>
</th:block>
</body>
</html>