Added council suggestions for comparisson tool

mysociety · Oct 14, 2024 · e71d4af · e71d4af
1 parent 97b851c
commit e71d4af
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 15 deletions.
diff --git a/scoring/static/scoring/js/main.js b/scoring/static/scoring/js/main.js
@@ -144,19 +144,35 @@ forEachElement('.js-location-compare-autocomplete', function(input){
             autoFirst: true
         }
     );
+
     input.parentNode.addEventListener('awesomplete-selectcomplete', function(data){
-        var council = findItem(councils, {'name': data.text });
-        var sp = new URLSearchParams(window.location.search)
-        var comparisons = sp.getAll('comparisons');
+        handleCouncilSelection(data.text);
+    });
+});
 
-        if (!comparisons.includes(council.slug)) {
-            comparisons.push(council.slug);
-        }
-        sp.delete('comparisons');
-        for (comparison of comparisons.values()) {
-            sp.append('comparisons', comparison);
-        }
-        window.location.href = window.location.pathname + '?' + sp.toString() + '#questions';
+// Function to handle selection from both autocomplete and suggestions
+function handleCouncilSelection(councilName) {
+    var council = findItem(councils, {'name': councilName});
+    var sp = new URLSearchParams(window.location.search);
+    var comparisons = sp.getAll('comparisons');
+
+    if (!comparisons.includes(council.slug)) {
+        comparisons.push(council.slug);
+    }
+    sp.delete('comparisons');
+    for (comparison of comparisons.values()) {
+        sp.append('comparisons', comparison);
+    }
+    window.location.href = window.location.pathname + '?' + sp.toString() + '#questions';
+}
+
+// Handling suggestion clicks
+forEachElement('.js-council-compare-suggestions', function(suggestion) {
+    suggestion.addEventListener('click', function(event) {
+        event.preventDefault();
+        var councilSlug = this.dataset.slug;
+        var council = findItem(councils, {'slug': councilSlug}); // Get the council by slug
+        handleCouncilSelection(council.name); // Pass the name to the selection handler
     });
 });
 

diff --git a/scoring/templates/scoring/council.html b/scoring/templates/scoring/council.html
@@ -161,10 +161,20 @@ <h3 class="fs-6 mb-0">Choose {% include "scoring/includes/scoring-group-name.htm
                 </div>
                 <div class="card-body">
                     <form id="advancedFilterForm" action=".">
-                      {% if comparisons|length > 2 %}
+                        {% if comparisons|length > 2 %}
                         <p class="warning-message">You have reached the maximum number of councils that can be compared.</p>
-                      {% else %}
-                        <input class="form-control searchbar js-location-compare-autocomplete" name="search" id="compare-search" type="search" placeholder="Council name" aria-label="Council name" data-council_type="{{ council.get_scoring_group.slug }}">
+                        {% else %}
+                        <input class="form-control searchbar js-location-compare-autocomplete mb-3" name="search" id="compare-search" type="search" placeholder="Council name" aria-label="Council name" data-council_type="{{ council.get_scoring_group.slug }}">
+                        <p class="mb-1">Based on <button type="button" class="d-inline-flex align-items-center p-0 me-1 border-0 bg-transparent" data-bs-toggle="tooltip" data-bs-placement="top" title="Overall similarity considers factors such as: terms of emissions profile, deprivation, rural/urban population density, and geographical nearness">
+                          <span>overall similarity</span>
+                          {% include 'caps/icons/question-circle.html' with classes='ms-1 align-text-top' width='1.1rem' height='1.1rem' role='presentation' %}
+                        </button> we suggest the following councils:</p>
+                        <div>
+                          <a class="d-inline-block js-council-compare-suggestions" href="#" data-slug="manchester-city-council">Manchester city council</a>
+                          <a class="d-inline-block js-council-compare-suggestions" href="#" data-slug="manchester-city-council">Borough of Broxbourne</a>
+                          <a class="d-inline-block js-council-compare-suggestions" href="#" data-slug="manchester-city-council">Spelthorne Borough Council</a>
+                        </div>
+                        <hr class="mx-n3">
                       {% endif %}
                       {% if comparisons %}
                         <div class="selected-council-wrapper mt-4 mb-3">
@@ -179,7 +189,7 @@ <h3 class="fs-6 mb-0">Choose {% include "scoring/includes/scoring-group-name.htm
             </div>
         </div>
         <div class="col-md-6 col-lg-8">
-            <div class="card h-100">
+            <div class="card">
                 <div class="card-header">
                     <h3 class="fs-6 mb-0">Filter questions in the table</h3>
                 </div>