Auto refresh feature on public scoreboards

#12
#13

app/views/layouts/authenticated.html.slim

@@ -43,19 +43,62 @@ html
             .toast-body
               = msg
 
-      h1.mb-5
+      h1.mb-4
         - if @contest && @contest.id.present?
-          = @contest.name
           - if active_page("/public") == "active" && @action_path
-            a.ms-4.btn.btn-primary href=@action_path style="margin-top: -6px"
-              = t("helpers.buttons.refresh")
-          - if active_page("/contests") == "active"
+            = @contest.name
+            .float-end style="margin-top: -5px;" id="scoreboard-switches"
+              .d-inline-flex.align-items-center
+                .ms-4.form-check.form-switch style="font-size: 16px; font-weight: 300;"
+                  input.form-check-input type="checkbox" id="refresh-checkbox"
+                label.ms-1 style="font-size: 16px; font-weight: 300;"
+                  = t("contests.scoreboard.auto_refresh")
+              .js data-turbo="false"
+                javascript:
+                  function refresh() {
+                    if (document.getElementById('refresh-checkbox').checked) {
+                      addParam('autorefresh', 1);
+                      setTimeout(refresh, 30000);
+                    }
+                  }
+                  function addParam(key, value) {
+                    const urlParams = new URLSearchParams(window.location.search);
+                    urlParams.delete(key);
+                    urlParams.append(key, value);
+                    const refreshBtn = document.getElementById('refresh-button')
+                    refreshBtn.href = `/public/#{@contest.friendly_id}?${urlParams.toString()}`;
+                    refreshBtn.click();
+                  }
+                  function removeParam(key) {
+                    const urlParams = new URLSearchParams(window.location.search);
+                    urlParams.delete(key);
+                    const refreshBtn = document.getElementById('refresh-button')
+                    refreshBtn.href = `/public/#{@contest.friendly_id}?${urlParams.toString()}`;
+                    refreshBtn.click();
+                  }
+                  function autoRefresh() {
+                    if (document.getElementById('refresh-checkbox').checked) setTimeout(refresh, 30000);
+                    document.getElementById('refresh-checkbox').addEventListener('change', (e) => {
+                      if (e.target.checked) refresh();
+                      else removeParam('autorefresh');
+                    });
+                  }
+                  async function startAutoRefresh(count) {
+                    if (count == 0) return;
+                    if (document.getElementById('refresh-button') && document.getElementById('refresh-checkbox')) autoRefresh();
+                    else setTimeout(() => startAutoRefresh(count - 1), 10);
+                  }
+                  startAutoRefresh(200);
+          - elsif active_page("/contests") == "active"
+            = @contest.name
             - if @contest.public
               a.ms-4.btn.btn-success href="/public/#{@contest.slug}" style="margin-top: -6px;"
                 = t("contests.show.open_public_scoreboard")
             - else
               a.ms-4.btn.btn-success.disabled style="margin-top: -6px;"
                 = t("contests.show.public_scoreboard_disabled")
+          - else
+            = @contest.name
         - else
           = @title