93 lines
4.9 KiB
Plaintext
93 lines
4.9 KiB
Plaintext
|
<!DOCTYPE html>
|
||
|
|
<html lang="nl">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
|
|
<title>Studio — <%= rack.name %> — Mek-Tech</title>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="/css/style.css">
|
||
|
|
<link rel="stylesheet" href="/css/neon.css">
|
||
|
|
<link rel="stylesheet" href="/css/dynamic.css">
|
||
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
||
|
|
<style>
|
||
|
|
html,body{height:100%;margin:0;overflow:hidden}
|
||
|
|
body{background:#0a1628;font-family:Inter,sans-serif;color:#e8f4ff}
|
||
|
|
.studio-shell{display:flex;flex-direction:column;height:100vh}
|
||
|
|
.studio-toolbar{display:flex;align-items:center;justify-content:space-between;padding:.45rem .75rem;background:rgba(15,30,55,.95);border-bottom:1px solid rgba(0,212,255,.2);gap:.5rem;flex-wrap:wrap}
|
||
|
|
.studio-toolbar h1{font-size:.85rem;margin:0;font-weight:700}
|
||
|
|
.studio-toolbar p{font-size:.65rem;color:#6b9ab8;margin:.1rem 0 0}
|
||
|
|
.studio-actions{display:flex;gap:.35rem;flex-wrap:wrap}
|
||
|
|
.studio-split{flex:1;display:flex;min-height:0;position:relative}
|
||
|
|
.studio-pane{min-width:0;overflow:hidden;background:#0d1f38}
|
||
|
|
.studio-pane.rack-pane{flex:0 0 var(--rack-w,38%);border-right:1px solid rgba(0,212,255,.15)}
|
||
|
|
.studio-pane.flow-pane{flex:1}
|
||
|
|
.studio-pane iframe{width:100%;height:100%;border:none;display:block;background:transparent}
|
||
|
|
.studio-divider{width:6px;cursor:col-resize;background:rgba(0,212,255,.08);border-left:1px solid rgba(0,212,255,.15);border-right:1px solid rgba(0,212,255,.15);flex-shrink:0;transition:background .15s}
|
||
|
|
.studio-divider:hover,.studio-divider.dragging{background:rgba(0,212,255,.25)}
|
||
|
|
.studio-hint{font-size:.62rem;color:#6b9ab8;padding:.35rem .75rem;background:rgba(0,0,0,.2);border-top:1px solid rgba(0,212,255,.1)}
|
||
|
|
.studio-hint strong{color:var(--accent,#00d4ff)}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="has-rack-ws-nav">
|
||
|
|
<div class="studio-shell">
|
||
|
|
<%- include('partials/rack-workspace-nav', { rack, flowDiagram, landscapeDiagram, workspaceTab: 'studio' }) %>
|
||
|
|
<div class="studio-toolbar">
|
||
|
|
<div>
|
||
|
|
<h1>Gecombineerde Studio — <%= rack.name %></h1>
|
||
|
|
<p>Infrastructuur links · Applicatie flows rechts · sleep de scheidingslijn om te vergroten/verkleinen</p>
|
||
|
|
</div>
|
||
|
|
<div class="studio-actions">
|
||
|
|
<button type="button" class="btn btn-secondary btn-small" onclick="loadDemo()">Voorbeeld laden</button>
|
||
|
|
<button type="button" class="btn btn-secondary btn-small" onclick="setLayout(50)">50/50</button>
|
||
|
|
<button type="button" class="btn btn-secondary btn-small" onclick="setLayout(35)">Meer flow</button>
|
||
|
|
<button type="button" class="btn btn-secondary btn-small" onclick="setLayout(60)">Meer rack</button>
|
||
|
|
<a href="/racks/<%= rack.id %>/report" class="btn btn-accent btn-small">Rapport</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="studio-split" id="studioSplit">
|
||
|
|
<div class="studio-pane rack-pane" id="rackPane">
|
||
|
|
<iframe id="rackFrame" src="/racks/<%= rack.id %>?embed=1" title="Rack Design"></iframe>
|
||
|
|
</div>
|
||
|
|
<div class="studio-divider" id="studioDivider" title="Sleep om te vergroten/verkleinen"></div>
|
||
|
|
<div class="studio-pane flow-pane" id="flowPane">
|
||
|
|
<iframe id="flowFrame" src="<%= flowDiagram ? '/racks/' + rack.id + '/diagram/' + flowDiagram.id : '/racks/' + rack.id + '/flow/new' %>?embed=1" title="Applicatie Flow"></iframe>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="studio-hint">
|
||
|
|
<strong>Tip:</strong> Wijzig het rack links (devices slepen) en teken flows rechts. Gebruik de tabs bovenaan om te wisselen — je blijft altijd binnen rack <strong><%= rack.name %></strong>.
|
||
|
|
<% if (!flowDiagram) { %> Nog geen flow? Klik <strong>Voorbeeld laden</strong> voor een startpunt. <% } %>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
lucide.createIcons();
|
||
|
|
const divider = document.getElementById('studioDivider');
|
||
|
|
const split = document.getElementById('studioSplit');
|
||
|
|
let dragging = false;
|
||
|
|
function setLayout(pct){ document.documentElement.style.setProperty('--rack-w', pct + '%'); }
|
||
|
|
setLayout(38);
|
||
|
|
divider.addEventListener('mousedown', function(e){ dragging=true; divider.classList.add('dragging'); e.preventDefault(); });
|
||
|
|
window.addEventListener('mousemove', function(e){
|
||
|
|
if(!dragging) return;
|
||
|
|
const r = split.getBoundingClientRect();
|
||
|
|
const pct = Math.min(70, Math.max(22, ((e.clientX - r.left) / r.width) * 100));
|
||
|
|
setLayout(pct);
|
||
|
|
});
|
||
|
|
window.addEventListener('mouseup', function(){ dragging=false; divider.classList.remove('dragging'); });
|
||
|
|
async function loadDemo(){
|
||
|
|
try {
|
||
|
|
const r = await fetch('/racks/<%= rack.id %>/studio/demo', { method: 'POST' });
|
||
|
|
const d = await r.json();
|
||
|
|
if(d.success){
|
||
|
|
document.getElementById('flowFrame').src = '/racks/<%= rack.id %>/diagram/' + d.flowId + '?embed=1';
|
||
|
|
setTimeout(function(){ location.reload(); }, 400);
|
||
|
|
}
|
||
|
|
} catch(e){ alert('Demo laden mislukt'); }
|
||
|
|
}
|
||
|
|
window.addEventListener('message', function(e){
|
||
|
|
if(e.data && e.data.type === 'mek-navigate-rack') window.location.href = e.data.url;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<script src="/js/theme.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|