wrestlingdev.com/app/views/tournaments/up_matches.html.erb

  <script>
    // $(document).ready(function() {
    //   $('#matchList').dataTable();
    // } );
  </script>
  <script>
    const setUpMatchesRefresh = () => {
      if (window.__upMatchesRefreshTimeout) {
        clearTimeout(window.__upMatchesRefreshTimeout);
      }
      window.__upMatchesRefreshTimeout = setTimeout(() => {
        window.location.reload(true);
      }, 30000);
    };

    document.addEventListener("turbo:load", setUpMatchesRefresh);
    // turbo:before-cache stops the timer refresh from occurring if you navigate away from up_matches
    document.addEventListener("turbo:before-cache", () => {
      if (window.__upMatchesRefreshTimeout) {
        clearTimeout(window.__upMatchesRefreshTimeout);
        window.__upMatchesRefreshTimeout = null;
      }
    });
  </script>
  <br>
  <br>
  <h5 style="color:red">This page reloads every 30s</h5>
  <br>
  <h3>Upcoming Matches</h3>
  <br>
  <table class="table table-striped table-bordered table-condensed">
    <thead>
      <tr>
        <th>Mat&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
        <th>On Mat</th>
        <th>On Deck</th>
        <th>In The Hole</th>
        <th>Warm Up</th>
      </tr>
    </thead>

    <tbody>
      <% @mats.each.map do |m| %>
        <%= render "up_matches_mat_row", mat: m %>
      <% end %>
    </tbody>
  </table>
  <br>
  <h3>Matches not assigned</h3>
  <br>
  <table class="table table-striped table-bordered table-condensed" id="matchList">
    <thead>
      <tr>
        <th>Round</th>
        <th>Bout Number</th>
        <th>Weight Class</th>
        <th>Matchup</th>
      </tr>
    </thead>

    <tbody>
      <% if @matches.size > 0 %>
      <% @matches.each.map do |m| %>
        <tr>
          <td>Round <%= m.round %></td>
          <td><%= m.bout_number %></td>
          <td><%= m.weight_max %></td>
          <td><%= m.w1_bracket_name %> vs. <%= m.w2_bracket_name %></td>
        </tr>
      <% end %>
      <% end %>
    </tbody>
  </table>

  <br>