Dom/rpa_vision_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dashboard): clic plein écran sur les images cartographie
Some checks failed
security-audit / Bandit (scan statique) (push) Successful in 12s
Details
security-audit / pip-audit (CVE dépendances) (push) Successful in 10s
Details
security-audit / Scan secrets (grep) (push) Successful in 8s
Details
tests / Lint (ruff + black) (push) Successful in 13s
Details
tests / Tests unitaires (sans GPU) (push) Failing after 15s
Details
tests / Tests sécurité (critique) (push) Has been skipped
Details

Browse Source 
Modale fullscreen au clic sur les diagrammes BPMN/DFG.
Fermeture par clic ou Échap. Les images sont illisibles en miniature.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dom
2026-04-20 18:26:05 +02:00
parent 82d7b38cff
commit 6a2248ddcd
1 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
web_dashboard/templates/process_mining.html
View File

@@ -219,12 +219,18 @@
<button class="toggle-btn" onclick="switchView('dfg', this)">Vue flux</button> <button class="toggle-btn" onclick="switchView('dfg', this)">Vue flux</button>
</div> </div>
<div id="bpmnView" class="process-image-container"> <div id="bpmnView" class="process-image-container">
<img id="bpmnImage" src="" alt="Cartographie des processus" /> <img id="bpmnImage" src="" alt="Cartographie des processus" style="cursor:pointer" onclick="openFullscreen(this)" title="Cliquer pour agrandir" />
<p class="image-legend">Chaque rectangle represente une etape du processus observe. Les fleches indiquent l'ordre des actions.</p> <p class="image-legend">Cliquer sur l'image pour l'agrandir. Chaque rectangle represente une etape du processus observe.</p>
</div> </div>
<div id="dfgView" class="process-image-container" style="display:none;"> <div id="dfgView" class="process-image-container" style="display:none;">
<img id="dfgImage" src="" alt="Graphe de flux" /> <img id="dfgImage" src="" alt="Graphe de flux" style="cursor:pointer" onclick="openFullscreen(this)" title="Cliquer pour agrandir" />
<p class="image-legend">Chaque noeud represente une action. Les chiffres sur les fleches indiquent la frequence de passage.</p> <p class="image-legend">Cliquer sur l'image pour l'agrandir. Les chiffres sur les fleches indiquent la frequence de passage.</p>
</div>
<!-- Modale plein écran -->
<div id="fullscreenModal" onclick="closeFullscreen()" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.95); z-index:9999; cursor:zoom-out; overflow:auto;">
<div style="position:absolute; top:10px; right:20px; color:white; font-size:24px; cursor:pointer; z-index:10000;">✕ Fermer</div>
<img id="fullscreenImg" src="" style="display:block; margin:20px auto; max-width:95vw; max-height:95vh; object-fit:contain;" />
</div> </div>
</div> </div>
@@ -420,6 +426,21 @@ function renderResults(data) {
// ======================================================================== // ========================================================================
// Toggle vue BPMN / DFG // Toggle vue BPMN / DFG
// ======================================================================== // ========================================================================
function openFullscreen(img) {
document.getElementById('fullscreenImg').src = img.src;
document.getElementById('fullscreenModal').style.display = 'block';
document.body.style.overflow = 'hidden';
}
function closeFullscreen() {
document.getElementById('fullscreenModal').style.display = 'none';
document.body.style.overflow = 'auto';
}
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeFullscreen();
});
function switchView(view, btn) { function switchView(view, btn) {
document.querySelectorAll('.view-toggle .toggle-btn').forEach(b => b.classList.remove('active')); document.querySelectorAll('.view-toggle .toggle-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active'); btn.classList.add('active');