Merge pull request #3653 from alphagov/more-map-refinements

Make the ‘will get alert’ and ‘likely to get alert‘ areas on the map clearer

app/assets/images/dashed-border-govuk-blue.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#185FA0;stroke-width:2;stroke-miterlimit:10;}
+</style>
+<g>
+	<polyline class="st0" points="14,5.1 14,1 9.9,1 	"/>
+	<polyline class="st0" points="5.1,1 1,1 1,5.1 	"/>
+	<polyline class="st0" points="1,9.9 1,14 5.1,14 	"/>
+	<polyline class="st0" points="9.9,14 14,14 14,9.9 	"/>
+</g>
+</svg>

app/assets/stylesheets/components/area-list.scss

@@ -1,6 +1,6 @@
 .area-list {
 
-  display: inline-block;
+  display: inline;
 
   &-item {
 
@@ -94,27 +94,37 @@
     content: "";
     display: block;
     position: absolute;
-    top: 0;
+    top: 3px;
-    left: 0;
+    left: govuk-spacing(1);
-    width: govuk-spacing(7);
+    width: govuk-spacing(6);
-    height: govuk-spacing(7);
+    height: govuk-spacing(6);
     box-sizing: border-box;
     margin-right: govuk-spacing(1);
+    transform: rotate(45deg);
   }
 
   &--certain {
     &:before {
-      border: 4px solid rgba($white, 0.1);
+      border: 2px solid $black;
-      background: rgba($govuk-blue, 0.6);
+      background: $light-blue-50;
-      box-shadow: inset 0 0 0 2px $black;
     }
   }
 
   &--likely {
     &:before {
       padding: 1px;
-      border: 2px solid $govuk-blue;
+      border: 2px dashed $govuk-blue;
-      background: rgba($govuk-blue, 0.2);
+      border-image: file-url('dashed-border-govuk-blue.svg') 4 round;
+      background: $light-blue-25;
+    }
+  }
+
+  &--phone-estimate {
+    padding-left: govuk-spacing(1);
+    margin-right: 0;
+    float: right;
+    &:before {
+      display: none;
     }
   }
 

app/models/broadcast_message.py

@@ -128,7 +128,7 @@ class BroadcastMessage(JSONModel):
     def count_of_phones(self):
         return round_to_significant_figures(
             sum(area.count_of_phones for area in self.areas),
-            2
+            1
         )
 
     @property
@@ -136,7 +136,7 @@ class BroadcastMessage(JSONModel):
         area_estimate = self.simple_polygons.estimated_area
         bleed_area_estimate = self.simple_polygons.bleed.estimated_area - area_estimate
         return round_to_significant_figures(
-            self.count_of_phones * bleed_area_estimate / area_estimate,
+            self.count_of_phones + (self.count_of_phones * bleed_area_estimate / area_estimate),
             1
         )
 

app/templates/views/broadcast/macros/area-map.html

@@ -7,7 +7,7 @@
       </span>
       Will get
       <span class="visually-hidden">the</span>
-      alert ({{ broadcast_message.count_of_phones|format_thousands }} phones)
+      alert
     </li>
     <li class="area-key area-key--likely">
       <span class="visually-hidden">
@@ -18,7 +18,13 @@
         the
       </span>
       alert
-      ({{ broadcast_message.count_of_phones_likely|format_thousands }} phones)
+    </li>
+    <li class="area-key area-key--phone-estimate">
+      {% if broadcast_message.count_of_phones == broadcast_message.count_of_phones_likely %}
+        {{ broadcast_message.count_of_phones|format_thousands }} phones estimated
+      {% else %}
+        {{ broadcast_message.count_of_phones|format_thousands }} to {{ broadcast_message.count_of_phones_likely|format_thousands }} phones
+      {% endif %}
     </li>
   </ul>
 {% endmacro %}

app/templates/views/broadcast/partials/area-map-javascripts.html

@@ -5,23 +5,13 @@
   {% for polygon in broadcast_message.simple_polygons.bleed.as_coordinate_pairs_lat_long %}
     polygons.push(
       L.polygon({{polygon}}, {
-        opacity: 0.8,
+        opacity: 1,
-        color: '#005ea5', // $light-blue
+        color: '#005ea5',
-        fillColor: '#005ea5', // $light-blue
+        fillColor: '#2B8CC4',
         fillOpacity: 0.15,
-        weight: 2
+        weight: 2,
-      })
+        dashArray: [6, 7],
-    );
+        lineCap: 'butt'
-  {% endfor %}
-
-  {% for polygon in broadcast_message.simple_polygons.as_coordinate_pairs_lat_long %}
-    polygons.push(
-      L.polygon({{polygon}}, {
-        opacity: 0.3,
-        color: '#005ea5', // $black
-        fillColor: '#005ea5', // $light-blue
-        fillOpacity: 0.3,
-        weight: 1
       })
     );
   {% endfor %}
@@ -29,8 +19,9 @@
   {% for polygon in broadcast_message.polygons.as_coordinate_pairs_lat_long %}
     polygons.push(
       L.polygon({{polygon}}, {
-        color: '#0b0b0c', // $black
+        color: '#0b0b0c',
-        fillOpacity: 0,
+        fillColor: '#005ea5',
+        fillOpacity: 0.3,
         weight: 2
       })
     );

tests/app/main/views/test_broadcast.py

@@ -368,13 +368,57 @@ def test_broadcast_page(
     ),
 
 
+@pytest.mark.parametrize('areas_selected, areas_listed, estimates', (
+    ([
+        'ctry19-E92000001',
+        'ctry19-S92000003',
+    ], [
+        'England remove',
+        'Scotland remove',
+    ], [
+        'An area of 176,714.9 square miles Will get the alert',
+        'An extra area of 3,052.8 square miles is Likely to get the alert',
+        '40,000,000 phones estimated',
+    ]),
+    ([
+        'wd20-E05003224',
+        'wd20-E05003225',
+        'wd20-E05003227',
+        'wd20-E05003228',
+        'wd20-E05003229',
+    ], [
+        'Penrith Carleton remove',
+        'Penrith East remove',
+        'Penrith Pategill remove',
+        'Penrith South remove',
+        'Penrith West remove',
+    ], [
+        'An area of 6.3 square miles Will get the alert',
+        'An extra area of 14.4 square miles is Likely to get the alert',
+        '9,000 to 30,000 phones',
+    ]),
+))
 def test_preview_broadcast_areas_page(
+    mocker,
     client_request,
     service_one,
     fake_uuid,
-    mock_get_draft_broadcast_message,
+    areas_selected,
+    areas_listed,
+    estimates,
 ):
     service_one['permissions'] += ['broadcast']
+    mocker.patch(
+        'app.broadcast_message_api_client.get_broadcast_message',
+        return_value=broadcast_message_json(
+            id_=fake_uuid,
+            template_id=fake_uuid,
+            created_by_id=fake_uuid,
+            service_id=SERVICE_ONE_ID,
+            status='draft',
+            areas=areas_selected,
+        ),
+    )
     page = client_request.get(
         '.preview_broadcast_areas',
         service_id=SERVICE_ONE_ID,
@@ -384,20 +428,14 @@ def test_preview_broadcast_areas_page(
     assert [
         normalize_spaces(item.text)
         for item in page.select('ul.area-list li.area-list-item')
-    ] == [
+    ] == areas_listed
-        'England remove',
-        'Scotland remove',
-    ]
 
     assert len(page.select('#map')) == 1
 
     assert [
         normalize_spaces(item.text)
         for item in page.select('ul li.area-key')
-    ] == [
+    ] == estimates
-        'An area of 176,714.9 square miles Will get the alert (44,000,000 phones)',
-        'An extra area of 3,052.8 square miles is Likely to get the alert (800,000 phones)',
-    ]
 
 
 @pytest.mark.parametrize('areas, expected_list', (