Add SOP config tool (HTML, JS, CSS)
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
277
sop-config-tool.html
Normal file
277
sop-config-tool.html
Normal file
@@ -0,0 +1,277 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Work Package SOP Configuration Tool</title>
|
||||
<link rel="stylesheet" href="sop-config-styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- HEADER -->
|
||||
<div class="header">
|
||||
<div class="header-title">Work Package SOP Configuration</div>
|
||||
<div class="header-subtitle">Generate project-specific baseline parameters for Work Package creation</div>
|
||||
<div class="header-meta"><span class="step-counter"><span id="current-step">1</span> / 10</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- STEP CONTENT -->
|
||||
<div class="step-content">
|
||||
|
||||
<!-- STEP 1: PROJECT BASICS -->
|
||||
<div class="step" id="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">
|
||||
</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="step-2" style="display: none;">
|
||||
<h2>2. Project Team Leadership</h2>
|
||||
<div class="notice">Name the key project leaders. These are informational and will appear in SOP exports.</div>
|
||||
<div class="field-grid">
|
||||
<div class="field">
|
||||
<label>Project Manager (PM)</label>
|
||||
<input type="text" id="proj_pm" placeholder="e.g., Nick Siegfried">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Construction Manager (CM)</label>
|
||||
<input type="text" id="proj_cm" placeholder="e.g., K. Boyd">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Quality Manager (QM)</label>
|
||||
<input type="text" id="proj_qm" placeholder="e.g., D. Nguyen">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STEP 3: SIGN-OFF ROLES -->
|
||||
<div class="step" id="step-3" style="display: none;">
|
||||
<h2>3. Required Sign-Off Roles</h2>
|
||||
<div class="notice">Superintendent and Foreman are required. Add other roles as needed for your project structure.</div>
|
||||
|
||||
<div class="required-roles">
|
||||
<div class="role-required">
|
||||
<div class="role-checkbox">
|
||||
<input type="checkbox" id="role_super" checked disabled>
|
||||
<label>Superintendent *</label>
|
||||
</div>
|
||||
<input type="text" id="role_super_name" placeholder="Name (optional)" style="flex: 1; margin-left: 1rem;">
|
||||
</div>
|
||||
<div class="role-required">
|
||||
<div class="role-checkbox">
|
||||
<input type="checkbox" id="role_foreman" checked disabled>
|
||||
<label>Foreman *</label>
|
||||
</div>
|
||||
<input type="text" id="role_foreman_name" placeholder="Name (optional)" style="flex: 1; margin-left: 1rem;">
|
||||
</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;">
|
||||
<!-- Added dynamically -->
|
||||
</div>
|
||||
<button class="add-btn" onclick="addOptionalRole()">+ Add Role</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STEP 4: WORK PACKAGE TYPES -->
|
||||
<div class="step" id="step-4" style="display: none;">
|
||||
<h2>4. Work Package Types & Disciplines</h2>
|
||||
<div class="notice">Enable the WP types your project will use. Assign a discipline to each for IWP constraint checklists.</div>
|
||||
<div id="wp-types-table" style="margin-top: 1.5rem;">
|
||||
<!-- Built dynamically -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STEP 5: GOVERNANCE -->
|
||||
<div class="step" id="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.</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]-[Discipline]-[TYPE]">
|
||||
<small>Use ## for counter, [Sector] [Discipline] [TYPE] as variables</small>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Typical WP Size</label>
|
||||
<input type="text" id="gov_wosize" placeholder="e.g., 3–5 days or 40–80 hours">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Issuance Strategy</label>
|
||||
<select id="gov_issuance" multiple size="3">
|
||||
<option selected>By Sector / Area</option>
|
||||
<option>By Discipline</option>
|
||||
<option>By Phase / Sequence</option>
|
||||
<option>By Resource Availability</option>
|
||||
</select>
|
||||
<small>Hold Ctrl to select multiple</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STEP 6: QUALITY -->
|
||||
<div class="step" id="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="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>
|
||||
<small>Primary tool for WP status, progress, and reporting</small>
|
||||
</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>
|
||||
<small>Tool for system turnover, testing, and sign-offs</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STEP 8: SEQUENCE -->
|
||||
<div class="step" id="step-8" style="display: none;">
|
||||
<h2>8. Construction Sequence</h2>
|
||||
<div class="notice">Define the major phases and logical sequence of construction work. These become predecessors in WP planning.</div>
|
||||
<div id="sequence-list" style="margin-top: 1rem;">
|
||||
<!-- Built dynamically -->
|
||||
</div>
|
||||
<button class="add-btn" onclick="addSequenceStep()">+ Add Sequence Step</button>
|
||||
</div>
|
||||
|
||||
<!-- STEP 9: CONSTRAINTS -->
|
||||
<div class="step" id="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. Start with the standard 10 (AWP Vol II), or add custom constraints per your project needs.</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;">
|
||||
<!-- Built dynamically -->
|
||||
</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;">
|
||||
<!-- Built dynamically -->
|
||||
</div>
|
||||
<button class="add-btn" onclick="showConstraintLibrary()">+ Add Custom Constraint</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STEP 10: SOURCES & REFERENCES -->
|
||||
<div class="step" id="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 (Procore drawings, IO lists, cable schedules, specifications, etc.).</div>
|
||||
<div id="sources-list" style="margin-top: 1rem;">
|
||||
<!-- Built dynamically -->
|
||||
</div>
|
||||
<button class="add-btn" onclick="addSource()">+ Add Source</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- NAVIGATION -->
|
||||
<div class="step-navigation">
|
||||
<button class="nav-btn" id="prev-btn" onclick="previousStep()">← Back</button>
|
||||
<button class="nav-btn" id="next-btn" onclick="nextStep()">Next →</button>
|
||||
<button class="nav-btn primary" id="export-btn" onclick="exportSOP()" style="display: none;">⤓ Export SOP JSON</button>
|
||||
</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 id="constraint-library" style="max-height: 400px; overflow-y: auto; margin: 1rem 0;">
|
||||
<!-- Built dynamically -->
|
||||
</div>
|
||||
<button class="nav-btn" onclick="closeConstraintModal()">Done</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="sop-config-app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user