n.siegfried/Project-SDE-WP-Suite
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
9ab7b48de271254e50fa18825a265816dde1840e
Project-SDE-WP-Suite/html/work-package-suite.html
n.siegfried 9ab7b48de2 T3.2 - C3/S5: one source of truth for colour; page sheets alias only 
theme-light.css is now the only file in html/ that contains a colour literal.
The five page stylesheets and all four inline <style> blocks declare names and
nothing else.

  theme-light.css                 191 declarations, 175 with a literal value
  console.css                      28 declarations,   0
  work-package-suite-styles.css    16 declarations,   0
  wp-chrome.css                    14 declarations,   0
  wp-creation-styles.css           24 declarations,   0
  wp-sidenav.css                    0 declarations,   0

#0f62fe is declared in one sheet, down from five. The eleven occurrences left
inside theme-light.css are Carbon's own v10-to-v11 alias layer, which the
inventory records as deliberate and not the S5 defect.

Names were kept, because 111 var() references live in .js files across 23 token
names and a rename there fails silently - no build error, no console warning,
just an unstyled element.

The rule the refactor was built on: consolidation is not unification. Where two
sheets declared the same value, they collapse. Where they declared DIFFERENT
values for one role - the two shadows, the eight status borders doing four jobs,
the three mono stacks - each value got its own canonical name and the pair is
recorded for T3.5. Picking a winner between two near-identical greys is a
rendered change, which this task forbids. The console's zebra stripe is the one
that would have bitten: #fafafa is six points from #f4f4f4, and merging them
erases the striping on the nine-column user table.

Collecting the one-offs in one place made two things countable that were not
before: twelve distinct shadows, and a ninth amber (#8a6d00 on the field view,
four points from #8e6a00 and doing the same job - BL-009).

VERIFICATION - the screenshot done-when could not do the job, so it was replaced.

Captured against wave 2, 11 of 14 shots were pixel-identical and 3 were not.
Capturing wave 2 against ITSELF produced the same 3 differences at the same
bounding box, so those shots cannot distinguish a regression from the clock.
Trap 2 in the brief is half wrong: users.html is stable at both widths; the
unstable third is the creator at 1440px, and admin's captured page height varies
by ~600px between runs (BL-012).

So tests/token_check.py was added. It checks what wave 3 actually claims: that
every custom property resolves to the same literal, and every element computes
the same colours, shadows and type. That is stronger than a screenshot - it
covers the hover, focus and disabled rules a screenshot never exercises, and it
is deterministic.

  wave 2 vs T3.2, all 7 pages:
  178/178 wave-2 token names resolve identically, +213 new
  3,500 elements compute identically, zero added, zero removed
  16 tokens differ in notation only (#fff -> #ffffff), which is the duplicate
  class this task existed to collapse

Two detours worth not repeating: the element walk was first keyed by sibling
index and reported 55 phantom differences on the SOP page, where three
JS-injected overlays append in whichever order their async work finishes
(BL-011); and the comparator now normalises notation before reporting, because
otherwise it fails on its own success.

f_items 5 FIXED / F6 REPRODUCES as expected. browser_check 71/71.

ONE DONE-WHEN NOT MET, recorded rather than skipped: "no page stylesheet
declares a raw color, spacing or type value". The colour half is met in full.
483 raw spacing values, 281 font-sizes and 65 radii remain inside rules, 492 of
them in the creator. That is arithmetic, not effort: the creator's spacing is
every integer from 1px to 14px, so no token exists that padding:9px 11px maps to
without changing one of the numbers - and this task forbids changing a rendered
value. The two requirements are mutually exclusive. Logged as BL-010 for T5.x
and T7.1, where those pages are re-laid-out and the values get chosen again.

New backlog: BL-009 (ninth amber), BL-010 (raw spacing/type in rules),
BL-011 (overlay append race), BL-012 (unstable screenshot targets).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-15 18:50:30 -05:00

440 lines
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Work Package Suite</title>
<script src="auth-guard.js"></script>
<!-- Date/number formatting. Must parse BEFORE the app scripts: they format
timestamps during their own boot. -->
<script src="wp-format.js"></script>
<link rel="icon" href="favicon.ico" sizes="any">
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#161616">
<link rel="stylesheet" href="theme-light.css">
<link rel="stylesheet" href="wp-chrome.css">
<link rel="stylesheet" href="wp-sidenav.css">
<link rel="stylesheet" href="work-package-suite-styles.css">
</head>
<body>
<div class="app-container">
<!-- HEADER -->
<div class="header">
<div class="header-left">
<a href="index.html" class="logo" title="Back to Home">
<img src="prime-controls-logo.jpg" alt="Prime Controls" style="height: 24px; width: auto;">
</a>
<div style="min-width:0;overflow:hidden">
<div class="header-title">Work Package Suite</div>
<div class="header-subtitle" id="project-display"></div>
</div>
</div>
<div class="header-right">
<button id="load-sample-btn" class="header-button" onclick="loadSampleData()" title="Load sample data for the current tool (SOP or Work Package)">Load Sample</button>
<button class="header-button" onclick="toggleComments()" title="Leave feedback for the current step">Feedback</button>
<button class="header-button" onclick="openHelp()" title="How the suite works + key concepts">Help</button>
<span class="step-counter"><span id="current-step">1</span> / <span id="total-steps">10</span></span>
</div>
</div>
<!-- MAIN NAVIGATION -->
<div class="main-nav">
<button class="nav-tab active" data-tab="sop" onclick="switchTool('sop')">
SOP Configuration
</button>
<button class="nav-tab" data-tab="wp" onclick="switchTool('wp')">
Work Package Creation
</button>
<button class="nav-tab" data-tab="dashboard" onclick="switchTool('dashboard')">
Dashboard
</button>
</div>
<!-- CONTENT AREA -->
<div class="content-area">
<!-- ═════════════════════════════════════════════════════════════════════ -->
<!-- SOP CONFIGURATION TOOL -->
<!-- ═════════════════════════════════════════════════════════════════════ -->
<div id="tool-sop" class="tool active">
<!-- SOP STEP INDICATORS -->
<div class="step-nav">
<div class="steps-container">
<div class="step-item active" data-step="1" onclick="goToStep(1)">Project</div>
<div class="step-item" data-step="2" onclick="goToStep(2)">Team</div>
<div class="step-item" data-step="3" onclick="goToStep(3)">Sign-Offs</div>
<div class="step-item" data-step="4" onclick="goToStep(4)">WP Types</div>
<div class="step-item" data-step="5" onclick="goToStep(5)">Governance</div>
<div class="step-item" data-step="6" onclick="goToStep(6)">Quality</div>
<div class="step-item" data-step="7" onclick="goToStep(7)">Platforms</div>
<div class="step-item" data-step="8" onclick="goToStep(8)">Sequence</div>
<div class="step-item" data-step="9" onclick="goToStep(9)">Constraints</div>
<div class="step-item" data-step="10" onclick="goToStep(10)">Sources</div>
</div>
</div>
<!-- SOP STEP CONTENT -->
<div class="step-content">
<!-- STEP 1: PROJECT BASICS -->
<div class="step" id="sop-step-1" style="display: block;">
<h2>1. Project Basics</h2>
<div class="notice">Define the core project information that will be inherited by all Work Packages.</div>
<div class="field-grid">
<div class="field">
<label>Project Name *</label>
<input type="text" id="proj_name" placeholder="e.g., Micron — INC Construction Work Packages" oninput="updateProjectDisplay()">
</div>
<div class="field">
<label>Project Number *</label>
<input type="text" id="proj_number" placeholder="e.g., 26-67-008">
</div>
<div class="field">
<label>Client Name *</label>
<input type="text" id="proj_client" placeholder="e.g., Micron Technology, Inc.">
</div>
<div class="field">
<label>Division / Sector *</label>
<input type="text" id="proj_division" placeholder="e.g., Semiconductor, Oil & Gas, Data Center">
</div>
<div class="field">
<label>Site Location *</label>
<input type="text" id="proj_site" placeholder="e.g., Boise, ID — Fab 7">
</div>
</div>
</div>
<!-- STEP 2: PROJECT TEAM -->
<div class="step" id="sop-step-2" style="display: none;">
<h2>2. Project Team Leadership</h2>
<div class="notice">Pick the key project leaders from the people assigned to this project. Choosing a
<strong>user account</strong> (rather than typing a name) is what lets the Work Package Creator offer them
as an owner and lets the suite email them — so add anyone missing to the project first, in the
<a href="admin.html" target="_blank" rel="noopener">Admin Console</a>.</div>
<div id="team-accounts-warn" class="notice" style="display:none; background:var(--warning-bg); color:var(--warning);"></div>
<div class="field-grid">
<div class="field">
<label>Project Manager (PM)</label>
<select id="proj_pm" class="team-pick" data-team="pm"></select>
</div>
<div class="field">
<label>Assistant Project Manager (APM)</label>
<select id="proj_apm" class="team-pick" data-team="apm"></select>
</div>
<div class="field">
<label>Construction Manager (CM)</label>
<select id="proj_cm" class="team-pick" data-team="cm"></select>
<div class="field-hint">Kept on the distribution list of every work package by default.</div>
</div>
<div class="field">
<label>Quality Manager (QM)</label>
<select id="proj_qm" class="team-pick" data-team="qm"></select>
</div>
</div>
<div style="margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1.5rem;">
<div class="sub-heading">Additional Team Members (optional)</div>
<div id="team-members-list" style="margin-top: 1rem;"></div>
<button class="add-btn" onclick="addTeamMember()">+ Add Team Member</button>
</div>
</div>
<!-- STEP 3: SIGN-OFF ROLES -->
<div class="step" id="sop-step-3" style="display: none;">
<h2>3. Required Sign-Off Roles</h2>
<div class="notice">Two roles are required on every package. They default to <strong>Superintendent</strong> and <strong>Foreman</strong> — rename either to fit your project (e.g. a BIM SOP uses <em>BIM Coordinator</em> and <em>Construction Lead</em>). Add more below.</div>
<div class="required-roles">
<div class="role-required">
<div class="role-checkbox">
<input type="checkbox" id="role_super" checked disabled>
<input type="text" id="role_super_title" value="Superintendent" title="Required role title" style="font-weight:600; padding:0.4rem 0.5rem; border:1px solid var(--border); border-radius:4px; min-width:180px;"><span style="color:var(--danger); margin-left:4px;">*</span>
</div>
<select id="role_super_name" class="user-pick" style="flex: 1; margin-left: 1rem;"></select>
</div>
<div class="role-required">
<div class="role-checkbox">
<input type="checkbox" id="role_foreman" checked disabled>
<input type="text" id="role_foreman_title" value="Foreman" title="Required role title" style="font-weight:600; padding:0.4rem 0.5rem; border:1px solid var(--border); border-radius:4px; min-width:180px;"><span style="color:var(--danger); margin-left:4px;">*</span>
</div>
<select id="role_foreman_name" class="user-pick" style="flex: 1; margin-left: 1rem;"></select>
</div>
</div>
<div style="margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1.5rem;">
<div class="sub-heading">Optional Additional Roles</div>
<div id="optional-roles-list" style="margin-top: 1rem;"></div>
<button class="add-btn" onclick="addOptionalRole()">+ Add Role</button>
</div>
</div>
<!-- STEP 4: WORK PACKAGE TYPES -->
<div class="step" id="sop-step-4" style="display: none;">
<h2>4. Work Package Types</h2>
<div class="notice">Enable the WP types your project will use. Add any special rules and the roles required to approve WO completion.
<strong>Spec Section</strong> is filled onto every work package of that type automatically, so nobody types it per package.</div>
<label id="bim-toggle-wrap" style="display:flex; align-items:flex-start; gap:0.6rem; padding:0.85rem 1rem; background:var(--bg); border:1px solid var(--border); border-radius:6px; margin:0 0 1rem; cursor:pointer;">
<input type="checkbox" id="bim_enabled" onchange="setBimEnabled(this.checked)" style="width:18px; height:18px; margin-top:2px; flex:none;">
<span><strong>Include BIM / VDC work packages on this project</strong><br>
<span style="color:var(--text-dim); font-size:12px;">Adds model/engineering package types &amp; release gates. In the Creator each package is then tagged <strong>Install (IWP)</strong> or <strong>BIM (EWP)</strong>, so the project can flow from BIM into construction. Leave off for install-only projects.</span></span>
</label>
<!-- Shown instead of the toggle when an admin has the BIM tooling switched off app-wide. -->
<div id="bim-disabled-note" class="notice" style="display:none; background:var(--warning-bg); color:var(--warning);"></div>
<div id="wp-types-table" style="margin-top: 1.5rem;"></div>
</div>
<!-- STEP 5: GOVERNANCE -->
<div class="step" id="sop-step-5" style="display: none;">
<h2>5. Governance & WP Numbering</h2>
<div class="notice">Define how Work Packages are formatted, sized, and issued on this project. The choices here decide how the Work Package Creator behaves for every package.</div>
<div class="field-grid">
<div class="field">
<label>Work Package Number Format *</label>
<input type="text" id="gov_woformat" placeholder="e.g., WP##-[Sector]-[TYPE]">
<small>Use ## for counter, [Sector] [TYPE] as variables</small>
</div>
<div class="field">
<label>Issuance Strategy<span class="help-tip" data-tip="How Work Packages are grouped and released on this project. Pick one or more — most projects combine 'By Sector / Area' with 'By Phase / Sequence'.">i</span></label>
<select id="gov_issuance" multiple size="4">
<option selected>By Sector / Area</option>
<option>By Discipline</option>
<option>By Phase / Sequence</option>
<option>By Resource Availability</option>
</select>
<small>Hold Ctrl (Cmd on Mac) to select multiple.</small>
<div class="notice" style="margin-top:0.6rem; font-size:12px;">
<strong>Examples:</strong>
<ul style="margin:0.35rem 0 0; padding-left:1.1rem;">
<li><strong>By Sector / Area</strong> — one package per physical area, e.g. <em>all work in Sector 1P, Level 2 chase</em>.</li>
<li><strong>By Discipline</strong> — separate packages per trade, e.g. <em>Electrical wire-pull</em> vs <em>Mechanical install</em>.</li>
<li><strong>By Phase / Sequence</strong> — follow the build order, e.g. <em>rough-in → wire pull → terminations</em>.</li>
<li><strong>By Resource Availability</strong> — size to a crew/equipment window, e.g. <em>one boom-lift crew's week</em>.</li>
</ul>
</div>
</div>
</div>
<h3 style="margin:1.4rem 0 .4rem">How will Work Packages use disciplines?</h3>
<div class="notice">Decide whether a single package can carry more than one discipline (e.g. a chiller skid needing Mechanical install + Electrical wire-pull + Tech terminations), or whether each discipline gets its own package. This drives whether the Creator shows per-discipline scope sections and the <strong>Split by Discipline</strong> button.</div>
<div class="field-grid">
<div class="field">
<label>Disciplines on this project</label>
<input type="text" id="gov_disciplines" placeholder="Mechanical, Electrical, Tech">
<small>Comma-separated. These appear as scope sections and instance suffixes in the Creator.</small>
</div>
<div class="field">
<label>Discipline strategy *<span class="help-tip" data-tip="Decides whether a package can carry several disciplines (scope split per discipline) or one each. 'Let the planner choose' allows building a big multi-discipline package and splitting it later.">i</span></label>
<select id="gov_discmode">
<option value="choice">Let the planner choose per package (recommended)</option>
<option value="single">One discipline per package (many small packages)</option>
<option value="multi">Multiple disciplines per package (scope split by discipline)</option>
</select>
<small>"Choose per package" lets the planner build a large multi-discipline package and split it later.</small>
</div>
</div>
<h3 style="margin:1.4rem 0 .4rem">Work Package sizing</h3>
<div class="notice">A Work Package should be a manageable, trackable chunk of work — typically a 1–2 week assignment. The Creator warns the planner when a package exceeds the ceiling so it can be broken down.</div>
<div class="field-grid">
<div class="field">
<label>Typical WP Size</label>
<select id="gov_wosize" onchange="onSizePresetChange()">
<option value="">Select…</option>
<option value="Small — 1–2 days (≈8–24 hrs)">Small — 1–2 days (≈8–24 hrs)</option>
<option value="Standard — 3–5 days (≈40–80 hrs)">Standard — 3–5 days (≈40–80 hrs)</option>
<option value="Large — 1–2 weeks (≈80–160 hrs)">Large — 1–2 weeks (≈80–160 hrs)</option>
<option value="Custom…">Custom…</option>
</select>
<small>Sets the split threshold automatically; choose Custom to enter your own.</small>
</div>
<div class="field">
<label>Split threshold — max labor hours<span class="help-tip" data-tip="The Work Package Creator flags any package whose estimated hours exceed this so the planner can break it down. Auto-set by the size band; override if needed.">i</span></label>
<input type="number" id="gov_size_hours_max" min="0" step="1" placeholder="e.g., 80">
<small>Auto-set from the size above (editable). The Creator flags packages over this so they can be split.</small>
</div>
</div>
</div>
<!-- STEP 6: QUALITY -->
<div class="step" id="sop-step-6" style="display: none;">
<h2>6. Quality & Inspection Strategy</h2>
<div class="notice">Establish project-wide quality expectations that cascade to every Work Package.</div>
<div class="field-grid col1">
<div class="field">
<label>QC Required? *</label>
<select id="qual_qcreq">
<option>Yes</option>
<option>Yes — Detailed inspection items</option>
<option>Yes — Sample / Spot-check</option>
<option>No</option>
</select>
</div>
<div class="field">
<label>Photo / Documentation Standard</label>
<select id="qual_photo">
<option selected>Key checkpoints only</option>
<option>Every step documented</option>
<option>As-built final condition only</option>
<option>None</option>
</select>
</div>
<div class="field">
<label>Hold Points & Witness Requirements</label>
<textarea id="qual_hold" rows="3" placeholder="e.g., HOLD: Prime QAQC to inspect rough-in before cover/cover-up. WITNESS: client QC to observe megger test before energization."></textarea>
</div>
</div>
</div>
<!-- STEP 7: PLATFORMS -->
<div class="step" id="sop-step-7" style="display: none;">
<h2>7. Tracking & Commissioning Platforms</h2>
<div class="notice">Select the tools used for construction tracking and commissioning. These can be the same or different systems.</div>
<div class="field-grid">
<div class="field">
<label>Construction Tracking Platform *</label>
<select id="plat_tracking">
<option>CxAlloy</option>
<option>Procore</option>
<option>Autodesk Construction Cloud (ACC)</option>
<option>Other</option>
</select>
</div>
<div class="field">
<label>Commissioning Tool *</label>
<select id="plat_commissioning">
<option selected>CxAlloy</option>
<option>Procore</option>
<option>Autodesk Construction Cloud (ACC)</option>
<option>Other</option>
</select>
</div>
</div>
<div class="field" style="margin-top:1rem;">
<label>Tracking platform — project homepage link</label>
<input type="url" id="plat_tracking_url" placeholder="Paste the project's URL in the tracking platform (e.g. its Procore / CxAlloy project home)">
<small>Optional. Saved with every Work Package on this project for one-click access.</small>
</div>
<div class="field" style="margin-top:0.75rem;">
<label>Commissioning tool — project homepage link</label>
<input type="url" id="plat_commissioning_url" placeholder="Paste the project's URL in the commissioning tool">
<small>Optional. Saved with every Work Package on this project for one-click access.</small>
</div>
</div>
<!-- STEP 8: SEQUENCE -->
<div class="step" id="sop-step-8" style="display: none;">
<h2>8. Construction Sequence</h2>
<div class="notice">Comes pre-sequenced with a typical install flow. Drag the ⠿ handle to reorder steps, edit labels inline, add a QC hold gate, or remove any step.</div>
<div id="sequence-list" style="margin-top: 1rem;"></div>
<div style="display:flex; gap:0.5rem; margin-top:1rem; flex-wrap:wrap;">
<input type="text" id="seq-add-input" placeholder="New step name" onkeydown="if(event.key==='Enter'){addSequenceStep();}" style="flex:1; min-width:200px; padding:0.5rem; border:1px solid var(--border); border-radius:4px;">
<button class="add-btn" onclick="addSequenceStep()">+ Add Step</button>
<button class="add-btn" onclick="addSequenceGate()" style="background:var(--warning);">Add QC Hold</button>
</div>
</div>
<!-- STEP 9: CONSTRAINTS -->
<div class="step" id="sop-step-9" style="display: none;">
<h2>9. Release Gate Constraints</h2>
<div class="notice">Constraints are readiness items that must be cleared before a WP can be issued.</div>
<div style="margin-bottom: 2rem;">
<div class="sub-heading">Standard AWP Constraints (Vol II §2.3.2)</div>
<div id="standard-constraints" style="margin-top: 1rem;"></div>
</div>
<div style="border-top: 1px solid var(--border); padding-top: 1.5rem;">
<div class="sub-heading">Custom Constraints (Optional)</div>
<div id="custom-constraints-list" style="margin-top: 1rem;"></div>
<button class="add-btn" onclick="showConstraintLibrary()">+ Add Custom Constraint</button>
</div>
</div>
<!-- STEP 10: SOURCES -->
<div class="step" id="sop-step-10" style="display: none;">
<h2>10. Engineering Sources & References</h2>
<div class="notice">Link to key documents and systems that WP authors will reference.</div>
<div id="sources-list" style="margin-top: 1rem;"></div>
<button class="add-btn" onclick="addSource()">+ Add Source</button>
</div>
</div>
<!-- SOP NAVIGATION -->
<div class="step-navigation">
<button class="nav-btn" id="sop-prev-btn" onclick="previousStep()">Back</button>
<button class="nav-btn" id="sop-next-btn" onclick="nextStep()">Next</button>
<button class="nav-btn primary" id="sop-complete-btn" onclick="completeSOP()" style="display: none;">SOP Complete</button>
</div>
</div>
<!-- ═════════════════════════════════════════════════════════════════════ -->
<!-- WORK PACKAGE CREATION TOOL -->
<!-- ═════════════════════════════════════════════════════════════════════ -->
<div id="tool-wp" class="tool">
<!-- Shown until the SOP is complete -->
<div id="wp-gate" style="padding: 3rem 2rem; text-align: center;">
<h2>Work Package Creation</h2>
<p style="color: var(--text-light); margin: 1rem 0;">Complete the SOP Configuration first to enable Work Package creation. Once the SOP is finished, the full creator loads here with your project defaults pre-populated.</p>
<button class="nav-btn primary" onclick="switchTool('sop')" style="margin-top: 1rem;">Go to SOP Configuration</button>
</div>
<!-- The real Work Package Creator, embedded once the SOP is complete -->
<!-- Sizing stays INLINE on purpose. An iframe with no width/height falls back
to the HTML default 300x150 box, and the service worker caches this page
and the stylesheet separately — so a browser can hold new HTML with old
CSS and collapse the creator to a tiny scrolling box. Inline attributes
survive any cache mismatch; the CSS below only refines them. -->
<iframe id="wp-frame" title="Work Package Creator"
style="display:none; width:100%; border:0; min-height:calc(100vh - 200px)"></iframe>
</div>
</div>
</div>
<!-- STEP COMMENTS DROPDOWN (toggled from header) -->
<div id="comments-panel" class="comments-dropdown" style="display: none;">
<div class="comments-dropdown-header">
<strong>Feedback</strong>
<button onclick="toggleComments()" class="comments-dropdown-close" title="Close">✕</button>
</div>
<div style="margin-bottom: 1rem;">
<label style="font-weight: 600; font-size: 13px;">Your Name</label>
<input type="text" id="commenter-name" placeholder="(signed-in user)" readonly title="Taken from your sign-in" style="width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; margin-top: 0.25rem; background: var(--bg);">
</div>
<div style="margin-bottom: 1rem;">
<label style="font-weight: 600; font-size: 13px;">Feedback</label>
<textarea id="comment-text" rows="3" placeholder="Your feedback here..." style="width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; margin-top: 0.25rem; font-family: inherit;"></textarea>
</div>
<div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
<button onclick="submitComment()" style="background: var(--primary); color: var(--cds-text-on-color); padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; font-weight: 600;">Submit</button>
<button onclick="exportComments()" style="background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-weight: 600;">Export</button>
<button onclick="document.getElementById('sop-comments-import').click()" style="background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-weight: 600;">Import</button>
<input type="file" id="sop-comments-import" accept="application/json" style="display:none" onchange="importComments(event)">
</div>
<div id="comments-list" style="margin-top: 1rem; max-height: 240px; overflow-y: auto;"></div>
</div>
<!-- CONSTRAINT LIBRARY MODAL -->
<div id="constraint-modal" class="modal" style="display: none;">
<div class="modal-content">
<div class="modal-header">
<h3>Add Custom Constraint</h3>
<button class="modal-close" onclick="closeConstraintModal()">✕</button>
</div>
<div style="display:flex; gap:0.5rem; margin:1rem 0 0.5rem;">
<input type="text" id="custom-constraint-input" placeholder="Type a custom constraint name…" style="flex:1; padding:0.55rem 0.65rem; border:1px solid var(--border); border-radius:4px;" onkeydown="if(event.key==='Enter'){addCustomConstraintText();event.preventDefault();}">
<button class="add-btn" onclick="addCustomConstraintText()">Add</button>
</div>
<div style="font-size:12px; color:var(--text-dim); margin-bottom:0.5rem;">…or pick from the library:</div>
<div id="constraint-library" style="max-height: 320px; overflow-y: auto; margin: 0 0 1rem;"></div>
<button class="nav-btn" onclick="closeConstraintModal()">Done</button>
</div>
</div>
<script src="feedback-config.js"></script>
<script src="project-data.js"></script>
<script src="help.js"></script>
<script src="work-package-suite-app.js"></script>
<script src="wp-chrome.js"></script>
<script src="wp-sidenav.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink