Merge pull request #108 from dxw/add-static-pages

Add health advice and about pages

app/assets/stylesheets/application.tailwind.css.scss

@@ -23,6 +23,22 @@
   @apply border-b-0 border-l-2 border-r-2 border-t-2 border-gray-400 border-dashed text-gray-400;
 }
 
+.low-level {
+  @apply text-black bg-lime-400;
+}
+
+.moderate-level {
+  @apply text-black bg-yellow-300;
+}
+
+.high-level {
+  @apply text-white bg-red-500;
+}
+
+.very-high-level {
+  @apply text-white bg-red-800;
+}
+
 .daqi-level-4-today,
 .daqi-alert-after-today-selected-level-4 {
   @apply text-black bg-yellow-300;
@@ -61,3 +77,49 @@
 .home-page-link {
   color: revert;
 }
+
+article {
+  h1 {
+    @apply text-2xl font-bold mt-5;
+  }
+
+  h2 {
+    @apply text-xl font-bold mt-5;
+  }
+
+  h3 {
+    @apply text-lg font-bold mt-5;
+  }
+
+  h4 {
+    @apply text-base font-bold mt-3;
+  }
+
+  ul {
+    @apply list-disc list-inside;
+
+    li {
+      @apply ml-2;
+    }
+  }
+
+  p {
+    @apply mb-2;
+
+    a {
+      @apply text-blue-500 underline;
+    }
+  }
+
+  table {
+    @apply max-w-sm border-collapse;
+
+    th {
+      @apply px-2 py-1 border border-gray-400;
+    }
+
+    td {
+      @apply px-2 py-1 border border-gray-400;
+    }
+  }
+}

app/controllers/pages_controller.rb

@@ -0,0 +1,7 @@
+class PagesController < ApplicationController
+  def health_advice
+  end
+
+  def about
+  end
+end

app/views/forecasts/_learning.html.erb

@@ -2,7 +2,7 @@
   <header class="text-xl font-bold text-center w-full mb-8">
     Do you know how you can protect yourself and others in your community?
   </header>
-  <a href="#" class="block w-full py-4 px-8 rounded-md text-lg font-bold bg-gray-200 border border-gray-700 text-center mb-4">
+  <a href="health_advice" class="block w-full py-4 px-8 rounded-md text-lg font-bold bg-gray-200 border border-gray-700 text-center mb-4">
     Learn more about health effects
   </a>
 </div>

app/views/forecasts/show.html.erb

@@ -7,4 +7,3 @@
 </div>
 <%= render partial: "learning" %>
 <%= render partial: "subscribe" %>
-<%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>

app/views/layouts/application.html.erb

@@ -23,4 +23,5 @@
       </footer>
     </div>
   </body>
+  <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
 </html>

app/views/pages/about.html.erb

@@ -1,7 +1,38 @@
-<% content_for :title do %>About<% end %>
-<h3>About the Website</h3>
-<p>
-This web application was created with
-<%= link_to('Rails Composer', 'http://railsapps.github.io/rails-composer/') %>
-from the <%= link_to('RailsApps project', 'http://railsapps.github.io/') %>.
-</p>
+<% content_for :title, 'About' %>
+
+<article>
+  <h1>About airTEXT</h1>
+
+  <h2>What is airTEXT?</h2>
+  <p>airTEXT is a free service for the public providing air quality alerts by SMS text message, email and voicemail and 3-day forecasts of air quality, pollen, UV and temperature across Greater London. airTEXT is an independent service, operated by <%= link_to('Cambridge Environmental Research Consultants (CERC) Ltd', 'https://www.cerc.co.uk', target: '_blank') %> in partnership with a Consortium made up of representatives from all the member local authorities, the GLA, Public Health England and the Environment Agency.  The airTEXT Consortium is chaired by Islington Borough Council.</p>
+  <p>airTEXT air quality maps at 10m resolution are created using CERC's world-leading urban air quality dispersion modelling system <%= link_to('ADMS-Urban', 'https://www.cerc.co.uk/ADMS-urban', target: '_blank') %>.</p>
+  <p>Member local authorities pay a small annual subscription to be part of the service. The maintenance and development of the core airTEXT service is funded jointly by CERC and research projects in which CERC is involved. Grants from national and local government have contributed to airTEXT service developments in the past. airTEXT works in partnership with the GLA from time to time, for example on the Mayor of London's <%= link_to('public notifications', 'https://www.london.gov.uk/press-releases/mayoral/air-quality-alerts-warn-londoners-about-pollution', target: '_blank') %> during high pollution episodes.</p>
+
+  <h2>How are the forecasts made?</a></h2>	
+  <p>The air quality forecasts are produced using <%= link_to("CERC's air pollution forecasting system", 'https://www.cerc.co.uk/forecast', target: '_blank') %>. Information from weather forecasts, forecasts of pollution across Europe from the <%= link_to('CAMS', 'https://atmosphere.copernicus.eu/', target: '_blank') %> Regional Ensemble and very detailed data on about 30,000 pollution sources across London are fed into the world-leading <%= link_to('ADMS-Urban', 'https://www.cerc.co.uk/environmental-software/ADMS-Urban-model.html', target: '_blank') %> air quality model to produce forecasts of air quality at a high degree of spatial resolution (10m). These forecasts are issued twice a day at about 7am and 7pm. The forecasts are updated throughout the day using real-time monitoring data from LondonAir. We compare the forecasts with observed pollution levels to assess the accuracy of the forecasts. These performance statistics are available <%= link_to('here', './pdfs/airTEXT 2023 performance.pdf', target: '_blank') %>.</p>p>
+  <p>The hourly concentrations of four pollutants are calculated: nitrogen dioxide (NO2), particulates (PM10 and PM2.5) and ozone (O3). From the hourly concentrations the daily air quality index (<%= link_to('DAQI', 'https://uk-air.defra.gov.uk/air-pollution/daqi', target: '_blank') %>) of each pollutant is derived. The overall air quality index is determined by the highest index for any of these pollutants.</p>
+  <p>airTEXT issues an alert for a local authority or region if at least 10% of the geographical area is predicted to reach MODERATE or above.</p>
+  <p>Forecast values of UV and temperature are supplied by <%= link_to('DTN', 'https://www.dtn.com/weather/', target: '_blank') %>. The pollen forecast is supplied by the <%= link_to('Met Office', 'https://www.metoffice.gov.uk/weather/warnings-and-advice/seasonal-advice/pollen-forecast', target: '_blank') %>.</p>
+
+  <h2>Partners</h2>
+  <p>The airTEXT Consortium is a consortium of London Boroughs, Slough Borough Council, Chelmsford City Council, Colchester Borough Council, Maldon District Council, Elmbridge Borough Council, Mole Valley District Council, Reigate and Banstead Borough Council, Runnymede Borough Council, Spelthorne Borough Council, Tandridge District Council, the Greater London Authority, the Environment Agency and Public Health England.</p>
+
+  <h4>Islington Council</h4>
+  <p><%= link_to('Islington Council', 'https://www.islington.gov.uk', target: '_blank') %> currently leads the airTEXT consortium.</p>
+
+  <h4>Cambridge: </h4>
+  <p>Additional forecasts are provided for Cambridge although the Council is not a member of the airTEXT consortium.</p>
+
+  <h4>CERC</h4>
+  <p><%= link_to('CERC', 'https://www.cerc.co.uk', target: '_blank') %> develop and operate the airTEXT forecasting and alert system, which has operated across London since March 2007.</p>
+
+  <h4>European Commission</h4>
+  <p>CERC has been a partner in a number of EU-funded projects which have contributed to the development of airTEXT, including PASODOBLE and the series of MACC projects. CERC is a member of the team delivering the EU's <%= link_to('Copernicus Atmospheric Monitoring Service (CAMS)', 'https://atmosphere.copernicus.eu/', target: '_blank') %>%. CERC is part of the sub-team facilitating user interaction.</p>
+
+  <h4>DEFRA</h4>
+  <p><%= link_to('Department for the Environment, Food and Rural Affairs', 'https://www.gov.uk/government/organisations/department-for-environment-food-rural-affairs', target: '_blank') %>% has provided support through air quality grants to member Councils. Grants to Islington and Hackney in 2012 funded the development of the daily bulletins for each Borough. A grant to Southwark and Lambeth Council in 2022 funded the re-development of the operational system using Cloud technology and the development of web APIs for integrating airTEXT data in other apps and services.</p>
+
+  <h4>European Space Agency</h4>
+  <p><%= link_to('ESA', 'https://www.esa.int', target: '_blank') %> supported the inital development of airTEXT through the <%= link_to('PROMOTE', 'https://www.esa.int/Our_Activities/Space_Engineering_Technology/Space_for_health/Air_quality_and_pollution', target: '_blank') %> projects.</p>
+
+</article>

app/views/pages/health_advice.html.erb

@@ -0,0 +1,106 @@
+<% content_for :title, 'Health advice' %>
+
+<article>
+  <h1>Health advice</h1>
+
+  <h2>Air pollution index</h2>
+  <p>The index used to describe air quality is the <%= link_to('daily air quality index (DAQI)', 'http://uk-air.defra.gov.uk/air-pollution/daqi') %>% for the UK. </p>
+  <p>The index represents air pollution using a 1 to 10 scale divided into four bands: </p>
+  <table>
+    <thead>
+      <tr>
+        <th>Band</th>
+        <th>Indexes</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="low-level">Low</td>
+        <td class="text-center">1-3</td>
+      </tr>
+      <tr>
+        <td class="moderate-level">Moderate</td>
+        <td class="text-center">4-6</td>
+      </tr>
+      <tr>
+        <td class="high-level">High</td>
+        <td class="text-center">7-9</td>
+      </tr>
+      <tr>
+        <td class="very-high-level">Very high</td>
+        <td class="text-center">10</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2>Air pollution advice</h2>
+  <p>Air pollution levels are normally low in London and for most of the time you will not notice any effects on your health. It's important that you do not become alarmed or panic when you receive an airTEXT alert. It is designed to help you ensure you have any necessary medication at hand and to prepare your day ahead to reduce your exposure.</p>
+
+  <h2>Long term effects of air pollution</h2>
+  <p>Information on the long-term health effects of air pollution is available in the 2009 Committee on the Medical Effects of Air Pollutants COMEAP report <%= link_to('Long-Term Exposure to Air Pollution: Effect on Mortality', 'http://www.hpa.org.uk/webc/HPAwebFile/HPAweb_C/1317137020526') %>.</p>
+
+  <h2>UV advice</h2>
+  <p>The forecasts of UV are forecasts of maximum hourly cloud-adjusted solar UV index over a 24-hr period.</p>
+  <p>Cancer Research UK’s website has <%= link_to('information and advice about sun safety', 'https://www.cancerresearchuk.org/about-cancer/causes-of-cancer/sun-uv-and-cancer/the-uv-index-and-sunburn-risk') %>.</p>
+  <table>
+    <thead>
+      <tr>
+        <th>Band</th>
+        <th>Indexes</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="low-level">Low</td>
+        <td class="text-center">1-2</td>
+      </tr>
+      <tr>
+        <td class="moderate-level">Moderate</td>
+        <td class="text-center">3-5</td>
+      </tr>
+      <tr>
+        <td class="high-level">High</td>
+        <td class="text-center">6-7</td>
+      </tr>
+      <tr>
+        <td class="very-high-level">Very high</td>
+        <td class="text-center">10</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2>Pollen advice</h2>
+  <p>The forecasts of pollen are forecasts of daily grass pollen and may be</p>
+  <p>>The NHS hay fever webpage has <%= link_to('advice on prevention and treatment of hay fever', 'http://www.nhs.uk/Conditions/Hay-fever/Pages/Introduction.aspx') %></p>
+  <table>
+    <thead>
+      <tr>
+        <th>Band</th>
+        <th>Indexes</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="low-level">Low</td>
+        <td class="text-center">1-2</td>
+      </tr>
+      <tr>
+        <td class="moderate-level">Moderate</td>
+        <td class="text-center">3-5</td>
+      </tr>
+      <tr>
+        <td class="high-level">High</td>
+        <td class="text-center">6-7</td>
+      </tr>
+      <tr>
+        <td class="very-high-level">Very high</td>
+        <td class="text-center">8-10</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2>Extreme weather advice</h2>
+  <p>The forecasts show the minimum and maximum hourly temperatures predicted over a 24-hour period.</p>
+  <p>The NHS heatwave webpage has <%= link_to('advice about how to keep cool in hot weather', 'http://www.nhs.uk/Livewell/Summerhealth/Pages/Heatwave.aspx') %>.</p>
+  <p>The NHS Winter health web page has <%= link_to('advice about how to keep warm in cold weather', 'http://www.nhs.uk/Livewell/Winterhealth/Pages/Winterhealthhome.aspx') %>.</p>
+</article>

app/views/shared/_hamburger_menu.html.erb

@@ -3,10 +3,10 @@
    ☰
   </button>
   <ul id="menu-list" class="hidden text-sm">
-    <li>Air quality forecast</li>
+    <li><a href="forecast">Air quality forecast</a></li>
     <li>Alerts</li>
-    <li>Health information</li>
-    <li>About</li>
+    <li><a href="health_advice" class="">Health advice</a></li>
+    <li><a href="about" class="">About</a></li>
     <li>Contact</li>
   </ul>
 </div>

app/views/shared/_navigation.html.erb

@@ -1,9 +1,9 @@
 <nav class="py-8 px-6">
   <ul>
-    <li class="mb-2"><a href="#" class="font-bold">Air quality forecast</a></li>
+    <li class="mb-2"><a href="forecast" class="font-bold">Air quality forecast</a></li>
     <li class="mb-2"><a href="#" class="">Alert service</a></li>
-    <li class="mb-2"><a href="#" class="">Health information</a></li>
-    <li class="mb-2"><a href="#" class="">About</a></li>
+    <li class="mb-2"><a href="health_advice" class="">Health advice</a></li>
+    <li class="mb-2"><a href="about" class="">About</a></li>
     <li class="mb-2"><a href="#" class="">Contact</a></li>
   </ul>
 </nav>

config/routes.rb

@@ -7,10 +7,12 @@
 
   get "map", to: "map#show"
 
-  get :forecast, to: "forecasts#show"
   get :forecast, to: "forecasts#show"
   get :update_forecast, to: "forecasts#update"
 
+  get :health_advice, to: "pages#health_advice"
+  get :about, to: "pages#about"
+
   # If the CANONICAL_HOSTNAME env var is present, and the request doesn't come from that
   # hostname, redirect us to the canonical hostname with the path and query string present
   if ENV["CANONICAL_HOSTNAME"].present?

spec/features/visitors/about_page_spec.rb

@@ -1,16 +1,10 @@
 # frozen_string_literal: true
 
-# Feature: 'About' page
-#   As a visitor
-#   I want to visit an 'about' page
-#   So I can learn more about the website
 RSpec.feature "About page" do
-  # Scenario: Visit the 'about' page
-  #   Given I am a visitor
-  #   When I visit the 'about' page
-  #   Then I see "About the Website"
-  scenario "Visit the about page" do
-    visit "pages/about"
-    expect(page).to have_content "About the Website"
+  describe "Visit the about page" do
+    it "should display the about page" do
+      visit "about"
+      expect(page).to have_content "About airTEXT"
+    end
   end
 end

spec/features/visitors/health_advice_page_spec.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+RSpec.feature "Health advice page" do
+  describe "Visit the health advice page" do
+    it "should display the health advice page" do
+      visit "health_advice"
+      expect(page).to have_content "Health advice"
+    end
+  end
+end