Working version before modification.
This commit is contained in:
Stan
+154
-155
@@ -6,189 +6,188 @@
|
||||
<meta name="theme-color" content="#f3efe6" />
|
||||
<title>Check List PoC — User</title>
|
||||
<link rel="manifest" href="/manifest.webmanifest" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
Operator workspace: report creation, local draft editing, validation,
|
||||
image attachments, submission, and CSV export.
|
||||
-->
|
||||
<div class="app-shell">
|
||||
<aside class="sidebar panel">
|
||||
<div class="brand-block">
|
||||
<p class="eyebrow">Hybrid Inspection Reporting</p>
|
||||
<h1>Check List</h1>
|
||||
<p class="lede">
|
||||
Offline-first proof of concept for template-driven quality reports.
|
||||
</p>
|
||||
<div class="d-flex vh-100">
|
||||
<!-- Mobile sidebar backdrop -->
|
||||
<div id="sidebarBackdrop" class="sidebar-backdrop"></div>
|
||||
<!-- Mobile menu button -->
|
||||
<button id="mobileMenuBtn" class="mobile-menu-btn btn btn-primary" type="button" aria-label="Open menu"><i class="bi bi-list"></i></button>
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar-bs d-flex flex-column border-end bg-light" style="width:260px;min-width:260px;">
|
||||
<div class="p-3 border-bottom">
|
||||
<p class="text-uppercase text-muted small fw-semibold mb-0">Hybrid Inspection Reporting</p>
|
||||
<h5 class="fw-bold mb-0">Check List</h5>
|
||||
<small class="text-muted">Task processing workspace</small>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<div class="status-row">
|
||||
<span id="connectionBadge" class="badge badge-neutral">Checking connection</span>
|
||||
<span id="saveBadge" class="badge badge-neutral">No changes</span>
|
||||
</div>
|
||||
<button id="syncTemplatesButton" class="button button-secondary" type="button">
|
||||
Sync templates
|
||||
</button>
|
||||
<div class="p-3 border-bottom">
|
||||
<span id="connectionBadge" class="badge bg-secondary">Checking…</span>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<label class="field-label" for="templateSelect">Template</label>
|
||||
<select id="templateSelect" class="select-input"></select>
|
||||
<button id="createReportButton" class="button button-primary" type="button">
|
||||
Create new report
|
||||
</button>
|
||||
<div class="flex-grow-1 overflow-auto p-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<h6 class="fw-semibold mb-0">My Tasks</h6>
|
||||
<span id="taskCount" class="badge bg-secondary">0</span>
|
||||
</div>
|
||||
<div id="taskListSidebar"></div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<div class="section-heading-row sidebar-links-heading">
|
||||
<h2>Access</h2>
|
||||
<span class="muted-count">Direct links</span>
|
||||
</div>
|
||||
<a id="userAreaLink" class="button button-secondary sidebar-link is-active" href="/user">User area</a>
|
||||
<a id="adminAreaLink" class="button button-secondary sidebar-link" href="/admin">Admin area</a>
|
||||
<a class="button button-secondary sidebar-link" href="/">Back to portal</a>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section grow-section">
|
||||
<div class="section-heading-row">
|
||||
<h2>Local reports</h2>
|
||||
<span id="reportCount" class="muted-count">0</span>
|
||||
</div>
|
||||
<div class="report-filter-row">
|
||||
<input id="reportSearchInput" class="text-input text-input-small" type="search" placeholder="Search reports" />
|
||||
<select id="reportFilterSelect" class="select-input select-input-small">
|
||||
<option value="">All statuses</option>
|
||||
<option value="draft">Draft</option>
|
||||
<option value="in_progress">In Progress</option>
|
||||
<option value="ready_for_export">Ready for Export</option>
|
||||
<option value="exported">Exported</option>
|
||||
<option value="archived">Archived</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="reportList" class="report-list"></div>
|
||||
<div class="p-3 border-top">
|
||||
<button id="showSettingsBtn" class="btn btn-outline-primary btn-sm w-100 mb-1" type="button"><i class="bi bi-gear me-1"></i>Settings</button>
|
||||
<a class="btn btn-secondary btn-sm w-100 mb-1" href="/user">User area</a>
|
||||
<a class="btn btn-outline-secondary btn-sm w-100 mb-1" href="/admin">Admin area</a>
|
||||
<a class="btn btn-outline-secondary btn-sm w-100" href="/">Back to portal</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="workspace">
|
||||
<section id="reportsWorkspace" class="workspace-view workspace-view-active">
|
||||
<section class="hero panel">
|
||||
<div>
|
||||
<p class="eyebrow">Proof of concept frontend</p>
|
||||
<h2 id="heroTitle">No report selected</h2>
|
||||
<p id="heroSubtitle" class="hero-copy">
|
||||
Start by syncing templates and creating a local draft.
|
||||
</p>
|
||||
<!-- Main content -->
|
||||
<main class="flex-grow-1 overflow-auto p-4 bg-white">
|
||||
|
||||
<!-- SETTINGS VIEW -->
|
||||
<section id="settingsView" class="workspace-view">
|
||||
<div class="mb-4">
|
||||
<p class="text-muted small mb-0">User workspace</p>
|
||||
<h3 class="fw-bold">Settings</h3>
|
||||
<p class="text-muted">Configure your workspace preferences.</p>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<label class="status-picker">
|
||||
<span>Status</span>
|
||||
<select id="reportStatusSelect" class="select-input">
|
||||
<option value="draft">Draft</option>
|
||||
<option value="in_progress">In Progress</option>
|
||||
<option value="ready_for_export">Ready for Export</option>
|
||||
<option value="exported">Exported</option>
|
||||
<option value="archived">Archived</option>
|
||||
<div class="card" style="max-width:480px">
|
||||
<div class="card-body">
|
||||
<h6 class="fw-semibold mb-3">Language</h6>
|
||||
<p class="text-muted small">Choose the language for record descriptions.</p>
|
||||
<select id="userLanguageSelect" class="form-select">
|
||||
<option value="EN">English</option>
|
||||
<option value="FR">Français</option>
|
||||
<option value="NL">Nederlands</option>
|
||||
</select>
|
||||
</label>
|
||||
<button id="submitReportButton" class="button button-secondary" type="button">
|
||||
Submit
|
||||
</button>
|
||||
<button id="exportReportButton" class="button button-secondary" type="button">
|
||||
Export CSV
|
||||
</button>
|
||||
<button id="deleteReportButton" class="button button-ghost" type="button">
|
||||
Delete report
|
||||
</button>
|
||||
<button id="closeSettingsBtn" class="btn btn-primary btn-sm mt-3" type="button">Done</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="summary-grid">
|
||||
<article class="summary-card panel accent-card">
|
||||
<p class="summary-label">Template</p>
|
||||
<strong id="summaryTemplate">Not loaded</strong>
|
||||
<span id="summaryVersion" class="summary-note">Version -</span>
|
||||
</article>
|
||||
<article class="summary-card panel">
|
||||
<p class="summary-label">Validation</p>
|
||||
<strong id="validationHeadline">No report selected</strong>
|
||||
<span id="validationDetail" class="summary-note">Draft validation will appear here.</span>
|
||||
</article>
|
||||
<article class="summary-card panel">
|
||||
<p class="summary-label">Offline cache</p>
|
||||
<strong id="syncHeadline">No sync yet</strong>
|
||||
<span id="syncDetail" class="summary-note">Templates are cached locally after the first successful sync.</span>
|
||||
</article>
|
||||
<!-- TASK LIST VIEW (shown by default) -->
|
||||
<section id="taskListView" class="workspace-view workspace-view-active">
|
||||
<div class="mb-4">
|
||||
<p class="text-muted small mb-0">User workspace</p>
|
||||
<h3 class="fw-bold">Assigned Tasks</h3>
|
||||
<p class="text-muted">Select a task to begin processing.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body p-0">
|
||||
<div id="taskListContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="editor-grid">
|
||||
<section class="panel editor-panel">
|
||||
<div class="section-heading-row">
|
||||
<h2>Report editor</h2>
|
||||
<span id="editorHint" class="panel-note">Dynamic form rendering from template JSON</span>
|
||||
<!-- TASK DETAIL VIEW (shown when a task is opened) -->
|
||||
<section id="taskDetailView" class="workspace-view">
|
||||
<div class="d-flex justify-content-between align-items-start mb-4">
|
||||
<div>
|
||||
<p class="text-muted small mb-0" id="taskDetailEyebrow">Task</p>
|
||||
<h3 class="fw-bold" id="taskDetailTitle">-</h3>
|
||||
<p class="text-muted" id="taskDetailSubtitle">-</p>
|
||||
</div>
|
||||
<form id="reportForm" class="report-form">
|
||||
<div class="empty-state">
|
||||
<h3>No report open</h3>
|
||||
<p>Choose a template and create a report to start editing locally.</p>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<button id="backToListBtn" class="btn btn-outline-secondary btn-sm" type="button"><i class="bi bi-arrow-left me-1"></i>Back to tasks</button>
|
||||
</div>
|
||||
|
||||
<aside class="panel inspector-panel">
|
||||
<div class="section-heading-row">
|
||||
<h2>Inspector view</h2>
|
||||
<span class="panel-note">Local draft summary</span>
|
||||
<!-- Task info summary cards (collapsible on small screens) -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-2 d-md-none">
|
||||
<small class="text-muted fw-semibold">Task Info</small>
|
||||
<button id="toggleTaskInfoBtn" class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#taskInfoCollapse" aria-expanded="true" aria-controls="taskInfoCollapse"><i class="bi bi-chevron-up"></i></button>
|
||||
</div>
|
||||
<div class="collapse show" id="taskInfoCollapse">
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-3">
|
||||
<div class="card border-primary">
|
||||
<div class="card-body py-2 px-3">
|
||||
<small class="text-muted">Site Code</small>
|
||||
<div class="fw-semibold" id="taskInfoSite">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body py-2 px-3">
|
||||
<small class="text-muted">Project</small>
|
||||
<div class="fw-semibold" id="taskInfoProject">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body py-2 px-3">
|
||||
<small class="text-muted">Process</small>
|
||||
<div class="fw-semibold" id="taskInfoProcess">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body py-2 px-3">
|
||||
<small class="text-muted">Status</small>
|
||||
<div><span id="taskInfoStatus" class="badge bg-secondary">-</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dl id="reportMeta" class="meta-list">
|
||||
<div>
|
||||
<dt>Report ID</dt>
|
||||
<dd>-</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Template</dt>
|
||||
<dd>-</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Created</dt>
|
||||
<dd>-</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Updated</dt>
|
||||
<dd>-</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="validation-block">
|
||||
<h3>Validation issues</h3>
|
||||
<ul id="validationList" class="validation-list">
|
||||
<li>No report selected.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Visit date + records form -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<form id="taskProcessingForm">
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-4">
|
||||
<label for="visitDate" class="form-label">Visit Date</label>
|
||||
<input id="visitDate" class="form-control" type="date" />
|
||||
<div class="form-text">Pick the inspection visit date.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="attachment-policy">
|
||||
<h3>Image policy</h3>
|
||||
<p id="imagePolicyText" class="policy-copy">
|
||||
Load server configuration to see image limits and optimization rules.
|
||||
</p>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h5 class="fw-semibold mb-0">Records</h5>
|
||||
<span id="taskRecordCount" class="badge bg-secondary">0 record(s)</span>
|
||||
</div>
|
||||
|
||||
<!-- Search bar for records -->
|
||||
<div class="mb-3">
|
||||
<input id="recordSearchInput" class="form-control form-control-sm" type="search" placeholder="Search records (full text)…" />
|
||||
</div>
|
||||
|
||||
<!-- Category tabs -->
|
||||
<ul id="recordCategoryTabs" class="nav nav-tabs mb-3"></ul>
|
||||
|
||||
<!-- Records container (filtered by active tab + search) -->
|
||||
<div id="taskRecordsContainer"></div>
|
||||
|
||||
<div class="d-flex gap-2 mt-4 pt-3 border-top">
|
||||
<button id="saveDraftBtn" class="btn btn-outline-secondary" type="button">Save as Draft</button>
|
||||
<button id="saveFinalBtn" class="btn btn-primary" type="button">Save as Final</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Validation panel -->
|
||||
<div id="taskValidationPanel" class="card border-warning" style="display:none">
|
||||
<div class="card-header bg-warning-subtle fw-semibold">Validation Issues</div>
|
||||
<div class="card-body">
|
||||
<ul id="taskValidationList" class="mb-0"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<template id="reportListItemTemplate">
|
||||
<button class="report-list-item" type="button" data-report-id="">
|
||||
<span class="report-list-item__header">
|
||||
<strong class="report-list-item__title"></strong>
|
||||
<span class="report-list-item__status badge"></span>
|
||||
</span>
|
||||
<span class="report-list-item__meta"></span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script type="module" src="/app.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script type="module" src="/user-app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user