From 0f37b7debd015d068729121b14191af3c7f7918b Mon Sep 17 00:00:00 2001 From: Mat Johnson Date: Fri, 2 Oct 2026 13:05:20 +0100 Subject: [PATCH 1/4] Create shell of iterated 1 day clinic --- .../create-clinic-rev-1-publish-check.html | 35 ++++++--- .../create-clinic-rev-1-set-timings.html | 60 +++------------ .../create-clinic-rev-1-slot-structure.html | 76 +++++++++++++++++++ .../create-clinic-rev-1.html | 68 +++++++++++++++-- 4 files changed, 173 insertions(+), 66 deletions(-) create mode 100644 app/views/september-iteration-2/create-clinic-rev-1-slot-structure.html diff --git a/app/views/september-iteration-2/create-clinic-rev-1-publish-check.html b/app/views/september-iteration-2/create-clinic-rev-1-publish-check.html index fb7bed5c..d56635dd 100644 --- a/app/views/september-iteration-2/create-clinic-rev-1-publish-check.html +++ b/app/views/september-iteration-2/create-clinic-rev-1-publish-check.html @@ -24,22 +24,26 @@

  1. - - {{ tickSvg | safe }} - + 1 Clinic details
  2. 2 - Set date and time + Clinic session times + +
    3. +
  3. + + 3 + Slot structure
  4. - 3 - Save clinic + 4 + Check and confirm
@@ -58,7 +62,8 @@

Save clinic

Clinic details
- {{ data.clinicName }} + {{ data.clinicName }}
+ {{ data.clinicDate | formatDate }}
Change clinic details @@ -66,15 +71,25 @@

Save clinic

- Date and time + Clinic session times
- {{ data.clinicDate | formatDate }}
{{ data.newSession.startTime.hour | zeroPad }}:{{ data.newSession.startTime.minute | zeroPad }} to {{ data.newSession.endTime.hour | zeroPad }}:{{ data.newSession.endTime.minute | zeroPad }}
{{ data.newSession.duration }} minute slot length
- Change date and time + Change session times +
+ +
+
+ Slot structure +
+
+ stuff +
+
+ Change slot structure
diff --git a/app/views/september-iteration-2/create-clinic-rev-1-set-timings.html b/app/views/september-iteration-2/create-clinic-rev-1-set-timings.html index 7949e0d4..2be0299d 100644 --- a/app/views/september-iteration-2/create-clinic-rev-1-set-timings.html +++ b/app/views/september-iteration-2/create-clinic-rev-1-set-timings.html @@ -26,22 +26,26 @@

  1. - - 1 - + 1 Clinic details
  2. 2 - Set date and time + Clinic session times
  3. 3 - Save clinic + Slot structure + +
    4. +
  4. + + 4 + Check and confirm
@@ -88,51 +92,9 @@

}) }} {% endif %} -

Set date and time

- -
+

Clinic session times

-
-
- - Date of clinic - -
- For example, 18 6 2026 -
- {% if errorState === "true" %} - - Error: Date of clinic must be given a day, month, and year - - {% endif %} -
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
-
+
diff --git a/app/views/september-iteration-2/create-clinic-rev-1-slot-structure.html b/app/views/september-iteration-2/create-clinic-rev-1-slot-structure.html new file mode 100644 index 00000000..fc6e9d8f --- /dev/null +++ b/app/views/september-iteration-2/create-clinic-rev-1-slot-structure.html @@ -0,0 +1,76 @@ +{% extends 'layout.html' %} + +{% set errorState = "false" %} + +{% set pageName = "Set date and time" %} + +{% block content %} + +{% set tickSvg %} + +{% endset %} + +
+
+ +
+ +
+ +
+
+
+ + {% if errorState === "true" %} + {{ errorSummary({ + titleText: "There is a problem", + errorList: [ + { + text: "Date of clinic must be given a day, month, and year", + href: "#" + } + ] + }) }} + {% endif %} + +

Slot structure

+
+
+
+ +{% endblock %} \ No newline at end of file diff --git a/app/views/september-iteration-2/create-clinic-rev-1.html b/app/views/september-iteration-2/create-clinic-rev-1.html index b246513c..22e713fc 100644 --- a/app/views/september-iteration-2/create-clinic-rev-1.html +++ b/app/views/september-iteration-2/create-clinic-rev-1.html @@ -24,24 +24,28 @@

Create day clinic

    -
  1. +
  2. - - 1 - + 1 Clinic details
  3. 2 - Set date and time + Clinic session times
  4. 3 - Save clinic + Slot structure + +
    5. +
  5. + + 4 + Check and confirm
@@ -59,6 +63,14 @@

{ text: "Clinic must be given a name", href: "#" + }, + { + text: "Date of clinic must be given a day, month, and year", + href: "#" + }, + { + text: "Date of clinic must be in the future", + href: "#" } ] }) }} @@ -70,7 +82,7 @@

Clinic details

{% if errorState === "true" %} @@ -80,6 +92,48 @@

Clinic details

+
+
+ + Clinic session date + +
+ For example, 18 6 2026 +
+ {% if errorState === "true" %} + + Error: Date of clinic must be given a day, month, and year + + {% endif %} +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+ From 17ce11c619bc456e18ff9cb4ac5dc21d39b2354f Mon Sep 17 00:00:00 2001 From: Mat Johnson Date: Fri, 2 Oct 2026 14:46:55 +0100 Subject: [PATCH 2/4] Shell completed for first round --- .../sass/components/_session-slots.scss | 53 +++++++++ app/assets/sass/main.scss | 3 +- .../create-clinic-rev-1-publish-check.html | 25 ++-- .../create-clinic-rev-1-set-timings.html | 4 +- .../create-clinic-rev-1-slot-structure.html | 111 +++++++++++++++--- .../create-clinic-rev-1.html | 2 +- 6 files changed, 159 insertions(+), 39 deletions(-) create mode 100644 app/assets/sass/components/_session-slots.scss diff --git a/app/assets/sass/components/_session-slots.scss b/app/assets/sass/components/_session-slots.scss new file mode 100644 index 00000000..7e7c0383 --- /dev/null +++ b/app/assets/sass/components/_session-slots.scss @@ -0,0 +1,53 @@ +@use "nhsuk-frontend/dist/nhsuk/core" as *; + +.slot { + background-color: nhsuk-colour("white"); + border: 1px solid $nhsuk-input-border-colour; + padding-left: nhsuk-spacing(2); + user-select: none; + @include nhsuk-responsive-margin(2, "bottom"); + min-height: nhsuk-px-to-rem(46px); +} + +.slot-end { font-size: 16px; margin-right: 1rem; } +.slot-tag { margin-left: 1rem; } + +.slot.is-hold {} +.slot.is-staff-break { + background: transparent; + border-style: dashed; +} +.slot.is-special-appointment {} + +.slot.is-merged { + border-bottom: none; + margin-bottom: 0; +} +.slot.is-merged-child { + border-top: 1px dashed #212b32; + height: 42px; +} +.slot.is-merged-child > .nhsuk-checkboxes__item, +.slot.is-merged-child > div { + display: none; +} +.slot.is-merged-last-child { + border-bottom: 1px solid #212b32; + margin-bottom: 12px; +} + +.slot.is-staff-break.is-merged-last-child { + border-bottom-style: dashed; +} + +.slot.is-merged-child > .slot-time, +.slot.is-merged-child > .slot-end { + display: none; +} + +.slot .nhsuk-checkboxes__label { + width: 100%; +} + +.panel-item { display: block; cursor: pointer; } +.panel-item.disabled { opacity: 0.38; cursor: default; pointer-events: none; } diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss index a3b1d1be..8e9f86b3 100755 --- a/app/assets/sass/main.scss +++ b/app/assets/sass/main.scss @@ -20,8 +20,6 @@ $nhsuk-gutter: 24px, // Reduce layout spacing points (5–9). Points 0–4 stay at NHS defaults. - // Checkbox and radio geometry is fixed in px rather than driven by the spacing scale, - // and _compact.scss applies the --small variant to all checkboxes/radios. $nhsuk-spacing-points: ( 0: 0, 1: 4px, @@ -93,6 +91,7 @@ @forward "components/participant-table"; //@forward "components/participant-search"; @forward "components/progress-bar"; +@forward "components/session-slots"; @forward "components/template-card"; @forward "components/template-preview-dialog"; @forward "components/workflow"; diff --git a/app/views/september-iteration-2/create-clinic-rev-1-publish-check.html b/app/views/september-iteration-2/create-clinic-rev-1-publish-check.html index d56635dd..c5d66763 100644 --- a/app/views/september-iteration-2/create-clinic-rev-1-publish-check.html +++ b/app/views/september-iteration-2/create-clinic-rev-1-publish-check.html @@ -23,22 +23,22 @@

  1. - + 1 Clinic details - +
  2. - + 2 Clinic session times - +
  3. - + 3 Slot structure - +
  4. @@ -54,7 +54,7 @@

    -

    Save clinic

    +

    Check and confirm clinic

    @@ -86,20 +86,13 @@

    Save clinic

    Slot structure
    - stuff + {{ data.newSession.totalSlots }} bookable slots
    + 00 slots set as staff break
    Change slot structure
    -
    -
    - Total capacity -
    -
    - {{ data.newSession.totalSlots }} slots -
    -

    diff --git a/app/views/september-iteration-2/create-clinic-rev-1-set-timings.html b/app/views/september-iteration-2/create-clinic-rev-1-set-timings.html index 2be0299d..a9ebca21 100644 --- a/app/views/september-iteration-2/create-clinic-rev-1-set-timings.html +++ b/app/views/september-iteration-2/create-clinic-rev-1-set-timings.html @@ -25,10 +25,10 @@

    1. - + 1 Clinic details - +
    2. diff --git a/app/views/september-iteration-2/create-clinic-rev-1-slot-structure.html b/app/views/september-iteration-2/create-clinic-rev-1-slot-structure.html index fc6e9d8f..802928b6 100644 --- a/app/views/september-iteration-2/create-clinic-rev-1-slot-structure.html +++ b/app/views/september-iteration-2/create-clinic-rev-1-slot-structure.html @@ -25,16 +25,16 @@

      1. - + 1 Clinic details - +
      2. - + 2 Clinic session times - +
      3. @@ -53,23 +53,98 @@

    +
    -
    +
    + +
    +

    Slot structure

    +

    + Session time + 10:00 to 17:00 +

    +
    - {% if errorState === "true" %} - {{ errorSummary({ - titleText: "There is a problem", - errorList: [ - { - text: "Date of clinic must be given a day, month, and year", - href: "#" - } - ] - }) }} - {% endif %} +
    +
    +
    -

    Slot structure

    -
    +
    +
    + + +
    +
    + +
    +
    + + +
    +
    + +
    +
    + + +
    +
    + +
    +
    + + +
    +
    + +
    +
    + + +
    +
    + +
    +
    +
    +
    +

    With selected slots:

    + +
    + +
    +
    +

    + 50 bookable slots +

    +

    + +

    +
    +
    + +

diff --git a/app/views/september-iteration-2/create-clinic-rev-1.html b/app/views/september-iteration-2/create-clinic-rev-1.html index 22e713fc..4c6f5b1e 100644 --- a/app/views/september-iteration-2/create-clinic-rev-1.html +++ b/app/views/september-iteration-2/create-clinic-rev-1.html @@ -89,7 +89,7 @@

Clinic details

Error: Clinic must be given a name {% endif %} - +
From 2cc73aba687ed3a41b135c11629ab7998c81f046 Mon Sep 17 00:00:00 2001 From: Mat Johnson Date: Fri, 2 Oct 2026 17:48:28 +0100 Subject: [PATCH 3/4] Wiring up a basic demo --- .../sass/components/_session-slots.scss | 5 +- app/data/session-data-defaults.js | 1 + app/routes/mission-1.js | 224 ++++++++++++++++++ .../create-clinic-rev-1-publish-check.html | 4 +- .../create-clinic-rev-1-set-timings.html | 83 +++---- .../create-clinic-rev-1-slot-structure.html | 83 +++---- .../create-clinic-rev-1.html | 46 ++-- 7 files changed, 310 insertions(+), 136 deletions(-) diff --git a/app/assets/sass/components/_session-slots.scss b/app/assets/sass/components/_session-slots.scss index 7e7c0383..487bcef4 100644 --- a/app/assets/sass/components/_session-slots.scss +++ b/app/assets/sass/components/_session-slots.scss @@ -9,7 +9,10 @@ min-height: nhsuk-px-to-rem(46px); } -.slot-end { font-size: 16px; margin-right: 1rem; } +.slot-end { + @include nhsuk-font-size(16); + margin-right: 1rem; +} .slot-tag { margin-left: 1rem; } .slot.is-hold {} diff --git a/app/data/session-data-defaults.js b/app/data/session-data-defaults.js index 8003d2d0..45ef5a4b 100644 --- a/app/data/session-data-defaults.js +++ b/app/data/session-data-defaults.js @@ -14,6 +14,7 @@ module.exports = { clinicCapacityPercentBooked: "0", clinicCapacityAvailable: "10", clinicCapacityTotal: "10", + missionOne: {}, createCapacityFromZero: { schedules: [], selectedDays: [], diff --git a/app/routes/mission-1.js b/app/routes/mission-1.js index c0ea97cd..cefbaefb 100644 --- a/app/routes/mission-1.js +++ b/app/routes/mission-1.js @@ -8,6 +8,31 @@ const router = express.Router() */ +const isWholeNumber = str => /^\d+$/.test(str) + +// Checks a { day, month, year } object has numeric values for each field, regardless of whether they form a real date +const hasDateFields = (dateObj) => + Boolean(dateObj) && isWholeNumber(dateObj.day) && isWholeNumber(dateObj.month) && isWholeNumber(dateObj.year) + +// Parses a { day, month, year } object into a Date, or null if invalid +const parseDateFields = (dateObj) => { + if (!hasDateFields(dateObj)) { + return null + } + + const day = parseInt(dateObj.day, 10) + const month = parseInt(dateObj.month, 10) + // Treat 2-digit years as shorthand for the 2000s, eg "26" becomes 2026 + const year = dateObj.year.length === 2 ? parseInt(`20${dateObj.year}`, 10) : parseInt(dateObj.year, 10) + const date = new Date(year, month - 1, day) + + if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) { + return null + } + + return date +} + // simple search router.get('/september-iteration-2/clickthru/04a-example-search-result', function (req, res) { const query = (req.query['search-params'] || '').trim() @@ -61,6 +86,205 @@ router.get('/action/unstage/:participantId', function (req, res) { res.redirect(req.get('referer') || '/september-iteration-2/clickthru/04-choose-participants') }); +// validating clinic name and session date for 1 day clinic creation +router.post('/september-iteration-2/create-clinic-rev-1', function (req, res) { + const clinicName = (req.body.clinicName || '').trim() + const clinicDate = req.body.clinicDate || {} + + if (typeof req.session.data.missionOne !== 'object') { + req.session.data.missionOne = {} + } + req.session.data.missionOne.clinicName = clinicName + req.session.data.missionOne.clinicDate = clinicDate + + const errors = {} + + if (!clinicName) { + errors.clinicName = 'Clinic must be given a name' + } + + if (!hasDateFields(clinicDate)) { + errors.clinicDate = 'Date of clinic must be given a day, month, and year' + } else { + const parsedDate = parseDateFields(clinicDate) + const today = new Date() + today.setHours(0, 0, 0, 0) + + if (!parsedDate || parsedDate <= today) { + errors.clinicDate = 'Date of clinic must be in the future' + } + } + + if (Object.keys(errors).length > 0) { + return res.render('september-iteration-2/create-clinic-rev-1', { + errors + }) + } + + res.redirect('/september-iteration-2/create-clinic-rev-1-set-timings') +}) + +// validating clinic session times for 1 day clinic creation +router.post('/september-iteration-2/create-clinic-rev-1-set-timings', function (req, res) { + const newSession = req.body.newSession || {} + const startTime = newSession.startTime || {} + const endTime = newSession.endTime || {} + + const startHourStr = (startTime.hour || '').trim() + const startMinuteStr = (startTime.minute || '').trim() + const endHourStr = (endTime.hour || '').trim() + const endMinuteStr = (endTime.minute || '').trim() + const durationStr = (newSession.duration || '').trim() + + const startHour = parseInt(startHourStr, 10) + const startMinute = parseInt(startMinuteStr, 10) + const endHour = parseInt(endHourStr, 10) + const endMinute = parseInt(endMinuteStr, 10) + const duration = parseInt(durationStr, 10) + + const validStartHour = isWholeNumber(startHourStr) && startHour >= 0 && startHour <= 23 + const validStartMinute = isWholeNumber(startMinuteStr) && startMinute >= 0 && startMinute <= 59 + const validEndHour = isWholeNumber(endHourStr) && endHour >= 0 && endHour <= 23 + const validEndMinute = isWholeNumber(endMinuteStr) && endMinute >= 0 && endMinute <= 59 + + const errors = {} + + if (!validStartHour || !validStartMinute) { + errors.startTime = 'Start time must be entered, in 24 hour format' + } + + if (!validEndHour || !validEndMinute) { + errors.endTime = 'End time must be entered, in 24 hour format' + } + + if (!isWholeNumber(durationStr) || duration <= 0) { + errors.duration = 'Slot length must be entered, in minutes' + } + + if (!errors.startTime && !errors.endTime) { + const startTotalMinutes = startHour * 60 + startMinute + const endTotalMinutes = endHour * 60 + endMinute + if (endTotalMinutes <= startTotalMinutes) { + errors.startTime = 'Start time must be earlier than end time' + errors.endTime = 'End time must be later than start time' + } + } + + if (typeof req.session.data.missionOne !== 'object') { + req.session.data.missionOne = {} + } + req.session.data.missionOne.startTime = startTime + req.session.data.missionOne.endTime = endTime + req.session.data.missionOne.duration = durationStr + + if (Object.keys(errors).length > 0) { + return res.render('september-iteration-2/create-clinic-rev-1-set-timings', { + errors + }) + } + + res.redirect('/september-iteration-2/create-clinic-rev-1-slot-structure') +}) + +// Formats a total minutes-from-midnight value as e.g. "10:08" +const formatClock = (totalMinutes) => { + const hour = Math.floor(totalMinutes / 60) % 24 + const minute = totalMinutes % 60 + return `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}` +} + +// Builds the slot checkbox data for a clinic session, flagging any slots marked as staff breaks +const buildSessionSlots = (missionOne) => { + const startTime = missionOne.startTime || {} + const endTime = missionOne.endTime || {} + + const startMinutes = (parseInt(startTime.hour, 10) || 0) * 60 + (parseInt(startTime.minute, 10) || 0) + const endMinutes = (parseInt(endTime.hour, 10) || 0) * 60 + (parseInt(endTime.minute, 10) || 0) + const duration = parseInt(missionOne.duration, 10) || 0 + const staffBreakSlots = (missionOne.staffBreakSlots || []).map(Number).filter(Number.isInteger) + + const slots = [] + + if (duration > 0 && endMinutes > startMinutes) { + const slotCount = Math.floor((endMinutes - startMinutes) / duration) + + for (let i = 0; i < slotCount; i++) { + const slotStartMinutes = startMinutes + (i * duration) + slots.push({ + index: i, + startLabel: formatClock(slotStartMinutes), + endLabel: formatClock(slotStartMinutes + duration), + isStaffBreak: staffBreakSlots.includes(i) + }) + } + } + + const bookableSlotCount = slots.filter((slot) => !slot.isStaffBreak).length + const staffBreakSlotCount = slots.filter((slot) => slot.isStaffBreak).length + missionOne.bookableSlotCount = bookableSlotCount + missionOne.staffBreakSlotCount = staffBreakSlotCount + + return { + slots, + bookableSlotCount, + staffBreakSlotCount, + sessionStartLabel: formatClock(startMinutes), + sessionEndLabel: formatClock(endMinutes) + } +} + +// computing the real slot structure from the submitted session times for 1 day clinic creation +router.get('/september-iteration-2/create-clinic-rev-1-slot-structure', function (req, res) { + const missionOne = req.session.data.missionOne || {} + + res.render('september-iteration-2/create-clinic-rev-1-slot-structure', buildSessionSlots(missionOne)) +}) + +// marking the selected slots as staff breaks for 1 day clinic creation +router.post('/september-iteration-2/create-clinic-rev-1-slot-structure/mark-staff-break', function (req, res) { + const missionOne = req.session.data.missionOne || {} + // nhsuk-frontend's checkboxes component submits an "_unchecked" sentinel for every untoggled box, so filter down to real indices + const selectedSlots = [].concat(req.body.computedSlots || []).map(Number).filter(Number.isInteger) + + const errors = {} + if (selectedSlots.length === 0) { + errors.slots = 'you need to select some slots' + } + + if (Object.keys(errors).length > 0) { + return res.render('september-iteration-2/create-clinic-rev-1-slot-structure', Object.assign({ errors }, buildSessionSlots(missionOne))) + } + + const staffBreakSlots = new Set((missionOne.staffBreakSlots || []).map(Number).filter(Number.isInteger)) + selectedSlots.forEach((index) => staffBreakSlots.add(index)) + missionOne.staffBreakSlots = Array.from(staffBreakSlots) + req.session.data.missionOne = missionOne + + res.redirect('/september-iteration-2/create-clinic-rev-1-slot-structure') +}) + +// clearing staff break status from the selected slots for 1 day clinic creation +router.post('/september-iteration-2/create-clinic-rev-1-slot-structure/clear-slot-type', function (req, res) { + const missionOne = req.session.data.missionOne || {} + // nhsuk-frontend's checkboxes component submits an "_unchecked" sentinel for every untoggled box, so filter down to real indices + const selectedSlots = [].concat(req.body.computedSlots || []).map(Number).filter(Number.isInteger) + + const errors = {} + if (selectedSlots.length === 0) { + errors.slots = 'you need to select some slots' + } + + if (Object.keys(errors).length > 0) { + return res.render('september-iteration-2/create-clinic-rev-1-slot-structure', Object.assign({ errors }, buildSessionSlots(missionOne))) + } + + const selectedSet = new Set(selectedSlots) + missionOne.staffBreakSlots = (missionOne.staffBreakSlots || []).map(Number).filter(Number.isInteger).filter((index) => !selectedSet.has(index)) + req.session.data.missionOne = missionOne + + res.redirect('/september-iteration-2/create-clinic-rev-1-slot-structure') +}) + // creating and passing Total Slots through for 1 day clinic creation router.post('/september-iteration-2/create-clinic-rev-1-publish-check', function (req, res) { const newSession = req.session.data.newSession || {} diff --git a/app/views/september-iteration-2/create-clinic-rev-1-publish-check.html b/app/views/september-iteration-2/create-clinic-rev-1-publish-check.html index c5d66763..a26be8ff 100644 --- a/app/views/september-iteration-2/create-clinic-rev-1-publish-check.html +++ b/app/views/september-iteration-2/create-clinic-rev-1-publish-check.html @@ -86,8 +86,8 @@

Check and confirm clinic

Slot structure
- {{ data.newSession.totalSlots }} bookable slots
- 00 slots set as staff break + {{ data.missionOne.bookableSlotCount }} bookable slots
+ {{ data.missionOne.staffBreakSlotCount }} slots set as staff break
Change slot structure diff --git a/app/views/september-iteration-2/create-clinic-rev-1-set-timings.html b/app/views/september-iteration-2/create-clinic-rev-1-set-timings.html index a9ebca21..c221d5ae 100644 --- a/app/views/september-iteration-2/create-clinic-rev-1-set-timings.html +++ b/app/views/september-iteration-2/create-clinic-rev-1-set-timings.html @@ -1,6 +1,6 @@ {% extends 'layout.html' %} -{% set errorState = "false" %} +{% set errorState = "true" if errors else "false" %} {% set pageName = "Set date and time" %} @@ -57,46 +57,27 @@

{% if errorState === "true" %} + {% set errorList = [] %} + {% if errors.startTime %} + {% set errorList = errorList.concat([{ text: errors.startTime, href: "#start-time-hour" }]) %} + {% endif %} + {% if errors.endTime %} + {% set errorList = errorList.concat([{ text: errors.endTime, href: "#end-time-hour" }]) %} + {% endif %} + {% if errors.duration %} + {% set errorList = errorList.concat([{ text: errors.duration, href: "#duration" }]) %} + {% endif %} {{ errorSummary({ titleText: "There is a problem", - errorList: [ - { - text: "Date of clinic must be given a day, month, and year", - href: "#" - }, - { - text: "Date of clinic must be in the future", - href: "#" - }, - { - text: "Start time must be entered, in 24 hour format", - href: "#" - }, - { - text: "End time must be entered, in 24 hour format", - href: "#" - }, - { - text: "End time must be later than start time", - href: "#" - }, - { - text: "Start time must be earlier than end time", - href: "#" - }, - { - text: "Slot length must be entered, in minutes", - href: "#" - } - ] + errorList: errorList }) }} {% endif %}

Clinic session times

-
+ -
+
Session start time @@ -104,9 +85,9 @@

Clinic session times

Use 24 hour format, for example, 10:00
- {% if errorState === "true" %} + {% if errors and errors.startTime %} - Error: Start time must be entered, in 24 hour format + Error: {{ errors.startTime }} {% endif %} @@ -116,8 +97,8 @@

Clinic session times

- +
@@ -126,15 +107,15 @@

Clinic session times

- +

-
+
Session end time @@ -142,9 +123,9 @@

Clinic session times

Use 24 hour format, for example, 17:00
- {% if errorState === "true" %} + {% if errors and errors.endTime %} - Error: End time must be entered, in 24 hour format + Error: {{ errors.endTime }} {% endif %} @@ -154,8 +135,8 @@

Clinic session times

- +
@@ -163,26 +144,26 @@

Clinic session times

- +
-
+
- {% if errorState === "true" %} + {% if errors and errors.duration %} - Error: Slot length must be entered, in minutes + Error: {{ errors.duration }} {% endif %}
- +
diff --git a/app/views/september-iteration-2/create-clinic-rev-1-slot-structure.html b/app/views/september-iteration-2/create-clinic-rev-1-slot-structure.html index 802928b6..f9cde456 100644 --- a/app/views/september-iteration-2/create-clinic-rev-1-slot-structure.html +++ b/app/views/september-iteration-2/create-clinic-rev-1-slot-structure.html @@ -1,6 +1,6 @@ {% extends 'layout.html' %} -{% set errorState = "false" %} +{% set errorState = "true" if errors else "false" %} {% set pageName = "Set date and time" %} @@ -55,13 +55,23 @@

- +
+ {% if errorState === "true" %} + {% set errorList = [] %} + {% if errors.slots %} + {% set errorList = errorList.concat([{ text: errors.slots, href: "#computed-slot-0" }]) %} + {% endif %} + {{ errorSummary({ + titleText: "There is a problem", + errorList: errorList + }) }} + {% endif %}

Slot structure

Session time - 10:00 to 17:00 + {{ sessionStartLabel }} to {{ sessionEndLabel }}

@@ -69,77 +79,38 @@

-
+ {% for slot in slots %} +
- -
- -
-
- - -
-
- -
-
- - -
-
- -
-
- - -
-
- -
-
- - -
-
+ {% endfor %}
-

With selected slots:

- +

Set selected slots as:

+
- +

- 50 bookable slots + {{ bookableSlotCount }} bookable slots

- +

diff --git a/app/views/september-iteration-2/create-clinic-rev-1.html b/app/views/september-iteration-2/create-clinic-rev-1.html index 4c6f5b1e..55a7ad4e 100644 --- a/app/views/september-iteration-2/create-clinic-rev-1.html +++ b/app/views/september-iteration-2/create-clinic-rev-1.html @@ -1,6 +1,6 @@ {% extends 'layout.html' %} -{% set errorState = "false" %} +{% set errorState = "true" if errors else "false" %} {% set pageName = "Create day clinic" %} @@ -57,42 +57,36 @@

{% if errorState === "true" %} + {% set errorList = [] %} + {% if errors.clinicName %} + {% set errorList = errorList.concat([{ text: errors.clinicName, href: "#clinic-name" }]) %} + {% endif %} + {% if errors.clinicDate %} + {% set errorList = errorList.concat([{ text: errors.clinicDate, href: "#clinic-date-day" }]) %} + {% endif %} {{ errorSummary({ titleText: "There is a problem", - errorList: [ - { - text: "Clinic must be given a name", - href: "#" - }, - { - text: "Date of clinic must be given a day, month, and year", - href: "#" - }, - { - text: "Date of clinic must be in the future", - href: "#" - } - ] + errorList: errorList }) }} {% endif %}

Clinic details

- + -
+
- {% if errorState === "true" %} + {% if errors and errors.clinicName %} - Error: Clinic must be given a name + Error: {{ errors.clinicName }} {% endif %} - +
-
+
Clinic session date @@ -100,9 +94,9 @@

Clinic details

For example, 18 6 2026
- {% if errorState === "true" %} + {% if errors and errors.clinicDate %} - Error: Date of clinic must be given a day, month, and year + Error: {{ errors.clinicDate }} {% endif %}
@@ -111,7 +105,7 @@

Clinic details

- +
@@ -119,7 +113,7 @@

Clinic details

- +
@@ -127,7 +121,7 @@

Clinic details

- +
From 21e80b05d83f39c591e5f07ee185291c56022961 Mon Sep 17 00:00:00 2001 From: Mat Johnson Date: Fri, 2 Oct 2026 17:55:40 +0100 Subject: [PATCH 4/4] Drop back staff break style visually --- app/assets/sass/components/_session-slots.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/assets/sass/components/_session-slots.scss b/app/assets/sass/components/_session-slots.scss index 487bcef4..175fe706 100644 --- a/app/assets/sass/components/_session-slots.scss +++ b/app/assets/sass/components/_session-slots.scss @@ -16,10 +16,12 @@ .slot-tag { margin-left: 1rem; } .slot.is-hold {} + .slot.is-staff-break { - background: transparent; - border-style: dashed; + background: repeating-linear-gradient(130deg, nhsuk-colour("grey-4"), nhsuk-colour("grey-4") 1px, transparent 1px, transparent 12px); + border-color: $nhsuk-border-colour; } + .slot.is-special-appointment {} .slot.is-merged {