From 72cc720e91e531fda3da073a8231951e0cccb696 Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Fri, 21 Aug 2026 19:19:45 +0200
Subject: Componentize and isolate the ride range filter

---
 web/templates.templ | 30 +++---------------------------
 1 file changed, 3 insertions(+), 27 deletions(-)

(limited to 'web/templates.templ')

diff --git a/web/templates.templ b/web/templates.templ
index 0bfef9c..71df20b 100644
--- a/web/templates.templ
+++ b/web/templates.templ
@@ -37,33 +37,9 @@ templ RidesContent(data RidesPageData) {
 			<input type="hidden" name="sort" value={ data.Sort.Column }/>
 			<input type="hidden" name="dir" value={ rideSortDirection(data.Sort) }/>
 			<div class="ride-filter-ranges">
-				<fieldset class="ride-filter-group">
-					<legend>Distance</legend>
-					<div class="range-values"><output data-range-value="min" for="distance-min">{ formatRideFilterDistance(data.Filters.DistanceMinKm) }</output><span aria-hidden="true">to</span><output data-range-value="max" for="distance-max">{ formatRideFilterDistance(data.Filters.DistanceMaxKm) }</output></div>
-					<div class="range-control" data-range-filter="distance" data-range-format="distance">
-						<div class="range-track" data-range-track></div>
-						<input id="distance-min" class="range-input range-input-min" type="range" name="distance_min" min={ formatRideFilterInt(rideFilterDistanceMinKm) } max={ formatRideFilterInt(rideFilterDistanceMaxKm) } step={ formatRideFilterInt(rideFilterDistanceStepKm) } value={ formatRideFilterInt(data.Filters.DistanceMinKm) } data-range-min aria-label="Minimum distance"/>
-						<input id="distance-max" class="range-input range-input-max" type="range" name="distance_max" min={ formatRideFilterInt(rideFilterDistanceMinKm) } max={ formatRideFilterInt(rideFilterDistanceMaxKm) } step={ formatRideFilterInt(rideFilterDistanceStepKm) } value={ formatRideFilterInt(data.Filters.DistanceMaxKm) } data-range-max aria-label="Maximum distance"/>
-					</div>
-				</fieldset>
-				<fieldset class="ride-filter-group">
-					<legend>Moving duration</legend>
-					<div class="range-values"><output data-range-value="min" for="duration-min">{ formatRideFilterDuration(data.Filters.DurationMinMinutes) }</output><span aria-hidden="true">to</span><output data-range-value="max" for="duration-max">{ formatRideFilterDuration(data.Filters.DurationMaxMinutes) }</output></div>
-					<div class="range-control" data-range-filter="duration" data-range-format="duration">
-						<div class="range-track" data-range-track></div>
-						<input id="duration-min" class="range-input range-input-min" type="range" name="duration_min" min={ formatRideFilterInt(rideFilterDurationMinMinutes) } max={ formatRideFilterInt(rideFilterDurationMaxMinutes) } step={ formatRideFilterInt(rideFilterDurationStepMinutes) } value={ formatRideFilterInt(data.Filters.DurationMinMinutes) } data-range-min aria-label="Minimum moving duration"/>
-						<input id="duration-max" class="range-input range-input-max" type="range" name="duration_max" min={ formatRideFilterInt(rideFilterDurationMinMinutes) } max={ formatRideFilterInt(rideFilterDurationMaxMinutes) } step={ formatRideFilterInt(rideFilterDurationStepMinutes) } value={ formatRideFilterInt(data.Filters.DurationMaxMinutes) } data-range-max aria-label="Maximum moving duration"/>
-					</div>
-				</fieldset>
-				<fieldset class="ride-filter-group">
-					<legend>Cotacol</legend>
-					<div class="range-values"><output data-range-value="min" for="cotacol-min">{ formatRideFilterCotacol(data.Filters.CotacolMinPoints) }</output><span aria-hidden="true">to</span><output data-range-value="max" for="cotacol-max">{ formatRideFilterCotacol(data.Filters.CotacolMaxPoints) }</output></div>
-					<div class="range-control" data-range-filter="cotacol" data-range-format="cotacol">
-						<div class="range-track" data-range-track></div>
-						<input id="cotacol-min" class="range-input range-input-min" type="range" name="cotacol_min" min={ formatRideFilterInt(rideFilterCotacolMinPoints) } max={ formatRideFilterInt(rideFilterCotacolMaxPoints) } step={ formatRideFilterInt(rideFilterCotacolStepPoints) } value={ formatRideFilterInt(data.Filters.CotacolMinPoints) } data-range-min aria-label="Minimum Cotacol"/>
-						<input id="cotacol-max" class="range-input range-input-max" type="range" name="cotacol_max" min={ formatRideFilterInt(rideFilterCotacolMinPoints) } max={ formatRideFilterInt(rideFilterCotacolMaxPoints) } step={ formatRideFilterInt(rideFilterCotacolStepPoints) } value={ formatRideFilterInt(data.Filters.CotacolMaxPoints) } data-range-max aria-label="Maximum Cotacol"/>
-					</div>
-				</fieldset>
+				@RideRangeFilter(rideDistanceFilterConfig(data.Filters))
+				@RideRangeFilter(rideDurationFilterConfig(data.Filters))
+				@RideRangeFilter(rideCotacolFilterConfig(data.Filters))
 			</div>
 			<div class="ride-filter-meta">
 				<fieldset class="ride-filter-group date-filter-group">
-- 
cgit v1.3