Improve design of alerts page

Dockerfile

@@ -21,6 +21,7 @@ RUN apt-get -qq update && apt-get -qq install \
       php-xdebug \
       gettext \
       rsync \
+      mariadb-client \
     --no-install-recommends && \
     rm -r /var/lib/apt/lists/*
 

classes/AlertView/Standard.php

@@ -305,14 +305,30 @@ private function formatSearchMemberData() {
     private function setUserData() {
         $this->data['current_mp'] = false;
         $this->data['alerts'] = [];
+        $this->data['keyword_alerts'] = [];
+        $this->data['speaker_alerts'] = [];
+        $this->data['own_member_alerts'] = [];
+        $this->data['all_keywords'] = [];
+        $own_mp_criteria = '';
         if ($this->data['email_verified']) {
             if ($this->user->postcode()) {
                 $current_mp = new \MEMBER(['postcode' => $this->user->postcode()]);
-                if (!$this->alert->fetch_by_mp($this->data['email'], $current_mp->person_id())) {
+                if ($current_mp_alert = !$this->alert->fetch_by_mp($this->data['email'], $current_mp->person_id())) {
                     $this->data['current_mp'] = $current_mp;
+                    $own_mp_criteria = sprintf('speaker:%s', $current_mp->person_id());
                 }
             }
             $this->data['alerts'] = \MySociety\TheyWorkForYou\Utility\Alert::forUser($this->data['email']);
+            foreach ($this->data['alerts'] as $alert) {
+                if (array_key_exists('spokenby', $alert) and sizeof($alert['spokenby']) == 1 and $alert['spokenby'][0] == $own_mp_criteria) {
+                    $this->data['own_member_alerts'][] = $alert;
+                } elseif (array_key_exists('spokenby', $alert)) {
+                    $this->data['spoken_alerts'][] = $alert;
+                } else {
+                    $this->data['all_keywords'][] = implode(' ', $alert['words']);
+                    $this->data['keyword_alerts'][] = $alert;
+                }
+            }
         }
     }
 }

classes/Utility/Alert.php

@@ -9,6 +9,16 @@
  */
 
 class Alert {
+    #XXX don't calculate this every time
+    private static function sectionToTitle($section) {
+        global $hansardmajors;
+        $section_map = [];
+        foreach ($hansardmajors as $major => $details) {
+            $section_map[$details["page_all"]] = $details["title"];
+        }
+
+        return $section_map[$section];
+    }
     public static function detailsToCriteria($details) {
         $criteria = [];
 
@@ -34,6 +44,7 @@ public static function forUser($email) {
         $alerts = [];
         foreach ($q as $row) {
             $criteria = self::prettifyCriteria($row['criteria']);
+            $parts = self::prettifyCriteria($row['criteria'], true);
             $token = $row['alert_id'] . '-' . $row['registrationtoken'];
 
             $status = 'confirmed';
@@ -43,37 +54,63 @@ public static function forUser($email) {
                 $status = 'suspended';
             }
 
-            $alerts[] = [
+            $alert = [
                 'token' => $token,
                 'status' => $status,
                 'criteria' => $criteria,
                 'raw' => $row['criteria'],
+                'keywords' => [],
+                'exclusions' => [],
+                'sections' => [],
             ];
+
+            $alert = array_merge($alert, $parts);
+
+            $alerts[] = $alert;
         }
 
         return $alerts;
     }
 
-    public static function prettifyCriteria($alert_criteria) {
+    public static function prettifyCriteria($alert_criteria, $as_parts = false) {
         $text = '';
         if ($alert_criteria) {
             $criteria = explode(' ', $alert_criteria);
+            $parts = [];
             $words = [];
+            $sections = [];
+            $sections_verbose = [];
             $spokenby = array_values(\MySociety\TheyWorkForYou\Utility\Search::speakerNamesForIDs($alert_criteria));
 
             foreach ($criteria as $c) {
-                if (!preg_match('#^speaker:(\d+)#', $c, $m)) {
+                if (preg_match('#^section:(\w+)#', $c, $m)) {
+                    $sections[] = $m[1];
+                    $sections_verbose[] = self::sectionToTitle($m[1]);
+                } elseif (!preg_match('#^speaker:(\d+)#', $c, $m)) {
                     $words[] = $c;
                 }
             }
             if ($spokenby && count($words)) {
                 $text = implode(' or ', $spokenby) . ' mentions [' . implode(' ', $words) . ']';
+                $parts['spokenby'] = $spokenby;
+                $parts['words'] = $words;
             } elseif (count($words)) {
                 $text = '[' . implode(' ', $words) . ']' . ' is mentioned';
+                $parts['words'] = $words;
             } elseif ($spokenby) {
                 $text = implode(' or ', $spokenby) . " speaks";
+                $parts['spokenby'] = $spokenby;
+            }
+
+            if ($sections) {
+                $text = $text . " in " . implode(' or ', $sections_verbose);
+                $parts['sections'] = $sections;
+                $parts['sections_verbose'] = $sections_verbose;
             }
         }
+        if ($as_parts) {
+            return $parts;
+        }
         return $text;
     }
 

www/docs/js/main.js

@@ -423,6 +423,77 @@ function wrap_error($message){
   return '<div class="donate-form__error-wrapper"><p class="donate-form__error">' + $message + '</p></div>';
 }
 
+function createAccordion(triggerSelector, contentSelector) {
+  var triggers = document.querySelectorAll(triggerSelector);
+
+  triggers.forEach(function(trigger) {
+    var content = document.querySelector(trigger.getAttribute('href'));
+
+    var openAccordion = function() {
+      content.style.maxHeight = content.scrollHeight + "px"; // Dynamically calculate height
+      content.setAttribute('aria-hidden', 'false');
+      trigger.setAttribute('aria-expanded', 'true');
+    };
+
+    var closeAccordion = function() {
+      content.style.maxHeight = null; // Collapse
+      content.setAttribute('aria-hidden', 'true');
+      trigger.setAttribute('aria-expanded', 'false');
+    };
+
+    trigger.addEventListener('click', function(e) {
+      e.preventDefault();
+
+      if (content.style.maxHeight) {
+        closeAccordion();
+      } else {
+        openAccordion();
+      }
+    });
+
+    // Accessibility
+    trigger.setAttribute('aria-controls', content.getAttribute('id'));
+    trigger.setAttribute('aria-expanded', 'false');
+    content.setAttribute('aria-hidden', 'true');
+    content.style.maxHeight = null;
+  });
+}
+
+// Initialize accordion when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+  createAccordion('.accordion-button', '.accordion-content');
+});
+
+// Create alert form
+$(document).ready(function() {
+  let currentStep = 0;
+  let steps = $(".alert-step");
+
+  // Show the first step
+  $(steps[currentStep]).show();
+
+  // Focus management: Set focus to the first input on each step change
+  function focusFirstInput(stepIndex) {
+    $(steps[stepIndex]).find('input, button').first().focus();
+  }
+
+  // Next button click
+  $(".next").click(function() {
+    $(steps[currentStep]).hide();
+    currentStep++;
+    $(steps[currentStep]).show();
+    focusFirstInput(currentStep); // Set focus to the first input of the new step
+  });
+
+  // Previous button click
+  $(".prev").click(function() {
+    $(steps[currentStep]).hide();
+    currentStep--;
+    $(steps[currentStep]).show();
+    focusFirstInput(currentStep); // Set focus to the first input of the new step
+  });
+});
+
 $(function() {
 
   $('#how-often-annually').click(function() {

www/docs/style/sass/app.scss

@@ -62,10 +62,10 @@
 @import url(https://fonts.googleapis.com/css2?family=Manrope:wght@700&family=Merriweather:wght@400;700&display=swap);
 /* Foundation Icons v 3.0 MIT License */
 @font-face {
-  font-family: "foundation-icons";
-  src: url("/style/foundation-icons/foundation-icons.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
+    font-family: "foundation-icons";
+    src: url("/style/foundation-icons/foundation-icons.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
 }
 
 .fi-social-facebook:before,
@@ -75,17 +75,24 @@
 .fi-megaphone:before,
 .fi-pound:before,
 .fi-magnifying-glass:before,
-.fi-heart:before
+.fi-heart:before,
+.fi-plus:before,
+.fi-play:before,
+.fi-pause:before,
+.fi-trash:before,
+.fi-page-edit:before,
+.fi-x:before,
+.fi-save:before
 {
-  font-family: "foundation-icons";
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  display: inline-block;
-  text-decoration: inherit;
+    font-family: "foundation-icons";
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    display: inline-block;
+    text-decoration: inherit;
 }
 
 // https://github.com/zurb/foundation-icon-fonts/blob/master/_foundation-icons.scss
@@ -97,6 +104,13 @@
 .fi-pound:before {content: "\f19a"}
 .fi-magnifying-glass:before {content: "\f16c"}
 .fi-heart:before { content: "\f159"; }
+.fi-plus:before { content: "\f199"; }
+.fi-play:before { content: "\f198"; }
+.fi-pause:before { content: "\f191"; }
+.fi-trash:before { content: "\f204"; }
+.fi-page-edit:before { content: "\f184"; }
+.fi-x:before { content: "\f217"; }
+.fi-save:before { content: "\f1ac"; }
 
 html,
 body {
@@ -129,13 +143,13 @@ h3 {
 }
 
 .pull-right {
-     @media (min-width: $medium-screen) {
+    @media (min-width: $medium-screen) {
         float: right;
         margin-left: 1em;
     }
 }
 .pull-left {
-     @media (min-width: $medium-screen) {
+    @media (min-width: $medium-screen) {
         float: left;
         margin-left: 1em;
     }
@@ -166,12 +180,12 @@ ul {
 a {
     overflow-wrap: break-word;
     word-wrap: break-word;
-
+    
     -webkit-hyphens: auto;
-       -moz-hyphens: auto;
-        -ms-hyphens: auto;
-            hyphens: auto;
-
+    -moz-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+    
     color: $links;
 }
 
@@ -198,7 +212,7 @@ a:focus {
         // for .button elements!!
         vertical-align: -0.4em;
     }
-
+    
     &.tertiary {
         @include button-style($bg: $links);
     }
@@ -231,6 +245,7 @@ form {
 
 @import "parts/panels";
 @import "parts/promo-banner";
+@import "parts/accordion";
 
 @import "pages/mp";
 @import "pages/topics";