n.siegfried
77c043c3db
B3's warning is about ORDER, and it is the whole item: the proposal removes the
project-picker card, and the first-run empty state was built inside it. Remove
the card first and every brand-new account lands on a page whose only
instruction is to choose from a list with nothing in it.
So the empty state was built first, as its own thing rather than a branch inside
a control that is going away, and only then did the card go.
The launcher now shows exactly one of three states:
no projects at all what a project is for, the create form already open (it
is the only thing to do on this page, so hiding it behind
a button is one click of ceremony in front of the only
way forward), and the sample offered underneath it
none chosen point at the app bar's switcher, which is on every page,
plus New project
one active the tool cards, as before
Switching moved to the app bar's switcher entirely. Its popover footer used to
read "All projects / new project" and link to index.html - half of that promise
moved into the popover itself and the other half needs a form, so the link now
says New project and carries #new-project, which the launcher opens on.
The create form was rebuilt, so per C1 it ships accessible: a real <form> with
requestSubmit, every input labelled, and its validation inline at the field with
aria-describedby and role="alert" - the same shape T5.8 gives the wizard. That
retires the "Project name is required." alert (index.html 6 -> 5).
html/index.html three states, rebuilt create form, picker card removed
html/wp-chrome.js popover footer link (one line - it named the card)
tests/launcher_check.py new - 58 checks, two seeded databases
tests/f_items.py F1 rewritten to drive the controls that replaced the select
Done when
[x] a brand-new account with zero projects sees a clear path to create one
[x] the sample project remains discoverable from the empty state
[x] the picker card is removed only after the empty state ships
[x] switching projects still works from the header for users who have projects
Two things the probes caught that I would have shipped
F1 went INCONCLUSIVE, not FAIL. Its probe drove `document.querySelector
('select')` on the launcher - the picker card's dropdown. It refused to guess
rather than reporting a silent pass, which is the behaviour f_items was
written for. Rewritten to drive both replacements, because they fail
differently: the switcher RELOADS with ?project=<id>, so its two labels cannot
drift apart whatever subscribes to what; creating a project changes the active
project IN PAGE, and that is the interaction F1's mechanism actually applies
to. It is now the only in-page change on the launcher, so it is the arm that
matters. Both pass - the bar subscribes through ProjectData.onActiveChange.
launcher_check reported "no focus ring" on the rebuilt form's inputs. That was
trap 5 in reverse: without CDP focus emulation the headless document is not
the focused one, :focus-visible never matches, and every control reports NO
ring - a false red where a11y_check would get a false green. With emulation on
they draw 2px --cds-focus from T4.7's app-wide floor.
Verified one at a time
launcher_check 58/58 new (38 empty-account + 20 populated)
stepper_check 70/70
browser_check 71/71
aggregates 16/16
a11y 22/22 launcher 29 focusable elements, all >= 3:1
url_state 23/23
autosave 34/34
f_items F1-F5 FIXED, F6 REPRODUCES (T7.2)
No colour literal added: 0 across all five page sheets and all seven inline
<style> blocks.
Raised, not fixed
BL-014 updated rather than left stale: two of its four sites (.proj-row select,
.link-like) went with the picker card, and the third (.proj-form-grid input)
was measured rather than assumed - it draws T4.7's ring, which post-dates that
entry. What survives is field.html's .fld-search, which T9.5 should measure the
same way instead of inheriting the wording.
Question for the PR, per CLAUDE.md: with the picker gone, an account whose only
project is archived sees the choose-a-project prompt plus the archived note, and
the switcher lists nothing. That is honest but bleak. Whether an archived project
should stay switchable read-only is a product call, not an implementation one.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
927 lines
38 KiB
HTML
927 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Work Package Suite — Prime Controls</title>
|
|
<script src="auth-guard.js"></script>
|
|
<!-- Date/number formatting. Must parse BEFORE the app scripts: they format
|
|
timestamps during their own boot. -->
|
|
<script src="wp-format.js"></script>
|
|
<!-- Addressable state (S3). Parses before the app scripts, which read the URL
|
|
during their own boot. -->
|
|
<script src="wp-url.js"></script>
|
|
<link rel="icon" href="favicon.ico" sizes="any">
|
|
<link rel="manifest" href="manifest.webmanifest">
|
|
<meta name="theme-color" content="#161616">
|
|
<link rel="stylesheet" href="theme-light.css">
|
|
<link rel="stylesheet" href="wp-chrome.css">
|
|
<link rel="stylesheet" href="wp-sidenav.css">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
background: var(--cds-background);
|
|
color: var(--cds-text-primary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* CONTAINER */
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2.5rem 2rem 3rem;
|
|
}
|
|
|
|
/* HERO */
|
|
.hero {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 2.25rem;
|
|
font-weight: 300;
|
|
letter-spacing: -0.01em;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--cds-text-primary);
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1rem;
|
|
color: var(--cds-text-secondary);
|
|
max-width: 760px;
|
|
}
|
|
|
|
/* CARDS */
|
|
.cards-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.card {
|
|
background: var(--cds-layer);
|
|
border: 1px solid var(--cds-border-subtle);
|
|
border-left: 4px solid var(--cds-border-strong);
|
|
padding: 1.5rem;
|
|
transition: border-color 0.15s, background 0.15s;
|
|
text-decoration: none;
|
|
color: var(--cds-text-primary);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card:hover {
|
|
border-left-color: var(--cds-interactive-01);
|
|
background: var(--cds-layer-hover);
|
|
}
|
|
|
|
.card-badge {
|
|
display: inline-block;
|
|
background: var(--cds-button-primary);
|
|
color: var(--cds-text-on-color);
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 3px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
width: fit-content;
|
|
}
|
|
|
|
.card h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.card p {
|
|
color: var(--cds-text-secondary);
|
|
margin-bottom: 1.5rem;
|
|
flex: 1;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.card-button {
|
|
display: inline-block;
|
|
align-self: flex-start;
|
|
background: var(--cds-button-primary);
|
|
color: var(--cds-text-on-color);
|
|
padding: 0.7rem 1.25rem;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
transition: background 0.2s;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.card-button:hover {
|
|
background: var(--cds-hover-primary);
|
|
}
|
|
|
|
/* COMPLETE STATE (SOP done) */
|
|
.card.complete {
|
|
border-left-color: var(--cds-support-success);
|
|
}
|
|
/* A5: the card-button stays primary when the SOP completes. The completion
|
|
is still said, twice — the card's left border turns green and .card-status
|
|
appears — which is green doing its job as a status rather than as an
|
|
action colour. */
|
|
.card-status {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--cds-support-success);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
/* B4: an unreachable server is a third state, and it has to look like neither
|
|
of the other two. Not green, not silence. */
|
|
.card-status.card-status-error { color: var(--wp-status-warning-text); }
|
|
.card.disabled {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* SECTION */
|
|
.section {
|
|
background: var(--cds-layer);
|
|
padding: 1.75rem;
|
|
margin-bottom: 1.5rem;
|
|
border: 1px solid var(--cds-border-subtle);
|
|
}
|
|
|
|
.section h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--cds-text-primary);
|
|
}
|
|
|
|
.section h3 {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.section p {
|
|
color: var(--cds-text-secondary);
|
|
margin-bottom: 1rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* FOOTER */
|
|
.footer {
|
|
background: var(--cds-ui-01);
|
|
color: var(--cds-text-secondary);
|
|
padding: 2rem;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
border-top: 1px solid var(--cds-border-subtle);
|
|
}
|
|
|
|
.footer a {
|
|
color: var(--cds-link-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer a:hover { text-decoration: underline; }
|
|
|
|
/* COMMENTS SECTION */
|
|
.comments-section {
|
|
background: var(--cds-layer);
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
border: 1px solid var(--cds-border-subtle);
|
|
}
|
|
|
|
.comments-toggle {
|
|
padding: 0.7rem 1.25rem;
|
|
background: var(--cds-button-primary);
|
|
color: var(--cds-text-on-color);
|
|
border: none;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.comments-toggle:hover { background: var(--cds-hover-primary); }
|
|
|
|
.comments-panel {
|
|
display: none;
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
background: var(--cds-layer-accent);
|
|
border: 1px solid var(--cds-border-subtle);
|
|
}
|
|
|
|
.comments-panel.open { display: block; }
|
|
|
|
.comments-panel input,
|
|
.comments-panel textarea {
|
|
width: 100%;
|
|
padding: 0.7rem;
|
|
border: 1px solid var(--cds-border-strong);
|
|
background: var(--cds-field);
|
|
color: var(--cds-text-primary);
|
|
font-family: inherit;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.comments-panel input:focus,
|
|
.comments-panel textarea:focus { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
|
|
|
|
.comments-panel textarea {
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
}
|
|
|
|
.comment-buttons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.comment-buttons button {
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.submit-btn {
|
|
background: var(--cds-button-primary);
|
|
color: var(--cds-text-on-color);
|
|
}
|
|
|
|
.submit-btn:hover { background: var(--cds-hover-primary); }
|
|
|
|
.close-btn {
|
|
background: var(--cds-layer-selected);
|
|
color: var(--cds-text-primary);
|
|
border: 1px solid var(--cds-border-strong);
|
|
}
|
|
|
|
.close-btn:hover { background: var(--cds-layer-selected-hover); }
|
|
|
|
.comments-list {
|
|
margin-top: 1rem;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.comment-item {
|
|
padding: 0.75rem;
|
|
background: var(--cds-background);
|
|
border: 1px solid var(--cds-border-subtle);
|
|
margin-bottom: 0.5rem;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.comment-meta {
|
|
font-size: 11px;
|
|
color: var(--cds-text-secondary);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.comment-text {
|
|
color: var(--cds-text-primary);
|
|
}
|
|
|
|
/* PROJECT ENTRY POINTS — B3
|
|
The picker card (a "Select a project…" dropdown in its own section) is gone.
|
|
Switching projects is the app bar's switcher, which is on every page; the
|
|
launcher keeps the two things a dropdown could not do — the first-run empty
|
|
state, and creating a project. */
|
|
.proj-loading { color: var(--cds-text-secondary); font-style: italic; font-size: 13px; }
|
|
.proj-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
|
|
/* Shown once when the project someone had open turns out to have been archived
|
|
rather than deleted — otherwise the launcher just silently resets on them. */
|
|
.proj-archived-note { background: var(--wp-status-warning-bg); border: 1px solid var(--cds-support-warning); color: var(--wp-status-warning-text);
|
|
padding: 0.7rem 0.9rem; margin-bottom: 0.9rem; font-size: 13px; line-height: 1.5; }
|
|
.proj-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin-bottom: 0.9rem; }
|
|
.proj-form-grid label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 12px; font-weight: 600; color: var(--cds-text-secondary); }
|
|
.proj-form-grid input { padding: 0.55rem 0.65rem; font-size: 14px; border: 1px solid var(--cds-border-strong); background: var(--cds-field); }
|
|
.proj-form-grid input[aria-invalid="true"] { border-color: var(--cds-support-error); }
|
|
/* .link-like and .proj-row went with the picker card. Both were named in
|
|
BL-014 as controls falling back to the UA focus ring; two of that entry's
|
|
four sites no longer exist. */
|
|
|
|
/* An inline error at the field it belongs to, rather than a native dialog that
|
|
names no field and highlights nothing (C1, and the pattern T5.8 uses in the
|
|
wizard). :empty so the element can sit in the markup and announce on change. */
|
|
.field-error { color: var(--cds-text-error); font-size: 12px; font-weight: 600; margin-top: 0.3rem; }
|
|
.field-error:empty { display: none; }
|
|
|
|
/* FIRST RUN
|
|
A brand-new account has no projects, so it has no tool cards either — this
|
|
is the whole page for that person, and it has to say what to do next. */
|
|
.first-run { border-left: 3px solid var(--cds-interactive-01); }
|
|
.first-run-note { font-size: 13px; margin-top: 1rem; }
|
|
.first-run-sample { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cds-border-subtle); }
|
|
.first-run-sample h3 { margin-bottom: 0.35rem; }
|
|
|
|
/* RESPONSIVE */
|
|
@media (max-width: 768px) {
|
|
.hero h1 { font-size: 1.75rem; }
|
|
.cards-grid { grid-template-columns: 1fr; }
|
|
.container { padding: 1.5rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- HEADER -->
|
|
<header class="wp-appbar">
|
|
<a href="index.html" class="wp-appbar-brand" title="Work Package Suite home">
|
|
<span class="wp-logo-chip"><img src="prime-controls-logo.jpg" alt="Prime Controls"></span>
|
|
<span class="wp-appbar-title">Work Package Suite</span>
|
|
</a>
|
|
<div class="wp-appbar-spacer"></div>
|
|
<nav class="wp-appbar-actions">
|
|
<a class="wp-appbar-link" href="#overview">Overview</a>
|
|
<a class="wp-appbar-link" href="#comments">Feedback</a>
|
|
<a class="wp-appbar-link" href="#" onclick="openHelp();return false;">Help</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<div class="container">
|
|
|
|
<!-- HERO -->
|
|
<div class="hero">
|
|
<h1 id="hero-title">Work Package Suite</h1>
|
|
<p id="hero-sub">Standardized Work Package creation for Prime Controls construction projects. Select a project to begin — or create one.</p>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════════════
|
|
PROJECT ENTRY POINTS — B3 / T5.2
|
|
|
|
The project-picker card that used to sit here — <h2>Project</h2> over a
|
|
"Select a project…" dropdown — is gone. Switching projects is the app
|
|
bar's switcher, which is on every page rather than only this one.
|
|
|
|
What a dropdown could NOT do is what stayed: the first-run empty state,
|
|
and creating a project. The empty state was built INSIDE the picker card,
|
|
so removing the card first would have stranded every new account on a
|
|
page whose only instruction was to pick from an empty list.
|
|
|
|
Exactly one of these three is visible at a time; #proj-status says which
|
|
and is where the archived note lands.
|
|
══════════════════════════════════════════════════════════════════════ -->
|
|
<div id="proj-status"><div class="proj-loading">Loading projects…</div></div>
|
|
|
|
<!-- (a) no projects at all -->
|
|
<section class="section first-run" id="first-run" hidden>
|
|
<h2>No projects yet</h2>
|
|
<p>A project holds one SOP — the baseline every work package on the job
|
|
inherits — and the work packages written against it. Everything else in
|
|
the suite hangs off a project, so this is the first thing to make.
|
|
Fill in the form below, or start from the sample underneath it.</p>
|
|
</section>
|
|
|
|
<!-- (b) projects exist, none chosen -->
|
|
<section class="section" id="pick-prompt" hidden>
|
|
<h2>Choose a project</h2>
|
|
<p id="pick-prompt-sub">Pick the job you are working on from the project
|
|
switcher in the bar at the top of the page. It is there on every page, so
|
|
you can change job without coming back here.</p>
|
|
<div class="proj-actions">
|
|
<button type="button" class="card-button" id="open-switcher-btn">Open the project switcher</button>
|
|
<button type="button" class="close-btn" id="new-project-btn">New project</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- (c) the create form. Open on first run, on demand after that. -->
|
|
<section class="section" id="new-project" hidden>
|
|
<h2 id="new-project-head">Create a project</h2>
|
|
<form id="np-form" novalidate>
|
|
<div class="proj-form-grid">
|
|
<label for="np_name">Project name *
|
|
<input type="text" id="np_name" name="np_name" required
|
|
aria-describedby="np_name_err" placeholder="e.g. Micron — INC Construction">
|
|
</label>
|
|
<label for="np_number">Project number
|
|
<input type="text" id="np_number" placeholder="e.g. 26-67-008"></label>
|
|
<label for="np_client">Client
|
|
<input type="text" id="np_client" placeholder="e.g. Micron Technology, Inc."></label>
|
|
<label for="np_division">Division
|
|
<input type="text" id="np_division" placeholder="e.g. Semiconductor"></label>
|
|
<label for="np_site">Site / location
|
|
<input type="text" id="np_site" placeholder="e.g. Boise, ID — Fab"></label>
|
|
</div>
|
|
<!-- The error belongs at the field, not in a dialog that names no field
|
|
and highlights nothing. role="alert" so it is heard (C1 / S10). -->
|
|
<div class="field-error" id="np_name_err" role="alert"></div>
|
|
<div class="proj-actions">
|
|
<button type="submit" class="card-button">Create & select</button>
|
|
<button type="button" class="close-btn" id="np-cancel">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- (d) the sample. Offered on first run, where it is the alternative to
|
|
filling in a form about a job you may not have started yet. It stays
|
|
reachable afterwards from the create form's own section. -->
|
|
<section class="section" id="sample-offer" hidden>
|
|
<h2>Not ready to set one up?</h2>
|
|
<p>The sample project is a fully configured example — a finished SOP and a
|
|
few work packages — so you can see what the tools do before committing a
|
|
real job to them. It is labelled as a sample everywhere it appears, and it
|
|
can be deleted later.</p>
|
|
<div class="proj-actions">
|
|
<button type="button" class="close-btn" id="use-sample-btn">Use the sample project</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TOOL CARDS (shown once a project is active) -->
|
|
<div class="cards-grid" id="overview" style="display:none">
|
|
|
|
<!-- SOP CONFIG -->
|
|
<a href="work-package-suite.html?tab=sop" class="card" id="card-sop">
|
|
<h3>SOP Configuration</h3>
|
|
<p>Define the project baseline in 10 steps — team, sign-offs, WP types, governance, quality, platforms, sequence, constraints, and sources. Every Work Package inherits these defaults.</p>
|
|
<button class="card-button" id="card-sop-btn">Open tool</button>
|
|
</a>
|
|
|
|
<!-- WP CREATOR -->
|
|
<a href="work-package-suite.html?tab=wp" class="card" id="card-wp">
|
|
<h3>Work Package Creator</h3>
|
|
<p>Author individual Work Packages against the project SOP — pre-populated defaults, constraint checklists, and exportable IWPs. Complete the SOP first to unlock.</p>
|
|
<button class="card-button" id="card-wp-btn">Open tool</button>
|
|
</a>
|
|
|
|
<!-- WP DASHBOARD -->
|
|
<a href="work-package-suite.html?view=dashboard" class="card" id="card-dash">
|
|
<h3>Work Package Dashboard</h3>
|
|
<p>Track status and gating across every Work Package — release-readiness, on-hold packages, overdue work, hours, and breakdowns by status and discipline. Issue release-ready packages in one click.</p>
|
|
<button class="card-button" id="card-dash-btn">Open dashboard</button>
|
|
</a>
|
|
|
|
<!-- FIELD VIEW -->
|
|
<a href="field.html" class="card" id="card-field">
|
|
<h3>Field View</h3>
|
|
<p>A phone-friendly view for the work face — update status, clear constraints, and log photos and notes. Installable to a home screen; works offline and syncs when you're back on network.</p>
|
|
<button class="card-button" id="card-field-btn">Open field view</button>
|
|
</a>
|
|
|
|
<!-- USER DIRECTORY -->
|
|
<a href="users.html" class="card" id="card-users">
|
|
<h3>User Directory</h3>
|
|
<p>Who is on this project — names, job functions and how to reach them. Administrators and Project Super Users also create accounts, set permissions and grant project access from here.</p>
|
|
<button class="card-button" id="card-users-btn">Open directory</button>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<!-- COMMENTS SECTION -->
|
|
<div class="comments-section" id="comments">
|
|
<button class="comments-toggle" onclick="toggleComments()">Leave feedback</button>
|
|
<div class="comments-panel" id="comments-panel">
|
|
<div style="margin-bottom: 1rem;">
|
|
<label style="font-weight: 600; font-size: 13px; color: var(--cds-text-primary);">Name (optional)</label>
|
|
<input type="text" id="commenter-name" placeholder="Your name">
|
|
</div>
|
|
<div style="margin-bottom: 1rem;">
|
|
<label style="font-weight: 600; font-size: 13px; color: var(--cds-text-primary);">Feedback</label>
|
|
<textarea id="comment-text" placeholder="Your feedback here..."></textarea>
|
|
</div>
|
|
<div class="comment-buttons">
|
|
<button class="submit-btn" onclick="submitComment()">Submit</button>
|
|
<button class="close-btn" onclick="exportFeedback()">⤓ Export</button>
|
|
<button class="close-btn" onclick="document.getElementById('feedback-import').click()">⤒ Import</button>
|
|
<button class="close-btn" onclick="toggleComments()">Close</button>
|
|
<input type="file" id="feedback-import" accept="application/json" style="display:none" onchange="importFeedback(event)">
|
|
</div>
|
|
<div class="comments-list" id="comments-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="footer">
|
|
<p>Work Package Suite v1.0 | Prime Controls - Business Technology Group | Pilot Use Only</p>
|
|
</footer>
|
|
|
|
<script src="feedback-config.js"></script>
|
|
<script src="project-data.js"></script>
|
|
<script src="help.js"></script>
|
|
<script>
|
|
// ── PROJECT SELECTION ─────────────────────────────────────────────────────
|
|
const esc = ProjectData.esc;
|
|
let _projects = [];
|
|
|
|
function initProjects(){
|
|
ProjectData.list().then(list => {
|
|
_projects = list || [];
|
|
// A deep link names the project explicitly, and every other page in the
|
|
// suite already honours ?project=<id>. This one did not, so arriving here
|
|
// with a link on a browser that had nothing stored showed "Select a
|
|
// project" while the URL said otherwise. Honour it before reconciling.
|
|
const wanted = new URLSearchParams(location.search).get('project');
|
|
if(wanted){
|
|
const target = _projects.find(p => p.id === wanted);
|
|
if(target) ProjectData.setActive(target);
|
|
}
|
|
// Reconcile the active project against the list; clear if it's gone.
|
|
const active = ProjectData.getActive();
|
|
// S3: if a project is active but the URL does not say so, make the URL say
|
|
// so — with replace, not push, because the user did not navigate here. This
|
|
// is what makes "copy the address bar" produce a link that lands somebody
|
|
// else on the same project rather than on whatever they last had open.
|
|
if(active && typeof WPUrl !== 'undefined' && WPUrl.get('project') !== active.id){
|
|
WPUrl.replace({ project: active.id });
|
|
}
|
|
const dropped = (active && !_projects.some(p => p.id === active.id)) ? active : null;
|
|
if(dropped) ProjectData.setActive(null);
|
|
_listLoaded = true;
|
|
renderProjectEntry();
|
|
applyActiveProject();
|
|
// "No longer in the list" used to mean one thing — deleted. Now it also
|
|
// means archived, and resetting someone to "Select a project" with no word
|
|
// about it sends them hunting for a job that is merely finished.
|
|
if(dropped) explainDroppedProject(dropped);
|
|
});
|
|
}
|
|
|
|
function explainDroppedProject(p){
|
|
// The project is still readable when it's archived; a delete (or access being
|
|
// taken away) fails here, and that case genuinely has nothing to say.
|
|
ProjectData.get(p.id).then(full => {
|
|
if(!full || !full.archived) return;
|
|
const box = document.getElementById('proj-status');
|
|
if(!box || document.getElementById('proj-archived-note')) return;
|
|
const note = document.createElement('div');
|
|
note.id = 'proj-archived-note';
|
|
note.className = 'proj-archived-note';
|
|
note.innerHTML = `<strong>${esc(p.name || 'The project you had open')}</strong> has been
|
|
archived — it is read-only and no longer listed here. An administrator can unarchive it
|
|
from the Admin Console.`;
|
|
box.insertBefore(note, box.firstChild);
|
|
}).catch(() => {});
|
|
}
|
|
|
|
// ── PROJECT ENTRY POINTS (B3 / T5.2) ──────────────────────────────────────
|
|
// Three states, one visible at a time. The picker card that used to render
|
|
// here is gone; the app bar's switcher does that job on every page, and this
|
|
// page keeps the two things a dropdown could not do.
|
|
//
|
|
// ORDER MATTERS, and it is the whole reason B3 exists: the first-run empty
|
|
// state used to live INSIDE the picker card. Deleting the card without
|
|
// building this first would have left a brand-new account on a page whose
|
|
// only instruction was to choose from a list with nothing in it.
|
|
const $ = id => document.getElementById(id);
|
|
let _createOpenedManually = false;
|
|
let _focusCreateOnRender = false;
|
|
// Nothing renders until the list is in. "No projects yet" is a claim, and
|
|
// making it while the request is still in flight would show every new-account
|
|
// page to every returning user for a beat.
|
|
let _listLoaded = false;
|
|
|
|
function show(id, on){ const el = $(id); if(el) el.hidden = !on; }
|
|
|
|
function renderProjectEntry(){
|
|
if(!_listLoaded) return;
|
|
const status = $('proj-status');
|
|
const loading = status && status.querySelector('.proj-loading');
|
|
if(loading) loading.remove();
|
|
|
|
const firstRun = !_projects.length;
|
|
const active = ProjectData.getActive();
|
|
|
|
show('first-run', firstRun);
|
|
show('sample-offer', firstRun);
|
|
// On first run the form IS the page — there is nothing else to do here, so
|
|
// hiding it behind a button would be one click of ceremony in front of the
|
|
// only path forward.
|
|
show('new-project', firstRun || _createOpenedManually);
|
|
show('pick-prompt', !firstRun && !active && !_createOpenedManually);
|
|
|
|
const head = $('new-project-head');
|
|
if(head) head.textContent = firstRun ? 'Create your first project' : 'Create a project';
|
|
// Nothing to cancel back to on first run.
|
|
show('np-cancel', !firstRun);
|
|
|
|
if(_focusCreateOnRender && !$('new-project').hidden){
|
|
_focusCreateOnRender = false;
|
|
const n = $('np_name');
|
|
if(n){ n.focus(); n.scrollIntoView({behavior:'smooth', block:'center'}); }
|
|
}
|
|
}
|
|
|
|
function showCreateProject(){
|
|
_createOpenedManually = true;
|
|
_focusCreateOnRender = true;
|
|
renderProjectEntry();
|
|
}
|
|
function hideCreateProject(){
|
|
_createOpenedManually = false;
|
|
setFieldError('np_name', '');
|
|
renderProjectEntry();
|
|
}
|
|
|
|
// An error at the field, associated with aria-describedby and announced —
|
|
// rather than a native dialog that names no field and highlights nothing.
|
|
// Same shape T5.8 gives the SOP wizard (C1).
|
|
function setFieldError(fieldId, message){
|
|
const field = $(fieldId), box = $(fieldId + '_err');
|
|
if(box) box.textContent = message || '';
|
|
if(field){
|
|
if(message) field.setAttribute('aria-invalid', 'true');
|
|
else field.removeAttribute('aria-invalid');
|
|
}
|
|
}
|
|
|
|
function saveNewProject(){
|
|
const v = id => ($(id)?.value || '').trim();
|
|
const name = v('np_name');
|
|
if(!name){
|
|
setFieldError('np_name', 'Enter a project name — it is the only field this needs.');
|
|
$('np_name')?.focus();
|
|
return;
|
|
}
|
|
setFieldError('np_name', '');
|
|
const p = { name, number:v('np_number'), client:v('np_client'), division:v('np_division'), site:v('np_site'), sample:false };
|
|
ProjectData.save(p).then(saved => { afterProjectChosen(saved); });
|
|
}
|
|
|
|
function useSampleProject(){
|
|
const existing = _projects.find(p => p.sample);
|
|
if(existing){ afterProjectChosen(existing); return; }
|
|
ProjectData.save(Object.assign({}, ProjectData.SAMPLE)).then(saved => { afterProjectChosen(saved); });
|
|
}
|
|
|
|
// The switcher is wp-chrome.js's, injected into the app bar after this script
|
|
// runs. Reaching for its button is deliberate: the alternative is a second
|
|
// project list on this page, which is the card B3 removes.
|
|
function openProjectSwitcher(){
|
|
const btn = document.querySelector('.wpc-proj-btn');
|
|
if(btn){ btn.click(); btn.focus(); return true; }
|
|
return false;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function(){
|
|
$('np-form')?.addEventListener('submit', function(e){ e.preventDefault(); saveNewProject(); });
|
|
$('np-cancel')?.addEventListener('click', hideCreateProject);
|
|
$('new-project-btn')?.addEventListener('click', showCreateProject);
|
|
$('use-sample-btn')?.addEventListener('click', useSampleProject);
|
|
$('open-switcher-btn')?.addEventListener('click', function(){
|
|
if(!openProjectSwitcher()){
|
|
// No chrome mounted (it returns early inside an iframe, and it loads
|
|
// after this file). Say so rather than doing nothing on a click.
|
|
const sub = $('pick-prompt-sub');
|
|
if(sub) sub.textContent = 'The project switcher is in the bar at the top of the page.';
|
|
}
|
|
});
|
|
// The app bar's popover links here for "new project". Honour it, so that
|
|
// link lands on the form rather than on a page that no longer has one.
|
|
if(location.hash === '#new-project') showCreateProject();
|
|
});
|
|
|
|
// S3: which project you are in is addressable, so a launcher link carries it
|
|
// and Back returns to the project you were looking at before.
|
|
function urlSyncProject(id, replace){
|
|
if(typeof WPUrl === 'undefined') return;
|
|
(replace ? WPUrl.replace : WPUrl.push).call(WPUrl, { project: id || '' });
|
|
}
|
|
|
|
// selectProject() went with the picker card's <select>. The app bar's switcher
|
|
// reloads with ?project=<id> rather than swapping state in place, so there is
|
|
// nothing left on this page that chooses a project without navigating.
|
|
|
|
function afterProjectChosen(p){
|
|
if(!_projects.some(x => x.id === p.id)) _projects.unshift(p);
|
|
ProjectData.setActive(p);
|
|
_createOpenedManually = false;
|
|
urlSyncProject(p.id, false);
|
|
renderProjectEntry();
|
|
applyActiveProject();
|
|
document.getElementById('overview').scrollIntoView({ behavior:'smooth', block:'start' });
|
|
}
|
|
|
|
// Show/hide the tool cards and stamp the active project into their links.
|
|
function applyActiveProject(){
|
|
const active = ProjectData.getActive();
|
|
const cards = document.getElementById('overview');
|
|
const heroTitle = document.getElementById('hero-title');
|
|
const heroSub = document.getElementById('hero-sub');
|
|
|
|
if(!active){
|
|
cards.style.display = 'none';
|
|
heroTitle.textContent = 'Work Package Suite';
|
|
// Two different situations, and telling someone to "select a project"
|
|
// when there are none to select is the thing B3 is about.
|
|
heroSub.textContent = _projects.length
|
|
? 'Choose a project to begin — or create one.'
|
|
: 'Create your first project to begin.';
|
|
return;
|
|
}
|
|
|
|
const q = '&project=' + encodeURIComponent(active.id);
|
|
const setHref = (id, base) => { const el=document.getElementById(id); if(el) el.href = base + q; };
|
|
setHref('card-sop', 'work-package-suite.html?tab=sop');
|
|
setHref('card-wp', 'work-package-suite.html?tab=wp');
|
|
setHref('card-dash', 'work-package-suite.html?view=dashboard');
|
|
setHref('card-field', 'field.html?src=home');
|
|
|
|
cards.style.display = '';
|
|
heroTitle.textContent = active.name || 'Work Package Suite';
|
|
heroSub.textContent = [active.number, active.client, active.site].filter(Boolean).join(' · ') || 'Active project';
|
|
|
|
// Pull the project's shared SOP/WPs into the local cache so the tools boot
|
|
// with data. The card status below does NOT come from that cache — see
|
|
// reflectSOPStatus.
|
|
if(ProjectData.pullProject){ ProjectData.pullProject(active.id).catch(()=>{}); }
|
|
reflectSOPStatus(active);
|
|
}
|
|
|
|
function clearActiveProject(){ ProjectData.setActive(null); urlSyncProject('', false); renderProjectEntry(); applyActiveProject(); }
|
|
|
|
// Back / Forward between projects.
|
|
if(typeof WPUrl !== 'undefined'){
|
|
WPUrl.onChange(function(state, viaPop){
|
|
if(!viaPop) return;
|
|
const want = state.project || '';
|
|
if(want === (ProjectData.getActiveId() || '')) return;
|
|
if(!want){ ProjectData.setActive(null); }
|
|
else {
|
|
const p = (_projects||[]).find(x=>x.id===want);
|
|
ProjectData.setActive(p || { id: want });
|
|
}
|
|
renderProjectEntry(); applyActiveProject();
|
|
});
|
|
}
|
|
|
|
// Reflect SOP completion on the tool cards (B4).
|
|
//
|
|
// This used to read `wp_suite_sop_complete` out of localStorage. That key is a
|
|
// per-browser mirror of the server, so the card answered "has THIS browser seen
|
|
// the SOP completed", not "is the SOP complete" — and the two diverge the moment
|
|
// a colleague finishes the SOP on their own machine. The card said "Complete SOP
|
|
// first" and nothing indicated the answer was stale, which is the failure mode
|
|
// B4 describes: a per-browser number that looks authoritative.
|
|
//
|
|
// There is deliberately no cache fallback. If the server cannot be reached the
|
|
// card says so; it does not guess, and it does not show a remembered answer as
|
|
// though it were current.
|
|
function reflectSOPStatus(active){
|
|
const sopCard = document.getElementById('card-sop');
|
|
const sopBtn = document.getElementById('card-sop-btn');
|
|
const wpCard = document.getElementById('card-wp');
|
|
const wpBtn = document.getElementById('card-wp-btn');
|
|
if(!sopCard) return;
|
|
|
|
// reset (re-render can run multiple times)
|
|
sopCard.classList.remove('complete');
|
|
wpCard && wpCard.classList.remove('disabled');
|
|
const oldStatus = sopCard.querySelector('.card-status'); if(oldStatus) oldStatus.remove();
|
|
|
|
const setStatus = (text, cls) => {
|
|
const el = document.createElement('div');
|
|
el.className = 'card-status' + (cls ? ' ' + cls : '');
|
|
el.textContent = text;
|
|
sopCard.insertBefore(el, sopCard.firstChild);
|
|
return el;
|
|
};
|
|
|
|
// Neutral while in flight: neither "complete" nor "not complete" is known yet,
|
|
// and asserting either would be the same lie in a different direction.
|
|
sopBtn.textContent = 'Open tool';
|
|
if(wpBtn) wpBtn.textContent = 'Checking…';
|
|
|
|
fetch('/api/projects/' + encodeURIComponent(active.id) + '/summary',
|
|
{ headers: { 'Accept': 'application/json' } })
|
|
.then(r => { if(!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
|
|
.then(sum => {
|
|
if(ProjectData.getActiveId() !== active.id) return; // switched while in flight
|
|
const old = sopCard.querySelector('.card-status'); if(old) old.remove();
|
|
if(sum.sop_complete){
|
|
sopCard.classList.add('complete');
|
|
sopBtn.textContent = 'Review';
|
|
setStatus('✓ SOP complete' + (sum.sop_name ? ' — ' + sum.sop_name : ''));
|
|
if(wpBtn) wpBtn.textContent = 'Open creator';
|
|
} else {
|
|
if(wpCard) wpCard.classList.add('disabled');
|
|
if(wpBtn) wpBtn.textContent = 'Complete SOP first';
|
|
}
|
|
})
|
|
.catch(err => {
|
|
if(ProjectData.getActiveId() !== active.id) return;
|
|
const old = sopCard.querySelector('.card-status'); if(old) old.remove();
|
|
// Explicitly unknown. The Creator is left reachable rather than disabled:
|
|
// locking someone out of their work because a status request failed is a
|
|
// worse outcome than letting the tool tell them itself.
|
|
setStatus('⚠ Could not check SOP status — ' + (err && err.message || 'offline'), 'card-status-error');
|
|
if(wpBtn) wpBtn.textContent = 'Open creator';
|
|
});
|
|
}
|
|
|
|
initProjects();
|
|
|
|
let allComments = [];
|
|
|
|
function toggleComments() {
|
|
const panel = document.getElementById('comments-panel');
|
|
panel.classList.toggle('open');
|
|
if (panel.classList.contains('open')) loadComments();
|
|
}
|
|
|
|
function submitComment() {
|
|
const name = document.getElementById('commenter-name').value || 'Anonymous';
|
|
const text = document.getElementById('comment-text').value.trim();
|
|
|
|
if (!text) {
|
|
alert('Please enter feedback.');
|
|
return;
|
|
}
|
|
|
|
const comment = {
|
|
name,
|
|
text,
|
|
timestamp: new Date().toLocaleString()
|
|
};
|
|
|
|
allComments.push(comment);
|
|
localStorage.setItem('wp_suite_index_comments', JSON.stringify(allComments));
|
|
if (window.postFeedback) window.postFeedback({ type: 'home_feedback', ...comment });
|
|
|
|
document.getElementById('comment-text').value = '';
|
|
loadComments();
|
|
}
|
|
|
|
function exportFeedback() {
|
|
const saved = localStorage.getItem('wp_suite_index_comments');
|
|
const data = saved ? JSON.parse(saved) : [];
|
|
if (!data.length) { alert('No feedback to export yet.'); return; }
|
|
const payload = { app: 'Work Package Suite', source: 'home', 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-feedback-home-' + new Date().toISOString().slice(0, 10) + '.json';
|
|
a.click();
|
|
setTimeout(() => URL.revokeObjectURL(a.href), 1000);
|
|
}
|
|
|
|
function importFeedback(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 feedback found in that file.'); return; }
|
|
const saved = localStorage.getItem('wp_suite_index_comments');
|
|
allComments = saved ? JSON.parse(saved) : [];
|
|
const seen = new Set(allComments.map(c => c.timestamp + '|' + c.text));
|
|
let added = 0;
|
|
incoming.forEach(c => { const k = c.timestamp + '|' + c.text; if (c.text && !seen.has(k)) { allComments.push(c); seen.add(k); added++; } });
|
|
localStorage.setItem('wp_suite_index_comments', JSON.stringify(allComments));
|
|
loadComments();
|
|
alert('Imported ' + added + ' feedback item' + (added === 1 ? '' : 's') + '.');
|
|
} catch (e) { alert('Could not read that file.'); }
|
|
ev.target.value = '';
|
|
};
|
|
r.readAsText(f);
|
|
}
|
|
|
|
function renderComments() {
|
|
const list = document.getElementById('comments-list');
|
|
if (allComments.length === 0) {
|
|
list.innerHTML = '<div style="color: var(--cds-text-secondary); font-style: italic; font-size: 12px;">No feedback yet. Be the first to share!</div>';
|
|
} else {
|
|
list.innerHTML = allComments.map(c => `
|
|
<div class="comment-item">
|
|
<div class="comment-meta"><strong>${(c.name||'Anonymous').replace(/</g,'<')}</strong> • ${c.timestamp||''}</div>
|
|
<div class="comment-text">${(c.text||'').replace(/</g,'<').replace(/>/g,'>')}</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
}
|
|
|
|
function loadComments() {
|
|
// Server is authoritative (so feedback is shared across users); fall back to
|
|
// the local cache if the API is unreachable.
|
|
const saved = localStorage.getItem('wp_suite_index_comments');
|
|
if (saved) { try { allComments = JSON.parse(saved) || []; } catch(e) { allComments = []; } }
|
|
renderComments();
|
|
fetch('/api/comments?source=home_feedback', { headers: { 'Accept': 'application/json' } })
|
|
.then(r => r.ok ? r.json() : null)
|
|
.then(rows => {
|
|
if (Array.isArray(rows)) {
|
|
allComments = rows.map(c => ({ name: c.author, text: c.text, timestamp: c.created_at ? new Date(c.created_at).toLocaleString() : '' }));
|
|
renderComments();
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
</script>
|
|
<script src="wp-chrome.js"></script>
|
|
<script src="wp-sidenav.js"></script>
|
|
</body>
|
|
</html>
|