Add category selectors on public scoreboards

app/controllers/contests_controller.rb

@@ -16,13 +16,7 @@ class ContestsController < ApplicationController
     @action_name = t("helpers.buttons.edit")
     @action_path = edit_contest_path(@contest)
     @contestants = @contest.contestants.sort_by { |contestant| [ -contestant.completions.size, contestant.time_seconds ] }
-    if params.key?(:category) && params[:category] != "-1"
-      if params[:category] == "-2"
-        @contestants = @contestants.select { |contestant| contestant.categories.size == 0 }
-      else
-        @contestants = @contestants.select { |contestant| contestant.categories.where(id: params[:category]).any? }
-      end
-    end
+    filter_contestants_per_category
     @puzzles = @contest.puzzles.order(:id)
     @messages = @contest.messages.order(:time_seconds)
     set_badges
@@ -84,6 +78,7 @@ class ContestsController < ApplicationController
 
     @title = I18n.t("contests.scoreboard.title", name: @contest.name)
     @contestants = @contest.contestants.sort_by { |contestant| [ -contestant.completions.size, contestant.time_seconds ] }
+    filter_contestants_per_category
     @puzzles = @contest.puzzles.order(:id)
     @action_name = t("helpers.buttons.refresh")
     @action_path = "/public/#{@contest.friendly_id}"
@@ -105,4 +100,14 @@ class ContestsController < ApplicationController
   def contest_params
     params.expect(contest: [ :lang, :name, :public, :team, :allow_registration ])
   end
+
+  def filter_contestants_per_category
+    if params.key?(:category) && params[:category] != "-1"
+      if params[:category] == "-2"
+        @contestants = @contestants.select { |contestant| contestant.categories.size == 0 }
+      else
+        @contestants = @contestants.select { |contestant| contestant.categories.where(id: params[:category]).any? }
+      end
+    end
+  end
 end

app/views/contests/_category_selector.html.slim

@@ -0,0 +1,19 @@
+- if @contest.categories.size > 0
+  .row
+    .col
+      select.mb-2 id="categories" style="padding: 5px"
+        option value=-1
+          | Tous.tes les participant.e.s
+        - @contest.categories.each do |category|
+          option value=category.id
+            = category.name
+      javascript:
+        categorySelectEl = document.getElementById('categories');
+        urlParams = new URLSearchParams(window.location.search);
+        selectedCategory = urlParams.get('category');
+        Array.from(categorySelectEl.children).forEach((option) => {
+          if (option.value == selectedCategory) option.selected = true;
+        });
+        categorySelectEl.addEventListener('change', (e) => {
+          window.location.href = `/public/#{@contest.slug}?category=${e.target.value}`
+        })

app/views/contests/scoreboard.html.slim

@@ -5,14 +5,6 @@ javascript:
     setTimeout(refresh, 5000);
   }
 
-  / const params = new URL(document.location.toString()).searchParams;
-  / if (params.get("refresh") == "1") {
-  /   const el = document.querySelector('input[type="checkbox"]');
-  /   el.checked = true;
-  / }
-
-  / setTimeout(refresh, 5000);
-
 css:
   @media (max-width: 800px) {
     a.btn { display: none; }
@@ -30,6 +22,9 @@ css:
         .mt-2.fs-6 style="text-align: center"
           => "#{puzzle.name} -"
           = "#{puzzle.brand} #{puzzle.pieces}p"
+
+  = render "category_selector"
+
   .row
     .col-6.d-flex.flex-column style="height: calc(100vh - 180px)"
       .d-flex.flex-column style="overflow-y: auto"
@@ -77,6 +72,8 @@ css:
       - @contest.puzzles.each do |puzzle|
         = image_tag(puzzle.image, class: "img-fluid ms-3 me-3", style: "max-height: 220px") if puzzle.image.attached?
 
+    = render "category_selector"
+
     .d-flex.flex-column style="overflow-y: auto"
       table.table.table-striped.table-hover
         thead