From b655302ed66d07b37b900d0b7c60c6ee05ff02cb Mon Sep 17 00:00:00 2001
From: "joseph@dxw.com" <joseph@dxw.com>
Date: Tue, 3 Dec 2024 17:24:58 +0000
Subject: [PATCH] Alerts page

---
 .../stylesheets/application.tailwind.css.scss | 82 +++++++++++++++++++
 app/views/forecasts/alerts.html.erb           | 51 ++++++++++++
 app/views/shared/_footer.html.erb             |  3 +-
 app/views/shared/_header.html.erb             |  3 +-
 config/routes.rb                              |  1 +
 5 files changed, 138 insertions(+), 2 deletions(-)
 create mode 100644 app/views/forecasts/alerts.html.erb

diff --git a/app/assets/stylesheets/application.tailwind.css.scss b/app/assets/stylesheets/application.tailwind.css.scss
index 1e1b3c97..0aec76ee 100644
--- a/app/assets/stylesheets/application.tailwind.css.scss
+++ b/app/assets/stylesheets/application.tailwind.css.scss
@@ -45,3 +45,85 @@
     text-decoration: underline;
   }
 }
+
+.air-quality-alerts-table {
+  margin-top: 1rem;
+  border-collapse: collapse;
+  width: 100%;
+
+  th,
+  td {
+    padding: 0.5rem;
+  }
+
+  .zone-name {
+    font-weight: bold;
+    background-color: var(--main-colour-lightest);
+  }
+
+  .levels {
+    td {
+      border-right: 1px solid #ccc;
+
+      .label {
+        font-weight: bold;
+        margin-bottom: -5px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        &::after {
+          content: "";
+          float: right;
+          width: 15px;
+          height: 15px;
+          border-radius: 50%;
+        }
+
+        &.daqi-level-1::after {
+          background-color: var(--daqi-level-1-bg);
+        }
+
+        &.daqi-level-2::after {
+          background-color: var(--daqi-level-2-bg);
+        }
+
+        &.daqi-level-3::after {
+          background-color: var(--daqi-level-3-bg);
+        }
+
+        &.daqi-level-4::after {
+          background-color: var(--daqi-level-4-bg);
+        }
+
+        &.daqi-level-5::after {
+          background-color: var(--daqi-level-5-bg);
+        }
+
+        &.daqi-level-6::after {
+          background-color: var(--daqi-level-6-bg);
+        }
+
+        &.daqi-level-7::after {
+          background-color: var(--daqi-level-7-bg);
+        }
+
+        &.daqi-level-8::after {
+          background-color: var(--daqi-level-8-bg);
+        }
+
+        &.daqi-level-9::after {
+          background-color: var(--daqi-level-9-bg);
+        }
+
+        &.daqi-level-10::after {
+          background-color: var(--daqi-level-10-bg);
+        }
+      }
+
+      .value {
+        font-size: 0.75rem;
+      }
+    }
+  }
+}
diff --git a/app/views/forecasts/alerts.html.erb b/app/views/forecasts/alerts.html.erb
new file mode 100644
index 00000000..59c1bbda
--- /dev/null
+++ b/app/views/forecasts/alerts.html.erb
@@ -0,0 +1,51 @@
+<div class="text-block p-4 mx-0">
+  <h1>Air pollution alerts for Greater London and the South East</h1>
+  <p>The list below show all of the air pollution alerts fot the next three days.</p>
+  <p>If an area is not shown below, the air pollution is expected to be low for that region for all three days.</p>
+  <p>See the <%= link_to "health advice", health_advice_path %> page to learn more about how the expected pollution levels might affect your health.</p>
+
+  <table class="air-quality-alerts-table">
+    <colgroup>
+      <col class="w-1/3">
+      <col class="w-1/3">
+      <col class="w-1/3">
+    </colgroup>
+    <thead>
+      <tr>
+        <th>Today
+        <th><%= (Date.today + 1.day).strftime("%A") %></th>
+        <th><%= (Date.today + 2.days).strftime("%A") %></th>
+      </tr>
+    </thead>
+    <tbody>
+      <% no_alerts = true %>
+      <% CercForecastService.latest_forecasts.each do |cached_forecast| %>
+        <% next unless cached_forecast.data.map { |f| f.air_quality_alert? }.count(true).positive? %>
+        <% no_alerts = false %>
+        <tr class="zone-name">
+          <td colspan="3"><%= cached_forecast.data.first.zone[:name] %></td>
+        </tr>
+        <tr class="levels">
+          <% cached_forecast.data.each do |forecast| %>
+            <td>
+              <% if forecast.air_quality_alert? %>
+                <span class="label <%= "daqi-level-#{forecast.air_pollution[:total]}"%>"><%= forecast.air_pollution[:label].humanize %></span>
+                <span class="value">Index <%= forecast.air_pollution[:total] %>/10</span>
+              <% else %>
+                No alert
+              <% end %>
+            </td>
+          <% end %>
+        </tr>
+      <% end %>
+
+      <% if no_alerts %>
+        <tr class="text-center">
+          <td>No alerts</td>
+          <td>No alerts</td>
+          <td>No alerts</td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
diff --git a/app/views/shared/_footer.html.erb b/app/views/shared/_footer.html.erb
index 720085a6..445fc2ad 100644
--- a/app/views/shared/_footer.html.erb
+++ b/app/views/shared/_footer.html.erb
@@ -2,7 +2,8 @@
   <nav>
     <ul>
       <li><%= active_link_to "Air quality forecast", forecast_path %></li>
-      <li><%= active_link_to "Alert service", subscriptions_path %></li>
+      <li><%= active_link_to "Air pollution alerts", alerts_path %></li>
+      <li><%= active_link_to "Air pollution alert notification service", subscriptions_path %></li>
       <li><%= active_link_to "Health advice", health_advice_path %></li>
       <li><%= active_link_to "About", about_path %></li>
       <li><%= active_link_to "Contact", contact_path %></li>
diff --git a/app/views/shared/_header.html.erb b/app/views/shared/_header.html.erb
index 5a2b703e..0d007a9e 100644
--- a/app/views/shared/_header.html.erb
+++ b/app/views/shared/_header.html.erb
@@ -8,7 +8,8 @@
   <nav>
     <ul class="hidden" data-navigation-target="menuList">
       <li><%= active_link_to "Air quality forecast", forecast_path %></li>
-      <li><%= active_link_to "Alert service", subscriptions_path %></li>
+      <li><%= active_link_to "Air pollution alerts", alerts_path %></li>
+      <li><%= active_link_to "Air pollution alert notification service", subscriptions_path %></li>
       <li><%= active_link_to "Health advice", health_advice_path %></li>
       <li><%= active_link_to "About", about_path %></li>
       <li><%= active_link_to "Contact", contact_path %></li>
diff --git a/config/routes.rb b/config/routes.rb
index a7663c97..41715798 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -7,6 +7,7 @@
 
   get :forecast, to: "forecasts#show"
   get :pollutant_forecasts, to: "forecasts#pollutant_forecasts"
+  get :alerts, to: "forecasts#alerts"
   resources :subscriptions
   get :health_advice, to: "pages#health_advice"
   get :about, to: "pages#about"