Aug 7 - Update: Enrollment intake form
This commit is contained in:
@@ -0,0 +1,181 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Enrollment — {{ record.project_name }}{% endblock %}
|
||||
|
||||
{# One submitted enrollment form, rendered through the same schema the public
|
||||
page uses. The customer's answers are READ-ONLY here — only the office-use
|
||||
block and the status are editable, so the file stays a faithful record of
|
||||
what was actually requested. #}
|
||||
|
||||
{% block content %}
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
|
||||
<div>
|
||||
<h2 class="mb-0"><i class="bi bi-clipboard-check"></i> {{ record.project_name }}</h2>
|
||||
<div class="text-muted small">
|
||||
Reference {{ record.id }} · submitted {{ record.submitted_at | replace('T', ' ') }}
|
||||
{% if record.updated_at %}
|
||||
· updated {{ record.updated_at | replace('T', ' ') }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="{{ url_for('enrollment.admin_list') }}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left"></i> Back
|
||||
</a>
|
||||
<a href="{{ url_for('enrollment.admin_download', submission_id=record.id) }}"
|
||||
class="btn btn-outline-primary">
|
||||
<i class="bi bi-filetype-json"></i> Download JSON
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
{# ── Request details ─────────────────────────────────────────────── #}
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card shadow-sm h-100">
|
||||
<div class="card-header fw-semibold">Request</div>
|
||||
<div class="card-body">
|
||||
<dl class="row mb-0">
|
||||
<dt class="col-5">Project Name</dt><dd class="col-7">{{ record.project_name or '—' }}</dd>
|
||||
<dt class="col-5">Request by</dt><dd class="col-7">{{ record.request_by or '—' }}</dd>
|
||||
<dt class="col-5">Requester email</dt>
|
||||
<dd class="col-7">
|
||||
{% if record.requester_email %}
|
||||
<a href="mailto:{{ record.requester_email }}">{{ record.requester_email }}</a>
|
||||
{% else %}<span class="text-muted">—</span>{% endif %}
|
||||
</dd>
|
||||
<dt class="col-5">Date Requested</dt><dd class="col-7">{{ record.date_requested or '—' }}</dd>
|
||||
</dl>
|
||||
{% if record.notes %}
|
||||
<hr>
|
||||
<div class="fw-semibold small text-muted mb-1">Customer notes</div>
|
||||
<div style="white-space:pre-wrap;">{{ record.notes }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Office use — the only editable part ─────────────────────────── #}
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card shadow-sm h-100">
|
||||
<div class="card-header fw-semibold">For Office Use</div>
|
||||
<div class="card-body">
|
||||
<form method="POST">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
{% for key, label in schema.OFFICE_FIELDS %}
|
||||
<div class="mb-2">
|
||||
<label class="form-label small mb-1">{{ label }}</label>
|
||||
<input type="text" name="{{ key }}" class="form-control form-control-sm"
|
||||
value="{{ record.office.get(key, '') }}">
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="mb-3">
|
||||
<label class="form-label small mb-1">Status</label>
|
||||
<select name="status" class="form-select form-select-sm">
|
||||
{% for s in schema.STATUSES %}
|
||||
<option value="{{ s }}" {{ 'selected' if record.status == s }}>
|
||||
{{ schema.STATUS_LABELS[s] }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-sm btn-primary">
|
||||
<i class="bi bi-save"></i> Save
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── 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
|
||||
<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 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 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>
|
||||
{% if person.email %}
|
||||
<a href="mailto:{{ person.email }}">{{ person.email }}</a>
|
||||
{% else %}—{% endif %}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── 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">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width:50px;">Ref</th>
|
||||
<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 %}
|
||||
<tr>
|
||||
<td class="text-center">{{ ref }}</td>
|
||||
<td>{{ label }}</td>
|
||||
{% for person in people %}
|
||||
<td class="text-center">
|
||||
{% 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>
|
||||
{% endif %}
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if record.meta %}
|
||||
<div class="text-muted small mt-3">
|
||||
Submitted from {{ record.meta.ip or 'unknown address' }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,98 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Enrollment Forms{% endblock %}
|
||||
|
||||
{# Admin inbox of enrollment submissions. Extends base.html so it picks up
|
||||
whichever design (classic / modern) the admin has selected. #}
|
||||
|
||||
{% block content %}
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-2">
|
||||
<h2 class="mb-0"><i class="bi bi-clipboard-plus"></i> Enrollment Forms</h2>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="{{ url_for('enrollment.form') }}" target="_blank"
|
||||
class="btn btn-outline-secondary" title="Open the public form in a new tab">
|
||||
<i class="bi bi-box-arrow-up-right"></i> View public form
|
||||
</a>
|
||||
{% if records %}
|
||||
<a href="{{ url_for('enrollment.admin_export_csv') }}" class="btn btn-outline-success">
|
||||
<i class="bi bi-file-earmark-spreadsheet"></i> Export CSV
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info d-flex align-items-start gap-2">
|
||||
<i class="bi bi-info-circle mt-1"></i>
|
||||
<div>
|
||||
Send customers this link to enroll:
|
||||
<code>{{ url_for('enrollment.form', _external=True) }}</code><br>
|
||||
<span class="small text-muted">
|
||||
Submissions are stored as JSON files on the server, outside the database —
|
||||
one file per form.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if records %}
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Submitted</th>
|
||||
<th>Project</th>
|
||||
<th>Requested By</th>
|
||||
<th class="text-center">Users</th>
|
||||
<th class="text-center">Mobile App</th>
|
||||
<th>Status</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for r in records %}
|
||||
{# 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">
|
||||
<small>{{ r.submitted_at | replace('T', ' ') }}</small>
|
||||
</td>
|
||||
<td class="fw-semibold">{{ r.project_name or '—' }}</td>
|
||||
<td>{{ r.request_by or '—' }}</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-secondary">{{ named | length }}</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% if mobile_count %}
|
||||
<span class="badge bg-info text-dark">{{ mobile_count }}</span>
|
||||
{% else %}<span class="text-muted">—</span>{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-{{ 'success' if r.status == 'completed'
|
||||
else 'warning text-dark' if r.status == 'in_progress'
|
||||
else 'danger' }}">
|
||||
{{ schema.STATUS_LABELS.get(r.status, r.status) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-end text-nowrap">
|
||||
<a href="{{ url_for('enrollment.admin_detail', submission_id=r.id) }}"
|
||||
class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-eye"></i> Open
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body text-center py-5 text-muted">
|
||||
<i class="bi bi-inbox fs-2 d-block mb-2"></i>
|
||||
No enrollment forms have been submitted yet.
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,89 @@
|
||||
{# Internal alert to JQC admins when a new enrollment form arrives. Inline
|
||||
styles only and no external assets — mail clients strip <style> blocks and
|
||||
block remote resources. #}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body style="font-family:Arial,Helvetica,sans-serif;color:#333;max-width:640px;margin:auto;padding:12px;">
|
||||
|
||||
<h2 style="color:#1a6fb5;margin:0 0 4px;">New enrollment form</h2>
|
||||
<p style="color:#6b7280;margin:0 0 20px;">JQC · internal notification</p>
|
||||
|
||||
<table style="border-collapse:collapse;margin:0 0 18px;">
|
||||
<tr>
|
||||
<td style="padding:4px 14px 4px 0;color:#6b7280;">Project</td>
|
||||
<td style="padding:4px 0;font-weight:bold;">{{ record.project_name }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:4px 14px 4px 0;color:#6b7280;">Requester</td>
|
||||
<td style="padding:4px 0;">
|
||||
{{ record.request_by }}
|
||||
{% if record.requester_email %}
|
||||
<<a href="mailto:{{ record.requester_email }}">{{ record.requester_email }}</a>>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% if record.date_requested %}
|
||||
<tr>
|
||||
<td style="padding:4px 14px 4px 0;color:#6b7280;">Date requested</td>
|
||||
<td style="padding:4px 0;">{{ record.date_requested }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td style="padding:4px 14px 4px 0;color:#6b7280;">Reference</td>
|
||||
<td style="padding:4px 0;">{{ record.id }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p style="margin:0 0 22px;">
|
||||
<a href="{{ link }}"
|
||||
style="background:#1a6fb5;color:#fff;text-decoration:none;padding:10px 18px;
|
||||
border-radius:6px;display:inline-block;font-weight:bold;">
|
||||
Open in JQC
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h3 style="font-size:1rem;margin:0 0 8px;">
|
||||
Accounts requested ({{ people | length }})
|
||||
</h3>
|
||||
|
||||
<table style="border-collapse:collapse;width:100%;font-size:.92rem;">
|
||||
<thead>
|
||||
<tr style="background:#dbeafe;">
|
||||
<th style="border:1px solid #cbd5e1;padding:6px 9px;text-align:left;">Name</th>
|
||||
<th style="border:1px solid #cbd5e1;padding:6px 9px;text-align:left;">Role</th>
|
||||
<th style="border:1px solid #cbd5e1;padding:6px 9px;text-align:left;">Email</th>
|
||||
<th style="border:1px solid #cbd5e1;padding:6px 9px;text-align:center;">Mobile App</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for person in people %}
|
||||
<tr>
|
||||
<td style="border:1px solid #cbd5e1;padding:6px 9px;">
|
||||
{{ person.name }}
|
||||
{% if person.job_title %}
|
||||
<div style="color:#6b7280;font-size:.82rem;">{{ person.job_title }}</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td style="border:1px solid #cbd5e1;padding:6px 9px;">{{ person.role_label }}</td>
|
||||
<td style="border:1px solid #cbd5e1;padding:6px 9px;">{{ person.email }}</td>
|
||||
<td style="border:1px solid #cbd5e1;padding:6px 9px;text-align:center;">
|
||||
{{ 'Yes' if schema.wants_mobile(record, person.key) else '—' }}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% if record.notes %}
|
||||
<h3 style="font-size:1rem;margin:22px 0 6px;">Customer notes</h3>
|
||||
<div style="white-space:pre-wrap;background:#f8fafc;border:1px solid #e5e7eb;
|
||||
border-radius:6px;padding:10px;">{{ record.notes }}</div>
|
||||
{% endif %}
|
||||
|
||||
<hr style="border:none;border-top:1px solid #e5e7eb;margin:26px 0 12px;">
|
||||
<p style="color:#9ca3af;font-size:.8rem;margin:0;">
|
||||
You are receiving this because you hold a JQC admin account. The full
|
||||
selection of tasks per person is on the enrollment page.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
{# Confirmation email sent to the requester. Inline styles only and no external
|
||||
assets — mail clients strip <style> blocks and block remote resources. #}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body style="font-family:Arial,Helvetica,sans-serif;color:#333;max-width:640px;margin:auto;padding:12px;">
|
||||
|
||||
<h2 style="color:#1a6fb5;margin:0 0 4px;">Enrollment received</h2>
|
||||
<p style="color:#6b7280;margin:0 0 20px;">{{ tenant_branding.display_name if tenant_branding else 'Janitorial QC' }}</p>
|
||||
|
||||
<p>Hi {{ record.request_by or 'there' }},</p>
|
||||
<p>Thank you — we have received your JQC enrollment form. Our team will set up
|
||||
the accounts listed below.</p>
|
||||
|
||||
<table style="border-collapse:collapse;margin:18px 0;">
|
||||
<tr>
|
||||
<td style="padding:4px 14px 4px 0;color:#6b7280;">Reference</td>
|
||||
<td style="padding:4px 0;font-weight:bold;">{{ record.id }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:4px 14px 4px 0;color:#6b7280;">Project</td>
|
||||
<td style="padding:4px 0;font-weight:bold;">{{ record.project_name }}</td>
|
||||
</tr>
|
||||
{% if record.date_requested %}
|
||||
<tr>
|
||||
<td style="padding:4px 14px 4px 0;color:#6b7280;">Date requested</td>
|
||||
<td style="padding:4px 0;">{{ record.date_requested }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</table>
|
||||
|
||||
<h3 style="font-size:1rem;margin:22px 0 8px;">
|
||||
People to be set up ({{ people | length }})
|
||||
</h3>
|
||||
|
||||
<table style="border-collapse:collapse;width:100%;font-size:.92rem;">
|
||||
<thead>
|
||||
<tr style="background:#dbeafe;">
|
||||
<th style="border:1px solid #cbd5e1;padding:6px 9px;text-align:left;">Name</th>
|
||||
<th style="border:1px solid #cbd5e1;padding:6px 9px;text-align:left;">Role</th>
|
||||
<th style="border:1px solid #cbd5e1;padding:6px 9px;text-align:left;">Email</th>
|
||||
<th style="border:1px solid #cbd5e1;padding:6px 9px;text-align:center;">Mobile App</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for person in people %}
|
||||
<tr>
|
||||
<td style="border:1px solid #cbd5e1;padding:6px 9px;">
|
||||
{{ person.name }}
|
||||
{% if person.job_title %}
|
||||
<div style="color:#6b7280;font-size:.82rem;">{{ person.job_title }}</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td style="border:1px solid #cbd5e1;padding:6px 9px;">{{ person.role_label }}</td>
|
||||
<td style="border:1px solid #cbd5e1;padding:6px 9px;">{{ person.email }}</td>
|
||||
<td style="border:1px solid #cbd5e1;padding:6px 9px;text-align:center;">
|
||||
{{ 'Yes' if schema.wants_mobile(record, person.key) else '—' }}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p style="margin-top:22px;">
|
||||
Each person will receive their own email invitation with sign-in
|
||||
instructions, along with a quick guide to the web portal and the mobile app.
|
||||
</p>
|
||||
<p>If anything above is wrong, simply send an email to
|
||||
<a href="mailto:{{ corrections_email }}">{{ corrections_email }}</a>,
|
||||
and we will correct it.</p>
|
||||
|
||||
<hr style="border:none;border-top:1px solid #e5e7eb;margin:26px 0 12px;">
|
||||
<p style="color:#9ca3af;font-size:.8rem;margin:0;">
|
||||
You are receiving this because this address was given as the requester on a
|
||||
JQC enrollment form. Reference {{ record.id }}.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,434 @@
|
||||
<!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>
|
||||
|
||||
{# ── 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>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!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 received — JQC</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; }
|
||||
.card-wrap { max-width:600px; margin:80px auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card-wrap">
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-body text-center p-5">
|
||||
<i class="bi bi-check-circle-fill text-success" style="font-size:3.2rem;"></i>
|
||||
<h1 class="h4 mt-3 mb-2">Thank you — your enrollment form has been received.</h1>
|
||||
<p class="text-muted mb-4">
|
||||
Our team will set up the accounts you listed. Each user will receive an
|
||||
email invitation with sign-in instructions, and a quick guide for the
|
||||
web portal and the mobile app.
|
||||
</p>
|
||||
{% if email %}
|
||||
<p class="mb-4">
|
||||
<i class="bi bi-envelope-check text-success"></i>
|
||||
A confirmation has been sent to <strong>{{ email }}</strong>.
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if reference %}
|
||||
<div class="border rounded-3 p-3 bg-light d-inline-block">
|
||||
<div class="text-muted small">Your reference number</div>
|
||||
<div class="fw-bold" style="letter-spacing:.02em;">{{ reference }}</div>
|
||||
</div>
|
||||
<p class="text-muted small mt-3 mb-0">
|
||||
Please quote this reference if you contact us about your enrollment.
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center text-muted small mt-3">{{ tenant_branding.display_name if tenant_branding else 'Janitorial QC' }}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user