Auto refresh feature on public scoreboards

#12
#13

app/views/contests/_scoreboard_desktop_single.html.slim

@@ -1,5 +1,3 @@
-= render "selectors"
-
 .row
   .mt-3.col-6.d-flex.flex-column style="height: calc(100vh - 250px)"
     .d-flex.flex-column style="overflow-y: auto"

app/views/contests/_scoreboard_mobile_single.html.slim

@@ -9,8 +9,6 @@ css:
         => "#{@puzzles[0].name} -"
         = "#{@puzzles[0].brand} #{@puzzles[0].pieces}p"
 
-= render "selectors"
-
 .row
   .mt-3.d-flex.flex-column style="height: calc(100vh - 250px)"
     .d-flex.flex-column style="overflow-y: auto"

app/views/contests/_selectors.html.slim

@@ -1,15 +1,3 @@
-javascript:
-  function updateParams() {
-    categorySelectEl = document.getElementById('categories');
-    offlineInputEl = document.getElementById('offline');
-    if (categorySelectEl && !offlineInputEl) {
-      window.location.replace(`/public/#{@contest.slug}?category=${categorySelectEl.value}`);
-    } else if (!categorySelectEl) {
-      window.location.replace(`/public/#{@contest.slug}?hide_offline=${offlineInputEl.checked}`);
-    } else {
-      window.location.replace(`/public/#{@contest.slug}?category=${categorySelectEl.value}&hide_offline=${offlineInputEl.checked}`);
-    }
-  }
 - if @contest.categories.size > 0
   .row
     .col
@@ -17,29 +5,29 @@ javascript:
         option value=-1
           = t("contests.scoreboard.all_categories")
         - @contest.categories.each do |category|
-          option value=category.id
-            = category.name
+          - if @category == category.id.to_s
+            option value=category.id selected=true
+              = category.name
+          - else
+            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) => {
-          updateParams();
+        document.getElementById('categories').addEventListener('change', (e) => {
+          addParam('category', e.target.value);
         })
 - if @contest.offline_form && @contest.puzzles.length < 2
   .row
     .col
-      input type="checkbox" id="offline" style="padding: 5px;"
+      - if @hide_offline
+        input type="checkbox" id="offline" style="padding: 5px;" checked=true
+      - else
+        input type="checkbox" id="offline" style="padding: 5px;"
       label for="offline"
         .ms-2
           = t("contests.scoreboard.hide_offline")
       javascript:
-        offlineInputEl = document.getElementById('offline');
-        urlParams = new URLSearchParams(window.location.search);
-        offlineInputEl.checked = urlParams.get('hide_offline') == "true";
-        offlineInputEl.addEventListener('change', (e) => {
-          updateParams();
+        document.getElementById('offline').addEventListener('change', (e) => {
+          console.log('changed');
+          if (e.target.checked) addParam('hide_offline', e.target.checked);
+          else removeParam('hide_offline');
         })

app/views/contests/scoreboard.html.slim

@@ -2,15 +2,20 @@ css:
   @media (max-width: 800px) {
     .mobile-single { display: block !important; }
     .desktop-single { display: none; }
+    #scoreboard-switches { display: none; }
   }
 
+- if @contest.puzzles.size < 2
   = render "selectors"
 
-- if @contest.puzzles.size < 2
-  .mobile-single style="display: none;"
-    = render "scoreboard_mobile_single"
-  .desktop-single
-    = render "scoreboard_desktop_single"
+  turbo-frame id="scoreboard"
+    a.btn.btn-primary href="" id="refresh-button" style="display: none;"
+    .mobile-single style="display: none;"
+      = render "scoreboard_mobile_single"
+    .desktop-single
+      = render "scoreboard_desktop_single"
   
 - else
-  = render "scoreboard_desktop_marathon"
+  turbo-frame id="scoreboard"
+    a.btn.btn-primary href="" id="refresh-button" style="display: none;"
+    = render "scoreboard_desktop_marathon"