0db3ec2ce1
Voegt docs/datamodel/diagrammen/ toe: één self-contained HTML per deelmodel (instroom, aanmelding, behandelplan, diagnose, intake-behandeladvies, rapportage, screening, wachtlijst), elk met een Mermaid erDiagram, blueprint-vormgeving en sleep/scroll pan-zoom (mermaid.js + svg-pan-zoom via CDN, geen serverside build nodig). Per diagram alleen sleutel-/FK-attributen en de kernrelaties uit de §2/§3 entiteiten-/cardinaliteitensecties van het bijbehorende deelmodel, niet elk veld — bedoeld als navigeerbaar overzicht naast de tabelvorm, niet als vervanging ervan. Scope-keuzes: - model-intake.md en datamodel-discovery.md zijn overgeslagen: eerstgenoemde is volledig vervangen door model-intake-behandeladvies.md, laatstgenoemde is een prosedocument zonder entiteitenstructuur. - model-aanmelding.md toont alleen de nog geldige PERSOON/CLIENT-kern; AANMELDING/VERWIJZING/ZORGEPISODE zijn vervangen door model-instroom.md en daar al gediagrammeerd. - model-screening.md krijgt een expliciete waarschuwing in titel en bronregel: het losse screeningsbesluit is achterhaald door besluit B21 (screeningsbesluit = acceptatiebesluit, nu care_acceptance_decision in model-instroom.md). - model-behandelplan.md, model-rapportage.md en model-wachtlijst.md tonen een statusnotitie (in herziening resp. deels herzien resp. voorlopig onderzoeksmodel) conform hun documentstatus. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
298 lines
8.1 KiB
HTML
298 lines
8.1 KiB
HTML
<!doctype html>
|
||
<html lang="nl">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Wachtlijst — entiteit-relatiediagram</title>
|
||
<style>
|
||
:root {
|
||
--bg: #F5FAF9;
|
||
--surface: #FFFFFF;
|
||
--surface-2: #EAF3F1;
|
||
--border: #CFE1DE;
|
||
--text: #12211F;
|
||
--text-muted: #4C6B66;
|
||
--accent: #0F766E;
|
||
--font-sans: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||
--font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--bg: #0A1615;
|
||
--surface: #10201E;
|
||
--surface-2: #15302C;
|
||
--border: #1F3A36;
|
||
--text: #E6F5F2;
|
||
--text-muted: #8FB6B0;
|
||
--accent: #34D6C4;
|
||
}
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
|
||
html, body {
|
||
margin: 0;
|
||
height: 100%;
|
||
overscroll-behavior: none;
|
||
}
|
||
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family: var(--font-sans);
|
||
}
|
||
|
||
.app {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
}
|
||
|
||
/* Toolbar */
|
||
.toolbar {
|
||
flex: 0 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
padding: 10px 16px;
|
||
background: var(--surface);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.title-group {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 10px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.title-group h1 {
|
||
font-size: 0.95rem;
|
||
margin: 0;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.title-group .source {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.controls {
|
||
display: flex;
|
||
gap: 6px;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.controls button {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--border);
|
||
background: var(--surface-2);
|
||
color: var(--text);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
}
|
||
|
||
.controls button:hover { border-color: var(--accent); color: var(--accent); }
|
||
.controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
.controls button { transition: border-color 120ms, color 120ms; }
|
||
}
|
||
|
||
/* Diagram canvas */
|
||
.canvas-wrap {
|
||
flex: 1 1 auto;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background:
|
||
repeating-linear-gradient(0deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
|
||
repeating-linear-gradient(90deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
|
||
#08211D;
|
||
}
|
||
|
||
.canvas-wrap .hint {
|
||
position: absolute;
|
||
left: 16px;
|
||
bottom: 14px;
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: #6FBFB2;
|
||
z-index: 2;
|
||
pointer-events: none;
|
||
}
|
||
|
||
#diagram {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
#diagram svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.loading {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #6FBFB2;
|
||
font-family: var(--font-mono);
|
||
font-size: 13px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="app">
|
||
<div class="toolbar">
|
||
<div class="title-group">
|
||
<h1>Wachtlijst — entiteit-relatiediagram</h1>
|
||
<span class="source">model-wachtlijst.md §2–§3 · 9 entiteiten · 8 relaties · voorlopig onderzoeksmodel, niet bouwrijp</span>
|
||
</div>
|
||
<div class="controls">
|
||
<button id="zoom-out" title="Uitzoomen" aria-label="Uitzoomen">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
|
||
</button>
|
||
<button id="zoom-in" title="Inzoomen" aria-label="Inzoomen">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="8" y1="3" x2="8" y2="13" stroke="currentColor" stroke-width="2"/><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
|
||
</button>
|
||
<button id="zoom-fit" title="Passend maken" aria-label="Passend maken">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||
<path d="M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</button>
|
||
<button id="zoom-reset" title="Reset (100%)" aria-label="Reset naar 100%">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||
<path d="M8 2a6 6 0 1 1-4.24 1.76" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
||
<path d="M2 2v3h3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="canvas-wrap">
|
||
<div class="loading" id="loading">Diagram wordt geladen…</div>
|
||
<div id="diagram" class="mermaid">
|
||
erDiagram
|
||
WACHTLIJSTPLAATSING {
|
||
uuid id PK
|
||
string soort
|
||
uuid aanmelding_id FK
|
||
uuid zorgepisode_id FK
|
||
uuid afdeling_id FK
|
||
uuid zorgprogramma_id FK
|
||
date teldatum
|
||
string status
|
||
}
|
||
WACHTLIJSTACTIVITEIT {
|
||
uuid id PK
|
||
uuid wachtlijstplaatsing_id FK
|
||
uuid uitgevoerd_door FK
|
||
string type
|
||
date datum
|
||
}
|
||
WACHTLIJSTOPSCHORTING {
|
||
uuid id PK
|
||
uuid wachtlijstplaatsing_id FK
|
||
date begindatum
|
||
date einddatum
|
||
string reden
|
||
}
|
||
referral_case {
|
||
uuid id PK
|
||
}
|
||
clinical_care_episode {
|
||
uuid id PK
|
||
}
|
||
AFDELING {
|
||
uuid id PK
|
||
}
|
||
ZORGPROGRAMMA {
|
||
uuid id PK
|
||
}
|
||
MEDEWERKER {
|
||
uuid id PK
|
||
}
|
||
VESTIGING {
|
||
uuid id PK
|
||
}
|
||
|
||
referral_case ||--o{ WACHTLIJSTPLAATSING : "aanmelding_id (soort aanmeld)"
|
||
clinical_care_episode ||--o{ WACHTLIJSTPLAATSING : "zorgepisode_id (soort behandel)"
|
||
AFDELING ||--o{ WACHTLIJSTPLAATSING : "afdeling_id"
|
||
ZORGPROGRAMMA |o--o{ WACHTLIJSTPLAATSING : "zorgprogramma_id (optioneel)"
|
||
WACHTLIJSTPLAATSING ||--o{ WACHTLIJSTACTIVITEIT : "wachtlijstplaatsing_id"
|
||
WACHTLIJSTPLAATSING ||--o{ WACHTLIJSTOPSCHORTING : "wachtlijstplaatsing_id"
|
||
MEDEWERKER ||--o{ WACHTLIJSTACTIVITEIT : "uitgevoerd_door"
|
||
VESTIGING |o--o{ AFDELING : "vestiging_id (voorgesteld, open §7.2)"
|
||
</div>
|
||
<div class="hint">sleep om te pannen · scroll om te zoomen</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
|
||
<script>
|
||
mermaid.initialize({
|
||
startOnLoad: false,
|
||
theme: "base",
|
||
themeVariables: {
|
||
background: "#08211D",
|
||
primaryColor: "#0E2E29",
|
||
primaryBorderColor: "#57D8C6",
|
||
primaryTextColor: "#EAFBF7",
|
||
lineColor: "#57D8C6",
|
||
textColor: "#EAFBF7",
|
||
tertiaryColor: "#123B35",
|
||
attributeBackgroundColorOdd: "#0E2E29",
|
||
attributeBackgroundColorEven: "#123B35",
|
||
fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
|
||
fontSize: "13px"
|
||
}
|
||
});
|
||
|
||
(async () => {
|
||
await mermaid.run({ querySelector: "#diagram" });
|
||
document.getElementById("loading").remove();
|
||
|
||
const svgEl = document.querySelector("#diagram svg");
|
||
svgEl.removeAttribute("style");
|
||
|
||
const panZoom = svgPanZoom(svgEl, {
|
||
panEnabled: true,
|
||
zoomEnabled: true,
|
||
controlIconsEnabled: false,
|
||
fit: true,
|
||
center: true,
|
||
minZoom: 0.15,
|
||
maxZoom: 8,
|
||
zoomScaleSensitivity: 0.35
|
||
});
|
||
|
||
document.getElementById("zoom-in").addEventListener("click", () => panZoom.zoomIn());
|
||
document.getElementById("zoom-out").addEventListener("click", () => panZoom.zoomOut());
|
||
document.getElementById("zoom-fit").addEventListener("click", () => { panZoom.fit(); panZoom.center(); });
|
||
document.getElementById("zoom-reset").addEventListener("click", () => { panZoom.reset(); });
|
||
|
||
window.addEventListener("resize", () => { panZoom.resize(); panZoom.fit(); panZoom.center(); });
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|