22356fed66
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
- System overview, artery hierarchy, build flow, room config diagrams - Veins docs: Jira, Slack, Google OAuth - Shunts docs: MercadoPago mock - DOT source files with generated SVGs - HTML viewers with navigation and full-screen mode Solves: - Freelance work standardization - Missing infrastructure replication (shunts) - Reliable testing environment (BDD -> Gherkin -> Tests)
116 lines
4.3 KiB
HTML
116 lines
4.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Graph Viewer - Veins</title>
|
|
<link rel="stylesheet" href="../architecture/styles.css" />
|
|
</head>
|
|
<body class="graph-viewer">
|
|
<header class="graph-header">
|
|
<a href="index.html" class="back-link">← Back</a>
|
|
<div class="nav-controls">
|
|
<button onclick="navigate(-1)" id="btn-prev" title="Previous">◀</button>
|
|
<span id="nav-position">1 / 4</span>
|
|
<button onclick="navigate(1)" id="btn-next" title="Next">▶</button>
|
|
</div>
|
|
<h1 id="graph-title">Loading...</h1>
|
|
<div class="graph-controls">
|
|
<button onclick="setMode('fit')">Fit</button>
|
|
<button onclick="setMode('fit-width')">Width</button>
|
|
<button onclick="setMode('fit-height')">Height</button>
|
|
<button onclick="setMode('actual-size')">100%</button>
|
|
<button onclick="downloadSvg()">↓ SVG</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="graph-container" id="graph-container">
|
|
<img id="graph-img" src="" alt="Graph" />
|
|
</div>
|
|
|
|
<script>
|
|
const graphOrder = [
|
|
"jira",
|
|
"slack",
|
|
"google",
|
|
"mercadopago-shunt",
|
|
];
|
|
|
|
const graphs = {
|
|
"jira": {
|
|
title: "Jira Vein",
|
|
file: "jira.svg",
|
|
},
|
|
"slack": {
|
|
title: "Slack Vein",
|
|
file: "slack.svg",
|
|
},
|
|
"google": {
|
|
title: "Google Vein (OAuth)",
|
|
file: "google.svg",
|
|
},
|
|
"mercadopago-shunt": {
|
|
title: "MercadoPago Shunt",
|
|
file: "mercadopago-shunt.svg",
|
|
},
|
|
};
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
let graphKey = params.get("g") || "jira";
|
|
let currentIndex = graphOrder.indexOf(graphKey);
|
|
if (currentIndex === -1) currentIndex = 0;
|
|
|
|
function loadGraph(key) {
|
|
const graph = graphs[key];
|
|
document.getElementById("graph-title").textContent = graph.title;
|
|
document.getElementById("graph-img").src = graph.file;
|
|
document.title = graph.title + " - Soleprint";
|
|
history.replaceState(null, "", "?g=" + key);
|
|
graphKey = key;
|
|
updateNavHints();
|
|
}
|
|
|
|
function updateNavHints() {
|
|
const idx = graphOrder.indexOf(graphKey);
|
|
const prevBtn = document.getElementById("btn-prev");
|
|
const nextBtn = document.getElementById("btn-next");
|
|
prevBtn.disabled = idx === 0;
|
|
nextBtn.disabled = idx === graphOrder.length - 1;
|
|
document.getElementById("nav-position").textContent =
|
|
idx + 1 + " / " + graphOrder.length;
|
|
}
|
|
|
|
function navigate(direction) {
|
|
const idx = graphOrder.indexOf(graphKey);
|
|
const newIdx = idx + direction;
|
|
if (newIdx >= 0 && newIdx < graphOrder.length) {
|
|
currentIndex = newIdx;
|
|
loadGraph(graphOrder[newIdx]);
|
|
}
|
|
}
|
|
|
|
function setMode(mode) {
|
|
const container = document.getElementById("graph-container");
|
|
container.className = "graph-container " + mode;
|
|
}
|
|
|
|
function downloadSvg() {
|
|
const graph = graphs[graphKey];
|
|
const link = document.createElement("a");
|
|
link.href = graph.file;
|
|
link.download = graph.file;
|
|
link.click();
|
|
}
|
|
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "ArrowLeft") navigate(-1);
|
|
else if (e.key === "ArrowRight") navigate(1);
|
|
else if (e.key === "Escape") window.location.href = "index.html";
|
|
});
|
|
|
|
loadGraph(graphOrder[currentIndex]);
|
|
setMode("fit");
|
|
</script>
|
|
</body>
|
|
</html>
|