Add auto-refresh functionality to Attacks page

web/web/blueprints/attacks/__init__.py

@@ -86,6 +86,10 @@ def download(attack_id):
 def create():
     return render_template('attacks/create.html')
 
+@attacks.route('/table')
+def table():
+    return render_template('attacks/attacks_table.html', attacks=Attack.query.all())
+
 @attacks.errorhandler(NotFound)
 def handle_not_found_error(e):
     if (request.referrer is None):

web/web/blueprints/attacks/templates/attacks/attacks_table.html

@@ -0,0 +1,29 @@
+<table class="table table-hover table-clickable-rows">
+    <thead>
+      <tr>
+        <th scope="col">Name</th>
+        <th scope="col">Created By</th>
+        <th scope="col">Created At</th>
+        <th scope="col">Teams currently passing</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for attack in attacks %}
+      <tr onclick="window.location='{{ url_for('attacks.show', attack_id=attack.id) }}';">
+        <th scope="row">{{ attack.name }}</th>
+        <td>{{ attack.team.name if attack.team else "" }}</td>
+        <td>{{ attack.created_at | formatdatetime }}</td>
+        <td>{{ attack.passing | length }}</td>
+      </tr>
+      {% endfor %}
+      <!--<tr onclick="window.location='{{ url_for('teams.show', team_id=2) }}';">
+        <th scope="row">Sloths</th>
+        <td>20/27
+          <div class="spinner-border spinner-border-sm" style="color:#888;" role="status">
+            <span class="sr-only">Running Tests...</span>
+          </div> <span style="color:#888;">Rescoring...</span></td>
+        <td>22/28</td>
+        <td>Fifteen seconds ago</td>
+      </tr>-->
+    </tbody>
+  </table> 

web/web/blueprints/attacks/templates/attacks/index.html

@@ -3,36 +3,42 @@
 {% block title %}Attacks{% endblock %}
 
 {% block content %}
-<button class="btn btn-primary mb-2" onclick="location.reload()">Reload results</button>
+<button class="btn btn-primary mb-2" onclick="reloadTable()">Reload results</button>
+<div class="form-check mb-2 me-sm-2">
+  <input class="form-check-input" type="checkbox" id="autorefresh-checkbox" onclick="autoRefreshClick(this);">
+  <label class="form-check-label" for="autorefresh-checkbox">
+    Automatically refresh results
+  </label>
+</div>
 <a class="btn btn-light mb-2" href="{{ url_for('attacks.create') }}">Submit an attack</a>
-<table class="table table-hover table-clickable-rows">
-    <thead>
-      <tr>
-        <th scope="col">Name</th>
-        <th scope="col">Created By</th>
-        <th scope="col">Created At</th>
-        <th scope="col">Teams currently passing</th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for attack in attacks %}
-      <tr onclick="window.location='{{ url_for('attacks.show', attack_id=attack.id) }}';">
-        <th scope="row">{{ attack.name }}</th>
-        <td>{{ attack.team.name if attack.team else "" }}</td>
-        <td>{{ attack.created_at | formatdatetime }}</td>
-        <td>{{ attack.passing | length }}</td>
-      </tr>
-      {% endfor %}
-      <!--<tr onclick="window.location='{{ url_for('teams.show', team_id=2) }}';">
-        <th scope="row">Sloths</th>
-        <td>20/27
-          <div class="spinner-border spinner-border-sm" style="color:#888;" role="status">
-            <span class="sr-only">Running Tests...</span>
-          </div> <span style="color:#888;">Rescoring...</span></td>
-        <td>22/28</td>
-        <td>Fifteen seconds ago</td>
-      </tr>-->
-    </tbody>
-  </table>
+<div id="content">
+  {% include "attacks/attacks_table.html" %}
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+async function reloadTable() {
+  let response = await fetch("{{ url_for('attacks.table') }}");
+  document.getElementById('content').innerHTML = await response.text();
+}
+
+$(function() {
+  setInterval(async function() {
+    if (document.getElementById('autorefresh-checkbox').checked) {
+      reloadTable();
+    }
+  }, 10000);
+});
+
+document.addEventListener('DOMContentLoaded', (event) => {
+  if (localStorage["autorefresh"] === 'true') {
+    document.getElementById('autorefresh-checkbox').checked = true
+  }
+});
 
+function autoRefreshClick(cb) {
+  localStorage["autorefresh"] = cb.checked
+}
+</script>
 {% endblock %}