smlynarczyk85/CLProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e7127f3215a7ccec15c04aa4ec7a9be11a4dab55
CLProject/public/user.html
T
Stan e7127f3215 Working version before modification.
2026-04-20 21:04:54 +02:00

194 lines
8.8 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<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="p-3 border-bottom">
<span id="connectionBadge" class="badge bg-secondary">Checking…</span>
</div>
<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="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 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="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>
<button id="closeSettingsBtn" class="btn btn-primary btn-sm mt-3" type="button">Done</button>
</div>
</div>
</section>
<!-- 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>
<!-- 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>
<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>
<!-- 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>
</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="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>
</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>
<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 View Git Blame Copy Permalink