Merge pull request #2064 from alphagov/transition-downtime-message-js

Transition downtime message Javascript
alphagov · Feb 15, 2024 · ff58938 · ff58938
2 parents 5013ebb + ecc2fa0
commit ff58938
Show file tree

Hide file tree

Showing 7 changed files with 595 additions and 180 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -1,2 +1,4 @@
+//= require_directory ./modules
+
 //= require govuk_publishing_components/dependencies
 //= require govuk_publishing_components/all_components
diff --git a/...cripts/legacy_modules/downtime_message.js → ...legacy_modules/legacy_downtime_message.js b/...cripts/legacy_modules/downtime_message.js → ...legacy_modules/legacy_downtime_message.js
@@ -2,7 +2,7 @@
 
 (function (Modules) {
   'use strict'
-  Modules.DowntimeMessage = function () {
+  Modules.LegacyDowntimeMessage = function () {
     this.start = function (element) {
       var $startTimeFields = element.find('.js-start-time select')
       var $stopTimeFields = element.find('.js-stop-time select')

diff --git a/app/assets/javascripts/modules/downtime_message.js b/app/assets/javascripts/modules/downtime_message.js
@@ -0,0 +1,97 @@
+//= require govuk_publishing_components/vendor/polyfills/closest
+
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function DowntimeMessage ($module) {
+    this.module = $module
+  }
+
+  DowntimeMessage.prototype.init = function () {
+    const form = this.module
+
+    form.addEventListener('change', updateMessage)
+
+    function updateMessage () {
+      const fromDate = getDate('from')
+      const toDate = getDate('to')
+
+      let message = ''
+      if (isValidSchedule(fromDate, toDate)) {
+        message = downtimeMessage(fromDate, toDate)
+      }
+      form.elements.message.value = message
+    }
+
+    function getDate (selector) {
+      const day = form.elements[`${selector}-date[day]`].value
+      const month = form.elements[`${selector}-date[month]`].value
+      const year = form.elements[`${selector}-date[year]`].value
+      const hours = form.elements[`${selector}-time[hour]`].value
+      const minutes = form.elements[`${selector}-time[minute]`].value
+
+      // The Date class treats 1 as February, but in the UI we expect 1 to be January
+      const zeroIndexedMonth = parseInt(month) - 1
+      return new Date(year, zeroIndexedMonth, day, hours, minutes)
+    }
+
+    function isValidSchedule (fromDate, toDate) {
+      return toDate.getTime() > fromDate.getTime()
+    }
+
+    function downtimeMessage (fromDate, toDate) {
+      let message = 'This service will be unavailable from'
+      const fromDayText = getDayText(fromDate)
+      const fromTime = getTime(fromDate)
+      const toTime = getTime(toDate)
+      const toDayText = getDayText(toDate)
+      const sameDay = isSameDay(fromDate, toDate)
+
+      if (!isValidSchedule(fromDate, toDate)) {
+        return ''
+      }
+
+      if (sameDay) {
+        message = `${message} ${fromTime} to ${toTime} on ${fromDayText}.`
+      } else {
+        message = `${message} ${fromTime} on ${fromDayText} to ${toTime} on ${toDayText}.`
+      }
+
+      return message
+    }
+
+    function getTime (date) {
+      const time = date.toLocaleString(
+        'en-GB',
+        { hour: 'numeric', minute: 'numeric', hourCycle: 'h12' })
+      return time.replace(/:00/, '')
+        .replace(/ am/, 'am')
+        .replace(/ pm/, 'pm')
+        .replace(/12am/, 'midnight')
+        .replace(/12pm/, 'midday')
+    }
+
+    function getDayText (date) {
+      const dayText = date.toLocaleDateString(
+        'en-GB',
+        { weekday: 'long', month: 'long', day: 'numeric' }
+      )
+      return dayText.replace(/,/, '')
+    }
+
+    function isSameDay (fromDate, toDate) {
+      // Treat a midnight stop date as being on the same day as
+      // the hours before it. eg
+      // Unavailable from 10pm to midnight on Thursday 8 January
+      const toDateOneMinuteEarlier = new Date(toDate.valueOf())
+      toDateOneMinuteEarlier.setMinutes(toDate.getMinutes() - 1)
+
+      return fromDate.getFullYear() === toDateOneMinuteEarlier.getFullYear() &&
+        fromDate.getMonth() === toDateOneMinuteEarlier.getMonth() &&
+        fromDate.getDate() === toDateOneMinuteEarlier.getDate()
+    }
+  }
+
+  Modules.DowntimeMessage = DowntimeMessage
+})(window.GOVUK.Modules)
diff --git a/app/views/legacy_downtimes/edit.html.erb b/app/views/legacy_downtimes/edit.html.erb
@@ -12,7 +12,7 @@
   </h1>
 </div>
 
-<%= form_for @downtime, url: edition_downtime_path(@edition), html: { class: 'form well remove-top-margin', 'data-module': 'downtime-message' } do |f| %>
+<%= form_for @downtime, url: edition_downtime_path(@edition), html: { class: 'form well remove-top-margin', 'data-module': 'legacy-downtime-message' } do |f| %>
   <%= render 'form', f: f %>
   <%= f.submit 'Re-schedule downtime message', class: 'js-submit btn btn-success' %>
   <%= f.submit 'Cancel downtime', class: 'add-left-margin btn btn-danger' %>

diff --git a/app/views/legacy_downtimes/new.html.erb b/app/views/legacy_downtimes/new.html.erb
@@ -12,7 +12,7 @@
   </h1>
 </div>
 
-<%= form_for @downtime, url: edition_downtime_path(@edition), html: { class: 'form well remove-top-margin', 'data-module' => 'downtime-message' } do |f| %>
+<%= form_for @downtime, url: edition_downtime_path(@edition), html: { class: 'form well remove-top-margin', 'data-module' => 'legacy-downtime-message' } do |f| %>
   <%= render 'form', f: f %>
   <%= f.submit 'Schedule downtime message', class: 'js-submit btn btn-success' %>
 <% end %>