n.siegfried
ae30c58337
X4 first, because the brief asks for it explicitly.
IMPLEMENTATION.md sequences CR-006 after B7 on the grounds that the toggles must
suppress sections inside the creator, which is an iframe child until T7.1. The
wave file puts it in wave 5 anyway, and its last done-when is written to
accommodate exactly that: "toggle state propagates into the creator, OR the PR
documents exactly where it does not and why".
It propagates. Both ways, by two separate paths, because they fail differently:
ON THE CREATOR'S OWN BOOT the flags ride on the SOP, which the creator already
reads - ProjectData.pullProject hydrates it from the server. Nothing crosses
the frame boundary at all, so this path is unaffected by B7 either way. It
covers a reload, a fresh tab, the standalone creator page, and a colleague
opening the project on another machine.
WHILE THE FRAME IS OPEN the wizard hands the change straight across
(pushSectionsToCreator -> cw.applySopSections), the same shape T5.3 used for
the dashboard filter. Without it, flipping a toggle would appear to do nothing
until a reload.
T7.1 removes the second path, not the first. That is the whole of the X4
exposure and it is one function, commented as such. Building CR-006 after B7
would not have made the SOP-borne path any different; it would only have saved
writing the hand-off.
What it does
Ten sections, one shared list (html/wp-sections.js) read by the wizard, the
creator's form and the creator's rendered document. Three surfaces meant three
chances to drift, which is how "Assets is off, except in the export" happens.
Off means NOT RENDERED - form, detail view and PDF export. It never means
deleted. renderPackage() was rebuilt from one long string into a list of
(section, html) blocks so a suppressed section leaves no empty heading and the
survivors renumber 1.0, 2.0, 3.0 instead of leaving a hole. The print window
reuses that same HTML, so the export needed no separate change.
Absent means ON. A SOP saved before today mentions no sections, and reading
that as "all off" would blank every project in the estate the moment this
shipped. WPSections.normalize is the one place that decision lives.
html/wp-sections.js new - the shared list, defaults, normalize
html/work-package-suite.html step 12, a 12th rail button
html/work-package-suite-app.js the toggles, state.sections, the hand-off
html/work-package-suite-styles.css the toggle rows
html/wp-creation-index.html stable ids on the five unnamed cards
html/wp-creation-app.js WP_SECTION_NODES, applySopSections,
renderPackage rebuilt as blocks
tests/sections_check.py new - 53 checks
Done when
[x] all 10 sections are toggleable - each one driven off and back on
[x] a section toggled off is absent from the form, the detail view and the
PDF export - checked by content marker, not by heading, so "the section
is gone" and "the section was empty" cannot be confused
[x] toggling off then on restores prior data with no loss - and the sharper
version: a package EDITED while Assets is off still carries its assets
through collectPackage(), which is what Save uses
[x] new SOPs default to all sections on
[x] toggle state propagates into the creator - both paths, separately
Two things worth arguing with
General Information is toggleable, because CR-006 enumerates it. Turning it
off leaves nothing to identify a package by. The row says so in its own note
rather than being quietly excluded from the list.
Location has no card of its own - it is a field inside General Information's
grid, and its toggle governs that one row. CR-004 gives it structured
building/floor/sector fields in wave 6, at which point one line of
WP_SECTION_NODES changes. Written down because "the toggle does nothing" and
"the toggle governs one row" look identical from outside.
Approvals & Sign-offs is NOT toggleable and is not one of the ten. A package
nobody signed is not a shorter package.
Verified one at a time
sections_check 53/53 new
stepper_check 70/70 (STEP_COUNT 11 -> 12)
locations_check 58/58 (its "step 11 is last" check now asserts the thing that
is actually invariant - the wizard's navigation follows)
browser_check 71/71
a11y 22/22
url_state 23/23
autosave 34/34
aggregates 16/16
pipeline 43/43
launcher 58/58
f_items F1-F5 FIXED, F6 REPRODUCES (T7.2)
No colour literal added: still 0 across all page sheets and inline blocks. Each
toggle says its state three ways - the checkbox, the words "In use" / "Not used",
and the rule down its left edge (C1).
Question for the PR, per CLAUDE.md: the toggles are SOP-wide, so a project
cannot use Kitting on install packages and not on BIM ones. BL-000b already
records the field-level version of this question; the per-WP-type version is the
same shape and is not recorded anywhere yet.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2218 lines
106 KiB
JavaScript
2218 lines
106 KiB
JavaScript
// ── GLOBAL STATE ──────────────────────────────────────────────────────────────
|
||
let currentTool = 'sop';
|
||
let currentStep = 1;
|
||
let sopComplete = false;
|
||
let allComments = [];
|
||
|
||
// Per-project storage key: 'wp_suite_sop' → 'wp_suite_sop__<projId>' when a
|
||
// project is active. Keeps each project's SOP separate in the browser.
|
||
function SK(base){ try { return (typeof ProjectData !== 'undefined' && ProjectData.key) ? ProjectData.key(base) : base; } catch(e){ return base; } }
|
||
|
||
// WP size presets — the dropdown label maps to a default split-threshold (max
|
||
// labor hours). The label is exported as governance.woSize (human-readable
|
||
// guidance); the number drives the Creator's "consider splitting" warning.
|
||
const WP_SIZE_PRESETS = {
|
||
'Small — 1–2 days (≈8–24 hrs)': 24,
|
||
'Standard — 3–5 days (≈40–80 hrs)': 80,
|
||
'Large — 1–2 weeks (≈80–160 hrs)': 160
|
||
};
|
||
function onSizePresetChange(){
|
||
const label = document.getElementById('gov_wosize').value;
|
||
const max = WP_SIZE_PRESETS[label];
|
||
if(max != null){ document.getElementById('gov_size_hours_max').value = max; }
|
||
// 'Custom…' / '' leave the threshold for manual entry.
|
||
}
|
||
|
||
let state = {
|
||
bimEnabled: false, // does this project also produce BIM/VDC packages? If so the Creator tags each WP Install (IWP) or BIM (EWP); if not, it's IWP-only.
|
||
project: {name:'', number:'', client:'', division:'', site:''},
|
||
// Leadership names are kept as display strings (so existing SOPs and exports
|
||
// still read the same) alongside the user-account id each one resolves to.
|
||
// The ids are what let the Creator offer these people as a WP owner and what
|
||
// notification routing uses — a typed name can't be emailed.
|
||
team: {pm:'', apm:'', cm:'', qm:''},
|
||
teamIds: {pm:'', apm:'', cm:'', qm:''},
|
||
teamMembers: [],
|
||
signoffRoles: [{role:'Superintendent',name:''},{role:'Foreman',name:''}],
|
||
wpTypes: [],
|
||
governance: {woformat:'', wosize:'', issuance:[], disciplines:['Mechanical','Electrical','Tech'], discMode:'choice', instanceSuffix:'letter', sizeHoursMax:''},
|
||
// CR-006: which work package sections this project uses. Present from the start
|
||
// rather than filled in lazily, because sopIsDirty() fingerprints this object —
|
||
// adding a key on first read would make merely LOOKING at step 12 count as an
|
||
// unsaved change and fire T4.3's guard on the way out.
|
||
sections: (typeof WPSections !== 'undefined') ? WPSections.defaults() : {},
|
||
quality: {qcreq:'', photo:'', hold:''},
|
||
platforms: {tracking:'CxAlloy', commissioning:'CxAlloy', trackingUrl:'', commissioningUrl:''},
|
||
sequence: [],
|
||
constraints: [],
|
||
sources: []
|
||
};
|
||
|
||
let sop = null; // Generated SOP for WP tool
|
||
|
||
// ── LIBRARIES ─────────────────────────────────────────────────────────────────
|
||
const DEFAULT_WP_TYPES = [
|
||
{name:'Rough-In', enabled:true},
|
||
{name:'Mechanical Install', enabled:true},
|
||
{name:'Panel Install', enabled:true},
|
||
{name:'Conduit Install', enabled:true},
|
||
{name:'Tray Install', enabled:true},
|
||
{name:'Mechanical Tubing', enabled:false},
|
||
{name:'Instrument Install', enabled:true},
|
||
{name:'Wire Pull', enabled:true},
|
||
{name:'Terminations', enabled:true},
|
||
{name:'Prefab/Kitting', enabled:false},
|
||
{name:'Network Cabling', enabled:false},
|
||
{name:'Fiber', enabled:false},
|
||
{name:'Calibrations', enabled:false}
|
||
];
|
||
|
||
const STANDARD_10_CONSTRAINTS = [
|
||
{name:'Safety & Permitting', description:'Permits, safety reviews, environmental clearances'},
|
||
{name:'Quality Control / Inspection', description:'QC approval, inspection readiness'},
|
||
{name:'IFC Drawings & Specs', description:'Issued-for-Construction drawings and specifications'},
|
||
{name:'Schedule', description:'Scheduled sequence timing confirmed'},
|
||
{name:'Materials (on site, bagged & tagged)', description:'All required materials on site and staged'},
|
||
{name:'Prefabrication', description:'Prefabricated assemblies complete'},
|
||
{name:'Work Access & Laydown', description:'Work area accessible and staged'},
|
||
{name:'Craft Availability', description:'Required craft trades available'},
|
||
{name:'Construction Equipment & Tools', description:'Special equipment and tools on site'},
|
||
{name:'Scaffolding / Access Equipment', description:'Temporary access structures in place'}
|
||
];
|
||
|
||
const CONSTRAINT_LIBRARY = [
|
||
'Utility Clearances',
|
||
'Third-Party Approvals',
|
||
'Engineering Change Notices',
|
||
'Commissioning Sign-Off',
|
||
'As-Built Documentation',
|
||
'Labeling & Identification',
|
||
'Testing & Certification',
|
||
'Rework Completion',
|
||
'Coordination with Other Trades',
|
||
'Environmental Controls',
|
||
'Critical Path Gate',
|
||
'Client Walkthrough Approval'
|
||
];
|
||
|
||
const OPTIONAL_ROLES = [
|
||
'Assistant Project Manager',
|
||
'General Foreman',
|
||
'Construction Manager',
|
||
'HSE Professional',
|
||
'Quality Representative',
|
||
'Planner',
|
||
'Safety Manager',
|
||
'Project Controls Manager',
|
||
// BIM / VDC roles (used by the BIM template; also selectable on any SOP)
|
||
'BIM Coordinator',
|
||
'BIM Modeler / Detailer',
|
||
'VDC Manager',
|
||
'Construction Lead (CRS)',
|
||
'Field Lead',
|
||
'General Contractor'
|
||
];
|
||
|
||
const LABOR_COST_CODES = [
|
||
'1000|Project Management',
|
||
'2000|Design and Development',
|
||
'2100|Design',
|
||
'2110|Control System Design',
|
||
'2120|Instrument Design',
|
||
'2130|Electrical Design',
|
||
'2140|Panel Design',
|
||
'2141|Panel Design Rework',
|
||
'2150|BIM',
|
||
'2151|BIM Rework',
|
||
'2160|Documentation',
|
||
'2200|Development',
|
||
'2210|PLC Programming',
|
||
'2220|OIT Programming',
|
||
'2230|SCADA Programming',
|
||
'2240|Simulation Development',
|
||
'2300|Customer Training',
|
||
'3000|Operational Technology',
|
||
'3100|OT Design',
|
||
'3200|Rack Assembly',
|
||
'3300|Network Configuration',
|
||
'3400|Computer Configuration',
|
||
'4000|Construction',
|
||
'4010|Instruments Install',
|
||
'4020|Network & Computers Install',
|
||
'4040|PLC Install',
|
||
'4050|Panel Install',
|
||
'4060|Electrical Install',
|
||
'4070|Mechanical Install',
|
||
'4080|Security Install',
|
||
'4090|Radio Install',
|
||
'4100|Commissioning',
|
||
'6000|Production',
|
||
'7000|Quality',
|
||
'7100|Panel Quality Control',
|
||
'7200|Factory Acceptance Testing',
|
||
'7300|Site Acceptance Testing',
|
||
'8000|Safety',
|
||
'9000|Administration'
|
||
];
|
||
|
||
// ── BIM / VDC TEMPLATE ──────────────────────────────────────────────────────────
|
||
// The BIM/VDC department also produces work packages under Advanced Work Packaging —
|
||
// model & engineering deliverables (EWPs) that feed the field's install packages.
|
||
// These defaults are drawn from the EN06 SOP + work instructions and are added by
|
||
// enableBIM() when the "Include BIM / VDC work packages" box is ticked on Step 4
|
||
// (each is flagged bim so the Creator can offer them under the EWP kind). Everything
|
||
// remains editable afterward.
|
||
const BIM_WP_TYPES = [
|
||
'Model Area Package', 'Conduit Routing Package', 'Coordination / Clash Package',
|
||
'First-of-Kind (FOK) Package', '2D Installation Sheet Set', 'Field Detailing / Markup Package',
|
||
'Laser Scan Package', 'As-Built Model / Drawings'
|
||
];
|
||
// BIM "disciplines" are the install phases work is broken into (EN06-SOP §4.1.2.5).
|
||
const BIM_PHASES = [
|
||
'Cable Tray & Hangers', 'Conduits & Hangers', 'Wall & Slab Penetrations',
|
||
'Panels & Instrument Racks', 'In-wall Instruments & Stud-ups'
|
||
];
|
||
const BIM_TEMPLATE_ROLES = [
|
||
'BIM Coordinator', 'BIM Modeler / Detailer', 'VDC Manager',
|
||
'Construction Lead (CRS)', 'Field Lead', 'General Contractor'
|
||
];
|
||
// Release-gate constraints for a BIM/model package (the BIM equivalent of the field's
|
||
// AWP constraints). Citations point back to the EN06 documents.
|
||
const BIM_CONSTRAINTS = [
|
||
{name:'Required Docs Received (IO list, P&IDs, drawings, models, specs)', description:'Project-start inputs available — EN06-SOP §3.1'},
|
||
{name:'Conduit Schedule & Schematic Redlines Received', description:'Hard gate: no conduit modeled without these — EN06-SOP §3'},
|
||
{name:'LOD Defined & Agreed', description:'Level of detail set at kick-off — EN06-G-01'},
|
||
{name:'Field Coordination / Laser Scan Complete', description:'Field walk or scan done — EN06-WI-01 / WI-03'},
|
||
{name:'Clash-Free / Coordinated with GC & Trades', description:'Coordination complete — EN06-SOP §8.1'},
|
||
{name:'Constructability Review (CRS) Signed', description:'Internal construction-lead sign-off before GC — EN06-SOP §8.4'},
|
||
{name:'GC / Trade Sign-Off', description:'GC review and approval — EN06-SOP §8.2'},
|
||
{name:'Issued-For-Fabrication (IFF) Granted', description:'Model approved for field use — EN06-SOP §9.4'}
|
||
];
|
||
const BIM_SEQUENCE = [
|
||
'Kick-off (LOD, schedule, cost code)', 'Project start — gather required docs',
|
||
'Field coordination / laser scan', 'Model racks, instruments & panels',
|
||
'Model conduit (after schedule + redlines)', 'BIM coordination / clash with GC & trades',
|
||
'Constructability review (CRS)', 'GC submission & sign-off (IFF)',
|
||
// BIM deliverable that hands off to the field — only present when BIM is enabled.
|
||
'2D installation sheets / Spool Drawings'
|
||
];
|
||
const BIM_SOURCES = [
|
||
{label:'IO List (Point Matrix DB)', ph:'controls.dev / SharePoint'},
|
||
{label:'P&IDs', ph:'Procore / SharePoint'},
|
||
{label:'Contract / Design Drawings', ph:'Procore / Bluebeam'},
|
||
{label:'Navisworks / Revit Models', ph:'BIM360 / SharePoint'},
|
||
{label:'Specs & Submittals', ph:'client portal'},
|
||
{label:'Conduit Schedule', ph:'Excel on SharePoint'},
|
||
{label:'Bluebeam Project', ph:'Bluebeam Studio'},
|
||
{label:'Pre-Construction Tracker', ph:'SharePoint'},
|
||
{label:'Constructability Review Sheet (CRS)', ph:'SharePoint'}
|
||
];
|
||
|
||
// Toggle BIM/VDC capability on the project. ON augments the SOP with BIM package
|
||
// types + release gates (flagged bim) plus BIM roles/sources/sequence steps, so the
|
||
// project produces both install (IWP) and BIM (EWP) packages. OFF strips the
|
||
// bim-flagged items. Everything stays editable.
|
||
// ── BIM/VDC app switch (admin console → Features) ─────────────────────────────
|
||
// BIM is off until it's ready for the field. With the flag off we hide the
|
||
// per-project toggle so no new project can be put on the BIM path — but we never
|
||
// strip a SOP that already has it on, because that would silently delete its BIM
|
||
// types, gates and sequence steps. Such a SOP just stops offering BIM until the
|
||
// flag comes back.
|
||
function applyBimFlag(){
|
||
const wrap = document.getElementById('bim-toggle-wrap');
|
||
const note = document.getElementById('bim-disabled-note');
|
||
const enabled = (typeof wpBimEnabled === 'function') ? wpBimEnabled() : false;
|
||
if(wrap) wrap.style.display = enabled ? '' : 'none';
|
||
if(note){
|
||
const stale = !enabled && !!state.bimEnabled;
|
||
note.style.display = enabled ? 'none' : '';
|
||
note.innerHTML = stale
|
||
? '<strong>BIM / VDC is switched off for the whole suite.</strong> This SOP already has BIM enabled, so its ' +
|
||
'BIM package types, gates and sequence steps are kept as they are — but they aren\'t offered while the ' +
|
||
'feature is off. An administrator can turn it back on under Features in the Admin Console.'
|
||
: '<strong>BIM / VDC packages aren\'t available yet.</strong> Every project is install-only (IWP) for now. ' +
|
||
'An administrator can enable the BIM tooling under Features in the Admin Console once it\'s ready.';
|
||
}
|
||
}
|
||
// Re-check once the flags land (they arrive asynchronously after auth).
|
||
document.addEventListener('wp-flags-ready', applyBimFlag);
|
||
|
||
function setBimEnabled(on){
|
||
state.bimEnabled = !!on;
|
||
if(on) enableBIM(); else disableBIM();
|
||
const cb = document.getElementById('bim_enabled'); if(cb) cb.checked = !!on;
|
||
track(on ? 'bim_enabled' : 'bim_disabled');
|
||
}
|
||
function enableBIM(){
|
||
// Package types (flagged bim so the Creator can offer them under "BIM (EWP)").
|
||
BIM_WP_TYPES.forEach(n => {
|
||
const t = state.wpTypes.find(x => x.name === n);
|
||
if(t){ t.bim = true; t.enabled = true; }
|
||
else state.wpTypes.push({name:n, enabled:true, notes:'', approval:'', bim:true});
|
||
});
|
||
renderWPTypes();
|
||
// Release-gate constraints (seed standard 10 first if empty, then add BIM gates).
|
||
if(!state.constraints || !state.constraints.length) state.constraints = STANDARD_10_CONSTRAINTS.map(c => ({...c}));
|
||
_constraintsSeeded = true;
|
||
BIM_CONSTRAINTS.forEach(c => { if(!state.constraints.some(x => x.name === c.name)) state.constraints.push({...c, bim:true}); });
|
||
renderStandardConstraints();
|
||
// BIM sign-off roles (optional), reference sources, and process steps (idempotent).
|
||
BIM_TEMPLATE_ROLES.forEach(r => { if(!state.signoffRoles.some(x => x.role === r)) state.signoffRoles.push({role:r, name:'', bim:true}); });
|
||
renderOptionalRoles();
|
||
// BIM work precedes construction, so put the BIM steps at the FRONT of the sequence.
|
||
const bimSteps = BIM_SEQUENCE.filter(lbl => !state.sequence.some(s => s.label === lbl)).map(lbl => ({label:lbl, kind:'step', bim:true}));
|
||
state.sequence = [...bimSteps, ...state.sequence];
|
||
renderSequenceSteps();
|
||
BIM_SOURCES.forEach(s => { if(!state.sources.some(x => x.label === s.label)) state.sources.push({label:s.label, system:'', notes:'', link:'', ph:s.ph, preset:true, bim:true}); });
|
||
renderSources();
|
||
}
|
||
function disableBIM(){
|
||
state.wpTypes = state.wpTypes.filter(t => !t.bim); renderWPTypes();
|
||
state.constraints = (state.constraints || []).filter(c => !c.bim); renderStandardConstraints();
|
||
state.signoffRoles = state.signoffRoles.filter((r,i) => i < 2 || !r.bim); renderOptionalRoles();
|
||
state.sequence = (state.sequence || []).filter(s => !s.bim); renderSequenceSteps();
|
||
state.sources = (state.sources || []).filter(s => !s.bim); renderSources();
|
||
}
|
||
|
||
// ── INITIALIZATION ────────────────────────────────────────────────────────────
|
||
window.addEventListener('DOMContentLoaded',()=>{
|
||
initializeWPTypes();
|
||
renderTeamMembers();
|
||
renderOptionalRoles();
|
||
renderStandardConstraints();
|
||
renderSequenceSteps();
|
||
renderSources();
|
||
// Resolve the active project FIRST so per-project storage keys are correct
|
||
// before we restore this project's SOP.
|
||
const params = new URLSearchParams(window.location.search);
|
||
const projId = params.get('project') || (typeof ProjectData!=='undefined' && ProjectData.getActiveId && ProjectData.getActiveId()) || '';
|
||
applyProjectContext(params.get('project'));
|
||
|
||
// Pull the project's shared SOP from the server into the local cache, THEN
|
||
// restore it. Falls back to the local cache if offline.
|
||
function afterPull(){
|
||
restoreSavedSOP();
|
||
updateStepUI();
|
||
updateProjectDisplay();
|
||
loadProjectUsers(); // team pickers: who's on this project
|
||
applyBimFlag(); // hide the BIM section unless an admin enabled it
|
||
// Deep-link: ?tab=sop | ?tab=wp | ?view=dashboard | ?wp=<id> | ?step=N.
|
||
//
|
||
// These used to be consumed ONCE, because a leftover ?view=dashboard made the
|
||
// Work Package Creation tab keep reopening the dashboard for the rest of the
|
||
// session. Since T4.2 the URL is not a one-shot instruction — it TRACKS the
|
||
// current state and switchTool() clears `view` when you leave the dashboard —
|
||
// so the param can be honoured every time and a refresh lands where you were.
|
||
//
|
||
// fromUrl on every call: the URL already says this, so restoring it must not
|
||
// add a history entry. Without that, the first Back after loading a deep link
|
||
// would just return you to the same view.
|
||
const tab = params.get('tab');
|
||
_deepLinkWp = params.get('wp') || '';
|
||
const wantDashboard = params.get('view') === 'dashboard';
|
||
if(wantDashboard) switchTool('dashboard', {fromUrl:true});
|
||
else if(tab === 'wp' || tab === 'sop') switchTool(tab, {fromUrl:true});
|
||
else if(_deepLinkWp) switchTool('wp', {fromUrl:true});
|
||
const bootStep = parseInt(params.get('step'), 10);
|
||
if(bootStep >= 1 && bootStep <= LAST_STEP && currentTool === 'sop') goToStep(bootStep, {fromUrl:true});
|
||
}
|
||
if(projId && typeof ProjectData!=='undefined' && ProjectData.pullProject){
|
||
ProjectData.pullProject(projId).then(afterPull).catch(afterPull);
|
||
} else {
|
||
afterPull();
|
||
}
|
||
|
||
track('app_open');
|
||
|
||
// Feedback author auto-populates from the signed-in user (auth-guard sets
|
||
// window.WP_USER and fires 'wp-auth-ready'); the field is read-only.
|
||
setCommenterName();
|
||
document.addEventListener('wp-auth-ready', setCommenterName);
|
||
|
||
let _fieldTimer;
|
||
document.addEventListener('input', e=>{
|
||
const t = e.target;
|
||
if(t && t.id && /^(INPUT|SELECT|TEXTAREA)$/.test(t.tagName)){
|
||
clearTimeout(_fieldTimer);
|
||
_fieldTimer = setTimeout(()=> track('field_edit', {field:t.id}), 600);
|
||
}
|
||
});
|
||
});
|
||
// Analytics dwell. S2 adds a SECOND beforeunload listener in wp-autosave.js for the
|
||
// unsaved-work guard; both fire, and this one does not preventDefault, so the two do
|
||
// not interact. The task says to add the guard "alongside the analytics listener
|
||
// rather than replacing it" - this is the listener it means.
|
||
window.addEventListener('beforeunload', trackStepDwell);
|
||
|
||
// ── AUTOSAVE (S2) ────────────────────────────────────────────────────────────
|
||
// The wizard already wrote its state to localStorage on save; what it lacked was
|
||
// writing it WITHOUT being asked, and telling anyone when that failed.
|
||
function sopDraftId(){
|
||
const pid = (typeof ProjectData!=='undefined' && ProjectData.getActiveId && ProjectData.getActiveId()) || 'none';
|
||
return 'sop-wizard::' + pid;
|
||
}
|
||
function sopIsDirty(){
|
||
if(currentTool !== 'sop') return false;
|
||
try {
|
||
collectStepData();
|
||
return JSON.stringify(state) !== _sopSavedFingerprint;
|
||
} catch(e){ return false; }
|
||
}
|
||
let _sopSavedFingerprint = '';
|
||
function sopMarkSaved(){ try { _sopSavedFingerprint = JSON.stringify(state); } catch(e){} }
|
||
|
||
document.addEventListener('DOMContentLoaded', function(){
|
||
if(typeof WPAutosave === 'undefined') return;
|
||
sopMarkSaved();
|
||
WPAutosave.register({
|
||
id: 'sop-wizard', scope: document, draftId: sopDraftId,
|
||
collect: function(){ collectStepData(); return state; },
|
||
isDirty: sopIsDirty,
|
||
});
|
||
// B5: in the step navigation, where Save/Next already are.
|
||
const host = document.querySelector('.step-navigation');
|
||
if(host) WPAutosave.mountIndicator(host, {id:'wp-draft-status-sop'});
|
||
});
|
||
|
||
function initializeWPTypes(){
|
||
state.wpTypes = JSON.parse(JSON.stringify(DEFAULT_WP_TYPES)).map(t=>({...t,notes:'',approval:''}));
|
||
renderWPTypes();
|
||
}
|
||
|
||
// ── LOAD SAMPLE DATA ──────────────────────────────────────────────────────────
|
||
// Context-aware: on the SOP tab it loads the sample SOP; on the WP / Dashboard
|
||
// tab it loads the example Work Package inside the embedded creator.
|
||
function loadSampleData(){
|
||
if(currentTool && currentTool !== 'sop'){
|
||
const f = document.getElementById('wp-frame');
|
||
if(f && f.contentWindow && typeof f.contentWindow.loadExample === 'function'){ f.contentWindow.loadExample(); }
|
||
else { alert('Open the Work Package Creation tab first, then load the sample.'); }
|
||
return;
|
||
}
|
||
// Populate Step 1
|
||
document.getElementById('proj_name').value = 'MICRON_PH1_CUP_HPM_FMCS INSTALL';
|
||
document.getElementById('proj_number').value = '26-67-008';
|
||
document.getElementById('proj_client').value = 'Micron Technology, Inc.';
|
||
document.getElementById('proj_division').value = 'Semiconductor';
|
||
document.getElementById('proj_site').value = 'Boise, ID — Fab 7';
|
||
|
||
// Populate Step 2. The leadership slots are account pickers now, so the sample's
|
||
// fictional names can't be "selected" — setting .value on a <select> with no
|
||
// matching option silently does nothing. Store them as names without an account,
|
||
// which is exactly how the picker shows a person who isn't a suite user yet.
|
||
state.team.pm = 'Mariano Sanchez';
|
||
state.team.apm = 'Assistant PM';
|
||
state.team.cm = 'K. Boyd';
|
||
state.team.qm = 'D. Nguyen';
|
||
state.teamIds = {pm:'', apm:'', cm:'', qm:''};
|
||
renderTeamPickers();
|
||
|
||
// Step 3 — standard required roles
|
||
if(state.signoffRoles[0]) state.signoffRoles[0].role = 'Superintendent';
|
||
if(state.signoffRoles[1]) state.signoffRoles[1].role = 'Foreman';
|
||
const stEl = document.getElementById('role_super_title'); if(stEl) stEl.value = 'Superintendent';
|
||
const ftEl = document.getElementById('role_foreman_title'); if(ftEl) ftEl.value = 'Foreman';
|
||
state.signoffRoles[0].name = 'John Smith'; state.signoffRoles[0].userId = '';
|
||
state.signoffRoles[1].name = 'Mike Jones'; state.signoffRoles[1].userId = '';
|
||
renderSignoffRolePickers();
|
||
|
||
// Populate Step 5
|
||
document.getElementById('gov_woformat').value = 'WP##-[Sector]-[TYPE]';
|
||
document.getElementById('gov_wosize').value = 'Standard — 3–5 days (≈40–80 hrs)';
|
||
document.getElementById('gov_disciplines').value = 'Mechanical, Electrical, Tech';
|
||
document.getElementById('gov_discmode').value = 'choice';
|
||
document.getElementById('gov_size_hours_max').value = '80';
|
||
|
||
// Populate Step 6
|
||
document.getElementById('qual_qcreq').value = 'Yes — Detailed inspection items';
|
||
document.getElementById('qual_photo').value = 'Key checkpoints only';
|
||
document.getElementById('qual_hold').value = 'HOLD: Prime QAQC to inspect rough-in before cover/cover-up.\nWITNESS: Client QC to observe megger test before energization.';
|
||
|
||
// Step 7 already has defaults
|
||
|
||
// The Micron FMCS sample includes BIM/VDC — enable it so the sequence shows the
|
||
// full BIM → construction flow (BIM steps first) and the Creator offers IWP/EWP.
|
||
state.bimEnabled = true;
|
||
const beEl = document.getElementById('bim_enabled'); if(beEl) beEl.checked = true;
|
||
enableBIM();
|
||
|
||
// Collect all data
|
||
collectStepData();
|
||
track('sample_loaded');
|
||
|
||
alert('✓ Sample data loaded!\n\nNavigate through the SOP steps to see example values. You can edit or replace any field.');
|
||
|
||
// Switch to step 1. Every step now holds sample content, so the rail marks them
|
||
// all as visited — otherwise a fully populated wizard shows ten unstarted steps.
|
||
for(let i = 1; i <= LAST_STEP; i++) _visitedSteps.add(i);
|
||
currentStep = 1;
|
||
updateStepUI();
|
||
updateProjectDisplay();
|
||
}
|
||
|
||
// ── RESTORE A COMPLETED SOP (for "Review" + WP tab across reloads) ─────────────
|
||
function restoreSavedSOP(){
|
||
let savedState = null, savedSop = null, complete = false;
|
||
try {
|
||
complete = localStorage.getItem(SK('wp_suite_sop_complete')) === '1';
|
||
savedState = JSON.parse(localStorage.getItem(SK('wp_suite_state')) || 'null');
|
||
savedSop = JSON.parse(localStorage.getItem(SK('wp_suite_sop')) || 'null');
|
||
} catch(e){}
|
||
if(!complete || !savedState) return;
|
||
|
||
state = savedState;
|
||
sop = savedSop;
|
||
sopComplete = true;
|
||
// A SOP saved before CR-006 mentions no sections, and "says nothing" has to
|
||
// mean every section is on — the alternative would switch them all off for
|
||
// every project in the estate. Normalised HERE, before the dirty fingerprint
|
||
// is taken, so filling the gap does not read as an edit.
|
||
if(typeof WPSections !== 'undefined') state.sections = WPSections.normalize(state.sections);
|
||
// A SOP saved before the team was account-backed has no teamIds; default them
|
||
// so the pickers render (the stored names show as "(no account)" until linked).
|
||
if(!state.teamIds) state.teamIds = {pm:'', apm:'', cm:'', qm:''};
|
||
|
||
// Re-render dynamic lists from restored state.
|
||
renderWPTypes();
|
||
renderTeamMembers();
|
||
renderOptionalRoles();
|
||
renderStandardConstraints();
|
||
renderSequenceSteps();
|
||
renderSources();
|
||
repopulateForm();
|
||
// A completed SOP has been all the way through: the rail marks every step done
|
||
// rather than showing ten unstarted steps over a finished configuration.
|
||
for(let i = 1; i <= LAST_STEP; i++) _visitedSteps.add(i);
|
||
|
||
if(typeof onSOPReady === 'function') onSOPReady(sop);
|
||
}
|
||
|
||
// Push restored state values back into the static form inputs.
|
||
function repopulateForm(){
|
||
const set = (id,val)=>{ const el=document.getElementById(id); if(el!=null && val!=null) el.value = val; };
|
||
set('proj_name', state.project.name);
|
||
set('proj_number', state.project.number);
|
||
set('proj_client', state.project.client);
|
||
set('proj_division', state.project.division);
|
||
set('proj_site', state.project.site);
|
||
// The leadership slots and sign-off names are account pickers, not text inputs —
|
||
// these build their options and mark the current selection.
|
||
renderTeamPickers();
|
||
renderSignoffRolePickers();
|
||
if(state.signoffRoles[0]) set('role_super_title', state.signoffRoles[0].role);
|
||
if(state.signoffRoles[1]) set('role_foreman_title', state.signoffRoles[1].role);
|
||
set('gov_woformat', state.governance.woformat);
|
||
// gov_wosize is now a <select>; if a saved value isn't one of the presets
|
||
// (e.g. legacy free text), add it as an option so the round-trip preserves it.
|
||
const wsEl = document.getElementById('gov_wosize');
|
||
if(wsEl && state.governance.wosize && !Array.from(wsEl.options).some(o=>o.value===state.governance.wosize)){
|
||
wsEl.add(new Option(state.governance.wosize, state.governance.wosize));
|
||
}
|
||
set('gov_wosize', state.governance.wosize);
|
||
set('gov_disciplines', (state.governance.disciplines||[]).join(', '));
|
||
set('gov_discmode', state.governance.discMode);
|
||
set('gov_size_hours_max', state.governance.sizeHoursMax);
|
||
set('qual_qcreq', state.quality.qcreq);
|
||
set('qual_photo', state.quality.photo);
|
||
set('qual_hold', state.quality.hold);
|
||
set('plat_tracking', state.platforms.tracking);
|
||
set('plat_commissioning', state.platforms.commissioning);
|
||
set('plat_tracking_url', state.platforms.trackingUrl);
|
||
set('plat_commissioning_url', state.platforms.commissioningUrl);
|
||
const beEl = document.getElementById('bim_enabled'); if(beEl) beEl.checked = !!state.bimEnabled;
|
||
}
|
||
|
||
// ── TOOL SWITCHING ────────────────────────────────────────────────────────────
|
||
function switchTool(tool, opts){
|
||
currentTool = tool;
|
||
// S3: which tool is open is addressable state. `fromUrl` is set when we are
|
||
// restoring because the user pressed Back - recording that as a new entry would
|
||
// make Back appear to do nothing.
|
||
if(typeof WPUrl !== 'undefined' && !(opts && opts.fromUrl)){
|
||
// `flag` is the dashboard's filter (T5.3). It rides in the URL so a pipeline
|
||
// cell is shareable, which also means it has to be cleared on the way out —
|
||
// otherwise leaving the board and coming back re-applies a filter nobody asked
|
||
// for a second time.
|
||
WPUrl.push(tool === 'dashboard' ? { tab: 'wp', view: 'dashboard' }
|
||
: { tab: tool, view: '', flag: '' });
|
||
}
|
||
// 'dashboard' is a pseudo-tab: it reuses the WP tool's content (the embedded
|
||
// creator) but opens it straight to the dashboard view.
|
||
const isDash = (tool === 'dashboard');
|
||
const contentTool = isDash ? 'wp' : tool;
|
||
|
||
// Update nav tabs
|
||
document.querySelectorAll('.nav-tab').forEach(t=>t.classList.remove('active'));
|
||
const tabBtn = document.querySelector(`[data-tab="${tool}"]`);
|
||
if(tabBtn) tabBtn.classList.add('active');
|
||
|
||
// Update content
|
||
document.querySelectorAll('.tool').forEach(t=>t.classList.remove('active'));
|
||
document.getElementById(`tool-${contentTool}`).classList.add('active');
|
||
|
||
if(contentTool === 'wp') renderWPTab(isDash);
|
||
// Only go full-bleed when the creator is actually showing. With the SOP
|
||
// incomplete this tab shows a short 'complete the SOP first' gate; making the
|
||
// page unscrollable around it can clip its button off the bottom.
|
||
applyEmbedLayout(contentTool === 'wp' && sopComplete);
|
||
|
||
updateStepUI();
|
||
updateProjectDisplay();
|
||
}
|
||
|
||
// The embedded creator/dashboard fills the window below the app chrome, so there
|
||
// is ONE scrollbar (the iframe's) instead of a skinny inner pane inside a scrolling
|
||
// page — and the creator's sticky bars have a real viewport to stick to.
|
||
// A work package the global search asked us to open, handed to the creator on its
|
||
// next load and then cleared.
|
||
let _deepLinkWp = '';
|
||
|
||
function applyEmbedLayout(on){
|
||
// Below this, "fill the window" leaves nothing usable: the iframe would be shorter
|
||
// than the creator's own sticky bars while the page itself can't scroll. Fall back
|
||
// to normal page flow and let the page scroll instead.
|
||
const MIN_FILL_H = 460;
|
||
const fits = (window.innerHeight - chromeHeight()) >= MIN_FILL_H;
|
||
const full = !!on && fits;
|
||
const area = document.querySelector('.content-area');
|
||
const frame = document.getElementById('wp-frame');
|
||
if(area) area.classList.toggle('embed-full', full);
|
||
if(frame) frame.classList.toggle('fill', full);
|
||
document.body.classList.toggle('embed-full', full);
|
||
sizeWPFrame(full);
|
||
}
|
||
|
||
// Size the frame with INLINE styles, not only CSS classes. Inline wins over any
|
||
// stylesheet — including a stale cached one — so the creator can't collapse to the
|
||
// 300x150 default iframe box if the CSS and the HTML are ever out of step.
|
||
function sizeWPFrame(on){
|
||
const frame = document.getElementById('wp-frame');
|
||
if(!frame) return;
|
||
frame.style.width = '100%';
|
||
frame.style.border = '0';
|
||
if(on){
|
||
const h = viewportMinusChrome();
|
||
document.documentElement.style.setProperty('--wp-chrome-h', (window.innerHeight - h) + 'px');
|
||
frame.style.height = h + 'px';
|
||
frame.style.minHeight = '0';
|
||
} else {
|
||
frame.style.height = '';
|
||
frame.style.minHeight = 'calc(100vh - 200px)';
|
||
}
|
||
}
|
||
|
||
function chromeHeight(){
|
||
const hdr = document.querySelector('.header');
|
||
const nav = document.querySelector('.main-nav');
|
||
return (hdr ? hdr.offsetHeight : 48) + (nav ? nav.offsetHeight : 48);
|
||
}
|
||
// Whatever is left of the window below the app bar + tab strip. No floor: a floor
|
||
// taller than the remaining space pushes the frame (and the creator's fixed save bar)
|
||
// off a window that has scrolling disabled.
|
||
function viewportMinusChrome(){
|
||
return Math.max(0, window.innerHeight - chromeHeight());
|
||
}
|
||
// Re-measure on resize, and re-decide whether full-bleed still fits.
|
||
window.addEventListener('resize', () => {
|
||
if(currentTool === 'wp' || currentTool === 'dashboard') applyEmbedLayout(true);
|
||
}, {passive:true});
|
||
// The app bar grows when wp-chrome.js injects the project switcher and search, which
|
||
// happens after the frame has already been sized. Watch the chrome instead of relying
|
||
// on someone resizing the window.
|
||
try {
|
||
const _ro = new ResizeObserver(() => {
|
||
if(document.body.classList.contains('embed-full')) sizeWPFrame(true);
|
||
});
|
||
['.header', '.main-nav'].forEach(sel => { const el = document.querySelector(sel); if(el) _ro.observe(el); });
|
||
} catch(e) { /* no ResizeObserver: the resize handler above still covers it */ }
|
||
|
||
// Show the gate or the embedded Work Package Creator depending on SOP status.
|
||
// wantDash=true opens the creator straight to the dashboard view.
|
||
function renderWPTab(wantDash){
|
||
const gate = document.getElementById('wp-gate');
|
||
const frame = document.getElementById('wp-frame');
|
||
if(!gate || !frame) return;
|
||
if(sopComplete){
|
||
gate.style.display = 'none';
|
||
frame.style.display = 'block';
|
||
const sp = new URLSearchParams(window.location.search);
|
||
const projId = sp.get('project') || (activeProject && activeProject.id) || '';
|
||
const wantWp = _deepLinkWp; _deepLinkWp = '';
|
||
const dash = wantDash;
|
||
|
||
// The frame's identity is the PROJECT only. The view (form vs dashboard) and
|
||
// which package to open are applied by calling into the loaded document, so
|
||
// switching tabs never reloads it — reloading discarded unsaved form edits, made
|
||
// the creator unreachable offline, and stored a fresh copy in the SW cache each
|
||
// time. It's same-origin, so a direct call is fine.
|
||
const src = 'wp-creation-index.html?embedded=1'
|
||
+ (projId ? '&project=' + encodeURIComponent(projId) : '');
|
||
|
||
const applyNow = () => {
|
||
try {
|
||
const cw = frame.contentWindow;
|
||
if(!cw) return;
|
||
if(wantWp && typeof cw.openWpById === 'function' && !cw.openWpById(wantWp)){
|
||
if(typeof cw.toast === 'function') cw.toast('That work package is not on this project.');
|
||
}
|
||
if(dash && typeof cw.showDashboard === 'function'){
|
||
// T5.3: the launcher's pipeline cells link to a filtered board. The
|
||
// creator is an iframe child whose src carries only the project, so the
|
||
// filter has to be handed across rather than read from the child's own
|
||
// URL — and BEFORE showDashboard(), which renders. B7/T7.1 dissolves
|
||
// this frame and this hand-off goes with it.
|
||
const flag = new URLSearchParams(window.location.search).get('flag') || '';
|
||
if(typeof cw.dashApplyFlag === 'function') cw.dashApplyFlag(flag);
|
||
cw.showDashboard();
|
||
}
|
||
else if(!dash && typeof cw.showForm === 'function') cw.showForm();
|
||
} catch(e){ /* cross-document timing; nothing useful to do */ }
|
||
};
|
||
// Wait for the creator's data, not just its document. `load` fires before
|
||
// pullProject() resolves, so opening a specific package straight after load
|
||
// silently found nothing.
|
||
const whenReady = () => {
|
||
try {
|
||
const cw = frame.contentWindow;
|
||
if(cw && cw.wpCreatorReady) { applyNow(); return; }
|
||
if(cw && cw.document) { cw.document.addEventListener('wp-creator-ready', applyNow, {once:true}); return; }
|
||
} catch(e){}
|
||
applyNow();
|
||
};
|
||
|
||
if(frame.getAttribute('data-src') === src && frame.contentWindow){
|
||
whenReady();
|
||
} else {
|
||
frame.setAttribute('data-src', src);
|
||
frame.addEventListener('load', whenReady, {once:true});
|
||
frame.src = src;
|
||
}
|
||
}else{
|
||
gate.style.display = 'block';
|
||
frame.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// Called from completeSOP / restoreSavedSOP once an SOP is available.
|
||
function onSOPReady(){
|
||
if(currentTool === 'wp') renderWPTab();
|
||
}
|
||
|
||
// Active project comes from the home page (?project=<id> + ProjectData.getActive()).
|
||
// When the SOP's project fields are still empty, prefill them from the project
|
||
// record so the SOP is authored against the chosen project.
|
||
let activeProject = null;
|
||
function applyProjectContext(projectId){
|
||
try {
|
||
if(typeof ProjectData !== 'undefined'){
|
||
if(projectId && ProjectData.getActiveId() !== projectId){
|
||
// Deep-linked to a project that isn't the cached active one. Seed the id
|
||
// immediately so namespaced storage keys resolve, then fetch the full record.
|
||
const cached = ProjectData.getActive();
|
||
ProjectData.setActive(cached && cached.id === projectId ? cached : { id: projectId });
|
||
ProjectData.get(projectId).then(p => { if(p){ activeProject = p; ProjectData.setActive(p); prefillProjectFields(); updateProjectDisplay(); } });
|
||
}
|
||
activeProject = ProjectData.getActive();
|
||
}
|
||
} catch(e){}
|
||
prefillProjectFields();
|
||
}
|
||
function prefillProjectFields(){
|
||
if(!activeProject) return;
|
||
const set = (id,v)=>{ const el=document.getElementById(id); if(el && !el.value && v) el.value = v; };
|
||
set('proj_name', activeProject.name);
|
||
set('proj_number', activeProject.number);
|
||
set('proj_client', activeProject.client);
|
||
set('proj_division', activeProject.division);
|
||
set('proj_site', activeProject.site);
|
||
if(typeof state !== 'undefined' && state.project){
|
||
state.project.name = state.project.name || activeProject.name || '';
|
||
state.project.number = state.project.number || activeProject.number || '';
|
||
state.project.client = state.project.client || activeProject.client || '';
|
||
state.project.division = state.project.division || activeProject.division || '';
|
||
state.project.site = state.project.site || activeProject.site || '';
|
||
}
|
||
}
|
||
function updateProjectDisplay(){
|
||
const projName = document.getElementById('proj_name')?.value || (activeProject && activeProject.name) || 'Project';
|
||
const display = document.getElementById('project-display');
|
||
if(display) display.textContent = sopComplete ? `✓ ${projName} (SOP Ready)` : projName;
|
||
}
|
||
|
||
// ── RENDERING (SOP) ────────────────────────────────────────────────────────────
|
||
function renderWPTypes(){
|
||
const container = document.getElementById('wp-types-table');
|
||
container.innerHTML = `<div class="wp-types-header">
|
||
<div>Work Order Type</div>
|
||
<div style="text-align:center;">Enabled</div>
|
||
<div>Spec Section</div>
|
||
<div>Special Rules / Notes</div>
|
||
<div>WO Complete Approval</div>
|
||
</div>`;
|
||
state.wpTypes.forEach((t,i)=>{
|
||
const row = document.createElement('div');
|
||
row.className = 'wp-type-row';
|
||
const nameCell = t.custom
|
||
? `<div style="display:flex; gap:6px; align-items:center;">
|
||
<input type="text" placeholder="Custom type name" value="${(t.name||'').replace(/"/g,'"')}" onchange="state.wpTypes[${i}].name=this.value" style="flex:1; padding:0.5rem; border:1px solid var(--border); border-radius:4px; font-weight:600;">
|
||
<button onclick="removeWPType(${i})" title="Remove custom type" style="background:var(--danger); color:#fff; border:none; border-radius:4px; width:28px; height:28px; cursor:pointer; font-weight:600; flex:none;">✕</button>
|
||
</div>`
|
||
: `<div style="font-weight:600;">${t.name}</div>`;
|
||
row.innerHTML = `
|
||
${nameCell}
|
||
<div style="text-align:center;"><input type="checkbox" ${t.enabled?'checked':''} onchange="toggleWPType(${i})" style="width:18px; height:18px; cursor:pointer;"></div>
|
||
<input type="text" placeholder="e.g. 26_05_33_00" title="Specification section for this WP type. The Creator fills it in automatically on every package of this type, so nobody types it per package." value="${(t.specSection||'').replace(/"/g,'"')}" onchange="state.wpTypes[${i}].specSection=this.value" style="padding:0.5rem; border:1px solid var(--border); border-radius:4px; font-family:var(--mono,monospace); font-size:12.5px;">
|
||
<input type="text" placeholder="Special rules…" value="${(t.notes||'').replace(/"/g,'"')}" onchange="state.wpTypes[${i}].notes=this.value" style="padding:0.5rem; border:1px solid var(--border); border-radius:4px;">
|
||
<input type="text" placeholder="PM / CM / QC…" value="${(t.approval||'').replace(/"/g,'"')}" onchange="state.wpTypes[${i}].approval=this.value" style="padding:0.5rem; border:1px solid var(--border); border-radius:4px;">
|
||
`;
|
||
container.appendChild(row);
|
||
});
|
||
const addRow = document.createElement('div');
|
||
addRow.style.cssText = 'margin-top:0.85rem;';
|
||
addRow.innerHTML = `<button onclick="addCustomWPType()" style="background:var(--primary,#0f62fe); color:#fff; border:none; padding:0.55rem 1rem; border-radius:4px; font-weight:600; cursor:pointer; font-size:13px;">+ Add custom type</button>`;
|
||
container.appendChild(addRow);
|
||
}
|
||
|
||
function toggleWPType(i){
|
||
state.wpTypes[i].enabled = !state.wpTypes[i].enabled;
|
||
renderWPTypes();
|
||
}
|
||
|
||
function addCustomWPType(){
|
||
state.wpTypes.push({name:'', enabled:true, notes:'', approval:'', custom:true});
|
||
renderWPTypes();
|
||
// Focus the new custom row's name input.
|
||
const rows = document.querySelectorAll('#wp-types-table .wp-type-row');
|
||
const last = rows[rows.length-1];
|
||
const nameInput = last && last.querySelector('input[type="text"]');
|
||
if(nameInput) nameInput.focus();
|
||
}
|
||
|
||
function removeWPType(i){
|
||
state.wpTypes.splice(i,1);
|
||
renderWPTypes();
|
||
}
|
||
|
||
// ── PROJECT TEAM (drawn from user accounts on the project) ────────────────
|
||
// The people nameable on a SOP are the project's members (plus admins), so every
|
||
// name on the team resolves to an account the suite can assign work to and email.
|
||
// Their `project_role` (job function, set in the Admin Console) is offered as the
|
||
// default title for an additional team member.
|
||
let projectUsers = []; // [{id, full_name, username, email, project_role}]
|
||
let projectUsersLoaded = false;
|
||
|
||
function userLabel(u){
|
||
const name = u.full_name || u.username || '';
|
||
return u.project_role ? `${name} — ${u.project_role}` : name;
|
||
}
|
||
function userById(id){ return projectUsers.find(u => u.id === id) || null; }
|
||
|
||
async function loadProjectUsers(){
|
||
const pid = (typeof ProjectData !== 'undefined' && ProjectData.getActiveId) ? ProjectData.getActiveId() : '';
|
||
if(pid){
|
||
try {
|
||
const r = await fetch('/api/projects/' + encodeURIComponent(pid) + '/members', {credentials:'same-origin'});
|
||
if(r.ok) projectUsers = await r.json();
|
||
} catch(e){ /* offline — fall back to whatever the SOP already stored */ }
|
||
}
|
||
projectUsersLoaded = true;
|
||
renderTeamPickers();
|
||
renderTeamMembers();
|
||
renderSignoffRolePickers();
|
||
}
|
||
|
||
// One <select> per leadership slot. A name already on the SOP that no longer
|
||
// matches an account is kept as a selected option (tagged) rather than silently
|
||
// dropped — an old SOP shouldn't lose its PM because they left the project.
|
||
function renderTeamPickers(){
|
||
const warn = document.getElementById('team-accounts-warn');
|
||
const orphans = [];
|
||
['pm','apm','cm','qm'].forEach(key => {
|
||
const sel = document.getElementById('proj_' + key);
|
||
if(!sel) return;
|
||
const curId = state.teamIds[key] || '';
|
||
const curName = state.team[key] || '';
|
||
let html = '<option value="">— not assigned —</option>' +
|
||
projectUsers.map(u => `<option value="${escAttr(u.id)}"${u.id===curId?' selected':''}>${escAttr(userLabel(u))}</option>`).join('');
|
||
// A stored name with no matching account (typed on an older SOP, or the
|
||
// person has since been removed from the project).
|
||
if(curName && !userById(curId)){
|
||
html += `<option value="__orphan__" selected>${escAttr(curName)} (no account)</option>`;
|
||
orphans.push(curName);
|
||
}
|
||
sel.innerHTML = html;
|
||
sel.onchange = function(){ setTeamLead(key, this.value); };
|
||
});
|
||
if(!warn) return;
|
||
if(projectUsersLoaded && !projectUsers.length){
|
||
warn.style.display = '';
|
||
warn.innerHTML = 'No user accounts are assigned to this project yet, so there is nobody to pick. ' +
|
||
'Assign people to the project in the <a href="admin.html" target="_blank" rel="noopener">Admin Console</a> ' +
|
||
'(User administration → Projects), then reopen this step.';
|
||
} else if(orphans.length){
|
||
warn.style.display = '';
|
||
warn.textContent = 'Named on this SOP but not a user account on the project: ' + orphans.join(', ') +
|
||
'. They cannot be assigned work packages or emailed until they are added as a user and assigned to this project.';
|
||
} else {
|
||
warn.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// One <select> of project people, reused everywhere the SOP names someone. Keeps a
|
||
// name that has no matching account as a selected "(no account)" option so older
|
||
// SOPs — and the sample's fictional names — are never silently dropped.
|
||
function userSelectOptions(curId, curName){
|
||
let html = '<option value="">— not assigned —</option>' +
|
||
projectUsers.map(u => `<option value="${escAttr(u.id)}"${u.id===curId?' selected':''}>${escAttr(userLabel(u))}</option>`).join('');
|
||
if(curName && !userById(curId)){
|
||
html += `<option value="__orphan__" selected>${escAttr(curName)} (no account)</option>`;
|
||
}
|
||
return html;
|
||
}
|
||
|
||
// Sign-off roles (step 3) name the people who must sign a package, so they use the
|
||
// same picker as the leadership slots — a signature belongs to an account.
|
||
function renderSignoffRolePickers(){
|
||
[['role_super_name', 0], ['role_foreman_name', 1]].forEach(([id, ix]) => {
|
||
const sel = document.getElementById(id);
|
||
const r = state.signoffRoles[ix];
|
||
if(!sel || !r) return;
|
||
sel.innerHTML = userSelectOptions(r.userId || '', r.name || '');
|
||
sel.onchange = function(){
|
||
if(this.value === '__orphan__') return;
|
||
const u = userById(this.value);
|
||
r.userId = u ? u.id : '';
|
||
r.name = u ? (u.full_name || u.username) : '';
|
||
renderSignoffRolePickers();
|
||
};
|
||
});
|
||
renderOptionalRoles();
|
||
}
|
||
|
||
// Read the four leadership pickers back into state. `state.team[key]` always holds
|
||
// a display NAME and `state.teamIds[key]` the account id; a name kept from an older
|
||
// SOP whose person has no account (the "(no account)" option) is left alone.
|
||
function syncTeamFromPickers(){
|
||
if(!state.teamIds) state.teamIds = {pm:'', apm:'', cm:'', qm:''};
|
||
['pm','apm','cm','qm'].forEach(key => {
|
||
const sel = document.getElementById('proj_' + key);
|
||
if(!sel) return;
|
||
if(sel.value === '__orphan__') return; // legacy typed name — keep it
|
||
const u = userById(sel.value);
|
||
state.teamIds[key] = u ? u.id : '';
|
||
if(u) state.team[key] = u.full_name || u.username;
|
||
else if(sel.value === '') state.team[key] = ''; // explicitly unassigned
|
||
});
|
||
}
|
||
|
||
function setOptionalRolePerson(ix, value){
|
||
const r = state.signoffRoles[ix];
|
||
if(!r || value === '__orphan__') return;
|
||
const u = userById(value);
|
||
r.userId = u ? u.id : '';
|
||
r.name = u ? (u.full_name || u.username) : '';
|
||
renderOptionalRoles();
|
||
}
|
||
|
||
function setTeamLead(key, userId){
|
||
if(userId === '__orphan__') return; // re-selecting the legacy name changes nothing
|
||
const u = userById(userId);
|
||
state.teamIds[key] = u ? u.id : '';
|
||
state.team[key] = u ? (u.full_name || u.username) : '';
|
||
renderTeamPickers();
|
||
}
|
||
|
||
function renderTeamMembers(){
|
||
const container = document.getElementById('team-members-list');
|
||
if(!container) return;
|
||
const opts = (cur) => '<option value="">— pick a person —</option>' +
|
||
projectUsers.map(u => `<option value="${escAttr(u.id)}"${u.id===cur?' selected':''}>${escAttr(userLabel(u))}</option>`).join('');
|
||
container.innerHTML = state.teamMembers.map((m,i)=>`
|
||
<div style="display:grid; grid-template-columns:1fr 1fr 30px; gap:1rem; align-items:center; padding:0.75rem; background:var(--bg); border-radius:6px; margin-bottom:0.5rem; border:1px solid var(--border);">
|
||
<select onchange="setExtraTeamMember(${i}, this.value)" style="padding:0.5rem; border:1px solid var(--border); border-radius:4px;">${opts(m.userId||'')}</select>
|
||
<input type="text" placeholder="Role / title on this project" value="${escAttr(m.role)}" onchange="state.teamMembers[${i}].role=this.value" style="padding:0.5rem; border:1px solid var(--border); border-radius:4px;">
|
||
<button style="background:var(--danger); color:white; padding:0.25rem; width:30px; height:30px; border:none; border-radius:4px; cursor:pointer; font-weight:600;" onclick="removeTeamMember(${i})">✕</button>
|
||
</div>
|
||
${(m.name && !m.userId) ? `<div style="font-size:12px; margin:-0.25rem 0 0.75rem 0.25rem; color:var(--warning);">“${escAttr(m.name)}” was typed on an earlier version of this SOP and has no user account — pick the person to link them.</div>` : ''}
|
||
`).join('');
|
||
}
|
||
|
||
// Picking the person fills the title from their project role but leaves it
|
||
// editable — the same person can wear a different hat on a given project.
|
||
function setExtraTeamMember(i, userId){
|
||
const m = state.teamMembers[i]; if(!m) return;
|
||
const u = userById(userId);
|
||
m.userId = u ? u.id : '';
|
||
m.name = u ? (u.full_name || u.username) : '';
|
||
if(u && !m.role) m.role = u.project_role || '';
|
||
renderTeamMembers();
|
||
}
|
||
|
||
function addTeamMember(){
|
||
state.teamMembers.push({role:'',name:'',userId:''});
|
||
renderTeamMembers();
|
||
}
|
||
|
||
function removeTeamMember(i){
|
||
state.teamMembers.splice(i,1);
|
||
renderTeamMembers();
|
||
}
|
||
|
||
function renderOptionalRoles(){
|
||
const container = document.getElementById('optional-roles-list');
|
||
// The first two entries are the required (editable-title) roles; the rest are optional.
|
||
const current = state.signoffRoles.slice(2);
|
||
container.innerHTML = current.map((r,i)=>`
|
||
<div style="display:grid; grid-template-columns:1fr 200px 30px; gap:1rem; align-items:center; padding:0.75rem; background:var(--bg); border-radius:6px; margin-bottom:0.5rem; border:1px solid var(--border);">
|
||
<select onchange="state.signoffRoles[${state.signoffRoles.indexOf(r)}].role=this.value">
|
||
${OPTIONAL_ROLES.map(o=>`<option ${r.role===o?'selected':''}>${o}</option>`).join('')}
|
||
</select>
|
||
<select onchange="setOptionalRolePerson(${state.signoffRoles.indexOf(r)}, this.value)">${userSelectOptions(r.userId||'', r.name||'')}</select>
|
||
<button class="row-del" style="background:var(--danger); color:white; padding:0.25rem; width:30px; height:30px; border:none; border-radius:4px; cursor:pointer;" onclick="removeRole(${state.signoffRoles.indexOf(r)})">✕</button>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
function addOptionalRole(){
|
||
state.signoffRoles.push({role:'General Foreman',name:''});
|
||
renderOptionalRoles();
|
||
}
|
||
|
||
function removeRole(i){
|
||
state.signoffRoles.splice(i,1);
|
||
renderOptionalRoles();
|
||
}
|
||
|
||
// Seed the standard 10 once; after that, render reflects state.constraints
|
||
// (checkbox = whether each standard one is active) and never clobbers customs.
|
||
let _constraintsSeeded = false;
|
||
function renderStandardConstraints(){
|
||
const container = document.getElementById('standard-constraints');
|
||
if(!_constraintsSeeded){
|
||
if(!state.constraints || !state.constraints.length){
|
||
state.constraints = STANDARD_10_CONSTRAINTS.map(c=>({...c}));
|
||
}
|
||
_constraintsSeeded = true;
|
||
}
|
||
const active = name => state.constraints.some(c=>c.name===name);
|
||
const critical = name => { const c = state.constraints.find(x=>x.name===name); return !!(c && c.critical); };
|
||
container.innerHTML = STANDARD_10_CONSTRAINTS.map(c=>`
|
||
<div style="display:flex; align-items:start; gap:0.75rem; padding:0.75rem; background:var(--bg); border:1px solid var(--border); border-radius:6px; margin-bottom:0.5rem;">
|
||
<input type="checkbox" id="const_${c.name}" ${active(c.name)?'checked':''} onchange="toggleConstraint('${c.name}')" style="width:18px; height:18px; cursor:pointer; margin-top:0.2rem;">
|
||
<div style="flex:1;">
|
||
<label for="const_${c.name}" style="margin:0; font-weight:600; display:block; cursor:pointer;">${c.name}</label>
|
||
<div style="font-size:12px; color:var(--text-dim); margin-top:0.25rem;">${c.description}</div>
|
||
</div>
|
||
${criticalToggle(c.name, active(c.name), critical(c.name))}
|
||
</div>
|
||
`).join('');
|
||
renderCustomConstraints();
|
||
}
|
||
|
||
// A CRITICAL constraint is one whose reopening after release is announced by
|
||
// email (PM + CM + the package owner) rather than only dropping the package to
|
||
// Issue (Hold). Only meaningful for a constraint that's switched on.
|
||
function criticalToggle(name, enabled, isCritical){
|
||
const id = 'crit_' + name.replace(/[^A-Za-z0-9]+/g,'_');
|
||
const tip = 'Critical: if this constraint reopens after the work package has been released, ' +
|
||
'notify the PM, CM and the package owner by email.';
|
||
return `<label for="${id}" title="${escAttr(tip)}" style="display:flex; align-items:center; gap:0.4rem; white-space:nowrap; font-size:12px; font-weight:600; cursor:${enabled?'pointer':'not-allowed'}; opacity:${enabled?1:0.45}; color:${isCritical?'var(--danger)':'var(--text-light)'};">
|
||
<input type="checkbox" id="${id}" ${isCritical?'checked':''} ${enabled?'':'disabled'} onchange="toggleCriticalConstraint(this.dataset.name, this.checked)" data-name="${escAttr(name)}" style="width:16px; height:16px; cursor:inherit;">
|
||
${isCritical ? '⚠ Critical' : 'Critical?'}
|
||
</label>`;
|
||
}
|
||
|
||
function toggleCriticalConstraint(name, on){
|
||
const c = state.constraints.find(x=>x.name===name);
|
||
if(!c) return;
|
||
c.critical = !!on;
|
||
renderStandardConstraints();
|
||
track(on ? 'constraint_marked_critical' : 'constraint_unmarked_critical', {name});
|
||
}
|
||
|
||
// Render the custom (non-standard) constraints into their own list with remove buttons.
|
||
function renderCustomConstraints(){
|
||
const el = document.getElementById('custom-constraints-list'); if(!el) return;
|
||
const stdNames = STANDARD_10_CONSTRAINTS.map(c=>c.name);
|
||
const customs = state.constraints.filter(c=>!stdNames.includes(c.name));
|
||
el.innerHTML = customs.length ? customs.map(c=>`
|
||
<div style="display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.6rem 0.75rem; background:var(--bg); border:1px solid var(--border); border-radius:6px; margin-bottom:0.5rem;">
|
||
<strong>${escAttr(c.name)}</strong>
|
||
<span style="display:flex; align-items:center; gap:0.75rem;">
|
||
${criticalToggle(c.name, true, !!c.critical)}
|
||
<button onclick="removeCustomConstraint('${escHandlerArg(c.name)}')" title="Remove" style="background:var(--danger); color:#fff; border:none; border-radius:4px; width:28px; height:28px; cursor:pointer; font-weight:600;">✕</button>
|
||
</span>
|
||
</div>`).join('') : `<div style="font-size:12px; color:var(--text-dim);">No custom constraints added yet.</div>`;
|
||
}
|
||
|
||
function removeCustomConstraint(name){
|
||
state.constraints = state.constraints.filter(c=>c.name!==name);
|
||
renderCustomConstraints();
|
||
}
|
||
|
||
function toggleConstraint(name){
|
||
const idx = state.constraints.findIndex(c=>c.name===name);
|
||
if(idx>=0) state.constraints.splice(idx,1);
|
||
else {
|
||
// Copy the library entry — pushing the shared object would let one project's
|
||
// `critical` flag leak into every other project's default constraint set.
|
||
const def = STANDARD_10_CONSTRAINTS.find(c=>c.name===name);
|
||
if(def) state.constraints.push({...def});
|
||
}
|
||
renderStandardConstraints(); // the Critical toggle enables/disables with the row
|
||
}
|
||
|
||
function showConstraintLibrary(){
|
||
const modal = document.getElementById('constraint-modal');
|
||
const lib = document.getElementById('constraint-library');
|
||
lib.innerHTML = CONSTRAINT_LIBRARY.map(c=>`
|
||
<div class="constraint-option" style="padding:0.75rem; background:var(--bg); border:1px solid var(--border); border-radius:6px; margin-bottom:0.5rem; cursor:pointer; transition:all 0.2s;" onmouseover="this.style.borderColor='var(--primary)'; this.style.background='var(--primary-light)'" onmouseout="this.style.borderColor='var(--border)'; this.style.background='var(--bg)'" onclick="addCustomConstraint('${c}')">
|
||
<strong>${c}</strong>
|
||
<div style="font-size:12px; color:var(--text-light); margin-top:0.25rem;">Click to add to this project</div>
|
||
</div>
|
||
`).join('');
|
||
modal.style.display = 'flex';
|
||
}
|
||
|
||
function closeConstraintModal(){
|
||
document.getElementById('constraint-modal').style.display = 'none';
|
||
}
|
||
|
||
function addCustomConstraint(name){
|
||
if(name && !state.constraints.find(c=>c.name===name)){
|
||
state.constraints.push({name,description:''});
|
||
}
|
||
closeConstraintModal();
|
||
renderStandardConstraints();
|
||
}
|
||
|
||
// Free-text custom constraint from the modal's input.
|
||
function addCustomConstraintText(){
|
||
const inp = document.getElementById('custom-constraint-input');
|
||
const name = (inp && inp.value || '').trim();
|
||
if(!name){ if(inp) inp.focus(); return; }
|
||
if(state.constraints.find(c=>c.name===name)){ alert('That constraint is already in the list.'); return; }
|
||
state.constraints.push({name, description:''});
|
||
if(inp) inp.value='';
|
||
renderStandardConstraints();
|
||
}
|
||
|
||
// Default construction flow (used when BIM is off; the BIM steps are prepended when
|
||
// the project includes BIM/VDC). Includes QC-hold gates. Items may be strings or
|
||
// {label, kind} objects.
|
||
const DEFAULT_SEQUENCE = [
|
||
{label:'Conduit Install', kind:'step'},
|
||
{label:'Tray Install', kind:'step'},
|
||
{label:'QC Hold', kind:'gate'},
|
||
{label:'Wire Pull', kind:'step'},
|
||
{label:'Device Install', kind:'step'},
|
||
{label:'Termination', kind:'step'},
|
||
{label:'QC Hold', kind:'gate'},
|
||
{label:'Commissioning', kind:'step'},
|
||
{label:'As-built (scan / redlines)', kind:'step'}
|
||
];
|
||
|
||
let seqDragIndex = null;
|
||
function renderSequenceSteps(){
|
||
const container = document.getElementById('sequence-list');
|
||
if(!container) return;
|
||
if(!state.sequence.length) state.sequence = DEFAULT_SEQUENCE.map(s=> typeof s==='string' ? {label:s,kind:'step'} : {label:s.label, kind:s.kind||'step'});
|
||
container.innerHTML = '';
|
||
let stepNo = 0;
|
||
state.sequence.forEach((item,i)=>{
|
||
const isGate = item.kind==='gate';
|
||
if(!isGate) stepNo++;
|
||
const row = document.createElement('div');
|
||
row.className = 'seq-step' + (isGate?' gate':'');
|
||
row.draggable = true;
|
||
row.dataset.idx = i;
|
||
const badge = isGate ? `<span class="seq-gate-badge" title="QC / hold gate">◆ HOLD</span>`
|
||
: `<span class="seq-num">${stepNo}</span>`;
|
||
row.innerHTML = `
|
||
<span class="seq-handle" title="Drag to reorder">⠿</span>
|
||
${badge}
|
||
<input type="text" class="seq-label" value="${(item.label||'').replace(/"/g,'"')}" oninput="state.sequence[${i}].label=this.value">
|
||
<button class="seq-del" title="Remove" onclick="removeSeqStep(${i})">✕</button>`;
|
||
row.addEventListener('dragstart',e=>{ seqDragIndex=i; row.classList.add('dragging'); e.dataTransfer.effectAllowed='move'; });
|
||
row.addEventListener('dragend',()=>{ row.classList.remove('dragging'); document.querySelectorAll('.seq-step').forEach(s=>s.classList.remove('drag-over')); });
|
||
row.addEventListener('dragover',e=>{ e.preventDefault(); row.classList.add('drag-over'); e.dataTransfer.dropEffect='move'; });
|
||
row.addEventListener('dragleave',()=>row.classList.remove('drag-over'));
|
||
row.addEventListener('drop',e=>{
|
||
e.preventDefault(); row.classList.remove('drag-over');
|
||
const from=seqDragIndex, to=i;
|
||
if(from===null||from===to) return;
|
||
const moved=state.sequence.splice(from,1)[0];
|
||
state.sequence.splice(to,0,moved);
|
||
seqDragIndex=null; renderSequenceSteps();
|
||
});
|
||
container.appendChild(row);
|
||
if(i<state.sequence.length-1){ const a=document.createElement('div'); a.className='seq-arrow'; a.textContent='↓'; container.appendChild(a); }
|
||
});
|
||
}
|
||
|
||
function addSequenceStep(){
|
||
const inp = document.getElementById('seq-add-input');
|
||
const v = (inp && inp.value || '').trim();
|
||
state.sequence.push({label: v || 'New Step', kind:'step'});
|
||
if(inp) inp.value = '';
|
||
renderSequenceSteps();
|
||
}
|
||
|
||
function addSequenceGate(){
|
||
state.sequence.push({label:'QC Hold', kind:'gate'});
|
||
renderSequenceSteps();
|
||
}
|
||
|
||
function removeSeqStep(i){
|
||
state.sequence.splice(i,1);
|
||
renderSequenceSteps();
|
||
}
|
||
|
||
const DEFAULT_SOURCES = [
|
||
{label:'Design Drawings', ph:'e.g. Procore, Bluebeam'},
|
||
{label:'Spool Drawings', ph:'e.g. SharePoint, BIM'},
|
||
{label:'Installation Detail Drawings', ph:'e.g. Prime details + Micron MVDs'},
|
||
{label:'IO List', ph:'e.g. controls.dev, Excel'},
|
||
{label:'Cable Schedule', ph:'e.g. Excel on SharePoint'},
|
||
{label:'Conduit Schedule', ph:'e.g. Excel on SharePoint'},
|
||
{label:'Tray Schedule', ph:'e.g. Excel on SharePoint'},
|
||
{label:'Datasheets', ph:'e.g. Procore'},
|
||
{label:'Specifications', ph:'e.g. client portal'},
|
||
{label:'Asset Register', ph:'e.g. CxAlloy, Excel'},
|
||
{label:'RFIs', ph:'e.g. Procore RFI log'},
|
||
{label:'Safety Documentation', ph:'e.g. site safety binder'}
|
||
];
|
||
|
||
// Escape a value for safe use inside a double-quoted HTML attribute.
|
||
// SharePoint "Copy Link" URLs contain & (and labels/notes may contain & " < >),
|
||
// so attribute values must be escaped or a re-render corrupts the field.
|
||
function escAttr(v){ return String(v==null?'':v).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); }
|
||
// A value bound into an inline handler — onclick="fn('…')" — needs BOTH escapes, in
|
||
// this order: backslash, then quote (for the JS string literal), then escAttr (for
|
||
// the attribute carrying it). Quote-escaping alone breaks on a value containing a
|
||
// backslash — the backslash escapes the backslash, the quote closes the literal, and
|
||
// the rest runs as code. Constraint names travel with the SOP to everyone on the
|
||
// project, so they are not this browser's own input.
|
||
function escHandlerArg(v){ return escAttr(String(v==null?'':v).replace(/\\/g,'\\\\').replace(/'/g,"\\'")); }
|
||
function renderSources(){
|
||
const container = document.getElementById('sources-list');
|
||
if(!state.sources.length) state.sources = DEFAULT_SOURCES.map(s=>({label:s.label, system:'', notes:'', link:'', ph:s.ph, preset:true}));
|
||
const grid = "display:grid; grid-template-columns:170px 170px 1fr 160px 30px; gap:1rem; align-items:center;";
|
||
const inStyle = "padding:0.5rem; font-size:12px; border:1px solid var(--border); border-radius:4px;";
|
||
const header = `<div style="${grid} padding:0 1rem 0.4rem; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-dim);">
|
||
<div>Data Type</div><div>Location / Platform</div><div>URL</div><div>Notes</div><div></div>
|
||
</div>`;
|
||
container.innerHTML = header + state.sources.map((s,i)=>{
|
||
// Preset data types are fixed labels; custom rows (Add Source) get an editable name.
|
||
const dataType = s.preset
|
||
? `<div style="font-weight:600; font-size:13px;">${escAttr(s.label)}</div>`
|
||
: `<input type="text" value="${escAttr(s.label)}" placeholder="Custom data type" onchange="state.sources[${i}].label=this.value" style="${inStyle} font-weight:600;">`;
|
||
return `<div style="${grid} padding:1rem; background:var(--bg); border-radius:6px; margin-bottom:0.5rem; border:1px solid var(--border);">
|
||
${dataType}
|
||
<input type="text" value="${escAttr(s.system)}" placeholder="${escAttr(s.ph||'Procore / Bluebeam / SharePoint…')}" onchange="state.sources[${i}].system=this.value" style="${inStyle}">
|
||
<input type="text" value="${escAttr(s.link)}" placeholder="Paste the 'Copy Link' URL" onchange="state.sources[${i}].link=this.value" style="${inStyle}">
|
||
<input type="text" value="${escAttr(s.notes)}" placeholder="Notes" onchange="state.sources[${i}].notes=this.value" style="${inStyle}">
|
||
<button style="background:var(--danger); color:white; padding:0.25rem; width:30px; height:30px; border:none; border-radius:4px; cursor:pointer; font-weight:600;" onclick="state.sources.splice(${i},1); renderSources()" title="Remove">✕</button>
|
||
</div>`;
|
||
}).join('');
|
||
}
|
||
|
||
function addSource(){
|
||
// Added rows are custom — the user types their own data type here.
|
||
state.sources.push({label:'', system:'', notes:'', link:'', preset:false});
|
||
renderSources();
|
||
}
|
||
|
||
// ── STEP 11: LOCATION LIST (CR-005) ───────────────────────────────────────────
|
||
// Server-backed throughout. CLAUDE.md: "If a task touches one of these and you
|
||
// find yourself writing to localStorage, you are building the wrong thing."
|
||
// CR-018 rolls cost up by these values, and a taxonomy each browser keeps its own
|
||
// copy of cannot be rolled up by anything.
|
||
//
|
||
// The list is fetched with include_inactive=true here, deliberately: this is the
|
||
// screen where you MANAGE the list, so a value somebody deactivated has to be
|
||
// visible in order to be brought back. The work package form asks for the default
|
||
// (active only), which is what makes deactivating hide it from new packages.
|
||
|
||
// Obviously fake, and labelled as such in the values themselves. IMPLEMENTATION.md
|
||
// section 8: the B100 floor and area list has not been supplied, and hardcoding a
|
||
// guess would put invented Micron floor names into the repository. "Sample" is in
|
||
// every string so nobody can mistake one for real data.
|
||
const LOCATION_SAMPLE = [
|
||
'Sample Building One,Sample Level 1,Sample Sector A',
|
||
'Sample Building One,Sample Level 1,Sample Sector B',
|
||
'Sample Building One,Sample Level 2,Sample Sector A',
|
||
'Sample Building Two,Sample Level 1,Sample Sector A',
|
||
].join('\n');
|
||
|
||
let _locNodes = [];
|
||
let _locLoaded = false;
|
||
|
||
function locProjectId(){
|
||
try {
|
||
const fromUrl = new URLSearchParams(window.location.search).get('project');
|
||
if(fromUrl) return fromUrl;
|
||
if(typeof ProjectData !== 'undefined' && ProjectData.getActiveId) return ProjectData.getActiveId() || '';
|
||
} catch(e){}
|
||
return '';
|
||
}
|
||
function locApi(suffix){
|
||
return '/api/projects/' + encodeURIComponent(locProjectId()) + '/locations' + (suffix || '');
|
||
}
|
||
function locEsc(v){ return escAttr(v); }
|
||
|
||
// Every message on this step goes through here so the role is decided in one
|
||
// place: a report that lost rows interrupts (T4.5), a clean one does not.
|
||
function locSay(html, isProblem){
|
||
const el = document.getElementById('loc-report');
|
||
if(!el) return;
|
||
el.setAttribute('role', isProblem ? 'alert' : 'status');
|
||
el.innerHTML = html || '';
|
||
el.classList.toggle('is-problem', !!isProblem);
|
||
}
|
||
|
||
function locSetAddError(msg){
|
||
const el = document.getElementById('loc-add-err');
|
||
if(el) el.textContent = msg || '';
|
||
const input = document.getElementById('loc-add-name');
|
||
if(input){
|
||
if(msg) input.setAttribute('aria-invalid', 'true');
|
||
else input.removeAttribute('aria-invalid');
|
||
}
|
||
}
|
||
|
||
function locLoad(force){
|
||
const tool = document.getElementById('loc-tool');
|
||
const warn = document.getElementById('loc-noproject');
|
||
const pid = locProjectId();
|
||
if(!pid){
|
||
if(tool) tool.style.display = 'none';
|
||
if(warn){
|
||
warn.style.display = '';
|
||
warn.textContent = 'Open this wizard from a project to configure its location list. '
|
||
+ 'The list is stored against the project on the server, not in this browser.';
|
||
}
|
||
return Promise.resolve();
|
||
}
|
||
if(tool) tool.style.display = '';
|
||
if(warn) warn.style.display = 'none';
|
||
if(_locLoaded && !force) return Promise.resolve();
|
||
return fetch(locApi('?include_inactive=true'), {headers:{'Accept':'application/json'}})
|
||
.then(r => { if(!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
|
||
.then(data => { _locNodes = data.nodes || []; _locLoaded = true; locRender(); })
|
||
.catch(err => {
|
||
_locLoaded = false;
|
||
locRender();
|
||
locSay('⚠ Could not load the location list — ' + locEsc((err && err.message) || 'offline')
|
||
+ '. It is stored on the server, so nothing local is shown in its place.', true);
|
||
});
|
||
}
|
||
|
||
function locRender(){
|
||
const list = document.getElementById('loc-list');
|
||
const count = document.getElementById('loc-count');
|
||
if(!list) return;
|
||
const active = _locNodes.filter(n => n.active);
|
||
if(count){
|
||
count.textContent = _locNodes.length
|
||
? `${active.length} value${active.length===1?'':'s'} in use`
|
||
+ (_locNodes.length > active.length ? `, ${_locNodes.length - active.length} deactivated` : '')
|
||
: '';
|
||
}
|
||
if(!_locNodes.length){
|
||
list.innerHTML = '<p class="field-hint">Nothing configured yet. Paste or upload a list above, '
|
||
+ 'or add values one at a time.</p>';
|
||
locRenderParentPicker();
|
||
return;
|
||
}
|
||
// Ordered by path from the server, so a plain walk is already the tree order.
|
||
list.innerHTML = _locNodes.map(n => {
|
||
const depth = (n.path.match(/\//g) || []).length;
|
||
return `<div class="loc-row loc-depth-${depth}${n.active ? '' : ' is-off'}" data-id="${locEsc(n.id)}">
|
||
<span class="loc-level">${locEsc(n.level)}</span>
|
||
<input class="loc-name" type="text" value="${locEsc(n.name)}"
|
||
aria-label="Name for ${locEsc(n.path)}" data-id="${locEsc(n.id)}">
|
||
<code class="loc-code" title="The stable code cost rolls up by. Renaming does not change it.">${locEsc(n.path)}</code>
|
||
<label class="loc-toggle"><input type="checkbox" class="loc-active" data-id="${locEsc(n.id)}"
|
||
${n.active ? 'checked' : ''}><span>In use</span></label>
|
||
</div>`;
|
||
}).join('');
|
||
locRenderParentPicker();
|
||
}
|
||
|
||
// What a hand-added value can hang off. A building has nothing above it, so the
|
||
// empty option is a real choice rather than a prompt.
|
||
function locRenderParentPicker(){
|
||
const sel = document.getElementById('loc-add-parent');
|
||
if(!sel) return;
|
||
const keep = sel.value;
|
||
const opts = ['<option value="">(nothing — add a building)</option>'].concat(
|
||
_locNodes.filter(n => n.active && n.level !== 'sector')
|
||
.map(n => `<option value="${locEsc(n.id)}">${locEsc(n.path)} — adds a ${n.level === 'building' ? 'floor' : 'sector'}</option>`)
|
||
);
|
||
sel.innerHTML = opts.join('');
|
||
if(keep && Array.from(sel.options).some(o => o.value === keep)) sel.value = keep;
|
||
}
|
||
|
||
function locReport(res){
|
||
const bits = [];
|
||
const problem = (res.rejected || []).length > 0 || (res.duplicates || []).length > 0;
|
||
const verb = res.dry_run ? 'would be added' : 'added';
|
||
bits.push(`<p class="loc-report-line"><strong>${res.read} row${res.read===1?'':'s'} read.</strong> `
|
||
+ `${(res.created||[]).length} value${(res.created||[]).length===1?'':'s'} ${verb}`
|
||
+ ((res.reactivated||[]).length ? `, ${res.reactivated.length} brought back into use` : '')
|
||
+ `.</p>`);
|
||
const rowList = (title, rows, fmt) => {
|
||
if(!rows || !rows.length) return '';
|
||
return `<div class="loc-report-group"><div class="loc-report-title">${locEsc(title)} (${rows.length})</div>`
|
||
+ '<ul class="loc-report-list">' + rows.map(fmt).join('') + '</ul></div>';
|
||
};
|
||
bits.push(rowList('Rejected', res.rejected,
|
||
r => `<li><span class="loc-line">row ${r.line}</span> <code>${locEsc(r.text)}</code> — ${locEsc(r.reason)}</li>`));
|
||
bits.push(rowList('Duplicates, not merged', res.duplicates,
|
||
r => `<li><span class="loc-line">row ${r.line}</span> <code>${locEsc(r.path)}</code> — ${locEsc(r.reason)}</li>`));
|
||
if(!problem && !(res.created||[]).length && !(res.reactivated||[]).length){
|
||
bits.push('<p class="loc-report-line">Nothing to do — every row is already on this project.</p>');
|
||
}
|
||
locSay(bits.join(''), problem);
|
||
}
|
||
|
||
function locImport(dryRun){
|
||
const text = (document.getElementById('loc-paste') || {}).value || '';
|
||
if(!text.trim()){
|
||
locSay('Paste some rows or choose a CSV file first.', true);
|
||
return;
|
||
}
|
||
if(!locProjectId()){ locLoad(); return; }
|
||
locSay('Checking…', false);
|
||
fetch(locApi('/import'), {
|
||
method: 'POST', headers: {'Content-Type':'application/json','Accept':'application/json'},
|
||
body: JSON.stringify({text: text, dry_run: !!dryRun}),
|
||
})
|
||
.then(r => r.json().then(j => ({ok: r.ok, status: r.status, body: j})))
|
||
.then(res => {
|
||
if(!res.ok){
|
||
locSay('⚠ Import refused — ' + locEsc((res.body && res.body.detail) || ('HTTP ' + res.status)), true);
|
||
return;
|
||
}
|
||
locReport(res.body);
|
||
if(!dryRun) return locLoad(true);
|
||
})
|
||
.catch(err => locSay('⚠ Could not reach the server — ' + locEsc((err && err.message) || 'offline')
|
||
+ '. Nothing was imported.', true));
|
||
}
|
||
|
||
function locAdd(){
|
||
const nameEl = document.getElementById('loc-add-name');
|
||
const parentEl = document.getElementById('loc-add-parent');
|
||
const name = ((nameEl || {}).value || '').trim();
|
||
if(!name){
|
||
locSetAddError('Enter a name for the value you are adding.');
|
||
if(nameEl) nameEl.focus();
|
||
return;
|
||
}
|
||
locSetAddError('');
|
||
const parentId = (parentEl || {}).value || '';
|
||
const parent = _locNodes.find(n => n.id === parentId);
|
||
const level = !parent ? 'building' : (parent.level === 'building' ? 'floor' : 'sector');
|
||
fetch(locApi(''), {
|
||
method: 'POST', headers: {'Content-Type':'application/json','Accept':'application/json'},
|
||
body: JSON.stringify({level: level, parent_id: parentId || null, name: name}),
|
||
})
|
||
.then(r => r.json().then(j => ({ok: r.ok, status: r.status, body: j})))
|
||
.then(res => {
|
||
if(!res.ok){
|
||
locSetAddError((res.body && res.body.detail) || ('Could not add it (HTTP ' + res.status + ')'));
|
||
if(nameEl) nameEl.focus();
|
||
return;
|
||
}
|
||
if(nameEl) nameEl.value = '';
|
||
locSay(`Added <code>${locEsc(res.body.path)}</code>.`, false);
|
||
return locLoad(true);
|
||
})
|
||
.catch(err => locSetAddError('Could not reach the server — ' + ((err && err.message) || 'offline')));
|
||
}
|
||
|
||
function locPatch(id, patch, describe){
|
||
return fetch(locApi('/' + encodeURIComponent(id)), {
|
||
method: 'PATCH', headers: {'Content-Type':'application/json','Accept':'application/json'},
|
||
body: JSON.stringify(patch),
|
||
})
|
||
.then(r => r.json().then(j => ({ok: r.ok, status: r.status, body: j})))
|
||
.then(res => {
|
||
if(!res.ok){
|
||
locSay('⚠ ' + locEsc((res.body && res.body.detail) || ('HTTP ' + res.status)), true);
|
||
return locLoad(true);
|
||
}
|
||
locSay(describe(res.body), false);
|
||
return locLoad(true);
|
||
})
|
||
.catch(err => locSay('⚠ Could not reach the server — ' + locEsc((err && err.message) || 'offline'), true));
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function(){
|
||
const paste = document.getElementById('loc-paste');
|
||
const file = document.getElementById('loc-file');
|
||
const btn = id => document.getElementById(id);
|
||
|
||
if(btn('loc-file-btn')) btn('loc-file-btn').addEventListener('click', () => file && file.click());
|
||
if(file) file.addEventListener('change', function(ev){
|
||
const f = ev.target.files && ev.target.files[0];
|
||
if(!f) return;
|
||
const reader = new FileReader();
|
||
reader.onload = () => {
|
||
// One parser, on the server. Reading the file here and posting its text is
|
||
// what stops "what does a blank column mean" having two answers.
|
||
if(paste) paste.value = String(reader.result || '');
|
||
locSay(`Read <strong>${locEsc(f.name)}</strong>. Check it, then import.`, false);
|
||
};
|
||
reader.onerror = () => locSay('⚠ Could not read that file.', true);
|
||
reader.readAsText(f);
|
||
ev.target.value = '';
|
||
});
|
||
if(btn('loc-check-btn')) btn('loc-check-btn').addEventListener('click', () => locImport(true));
|
||
if(btn('loc-import-btn')) btn('loc-import-btn').addEventListener('click', () => locImport(false));
|
||
if(btn('loc-sample-btn')) btn('loc-sample-btn').addEventListener('click', function(){
|
||
if(paste) paste.value = LOCATION_SAMPLE;
|
||
locSay('Sample values loaded into the box — obviously fake, and safe to import '
|
||
+ 'while the real list is being collected. Check them, then import.', false);
|
||
});
|
||
if(btn('loc-add-btn')) btn('loc-add-btn').addEventListener('click', locAdd);
|
||
const addName = btn('loc-add-name');
|
||
if(addName) addName.addEventListener('keydown', e => { if(e.key === 'Enter'){ e.preventDefault(); locAdd(); } });
|
||
|
||
const list = document.getElementById('loc-list');
|
||
if(list){
|
||
// Rename on blur, not on every keystroke: a rename is a write, and one per
|
||
// character would be a hundred writes for a hundred-character name.
|
||
list.addEventListener('change', function(e){
|
||
const t = e.target;
|
||
if(!t) return;
|
||
if(t.classList.contains('loc-active')){
|
||
const node = _locNodes.find(n => n.id === t.dataset.id);
|
||
locPatch(t.dataset.id, {active: t.checked},
|
||
b => b.active
|
||
? `<code>${locEsc(b.path)}</code> is back in use.`
|
||
: `<code>${locEsc(b.path)}</code> is no longer offered on new work packages. `
|
||
+ 'Existing packages that reference it are unchanged.');
|
||
if(node) node.active = t.checked;
|
||
return;
|
||
}
|
||
if(t.classList.contains('loc-name')){
|
||
const node = _locNodes.find(n => n.id === t.dataset.id);
|
||
const next = (t.value || '').trim();
|
||
if(!node || next === node.name){ if(node) t.value = node.name; return; }
|
||
if(!next){ t.value = node.name; return; }
|
||
locPatch(t.dataset.id, {name: next},
|
||
b => `Renamed to “${locEsc(b.name)}”. Its code <code>${locEsc(b.path)}</code> is unchanged, `
|
||
+ 'so work packages already using it still point at the same value.');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
// ── STEP 12: WORK PACKAGE SECTIONS (CR-006) ───────────────────────────────────
|
||
// Which sections of a work package this project uses. The list itself lives in
|
||
// wp-sections.js, shared with the creator so the two cannot disagree about what
|
||
// "Assets is off" means.
|
||
//
|
||
// Toggling a section OFF never deletes anything — it stops the section rendering,
|
||
// in the form, in the package and in the export. Whatever was captured stays on
|
||
// the package and comes back intact. That is the difference between this and
|
||
// removing a field, and it is the reason CR-002 and CR-016 are expressed here.
|
||
function sopSections(){
|
||
if(typeof WPSections === 'undefined') return {};
|
||
state.sections = WPSections.normalize(state.sections);
|
||
return state.sections;
|
||
}
|
||
|
||
function renderSectionToggles(){
|
||
const host = document.getElementById('section-toggles');
|
||
if(!host || typeof WPSections === 'undefined') return;
|
||
const on = sopSections();
|
||
host.innerHTML = WPSections.LIST.map(sec => `
|
||
<label class="section-toggle${on[sec.id] ? '' : ' is-off'}" for="sec-${escAttr(sec.id)}">
|
||
<input type="checkbox" id="sec-${escAttr(sec.id)}" data-section="${escAttr(sec.id)}"
|
||
${on[sec.id] ? 'checked' : ''}>
|
||
<span class="section-toggle-body">
|
||
<span class="section-toggle-name">${escAttr(sec.label)}</span>
|
||
<span class="section-toggle-note">${escAttr(sec.note)}</span>
|
||
</span>
|
||
<span class="section-toggle-state">${on[sec.id] ? 'In use' : 'Not used'}</span>
|
||
</label>`).join('');
|
||
renderSectionSummary();
|
||
}
|
||
|
||
function renderSectionSummary(){
|
||
const el = document.getElementById('section-summary');
|
||
if(!el || typeof WPSections === 'undefined') return;
|
||
const off = WPSections.offList(sopSections());
|
||
el.textContent = off.length
|
||
? `${off.length} section${off.length===1?'':'s'} turned off: ${off.join(', ')}. `
|
||
+ 'Their data is retained and returns if they are turned back on.'
|
||
: 'Every section is in use. Turn off anything this project does not need.';
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function(){
|
||
const host = document.getElementById('section-toggles');
|
||
if(!host) return;
|
||
host.addEventListener('change', function(e){
|
||
const t = e.target;
|
||
if(!t || !t.dataset || !t.dataset.section) return;
|
||
const on = sopSections();
|
||
on[t.dataset.section] = !!t.checked;
|
||
const wrap = t.closest('.section-toggle');
|
||
if(wrap){
|
||
wrap.classList.toggle('is-off', !t.checked);
|
||
const st = wrap.querySelector('.section-toggle-state');
|
||
if(st) st.textContent = t.checked ? 'In use' : 'Not used';
|
||
}
|
||
renderSectionSummary();
|
||
// The creator may already be loaded in the frame next door. Hand the change
|
||
// across rather than waiting for a reload — see pushSectionsToCreator.
|
||
pushSectionsToCreator();
|
||
});
|
||
});
|
||
|
||
// X4, the sequencing note this task had to resolve: the creator is an iframe
|
||
// child until T7.1, so the SOP it reads is the one hydrated into localStorage by
|
||
// ProjectData.pullProject at ITS boot. A toggle flipped in the wizard afterwards
|
||
// is invisible to an already-loaded frame.
|
||
//
|
||
// Two paths, therefore, and both are needed:
|
||
// • on the creator's own boot, applySOP() reads SOP.sections — this covers a
|
||
// reload, a fresh tab, and the standalone creator page;
|
||
// • while the frame is open, this hands the change straight across, the same
|
||
// way T5.3 hands the dashboard filter across.
|
||
// What T7.1 removes is the second path, not the first.
|
||
function pushSectionsToCreator(){
|
||
const frame = document.getElementById('wp-frame');
|
||
if(!frame) return false;
|
||
try {
|
||
const cw = frame.contentWindow;
|
||
if(cw && typeof cw.applySopSections === 'function'){
|
||
cw.applySopSections(sopSections());
|
||
return true;
|
||
}
|
||
} catch(e){ /* cross-document timing; the creator picks it up on its next boot */ }
|
||
return false;
|
||
}
|
||
|
||
// ── STEP GATES (A4 / S9) ──────────────────────────────────────────────────────
|
||
// validateStep() guarded steps 1, 5 and 6 with three hand-written conditions and
|
||
// three hand-written messages. The rail needs the same answer for every step, not
|
||
// just the one you are standing on, so the list is data now: one source that both
|
||
// the guard and the rail read. A rail that offers a step the guard then refuses is
|
||
// worse than no rail.
|
||
//
|
||
// The predicate reads the DOM, not `state`. collectStepData() only ever collects
|
||
// the CURRENT step, so `state.governance.woformat` is stale for any step you have
|
||
// not visited — and the rail has to judge all ten. Every step's markup is in the
|
||
// document at all times (steps are shown and hidden with display), so the fields
|
||
// are always readable.
|
||
//
|
||
// T5.8 widens this to every step whose markup marks a field required, and replaces
|
||
// the native dialog with inline errors. The shape is chosen so that is an edit to this
|
||
// table rather than to the four functions below it.
|
||
const STEP_GATES = {
|
||
1: {fields: ['proj_name', 'proj_number', 'proj_client', 'proj_division', 'proj_site'],
|
||
msg: 'Please complete all required fields: Project Name, Number, Client, Division, and Site Location.'},
|
||
5: {fields: ['gov_woformat'], msg: 'Please enter a Work Package Number Format.'},
|
||
6: {fields: ['qual_qcreq'], msg: 'Please select a QC requirement.'}
|
||
};
|
||
|
||
const STEP_LABELS = {1:'Project', 2:'Team', 3:'Sign-offs', 4:'WP types', 5:'Governance',
|
||
6:'Quality', 7:'Platforms', 8:'Sequence', 9:'Constraints', 10:'Sources',
|
||
11:'Locations', 12:'Sections'};
|
||
const LAST_STEP = 12;
|
||
|
||
// Steps you have actually been on. A stepper's tick means "done", and a step you
|
||
// have never opened is not done however its defaults happen to read — step 6's QC
|
||
// dropdown, for instance, is never empty.
|
||
//
|
||
// Deliberately NOT part of `state`: state is fingerprinted by sopIsDirty(), so
|
||
// recording navigation in it would make merely looking at a step count as an
|
||
// unsaved change and fire T4.3's unsaved-work guard on the way out.
|
||
const _visitedSteps = new Set([1]);
|
||
|
||
function stepGateMet(n){
|
||
const gate = STEP_GATES[n];
|
||
if(!gate) return true;
|
||
return gate.fields.every(id => {
|
||
const el = document.getElementById(id);
|
||
return !!(el && String(el.value || '').trim());
|
||
});
|
||
}
|
||
|
||
// What the rail may offer, stated as the guard already behaved rather than as
|
||
// something stricter. goToStep()/nextStep() have one rule: you may leave the step
|
||
// you are on once ITS required fields are filled. So the unreachable set is
|
||
// "everything ahead of here, while here is incomplete" — nothing more elaborate.
|
||
//
|
||
// The temptation is to lock every step after the first unmet gate anywhere in the
|
||
// wizard. That is a rule the guard does not enforce: with step 1 blank you can
|
||
// still jump 3 -> 5, because validateStep() only ever looks at the step you are
|
||
// standing on. A rail that showed a padlock the Next button then walked straight
|
||
// past would be the drift this table exists to prevent.
|
||
function stepReachable(n){
|
||
if(n <= currentStep) return true; // going back is never gated (previousStep never was)
|
||
return stepGateMet(currentStep);
|
||
}
|
||
|
||
// ── STEP NAVIGATION ────────────────────────────────────────────────────────────
|
||
function goToStep(n, opts){
|
||
const fromUrl = !!(opts && opts.fromUrl);
|
||
// Restoring a step from the URL is not a forward navigation, so it must not run
|
||
// the forward-navigation guard. validateStep() ends in alert() when a required
|
||
// field is empty, which on a freshly-loaded deep link is ALWAYS - so a shared
|
||
// link to step 3 opened a modal dialog before the page had finished booting.
|
||
//
|
||
// Neither is going BACKWARDS. previousStep() has never validated, so a rail that
|
||
// did would trap you on an incomplete step with no way out but the Back button —
|
||
// and the rail's whole point is that you can move around.
|
||
if(!fromUrl && n > currentStep && !validateStep(currentStep)) return;
|
||
railMessage('');
|
||
_visitedSteps.add(n);
|
||
currentStep = n;
|
||
if(typeof WPAutosave !== 'undefined') WPAutosave.flush('step');
|
||
// S3: the step you are on survives a refresh and a shared link.
|
||
if(typeof WPUrl !== 'undefined' && !fromUrl) WPUrl.push({ step: n > 1 ? n : '' });
|
||
updateStepUI();
|
||
}
|
||
|
||
// S3: Back / Forward across tools and steps. The URL is the state, so restoring is
|
||
// "read it and show that" rather than a bespoke undo stack.
|
||
if(typeof WPUrl !== 'undefined'){
|
||
WPUrl.onChange(function(state, viaPop){
|
||
if(!viaPop) return;
|
||
const wantTool = state.view === 'dashboard' ? 'dashboard' : (state.tab || 'sop');
|
||
if(wantTool !== currentTool) switchTool(wantTool, {fromUrl:true});
|
||
const step = parseInt(state.step, 10);
|
||
if(currentTool === 'sop' && step >= 1 && step !== currentStep) goToStep(step, {fromUrl:true});
|
||
});
|
||
}
|
||
|
||
function nextStep(){
|
||
if(!validateStep(currentStep)) return;
|
||
if(currentStep < LAST_STEP){
|
||
railMessage('');
|
||
currentStep++;
|
||
_visitedSteps.add(currentStep);
|
||
updateStepUI();
|
||
}
|
||
}
|
||
|
||
function previousStep(){
|
||
if(currentStep > 1){
|
||
railMessage('');
|
||
currentStep--;
|
||
_visitedSteps.add(currentStep);
|
||
updateStepUI();
|
||
}
|
||
}
|
||
|
||
// ── THE STEP RAIL (A4 / S9) ───────────────────────────────────────────────────
|
||
// One state per step, each told apart by a word and a marker shape as well as a
|
||
// colour (C1). The rail is static markup; this only re-labels it.
|
||
const _STEP_STATE_TEXT = {current: 'Current step', complete: 'Complete', locked: 'Locked', todo: ''};
|
||
|
||
function railMessage(text){
|
||
const el = document.getElementById('step-rail-msg');
|
||
if(!el) return;
|
||
// Re-setting identical text does not re-announce, and clearing then setting in
|
||
// the same tick is a no-op to most screen readers. Only touch it on a change.
|
||
if(el.textContent === text) return;
|
||
el.textContent = text;
|
||
}
|
||
|
||
function stepRailState(n){
|
||
if(n === currentStep) return 'current';
|
||
if(!stepReachable(n)) return 'locked';
|
||
// Visited AND valid. A step you have never opened is not "complete" however its
|
||
// defaults happen to read — step 6's QC dropdown, for one, is never empty.
|
||
if(_visitedSteps.has(n) && stepGateMet(n)) return 'complete';
|
||
return 'todo';
|
||
}
|
||
|
||
function renderStepRail(){
|
||
const list = document.getElementById('step-rail-list');
|
||
if(!list) return;
|
||
list.querySelectorAll('.step-btn').forEach(btn => {
|
||
const n = parseInt(btn.dataset.step, 10);
|
||
const st = stepRailState(n);
|
||
btn.classList.toggle('is-current', st === 'current');
|
||
btn.classList.toggle('is-complete', st === 'complete');
|
||
btn.classList.toggle('is-locked', st === 'locked');
|
||
if(st === 'current') btn.setAttribute('aria-current', 'step');
|
||
else btn.removeAttribute('aria-current');
|
||
// aria-disabled, not disabled: the button stays focusable so a keyboard user
|
||
// can reach it and be told what is in the way. `disabled` would remove it from
|
||
// the tab order and from most screen readers' element lists entirely.
|
||
if(st === 'locked'){
|
||
btn.setAttribute('aria-disabled', 'true');
|
||
btn.title = `Finish step ${currentStep}, ${STEP_LABELS[currentStep]}, first.`;
|
||
} else {
|
||
btn.removeAttribute('aria-disabled');
|
||
btn.removeAttribute('title');
|
||
}
|
||
const marker = btn.querySelector('.step-btn-marker');
|
||
if(marker) marker.textContent = st === 'complete' ? '✓' : String(n);
|
||
const stateEl = btn.querySelector('.step-btn-state');
|
||
if(stateEl) stateEl.textContent = _STEP_STATE_TEXT[st];
|
||
});
|
||
const pos = document.getElementById('step-rail-pos');
|
||
if(pos) pos.textContent = currentStep;
|
||
const total = document.getElementById('step-rail-total');
|
||
if(total) total.textContent = LAST_STEP;
|
||
const here = document.getElementById('step-rail-here');
|
||
if(here) here.textContent = STEP_LABELS[currentStep] || '';
|
||
}
|
||
|
||
// Clicking a step you cannot reach yet says why, and puts the cursor in the field
|
||
// that is in the way. Saying "no" and leaving you where you were, with no idea
|
||
// which of five inputs was empty, is what the old native dialog did.
|
||
//
|
||
// The blocker is always the step you are standing on — that is the only thing
|
||
// stepReachable() gates on — so there is nowhere to navigate to.
|
||
function railBlockedClick(n){
|
||
const gate = STEP_GATES[currentStep];
|
||
railMessage(`Step ${n}, ${STEP_LABELS[n]}, is not available yet — finish step ${currentStep}, ${STEP_LABELS[currentStep]}, first.`);
|
||
if(!gate) return;
|
||
const missing = gate.fields
|
||
.map(id => document.getElementById(id))
|
||
.find(el => el && !String(el.value || '').trim());
|
||
if(missing){
|
||
try { missing.scrollIntoView({block: 'center', behavior: 'smooth'}); } catch(e) { }
|
||
missing.focus();
|
||
}
|
||
}
|
||
|
||
function collapseRailIfNarrow(){
|
||
const rail = document.getElementById('step-rail');
|
||
const toggle = document.getElementById('step-rail-toggle');
|
||
if(!rail || !toggle) return;
|
||
// Only when the disclosure is the live control. Above the breakpoint the toggle
|
||
// is display:none and the list is always shown, so collapsing would set a class
|
||
// nothing reads and leave aria-expanded describing a control nobody can see.
|
||
if(!toggle.offsetParent) return;
|
||
rail.classList.add('is-collapsed');
|
||
toggle.setAttribute('aria-expanded', 'false');
|
||
}
|
||
|
||
// Every field any gate depends on, flattened once. Typing into one of these
|
||
// changes what the rail is allowed to offer, and a rail that only refreshes when
|
||
// you navigate is a rail that says "locked" over a form you have just filled in —
|
||
// which is worse than the strip it replaced, because that one at least lied
|
||
// consistently.
|
||
const _GATE_FIELD_IDS = new Set(
|
||
Object.keys(STEP_GATES).reduce((all, n) => all.concat(STEP_GATES[n].fields), []));
|
||
|
||
function railWatchField(e){
|
||
const t = e.target;
|
||
if(!t || !t.id || !_GATE_FIELD_IDS.has(t.id)) return;
|
||
// The refusal message is about a state that no longer holds once the field it
|
||
// named has been filled.
|
||
if(stepGateMet(currentStep)) railMessage('');
|
||
renderStepRail();
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function(){
|
||
const list = document.getElementById('step-rail-list');
|
||
const toggle = document.getElementById('step-rail-toggle');
|
||
document.addEventListener('input', railWatchField);
|
||
document.addEventListener('change', railWatchField);
|
||
if(toggle){
|
||
toggle.addEventListener('click', function(){
|
||
const rail = document.getElementById('step-rail');
|
||
const open = rail.classList.toggle('is-collapsed') === false;
|
||
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||
});
|
||
}
|
||
if(!list) return;
|
||
list.addEventListener('click', function(e){
|
||
const btn = e.target.closest('.step-btn');
|
||
if(!btn) return;
|
||
const n = parseInt(btn.dataset.step, 10);
|
||
if(btn.getAttribute('aria-disabled') === 'true'){ railBlockedClick(n); return; }
|
||
goToStep(n);
|
||
collapseRailIfNarrow();
|
||
});
|
||
// Enter and Space come free with <button>. Arrow keys, Home and End do not, and
|
||
// they are what makes a ten-item rail navigable rather than ten tab stops.
|
||
list.addEventListener('keydown', function(e){
|
||
const btn = e.target.closest('.step-btn');
|
||
if(!btn) return;
|
||
const btns = Array.from(list.querySelectorAll('.step-btn'));
|
||
const i = btns.indexOf(btn);
|
||
let to = -1;
|
||
if(e.key === 'ArrowDown' || e.key === 'ArrowRight') to = (i + 1) % btns.length;
|
||
else if(e.key === 'ArrowUp' || e.key === 'ArrowLeft') to = (i - 1 + btns.length) % btns.length;
|
||
else if(e.key === 'Home') to = 0;
|
||
else if(e.key === 'End') to = btns.length - 1;
|
||
if(to < 0) return;
|
||
e.preventDefault(); // stop the page scrolling out from under the rail
|
||
btns[to].focus();
|
||
});
|
||
});
|
||
|
||
function updateStepUI(){
|
||
trackStepDwell();
|
||
track('step_view', {step: currentStep});
|
||
// SOP steps
|
||
document.querySelectorAll('[id^="sop-step-"]').forEach(s=>s.style.display='none');
|
||
document.getElementById(`sop-step-${currentStep}`)?.style.display && (document.getElementById(`sop-step-${currentStep}`).style.display='block');
|
||
|
||
renderStepRail();
|
||
|
||
// The location list lives on the server, so it is fetched when the step is
|
||
// actually opened rather than on every page load. locLoad() is idempotent and
|
||
// no-ops once it has the list.
|
||
if(currentStep === 11 && typeof locLoad === 'function') locLoad();
|
||
if(currentStep === 12 && typeof renderSectionToggles === 'function') renderSectionToggles();
|
||
|
||
// Update buttons
|
||
document.getElementById('sop-prev-btn').disabled = currentStep === 1;
|
||
document.getElementById('sop-next-btn').style.display = currentStep < LAST_STEP ? 'block' : 'none';
|
||
document.getElementById('sop-complete-btn').style.display = currentStep === LAST_STEP ? 'block' : 'none';
|
||
|
||
// Collect form data
|
||
collectStepData();
|
||
}
|
||
|
||
function collectStepData(){
|
||
switch(currentStep){
|
||
case 1:
|
||
state.project.name = document.getElementById('proj_name').value;
|
||
state.project.number = document.getElementById('proj_number').value;
|
||
state.project.client = document.getElementById('proj_client').value;
|
||
state.project.division = document.getElementById('proj_division').value;
|
||
state.project.site = document.getElementById('proj_site').value;
|
||
break;
|
||
case 2:
|
||
// These are user-account pickers now, so their .value is an ID, not a name.
|
||
// Reading them straight into state.team would put an id where the display
|
||
// name belongs (and it would then print on the SOP as `user_ab12…`).
|
||
syncTeamFromPickers();
|
||
break;
|
||
case 3:
|
||
// The two required roles now have editable titles (default Superintendent/Foreman).
|
||
state.signoffRoles[0].role = (document.getElementById('role_super_title').value || 'Role 1').trim();
|
||
// Titles are still free text; the NAMES are account pickers whose .value is
|
||
// an id, so they're maintained by their own onchange (see
|
||
// renderSignoffRolePickers) rather than read as text here.
|
||
state.signoffRoles[0].role = document.getElementById('role_super_title').value || 'Superintendent';
|
||
state.signoffRoles[1].role = document.getElementById('role_foreman_title').value || 'Foreman';
|
||
break;
|
||
case 5:
|
||
state.governance.woformat = document.getElementById('gov_woformat').value;
|
||
state.governance.wosize = document.getElementById('gov_wosize').value;
|
||
const sel = document.getElementById('gov_issuance');
|
||
state.governance.issuance = Array.from(sel.selectedOptions).map(o=>o.value);
|
||
state.governance.disciplines = (document.getElementById('gov_disciplines').value||'')
|
||
.split(',').map(d=>d.trim()).filter(Boolean);
|
||
state.governance.discMode = document.getElementById('gov_discmode').value;
|
||
state.governance.sizeHoursMax = document.getElementById('gov_size_hours_max').value;
|
||
break;
|
||
case 6:
|
||
state.quality.qcreq = document.getElementById('qual_qcreq').value;
|
||
state.quality.photo = document.getElementById('qual_photo').value;
|
||
state.quality.hold = document.getElementById('qual_hold').value;
|
||
break;
|
||
case 7:
|
||
state.platforms.tracking = document.getElementById('plat_tracking').value;
|
||
state.platforms.commissioning = document.getElementById('plat_commissioning').value;
|
||
state.platforms.trackingUrl = (document.getElementById('plat_tracking_url').value || '').trim();
|
||
state.platforms.commissioningUrl = (document.getElementById('plat_commissioning_url').value || '').trim();
|
||
break;
|
||
}
|
||
}
|
||
|
||
// Same three gates, same three messages, read from STEP_GATES so the rail and the
|
||
// guard can never disagree about which steps are open. T5.8 replaces the dialog
|
||
// here with inline field errors; the table above is what it will validate against.
|
||
function validateStep(n){
|
||
collectStepData();
|
||
if(!stepGateMet(n)){
|
||
alert(STEP_GATES[n].msg);
|
||
return false;
|
||
}
|
||
return true;
|
||
}
|
||
|
||
// ── SOP COMPLETION ────────────────────────────────────────────────────────────
|
||
// Re-saving a SOP that is already complete changes the project's baseline, which
|
||
// the server restricts to a Project Admin. Check before doing the work so the
|
||
// answer is a clear message rather than a 403 from the sync outbox.
|
||
function canEditCompletedSOP(){
|
||
return (typeof wpCanEditCompletedSOP === 'function') ? wpCanEditCompletedSOP() : true;
|
||
}
|
||
|
||
function completeSOP(){
|
||
if(sopComplete && !canEditCompletedSOP()){
|
||
alert('This project\'s SOP is already complete, and changing it needs the Project Admin role.\n\n' +
|
||
'Ask a project admin to make the change — the SOP is the baseline every work package inherits.');
|
||
return;
|
||
}
|
||
if(!validateStep(LAST_STEP)) return;
|
||
collectStepData();
|
||
|
||
sop = {
|
||
meta: {tool:'Work Package Configuration', sample:false},
|
||
bimEnabled: !!state.bimEnabled, // project also produces BIM (EWP) packages → Creator offers per-package IWP/EWP kind
|
||
project: {
|
||
name: state.project.name,
|
||
number: state.project.number,
|
||
client: state.project.client,
|
||
division: state.project.division,
|
||
pm: state.team.pm,
|
||
apm: state.team.apm,
|
||
cm: state.team.cm,
|
||
qm: state.team.qm,
|
||
// User-account ids for the same four people. These are what the Creator
|
||
// uses to offer an owner and what notification routing needs — a display
|
||
// name alone can't be assigned work or emailed.
|
||
pmId: state.teamIds.pm || '',
|
||
apmId: state.teamIds.apm || '',
|
||
cmId: state.teamIds.cm || '',
|
||
qmId: state.teamIds.qm || '',
|
||
site: state.project.site,
|
||
teamMembers: state.teamMembers.filter(m=>(m.role||m.name||m.userId))
|
||
},
|
||
roles: state.signoffRoles.filter(r=>r.role).map(r=>({
|
||
role: r.role, name: r.name || '',
|
||
userId: r.userId || '' // who signs — an account, so it can be notified
|
||
})),
|
||
governance: {
|
||
issuance: state.governance.issuance.length ? state.governance.issuance : ['By Sector / Area'],
|
||
woSize: state.governance.wosize,
|
||
woFormat: state.governance.woformat,
|
||
disciplines: (state.governance.disciplines && state.governance.disciplines.length)
|
||
? state.governance.disciplines : ['Mechanical','Electrical','Tech'],
|
||
discMode: state.governance.discMode || 'choice',
|
||
instanceSuffix: state.governance.instanceSuffix || 'letter',
|
||
sizeHoursMax: state.governance.sizeHoursMax || ''
|
||
},
|
||
woTypes: state.wpTypes.filter(t=>t.enabled && (t.name||'').trim()).map(t=>({
|
||
name: t.name.trim(),
|
||
enabled: true,
|
||
notes: t.notes || '',
|
||
approval: t.approval || '',
|
||
// Spec section for this type — the Creator fills the WP's Specification
|
||
// Section from it, so it's authored once here instead of per package.
|
||
specSection: t.specSection || '',
|
||
bim: !!t.bim
|
||
})),
|
||
sources: state.sources.filter(s=>s.label),
|
||
field: {trackPlatform: state.platforms.tracking, trackPlatformUrl: state.platforms.trackingUrl || ''},
|
||
commissioning: {tool: state.platforms.commissioning, toolUrl: state.platforms.commissioningUrl || ''},
|
||
// Project homepage links in the tracking / commissioning systems. The Creator
|
||
// copies these onto every Work Package created for this project.
|
||
projectLinks: [
|
||
state.platforms.trackingUrl ? {label:'Tracking — '+state.platforms.tracking, system:state.platforms.tracking, url:state.platforms.trackingUrl} : null,
|
||
state.platforms.commissioningUrl ? {label:'Commissioning — '+state.platforms.commissioning, system:state.platforms.commissioning, url:state.platforms.commissioningUrl} : null
|
||
].filter(Boolean),
|
||
// CR-006. Rides on the SOP because the creator already reads the SOP: this is
|
||
// what makes the toggles reach a work package without a second channel.
|
||
sections: (typeof WPSections !== 'undefined') ? WPSections.normalize(state.sections) : {},
|
||
quality: {
|
||
qcReq: state.quality.qcreq,
|
||
photo: state.quality.photo,
|
||
holdPoints: state.quality.hold,
|
||
cxTool: state.platforms.commissioning
|
||
},
|
||
sequence: state.sequence.filter(s=>s.label).map(s=>({
|
||
label: s.label,
|
||
kind: s.kind || 'step'
|
||
})),
|
||
costCodes: LABOR_COST_CODES,
|
||
constraints: state.constraints.map(c=>({
|
||
name: c.name, description: c.description || '', bim: !!c.bim,
|
||
// Critical → reopening after release is emailed, not just flagged on the package.
|
||
critical: !!c.critical
|
||
}))
|
||
};
|
||
|
||
sopComplete = true;
|
||
// Stamp the active project onto the SOP so it's unambiguously tied to it.
|
||
try { if(typeof ProjectData!=='undefined' && ProjectData.getActiveId()) sop.projectId = ProjectData.getActiveId(); } catch(e){}
|
||
updateProjectDisplay();
|
||
|
||
// Persist for the home page (green / "Review") and for the WP Creator tab,
|
||
// namespaced to the active project so each project keeps its own SOP.
|
||
try {
|
||
localStorage.setItem(SK('wp_suite_sop'), JSON.stringify(sop));
|
||
localStorage.setItem(SK('wp_suite_state'), JSON.stringify(state));
|
||
if(typeof WPAutosave !== 'undefined'){ sopMarkSaved(); WPAutosave.settled(sopDraftId()); }
|
||
localStorage.setItem(SK('wp_suite_sop_complete'), '1');
|
||
} catch(e){}
|
||
|
||
// Share the SOP to the server so every user of this project gets it.
|
||
try {
|
||
const pid = (typeof ProjectData!=='undefined' && ProjectData.getActiveId && ProjectData.getActiveId()) || sop.projectId || '';
|
||
if(pid && ProjectData.pushSOP) ProjectData.pushSOP(pid, sop, state);
|
||
} catch(e){}
|
||
|
||
track('sop_generated', {woTypes: sop.woTypes.length, constraints: sop.constraints.length});
|
||
|
||
// Hand the SOP to the embedded Work Package Creator and unlock its tab (in case
|
||
// the user stays), then return to the project home page per the requested flow.
|
||
if(typeof onSOPReady === 'function') onSOPReady(sop);
|
||
|
||
alert('✓ SOP Configuration Complete!\n\nReturning to the project home page.');
|
||
window.location.href = 'index.html';
|
||
}
|
||
|
||
// ── COMMENTS ──────────────────────────────────────────────────────────────────
|
||
function toggleComments(){
|
||
const panel = document.getElementById('comments-panel');
|
||
panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
|
||
if(panel.style.display === 'block') loadStepComments();
|
||
}
|
||
|
||
function currentUserName(){
|
||
const u = window.WP_USER;
|
||
return (u && (u.full_name || u.username)) || '';
|
||
}
|
||
function setCommenterName(){
|
||
const el = document.getElementById('commenter-name');
|
||
if(el) el.value = currentUserName();
|
||
}
|
||
|
||
function submitComment(){
|
||
const name = document.getElementById('commenter-name').value || currentUserName() || 'Anonymous';
|
||
const text = document.getElementById('comment-text').value.trim();
|
||
|
||
if(!text){ alert('Please enter a comment.'); return; }
|
||
|
||
const comment = {
|
||
step: currentStep,
|
||
name: name,
|
||
text: text,
|
||
timestamp: new Date().toLocaleString()
|
||
};
|
||
|
||
allComments.push(comment);
|
||
localStorage.setItem('wp_suite_comments', JSON.stringify(allComments));
|
||
if(window.postFeedback) window.postFeedback({type:'sop_step_comment', ...comment});
|
||
|
||
document.getElementById('comment-text').value = '';
|
||
loadStepComments();
|
||
}
|
||
|
||
function exportComments(){
|
||
const saved = localStorage.getItem('wp_suite_comments');
|
||
const data = saved ? JSON.parse(saved) : [];
|
||
if(!data.length){ alert('No comments to export yet.'); return; }
|
||
const payload = {app:'Work Package Suite', source:'sop', exportedAt:new Date().toISOString(), comments:data};
|
||
const blob = new Blob([JSON.stringify(payload,null,2)], {type:'application/json'});
|
||
const a = document.createElement('a');
|
||
a.href = URL.createObjectURL(blob);
|
||
a.download = 'wp-suite-comments-sop-' + new Date().toISOString().slice(0,10) + '.json';
|
||
a.click();
|
||
setTimeout(()=>URL.revokeObjectURL(a.href), 1000);
|
||
}
|
||
|
||
function importComments(ev){
|
||
const f = ev.target.files && ev.target.files[0];
|
||
if(!f) return;
|
||
const r = new FileReader();
|
||
r.onload = ()=>{
|
||
try{
|
||
const inc = JSON.parse(r.result);
|
||
const incoming = Array.isArray(inc) ? inc : (inc.comments || []);
|
||
if(!incoming.length){ alert('No comments found in that file.'); return; }
|
||
const saved = localStorage.getItem('wp_suite_comments');
|
||
allComments = saved ? JSON.parse(saved) : [];
|
||
const seen = new Set(allComments.map(c=>c.step+'|'+c.timestamp+'|'+c.text));
|
||
let added = 0;
|
||
incoming.forEach(c=>{ const k=c.step+'|'+c.timestamp+'|'+c.text; if(c.text && !seen.has(k)){ allComments.push(c); seen.add(k); added++; }});
|
||
localStorage.setItem('wp_suite_comments', JSON.stringify(allComments));
|
||
loadStepComments();
|
||
alert('Imported ' + added + ' comment' + (added===1?'':'s') + '.');
|
||
}catch(e){ alert('Could not read that file.'); }
|
||
ev.target.value = '';
|
||
};
|
||
r.readAsText(f);
|
||
}
|
||
|
||
function loadStepComments(){
|
||
const saved = localStorage.getItem('wp_suite_comments');
|
||
if(saved) allComments = JSON.parse(saved);
|
||
|
||
const stepComments = allComments.filter(c=>c.step===currentStep);
|
||
const list = document.getElementById('comments-list');
|
||
|
||
if(stepComments.length === 0){
|
||
list.innerHTML = '<div style="font-size:12px; color:var(--text-dim); font-style:italic;">No comments yet on this step.</div>';
|
||
}else{
|
||
list.innerHTML = stepComments.map(c=>`
|
||
<div style="padding:0.5rem; background:white; border:1px solid var(--border); border-radius:4px; margin-bottom:0.5rem;">
|
||
<div style="font-size:11px; color:var(--text-dim); margin-bottom:0.25rem;"><strong>${escAttr(c.name)}</strong> • ${escAttr(c.timestamp)}</div>
|
||
<div style="font-size:12px; color:var(--text);">${escAttr(c.text)}</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
}
|
||
|
||
// ── USAGE ANALYTICS ─────────────────────────────────────────────────────────
|
||
// Lightweight usage analytics stored in localStorage so the tool owner can review
|
||
// engagement over time. No field VALUES are stored (field-edit events record only
|
||
// the field id), keeping captured data non-sensitive.
|
||
const ANALYTICS_KEY = 'wp_suite_analytics_v1';
|
||
let _stepEnter = Date.now();
|
||
const _session = 's_' + Date.now().toString(36) + Math.random().toString(36).slice(2,6);
|
||
|
||
function analyticsLoad(){
|
||
try { return JSON.parse(localStorage.getItem(ANALYTICS_KEY)) || {events:[]}; }
|
||
catch(e){ return {events:[]}; }
|
||
}
|
||
function analyticsSave(data){
|
||
try { localStorage.setItem(ANALYTICS_KEY, JSON.stringify(data)); }
|
||
catch(e){ /* storage unavailable — degrade silently */ }
|
||
}
|
||
function track(event, detail){
|
||
try {
|
||
const data = analyticsLoad();
|
||
data.events.push({ ts: new Date().toISOString(), session: _session, event, detail: detail||null });
|
||
if(data.events.length > 5000) data.events = data.events.slice(-5000);
|
||
analyticsSave(data);
|
||
} catch(e){}
|
||
}
|
||
function trackStepDwell(){
|
||
const ms = Date.now() - _stepEnter;
|
||
if(ms > 400 && ms < 1000*60*60) track('step_dwell', {step: currentStep, ms});
|
||
_stepEnter = Date.now();
|
||
}
|
||
function analyticsSummary(){
|
||
const data = analyticsLoad();
|
||
const byEvent = {}, byStep = {}, dwell = {}, sessions = new Set();
|
||
data.events.forEach(e=>{
|
||
byEvent[e.event] = (byEvent[e.event]||0)+1;
|
||
sessions.add(e.session);
|
||
if(e.event==='step_view' && e.detail) byStep[e.detail.step]=(byStep[e.detail.step]||0)+1;
|
||
if(e.event==='step_dwell' && e.detail){ dwell[e.detail.step]=(dwell[e.detail.step]||0)+e.detail.ms; }
|
||
});
|
||
return {total:data.events.length, sessions:sessions.size, byEvent, byStep, dwell, first:data.events[0]?.ts, last:data.events[data.events.length-1]?.ts};
|
||
}
|
||
function showAnalytics(){
|
||
const s = analyticsSummary();
|
||
const fmtMin = ms => (ms/60000).toFixed(1)+' min';
|
||
let txt = `USAGE LOGS\n\nSessions: ${s.sessions} Events: ${s.total}\nRange: ${s.first?new Date(s.first).toLocaleString():'—'} → ${s.last?new Date(s.last).toLocaleString():'—'}\n\nStep views:\n`;
|
||
for(let i=1;i<=LAST_STEP;i++) txt += ` Step ${i}: ${s.byStep[i]||0} views` + (s.dwell[i]?`, ${fmtMin(s.dwell[i])} total`:'') + `\n`;
|
||
txt += `\nActions:\n`;
|
||
Object.keys(s.byEvent).filter(k=>!['step_view','step_dwell','field_edit'].includes(k)).forEach(k=> txt += ` ${k}: ${s.byEvent[k]}\n`);
|
||
txt += ` field edits: ${s.byEvent['field_edit']||0}\n`;
|
||
txt += `\nDownload full event log as JSON?`;
|
||
if(confirm(txt)) downloadAnalytics();
|
||
}
|
||
function downloadAnalytics(){
|
||
const data = analyticsLoad();
|
||
const blob = new Blob([JSON.stringify(data,null,2)], {type:'application/json'});
|
||
const a = document.createElement('a');
|
||
a.href = URL.createObjectURL(blob);
|
||
a.download = 'wp-suite-usage-' + new Date().toISOString().slice(0,10) + '.json';
|
||
a.click();
|
||
URL.revokeObjectURL(a.href);
|
||
track('analytics_exported');
|
||
}
|