Alerts page

dxw · Dec 2, 2024 · 9550bc8 · 9550bc8
1 parent 938dc90
commit 9550bc8
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 3 deletions.
diff --git a/app/assets/stylesheets/application.tailwind.css.scss b/app/assets/stylesheets/application.tailwind.css.scss
@@ -45,3 +45,84 @@
     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
@@ -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
@@ -2,8 +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 "Health advice", health_advice_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 "About", about_path %></li>
       <li><%= active_link_to "Contact", contact_path %></li>
     </ul>

diff --git 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
@@ -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"