511 lines
29 KiB
HTML
511 lines
29 KiB
HTML
{% extends 'scanner/base.html' %}
|
|
{% load i18n %}
|
|
|
|
{% block columns %}{% endblock %}
|
|
|
|
{% block styles %}
|
|
{{ block.super }}
|
|
<link href="/static/css/doc_database.css" rel="stylesheet">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="doc-wrapper">
|
|
|
|
<!-- En-tête de la documentation -->
|
|
<header class="doc-header">
|
|
<div class="doc-header-inner">
|
|
<div class="doc-header-icon">
|
|
<i class="fas fa-database"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="doc-title">{% trans "Architecture des bases de données" %}</h1>
|
|
<p class="doc-subtitle">{% trans "Planarian Scanner — Infrastructure de stockage et modèles de données" %}</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Navigation latérale -->
|
|
<nav class="doc-sidenav" id="sidenav">
|
|
<p class="nav-section-label">{% trans "Navigation" %}</p>
|
|
<a href="#section-reductstore" class="nav-link active">
|
|
<i class="fas fa-wave-square"></i> ReductStore
|
|
</a>
|
|
<a href="#section-mariadb" class="nav-link">
|
|
<i class="fas fa-server"></i> MariaDB
|
|
</a>
|
|
<a href="#section-auth" class="nav-link nav-sub">
|
|
<i class="fas fa-shield-alt"></i> {% trans "Authentification" %}
|
|
</a>
|
|
<a href="#section-planarian" class="nav-link nav-sub">
|
|
<i class="fas fa-microscope"></i> Planarian
|
|
</a>
|
|
<a href="#section-scanner" class="nav-link nav-sub">
|
|
<i class="fas fa-camera"></i> Scanner
|
|
</a>
|
|
<a href="#section-config" class="nav-link nav-sub-2">
|
|
<i class="fas fa-sliders-h"></i> {% trans "Configuration" %}
|
|
</a>
|
|
<a href="#section-wells" class="nav-link nav-sub-2">
|
|
<i class="fas fa-circle"></i> {% trans "Puits" %}
|
|
</a>
|
|
<a href="#section-multiwell" class="nav-link nav-sub-2">
|
|
<i class="fas fa-th"></i> {% trans "Multi-puits" %}
|
|
</a>
|
|
<a href="#section-wellpos" class="nav-link nav-sub-2">
|
|
<i class="fas fa-map-marker-alt"></i> {% trans "Positions" %}
|
|
</a>
|
|
<a href="#section-experiments" class="nav-link nav-sub-2">
|
|
<i class="fas fa-flask"></i> {% trans "Expériences" %}
|
|
</a>
|
|
<a href="#section-sessions" class="nav-link nav-sub-2">
|
|
<i class="fas fa-play-circle"></i> {% trans "Sessions" %}
|
|
</a>
|
|
<a href="#section-celery" class="nav-link nav-sub-2">
|
|
<i class="fas fa-tasks"></i> Celery Beat
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- Contenu principal -->
|
|
<main class="doc-content">
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- SECTION 1 : ReductStore -->
|
|
<!-- ============================================================ -->
|
|
<section class="doc-section" id="section-reductstore">
|
|
<div class="section-header">
|
|
<span class="section-badge badge-time">{% trans "Séries temporelles" %}</span>
|
|
<h2><i class="fas fa-wave-square"></i> ReductStore</h2>
|
|
<p class="section-desc">{% trans "Base de données de séries temporelles pour les images et métriques de l'application." %}</p>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<div class="info-card card-accent-blue">
|
|
<div class="card-icon"><i class="fas fa-link"></i></div>
|
|
<div class="card-body">
|
|
<h4>{% trans "Accès" %}</h4>
|
|
<a href="http://192.168.1.200:8383/ui/dashboard" target="_blank" class="access-link">
|
|
192.168.1.200:8383/ui/dashboard <i class="fas fa-external-link-alt"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="subsection-title"><i class="fas fa-bucket"></i> {% trans "Buckets" %}</h3>
|
|
<div class="info-row">
|
|
<div class="info-card card-accent-cyan">
|
|
<div class="card-icon"><i class="fas fa-images"></i></div>
|
|
<div class="card-body">
|
|
<h4><code>camera</code></h4>
|
|
<p>{% trans "Stockage des images capturées par la caméra." %}</p>
|
|
<div class="tag-list">
|
|
<span class="tag tag-blue">JPEG</span>
|
|
<span class="tag tag-gray">{% trans "Séries temporelles" %}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-card card-accent-cyan">
|
|
<div class="card-icon"><i class="fas fa-chart-line"></i></div>
|
|
<div class="card-body">
|
|
<h4><code>planarian_metrics</code></h4>
|
|
<p>{% trans "Métriques de suivi des planaires." %}</p>
|
|
<div class="tag-list">
|
|
<span class="tag tag-green">JSON</span>
|
|
<span class="tag tag-gray">{% trans "Séries temporelles" %}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- SECTION 2 : MariaDB -->
|
|
<!-- ============================================================ -->
|
|
<section class="doc-section" id="section-mariadb">
|
|
<div class="section-header">
|
|
<span class="section-badge badge-orange">{% trans "Base relationnelle" %}</span>
|
|
<h2><i class="fas fa-server"></i> MariaDB</h2>
|
|
<p class="section-desc">{% trans "Base de données relationnelle principale de l'application Django." %}</p>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<div class="info-card card-accent-orange">
|
|
<div class="card-icon"><i class="fas fa-database"></i></div>
|
|
<div class="card-body">
|
|
<h4>Adminer</h4>
|
|
<a href="http://192.168.1.200/adminer/" target="_blank" class="access-link">
|
|
192.168.1.200/adminer/ <i class="fas fa-external-link-alt"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="info-card card-accent-orange">
|
|
<div class="card-icon"><i class="fas fa-user-shield"></i></div>
|
|
<div class="card-body">
|
|
<h4>{% trans "Administration Django" %}</h4>
|
|
<a href="http://192.168.1.200/admin" target="_blank" class="access-link">
|
|
192.168.1.200/admin <i class="fas fa-external-link-alt"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- -------------------------------------------------------- -->
|
|
<!-- Authentification -->
|
|
<!-- -------------------------------------------------------- -->
|
|
<div class="subsection" id="section-auth">
|
|
<h3 class="subsection-title"><i class="fas fa-shield-alt"></i> {% trans "Authentification & Autorisation" %}</h3>
|
|
|
|
<div class="info-row">
|
|
<div class="info-card card-accent-purple">
|
|
<div class="card-icon"><i class="fas fa-users-cog"></i></div>
|
|
<div class="card-body">
|
|
<h4>{% trans "Groupes" %}</h4>
|
|
<ul class="doc-list">
|
|
<li><i class="fas fa-crown text-gold"></i> Admin</li>
|
|
<li><i class="fas fa-user-tie text-blue"></i> Staff</li>
|
|
<li><i class="fas fa-user text-gray"></i> {% trans "Staff limité" %}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="info-card card-accent-purple">
|
|
<div class="card-icon"><i class="fas fa-user-circle"></i></div>
|
|
<div class="card-body">
|
|
<h4>{% trans "Utilisateurs" %}</h4>
|
|
<ul class="doc-list">
|
|
<li><i class="fas fa-star text-gold"></i> superadmin</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- -------------------------------------------------------- -->
|
|
<!-- Planarian -->
|
|
<!-- -------------------------------------------------------- -->
|
|
<div class="subsection" id="section-planarian">
|
|
<h3 class="subsection-title"><i class="fas fa-microscope"></i> {% trans "Application Planarian" %}</h3>
|
|
<div class="info-row">
|
|
<div class="info-card card-accent-green full-width">
|
|
<div class="card-icon"><i class="fas fa-vials"></i></div>
|
|
<div class="card-body">
|
|
<h4><code>planarian_experimentconfig</code></h4>
|
|
<p>{% trans "Configurations des expériences de suivi des planaires." %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- -------------------------------------------------------- -->
|
|
<!-- Scanner -->
|
|
<!-- -------------------------------------------------------- -->
|
|
<div class="subsection" id="section-scanner">
|
|
<h3 class="subsection-title"><i class="fas fa-camera"></i> {% trans "Application Scanner" %}</h3>
|
|
|
|
<!-- Configuration -->
|
|
<div class="sub-subsection" id="section-config">
|
|
<h4 class="table-title">
|
|
<i class="fas fa-sliders-h"></i>
|
|
<code>scanner_configuration</code>
|
|
<span class="table-desc">{% trans "Constantes et valeurs par défaut" %}</span>
|
|
</h4>
|
|
<div class="info-row">
|
|
<div class="info-card card-accent-blue">
|
|
<div class="card-icon"><i class="fas fa-camera-retro"></i></div>
|
|
<div class="card-body">
|
|
<h4>{% trans "Caméra" %}</h4>
|
|
<ul class="doc-list">
|
|
<li>
|
|
<i class="fas fa-plug"></i>
|
|
{% trans "Capture" %} :
|
|
<div class="tag-list inline">
|
|
<span class="tag tag-blue">Arducam</span>
|
|
<span class="tag tag-gray">Webcam</span>
|
|
<span class="tag tag-gray">{% trans "Fichier vidéo" %}</span>
|
|
</div>
|
|
</li>
|
|
<li><i class="fas fa-film"></i> {% trans "Fréquence vidéos (fps)" %}</li>
|
|
<li><i class="fas fa-arrows-alt-h"></i> {% trans "Largeur de capture vidéo" %}</li>
|
|
<li><i class="fas fa-arrows-alt-v"></i> {% trans "Hauteur de capture vidéo" %}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="info-card card-accent-blue">
|
|
<div class="card-icon"><i class="fas fa-crosshairs"></i></div>
|
|
<div class="card-body">
|
|
<h4>{% trans "Suivi / Tracking" %}</h4>
|
|
<ul class="doc-list">
|
|
<li><i class="fas fa-cog"></i> {% trans "Valeurs par défaut du tracking" %}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Puits -->
|
|
<div class="sub-subsection" id="section-wells">
|
|
<h4 class="table-title">
|
|
<i class="fas fa-circle"></i>
|
|
<code>scanner_well</code>
|
|
<span class="table-desc">{% trans "Noms des puits" %}</span>
|
|
</h4>
|
|
<div class="info-row">
|
|
<div class="info-card card-accent-teal full-width">
|
|
<div class="card-icon"><i class="fas fa-th-large"></i></div>
|
|
<div class="card-body">
|
|
<p>{% trans "Contient uniquement les noms des puits disponibles." %}</p>
|
|
<p class="hint"><i class="fas fa-exchange-alt"></i> {% trans "Lecture en serpentin dans le sens des ±X" %}</p>
|
|
<!-- Grille serpentin : D1→D6 / C6←C1 / B1→B6 / A6←A1 -->
|
|
<div class="well-grid well-grid--serpentine">
|
|
{# Ligne D : gauche → droite (D1..D6) #}
|
|
<span class="well-chip wc-d">D1</span><span class="well-chip wc-d">D2</span>
|
|
<span class="well-chip wc-d">D3</span><span class="well-chip wc-d">D4</span>
|
|
<span class="well-chip wc-d">D5</span><span class="well-chip wc-d">D6</span>
|
|
{# Ligne C : droite → gauche (C6..C1) #}
|
|
<span class="well-chip wc-c">C6</span><span class="well-chip wc-c">C5</span>
|
|
<span class="well-chip wc-c">C4</span><span class="well-chip wc-c">C3</span>
|
|
<span class="well-chip wc-c">C2</span><span class="well-chip wc-c">C1</span>
|
|
{# Ligne B : gauche → droite (B1..B6) #}
|
|
<span class="well-chip wc-b">B1</span><span class="well-chip wc-b">B2</span>
|
|
<span class="well-chip wc-b">B3</span><span class="well-chip wc-b">B4</span>
|
|
<span class="well-chip wc-b">B5</span><span class="well-chip wc-b">B6</span>
|
|
{# Ligne A : droite → gauche (A6..A1) #}
|
|
<span class="well-chip wc-a">A6</span><span class="well-chip wc-a">A5</span>
|
|
<span class="well-chip wc-a">A4</span><span class="well-chip wc-a">A3</span>
|
|
<span class="well-chip wc-a">A2</span><span class="well-chip wc-a">A1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Multi-puits -->
|
|
<div class="sub-subsection" id="section-multiwell">
|
|
<h4 class="table-title">
|
|
<i class="fas fa-th"></i>
|
|
<code>scanner_multiwell</code>
|
|
<span class="table-desc">{% trans "Géométrie et déplacements" %}</span>
|
|
</h4>
|
|
<div class="info-row">
|
|
<div class="info-card card-accent-indigo">
|
|
<div class="card-icon"><i class="fas fa-map"></i></div>
|
|
<div class="card-body">
|
|
<h4>{% trans "Position sur la table" %}</h4>
|
|
<div class="position-grid">
|
|
<div class="pos-cell active">HG<br><small>{% trans "Haut gauche" %}</small></div>
|
|
<div class="pos-cell active">HD<br><small>{% trans "Haut droit" %}</small></div>
|
|
<div class="pos-cell active">BG<br><small>{% trans "Bas gauche" %}</small></div>
|
|
<div class="pos-cell active">BD<br><small>{% trans "Bas droit" %}</small></div>
|
|
</div>
|
|
<p class="hint"><i class="fas fa-info-circle"></i> {% trans "4 positions disponibles sur la table" %}</p>
|
|
<p class="hint"><i class="fas fa-info-circle"></i> {% trans "(0, 0) de le CNC est en HD" %}</p>
|
|
<p class="hint"><i class="fas fa-info-circle"></i> {% trans "HD --> HG +X" %}</p>
|
|
<p class="hint"><i class="fas fa-info-circle"></i> {% trans "HD --> BD +Y" %}</p>
|
|
</div>
|
|
</div>
|
|
<div class="info-card card-accent-indigo">
|
|
<div class="card-icon"><i class="fas fa-ruler-combined"></i></div>
|
|
<div class="card-body">
|
|
<h4>{% trans "Géométrie" %}</h4>
|
|
<ul class="doc-list">
|
|
<li><i class="fas fa-grip-lines"></i> {% trans "Nombre de lignes" %}</li>
|
|
<li><i class="fas fa-grip-lines-vertical"></i> {% trans "Nombre de colonnes" %}</li>
|
|
<li><i class="fas fa-circle"></i> {% trans "Diamètre des puits" %}</li>
|
|
<li><i class="fas fa-font"></i> {% trans "Définition des lignes (A, B, C, D)" %}</li>
|
|
<li><i class="fas fa-exchange-alt"></i> {% trans "Lecture en serpentin ±X (D→C→B→A)" %}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="info-card card-accent-indigo">
|
|
<div class="card-icon"><i class="fas fa-route"></i></div>
|
|
<div class="card-body">
|
|
<h4>{% trans "Déplacements" %}</h4>
|
|
<ul class="doc-list">
|
|
<li><i class="fas fa-sort-numeric-down"></i> {% trans "Ordre de lecture" %}</li>
|
|
<li><i class="fas fa-stopwatch"></i> {% trans "Durée de capture (calibration)" %}</li>
|
|
<li>
|
|
<i class="fas fa-location-arrow"></i>
|
|
{% trans "Origine X" %}
|
|
<span class="badge-auto">{% trans "Calibration" %}</span>
|
|
</li>
|
|
<li>
|
|
<i class="fas fa-location-arrow fa-rotate-90"></i>
|
|
{% trans "Origine Y" %}
|
|
<span class="badge-auto">{% trans "Calibration" %}</span>
|
|
</li>
|
|
<li><i class="fas fa-arrows-alt-h"></i> {% trans "Pas X mesuré" %}</li>
|
|
<li><i class="fas fa-arrows-alt-v"></i> {% trans "Pas Y mesuré" %}</li>
|
|
<li><i class="fas fa-tachometer-alt"></i> {% trans "Vitesse (mm/mn)" %}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-row">
|
|
<div class="info-card card-accent-yellow full-width">
|
|
<div class="card-icon"><i class="fas fa-exclamation-triangle"></i></div>
|
|
<div class="card-body">
|
|
<h4>{% trans "Positions générées" %}</h4>
|
|
<p>{% trans "Si les positions ne sont pas encore générées, le système efface" %} <code>WellPosition</code> {% trans "et recalcule toutes les positions des puits." %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Position des puits -->
|
|
<div class="sub-subsection" id="section-wellpos">
|
|
<h4 class="table-title">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
<code>scanner_wellposition</code>
|
|
<span class="table-desc">{% trans "Positions calibrées des puits" %}</span>
|
|
</h4>
|
|
<div class="info-row">
|
|
<div class="info-card card-accent-cyan">
|
|
<div class="card-icon"><i class="fas fa-drafting-compass"></i></div>
|
|
<div class="card-body">
|
|
<h4>{% trans "Calibration" %}</h4>
|
|
<p>{% trans "Manuelle ou automatique." %}</p>
|
|
<ul class="doc-list">
|
|
<li><i class="fas fa-arrows-alt-h"></i> {% trans "Axe X (mm)" %} <span class="badge-auto">{% trans "Calibration" %}</span></li>
|
|
<li><i class="fas fa-arrows-alt-v"></i> {% trans "Axe Y (mm)" %} <span class="badge-auto">{% trans "Calibration" %}</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="info-card card-accent-red">
|
|
<div class="card-icon"><i class="fas fa-exclamation-circle"></i></div>
|
|
<div class="card-body">
|
|
<h4>{% trans "Pixels par mm" %} <span class="badge-important">{% trans "IMPORTANT" %}</span></h4>
|
|
<p>{% trans "Facteur de calibration optique calculé en fonction de la taille de l'image." %}</p>
|
|
<div class="alert-box">
|
|
<i class="fas fa-redo"></i>
|
|
{% trans "Recalibrer si la taille de l'image est modifiée !" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Expériences -->
|
|
<div class="sub-subsection" id="section-experiments">
|
|
<h4 class="table-title">
|
|
<i class="fas fa-flask"></i>
|
|
<code>scanner_experiment</code> & <code>scanner_experimentwell</code>
|
|
<span class="table-desc">{% trans "Expériences et puits associés" %}</span>
|
|
</h4>
|
|
<div class="info-row">
|
|
<div class="info-card card-accent-green">
|
|
<div class="card-icon"><i class="fas fa-vial"></i></div>
|
|
<div class="card-body">
|
|
<h4>{% trans "Valeurs importantes" %}</h4>
|
|
<ul class="doc-list">
|
|
<li><i class="fas fa-link"></i> {% trans "Multi-puits lié" %}</li>
|
|
<li><i class="fas fa-clock"></i> {% trans "Durée de capture (secondes)" %}</li>
|
|
<li><i class="fas fa-fingerprint"></i> {% trans "Identifiant d'expérience" %}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="info-card card-accent-green">
|
|
<div class="card-icon"><i class="fas fa-magic"></i></div>
|
|
<div class="card-body">
|
|
<h4>{% trans "Création automatique" %}</h4>
|
|
<p>{% trans "À la création d'une expérience, les puits liés sont automatiquement créés dans" %} <code>scanner_experimentwell</code>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sessions -->
|
|
<div class="sub-subsection" id="section-sessions">
|
|
<h4 class="table-title">
|
|
<i class="fas fa-play-circle"></i>
|
|
<code>scanner_session</code> & <code>scanner_sessionexperiment</code>
|
|
<span class="table-desc">{% trans "Sessions d'expériences" %}</span>
|
|
</h4>
|
|
<div class="info-row">
|
|
<div class="info-card card-accent-blue">
|
|
<div class="card-icon"><i class="fas fa-layer-group"></i></div>
|
|
<div class="card-body">
|
|
<h4>{% trans "Regroupement" %}</h4>
|
|
<p>{% trans "Regroupe les expériences lors d'un balayage dans" %} <code>scanner_sessionexperiment</code>.</p>
|
|
<div class="tag-list">
|
|
<span class="tag tag-blue">{% trans "4 multi-puits maximum" %}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-card card-accent-blue">
|
|
<div class="card-icon"><i class="fas fa-tasks"></i></div>
|
|
<div class="card-body">
|
|
<h4>{% trans "2 tâches Celery créées" %}</h4>
|
|
<ul class="doc-list">
|
|
<li>
|
|
<i class="fas fa-play text-green"></i>
|
|
<code>scanning_session</code>
|
|
<p class="task-desc">{% trans "Lancement différé d'un balayage de session." %}</p>
|
|
</li>
|
|
<li>
|
|
<i class="fas fa-file-export text-cyan"></i>
|
|
<code>export_session</code>
|
|
<p class="task-desc">
|
|
{% trans "Export images et vidéos :" %}
|
|
<span class="tag tag-gray">{% trans "Local" %}</span>
|
|
<span class="tag tag-gray">{% trans "Support distant" %}</span>
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Celery Beat -->
|
|
<div class="sub-subsection" id="section-celery">
|
|
<h4 class="table-title">
|
|
<i class="fas fa-tasks"></i>
|
|
<code>django_celery_beat_periodictask</code>
|
|
<span class="table-desc">{% trans "Gestion des tâches différées" %}</span>
|
|
</h4>
|
|
<div class="info-row">
|
|
<div class="info-card card-accent-orange full-width">
|
|
<div class="card-icon"><i class="fas fa-clock"></i></div>
|
|
<div class="card-body">
|
|
<p>{% trans "Gère le déclenchement et la planification des tâches Celery différées." %}</p>
|
|
<div class="tag-list">
|
|
<span class="tag tag-orange">Celery Beat</span>
|
|
<span class="tag tag-gray">{% trans "Tâches périodiques" %}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- end section-scanner -->
|
|
</section><!-- end section-mariadb -->
|
|
|
|
</main><!-- end doc-content -->
|
|
</div><!-- end doc-wrapper -->
|
|
{% endblock %}
|
|
|
|
{% block js_footer %}
|
|
{{ block.super }}
|
|
<script>
|
|
/* Mise en évidence du lien actif dans la navigation latérale */
|
|
(function () {
|
|
const links = document.querySelectorAll('.nav-link');
|
|
const sections = document.querySelectorAll('.doc-section, .subsection, .sub-subsection');
|
|
|
|
/* Observer d'intersection pour la navigation active */
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
links.forEach(l => l.classList.remove('active'));
|
|
const target = document.querySelector(`.nav-link[href="#${entry.target.id}"]`);
|
|
if (target) target.classList.add('active');
|
|
}
|
|
});
|
|
},
|
|
{ rootMargin: '-10% 0px -80% 0px' }
|
|
);
|
|
|
|
sections.forEach(s => { if (s.id) observer.observe(s); });
|
|
})();
|
|
</script>
|
|
{% endblock %}
|