Aug 6 - Update enrollment page
This commit is contained in:
@@ -81,43 +81,41 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Step 2: who to set up ──────────────────────────────────────────── #}
|
||||
{# ── The people to set up ───────────────────────────────────────────── #}
|
||||
{% set people = schema.people_of(record) %}
|
||||
<div class="card shadow-sm mt-3">
|
||||
<div class="card-header fw-semibold">Users to Register</div>
|
||||
<div class="card-header fw-semibold">
|
||||
Users to Register
|
||||
<span class="badge bg-secondary rounded-pill ms-1">{{ people | length }}</span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Seat</th><th>Name</th><th>Job Title</th><th>Email</th>
|
||||
<th style="width:50px;">No.</th>
|
||||
<th>Role</th><th>Name</th><th>Job Title</th><th>Email</th>
|
||||
<th class="text-center">Mobile App</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for reg in record.registrants %}
|
||||
{% if reg.name or reg.email %}
|
||||
{% for person in people %}
|
||||
<tr>
|
||||
<td>{{ loop.index }}</td>
|
||||
<td><span class="badge bg-light text-dark border">{{ person.role_label }}</span></td>
|
||||
<td class="fw-semibold">{{ person.name or '—' }}</td>
|
||||
<td>{{ person.job_title or '—' }}</td>
|
||||
<td>
|
||||
{{ reg.label }}
|
||||
{% if reg.include %}
|
||||
<i class="bi bi-check-circle-fill text-success ms-1"
|
||||
title="Ticked on the form"></i>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="fw-semibold">{{ reg.name or '—' }}</td>
|
||||
<td>{{ reg.job_title or '—' }}</td>
|
||||
<td>
|
||||
{% if reg.email %}
|
||||
<a href="mailto:{{ reg.email }}">{{ reg.email }}</a>
|
||||
{% if person.email %}
|
||||
<a href="mailto:{{ person.email }}">{{ person.email }}</a>
|
||||
{% else %}—{% endif %}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% if record.mobile_app.get(reg.key) %}
|
||||
{% if schema.wants_mobile(record, person.key) %}
|
||||
<i class="bi bi-phone-fill text-primary" title="Wants the mobile app"></i>
|
||||
{% else %}<span class="text-muted">—</span>{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -125,7 +123,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Step 1: the requested matrix ───────────────────────────────────── #}
|
||||
{# ── The requested task matrix — one column per person ──────────────── #}
|
||||
<div class="card shadow-sm mt-3">
|
||||
<div class="card-header fw-semibold">Requested Tasks & Functions</div>
|
||||
<div class="card-body p-0">
|
||||
@@ -134,25 +132,27 @@
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width:50px;">Ref</th>
|
||||
<th>Task / Function</th>
|
||||
{% for col_key, col_label in schema.COLUMNS %}
|
||||
<th class="text-center" style="width:110px;">
|
||||
{{ col_label.replace('\n', ' ') }}
|
||||
<th style="min-width:280px;">Task / Function</th>
|
||||
{% for person in people %}
|
||||
<th class="text-center" style="min-width:120px;">
|
||||
{{ person.name or 'Person ' ~ loop.index }}
|
||||
<div class="fw-normal text-muted" style="font-size:.75rem;">
|
||||
{{ person.role_label }}
|
||||
</div>
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for ref, label, scope in schema.TASKS %}
|
||||
{% set row = record.matrix.get(ref|string, {}) %}
|
||||
<tr>
|
||||
<td class="text-center">{{ ref }}</td>
|
||||
<td>{{ label }}</td>
|
||||
{% for col_key, _col_label in schema.COLUMNS %}
|
||||
{% for person in people %}
|
||||
<td class="text-center">
|
||||
{% if scope != 'all' and col_key != 'admin' %}
|
||||
<span class="text-muted">·</span>
|
||||
{% elif row.get(col_key) %}
|
||||
{% if not schema.task_applies(scope, person.role) %}
|
||||
<span class="text-muted" title="Not available for this role">·</span>
|
||||
{% elif schema.cell(record, ref, person.key) %}
|
||||
<i class="bi bi-check-square-fill text-success"></i>
|
||||
{% else %}
|
||||
<span class="text-muted">—</span>
|
||||
|
||||
@@ -50,7 +50,8 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for r in records %}
|
||||
{% set named = r.registrants | selectattr('email') | selectattr('name') | list %}
|
||||
{# people_of() normalises both the current and the legacy stored shape #}
|
||||
{% set named = schema.people_of(r) %}
|
||||
{% set mobile_count = r.mobile_app.values() | select | list | length %}
|
||||
<tr>
|
||||
<td class="text-nowrap">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
|
||||
<style>
|
||||
body { background:#f1f5f9; color:#1f2937; }
|
||||
.sheet { max-width:1140px; margin:24px auto 60px; background:#fff;
|
||||
.sheet { max-width:1180px; margin:24px auto 60px; background:#fff;
|
||||
border:1px solid #d7dee6; border-radius:10px; padding:32px 34px 40px; }
|
||||
.form-title { color:#1a6fb5; font-weight:800; font-size:2rem; text-align:center; margin:0; }
|
||||
.form-sub { text-align:center; color:#6b7280; margin-bottom:26px; }
|
||||
@@ -20,10 +20,9 @@
|
||||
table.grid thead th { background:#dbeafe; font-weight:700; text-align:center; font-size:.86rem; line-height:1.25; }
|
||||
table.grid thead th.left { text-align:left; }
|
||||
.ref-col { width:52px; text-align:center; }
|
||||
.chk-col { width:118px; text-align:center; }
|
||||
.chk-col { min-width:104px; text-align:center; }
|
||||
.chk-col input { width:18px; height:18px; }
|
||||
.reg-table thead th { background:#dcfce7; }
|
||||
.rec-table thead th { background:#fde4d3; }
|
||||
.people-table thead th { background:#dcfce7; }
|
||||
.hdr-table td { border:1px solid #cbd5e1; padding:6px 9px; }
|
||||
.hdr-table .lbl { background:#f8fafc; font-weight:600; width:170px; white-space:nowrap; }
|
||||
.hdr-table input { border:none; outline:none; width:100%; }
|
||||
@@ -31,16 +30,21 @@
|
||||
.cell-input { border:1px solid transparent; background:transparent; width:100%;
|
||||
padding:2px 4px; border-radius:4px; }
|
||||
.cell-input:focus { border-color:#1a6fb5; background:#fff; outline:none; }
|
||||
.col-person { font-weight:700; font-size:.84rem; line-height:1.2; }
|
||||
.col-role { font-weight:400; font-size:.76rem; color:#4b5563; display:block; margin-top:2px; }
|
||||
.cell-na { color:#cbd5e1; }
|
||||
.office-note { color:#6b7280; font-size:.82rem; }
|
||||
.note-list { font-size:.92rem; }
|
||||
.scroll-x { overflow-x:auto; }
|
||||
.empty-hint { border:1px dashed #cbd5e1; border-radius:8px; padding:20px;
|
||||
text-align:center; color:#6b7280; }
|
||||
/* Honeypot — hidden from humans, visible to naive bots. Not type=hidden:
|
||||
some bots skip those. */
|
||||
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
|
||||
@media (max-width: 820px) {
|
||||
.sheet { padding:18px 14px 30px; margin:10px; }
|
||||
table.grid { font-size:.8rem; }
|
||||
.chk-col { width:64px; }
|
||||
.scroll-x { overflow-x:auto; }
|
||||
.chk-col { min-width:70px; }
|
||||
}
|
||||
@media print {
|
||||
body { background:#fff; }
|
||||
@@ -63,6 +67,14 @@
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<noscript>
|
||||
<div class="alert alert-warning no-print">
|
||||
This form needs JavaScript enabled — the task table is built from the
|
||||
people you add. Please enable JavaScript, or contact us and we will send
|
||||
you a printable copy.
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<form method="POST" action="{{ url_for('enrollment.submit') }}" id="enrollForm">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
|
||||
@@ -104,161 +116,69 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Step 1 ─────────────────────────────────────────────────────── #}
|
||||
{# ── Step 1 — the people ────────────────────────────────────────── #}
|
||||
<div class="step-head">
|
||||
Step 1: <span>Please check the task/function for each user. Refer to our
|
||||
recommendations at the bottom of this page.</span>
|
||||
Step 1: <span>Please list everyone who needs access. Each person will
|
||||
receive an email invitation at the address you provide.</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-x">
|
||||
<table class="grid">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="ref-col">Ref</th>
|
||||
<th class="left">Role Descriptions: Tasks and Functions</th>
|
||||
{% for col_key, col_label in schema.COLUMNS %}
|
||||
<th class="chk-col">{{ col_label.replace('\n', ' ') }}</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for ref, label, scope in schema.TASKS %}
|
||||
<tr>
|
||||
<td class="ref-col">{{ ref }}</td>
|
||||
<td>{{ label }}</td>
|
||||
{% for col_key, _col_label in schema.COLUMNS %}
|
||||
{% if scope == 'all' or col_key == 'admin' %}
|
||||
<td class="chk-col">
|
||||
<input type="checkbox" class="form-check-input"
|
||||
name="task_{{ ref }}_{{ col_key }}"
|
||||
aria-label="{{ label }} — {{ _col_label.replace('\n',' ') }}"
|
||||
{% if submitted and submitted.matrix[ref|string][col_key] %}checked{% endif %}>
|
||||
</td>
|
||||
{% else %}
|
||||
{# Ref 10 is Admin/Director only on the printed form. #}
|
||||
<td class="chk-col"></td>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{# ── Step 2 ─────────────────────────────────────────────────────── #}
|
||||
<div class="step-head">
|
||||
Step 2: <span>Please provide the following information for setup. Each user
|
||||
will receive a notification at the email provided below to sign in.</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-x">
|
||||
<table class="grid reg-table">
|
||||
<table class="grid people-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="ref-col">No.</th>
|
||||
<th class="left">Role Descriptions Register</th>
|
||||
<th class="left" style="min-width:190px;">Role</th>
|
||||
<th class="left" style="min-width:190px;">First and last name</th>
|
||||
<th class="left" style="min-width:160px;">Job Title</th>
|
||||
<th class="left" style="min-width:210px;">Email Address</th>
|
||||
<th style="width:52px;"></th>
|
||||
<th class="left">First and last name</th>
|
||||
<th class="left">Job Title</th>
|
||||
<th class="left">Email Address</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for key, label in schema.REGISTRANTS %}
|
||||
{% set reg = (submitted.registrants[loop.index0] if submitted else none) %}
|
||||
<tr>
|
||||
<td class="ref-col">{{ loop.index }}</td>
|
||||
<td>{{ label }}</td>
|
||||
<td class="text-center">
|
||||
<input type="checkbox" class="form-check-input" name="reg_{{ key }}_include"
|
||||
aria-label="Register {{ label }}"
|
||||
{% if reg and reg.include %}checked{% endif %}>
|
||||
</td>
|
||||
<td><input type="text" class="cell-input" name="reg_{{ key }}_name" maxlength="200"
|
||||
value="{{ reg.name if reg else '' }}"></td>
|
||||
<td><input type="text" class="cell-input" name="reg_{{ key }}_job_title" maxlength="200"
|
||||
value="{{ reg.job_title if reg else '' }}"></td>
|
||||
<td><input type="email" class="cell-input" name="reg_{{ key }}_email" maxlength="200"
|
||||
value="{{ reg.email if reg else '' }}"></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
<tbody id="peopleBody"><!-- rows injected by JS --></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{# ── Step 3 ─────────────────────────────────────────────────────── #}
|
||||
<div class="mt-2 no-print">
|
||||
<button type="button" class="btn btn-sm btn-outline-primary" id="addPersonBtn">
|
||||
<i class="bi bi-plus-lg"></i> Add another person
|
||||
</button>
|
||||
<span class="text-muted small ms-2" id="peopleCount"></span>
|
||||
</div>
|
||||
|
||||
{# ── Step 2 — the task matrix, built from Step 1 ────────────────── #}
|
||||
<div class="step-head">
|
||||
Step 2: <span>Please check the task/function for each user, or apply our
|
||||
recommended selection and adjust it.</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 no-print">
|
||||
<button type="button" class="btn btn-sm btn-primary" id="recommendBtn">
|
||||
<i class="bi bi-magic"></i> Recommendation selection
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary ms-1" id="clearBtn">
|
||||
Clear all
|
||||
</button>
|
||||
<div class="form-text">
|
||||
Our recommendation keeps administrators and directors from receiving an
|
||||
overwhelming number of email notifications. You can change any box afterwards.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-x" id="matrixWrap"><!-- table injected by JS --></div>
|
||||
|
||||
{# ── Step 3 — mobile app ────────────────────────────────────────── #}
|
||||
<div class="step-head">
|
||||
Step 3: <span>Please check the box next to the user who will receive the
|
||||
app for smart devices.</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-x">
|
||||
<table class="grid">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="ref-col">No.</th>
|
||||
<th class="left">Mobile App</th>
|
||||
{% for col_key, col_label in schema.COLUMNS %}
|
||||
<th class="chk-col">{{ '' if col_key == 'admin' else col_label.replace('\n',' ') }}</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="ref-col">7</td>
|
||||
<td>{{ schema.MOBILE_APP_LABEL }}</td>
|
||||
{% for col_key, col_label in schema.COLUMNS %}
|
||||
<td class="chk-col">
|
||||
<input type="checkbox" class="form-check-input" name="mobile_{{ col_key }}"
|
||||
aria-label="Mobile app — {{ col_label.replace('\n',' ') }}"
|
||||
{% if submitted and submitted.mobile_app[col_key] %}checked{% endif %}>
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="scroll-x" id="mobileWrap"><!-- table injected by JS --></div>
|
||||
|
||||
{# ── Notes from the customer ────────────────────────────────────── #}
|
||||
{# ── Notes ──────────────────────────────────────────────────────── #}
|
||||
<div class="step-head">Anything else we should know? <span>(optional)</span></div>
|
||||
<textarea name="notes" class="form-control" rows="3" maxlength="2000"
|
||||
placeholder="Special requirements, timing, additional users…">{{ submitted.notes if submitted else '' }}</textarea>
|
||||
|
||||
{# ── Recommendation (reference only) ────────────────────────────── #}
|
||||
<div class="step-head">RECOMMENDATION</div>
|
||||
<p class="mb-2">{{ schema.RECOMMENDATION_INTRO }}</p>
|
||||
|
||||
<div class="scroll-x">
|
||||
<table class="grid rec-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="ref-col">Ref</th>
|
||||
<th class="left">Role Descriptions: Tasks and Functions</th>
|
||||
<th class="chk-col">Admin / Director</th>
|
||||
<th class="chk-col">User / Inspectors</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for ref, label, scope in schema.TASKS %}
|
||||
{% set rec = schema.RECOMMENDATION[ref] %}
|
||||
<tr>
|
||||
<td class="ref-col">{{ ref }}</td>
|
||||
<td>{{ label }}</td>
|
||||
<td class="chk-col">
|
||||
{% if rec[0] %}<i class="bi bi-check-square-fill text-success"></i>
|
||||
{% else %}<i class="bi bi-square text-muted"></i>{% endif %}
|
||||
</td>
|
||||
<td class="chk-col">
|
||||
{% if rec[1] is none %}—
|
||||
{% elif rec[1] %}<i class="bi bi-check-square-fill text-success"></i>
|
||||
{% else %}<i class="bi bi-square text-muted"></i>{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="step-head">Note:</div>
|
||||
<ol class="note-list">
|
||||
{% for note in schema.NOTES %}<li>{{ note }}</li>{% endfor %}
|
||||
@@ -277,12 +197,234 @@
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// Disable on first submit — a double tap must not file two enrollments.
|
||||
document.getElementById('enrollForm').addEventListener('submit', function () {
|
||||
var btn = document.getElementById('submitBtn');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = 'Submitting…';
|
||||
});
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// ── Data handed over from schema.py — the single source of truth ────────
|
||||
var ROLES = {{ schema.ROLES | tojson }};
|
||||
var TASKS = {{ schema.TASKS | tojson }};
|
||||
var ADMIN_ROLES = {{ schema.ADMIN_ROLES | list | tojson }};
|
||||
var RECOMMENDATION = {{ schema.recommendation_map() | tojson }};
|
||||
var DEFAULT_ROLE = {{ schema.DEFAULT_FIRST_ROLE | tojson }};
|
||||
var MOBILE_LABEL = {{ schema.MOBILE_APP_LABEL | tojson }};
|
||||
var MAX_PEOPLE = {{ schema.MAX_PEOPLE | tojson }};
|
||||
var SEED = {{ seed_people | tojson }};
|
||||
|
||||
var peopleBody = document.getElementById('peopleBody');
|
||||
var matrixWrap = document.getElementById('matrixWrap');
|
||||
var mobileWrap = document.getElementById('mobileWrap');
|
||||
var countLabel = document.getElementById('peopleCount');
|
||||
|
||||
// Row indexes only ever increase, so removing a middle row can never make a
|
||||
// new row reuse a departed row's field names. The server re-keys people by
|
||||
// position on receipt, so gaps here are harmless.
|
||||
var nextIndex = 0;
|
||||
|
||||
function isAdminRole(role) { return ADMIN_ROLES.indexOf(role) !== -1; }
|
||||
|
||||
function esc(s) {
|
||||
return String(s == null ? '' : s)
|
||||
.replace(/&/g,'&').replace(/</g,'<')
|
||||
.replace(/>/g,'>').replace(/"/g,'"');
|
||||
}
|
||||
|
||||
// ── Step 1 rows ─────────────────────────────────────────────────────────
|
||||
function addPerson(seed) {
|
||||
if (peopleBody.rows.length >= MAX_PEOPLE) return;
|
||||
seed = seed || {};
|
||||
var i = nextIndex++;
|
||||
var tr = document.createElement('tr');
|
||||
tr.dataset.index = i;
|
||||
|
||||
var options = ROLES.map(function (r) {
|
||||
var sel = (seed.role || DEFAULT_ROLE) === r[0] ? ' selected' : '';
|
||||
return '<option value="' + esc(r[0]) + '"' + sel + '>' + esc(r[1]) + '</option>';
|
||||
}).join('');
|
||||
|
||||
tr.innerHTML =
|
||||
'<td class="ref-col row-num"></td>' +
|
||||
'<td><select class="form-select form-select-sm person-role" ' +
|
||||
'name="person_' + i + '_role" aria-label="Role">' + options + '</select></td>' +
|
||||
'<td><input type="text" class="cell-input person-name" name="person_' + i + '_name" ' +
|
||||
'maxlength="200" placeholder="First and last name" value="' + esc(seed.name) + '"></td>' +
|
||||
'<td><input type="text" class="cell-input" name="person_' + i + '_job_title" ' +
|
||||
'maxlength="200" placeholder="Job title" value="' + esc(seed.job_title) + '"></td>' +
|
||||
'<td><input type="email" class="cell-input" name="person_' + i + '_email" ' +
|
||||
'maxlength="200" placeholder="name@company.com" value="' + esc(seed.email) + '"></td>' +
|
||||
'<td class="text-center no-print">' +
|
||||
'<button type="button" class="btn btn-sm btn-link text-danger p-0 remove-person" ' +
|
||||
'title="Remove this person" aria-label="Remove this person">' +
|
||||
'<i class="bi bi-x-circle"></i></button></td>';
|
||||
|
||||
peopleBody.appendChild(tr);
|
||||
|
||||
if (seed.tasks) { tr.dataset.seedTasks = seed.tasks.join(','); }
|
||||
if (seed.mobile) { tr.dataset.seedMobile = '1'; }
|
||||
return tr;
|
||||
}
|
||||
|
||||
function renumber() {
|
||||
Array.prototype.forEach.call(peopleBody.rows, function (tr, n) {
|
||||
tr.querySelector('.row-num').textContent = n + 1;
|
||||
});
|
||||
var n = peopleBody.rows.length;
|
||||
countLabel.textContent = n + (n === 1 ? ' person' : ' people')
|
||||
+ (n >= MAX_PEOPLE ? ' (maximum reached)' : '');
|
||||
// Never let the last row be removed — the form needs at least one person.
|
||||
Array.prototype.forEach.call(peopleBody.rows, function (tr) {
|
||||
tr.querySelector('.remove-person').style.visibility = n > 1 ? '' : 'hidden';
|
||||
});
|
||||
document.getElementById('addPersonBtn').disabled = n >= MAX_PEOPLE;
|
||||
}
|
||||
|
||||
// ── Read the current people out of Step 1 ───────────────────────────────
|
||||
function currentPeople() {
|
||||
return Array.prototype.map.call(peopleBody.rows, function (tr, n) {
|
||||
var name = tr.querySelector('.person-name').value.trim();
|
||||
var role = tr.querySelector('.person-role').value;
|
||||
return {
|
||||
index: tr.dataset.index,
|
||||
role: role,
|
||||
label: name || ('Person ' + (n + 1)),
|
||||
roleLabel: (ROLES.filter(function (r) { return r[0] === role; })[0] || ['', role])[1]
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// ── Step 2 + Step 3 tables ──────────────────────────────────────────────
|
||||
// Rebuilt whenever Step 1 changes. Existing ticks are preserved by field
|
||||
// name, so renaming someone or adding a colleague never clears the grid.
|
||||
function renderMatrix() {
|
||||
var people = currentPeople();
|
||||
var checked = {};
|
||||
document.querySelectorAll('.matrix-box:checked, .mobile-box:checked')
|
||||
.forEach(function (cb) { checked[cb.name] = true; });
|
||||
|
||||
// Seeded state from a validation-error re-render, applied once.
|
||||
Array.prototype.forEach.call(peopleBody.rows, function (tr) {
|
||||
if (tr.dataset.seedTasks) {
|
||||
tr.dataset.seedTasks.split(',').filter(Boolean).forEach(function (ref) {
|
||||
checked['task_' + ref + '_person_' + tr.dataset.index] = true;
|
||||
});
|
||||
delete tr.dataset.seedTasks;
|
||||
}
|
||||
if (tr.dataset.seedMobile) {
|
||||
checked['mobile_person_' + tr.dataset.index] = true;
|
||||
delete tr.dataset.seedMobile;
|
||||
}
|
||||
});
|
||||
|
||||
if (!people.length) {
|
||||
matrixWrap.innerHTML = '<div class="empty-hint">Add someone in Step 1 and ' +
|
||||
'their column will appear here.</div>';
|
||||
mobileWrap.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
var head = '<tr><th class="ref-col">Ref</th>' +
|
||||
'<th class="left">Role Descriptions: Tasks and Functions</th>' +
|
||||
people.map(function (p) {
|
||||
return '<th class="chk-col"><span class="col-person">' + esc(p.label) +
|
||||
'</span><span class="col-role">' + esc(p.roleLabel) + '</span></th>';
|
||||
}).join('') + '</tr>';
|
||||
|
||||
var body = TASKS.map(function (t) {
|
||||
var ref = t[0], label = t[1], scope = t[2];
|
||||
var cells = people.map(function (p) {
|
||||
// An admin-only row offers no cell to an inspector — matching the
|
||||
// server, which refuses to record one.
|
||||
if (scope !== 'all' && !isAdminRole(p.role)) {
|
||||
return '<td class="chk-col cell-na" title="Not available for this role">·</td>';
|
||||
}
|
||||
var nm = 'task_' + ref + '_person_' + p.index;
|
||||
return '<td class="chk-col"><input type="checkbox" class="form-check-input matrix-box" ' +
|
||||
'name="' + nm + '" data-ref="' + ref + '" data-index="' + p.index + '" ' +
|
||||
'aria-label="' + esc(label) + ' — ' + esc(p.label) + '"' +
|
||||
(checked[nm] ? ' checked' : '') + '></td>';
|
||||
}).join('');
|
||||
return '<tr><td class="ref-col">' + ref + '</td><td>' + esc(label) + '</td>' + cells + '</tr>';
|
||||
}).join('');
|
||||
|
||||
matrixWrap.innerHTML = '<table class="grid"><thead>' + head + '</thead><tbody>' +
|
||||
body + '</tbody></table>';
|
||||
|
||||
var mobileCells = people.map(function (p) {
|
||||
var nm = 'mobile_person_' + p.index;
|
||||
return '<td class="chk-col"><input type="checkbox" class="form-check-input mobile-box" ' +
|
||||
'name="' + nm + '" aria-label="Mobile app — ' + esc(p.label) + '"' +
|
||||
(checked[nm] ? ' checked' : '') + '></td>';
|
||||
}).join('');
|
||||
|
||||
mobileWrap.innerHTML =
|
||||
'<table class="grid"><thead><tr><th class="ref-col">No.</th>' +
|
||||
'<th class="left">Mobile App</th>' +
|
||||
people.map(function (p) {
|
||||
return '<th class="chk-col"><span class="col-person">' + esc(p.label) + '</span></th>';
|
||||
}).join('') +
|
||||
'</tr></thead><tbody><tr><td class="ref-col">7</td><td>' + esc(MOBILE_LABEL) + '</td>' +
|
||||
mobileCells + '</tr></tbody></table>';
|
||||
}
|
||||
|
||||
// ── Recommendation preset ───────────────────────────────────────────────
|
||||
// Applies the mapping from schema.RECOMMENDATION for each person's role.
|
||||
// Overwrites the grid (that is what "apply the recommendation" means), and
|
||||
// leaves Step 3 alone — who carries a tablet is not something we can guess.
|
||||
function applyRecommendation() {
|
||||
var roleByIndex = {};
|
||||
Array.prototype.forEach.call(peopleBody.rows, function (tr) {
|
||||
roleByIndex[tr.dataset.index] = tr.querySelector('.person-role').value;
|
||||
});
|
||||
document.querySelectorAll('.matrix-box').forEach(function (cb) {
|
||||
var preset = RECOMMENDATION[roleByIndex[cb.dataset.index]] || {};
|
||||
cb.checked = !!preset[cb.dataset.ref];
|
||||
});
|
||||
}
|
||||
|
||||
// ── Wiring ──────────────────────────────────────────────────────────────
|
||||
document.getElementById('addPersonBtn').addEventListener('click', function () {
|
||||
addPerson(); renumber(); renderMatrix();
|
||||
var rows = peopleBody.rows;
|
||||
rows[rows.length - 1].querySelector('.person-name').focus();
|
||||
});
|
||||
|
||||
peopleBody.addEventListener('click', function (e) {
|
||||
var btn = e.target.closest('.remove-person');
|
||||
if (!btn || peopleBody.rows.length <= 1) return;
|
||||
btn.closest('tr').remove();
|
||||
renumber(); renderMatrix();
|
||||
});
|
||||
|
||||
// Role changes the available cells; the name changes the column heading.
|
||||
peopleBody.addEventListener('change', function (e) {
|
||||
if (e.target.classList.contains('person-role')) renderMatrix();
|
||||
});
|
||||
peopleBody.addEventListener('input', function (e) {
|
||||
if (e.target.classList.contains('person-name')) renderMatrix();
|
||||
});
|
||||
|
||||
document.getElementById('recommendBtn').addEventListener('click', applyRecommendation);
|
||||
document.getElementById('clearBtn').addEventListener('click', function () {
|
||||
document.querySelectorAll('.matrix-box, .mobile-box').forEach(function (cb) {
|
||||
cb.checked = false;
|
||||
});
|
||||
});
|
||||
|
||||
// Disable on first submit — a double tap must not file two enrollments.
|
||||
document.getElementById('enrollForm').addEventListener('submit', function () {
|
||||
var btn = document.getElementById('submitBtn');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = 'Submitting…';
|
||||
});
|
||||
|
||||
// ── Initial state ───────────────────────────────────────────────────────
|
||||
if (SEED && SEED.length) {
|
||||
SEED.forEach(function (p) { addPerson(p); });
|
||||
} else {
|
||||
addPerson(); // one administrative contact to start
|
||||
}
|
||||
renumber();
|
||||
renderMatrix();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user