446 lines
20 KiB
HTML
446 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<title>Enrollment Form — {{ tenant_branding.display_name if tenant_branding else 'Janitorial QC' }}</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<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: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; }
|
|
.step-head { font-weight:700; margin:30px 0 10px; }
|
|
.step-head span { font-weight:400; }
|
|
table.grid { width:100%; border-collapse:collapse; }
|
|
table.grid th, table.grid td { border:1px solid #cbd5e1; padding:6px 9px; vertical-align:middle; }
|
|
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 { min-width:104px; text-align:center; }
|
|
.chk-col input { width:18px; height:18px; }
|
|
.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%; }
|
|
.hdr-table input:focus { background:#eff6ff; }
|
|
.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 { min-width:70px; }
|
|
}
|
|
@media print {
|
|
body { background:#fff; }
|
|
.sheet { border:none; margin:0; max-width:none; }
|
|
.no-print { display:none !important; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sheet">
|
|
|
|
<h1 class="form-title">JQC Enrollment Form</h1>
|
|
<div class="form-sub">{{ tenant_branding.display_name if tenant_branding else 'Janitorial QC' }}</div>
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ category }} no-print">{{ message }}</div>
|
|
{% endfor %}
|
|
{% 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() }}">
|
|
|
|
{# Honeypot — must stay empty. #}
|
|
<div class="hp" aria-hidden="true">
|
|
<label>Website<input type="text" name="website" tabindex="-1" autocomplete="off"></label>
|
|
</div>
|
|
|
|
{# ── Header ─────────────────────────────────────────────────────── #}
|
|
{# The printed sheet carried a blank "for office use" block here. It is not
|
|
rendered on the web form — a customer cannot fill it in. Those fields
|
|
still exist and are filled by staff on the admin detail page. #}
|
|
<div class="row g-3 mb-2">
|
|
<div class="col-12 col-lg-8">
|
|
<table class="hdr-table" style="width:100%;">
|
|
<tr>
|
|
<td class="lbl">Project Name</td>
|
|
<td><input type="text" name="project_name" required maxlength="200"
|
|
value="{{ submitted.project_name if submitted else '' }}"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="lbl">Request by:</td>
|
|
<td><input type="text" name="request_by" required maxlength="200"
|
|
placeholder="Your name"
|
|
value="{{ submitted.request_by if submitted else '' }}"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="lbl">Requester email:</td>
|
|
<td><input type="email" name="requester_email" required maxlength="200"
|
|
placeholder="you@company.com"
|
|
value="{{ submitted.requester_email if submitted else '' }}"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="lbl">Date Requested:</td>
|
|
<td><input type="date" name="date_requested"
|
|
value="{{ submitted.date_requested if submitted else '' }}"></td>
|
|
</tr>
|
|
</table>
|
|
<div class="form-text mt-1">
|
|
We send your confirmation, with a copy of everything below, to the
|
|
requester email.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# ── Step 1 — the people ────────────────────────────────────────── #}
|
|
<div class="step-head">
|
|
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 people-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="ref-col">No.</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>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="peopleBody"><!-- rows injected by JS --></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
{# Rows that come WITH the role rather than being switched on per person.
|
|
Ticking them records what you expect; it does not change access. #}
|
|
<div class="form-text mt-2">
|
|
Rows
|
|
{% for ref in schema.ROLE_IMPLIED_TASKS | sort %}{% if not loop.first %}{{ ', ' if not loop.last else ' and ' }}{% endif %}{{ ref }}{% endfor %}
|
|
({% for ref in schema.ROLE_IMPLIED_TASKS | sort %}{{ schema.TASK_LABELS[ref] }}{{ '; ' if not loop.last }}{% endfor %})
|
|
are included with the user's role where their access allows it — tick them
|
|
to record what you expect. The remaining rows control which email and
|
|
in-app notifications each user receives.
|
|
</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" id="mobileWrap"><!-- table injected by JS --></div>
|
|
|
|
{# ── 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>
|
|
|
|
<div class="step-head">Note:</div>
|
|
<ol class="note-list">
|
|
{% for note in schema.NOTES %}<li>{{ note }}</li>{% endfor %}
|
|
</ol>
|
|
|
|
<div class="d-flex gap-2 mt-4 no-print">
|
|
<button type="submit" class="btn btn-primary px-4" id="submitBtn">
|
|
<i class="bi bi-send"></i> Submit Enrollment
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary" onclick="window.print()">
|
|
<i class="bi bi-printer"></i> Print
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
(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>
|