Gorenje Orodjarna · tool status portal

Front-end architecture of the clickable prototypes

How .work/prototype/ is organised: two live prototypes (A Evolve and C Production line) on one shared mock data set and a few shared helpers. Plain HTML, CSS and JavaScript, no build step and no framework. Each page opens from file:// or from the local no-cache server.

2 live prototypes, B parked1 shared mock data file4 scripts per prototypeAbout 8,900 lines, tests includedState as of 13 Nov 2026

Folder structure

.work/prototype/
- index.htmlHub page: links to A, B and C
- data.jssharedMock data, PMT query helpers, personas
- shared/shared
  - serve.pyNo-cache local server, port 3300
  - custom-select.jsReplaces every native select with our menu
  - rail-resize.jsDrag to resize the project side panel
  - make_pdfs.pyGenerates the mock drawings in files/
  - logos/ · hisense.pngCustomer logo marks, brand wordmark
- files/14 mock PDFs (drawings, reports, delivery notes)
- a/Prototype A · Evolve
  - index.htmlShell and script load order
  - core.jsState, router, top bar, render, events, sheet engine
  - views.jsPages, tools table, timeline, side panel
  - sheets.jsSide sheets: update, approve, upload, invite …
  - flows.jsDemo panel and guided flows F1–F10
  - app.css · r6-sheets.cssAll styling, tokens on :root
  - test_a.html · test_a.jsIn-browser self-test, 149 checks
  - shots-r3 … shots-r6/Screenshots per review round
- b/parkedSame layout as A; no longer updated
- c/Prototype C · Production line
  - index.htmlShell and script load order
  - core.jsState, router, shell, rail, events, toasts
  - views.jsPages, board, phases, timeline, toolbar fit
  - sheets.jsSide sheets, same set as A
  - flows.jsPrototype lab panel and flows
  - app.cssAll styling, tokens on :root
  - test/selftest.html · selftest_c.jsIn-browser self-test, 119 checks

Script load order (A and C alike)

../data.js puts the mock data on window.PMT_DATA, the helpers on window.PMT
core.js sets up state, the router and render()
views.js registers the pages
sheets.js registers the side sheets
flows.js adds the demo panel and guided flows
shared/*.js enhancers watch the DOM after every render

Why it is built this way

Classic scripts sharing one global namespace, so the files open straight from disk with no bundler. A and C keep the same file split, so a change in one is easy to carry to the other.

Not part of the product code

The demo panel, the guided flows, the self-tests and the screenshot scripts exist only for reviews. The real app lives in repo/ and is rebuilt from the approved Final row.

How the folders depend on each other

index.htmlHub, links to every prototype

links to

a/Prototype A · Evolve

core.js→views.js→sheets.js→flows.js

app.css · r6-sheets.css · test_a.js

c/Prototype C · Production line

core.js→views.js→sheets.js→flows.js

app.css · test/selftest_c.js

load, open and are enhanced by

sharedused by both prototypes

data.jsMock data, PMT helpers, personas. Loaded first by both.

custom-select.js · rail-resize.jsEnhancers: rebuild every select and the panel resize after each render.

files/14 mock PDFs, opened from tool pages and sheets. Made by make_pdfs.py.

logos/ · hisense.pngCompany logo marks and the brand wordmark.

serve.pyNo-cache server for the whole folder at localhost:3300.

Each prototype only depends downward: on the shared folder, never on the other prototype. A change in shared/ or data.js reaches A and C at once.

What happens on every click

flowchart LR
  url["URL hash<br/>#/as/persona/route"] --> router["core.js<br/>router"]
  router --> render["render()"]
  render --> shell["top bar · side panel<br/>core.js + views.js"]
  render --> page["page view<br/>views.js"]
  render --> sheet["sheet layer<br/>sheets.js"]
  render --> lab["demo panel<br/>flows.js"]
  shell --> ev["one click and input handler<br/>core.js"]
  page --> ev
  sheet --> ev
  ev --> act["action, e.g. save update<br/>A.acts / ACT"]
  act --> state["state S + mock data D"]
  state --> render
  render -. DOM changed .-> enh["shared enhancers<br/>custom select · panel resize"]

The whole app re-renders from state on each action; there is no partial DOM patching. The enhancers rebuild their controls after every render through a MutationObserver.

Modules

File	Responsibility	A lines	C lines
`core.js`	State, router, render loop, top bar, events, sheet engine, toasts, icons, variations	676	654
`views.js`	Home, project, tool, search, companies, users, activity, help, profile; tools toolbar and table, board, phases, timeline; side panel	936	842
`sheets.js`	Approve, thread, new message, upload, update phase, add tool, new project, new company, delete company, invite, access	678	555
`flows.js`	Demo panel: personas, Controls switch, variations, guided flows	225	222
`app.css` (A: + `r6-sheets.css`)	Tokens, layout, components; one control radius token for fields and buttons	1,213	1,212
`tests`	Self-test that clicks through every flow and checks layout rules	458	416
`data.js`	Shared: 4 projects, 61 tools, phases, messages, files, accounts, audit log	415 shared
`shared/*.js`	Shared: custom select (174), side panel resize (54)	228 shared