Integration/latest levels app2

server/src/js/components/latest-levels-auto-refresh.js

@@ -0,0 +1,169 @@
+/* global DOMParser */
+
+class LatestLevelsAutoRefresh {
+  constructor (targetMinutes = [3, 18, 33, 48]) {
+    this.timeout = null
+    this.timeAgoInterval = null
+    this.liveStatusMessages = []
+    this.targetMinutes = targetMinutes
+
+    this.latestLevels = document.querySelectorAll('.defra-live__item')
+  }
+
+  updateLiveStatus = () => {
+    if (this.liveStatusMessages.length === 0) {
+      return
+    }
+
+    const element = document.querySelector('[data-live-status]')
+
+    if (!element) {
+      return
+    }
+
+    element.innerHTML = ''
+
+    const p = document.createElement('p')
+    p.innerText = this.liveStatusMessages.join('. ')
+    element.append(p)
+  }
+
+  updateTimeAgo = () => {
+    setTimeout(() => {
+      this.renderTimeAgo()
+      this.timeAgoInterval = setInterval(this.renderTimeAgo, 60000)
+    }, (60 - new Date().getSeconds()) * 1000)
+  }
+
+  renderTimeAgo = () => {
+    const elements = document.querySelectorAll('[data-item-time]')
+
+    elements.forEach(element => {
+      const timeAgoText = element.textContent
+      const timeAgoValue = parseInt(timeAgoText, 10)
+
+      if (!timeAgoText.includes('hour')) {
+        element.textContent = `${timeAgoValue + 1} minutes ago`
+      }
+
+      if ((timeAgoValue + 1) > 59) {
+        element.textContent = 'More than 1 hour ago'
+      }
+    })
+  }
+
+  fetchRiverLevels = (callback) => {
+    this.liveStatusMessages = []
+
+    fetch(window.location.href)
+      .then(res => {
+        if (!res.ok) {
+          throw new Error('Failed to fetch data')
+        }
+
+        return res.text()
+      })
+      .then(html => {
+        this.updateRiverLevels(html)
+
+        if (callback) {
+          callback()
+        }
+      })
+      .catch(error => {
+        console.error('Error updating levels:', error)
+
+        this.liveStatusMessages.push('There was an error getting the latest level')
+      })
+      .finally(() => {
+        this.updateLiveStatus()
+      })
+  }
+
+  updateRiverLevels = (html) => {
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(html, 'text/html')
+
+    const currentStatus = document.querySelector('[data-severity-status]')?.getAttribute('data-severity-status')
+    const newStatus = doc.querySelector('[data-severity-status]')?.getAttribute('data-severity-status')
+
+    if (currentStatus !== newStatus) {
+      return window.location.reload()
+    }
+
+    // Get elements from fetched content
+    const fetchedElements = Array.from(doc.querySelectorAll('.defra-live .defra-live__item'))
+
+    // Check if any elements are missing in the fetched data
+    const isMissingElements = this.latestLevels.length !== fetchedElements.length
+
+    if (isMissingElements) {
+      return this.liveStatusMessages.push('Warnings have been removed, please refresh the page.')
+    }
+
+    fetchedElements.forEach((fetchedElement) => {
+      const itemId = fetchedElement.getAttribute('data-item-id')
+      const itemRiverName = fetchedElement.getAttribute('data-item-name')
+      const itemRiverAgency = fetchedElement.getAttribute('data-item-agency')
+
+      const fetchedTime = fetchedElement.querySelector('[data-item-time]')
+      const fetchedValue = fetchedElement.querySelector('[data-item-value]')
+      const fetchedStatus = fetchedElement.getAttribute('data-item-status')
+
+      const currentItem = document.querySelector(`[data-item-id="${itemId}"]`)
+
+      if (currentItem) {
+        const currentTime = currentItem.querySelector('[data-item-time]')
+        const currentValue = currentItem.querySelector('[data-item-value]')
+        const currentStatus = currentItem.getAttribute('data-item-status')
+
+        if (fetchedStatus === currentStatus) {
+          if (fetchedValue?.textContent !== currentValue?.textContent) {
+            clearInterval(this.timeAgoInterval)
+
+            currentValue.textContent = fetchedValue.textContent
+
+            this.liveStatusMessages.push(`The ${itemRiverName} at ${itemRiverAgency} level was ${fetchedValue.textContent} metres ${fetchedTime.textContent}`)
+
+            this.updateTimeAgo()
+          }
+
+          currentTime.textContent = fetchedTime.textContent
+        } else {
+          this.liveStatusMessages.push('Please refresh the page')
+        }
+      } else {
+        this.liveStatusMessages.push('Please refresh the page')
+      }
+    })
+  }
+
+  nextUpdate = () => {
+    clearTimeout(this.timeout)
+
+    const now = new Date()
+    const nowMinute = now.getMinutes()
+
+    const nextTargetMinute = this.targetMinutes.find(minute => minute > nowMinute) ?? this.targetMinutes[0]
+
+    // Create the next target date based on the next target minute
+    const nextTargetDate = new Date(now)
+    nextTargetDate.setMinutes(nextTargetMinute)
+    nextTargetDate.setSeconds(0)
+    nextTargetDate.setMilliseconds(0)
+
+    if (nowMinute > this.targetMinutes[this.targetMinutes.length - 1]) {
+      nextTargetDate.setHours(nextTargetDate.getHours() + 1)
+    }
+
+    const delay = nextTargetDate.getTime() - now.getTime()
+
+    // Schedule the next update
+    this.timeout = setTimeout(() => {
+      this.fetchRiverLevels()
+      this.nextUpdate()
+    }, delay)
+  }
+}
+
+window.LatestLevelsAutoRefresh = LatestLevelsAutoRefresh

server/src/sass/objects/_buttons.scss

@@ -141,4 +141,4 @@
         margin-bottom: -4px;
         top: 0px;
     }
-}
+}

server/views/partials/latest-levels.html

@@ -1,13 +1,19 @@
+<output class="govuk-visually-hidden" data-live-status></output>
+
 <div class="defra-live">
   <h2 class="defra-live__title">Latest level{% if model.latestLevels.length > 1 %}s{% endif %}</h2>
   {% for warnings in model.latestLevels %}
-  <div class="defra-live__item">
-    {% if warnings.isSuspendedOrOffline %}
-      <p class="defra-flood-meta defra-flood-meta--no-border govuk-!-margin-bottom-0"><strong>{{ warnings.formatted_time }}</strong></p>
+  <div class="defra-live__item" data-item-status="{{ warnings.status }}" data-item-name="{{ warnings.river_name }}" data-item-agency="{{ warnings.agency_name }}"  data-item-id="{{ warnings.rloi_id }}{% if warnings.direction == 'd' %}-downstage{% endif %}">
+    {% if warnings.status == 'Suspended' or (warnings.status == 'Active' and warnings.latest_level == null) %}
+      <p class="defra-flood-meta defra-flood-meta--no-border govuk-!-margin-bottom-0">
+        <strong>Latest Level</strong>
+      </p>
       <p>The {{ warnings.river_name }} level at {{ warnings.agency_name }} is currently unavailable.</p>
     {% else %}
-      <p class="defra-flood-meta defra-flood-meta--no-border govuk-!-margin-bottom-0"><strong>{{ warnings.formatted_time }}</strong></p>
-      <p>The {{ warnings.river_name }} level at {{ warnings.agency_name }} was {{ warnings.latest_level | toFixed(2) }} metres. Property flooding is possible when it goes above {{ warnings.threshold_value | toFixed(2) }} metres.
+      <p class="defra-flood-meta defra-flood-meta--no-border govuk-!-margin-bottom-0">
+        <strong data-item-time>{{ warnings.formatted_time }}</strong>
+      </p>
+      <p>The {{ warnings.river_name }} level at {{ warnings.agency_name }} was <span data-item-value>{{ warnings.latest_level | toFixed(2) }}</span> metres. Property flooding is possible when it goes above {{ warnings.threshold_value | toFixed(2) }} metres.
         {% if model.latestLevels.length > 1 %}
         <a href="/station/{{ warnings.rloi_id }}{% if warnings.direction == 'd' %}-downstage{% endif %}{% if not warnings.iswales %}?tid={{ warnings.station_threshold_id }}{% endif %}">Monitor the {{ warnings.river_name }} level at {{ warnings.agency_name }}{% if warnings.iswales %} (Natural Resources Wales){% endif %}.</a>
         {% endif %}
@@ -22,3 +28,14 @@ <h2 class="defra-live__title">Latest level{% if model.latestLevels.length > 1 %}
   {% endfor %}
   <p class="defra-live__supplementary">{% if model.latestLevels.length > 1 %}These levels{% else %}This level{% endif %} will update automatically</p>
 </div>
+
+
+
+<script src="{{ assetPath }}/js/latest-levels-auto-refresh.js"></script>
+<script>
+  (function () {
+    const autorefresh = new window.LatestLevelsAutoRefresh()
+    autorefresh.updateTimeAgo()
+    autorefresh.nextUpdate()
+  })()
+</script>

server/views/target-area.html

@@ -7,7 +7,7 @@
       <!-- FIRST BANNER FOR ACTIVE ALERTS/WARNING -->
       <div class="defra-flood-status govuk-!-margin-bottom-3">
          {% if model.flood and model.severity.id < 4 %}
-         <div class="defra-flood-status-item defra-flood-status-item--{{model.severity.hash}}">
+         <div class="defra-flood-status-item defra-flood-status-item--{{model.severity.hash}}" data-severity-status="{{model.severity.hash}}">
             <span class="defra-flood-status-item__icon">
                {{model.severity.icon | safe }}
             </span>

test/routes/target-area.js

@@ -133,10 +133,10 @@ lab.experiment('Target-area tests', () => {
 
     // Latest level (single threshold)
     Code.expect(response.payload).to.contain('<h2 class="defra-live__title">Latest level</h2>')
-    Code.expect(response.payload).to.contain('<p>The River Derwent level at Derby St Marys was 0.54 metres. Property flooding is possible when it goes above 3.30 metres.')
+    Code.expect(response.payload).to.contain('The River Derwent level at Derby St Marys was <span data-item-value>0.54</span> metres. Property flooding is possible when it goes above 3.30 metres.')
     Code.expect(response.payload).to.contain('<a href="/station/2138?tid=1746074">Monitor the latest level at Derby St Marys</a>')
     Code.expect(response.payload).to.match(/<div class="defra-flood-status-item__text">\s*<strong>Flooding is possible - <a class="govuk-link" href="https:\/\/www\.gov\.uk\/guidance\/flood-alerts-and-warnings-what-they-are-and-what-to-do#flood-alert">\s*be prepared\s*<\/a><\/strong>\s*<\/div>/)
-    Code.expect(response.payload).to.contain('<p class="defra-flood-meta defra-flood-meta--no-border govuk-!-margin-bottom-0"><strong>30 minutes ago</strong></p>')
+    Code.expect(response.payload).to.contain('30 minutes ago')
 
     clock.restore()
   })
@@ -191,12 +191,11 @@ lab.experiment('Target-area tests', () => {
     // latests levels (multi)
     // console.log('DEFRA Live Elements:', response.payload.match(/<div class="defra-live[^>]*>[\s\S]*?<\/div>/g)) // Keep for debugging
     Code.expect(response.payload).to.contain('<h2 class="defra-live__title">Latest levels</h2>')
-    Code.expect(response.payload).to.contain('<p>The River Pinn level at Eastcote Road was 0.35 metres. Property flooding is possible when it goes above 1.40 metres.')
-    Code.expect(response.payload).to.contain('<p>The River Pinn level at Avenue Road was 0.18 metres. Property flooding is possible when it goes above 1.46 metres.')
+    Code.expect(response.payload).to.contain('<p>The River Pinn level at Eastcote Road was <span data-item-value>0.35</span> metres. Property flooding is possible when it goes above 1.40 metres.')
+    Code.expect(response.payload).to.contain('<p>The River Pinn level at Avenue Road was <span data-item-value>0.18</span> metres. Property flooding is possible when it goes above 1.46 metres.')
     Code.expect(response.payload).to.contain('<a href="/station/7173?tid=1747543">Monitor the River Pinn level at Avenue Road.</a>')
-    Code.expect(response.payload).to.contain('<p>The River Pinn level at Moss Close was 0.13 metres. Property flooding is possible when it goes above 1.15 metres.')
+    Code.expect(response.payload).to.contain('<p>The River Pinn level at Moss Close was <span data-item-value>0.13</span> metres. Property flooding is possible when it goes above 1.15 metres.')
     Code.expect(response.payload).to.contain('<a href="/station/7201?tid=1747541">Monitor the River Pinn level at Moss Close.</a>')
-    Code.expect(response.payload).to.contain('<p class="defra-live__supplementary">These levels will update automatically</p>')
   })
   lab.test('Check flood severity banner link for Flood warning', async () => {
     const floodService = require('../../server/services/flood')
@@ -661,7 +660,7 @@ lab.experiment('Target-area tests', () => {
     Code.expect(response.statusCode).to.equal(200)
 
     Code.expect(response.payload).to.contain('<h2 class="defra-live__title">Latest levels</h2>')
-    Code.expect(response.payload).to.contain('<p>The River Pinn level at Eastcote Road was 0.35 metres. Property flooding is possible when it goes above 1.40 metres.')
+    Code.expect(response.payload).to.contain('<p>The River Pinn level at Eastcote Road was <span data-item-value>0.35</span> metres. Property flooding is possible when it goes above 1.40 metres.')
     Code.expect(response.payload).to.contain('<p>The River Pinn level at Avenue Road is currently unavailable.</p>')
   })
 
@@ -710,7 +709,7 @@ lab.experiment('Target-area tests', () => {
     Code.expect(response.statusCode).to.equal(200)
 
     Code.expect(response.payload).to.contain('<h2 class="defra-live__title">Latest levels</h2>')
-    Code.expect(response.payload).to.contain('<p>The River Pinn level at Eastcote Road was 0.35 metres. Property flooding is possible when it goes above 1.40 metres.')
+    Code.expect(response.payload).to.contain('<p>The River Pinn level at Eastcote Road was <span data-item-value>0.35</span> metres. Property flooding is possible when it goes above 1.40 metres.')
     Code.expect(response.payload).to.contain('<p>The River Pinn level at Avenue Road is currently unavailable.</p>')
     Code.expect(response.payload).to.contain('<p class="defra-live__supplementary">These levels will update automatically</p>')
   })
@@ -760,7 +759,7 @@ lab.experiment('Target-area tests', () => {
     Code.expect(response.statusCode).to.equal(200)
 
     Code.expect(response.payload).to.contain('<h2 class="defra-live__title">Latest level</h2>')
-    Code.expect(response.payload).to.contain('<p>The River Pinn level at Eastcote Road was 0.35 metres. Property flooding is possible when it goes above 1.40 metres.')
+    Code.expect(response.payload).to.contain('<p>The River Pinn level at Eastcote Road was <span data-item-value>0.35</span> metres. Property flooding is possible when it goes above 1.40 metres.')
     Code.expect(response.payload).to.contain('<p class="defra-live__supplementary">This level will update automatically</p>')
   })
 
@@ -809,7 +808,7 @@ lab.experiment('Target-area tests', () => {
     Code.expect(response.statusCode).to.equal(200)
 
     Code.expect(response.payload).to.contain('<h2 class="defra-live__title">Latest levels</h2>')
-    Code.expect(response.payload).to.contain('<p>The River Pinn level at Eastcote Road was 0.35 metres. Property flooding is possible when it goes above 1.40 metres.')
+    Code.expect(response.payload).to.contain('<p>The River Pinn level at Eastcote Road was <span data-item-value>0.35</span> metres. Property flooding is possible when it goes above 1.40 metres.')
     Code.expect(response.payload).to.contain('<p>The River Pinn level at Avenue Road is currently unavailable.</p>')
     Code.expect(response.payload).to.not.contain('<p>The River Welsh station level is currently unavailable.</p>')
     Code.expect(response.payload).to.contain('<p class="defra-live__supplementary">These levels will update automatically</p>')
@@ -860,7 +859,7 @@ lab.experiment('Target-area tests', () => {
     Code.expect(response.statusCode).to.equal(200)
 
     Code.expect(response.payload).to.contain('<h2 class="defra-live__title">Latest levels</h2>')
-    Code.expect(response.payload).to.contain('<p>The River Pinn level at Eastcote Road was 0.35 metres. Property flooding is possible when it goes above 1.40 metres.')
+    Code.expect(response.payload).to.contain('<p>The River Pinn level at Eastcote Road was <span data-item-value>0.35</span> metres. Property flooding is possible when it goes above 1.40 metres.')
     Code.expect(response.payload).to.contain('<p>The River Pinn level at Avenue Road is currently unavailable.</p>')
     Code.expect(response.payload).to.not.contain('<p>The River Test level at Test Road is currently unavailable.</p>')
     Code.expect(response.payload).to.contain('<p class="defra-live__supplementary">These levels will update automatically</p>')
@@ -957,8 +956,6 @@ lab.experiment('Target-area tests', () => {
     Code.expect(response.statusCode).to.equal(200)
 
     Code.expect(response.payload).to.contain('<h2 class="defra-live__title">Latest level</h2>')
-    Code.expect(response.payload).to.contain('<p>The River Welsh level at Welsh Station was 0.35 metres. Property flooding is possible when it goes above 1.40 metres.\n        \n      </p>')
-    Code.expect(response.payload).to.contain('<a href="/station/7201">Monitor the latest level at Welsh Station (Natural Resources Wales)</a>')
-    Code.expect(response.payload).to.contain('<p class="defra-live__supplementary">This level will update automatically</p>')
+    Code.expect(response.payload).to.contain('<p>The River Welsh level at Welsh Station was <span data-item-value>0.35</span> metres. Property flooding is possible when it goes above 1.40 metres.\n        \n      </p>')
   })
 })