Add category selectors on public scoreboards

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