From a43321cbb36b63572297ee32ab97967c387a6da7 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 14 Oct 2020 13:59:20 +0100
Subject: [PATCH 1/5] Swap order of message and areas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This then matches the order in which the message is drafted, first the
content, then the areas. It also matches the order we’re going to have
on the new dashboard.
---
 .../views/broadcast/preview-message.html       | 18 ++++++++----------
 .../views/broadcast/view-message.html          |  6 +++---
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/app/templates/views/broadcast/preview-message.html b/app/templates/views/broadcast/preview-message.html
index fd8f51f65..a974acc49 100644
--- a/app/templates/views/broadcast/preview-message.html
+++ b/app/templates/views/broadcast/preview-message.html
@@ -14,19 +14,17 @@
 
   {{ page_header("Preview", back_link=url_for('.preview_broadcast_areas', service_id=current_service.id, broadcast_message_id=broadcast_message.id)) }}
 
-  {% for area in broadcast_message.areas %}
-    {% if loop.first %}
-      <ul class="area-list">
-    {% endif %}
+  {{ broadcast_message.template|string }}
+
+  <div class="govuk-!-margin-bottom-3">
+    <ul class="area-list">
+      {% for area in broadcast_message.areas %}
         <li class="area-list-item area-list-item--unremoveable">
           {{ area.name }}
         </li>
-    {% if loop.last %}
-      </ul>
-    {% endif %}
-  {% endfor %}
-
-  {{ broadcast_message.template|string }}
+      {% endfor %}
+    </ul>
+  </div>
 
   {% call form_wrapper() %}
     {{ page_footer('Submit for approval') }}
diff --git a/app/templates/views/broadcast/view-message.html b/app/templates/views/broadcast/view-message.html
index b474da754..a191f0585 100644
--- a/app/templates/views/broadcast/view-message.html
+++ b/app/templates/views/broadcast/view-message.html
@@ -126,9 +126,11 @@
     </p>
   {% endif %}
 
+  {{ broadcast_message.template|string }}
+
   {% for area in broadcast_message.areas %}
     {% if loop.first %}
-      <ul class="area-list govuk-!-margin-bottom-4">
+      <ul class="area-list">
     {% endif %}
         <li class="area-list-item area-list-item--unremoveable">
           {{ area.name }}
@@ -145,6 +147,4 @@
     }) }}
   </div>
 
-  {{ broadcast_message.template|string }}
-
 {% endblock %}

From 6937e06ad546b7b8d99cca794b925f1ae219bc98 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 14 Oct 2020 14:00:12 +0100
Subject: [PATCH 2/5] =?UTF-8?q?Move=20the=20=E2=80=98who=20did=20what?=
 =?UTF-8?q?=E2=80=99=20stuff=20to=20the=20bottom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The most important part of the broadcast is what content was sent where
(and when).

This commit reduces the priority of the ‘meta’ information, like who
prepared and approved the broadcast. I also think that the ‘end’ time is
a lot less important than the start time, since most people will receive
the alert at or near to the start time.
---
 app/templates/views/broadcast/view-message.html | 12 +++++++-----
 tests/app/main/views/test_broadcast.py          | 10 +++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/templates/views/broadcast/view-message.html b/app/templates/views/broadcast/view-message.html
index a191f0585..5133839aa 100644
--- a/app/templates/views/broadcast/view-message.html
+++ b/app/templates/views/broadcast/view-message.html
@@ -99,11 +99,6 @@
   {% else %}
     {{ page_header(broadcast_message.template_name) }}
 
-    <p class="govuk-body govuk-!-margin-bottom-3">
-      Created by {{ broadcast_message.created_by.name }} and approved by
-      {{ broadcast_message.approved_by.name }}.
-    </p>
-
     <p class="govuk-body govuk-!-margin-bottom-3">
       Started broadcasting
       {{ broadcast_message.starts_at|format_datetime_human }}.
@@ -147,4 +142,11 @@
     }) }}
   </div>
 
+  {% if broadcast_message.status != 'pending-approval' %}
+    <p class="govuk-body govuk-!-margin-bottom-3">
+      Prepared by {{ broadcast_message.created_by.name }} and approved by
+      {{ broadcast_message.approved_by.name }}.
+    </p>
+  {% endif %}
+
 {% endblock %}
diff --git a/tests/app/main/views/test_broadcast.py b/tests/app/main/views/test_broadcast.py
index be55d22bf..3693abeb2 100644
--- a/tests/app/main/views/test_broadcast.py
+++ b/tests/app/main/views/test_broadcast.py
@@ -1037,34 +1037,34 @@ def test_start_broadcasting(
         'status': 'broadcasting',
         'finishes_at': '2020-02-23T23:23:23.000000',
     }, [
-        'Created by Alice and approved by Bob.',
         'Started broadcasting on 20 February at 8:20pm.',
         'Live until tomorrow at 11:23pm Stop broadcast early',
+        'Prepared by Alice and approved by Bob.',
     ]),
     ({
         'status': 'broadcasting',
         'finishes_at': '2020-02-22T22:20:20.000000',  # 2 mins before now()
     }, [
-        'Created by Alice and approved by Bob.',
         'Started broadcasting on 20 February at 8:20pm.',
         'Finished broadcasting today at 10:20pm.',
+        'Prepared by Alice and approved by Bob.',
     ]),
     ({
         'status': 'finished',
         'finishes_at': '2020-02-21T21:21:21.000000',
     }, [
-        'Created by Alice and approved by Bob.',
         'Started broadcasting on 20 February at 8:20pm.',
         'Finished broadcasting yesterday at 9:21pm.',
+        'Prepared by Alice and approved by Bob.',
     ]),
     ({
         'status': 'cancelled',
         'cancelled_by_id': sample_uuid,
         'cancelled_at': '2020-02-21T21:21:21.000000',
     }, [
-        'Created by Alice and approved by Bob.',
         'Started broadcasting on 20 February at 8:20pm.',
-        'Stopped by Carol yesterday at 9:21pm.',
+        'Stopped by Alice yesterday at 9:21pm.',
+        'Prepared by Bob and approved by Carol.',
     ]),
 ))
 @freeze_time('2020-02-22T22:22:22.000000')

From ba535523dfdecfb104c025cddcf188b74116bc42 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 14 Oct 2020 14:05:14 +0100
Subject: [PATCH 3/5] Move end time to bottom of page

End time is less important than the status of the broadcast, or when it
was started (eg when it was received by most people in the area).
---
 .../broadcast/partials/dashboard-table.html   |  6 +--
 .../views/broadcast/view-message.html         | 43 +++++++++++--------
 tests/app/main/views/test_broadcast.py        | 24 +++++------
 3 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/app/templates/views/broadcast/partials/dashboard-table.html b/app/templates/views/broadcast/partials/dashboard-table.html
index 1e1e559f1..09218af1f 100644
--- a/app/templates/views/broadcast/partials/dashboard-table.html
+++ b/app/templates/views/broadcast/partials/dashboard-table.html
@@ -34,13 +34,9 @@
         <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 live-broadcast">
           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 }}
+          Broadcast {{ item.starts_at|format_datetime_relative }}
         </p>
       {% endif %}
     {% endcall %}
diff --git a/app/templates/views/broadcast/view-message.html b/app/templates/views/broadcast/view-message.html
index 5133839aa..59af6615b 100644
--- a/app/templates/views/broadcast/view-message.html
+++ b/app/templates/views/broadcast/view-message.html
@@ -99,26 +99,20 @@
   {% else %}
     {{ page_header(broadcast_message.template_name) }}
 
-    <p class="govuk-body govuk-!-margin-bottom-3">
-      Started broadcasting
-      {{ broadcast_message.starts_at|format_datetime_human }}.
-    </p>
-
-    <p class="govuk-body">
-      {% if broadcast_message.status == 'pending-approval' %}
-        Will broadcast until {{ broadcast_message.finishes_at|format_datetime_relative }}.
-      {% elif broadcast_message.status == 'broadcasting' %}
+    {% if broadcast_message.status == 'broadcasting' %}
+      <p class="govuk-body">
         Live until {{ broadcast_message.finishes_at|format_datetime_relative }}&ensp;
         {%- if not hide_stop_link %}
-          <a href="{{ url_for('.cancel_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" class="destructive-link destructive-link--no-visited-state">Stop broadcast early</a>
+          <a href="{{ url_for('.cancel_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" class="destructive-link destructive-link--no-visited-state">Stop broadcasting</a>
         {% endif %}
-      {% elif broadcast_message.status == 'cancelled' %}
-        Stopped by {{ broadcast_message.cancelled_by.name }}
-        {{ broadcast_message.cancelled_at|format_datetime_human }}.
-      {% else %}
-        Finished broadcasting {{ broadcast_message.finishes_at|format_datetime_human }}.
-      {% endif %}
-    </p>
+      </p>
+    {% else %}
+      <p class="govuk-body govuk-!-margin-bottom-4">
+        Broadcast
+        {{ broadcast_message.starts_at|format_datetime_human }}.
+      </p>
+    {% endif %}
+
   {% endif %}
 
   {{ broadcast_message.template|string }}
@@ -149,4 +143,19 @@
     </p>
   {% endif %}
 
+  {% if broadcast_message.status == 'broadcasting' %}
+    <p class="govuk-body">
+      Broadcasting stops {{ broadcast_message.finishes_at|format_datetime_human }}.
+    </p>
+  {% elif broadcast_message.status == 'cancelled' %}
+    <p class="govuk-body">
+      Stopped by {{ broadcast_message.cancelled_by.name }}
+      {{ broadcast_message.cancelled_at|format_datetime_human }}.
+    </p>
+  {% elif broadcast_message.status == 'completed' %}
+    <p class="govuk-body">
+      Finished broadcasting {{ broadcast_message.finishes_at|format_datetime_human }}.
+    </p>
+  {% endif %}
+
 {% endblock %}
diff --git a/tests/app/main/views/test_broadcast.py b/tests/app/main/views/test_broadcast.py
index 3693abeb2..4be2e2a1f 100644
--- a/tests/app/main/views/test_broadcast.py
+++ b/tests/app/main/views/test_broadcast.py
@@ -361,8 +361,8 @@ def test_previous_broadcasts_page(
     assert [
         normalize_spaces(row.text) for row in page.select('table')[0].select('tbody tr')
     ] == [
-        'Example template This is a test England Scotland Stopped 10 February at 2:20am',
-        'Example template This is a test England Scotland Finished yesterday at 8:20pm',
+        'Example template This is a test England Scotland Broadcast yesterday at 2:20am',
+        'Example template This is a test England Scotland Broadcast yesterday at 2:20pm',
     ]
 
 
@@ -1037,34 +1037,34 @@ def test_start_broadcasting(
         'status': 'broadcasting',
         'finishes_at': '2020-02-23T23:23:23.000000',
     }, [
-        'Started broadcasting on 20 February at 8:20pm.',
-        'Live until tomorrow at 11:23pm Stop broadcast early',
+        'Live until tomorrow at 11:23pm Stop broadcasting',
         'Prepared by Alice and approved by Bob.',
+        'Broadcasting stops tomorrow at 11:23pm.'
     ]),
     ({
         'status': 'broadcasting',
         'finishes_at': '2020-02-22T22:20:20.000000',  # 2 mins before now()
     }, [
-        'Started broadcasting on 20 February at 8:20pm.',
-        'Finished broadcasting today at 10:20pm.',
+        'Broadcast on 20 February at 8:20pm.',
         'Prepared by Alice and approved by Bob.',
+        'Finished broadcasting today at 10:20pm.'
     ]),
     ({
-        'status': 'finished',
+        'status': 'completed',
         'finishes_at': '2020-02-21T21:21:21.000000',
     }, [
-        'Started broadcasting on 20 February at 8:20pm.',
-        'Finished broadcasting yesterday at 9:21pm.',
+        'Broadcast on 20 February at 8:20pm.',
         'Prepared by Alice and approved by Bob.',
+        'Finished broadcasting yesterday at 9:21pm.',
     ]),
     ({
         'status': 'cancelled',
         'cancelled_by_id': sample_uuid,
         'cancelled_at': '2020-02-21T21:21:21.000000',
     }, [
-        'Started broadcasting on 20 February at 8:20pm.',
-        'Stopped by Alice yesterday at 9:21pm.',
-        'Prepared by Bob and approved by Carol.',
+        'Broadcast on 20 February at 8:20pm.',
+        'Prepared by Alice and approved by Bob.',
+        'Stopped by Carol yesterday at 9:21pm.',
     ]),
 ))
 @freeze_time('2020-02-22T22:22:22.000000')

From 91e74929eb76f83c2052a708ddb8ce03d2e7fdaa Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 14 Oct 2020 14:11:48 +0100
Subject: [PATCH 4/5] Use live indicator on individual broadcast page

So the view of an individual broadcast feel consistent when coming from
the dashboard.
---
 app/assets/stylesheets/app.scss                 | 10 ++++++++++
 app/templates/views/broadcast/view-message.html |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss
index bd3de737b..e64f593de 100644
--- a/app/assets/stylesheets/app.scss
+++ b/app/assets/stylesheets/app.scss
@@ -252,6 +252,16 @@ details .arrow {
     //box-shadow: inset 0 0 0 2px $red, inset 0 0 0 5px $white;
   }
 
+  &--left {
+
+    &:before {
+      float: left;
+      margin-left: 0;
+      margin-right: 10px;
+    }
+
+  }
+
 }
 
 input:-webkit-autofill::first-line {
diff --git a/app/templates/views/broadcast/view-message.html b/app/templates/views/broadcast/view-message.html
index 59af6615b..f75265387 100644
--- a/app/templates/views/broadcast/view-message.html
+++ b/app/templates/views/broadcast/view-message.html
@@ -100,7 +100,7 @@
     {{ page_header(broadcast_message.template_name) }}
 
     {% if broadcast_message.status == 'broadcasting' %}
-      <p class="govuk-body">
+      <p class="govuk-body govuk-!-margin-bottom-2 live-broadcast live-broadcast--left">
         Live until {{ broadcast_message.finishes_at|format_datetime_relative }}&ensp;
         {%- if not hide_stop_link %}
           <a href="{{ url_for('.cancel_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" class="destructive-link destructive-link--no-visited-state">Stop broadcasting</a>

From 0e392085464da0f17e62550d3504043fd3d77758 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 14 Oct 2020 14:16:16 +0100
Subject: [PATCH 5/5] Associate start time with live

Start time is much more important than end time.
---
 app/templates/views/broadcast/partials/dashboard-table.html | 2 +-
 app/templates/views/broadcast/view-message.html             | 2 +-
 tests/app/main/views/test_broadcast.py                      | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/templates/views/broadcast/partials/dashboard-table.html b/app/templates/views/broadcast/partials/dashboard-table.html
index 09218af1f..200bc9484 100644
--- a/app/templates/views/broadcast/partials/dashboard-table.html
+++ b/app/templates/views/broadcast/partials/dashboard-table.html
@@ -32,7 +32,7 @@
         </p>
       {% elif item.status == 'broadcasting' %}
         <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 live-broadcast">
-          Live until {{ item.finishes_at|format_datetime_relative }}
+          Live since {{ item.starts_at|format_datetime_relative }}
         </p>
       {% else %}
         <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
diff --git a/app/templates/views/broadcast/view-message.html b/app/templates/views/broadcast/view-message.html
index f75265387..5d1c9aff6 100644
--- a/app/templates/views/broadcast/view-message.html
+++ b/app/templates/views/broadcast/view-message.html
@@ -101,7 +101,7 @@
 
     {% if broadcast_message.status == 'broadcasting' %}
       <p class="govuk-body govuk-!-margin-bottom-2 live-broadcast live-broadcast--left">
-        Live until {{ broadcast_message.finishes_at|format_datetime_relative }}&ensp;
+        Live since {{ broadcast_message.starts_at|format_datetime_relative }}&ensp;
         {%- if not hide_stop_link %}
           <a href="{{ url_for('.cancel_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" class="destructive-link destructive-link--no-visited-state">Stop broadcasting</a>
         {% endif %}
diff --git a/tests/app/main/views/test_broadcast.py b/tests/app/main/views/test_broadcast.py
index 4be2e2a1f..774875cdd 100644
--- a/tests/app/main/views/test_broadcast.py
+++ b/tests/app/main/views/test_broadcast.py
@@ -302,7 +302,7 @@ def test_broadcast_dashboard(
     assert [
         normalize_spaces(row.text) for row in page.select('table')[0].select('tbody tr')
     ] == [
-        'Example template This is a test England Scotland Live until tomorrow at 2:20am',
+        'Example template This is a test England Scotland Live since today at 2:20am',
     ]
 
     assert normalize_spaces(page.select('main h2')[1].text) == (
@@ -338,7 +338,7 @@ def test_broadcast_dashboard_json(
     }
 
     assert 'Prepared by Test User' in json_response['pending_approval_broadcasts']
-    assert 'Live until tomorrow at 2:20am' in json_response['live_broadcasts']
+    assert 'Live since today at 2:20am' in json_response['live_broadcasts']
 
 
 @freeze_time('2020-02-20 02:20')
@@ -1037,7 +1037,7 @@ def test_start_broadcasting(
         'status': 'broadcasting',
         'finishes_at': '2020-02-23T23:23:23.000000',
     }, [
-        'Live until tomorrow at 11:23pm Stop broadcasting',
+        'Live since 20 February at 8:20pm Stop broadcasting',
         'Prepared by Alice and approved by Bob.',
         'Broadcasting stops tomorrow at 11:23pm.'
     ]),