138 lines
7.7 KiB
Plaintext
138 lines
7.7 KiB
Plaintext
|
<!DOCTYPE html>
|
||
|
|
<html lang="nl">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
|
|
<title>Architectuur Rapport — <%= diagram.name %> — Mek-Tech</title>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="/css/style.css">
|
||
|
|
<link rel="stylesheet" href="/css/dynamic.css">
|
||
|
|
<link rel="icon" href="/img/favicon.svg" type="image/svg+xml">
|
||
|
|
<style>
|
||
|
|
.report-wrap{max-width:900px;margin:0 auto;padding:2rem 1.5rem}
|
||
|
|
.report-header{text-align:center;padding:1.5rem 0;border-bottom:2px solid var(--accent);margin-bottom:1.5rem}
|
||
|
|
.report-header h1{font-size:1.4rem;color:var(--text);margin-bottom:.25rem}
|
||
|
|
.report-header .sub{color:var(--text-muted);font-size:.85rem}
|
||
|
|
.report-header .meta{color:var(--text-dim);font-size:.75rem;margin-top:.25rem}
|
||
|
|
.section-title{font-size:1rem;font-weight:600;color:var(--text);border-bottom:1px solid var(--border);padding-bottom:.35rem;margin-bottom:.75rem;display:flex;justify-content:space-between;align-items:center}
|
||
|
|
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.5rem;margin-bottom:1.5rem}
|
||
|
|
.summary-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .75rem;text-align:center}
|
||
|
|
.summary-card .num{font-size:1.5rem;font-weight:700;color:var(--accent)}
|
||
|
|
.summary-card .lbl{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}
|
||
|
|
.node-table{width:100%;border-collapse:collapse}
|
||
|
|
.node-table th{text-align:left;padding:.4rem .5rem;font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid var(--border);background:var(--bg-card)}
|
||
|
|
.node-table td{padding:.35rem .5rem;border-bottom:1px solid var(--border-light);font-size:.75rem;color:var(--text)}
|
||
|
|
.node-table tr:hover td{background:var(--border-light)}
|
||
|
|
.node-table .vendor-tag{display:inline-block;padding:.05rem .35rem;border-radius:3px;font-size:.6rem;font-weight:500;color:#fff}
|
||
|
|
.conn-table{width:100%;border-collapse:collapse}
|
||
|
|
.conn-table th{text-align:left;padding:.35rem .5rem;font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid var(--border);background:var(--bg-card)}
|
||
|
|
.conn-table td{padding:.3rem .5rem;border-bottom:1px solid var(--border-light);font-size:.7rem;color:var(--text)}
|
||
|
|
.type-chart{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1rem}
|
||
|
|
.type-chart .tc-item{display:flex;align-items:center;gap:.35rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:.35rem .5rem;font-size:.7rem}
|
||
|
|
.type-chart .tc-dot{width:8px;height:8px;border-radius:50%}
|
||
|
|
.action-bar{display:flex;gap:.5rem;justify-content:center;margin-top:1.5rem;padding:1rem 0;border-top:1px solid var(--border)}
|
||
|
|
@media print{.navbar,.action-bar{display:none!important}.report-wrap{padding:0}.node-table th{background:#f0f0f0}.summary-card{background:#f5f5f5;border-color:#ddd}}
|
||
|
|
</style>
|
||
|
|
<script src="https://unpkg.com/lucide@latest"></script></head>
|
||
|
|
<body>
|
||
|
|
<nav class="navbar"><div class="nav-inner"><a href="/" class="nav-brand"><img src="/img/logo.svg" class="nav-logo" alt="Mek-Tech"></a><div style="display:flex;align-items:center;gap:.4rem"><a href="/" class="nav-icon-btn" title="Dashboard"><i data-lucide="layout-dashboard" style="width:15px;height:15px"></i> Dashboard</a><button class="theme-toggle" id="themeToggle" onclick="toggleTheme()"></button><a href="/auth/logout" class="nav-icon-btn" style="color:var(--red)"><i data-lucide="log-out" style="width:15px;height:15px"></i> Uitloggen</a></div></div></nav>
|
||
|
|
|
||
|
|
<div class="report-wrap">
|
||
|
|
<header class="report-header">
|
||
|
|
<h1><%= diagram.name %></h1>
|
||
|
|
<div class="sub"><%= diagram.client_name %></div>
|
||
|
|
<div class="meta">
|
||
|
|
<%= diagram.diagram_type.replace(/_/g,' ') %> ·
|
||
|
|
<%= nodes.length %> componenten ·
|
||
|
|
<%= edges.length %> connecties ·
|
||
|
|
<%= new Date(diagram.updated_at).toLocaleDateString('nl-NL',{year:'numeric',month:'long',day:'numeric'}) %>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section style="margin-bottom:1.5rem">
|
||
|
|
<h3 class="section-title">Samenvatting</h3>
|
||
|
|
<div class="summary-grid">
|
||
|
|
<div class="summary-card"><div class="num"><%= nodes.length %></div><div class="lbl">Componenten</div></div>
|
||
|
|
<div class="summary-card"><div class="num"><%= edges.length %></div><div class="lbl">Connecties</div></div>
|
||
|
|
<div class="summary-card"><div class="num"><%= Object.keys(typeCount).length %></div><div class="lbl">Type Categorieën</div></div>
|
||
|
|
<div class="summary-card"><div class="num"><%= Object.keys(vendorCount).length %></div><div class="lbl">Vendoren</div></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="type-chart">
|
||
|
|
<% var colors={source:'#d29922',ingest:'#58a6ff',storage:'#3fb950',compute:'#a855f7',hw:'#ff7b00',net:'#34d399',ai:'#fb7185',queue:'#38bdf8',security:'#f472b6',infra:'#6e7681',other:'#8b949e'}; %>
|
||
|
|
<% Object.entries(typeCount).forEach(function(e){ %>
|
||
|
|
<div class="tc-item"><div class="tc-dot" style="background:<%= colors[e[0]]||'#8b949e' %>"></div><%= e[0] %>: <%= e[1] %></div>
|
||
|
|
<% }) %>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section style="margin-bottom:1.5rem">
|
||
|
|
<h3 class="section-title">Componenten Detail</h3>
|
||
|
|
<% if (nodes.length === 0) { %>
|
||
|
|
<div class="empty-state"><p>Geen componenten in dit diagram.</p></div>
|
||
|
|
<% } else { %>
|
||
|
|
<table class="node-table">
|
||
|
|
<thead>
|
||
|
|
<tr><th>#</th><th>Label</th><th>Type</th><th>Vendor</th><th>Model</th><th>IP Adres</th><th>Specs</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<% nodes.forEach(function(n,i){ %>
|
||
|
|
<tr>
|
||
|
|
<td style="color:var(--text-dim)"><%= i+1 %></td>
|
||
|
|
<td><strong><%= n.label||'—' %></strong></td>
|
||
|
|
<td><%= (n.type||'').split('-').pop() %></td>
|
||
|
|
<td>
|
||
|
|
<% if(n.vendor){ %>
|
||
|
|
<% var vc='#555d66';var vl=(n.vendor||'').toLowerCase(); %>
|
||
|
|
<% if(vl.includes('hpe')) vc='#ff7b00';else if(vl.includes('dell')) vc='#0076a8';else if(vl.includes('lenovo')) vc='#e41f33';else if(vl.includes('cisco')) vc='#00529a';else if(vl.includes('juniper')) vc='#44a833';else if(vl.includes('arista')) vc='#cc3333';else if(vl.includes('netapp')) vc='#00a1df';else if(vl.includes('pure')) vc='#4a90d9';else if(vl.includes('fortinet')) vc='#ee3124';else if(vl.includes('apc')) vc='#6e7681';else if(vl.includes('nvidia')) vc='#76b900';%>
|
||
|
|
<span class="vendor-tag" style="background:<%= vc %>"><%= n.vendor %></span>
|
||
|
|
<% } else { %>—<% } %>
|
||
|
|
</td>
|
||
|
|
<td><%= n.model||'—' %></td>
|
||
|
|
<td><%= n.ip||'—' %></td>
|
||
|
|
<td style="font-size:.65rem;color:var(--text-muted);max-width:200px;white-space:pre-wrap"><%= n.specs||'—' %></td>
|
||
|
|
</tr>
|
||
|
|
<% }) %>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<% } %>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section style="margin-bottom:1.5rem">
|
||
|
|
<h3 class="section-title">Connecties (<%= edges.length %>)</h3>
|
||
|
|
<% if (edges.length === 0) { %>
|
||
|
|
<div class="empty-state"><p>Geen connecties in dit diagram.</p></div>
|
||
|
|
<% } else { %>
|
||
|
|
<table class="conn-table">
|
||
|
|
<thead><tr><th>#</th><th>Van</th><th>Naar</th></tr></thead>
|
||
|
|
<tbody>
|
||
|
|
<% edges.forEach(function(e,i){
|
||
|
|
var from=nodes.find(function(n){return n.id==e.from});
|
||
|
|
var to=nodes.find(function(n){return n.id==e.to});
|
||
|
|
%>
|
||
|
|
<tr>
|
||
|
|
<td style="color:var(--text-dim)"><%= i+1 %></td>
|
||
|
|
<td><%= from?from.label+' ('+from.type.split('-').pop()+')':'ID:'+e.from %></td>
|
||
|
|
<td>→ <%= to?to.label+' ('+to.type.split('-').pop()+')':'ID:'+e.to %></td>
|
||
|
|
</tr>
|
||
|
|
<% }) %>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<% } %>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<% if (diagram.description) { %>
|
||
|
|
<section style="margin-bottom:1.5rem">
|
||
|
|
<h3 class="section-title">Beschrijving</h3>
|
||
|
|
<div class="card"><p style="white-space:pre-wrap;font-size:.85rem"><%= diagram.description %></p></div>
|
||
|
|
</section>
|
||
|
|
<% } %>
|
||
|
|
|
||
|
|
<div class="action-bar">
|
||
|
|
<button class="btn btn-primary" onclick="window.print()">📄 Download PDF</button>
|
||
|
|
<button class="btn btn-secondary" onclick="window.location='/architecture/<%= diagram.id %>'">Open Designer</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="/js/theme.js"></script><script>lucide.createIcons()</script></body>
|
||
|
|
</html>
|