diff --git a/app/assets/sass/components/_session-slots.scss b/app/assets/sass/components/_session-slots.scss new file mode 100644 index 00000000..175fe706 --- /dev/null +++ b/app/assets/sass/components/_session-slots.scss @@ -0,0 +1,58 @@ +@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 { + @include nhsuk-font-size(16); + margin-right: 1rem; +} +.slot-tag { margin-left: 1rem; } + +.slot.is-hold {} + +.slot.is-staff-break { + 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 { + 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 cdf5f741..2534b84e 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, @@ -94,6 +92,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"; @@ -230,4 +229,7 @@ a { } .app-tag--attached { margin-right: -1px; +} +.app-nowrap { + white-space: nowrap; } \ No newline at end of file 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..94be000d 100644 --- a/app/routes/mission-1.js +++ b/app/routes/mission-1.js @@ -4,12 +4,37 @@ const router = express.Router() // Routes and functions specific to Mission 1 prototypes /* -/appviews/september-iteration-2/ +/app/views/mission-1/current-iteration/ */ +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) { +router.get('/mission-1/current-iteration/clickthru/04a-example-search-result', function (req, res) { const query = (req.query['search-params'] || '').trim() const allParticipants = (req.session.data.participants && req.session.data.participants.default) || [] const normalizedQuery = query.toLowerCase().replace(/\s+/g, ' ') @@ -31,7 +56,7 @@ router.get('/september-iteration-2/clickthru/04a-example-search-result', functio return null }).filter(Boolean) : allParticipants.map((participant, index) => Object.assign({}, participant, { participantIndex: index }))) - res.render('september-iteration-2/clickthru/04a-example-search-result', { + res.render('mission-1/current-iteration/clickthru/04a-example-search-result', { participants: searchResults, searchQuery: query }) @@ -47,7 +72,7 @@ router.get('/action/stage/:participantId', function (req, res) { req.session.data.stagedCount++ } - res.redirect(req.get('referer') || '/september-iteration-2/clickthru/04-choose-participants') + res.redirect(req.get('referer') || '/mission-1/current-iteration/clickthru/04-choose-participants') }); router.get('/action/unstage/:participantId', function (req, res) { const participants = (req.session.data.participants && req.session.data.participants.default) || [] @@ -58,11 +83,232 @@ router.get('/action/unstage/:participantId', function (req, res) { req.session.data.stagedCount-- } - res.redirect(req.get('referer') || '/september-iteration-2/clickthru/04-choose-participants') + res.redirect(req.get('referer') || '/mission-1/current-iteration/clickthru/04-choose-participants') }); +// validating clinic name for 1 day clinic creation +router.post('/mission-1/current-iteration/create-clinic-rev-1-name', function (req, res) { + const clinicName = (req.body.clinicName || '').trim() + + if (!req.session.data.missionOne || typeof req.session.data.missionOne !== 'object') { + req.session.data.missionOne = {} + } + req.session.data.missionOne.clinicName = clinicName + + const errors = {} + + if (!clinicName) { + errors.clinicName = 'Clinic must be given a name' + } + + if (Object.keys(errors).length > 0) { + return res.render('mission-1/current-iteration/create-clinic-rev-1-name', { + errors + }) + } + + res.redirect('/mission-1/current-iteration/create-clinic-rev-1-schedule') +}) + +// validating the scheduled date for 1 day clinic creation +router.post('/mission-1/current-iteration/create-clinic-rev-1-schedule', function (req, res) { + const clinicDate = req.body.clinicDate || {} + + if (typeof clinicDate.year === 'string' && /^\d{2}$/.test(clinicDate.year)) { + clinicDate.year = `20${clinicDate.year}` + } + + if (!req.session.data.missionOne || typeof req.session.data.missionOne !== 'object') { + req.session.data.missionOne = {} + } + req.session.data.missionOne.clinicDate = clinicDate + + const errors = {} + + 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('mission-1/current-iteration/create-clinic-rev-1-schedule', { + errors + }) + } + + res.redirect('/mission-1/current-iteration/create-clinic-rev-1-set-timings') +}) + +// validating clinic session times for 1 day clinic creation +router.post('/mission-1/current-iteration/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('mission-1/current-iteration/create-clinic-rev-1-set-timings', { + errors + }) + } + + res.redirect('/mission-1/current-iteration/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('/mission-1/current-iteration/create-clinic-rev-1-slot-structure', function (req, res) { + const missionOne = req.session.data.missionOne || {} + + res.render('mission-1/current-iteration/create-clinic-rev-1-slot-structure', buildSessionSlots(missionOne)) +}) + +// marking the selected slots as staff breaks for 1 day clinic creation +router.post('/mission-1/current-iteration/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 = 'Select at least one slot' + } + + if (Object.keys(errors).length > 0) { + return res.render('mission-1/current-iteration/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('/mission-1/current-iteration/create-clinic-rev-1-slot-structure') +}) + +// clearing staff break status from the selected slots for 1 day clinic creation +router.post('/mission-1/current-iteration/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 = 'Select at least one slot' + } + + if (Object.keys(errors).length > 0) { + return res.render('mission-1/current-iteration/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('/mission-1/current-iteration/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) { +router.post('/mission-1/current-iteration/create-clinic-rev-1-publish-check', function (req, res) { const newSession = req.session.data.newSession || {} const startTime = newSession.startTime || {} const endTime = newSession.endTime || {} @@ -73,7 +319,7 @@ router.post('/september-iteration-2/create-clinic-rev-1-publish-check', function newSession.totalSlots = duration > 0 ? Math.floor((endMinutes - startMinutes) / duration) : 0 - res.render('september-iteration-2/create-clinic-rev-1-publish-check') + res.render('mission-1/current-iteration/create-clinic-rev-1-publish-check') }) module.exports = router \ No newline at end of file diff --git a/app/views/_macros/clinic-listing.html b/app/views/_macros/clinic-listing.html index a867528f..181a5498 100644 --- a/app/views/_macros/clinic-listing.html +++ b/app/views/_macros/clinic-listing.html @@ -1,5 +1,5 @@ {% macro clinic_listing(options) %} -
| @@ -49,7 +49,7 @@ {% if options.controls != false %} | - + Select this clinic | diff --git a/app/views/index.html b/app/views/index.html index 091f5dee..12d876e2 100755 --- a/app/views/index.html +++ b/app/views/index.html @@ -165,20 +165,20 @@
|---|
@@ -47,33 +59,43 @@ Clinics | |||||
|---|---|---|---|---|---|
| - Rubie test clinic - | -
- Hard coded - as per live test #1 - |
-
- Alpha van - HWO-mobile-1 - |
-
- 1 October 2026 - 1 day - |
- - - 48 slots available of 48 - | -- - Select this clinic - - | -
| + {{ data.missionOne.clinicName }} + New + | +
+ Hard coded + as per mission #1 + |
+
+ Hard coded + as per mission #1 + |
+
+ {% if data.missionOne.clinicDate %}
+ {{ data.missionOne.clinicDate | formatDate }} + 1 day + {% else %} + no data + {% endif %} + |
+ + {% if data.missionOne.bookableSlotCount is not undefined %} + + {{ data.missionOne.bookableSlotCount }} slots available of {{ data.missionOne.bookableSlotCount }} + {% else %} + no data + {% endif %} + | ++ + Select this clinic + + | +
@@ -97,7 +119,7 @@ Clinics48 slots available of 48 | - + Select this clinic | @@ -124,7 +146,7 @@- + Select this clinic | diff --git a/app/views/september-iteration-2/includes/day-list-hard-coded.html b/app/views/mission-1/current-iteration/includes/day-list-hard-coded.html similarity index 100% rename from app/views/september-iteration-2/includes/day-list-hard-coded.html rename to app/views/mission-1/current-iteration/includes/day-list-hard-coded.html diff --git a/app/views/september-iteration-2/includes/participant-staging-control.html b/app/views/mission-1/current-iteration/includes/participant-staging-control.html similarity index 100% rename from app/views/september-iteration-2/includes/participant-staging-control.html rename to app/views/mission-1/current-iteration/includes/participant-staging-control.html diff --git a/app/views/september-iteration-2/macros/batch-detail.html b/app/views/mission-1/current-iteration/macros/batch-detail.html similarity index 100% rename from app/views/september-iteration-2/macros/batch-detail.html rename to app/views/mission-1/current-iteration/macros/batch-detail.html diff --git a/app/views/september-iteration-2/macros/batch-upload.html b/app/views/mission-1/current-iteration/macros/batch-upload.html similarity index 100% rename from app/views/september-iteration-2/macros/batch-upload.html rename to app/views/mission-1/current-iteration/macros/batch-upload.html diff --git a/app/views/september-iteration-2/macros/participant-listing.html b/app/views/mission-1/current-iteration/macros/participant-listing.html similarity index 96% rename from app/views/september-iteration-2/macros/participant-listing.html rename to app/views/mission-1/current-iteration/macros/participant-listing.html index 822265a6..36c8addd 100644 --- a/app/views/september-iteration-2/macros/participant-listing.html +++ b/app/views/mission-1/current-iteration/macros/participant-listing.html @@ -1,5 +1,5 @@ {% macro participant_listing(options) %} -