Working version before modification.
This commit is contained in:
Stan
+554
-158
@@ -6,191 +6,587 @@
|
||||
<meta name="theme-color" content="#f3efe6" />
|
||||
<title>Check List PoC — Admin</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="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
Administrator workspace: server-backed configuration editing for image
|
||||
policies and other centrally managed settings.
|
||||
-->
|
||||
<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">
|
||||
<!-- 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">Administration console</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 class="p-3 border-bottom">
|
||||
<span id="connectionBadge" class="badge bg-secondary">Checking…</span>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav id="adminNav" class="flex-grow-1 overflow-auto p-2">
|
||||
<!-- Settings -->
|
||||
<div class="admin-nav-cat is-open mb-1">
|
||||
<button class="admin-nav-cat-btn btn btn-sm btn-light w-100 text-start d-flex justify-content-between align-items-center" type="button">
|
||||
<span><i class="bi bi-gear me-1"></i>Settings</span><span class="nav-arrow">▾</span>
|
||||
</button>
|
||||
<div class="admin-nav-sub ms-3 mt-1">
|
||||
<button class="admin-nav-item btn btn-sm btn-link text-start w-100 is-active" type="button" data-panel="settings-policies">Image Policy</button>
|
||||
<button class="admin-nav-item btn btn-sm btn-link text-start w-100" type="button" data-panel="settings-template">Template</button>
|
||||
<button class="admin-nav-item btn btn-sm btn-link text-start w-100" type="button" data-panel="settings-task">Task</button>
|
||||
</div>
|
||||
</div>
|
||||
<button id="syncTemplatesButton" class="button button-secondary" type="button">
|
||||
Sync templates
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<label class="field-label" for="templateSelect">Template</label>
|
||||
<select id="templateSelect" class="select-input"></select>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<div class="section-heading-row sidebar-links-heading">
|
||||
<h2>Access</h2>
|
||||
<span class="muted-count">Direct links</span>
|
||||
<!-- Users -->
|
||||
<div class="admin-nav-cat mb-1">
|
||||
<button class="admin-nav-cat-btn btn btn-sm btn-light w-100 text-start d-flex justify-content-between align-items-center" type="button">
|
||||
<span><i class="bi bi-people me-1"></i>Users</span><span class="nav-arrow">▸</span>
|
||||
</button>
|
||||
<div class="admin-nav-sub ms-3 mt-1">
|
||||
<button class="admin-nav-item btn btn-sm btn-link text-start w-100" type="button" data-panel="users">Users</button>
|
||||
</div>
|
||||
</div>
|
||||
<a id="userAreaLink" class="button button-secondary sidebar-link" href="/user">User area</a>
|
||||
<a id="adminAreaLink" class="button button-secondary sidebar-link is-active" href="/admin">Admin area</a>
|
||||
<a class="button button-secondary sidebar-link" href="/">Back to portal</a>
|
||||
<!-- Sites -->
|
||||
<div class="admin-nav-cat mb-1">
|
||||
<button class="admin-nav-cat-btn btn btn-sm btn-light w-100 text-start d-flex justify-content-between align-items-center" type="button">
|
||||
<span><i class="bi bi-building me-1"></i>Sites</span><span class="nav-arrow">▸</span>
|
||||
</button>
|
||||
<div class="admin-nav-sub ms-3 mt-1">
|
||||
<button class="admin-nav-item btn btn-sm btn-link text-start w-100" type="button" data-panel="sites">Sites</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Check Lists -->
|
||||
<div class="admin-nav-cat mb-1">
|
||||
<button class="admin-nav-cat-btn btn btn-sm btn-light w-100 text-start d-flex justify-content-between align-items-center" type="button">
|
||||
<span><i class="bi bi-list-check me-1"></i>Check Lists</span><span class="nav-arrow">▸</span>
|
||||
</button>
|
||||
<div class="admin-nav-sub ms-3 mt-1">
|
||||
<button class="admin-nav-item btn btn-sm btn-link text-start w-100" type="button" data-panel="cl-templates">Templates</button>
|
||||
<button class="admin-nav-item btn btn-sm btn-link text-start w-100" type="button" data-panel="cl-records">Records</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Reports -->
|
||||
<div class="admin-nav-cat mb-1">
|
||||
<button class="admin-nav-cat-btn btn btn-sm btn-light w-100 text-start d-flex justify-content-between align-items-center" type="button">
|
||||
<span><i class="bi bi-file-earmark-text me-1"></i>Reports</span><span class="nav-arrow">▸</span>
|
||||
</button>
|
||||
<div class="admin-nav-sub ms-3 mt-1">
|
||||
<button class="admin-nav-item btn btn-sm btn-link text-start w-100" type="button" data-panel="reports">Tasks</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="p-3 border-top">
|
||||
<a class="btn btn-outline-secondary btn-sm w-100 mb-1" href="/user">User area</a>
|
||||
<a class="btn btn-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="adminWorkspace" class="workspace-view workspace-view-active">
|
||||
<section class="hero panel">
|
||||
<!-- Main content area -->
|
||||
<main class="flex-grow-1 overflow-auto p-4 bg-white">
|
||||
|
||||
<!-- SETTINGS > IMAGE POLICY -->
|
||||
<section id="panel-settings-policies" class="admin-panel admin-panel-active">
|
||||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||
<div>
|
||||
<p class="eyebrow">Administrator workspace</p>
|
||||
<h2>Configuration control</h2>
|
||||
<p class="hero-copy">
|
||||
Update centrally managed image requirements used by the inspection frontend.
|
||||
</p>
|
||||
<p class="text-muted small mb-0">Settings › Image Policy</p>
|
||||
<h3 class="fw-bold">Image Policy Editor</h3>
|
||||
<p class="text-muted">Update centrally managed image requirements.</p>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<span id="adminSyncState" class="badge badge-neutral">Server-backed settings</span>
|
||||
</div>
|
||||
</section>
|
||||
<span id="adminSyncState" class="badge bg-secondary">Server-backed</span>
|
||||
</div>
|
||||
|
||||
<section class="editor-grid">
|
||||
<section class="panel editor-panel">
|
||||
<div class="section-heading-row">
|
||||
<h2>Image policy editor</h2>
|
||||
<span class="panel-note">Updates the active server rule</span>
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form id="adminImageRulesForm">
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-semibold">Allowed MIME types</label>
|
||||
<div id="adminMimeCheckboxes" class="row g-2">
|
||||
<div class="col-6 col-md-4"><div class="form-check"><input class="form-check-input" type="checkbox" name="mimeType" value="image/jpeg" id="mime-jpeg"><label class="form-check-label" for="mime-jpeg">image/jpeg</label></div></div>
|
||||
<div class="col-6 col-md-4"><div class="form-check"><input class="form-check-input" type="checkbox" name="mimeType" value="image/png" id="mime-png"><label class="form-check-label" for="mime-png">image/png</label></div></div>
|
||||
<div class="col-6 col-md-4"><div class="form-check"><input class="form-check-input" type="checkbox" name="mimeType" value="image/webp" id="mime-webp"><label class="form-check-label" for="mime-webp">image/webp</label></div></div>
|
||||
<div class="col-6 col-md-4"><div class="form-check"><input class="form-check-input" type="checkbox" name="mimeType" value="image/gif" id="mime-gif"><label class="form-check-label" for="mime-gif">image/gif</label></div></div>
|
||||
<div class="col-6 col-md-4"><div class="form-check"><input class="form-check-input" type="checkbox" name="mimeType" value="image/bmp" id="mime-bmp"><label class="form-check-label" for="mime-bmp">image/bmp</label></div></div>
|
||||
<div class="col-6 col-md-4"><div class="form-check"><input class="form-check-input" type="checkbox" name="mimeType" value="image/tiff" id="mime-tiff"><label class="form-check-label" for="mime-tiff">image/tiff</label></div></div>
|
||||
<div class="col-6 col-md-4"><div class="form-check"><input class="form-check-input" type="checkbox" name="mimeType" value="image/svg+xml" id="mime-svg"><label class="form-check-label" for="mime-svg">image/svg+xml</label></div></div>
|
||||
<div class="col-6 col-md-4"><div class="form-check"><input class="form-check-input" type="checkbox" name="mimeType" value="image/heic" id="mime-heic"><label class="form-check-label" for="mime-heic">image/heic</label></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-4">
|
||||
<label for="adminMaxFileSizeKb" class="form-label">Max file size (KB)</label>
|
||||
<input id="adminMaxFileSizeKb" class="form-control" type="number" min="1" step="1" />
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="adminMaxWidthPx" class="form-label">Max width (px)</label>
|
||||
<input id="adminMaxWidthPx" class="form-control" type="number" min="1" step="1" />
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="adminMaxHeightPx" class="form-label">Max height (px)</label>
|
||||
<input id="adminMaxHeightPx" class="form-control" type="number" min="1" step="1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="adminImageQuality" class="form-label">Image quality (%)</label>
|
||||
<input id="adminImageQuality" class="form-control" type="number" min="1" max="100" step="1" />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="adminOversizeBehavior" class="form-label">Oversize behavior</label>
|
||||
<select id="adminOversizeBehavior" class="form-select">
|
||||
<option value="auto_optimize">Auto optimize</option>
|
||||
<option value="warn_then_optimize">Warn then optimize</option>
|
||||
<option value="block">Block oversized files</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button id="saveImageRulesButton" class="btn btn-primary" type="submit">Save image policy</button>
|
||||
<button id="resetImageRulesButton" class="btn btn-outline-secondary" type="button">Reset form</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<form id="adminImageRulesForm" class="report-form admin-form">
|
||||
<section class="template-section">
|
||||
<div class="field-grid">
|
||||
<div class="field field-full">
|
||||
<div class="field-header">
|
||||
<label class="field-label" for="adminPolicyName">Policy name</label>
|
||||
</div>
|
||||
<input id="adminPolicyName" name="name" class="text-input" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-header fw-semibold">Live Preview</div>
|
||||
<div class="card-body">
|
||||
<dl class="mb-0">
|
||||
<dt class="small text-muted">Allowed types</dt>
|
||||
<dd id="adminPolicyMimeTypes" class="mb-2">-</dd>
|
||||
<dt class="small text-muted">Max file size</dt>
|
||||
<dd id="adminPolicyFileSize" class="mb-2">-</dd>
|
||||
<dt class="small text-muted">Optimization</dt>
|
||||
<dd id="adminPolicyOptimization" class="mb-2">-</dd>
|
||||
<dt class="small text-muted">Limits</dt>
|
||||
<dd id="adminPolicyLimits" class="mb-0">-</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="field field-full">
|
||||
<div class="field-header">
|
||||
<label class="field-label" for="adminAllowedMimeTypes">Allowed MIME types</label>
|
||||
</div>
|
||||
<input
|
||||
id="adminAllowedMimeTypes"
|
||||
name="allowedMimeTypes"
|
||||
class="text-input"
|
||||
type="text"
|
||||
placeholder="image/jpeg, image/png, image/webp"
|
||||
/>
|
||||
<p class="field-help">Comma-separated values used by the attachment field and browser validation.</p>
|
||||
</div>
|
||||
<!-- SETTINGS > TEMPLATE -->
|
||||
<section id="panel-settings-template" class="admin-panel">
|
||||
<div class="mb-3">
|
||||
<p class="text-muted small mb-0">Settings › Template</p>
|
||||
<h3 class="fw-bold">Record Dropdown Configuration</h3>
|
||||
<p class="text-muted">Define dropdown values for checklist record forms.</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="field-header">
|
||||
<label class="field-label" for="adminMaxFileSizeMb">Max file size (MB)</label>
|
||||
</div>
|
||||
<input id="adminMaxFileSizeMb" name="maxFileSizeMb" class="text-input" type="number" min="1" step="0.1" />
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<!-- Categories -->
|
||||
<h6 class="fw-semibold">Categories</h6>
|
||||
<div class="input-group input-group-sm mb-2">
|
||||
<input id="tsCatInput" class="form-control" type="text" placeholder="Add category…" />
|
||||
<button type="button" class="btn btn-outline-primary" data-ts-action="add-cat">Add</button>
|
||||
</div>
|
||||
<div id="tsCatList" class="mb-4"></div>
|
||||
|
||||
<div class="field">
|
||||
<div class="field-header">
|
||||
<label class="field-label" for="adminMaxAttachmentsPerField">Max attachments per field</label>
|
||||
</div>
|
||||
<input id="adminMaxAttachmentsPerField" name="maxAttachmentsPerField" class="text-input" type="number" min="1" step="1" />
|
||||
</div>
|
||||
<!-- Sub Categories -->
|
||||
<h6 class="fw-semibold">Sub Categories</h6>
|
||||
<p class="text-muted small">Parent category is mandatory.</p>
|
||||
<div class="input-group input-group-sm mb-2">
|
||||
<select id="tsSubCatParent" class="form-select" style="max-width:180px"><option value="">Parent…</option></select>
|
||||
<input id="tsSubCatInput" class="form-control" type="text" placeholder="Add sub category…" />
|
||||
<button type="button" class="btn btn-outline-primary" data-ts-action="add-subcat">Add</button>
|
||||
</div>
|
||||
<div id="tsSubCatList" class="mb-4"></div>
|
||||
|
||||
<div class="field">
|
||||
<div class="field-header">
|
||||
<label class="field-label" for="adminMaxWidthPx">Max width (px)</label>
|
||||
</div>
|
||||
<input id="adminMaxWidthPx" name="maxWidthPx" class="text-input" type="number" min="1" step="1" />
|
||||
</div>
|
||||
<!-- Severities -->
|
||||
<h6 class="fw-semibold">Severities</h6>
|
||||
<div class="input-group input-group-sm mb-2">
|
||||
<input id="tsSevInput" class="form-control" type="text" placeholder="Add severity…" />
|
||||
<button type="button" class="btn btn-outline-primary" data-ts-action="add-sev">Add</button>
|
||||
</div>
|
||||
<div id="tsSevList" class="mb-4"></div>
|
||||
|
||||
<div class="field">
|
||||
<div class="field-header">
|
||||
<label class="field-label" for="adminMaxHeightPx">Max height (px)</label>
|
||||
</div>
|
||||
<input id="adminMaxHeightPx" name="maxHeightPx" class="text-input" type="number" min="1" step="1" />
|
||||
</div>
|
||||
<!-- Statuses -->
|
||||
<h6 class="fw-semibold">Statuses</h6>
|
||||
<div class="input-group input-group-sm mb-1">
|
||||
<input id="tsStatusInput" class="form-control" type="text" placeholder="Add status…" />
|
||||
<button type="button" class="btn btn-outline-primary" data-ts-action="add-status">Add</button>
|
||||
</div>
|
||||
<div class="form-check form-check-inline small mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="tsStatusReqHandled" />
|
||||
<label class="form-check-label" for="tsStatusReqHandled">Handled By required</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline small mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="tsStatusReqComment" />
|
||||
<label class="form-check-label" for="tsStatusReqComment">Comment required</label>
|
||||
</div>
|
||||
<div id="tsStatusList" class="mb-4"></div>
|
||||
|
||||
<div class="field">
|
||||
<div class="field-header">
|
||||
<label class="field-label" for="adminJpegQuality">JPEG quality</label>
|
||||
</div>
|
||||
<input id="adminJpegQuality" name="jpegQuality" class="text-input" type="number" min="1" max="100" step="1" />
|
||||
</div>
|
||||
<!-- Handled By -->
|
||||
<h6 class="fw-semibold">Handled By</h6>
|
||||
<div class="input-group input-group-sm mb-2">
|
||||
<input id="tsHandledInput" class="form-control" type="text" placeholder="Add handler…" />
|
||||
<button type="button" class="btn btn-outline-primary" data-ts-action="add-handled">Add</button>
|
||||
</div>
|
||||
<div id="tsHandledList"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="field">
|
||||
<div class="field-header">
|
||||
<label class="field-label" for="adminOversizeBehavior">Oversize behavior</label>
|
||||
</div>
|
||||
<select id="adminOversizeBehavior" name="oversizeBehavior" class="select-input">
|
||||
<option value="auto_optimize">Auto optimize</option>
|
||||
<option value="warn_then_optimize">Warn then optimize</option>
|
||||
<option value="block">Block oversized files</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- SETTINGS > TASK -->
|
||||
<section id="panel-settings-task" class="admin-panel">
|
||||
<div class="mb-3">
|
||||
<p class="text-muted small mb-0">Settings › Task</p>
|
||||
<h3 class="fw-bold">Task Dropdown Configuration</h3>
|
||||
<p class="text-muted">Define Project and Process values for task assignment.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<!-- Projects -->
|
||||
<h6 class="fw-semibold">Projects</h6>
|
||||
<div class="input-group input-group-sm mb-2">
|
||||
<input id="tkProjInput" class="form-control" type="text" placeholder="Add project…" />
|
||||
<button type="button" class="btn btn-outline-primary" data-tk-action="add-proj">Add</button>
|
||||
</div>
|
||||
<div id="tkProjList" class="mb-4"></div>
|
||||
|
||||
<!-- Processes -->
|
||||
<h6 class="fw-semibold">Processes</h6>
|
||||
<p class="text-muted small">Parent project is mandatory.</p>
|
||||
<div class="input-group input-group-sm mb-2">
|
||||
<select id="tkProcParent" class="form-select" style="max-width:180px"><option value="">Parent project…</option></select>
|
||||
<input id="tkProcInput" class="form-control" type="text" placeholder="Add process…" />
|
||||
<button type="button" class="btn btn-outline-primary" data-tk-action="add-proc">Add</button>
|
||||
</div>
|
||||
<div id="tkProcList"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- USERS -->
|
||||
<section id="panel-users" class="admin-panel">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<p class="text-muted small mb-0">Users</p>
|
||||
<h3 class="fw-bold mb-0">Manage Users</h3>
|
||||
</div>
|
||||
<button id="showUserFormBtn" class="btn btn-primary btn-sm" type="button"><i class="bi bi-plus-lg me-1"></i>Add User</button>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-body p-0">
|
||||
<div id="userListContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="userFormSection" class="card" style="display:none">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h6 id="userFormHeading" class="mb-0 fw-semibold">Add User</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="userForm">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="userEmail" class="form-label">Email</label>
|
||||
<input id="userEmail" class="form-control" type="email" required />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="admin-actions">
|
||||
<button id="saveImageRulesButton" class="button button-primary" type="submit">
|
||||
Save image policy
|
||||
</button>
|
||||
<button id="resetImageRulesButton" class="button button-secondary" type="button">
|
||||
Reset form
|
||||
</button>
|
||||
<div class="col-md-6">
|
||||
<label for="userPassword" class="form-label">Password</label>
|
||||
<input id="userPassword" class="form-control" type="password" required />
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="userName" class="form-label">Name</label>
|
||||
<input id="userName" class="form-control" type="text" required />
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="userFamilyName" class="form-label">Family Name</label>
|
||||
<input id="userFamilyName" class="form-control" type="text" required />
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="userCompany" class="form-label">Company</label>
|
||||
<input id="userCompany" class="form-control" type="text" />
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="userRole" class="form-label">Role</label>
|
||||
<select id="userRole" class="form-select" required>
|
||||
<option value="">— Select —</option>
|
||||
<option value="CW">CW</option>
|
||||
<option value="ANT">ANT</option>
|
||||
<option value="CW/ANT">CW/ANT</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 d-flex gap-2">
|
||||
<button class="btn btn-primary btn-sm" type="submit">Save User</button>
|
||||
<button id="cancelUserBtn" class="btn btn-outline-secondary btn-sm" type="button">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<aside class="panel inspector-panel">
|
||||
<div class="section-heading-row">
|
||||
<h2>Admin summary</h2>
|
||||
<span class="panel-note">Live configuration preview</span>
|
||||
</div>
|
||||
|
||||
<dl class="meta-list">
|
||||
<div>
|
||||
<dt>Active policy code</dt>
|
||||
<dd id="adminPolicyCode">-</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Allowed types</dt>
|
||||
<dd id="adminPolicyMimeTypes">-</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Optimization</dt>
|
||||
<dd id="adminPolicyOptimization">-</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Limits</dt>
|
||||
<dd id="adminPolicyLimits">-</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="validation-block">
|
||||
<h3>Admin notes</h3>
|
||||
<ul class="validation-list" id="adminNotesList">
|
||||
<li>Changes are stored on the server and reused by report attachments.</li>
|
||||
<li>Operators will use the updated policy after the next sync.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SITES -->
|
||||
<section id="panel-sites" class="admin-panel">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<p class="text-muted small mb-0">Sites</p>
|
||||
<h3 class="fw-bold mb-0">Manage Sites</h3>
|
||||
</div>
|
||||
<button id="showSiteFormBtn" class="btn btn-primary btn-sm" type="button"><i class="bi bi-plus-lg me-1"></i>Add Site</button>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-body p-0">
|
||||
<div id="siteListContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="siteFormSection" class="card" style="display:none">
|
||||
<div class="card-header"><h6 id="siteFormHeading" class="mb-0 fw-semibold">Add Site</h6></div>
|
||||
<div class="card-body">
|
||||
<form id="siteForm">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="siteSiteCode" class="form-label">Site Code</label>
|
||||
<input id="siteSiteCode" class="form-control" type="text" required />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="siteHost" class="form-label">Host</label>
|
||||
<select id="siteHost" class="form-select">
|
||||
<option value="">— Select —</option>
|
||||
<option value="OBE">OBE</option>
|
||||
<option value="PXS">PXS</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="siteObe" class="form-label">OBE Site Code</label>
|
||||
<input id="siteObe" class="form-control" type="text" />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="sitePxs" class="form-label">PXS Site Code</label>
|
||||
<input id="sitePxs" class="form-control" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 d-flex gap-2">
|
||||
<button class="btn btn-primary btn-sm" type="submit">Save Site</button>
|
||||
<button id="cancelSiteBtn" class="btn btn-outline-secondary btn-sm" type="button">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CHECK LISTS > TEMPLATES -->
|
||||
<section id="panel-cl-templates" class="admin-panel">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<p class="text-muted small mb-0">Check Lists › Templates</p>
|
||||
<h3 class="fw-bold mb-0">Manage Templates</h3>
|
||||
</div>
|
||||
<button id="showClTplFormBtn" class="btn btn-primary btn-sm" type="button"><i class="bi bi-plus-lg me-1"></i>Add Template</button>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span class="fw-semibold">Template List</span>
|
||||
<span id="clTplCount" class="badge bg-secondary">0</span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div id="clTemplateListContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="clTplFormSection" class="card" style="display:none">
|
||||
<div class="card-header"><h6 id="clTplFormHeading" class="mb-0 fw-semibold">Add Template</h6></div>
|
||||
<div class="card-body">
|
||||
<form id="clTemplateForm">
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-12">
|
||||
<label for="clTplName" class="form-label">Template Name</label>
|
||||
<input id="clTplName" class="form-control" type="text" required />
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="clTplScope" class="form-label">Scope</label>
|
||||
<select id="clTplScope" class="form-select">
|
||||
<option value="">— Select —</option>
|
||||
<option value="CW">CW</option>
|
||||
<option value="ANT">ANT</option>
|
||||
<option value="ANT_CPsite">ANT_CPsite</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="clTplVersion" class="form-label">Version</label>
|
||||
<input id="clTplVersion" class="form-control" type="text" />
|
||||
</div>
|
||||
<div class="col-md-4"></div>
|
||||
<div class="col-md-6">
|
||||
<label for="clTplValidFrom" class="form-label">Valid From</label>
|
||||
<input id="clTplValidFrom" class="form-control" type="date" />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="clTplValidTill" class="form-label">Valid Till</label>
|
||||
<input id="clTplValidTill" class="form-control" type="date" />
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="fw-semibold">Include Records</h6>
|
||||
<p class="text-muted small">Select records to include in this template.</p>
|
||||
<div id="clTplRecordSelection" class="mb-3"></div>
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-primary btn-sm" type="submit">Save Template</button>
|
||||
<button id="cancelClTplBtn" class="btn btn-outline-secondary btn-sm" type="button">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CHECK LISTS > RECORDS -->
|
||||
<section id="panel-cl-records" class="admin-panel">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<p class="text-muted small mb-0">Check Lists › Records</p>
|
||||
<h3 class="fw-bold mb-0">Manage Records</h3>
|
||||
</div>
|
||||
<button id="showClRecFormBtn" class="btn btn-primary btn-sm" type="button"><i class="bi bi-plus-lg me-1"></i>Add Record</button>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span class="fw-semibold">Record List</span>
|
||||
<span id="clRecCount" class="badge bg-secondary">0</span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div id="clRecordListContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="clRecFormSection" class="card" style="display:none">
|
||||
<div class="card-header"><h6 id="clRecFormHeading" class="mb-0 fw-semibold">Add Record</h6></div>
|
||||
<div class="card-body">
|
||||
<form id="clRecordForm">
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-3">
|
||||
<label for="clRecSort" class="form-label">Sort</label>
|
||||
<input id="clRecSort" class="form-control" type="number" min="1" step="1" required />
|
||||
<div class="form-text">Unique number.</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="clRecCategory" class="form-label">Category</label>
|
||||
<select id="clRecCategory" class="form-select"></select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="clRecSubCategory" class="form-label">Sub Category</label>
|
||||
<select id="clRecSubCategory" class="form-select"></select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="clRecSeverity" class="form-label">Severity</label>
|
||||
<select id="clRecSeverity" class="form-select"></select>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input id="clRecImageRequired" class="form-check-input" type="checkbox" />
|
||||
<label class="form-check-label" for="clRecImageRequired">Image Required — user must attach image</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="clRecDescEN" class="form-label">Description EN</label>
|
||||
<input id="clRecDescEN" class="form-control" type="text" />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="clRecDescFR" class="form-label">Description FR</label>
|
||||
<input id="clRecDescFR" class="form-control" type="text" />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="clRecDescNL" class="form-label">Description NL</label>
|
||||
<input id="clRecDescNL" class="form-control" type="text" />
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="clRecStatus" class="form-label">Status <span class="badge bg-warning text-dark">PLACEHOLDER</span></label>
|
||||
<select id="clRecStatus" class="form-select" disabled></select>
|
||||
<div class="form-text">Set by user at runtime.</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="clRecHandledBy" class="form-label">Handled By <span class="badge bg-warning text-dark">PLACEHOLDER</span></label>
|
||||
<select id="clRecHandledBy" class="form-select" disabled></select>
|
||||
<div class="form-text">Set by user at runtime.</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="clRecComment" class="form-label">Comment <span class="badge bg-warning text-dark">PLACEHOLDER</span></label>
|
||||
<textarea id="clRecComment" class="form-control" rows="2" disabled></textarea>
|
||||
<div class="form-text">Filled by user at runtime.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-primary btn-sm" type="submit">Save Record</button>
|
||||
<button id="cancelClRecBtn" class="btn btn-outline-secondary btn-sm" type="button">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- REPORTS -->
|
||||
<section id="panel-reports" class="admin-panel">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<p class="text-muted small mb-0">Reports</p>
|
||||
<h3 class="fw-bold mb-0">Task Management</h3>
|
||||
</div>
|
||||
<button id="showTaskFormBtn" class="btn btn-primary btn-sm" type="button"><i class="bi bi-plus-lg me-1"></i>Add Task</button>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-body p-0">
|
||||
<div id="taskListContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="taskFormSection" class="card" style="display:none">
|
||||
<div class="card-header"><h6 id="taskFormHeading" class="mb-0 fw-semibold">Create Task Assignment</h6></div>
|
||||
<div class="card-body">
|
||||
<form id="taskForm">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="taskUser" class="form-label">User</label>
|
||||
<select id="taskUser" class="form-select" required></select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="taskSite" class="form-label">Site</label>
|
||||
<select id="taskSite" class="form-select" required></select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="taskTemplate" class="form-label">Template</label>
|
||||
<select id="taskTemplate" class="form-select" required></select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="taskProject" class="form-label">Project</label>
|
||||
<select id="taskProject" class="form-select"></select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="taskProcess" class="form-label">Process</label>
|
||||
<select id="taskProcess" class="form-select"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 d-flex gap-2">
|
||||
<button class="btn btn-primary btn-sm" type="submit">Assign Task</button>
|
||||
<button id="cancelTaskBtn" class="btn btn-outline-secondary btn-sm" type="button">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<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 src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script type="module" src="/admin-app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user