Make the broadcast dashboard update via AJAX

Same technique as we use for other pages that update via AJAX.

I’ve split the page up into separate chunks because the DiffDOM library
we use finds it easier to work out what’s changed when there are fewer
elements/a shallower tree.

app/templates/views/broadcast/dashboard.html

@@ -1,47 +1,7 @@
-{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
+{% from 'components/ajax-block.html' import ajax_block %}
 
 {% extends "withnav_template.html" %}
 
-{% macro broadcast_table(broadcasts, empty_message) %}
-  <div class='dashboard-table ajax-block-container'>
-    {% call(item, row_number) list_table(
-      broadcasts|sort|reverse|list,
-      caption="Live broadcasts",
-      caption_visible=False,
-      empty_message=empty_message,
-      field_headings=[
-        'Template name',
-        'Status'
-      ],
-      field_headings_visible=False
-    ) %}
-      {% call row_heading() %}
-        <div class="file-list">
-          <a class="file-list-filename-large govuk-link govuk-link--no-visited-state" href="{{ url_for('.view_broadcast_message', service_id=current_service.id, broadcast_message_id=item.id) }}">{{ item.template_name }}</a>
-          <span class="file-list-hint-large">
-            To {{ item.initial_area_names|formatted_list(before_each='', after_each='') }}
-          </span>
-        </div>
-      {% endcall %}
-      {% call field(align='right') %}
-        {% if item.status == 'broadcasting' %}
-          <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0">
-            Live until {{ item.finishes_at|format_datetime_relative }}
-          </p>
-        {% elif item.status == 'cancelled' %}
-          <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
-            Stopped {{ item.cancelled_at|format_datetime_relative }}
-          </p>
-        {% else %}
-          <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
-            Finished {{ item.finishes_at|format_datetime_relative }}
-          </p>
-        {% endif %}
-      {% endcall %}
-    {% endcall %}
-  </div>
-{% endmacro %}
-
 {% block service_page_title %}
   Dashboard
 {% endblock %}
@@ -52,10 +12,18 @@
 
   <h2 class="heading-medium govuk-!-margin-bottom-2">Live broadcasts</h2>
 
-  {{ broadcast_table(live_broadcasts, 'You do not have any live broadcasts at the moment') }}
+  {{ ajax_block(
+    partials,
+    url_for('.broadcast_dashboard_updates', service_id=current_service.id),
+    'live_broadcasts'
+  ) }}
 
   <h2 class="heading-medium govuk-!-margin-bottom-2">Previous broadcasts</h2>
 
-  {{ broadcast_table(previous_broadcasts, 'You do not have any previous broadcasts') }}
+  {{ ajax_block(
+    partials,
+    url_for('.broadcast_dashboard_updates', service_id=current_service.id),
+    'previous_broadcasts'
+  ) }}
 
 {% endblock %}

app/templates/views/broadcast/partials/dashboard-table.html

@@ -0,0 +1,39 @@
+{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
+
+<div class='dashboard-table ajax-block-container'>
+  {% call(item, row_number) list_table(
+    broadcasts|sort|reverse|list,
+    caption="Live broadcasts",
+    caption_visible=False,
+    empty_message=empty_message,
+    field_headings=[
+      'Template name',
+      'Status'
+    ],
+    field_headings_visible=False
+  ) %}
+    {% call row_heading() %}
+      <div class="file-list">
+        <a class="file-list-filename-large govuk-link govuk-link--no-visited-state" href="{{ url_for('.view_broadcast_message', service_id=current_service.id, broadcast_message_id=item.id) }}">{{ item.template_name }}</a>
+        <span class="file-list-hint-large">
+          To {{ item.initial_area_names|formatted_list(before_each='', after_each='') }}
+        </span>
+      </div>
+    {% endcall %}
+    {% call field(align='right') %}
+      {% if item.status == 'broadcasting' %}
+        <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0">
+          Live until {{ item.finishes_at|format_datetime_relative }}
+        </p>
+      {% elif item.status == 'cancelled' %}
+        <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
+          Stopped {{ item.cancelled_at|format_datetime_relative }}
+        </p>
+      {% else %}
+        <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
+          Finished {{ item.finishes_at|format_datetime_relative }}
+        </p>
+      {% endif %}
+    {% endcall %}
+  {% endcall %}
+</div>