n.siegfried
b54034db04
Wave 0 counted pushState across html/ and found 0. Every page read its query
string once at boot and never wrote one again, so you could not send anyone a
link to WP07, a refresh dropped you back at the default view, and Back left the
app entirely because the app had never added a history entry.
CR-011 and CR-014 both promise an email carrying a direct link to a work package.
That is X1, and it was blocked on this. It is not blocked now.
html/wp-url.js is the whole mechanism, and it is deliberately NOT a router.
Nothing in it intercepts navigation or renders anything; it is the query string
treated as state that can be read, merged, written and subscribed to. Pages keep
their own rendering. Query parameters rather than a hash, because the server
already serves these paths and a hash is never sent to the server - which matters
the day a link has to be resolved before the page boots.
The merge behaviour is the part that earns its place: WPUrl.push({wp:id}) keeps
the active project, and WPUrl.push({wp:''}) clears one key without needing to know
what else is in the URL. Hand-built URLs losing ?project= is the usual way this
goes wrong.
WIRED: the creator (open package, dashboard view), the SOP wizard (tool, step),
the launcher (project). Each records a history entry only when the user chose the
change - restoring from the URL uses replace, or Back would immediately add an
entry and appear to do nothing.
WPUrl.absolute() is what CR-011/CR-014 will paste into an email in wave 8.
TWO BUGS THIS TASK CREATED AND FIXED, both found by the probe rather than by
reading:
- bootSOP() calls newPackage() during boot, and newPackage() cleared ?wp=. A
deep link therefore worked and then erased its own parameter, leaving Back
with nothing to return to. Now guarded on wpCreatorReady.
- goToStep() runs validateStep(), which ends in alert() when a required field
is empty - always true on a freshly loaded page. So restoring ?step=3 from a
shared link opened a modal dialog mid-boot, and hung the browser under CDP.
Restoring a view is not a forward navigation and no longer runs the
forward-navigation guard.
The second one is worth keeping in mind for the rest of wave 4: this app has 79
native dialogs, and any of them firing during a restore path will hang a headless
browser rather than fail visibly.
VERIFICATION. tests/url_state_check.py, 23 checks, all passing, covering every
done-when on the task:
- a URL identifying a work package opens that package
- the same URL for a SIGNED-OUT user goes to login, carries the target through
?next=, and lands on the work package itself after signing in
- refresh preserves project, package, tab and view
- Back and Forward move through states, verified as still-initialised rather
than reloaded, and with the dashboard actually rendered rather than only the
URL changed
- a different user opening the same URL reaches the same view
- nothing credential-shaped appears in the query string
Metric 8, pushState: was 0 at wave 0, now 2 in html/ (one pushState and one
replaceState, both in wp-url.js) behind 6 call sites across 4 files. The raw
count stays low by design - one place writes history, which is the same reason
the token work put one place in charge of colour.
browser_check 71/71, f_items 5 FIXED / F6 REPRODUCES, aggregates 16/16.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
443 lines
27 KiB
HTML
443 lines
27 KiB
HTML
<!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>
|
||
<!-- Addressable state (S3). Parses before the app scripts, which read the URL
|
||
during their own boot. -->
|
||
<script src="wp-url.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 & 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>
|