From 4dcc0a4e655b0178a7733954bf75df3cff9ef07a Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Mon, 24 Aug 2026 13:36:41 +0200
Subject: Ride type multiselect filter with a checkbox group across library and
 analytics

---
 web/templates.templ | 40 ++++++++++++----------------------------
 1 file changed, 12 insertions(+), 28 deletions(-)

(limited to 'web/templates.templ')

diff --git a/web/templates.templ b/web/templates.templ
index 15e3466..c0e6e18 100644
--- a/web/templates.templ
+++ b/web/templates.templ
@@ -62,22 +62,14 @@ templ RidesContent(data RidesPageData) {
 						}
 					</select>
 				</label>
-				<label for="ride-type-filter">Ride type
-					<select id="ride-type-filter" name="ride_type">
-						if data.Filters.RideType == "" {
-							<option value="" selected>Any type</option>
-						} else {
-							<option value="">Any type</option>
-						}
+				<fieldset class="ride-filter-group">
+					<legend>Ride type</legend>
+					<div class="ride-type-options">
 						for _, opt := range rideTypeOptions {
-							if data.Filters.RideType == string(opt) {
-								<option value={ string(opt) } selected>{ rideTypeLabels[opt] }</option>
-							} else {
-								<option value={ string(opt) }>{ rideTypeLabels[opt] }</option>
-							}
+							<label class="ride-type-option"><input type="checkbox" name="ride_type" value={ string(opt) } checked?={ containsRideType(data.Filters.RideTypes, opt) }/><span>{ rideTypeLabels[opt] }</span></label>
 						}
-					</select>
-				</label>
+					</div>
+				</fieldset>
 			</div>
 		</form>
 	</section>
@@ -140,22 +132,14 @@ templ AnalyticsContent(data AnalyticsPageData) {
 						}
 					</select>
 				</label>
-				<label for="analytics-ride-type">Ride type
-					<select id="analytics-ride-type" name="ride_type">
-						if data.Filter.RideType == "" {
-							<option value="" selected>Any type</option>
-						} else {
-							<option value="">Any type</option>
-						}
+				<fieldset class="ride-filter-group">
+					<legend>Ride type</legend>
+					<div class="ride-type-options">
 						for _, opt := range rideTypeOptions {
-							if data.Filter.RideType == string(opt) {
-								<option value={ string(opt) } selected>{ rideTypeLabels[opt] }</option>
-							} else {
-								<option value={ string(opt) }>{ rideTypeLabels[opt] }</option>
-							}
+							<label class="ride-type-option"><input type="checkbox" name="ride_type" value={ string(opt) } checked?={ containsRideType(data.Filter.RideTypes, opt) }/><span>{ rideTypeLabels[opt] }</span></label>
 						}
-					</select>
-				</label>
+					</div>
+				</fieldset>
 			</div>
 		</form>
 	</section>
-- 
cgit v1.3