Add distance filter to analytics and go fix to the check gate

1 files changed, 23 insertions, 2 deletions

diff --git a/web/templates.templ b/web/templates.templ
index 71df20b..f2b62f8 100644
--- a/web/templates.templ
+++ b/web/templates.templ
@@ -101,16 +101,37 @@ templ AnalyticsContent(data AnalyticsPageData) {
 	<p class="eyebrow">Analytics</p>
 	<h1>Ride analytics</h1>
 	<p class="lead">One point per ride: average speed on the x axis, Cotacol per 100 km on the y axis.</p>
+	<section class="panel analytics-filters-panel">
+		<form id="analytics-filters" class="ride-filters" method="get" action="/analytics" aria-label="Analytics filters">
+			<div class="section-heading">
+				<div><p class="eyebrow">Refine</p><h2>Analyses</h2></div>
+				<div class="ride-filter-actions"><button class="button" type="submit">Apply filters</button><a class="button secondary" href={ templ.URL(data.Filter.ResetURL) }>Reset</a></div>
+			</div>
+			<div class="ride-filter-ranges">
+				@RideRangeFilter(rideDistanceFilterConfig(data.Filter))
+			</div>
+		</form>
+	</section>
 	<section class="panel analytics-panel">
-		<div class="section-heading"><div><p class="eyebrow">Chart</p><h2>Speed vs. Cotacol per 100 km</h2></div></div>
+		<div class="section-heading">
+			<div><p class="eyebrow">Chart</p><h2>Speed vs. Cotacol per 100 km</h2></div>
+			if len(data.Points) > 0 {
+				<span class="section-count" data-analytics-count>{ formatRideCount(len(data.Points)) }</span>
+			}
+		</div>
 		if len(data.Points) == 0 {
-			<div class="empty">No eligible rides yet. <a href="/sync">Import rides to see the chart.</a></div>
+			if data.Filter.Active {
+				<div class="empty">No rides match the selected filters. <a href={ templ.URL(data.Filter.ResetURL) }>Clear filters.</a></div>
+			} else {
+				<div class="empty">No eligible rides yet. <a href="/sync">Import rides to see the chart.</a></div>
+			}
 		} else {
 			<div class="analytics-chart"><canvas id="analytics-chart" tabindex="0" role="img" aria-label="Scatter plot of ride average speed against Cotacol per 100 km"></canvas></div>
 			<output id="analytics-hover" class="analytics-hover" aria-live="polite">Hover a point to inspect a ride.</output>
 		}
 	</section>
 	@templ.JSONScript("analytics-points", data.Points)
+	<script type="module" src="/static/ride-filters.js"></script>
 	<script type="module" src="/static/analytics.js"></script>
 }