Update

DEFRA · Jul 9, 2019 · 54a2a00 · 54a2a00
1 parent 57fcdf3
commit 54a2a00
Show file tree

Hide file tree

Showing 13 changed files with 190 additions and 92 deletions.
diff --git a/client/sass/_custom.scss b/client/sass/_custom.scss
@@ -4,14 +4,14 @@
   max-width: 1280px;
 }
 
-.govuk-grid-column-one-third {
-  width: 50%;
-}
+// .govuk-grid-column-one-third { ???
+//   width: 50%;
+// }
 
 .flooding-icons {
   width: 50px;
   padding-right: 15px;
-  margin-bottom: -10px;
+  margin-bottom: -10px; 
   border-right: 1px solid #bfc1c3;
   margin-right: 15px;
 }

diff --git a/server/models/area-view.js b/server/models/area-view.js
@@ -243,34 +243,50 @@
 //   `
 // }
 
+// function table (warnings, name) {
+//   return `
+//     <div class='c'>
+//       ${warnings.map(warning => `<div class='r'>${warning[name]}</div>`).join('')}
+//     </div>
+//   `
+// }
+
 // module.exports = AreaView
 
 // #3
 const moment = require('moment')
 
 class AreaView {
-  constructor (data) {
+  constructor (data, url, id) {
     this.data = data
+    this.id = id
+    this.url = url
     this.summaryData = {}
 
     if (data && data.warnings) {
-      this.data.warnings.forEach(warning => {
-        if (!this.summaryData[warning.attr.ownerArea]) {
-          this.summaryData[warning.attr.ownerArea] = {}
-        }
-
-        if (!this.summaryData[warning.attr.ownerArea][warning.attr.severity]) {
-          this.summaryData[warning.attr.ownerArea][warning.attr.severity] = []
-        }
+      this.data.warnings
+        .filter(w => id ? w.attr.ownerArea === id : true)
+        .forEach(warning => {
+          if (!this.summaryData[warning.attr.ownerArea]) {
+            this.summaryData[warning.attr.ownerArea] = {}
+          }
 
-        this.summaryData[warning.attr.ownerArea][warning.attr.severity].push(
-          {
-            name: warning.attr.taName,
-            warningCode: warning.attr.taCode,
-            changed: moment(warning.attr.situationChanged).format('DD/MM/YYYY hh:mma')
+          if (!this.summaryData[warning.attr.ownerArea][warning.attr.severity]) {
+            this.summaryData[warning.attr.ownerArea][warning.attr.severity] = []
           }
-        )
-      })
+
+          this.summaryData[warning.attr.ownerArea][warning.attr.severity].push(
+            {
+              name: warning.attr.taName,
+              warningCode: warning.attr.taCode,
+              situationChanged: moment(warning.attr.situationChanged),
+              severityChanged: moment(warning.attr.severityChanged)
+            }
+          )
+        })
+
+      this.areaView = this.getAreaView()
+      this.updateTime = moment.tz('Europe/London').format('dddd D MMMM YYYY [at] h:mma')
     } else {
       let error = 'No warning data provided.'
       throw new Error(error)
@@ -279,12 +295,12 @@ class AreaView {
 
   getAreaView () {
     const rows = []
-
-    const areaRows = Object.keys(this.summaryData).map(area => {
+    const areas = Object.keys(this.summaryData).sort()
+    const areaRows = areas.map(area => {
       const subRows = []
       const headRow = [
         {
-          text: area,
+          html: `<a href='/area/${encodeURIComponent(area)}'> ${area} </a>`,
           classes: 'govuk-table__header govuk-!-width-one-quarter',
           attributes: { valign: 'center', xwidth: '35%' },
           colspan: 2
@@ -301,8 +317,12 @@ class AreaView {
           classes: 'govuk-table__header center',
           attributes: { valign: 'center' }
         }, {
-          text: 'Last Changed',
-          classes: 'govuk-table__header center govuk-!-width-one-quarter',
+          text: 'Situation Changed',
+          classes: 'govuk-table__header center',
+          attributes: { valign: 'center' }
+        }, {
+          text: 'Severity Changed',
+          classes: 'govuk-table__header center',
           attributes: { valign: 'center' }
         }
       ]
@@ -331,12 +351,16 @@ class AreaView {
               text: count,
               attributes: { valign: 'center' },
               classes: 'center'
-            }, {}, {}, {}
+            }, {}, {}, {}, {}
           ]
 
           subRows.push(subRow)
         } else {
-          this.summaryData[area][severity].forEach((warning, index) => {
+          const warnings = this.summaryData[area][severity].sort((a, b) => {
+            return b.situationChanged - a.situationChanged
+          })
+
+          warnings.forEach((warning, index) => {
             if (index === 0) {
               const subRow = [{
                 html: `<img src="${severityIconLocation}" class="flooding-icons" alt="Flooding Icon">`,
@@ -359,11 +383,14 @@ class AreaView {
                 attributes: { valign: 'center' },
                 classes: 'center'
               }, {
-                text: warning.changed,
+                text: warning.situationChanged.format('DD/MM/YYYY h:mma'),
+                attributes: { valign: 'center' },
+                classes: 'center'
+              }, {
+                text: warning.severityChanged.format('DD/MM/YYYY h:mma'),
                 attributes: { valign: 'center' },
                 classes: 'center'
-              }
-              ]
+              }]
 
               subRows.push(subRow)
             } else {
@@ -382,11 +409,15 @@ class AreaView {
                 attributes: { valign: 'center' },
                 classes: 'center'
               }, {
-                text: warning.changed,
+                text: warning.situationChanged.format('DD/MM/YYYY h:mma'),
+                attributes: { valign: 'center' },
+                classes: 'center'
+              }, {
+                text: warning.severityChanged.format('DD/MM/YYYY h:mma'),
                 attributes: { valign: 'center' },
                 classes: 'center'
-              }
-              ]
+              }]
+
               subRows.push(subRow)
             }
           })
@@ -404,12 +435,4 @@ class AreaView {
   }
 }
 
-function table (warnings, name) {
-  return `
-    <div class='c'>
-      ${warnings.map(warning => `<div class='r'>${warning[name]}</div>`).join('')}
-    </div>
-  `
-}
-
 module.exports = AreaView
diff --git a/server/models/fwis.js b/server/models/fwis.js
@@ -39,10 +39,11 @@ class fwis {
         classes: 'center'
       }
     ]
+
     const rows = Object.keys(this.summaryData).map(area => {
       return [{
-        // html: `<a href='?area=${encodeURIComponent(area)}'> ${area} </a>`
-        html: `<a href='/area'> ${area} </a>`
+        html: `<a href='/area/${encodeURIComponent(area)}'>${area}</a>`
+        // html: `<a href='/area'> ${area} </a>`
       }, {
         text: this.summaryData[area]['Flood Alert'] || 0,
         classes: 'center'

diff --git a/server/models/home-view.js b/server/models/home-view.js
@@ -1,11 +1,10 @@
 const moment = require('moment')
 
 class HomeView {
-  constructor (fwis, area) {
+  constructor (fwis) {
     this.title = 'Flood Digital Management Console'
     this.summaryTable = fwis.getSummaryTable()
-    this.areaView = area.getAreaView()
-    this.updateTime = moment.tz('Europe/London').format('DD/MM/YYYY hh:mma')
+    this.updateTime = moment.tz('Europe/London').format('dddd D MMMM YYYY [at] h:mma')
   }
 }
 

diff --git a/server/plugins/router.js b/server/plugins/router.js
@@ -1,5 +1,6 @@
 const routes = [].concat(
   require('../routes/home'),
+  require('../routes/area'),
   require('../routes/about'),
   require('../routes/public'),
   require('../routes/api/update-warnings')

diff --git a/server/routes/area.js b/server/routes/area.js
@@ -0,0 +1,20 @@
+const AreaView = require('../models/area-view')
+const fwisService = require('../services/fwis')
+
+module.exports = {
+  method: 'GET',
+  path: '/area/{id?}',
+  options: {
+    handler: async (request, h) => {
+      try {
+        const { id } = request.params
+        const data = await fwisService.get()
+
+        return h.view('area', new AreaView(data, request.url.href, id))
+      } catch (err) {
+        console.error(err)
+        throw err
+      }
+    }
+  }
+}
diff --git a/server/routes/home.js b/server/routes/home.js
@@ -11,9 +11,8 @@ module.exports = {
       try {
         const data = await fwisService.get()
         const fwis = new Fwis(data)
-        const area = new Area(data)
 
-        return h.view('index', new HomeView(fwis, area))
+        return h.view('index', new HomeView(fwis))
       } catch (err) {
         console.error(err)
         throw err

diff --git a/server/services/web-socket.js b/server/services/web-socket.js
@@ -24,7 +24,7 @@ module.exports = {
         summaryTable: fwis.getSummaryTable(),
         warnings: await fwisService.get(),
         updateTime: new Date().toISOString(),
-        updateTimePretty: moment.tz('Europe/London').format('DD/MM/YYYY hh:mma')
+        updateTimePretty: moment.tz('Europe/London').format('dddd D MMMM YYYY [at] h:mma')
       })
     } else {
       console.log('No sockets to publish warnings to')

diff --git a/server/views/area.html b/server/views/area.html
@@ -0,0 +1,74 @@
+{% extends 'layout.html' %}
+
+{% from "date-input/macro.njk" import govukDateInput %}
+{% from "tabs/macro.njk" import govukTabs %}
+{% from "table/macro.njk" import govukTable %}
+{% from "table/macro.njk" import govukTable %}
+{% from "button/macro.njk" import govukButton %}
+
+{% set bodyClasses = "internal" %}
+
+{% block head %}
+  <meta http-equiv="refresh" content="60">
+  {{super()}}
+{% endblock %}
+
+{% block content %}
+  {{super()}}
+  <div class="govuk-body">
+
+      <div class="govuk-inset-text">
+        Generated on 
+        <time id="updated-time">{{updateTime}}</time>
+      </div>
+      <div class="govuk-tabs">
+        <h2 class="govuk-tabs__title">
+          Area View
+        </h2>
+
+        <ul class="govuk-tabs__list">
+          <li class="govuk-tabs__list-item">
+            <a class="govuk-tabs__tab" href="/">
+              Summary
+            </a>
+          </li>
+          <li class="govuk-tabs__list-item">
+            <a class="govuk-tabs__tab govuk-tabs__tab--selected" href="/area">
+              Area View
+            </a>
+          </li>
+          <!-- <li class="govuk-tabs__list-item">
+            <a class="govuk-tabs__tab" href="/severity">
+              Severity View
+            </a>
+          </li>
+          <li class="govuk-tabs__list-item">
+            <a class="govuk-tabs__tab" href="#past-year">
+              Past year
+            </a>
+          </li> -->
+        </ul>
+
+        <section class="govuk-tabs__panel" id="past-day">
+          {% if id %}
+          <span style="float: right">
+            <a href="/area" class="govuk-link">Show All Areas</a>
+          </span>
+          <span class="govuk-caption-xl">
+            {{id}}
+          </span>
+          {% endif %}
+
+          <h2 class="govuk-heading-l">Area View</h2>
+          {% include "./partials/area.html" %}
+        </section>
+      </div>
+
+  </div>
+  <div>
+    <a href="{{url}}" class="govuk-button">Refresh</a>
+  </div>
+  <div>For help and information please contact: <a href="mailto:wandlsupport@enviroment-agency.gov.uk">wandisupport@enviroment-agency.gov.uk</a></div>
+  <script src="{{ assetPath }}/scripts/templates.js"></script>
+  <script src="{{ assetPath }}/scripts/home.js"></script>
+{% endblock %}