Add imaging views and bits of medical information

Author: edwardhorsford

app/assets/sass/_utils.scss

@@ -1,3 +1,14 @@
 .app-nowrap {
   white-space: nowrap;
 }
+
+.app-hidden {
+  display: none;
+  opacity: 0;
+}
+
+
+.app-image-card {
+  opacity: 1;
+  transition: opacity 0.5s ease-in;
+}

app/filters/nunjucks.js

@@ -2,12 +2,12 @@
 
 
 
-const log = (a, description=false) => {
+const log = (a, description=null) => {
 
   if (description){
     description = `console.log("${description}:");`
   }
-  return `<script>${description}console.log(${JSON.stringify(a, null, '\t')});</script>`
+  return `<script>${description ? description : ""}console.log(${JSON.stringify(a, null, '\t')});</script>`
 }
 
 module.exports = {

app/views/_includes/event-header.njk

@@ -9,4 +9,6 @@
 
 <p class="app-text-grey"><span>NHS Number: {{ participant.medicalInformation.nhsNumber | formatNhsNumber }}</span><span class="nhsuk-u-margin-left-4">SX Number: {{ participant.sxNumber }}</span></p>
 
-<p class="nhsuk-u-margin-bottom-4"><a href="/participants/{{ participant.id }}">View participant record</a></p>
+{# <p class="nhsuk-u-margin-bottom-4"><a href="/participants/{{ participant.id }}">View participant record</a></p> #}
+
+<p class="nhsuk-u-margin-bottom-4"><a href="#">View participant record</a></p>

app/views/_templates/layout-app.html

@@ -44,7 +44,7 @@
         current: true if navActive == "clinics"
       },
       {
-        url: "/participants",
+        url: "#",
         label: "Participants",
         current: true if navActive == "participants"
       },

app/views/dashboard.html

@@ -38,6 +38,7 @@ <h1>
       heading: "Participants",
       headingClasses: "nhsuk-heading-m",
       href: "/participants",
+      href: "#",
       descriptionHtml: participantCardDescriptionHtml
     }) }}
   </li>

app/views/events/mammography/attended-not-screened-reason.html

@@ -2,9 +2,9 @@
 {% extends 'layout-app.html' %}
 
 
-{% set pageHeading = "Attended not screened reason" %}
+{% set pageHeading = "Screening suspended" %}
 
-{% set gridColumn = "nhsuk-grid-column-full" %}
+{# {% set gridColumn = "nhsuk-grid-column-full" %} #}
 
 {% set formAction = './attended-not-screened-answer' %}
 
@@ -28,6 +28,40 @@ <h1 class="nhsuk-heading-l">
     {{ pageHeading }}
   </h1>
 
+  {{ textarea({
+    name: "example",
+    id: "example",
+    label: {
+      text: "Details of why screening cannot proceed"
+    }
+  }) }}
+
+  {{ radios({
+    idPrefix: "example",
+    name: "example",
+    fieldset: {
+      legend: {
+        text: "Follow-up action",
+        classes: "nhsuk-fieldset__legend--s",
+        isPageHeading: false
+      }
+    },
+    items: [
+      {
+        value: "yes",
+        text: "Reschedule appointment"
+      },
+      {
+        value: "no",
+        text: "Review with clinician"
+      },
+      {
+        value: "no",
+        text: "Other"
+      }
+    ]
+  }) }}
+
 
   {{ button({
     text: "Save"

app/views/events/mammography/imaging.html

@@ -8,11 +8,41 @@
 
 {% set formAction = './complete' %}
 
+{% set images = [
+  {
+    view: "Cranio-caudal",
+    side: "Right"
+  },
+  {
+    view: "Dutch oblique",
+    side: "Right"
+  },
+  {
+    view: "Cranio-caudal",
+    side: "Left"
+  },
+  {
+    view: "Dutch oblique",
+    side: "Left"
+  }
+] %}
+
 {# {% set back = {
   href: "/clinics/" + clinicId,
   text: "Back to clinic"
 } %}
  #}
+{# Loading state macro #}
+{% macro loadingSpinner() %}
+<div id="loading-spinner" class="">
+  <div class="nhsuk-loader">
+    <span class="nhsuk-u-visually-hidden">Loading images...</span>
+  </div>
+  <p class="nhsuk-u-margin-top-3 nhsuk-u-secondary-text-color">Waiting for mammogram images...</p>
+</div>
+{% endmacro %}
+
+
 {% macro makeImage(params) %}
 
   {% set summaryListHtml %}
@@ -106,7 +136,7 @@
     heading: "Image " + params.index,
     headingLevel: "3",
     descriptionHtml: summaryListHtml,
-    classes: "nhsuk-u-margin-bottom-3"
+    classes: "nhsuk-u-margin-bottom-3 app-image-card app-hidden"
   }) }}
 
 {% endmacro %}
@@ -124,24 +154,8 @@ <h1 class="nhsuk-heading-l">
     {{ pageHeading }}
   </h1>
 
-  {% set images = [
-    {
-      view: "Cranio-caudal",
-      side: "Right"
-    },
-    {
-      view: "Dutch oblique",
-      side: "Right"
-    },
-    {
-      view: "Cranio-caudal",
-      side: "Left"
-    },
-    {
-      view: "Dutch oblique",
-      side: "Left"
-    }
-  ] %}
+  {# Show loading spinner initially #}
+  {{ loadingSpinner() }}
 
   <div class="nhsuk-u-margin-bottom-4">
     {% for image in images %}
@@ -154,46 +168,88 @@ <h1 class="nhsuk-heading-l">
     {% endfor %}
   </div>
 
-  <div class="nhsuk-grid-row">
-    <div class="nhsuk-grid-column-two-thirds">
-      {% set reasonHtml %}
-        {{ textarea({
-          name: "partialMammographyReason",
-          id: "partialMammographyReason",
-          label: {
-            text: "Reason for partial mammography"
-          }
-        }) }}
-      {% endset %}
-      
-      {{ checkboxes({
-        idPrefix: "partialMammography",
-        name: "partialMammography",
-        classes: "nhsuk-u-margin-bottom-5",
-        _fieldset: {
-          legend: {
-            text: "How would you like to be contacted?",
-            classes: "nhsuk-fieldset__legend--l",
-            isPageHeading: true
-          }
-        },
-        items: [
-          {
-            value: "partial",
-            text: "Partial mammography only",
-            
-            conditional: {
-              html: reasonHtml
+  <div class='app-hidden' id="imaging-form">
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-two-thirds">
+        {% set reasonHtml %}
+          {{ textarea({
+            name: "partialMammographyReason",
+            id: "partialMammographyReason",
+            label: {
+              text: "Reason for partial mammography"
             }
-          }
-        ]
-      }) }}
+          }) }}
+        {% endset %}
+        
+        {{ checkboxes({
+          idPrefix: "partialMammography",
+          name: "partialMammography",
+          classes: "nhsuk-u-margin-bottom-5",
+          _fieldset: {
+            legend: {
+              text: "How would you like to be contacted?",
+              classes: "nhsuk-fieldset__legend--l",
+              isPageHeading: true
+            }
+          },
+          items: [
+            {
+              value: "partial",
+              text: "Partial mammography only",
+              
+              conditional: {
+                html: reasonHtml
+              }
+            }
+          ]
+        }) }}
 
-      {{ button({
-        text: "Confirm all images and complete imaging"
-      }) }}
+        {{ button({
+          text: "Confirm all images and complete imaging"
+        }) }}
+      </div>
     </div>
   </div>
 
+  <p><a href="./attended-not-screened-reason">Screening cannot proceed</a></p>
+
 {% endblock %}
 
+{% block pageScripts %}
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const loadingSpinner = document.getElementById('loading-spinner')
+  const imageCards = document.querySelectorAll('.app-image-card')
+  const imagingForm = document.getElementById('imaging-form')
+  let lastLoadTime = 0
+
+  // Hide spinner after initial delay
+  setTimeout(() => {
+    loadingSpinner.classList.add('app-hidden')
+    
+    // Show each image sequentially
+    imageCards.forEach((card, index) => {
+      const loadTime = 1000 + (index * 1600)
+      
+      setTimeout(() => {
+        card.classList.remove('app-hidden')
+        // Add fade-in effect
+        card.style.opacity = 0
+        card.style.transition = 'opacity 0.5s ease-in'
+        setTimeout(() => card.style.opacity = 1, 50)
+
+        // Show form after first image is loaded
+        if (index === 0) {
+          setTimeout(() => {
+            imagingForm.classList.remove('app-hidden')
+            imagingForm.style.opacity = 0
+            imagingForm.style.transition = 'opacity 0.5s ease-in'
+            setTimeout(() => imagingForm.style.opacity = 1, 50)
+          }, 400) // Show form slightly after first image
+        }
+      }, loadTime)
+    })
+  }, 2000)
+})
+</script>
+{% endblock %}