Split HTML/CSS/JS + SSE for TDocs only

app.py

@@ -1,3 +1,4 @@
+from fastapi.staticfiles import StaticFiles
 import requests, re, warnings
 from dotenv import load_dotenv
 from fastapi import FastAPI, Request, HTTPException
@@ -55,6 +56,7 @@ spec_etsi_indexer = SpecETSIIndexer()
 
 app = FastAPI()
 app.add_middleware(CORSMiddleware, allow_credentials=True, allow_headers=["*"], allow_origins=["*"])
+app.mount("/static", StaticFiles(directory="static"), name="static")
 
 @app.get('/')
 def main():
@@ -91,9 +93,13 @@ def index_tdocs_wg_progress(req: IndexTDoc):
     category, wg_number = get_folder_name(req.wg)
     folder = meetings_mapping[category][wg_number]
     url = f"https://www.3gpp.org/ftp/{meetings_mapping[category][0]}"
-
-    tdoc_indexer.process_workgroup(folder, url)
-    return {"status": "OK"}
+    def generate_events():
+        yield f"event: info\ndata: {req.wg}\n\n"
+        for content in tdoc_indexer.process_workgroup(folder, url):
+            yield content
+        tdoc_indexer.save_indexer()
+        yield "event: end\ndata: Indexation terminé !\n\n"
+    return StreamingResponse(generate_events(), media_type="text/event-stream")
 
 @app.post("/index_tdocs/meeting")
 def index_tdocs_meeting_progress(req: IndexTDoc):
@@ -105,17 +111,26 @@ def index_tdocs_meeting_progress(req: IndexTDoc):
     category, wg_number = get_folder_name(req.wg)
     folder = meetings_mapping[category][wg_number]
     url = f"https://www.3gpp.org/ftp/{meetings_mapping[category][0]}/{folder}"
-    for i, meet in enumerate(req.meetings):
-        tdoc_indexer.process_meeting(meet, url)
-    tdoc_indexer.save_indexer()
-    return {"status": "OK"}
+    def generate_events():
+        yield f"event: get-maximum\ndata: {len(req.meetings)}\n\n"
+        for i, meet in enumerate(req.meetings):
+            yield f"event: info\ndata: {req.wg}-{meet}\n\n"
+            tdoc_indexer.process_meeting(meet, url)
+            yield f"event: progress\ndata: {i+1}\n\n"
+        tdoc_indexer.save_indexer()
+        yield "event: end\ndata: Indexation terminé !\n\n"
+    return StreamingResponse(generate_events(), media_type="text/event-stream")
 
 
 @app.post("/index_tdocs/all")
 def index_all_tdocs_progress():
-    tdoc_indexer.index_all_tdocs()
-    return {"status": "OK"}
-
+    def generate_events():
+        for content in tdoc_indexer.index_all_tdocs():
+            yield content
+        tdoc_indexer.save_indexer()
+        yield "event: end\ndata: Indexation terminé !\n\n"
+    return StreamingResponse(generate_events(), media_type="text/event-stream")
+        
 
 @app.post("/index_specs/3gpp")
 def index_3gpp_specs_progress():

classes.py

@@ -196,8 +196,13 @@ class TDocIndexer:
             futures = [executor.submit(self.process_meeting, meeting, wg_url) 
                       for meeting in meeting_folders if meeting not in ['./', '../']]
             
-            # Attendre que toutes les tâches soient terminées
-            concurrent.futures.wait(futures)
+            total = len(futures)
+            done_count = 0
+            yield f"event: get-maximum\ndata: {total}\n\n"
+
+            for future in concurrent.futures.as_completed(futures):
+                done_count += 1
+                yield f"event: progress\ndata: {done_count}\n\n"
 
     def index_all_tdocs(self):
         """Indexer tous les documents ZIP dans la structure FTP 3GPP avec multithreading"""
@@ -220,7 +225,9 @@ class TDocIndexer:
             # Traiter chaque groupe de travail séquentiellement
             # (mais les réunions à l'intérieur seront traitées en parallèle)
             for wg in workgroups:
-                self.process_workgroup(wg, main_url)
+                yield f"event: info\ndata: {main_tsg}-{wg}\n\n"
+                for content in self.process_workgroup(wg, main_url):
+                    yield content
         
         docs_count_after = len(self.indexer)
         new_docs_count = abs(docs_count_after - docs_count_before)
@@ -249,7 +256,14 @@ class TDocIndexer:
         with concurrent.futures.ThreadPoolExecutor(max_workers=self.max_workers) as executor:
             futures = [executor.submit(self.process_meeting, meeting, main_url, workshop=True) 
                       for meeting in meeting_folders if meeting not in ['./', '../']]
-            concurrent.futures.wait(futures)
+            total = len(futures)
+            done_count = 0
+
+            yield f"event: get-maximum\ndata: {total}\n\n"
+
+            for future in concurrent.futures.as_completed(futures):
+                done_count += 1
+                yield f"event: progress\ndata: {done_count}\n\n"
         
         docs_count_after = len(self.indexer)
         new_docs_count = docs_count_after - docs_count_before

index.html

@@ -1,367 +1,67 @@
 <!DOCTYPE html>
 <html lang="fr">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>3GPP/ETSI Document Indexer Main Menu</title>
-<style>
-  body {
-    font-family: "Montserrat", sans-serif;
-    background: #fafafa;
-    margin: 24px;
-    color: #1f2937;
-  }
-  h1 {
-    font-size: 1.8rem;
-    margin-bottom: 24px;
-  }
-  .row {
-    display: flex;
-    gap: 24px;
-    margin-bottom: 24px;
-  }
-  .column {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-  button {
-    background-color: #6c63ff;
-    color: white;
-    font-weight: 600;
-    font-size: 1rem;
-    padding: 10px 14px;
-    border: none;
-    border-radius: 0.6em;
-    cursor: pointer;
-    box-shadow: 0 2px 8px rgb(31 41 55 / 8%);
-    transition: background-color 0.2s ease;
-  }
-  button:hover {
-    background-color: #5753d6;
-  }
-  button:disabled {
-    cursor: default;
-    background-color: #778191;
-  }
-  select {
-    padding: 10px 14px;
-    border-radius: 0.6em;
-    border: none;
-    box-shadow: 0 2px 8px rgb(31 41 55 / 8%);
-    font-size: 1rem;
-    color: #374151;
-    background: #f3f4f6;
-    appearance: none;
-    cursor: pointer;
-  }
-  select:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px #6c63ff;
-    background: white;
-  }
-  select:hover {
-    background: #e5e7eb;
-  }
-  select:disabled {
-    cursor: default;
-  }
-
-  .dropdown-content {
-  position: absolute; /* ou fixed si tu veux */
-  z-index: 9999; /* un nombre élevé pour être sûr que c'est au dessus */
-  background-color: white; /* pour que ce soit bien visible */
-  border: 1px solid #ccc;
-  /* autres styles que tu avais déjà */
-  border-radius: 0.6em;
-  box-shadow: 0 2px 8px rgb(31 41 55 / 8%);
-  padding: 10px;
-  max-height: 55vh;
-  overflow-y: auto;
-}
-
-#dropbtn {
-  background: #f3f4f6;
-  color: #374151;
-  font-size: 1rem;
-  font-family: "Montserrat", sans-serif; /* même font que body */
-  padding: 10px 14px;
-  border-radius: 0.6em;
-  font-weight: normal;
-  border: none;
-  box-shadow: 0 2px 8px rgb(31 41 55 / 8%);
-  cursor: pointer;
-  width: 100%;
-  text-align: left;
-  appearance: none; /* supprime les styles natives du bouton */
-  user-select: none;
-  transition: background-color 0.2s ease;
-  display: inline-block;
-}
-
-#dropbtn:hover {
-  background: #e5e7eb;
-}
 
-#dropbtn:disabled {
-  cursor: default;
-}
-
-#dropbtn:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #6c63ff;
-  background: white;
-}
-
-  option {
-    background: white;
-  }
-  textarea {
-    width: 100%;
-    min-height: 450px;
-    border-radius: 0.6em;
-    border: none;
-    box-shadow: 0 2px 6px rgb(31 41 55 / 12%);
-    padding: 12px;
-    font-family: monospace, monospace;
-    font-size: 0.95rem;
-    color: #1f2937;
-    resize: vertical;
-    background: white;
-  }
-  textarea[readonly] {
-    background: #e5e7eb;
-    cursor: default;
-  }
-</style>
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>3GPP/ETSI Document Indexer Main Menu</title>
+    <link rel="stylesheet" href="/static/style.css">
 </head>
-<body>
 
-<h1>📄 3GPP/ETSI Document/Specification Indexer Main Menu</h1>
+<body>
 
-<div class="row" id="r1">
-  <div class="column">
-    <button id="tdocs-btn">Re-index TDocs</button>
-    <button id="spec-3gpp-btn">Re-index 3GPP Specifications</button>
-  </div>
-  <div class="column">
-    <select id="tdocs-wg-option" aria-label="Options Working Group TDocs">
-      <option value="ALL" selected>Index all working groups</option>
-      <option value="SA0">SP</option>
-      <option value="SA1">SA1</option>
-      <option value="SA2">SA2</option>
-      <option value="SA3">SA3</option>
-      <option value="SA4">SA4</option>
-      <option value="SA5">SA5</option>
-      <option value="SA6">SA6</option>
-      <option value="CT0">CP</option>
-      <option value="CT1">CT1</option>
-      <option value="CT2">CT2</option>
-      <option value="CT3">CT3</option>
-      <option value="CT4">CT4</option>
-      <option value="CT5">CT5</option>
-      <option value="CT6">CT6</option>
-      <option value="RAN0">RP</option>
-      <option value="RAN1">RAN1</option>
-      <option value="RAN2">RAN2</option>
-      <option value="RAN3">RAN3</option>
-      <option value="RAN4">RAN4</option>
-      <option value="RAN5">RAN5</option>
-      <option value="RAN6">RAN6</option>
-    </select>
-    
-  </div>
-  <div class="column">
-    <div class="dropdown">
-      <button id="dropbtn" disabled="disabled">Index all meetings</button>
-      <div id="dropdownContent" class="dropdown-content" style="display:none;">
-        <label style="display:none;"><input type="checkbox" checked value="ALL">Index all meetings</label>
-      </div>
+    <h1>📄 3GPP/ETSI Document/Specification Indexer Main Menu</h1>
+
+    <div class="row" id="r1">
+        <div class="column">
+            <button id="tdocs-btn">Re-index TDocs</button>
+            <button id="spec-3gpp-btn">Re-index 3GPP Specifications</button>
+        </div>
+        <div class="column">
+            <select id="tdocs-wg-option" aria-label="Options Working Group TDocs">
+                <option value="ALL" selected>Index all working groups</option>
+                <option value="SA0">SP</option>
+                <option value="SA1">SA1</option>
+                <option value="SA2">SA2</option>
+                <option value="SA3">SA3</option>
+                <option value="SA4">SA4</option>
+                <option value="SA5">SA5</option>
+                <option value="SA6">SA6</option>
+                <option value="CT0">CP</option>
+                <option value="CT1">CT1</option>
+                <option value="CT2">CT2</option>
+                <option value="CT3">CT3</option>
+                <option value="CT4">CT4</option>
+                <option value="CT5">CT5</option>
+                <option value="CT6">CT6</option>
+                <option value="RAN0">RP</option>
+                <option value="RAN1">RAN1</option>
+                <option value="RAN2">RAN2</option>
+                <option value="RAN3">RAN3</option>
+                <option value="RAN4">RAN4</option>
+                <option value="RAN5">RAN5</option>
+                <option value="RAN6">RAN6</option>
+            </select>
+
+        </div>
+        <div class="column">
+            <div class="dropdown">
+                <button id="dropbtn" disabled="disabled">Index all meetings</button>
+                <div id="dropdownContent" class="dropdown-content" style="display:none;">
+                    <label style="display:none;"><input type="checkbox" checked value="ALL">Index all meetings</label>
+                </div>
+            </div>
+            <button id="spec-etsi-btn">Re-index ETSI Specifications</button>
+        </div>
     </div>
-    <button id="spec-etsi-btn">Re-index ETSI Specifications</button>
-  </div>
-</div>
-
-<textarea id="output" readonly placeholder="Output..." aria-label="Output console"></textarea>
-
-<script type="module">
-  const output = document.getElementById('output');
-  let selectedMeetings = [];
-  let currentURL = null;
-
-  function toggleDropdown() {
-    const dropdown = document.getElementById("dropdownContent");
-    dropdown.style.display = (dropdown.style.display === "none") ? "block" : "none";
-  }
-
-  document.getElementById('dropbtn').addEventListener('click', ()=>{toggleDropdown()})
-  document.addEventListener('mousedown', (e)=>{
-    if(document.getElementById("dropdownContent").style.display == "block" && e.target.className != "dropdown-content" && e.target.tagName != "INPUT" && e.target.tagName != "LABEL"){
-      document.getElementById("dropdownContent").style.display = "none";
-    }
-  })
-
-  function logMessage(msg, reset){
-    if(reset){
-        output.value = msg + "\n";
-    };
-    output.value += msg + '\n';
-    output.scrollTop = output.scrollHeight;
-  }
-
-  document.getElementById('tdocs-wg-option').addEventListener('change', async (e) => {
-  let wg = e.target.value;
-  const dropdownContent = document.getElementById('dropdownContent');
-  const dropbtn = document.getElementById('dropbtn');
 
-  if (wg != "ALL") {
-    dropdownContent.innerHTML = '<label style="display:none;"><input type="checkbox" checked value="ALL">Index all meetings</label>';
-    const response = await fetch(`/get_meetings/${wg}`, { method: "GET" });
-    const responseJson = await response.json();
-    const meetings = responseJson.meetings;
-    currentURL = responseJson.url;
+    <center>
+        <p id="infoText">No documents indexed</p>
+        <progress id="indexProgression" value="0" max="50"></progress>
+    </center>
 
-    for (const meet of meetings) {
-      const label = document.createElement('label');
-      const checkbox = document.createElement('input');
-      checkbox.type = "checkbox";
-      checkbox.value = meet;
-      label.appendChild(checkbox);
-      label.appendChild(document.createTextNode(meet));
-      dropdownContent.appendChild(label);
-      dropdownContent.appendChild(document.createElement('br'));
-    }
-    dropbtn.removeAttribute('disabled');
-
-    // après création, ajoute les listeners de gestion sur chaque checkbox
-    initCheckboxListeners();
-    // Initialise l'état initial
-    updateDropbtnLabel();
-  } else {
-    dropdownContent.innerHTML = '<label style="display:none;"><input type="checkbox" checked value="ALL">Index all meetings</label>';
-    dropbtn.setAttribute('disabled', 'true');
-    dropbtn.textContent = "Index all meetings";
-  }
-});
-
-function disableButtons(){
-  document.getElementById("spec-3gpp-btn").setAttribute('disabled', 'disabled')
-  document.getElementById("spec-etsi-btn").setAttribute('disabled', 'disabled')
-  document.getElementById("tdocs-btn").setAttribute('disabled', 'disabled')
-}
-
-function enableButtons(){
-  document.getElementById("spec-3gpp-btn").removeAttribute('disabled')
-  document.getElementById("spec-etsi-btn").removeAttribute('disabled')
-  document.getElementById("tdocs-btn").removeAttribute('disabled')
-}
-
-function initCheckboxListeners() {
-  const dropdownContent = document.getElementById('dropdownContent');
-  const dropbtn = document.getElementById('dropbtn');
-
-  function updateState() {
-    const checkboxes = dropdownContent.querySelectorAll('input[type="checkbox"]');
-    const allCheckbox = dropdownContent.querySelector('input[value="ALL"]');
-    const checkedBoxes = Array.from(checkboxes).filter(cb => cb.checked && cb !== allCheckbox);
-
-    if (checkedBoxes.length === 0) {
-      allCheckbox.checked = true;
-      dropbtn.textContent = "Index all meetings";
-      selectedMeetings = ["ALL"];
-    } else {
-      if (allCheckbox.checked) {
-        allCheckbox.checked = false; // décocher ALL si autre(s) cochée(s)
-      }
-      if (checkedBoxes.length === 1) {
-        dropbtn.textContent = checkedBoxes[0].value;
-      } else {
-        dropbtn.textContent = `${checkedBoxes.length} meetings sélectionnés`;
-      }
-      selectedMeetings = checkedBoxes.map(cb => cb.value);
-    }
-
-    console.log(selectedMeetings);
-    console.log(currentURL);
-  }
-
-  const checkboxes = dropdownContent.querySelectorAll('input[type="checkbox"]');
-  checkboxes.forEach(cb => cb.addEventListener('change', updateState));
-
-  updateState(); // mise à jour initiale
-}
-function updateDropbtnLabel() {
-  const dropdownContent = document.getElementById('dropdownContent');
-  const checkboxes = dropdownContent.querySelectorAll('input[type="checkbox"]');
-  const allCheckbox = dropdownContent.querySelector('input[value="ALL"]');
-  const dropbtn = document.getElementById('dropbtn');
-  const checkedBoxes = Array.from(checkboxes).filter(cb => cb.checked && cb !== allCheckbox);
-
-  if (checkedBoxes.length === 0) {
-    allCheckbox.checked = true;
-    dropbtn.textContent = "Index all meetings";
-  } else if (checkedBoxes.length === 1) {
-    allCheckbox.checked = false;
-    dropbtn.textContent = checkedBoxes[0].value;
-  } else {
-    allCheckbox.checked = false;
-    dropbtn.textContent = `${checkedBoxes.length} meetings sélectionnés`;
-  }
-}
-
-
-  document.getElementById('tdocs-btn').addEventListener('click', () => {
-    disableButtons()
-    logMessage(`Started re-indexing TDocs`);
-    if(currentURL){
-      if(!selectedMeetings.includes("ALL")){
-        fetch("/index_tdocs/meeting", {method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify({wg: document.getElementById("tdocs-wg-option").value, meetings: selectedMeetings})})
-        .then(resp => resp.text())
-        .then(data => {
-          logMessage("Index successful")
-          enableButtons()
-        })
-      } else {
-        fetch("/index_tdocs/working_group", {method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify({wg: document.getElementById("tdocs-wg-option").value})})
-        .then(resp => resp.text())
-        .then(data => {
-          logMessage("Index successful")
-          enableButtons()
-        })
-      }
-    } else {
-      fetch("/index_tdocs/all", {method: "POST", headers: {"Content-Type": "application/json"}})
-        .then(resp => resp.text())
-        .then(data => {
-          logMessage("Index successful")
-          enableButtons()
-        })
-    }
-  });
-
-  document.getElementById('spec-3gpp-btn').addEventListener('click', () => {
-    disableButtons()
-    logMessage(`Started re-indexing 3GPP Specifications`);
-    fetch("/index_specs/3gpp", {method: "POST", headers: {"Content-Type": "application/json"}})
-      .then(resp => resp.text())
-      .then(data => {
-        logMessage("Index successful")
-        enableButtons()
-      })
-  });
-
-  document.getElementById('spec-etsi-btn').addEventListener('click', () => {
-    logMessage('Started re-indexing ETSI Specifications');
-    disableButtons()
-    fetch("/index_specs/etsi", {method: "POST", headers: {"Content-Type": "application/json"}})
-      .then(resp => resp.text())
-      .then(data => {
-        logMessage("Index successful")
-        enableButtons()
-      })
-  });
-</script>
 
 </body>
+<script src="/static/script.js"></script>
+
 </html>

static/script.js

@@ -0,0 +1,242 @@
+let selectedMeetings = [];
+let currentURL = null;
+
+function toggleDropdown() {
+    const dropdown = document.getElementById("dropdownContent");
+    dropdown.style.display = (dropdown.style.display === "none") ? "block" : "none";
+}
+
+document.getElementById('dropbtn').addEventListener('click', () => {
+    toggleDropdown()
+})
+document.addEventListener('mousedown', (e) => {
+    if (document.getElementById("dropdownContent").style.display == "block" && e.target.className != "dropdown-content" && e.target.tagName != "INPUT" && e.target.tagName != "LABEL") {
+        document.getElementById("dropdownContent").style.display = "none";
+    }
+})
+
+document.getElementById('tdocs-wg-option').addEventListener('change', async (e) => {
+    let wg = e.target.value;
+    const dropdownContent = document.getElementById('dropdownContent');
+    const dropbtn = document.getElementById('dropbtn');
+
+    if (wg != "ALL") {
+        dropdownContent.innerHTML = '<label style="display:none;"><input type="checkbox" checked value="ALL">Index all meetings</label>';
+        const response = await fetch(`/get_meetings/${wg}`, {
+            method: "GET"
+        });
+        const responseJson = await response.json();
+        const meetings = responseJson.meetings;
+        currentURL = responseJson.url;
+
+        for (const meet of meetings) {
+            const label = document.createElement('label');
+            const checkbox = document.createElement('input');
+            checkbox.type = "checkbox";
+            checkbox.value = meet;
+            label.appendChild(checkbox);
+            label.appendChild(document.createTextNode(meet));
+            dropdownContent.appendChild(label);
+            dropdownContent.appendChild(document.createElement('br'));
+        }
+        dropbtn.removeAttribute('disabled');
+
+        // après création, ajoute les listeners de gestion sur chaque checkbox
+        initCheckboxListeners();
+        // Initialise l'état initial
+        updateDropbtnLabel();
+    } else {
+        dropdownContent.innerHTML = '<label style="display:none;"><input type="checkbox" checked value="ALL">Index all meetings</label>';
+        dropbtn.setAttribute('disabled', 'true');
+        dropbtn.textContent = "Index all meetings";
+    }
+});
+
+function disableButtons() {
+    document.getElementById("spec-3gpp-btn").setAttribute('disabled', 'disabled')
+    document.getElementById("spec-etsi-btn").setAttribute('disabled', 'disabled')
+    document.getElementById("tdocs-btn").setAttribute('disabled', 'disabled')
+}
+
+function enableButtons() {
+    document.getElementById("spec-3gpp-btn").removeAttribute('disabled')
+    document.getElementById("spec-etsi-btn").removeAttribute('disabled')
+    document.getElementById("tdocs-btn").removeAttribute('disabled')
+}
+
+function initCheckboxListeners() {
+    const dropdownContent = document.getElementById('dropdownContent');
+    const dropbtn = document.getElementById('dropbtn');
+
+    function updateState() {
+        const checkboxes = dropdownContent.querySelectorAll('input[type="checkbox"]');
+        const allCheckbox = dropdownContent.querySelector('input[value="ALL"]');
+        const checkedBoxes = Array.from(checkboxes).filter(cb => cb.checked && cb !== allCheckbox);
+
+        if (checkedBoxes.length === 0) {
+            allCheckbox.checked = true;
+            dropbtn.textContent = "Index all meetings";
+            selectedMeetings = ["ALL"];
+        } else {
+            if (allCheckbox.checked) {
+                allCheckbox.checked = false; // décocher ALL si autre(s) cochée(s)
+            }
+            if (checkedBoxes.length === 1) {
+                dropbtn.textContent = checkedBoxes[0].value;
+            } else {
+                dropbtn.textContent = `${checkedBoxes.length} meetings sélectionnés`;
+            }
+            selectedMeetings = checkedBoxes.map(cb => cb.value);
+        }
+
+        console.log(selectedMeetings);
+        console.log(currentURL);
+    }
+
+    const checkboxes = dropdownContent.querySelectorAll('input[type="checkbox"]');
+    checkboxes.forEach(cb => cb.addEventListener('change', updateState));
+
+    updateState(); // mise à jour initiale
+}
+
+function updateDropbtnLabel() {
+    const dropdownContent = document.getElementById('dropdownContent');
+    const checkboxes = dropdownContent.querySelectorAll('input[type="checkbox"]');
+    const allCheckbox = dropdownContent.querySelector('input[value="ALL"]');
+    const dropbtn = document.getElementById('dropbtn');
+    const checkedBoxes = Array.from(checkboxes).filter(cb => cb.checked && cb !== allCheckbox);
+
+    if (checkedBoxes.length === 0) {
+        allCheckbox.checked = true;
+        dropbtn.textContent = "Index all meetings";
+    } else if (checkedBoxes.length === 1) {
+        allCheckbox.checked = false;
+        dropbtn.textContent = checkedBoxes[0].value;
+    } else {
+        allCheckbox.checked = false;
+        dropbtn.textContent = `${checkedBoxes.length} meetings sélectionnés`;
+    }
+}
+const progress = document.getElementById('indexProgression')
+
+document.getElementById('tdocs-btn').addEventListener('click', async () => {
+    disableButtons()
+    let response = null;
+    if (currentURL) {
+        if (!selectedMeetings.includes("ALL")) {
+            response = await fetch("/index_tdocs/meeting", {
+                method: "POST",
+                body: JSON.stringify({
+                    wg: document.getElementById("tdocs-wg-option").value,
+                    meetings: selectedMeetings
+                }),
+                headers: {
+                    "Content-Type": "application/json",
+                    "Accept": "text/event-stream",
+                },
+            });
+        } else {
+            response = await fetch("/index_tdocs/working_group", {
+                method: "POST",
+                body: JSON.stringify({
+                    wg: document.getElementById("tdocs-wg-option").value
+                }),
+                headers: {
+                    "Content-Type": "application/json",
+                    "Accept": "text/event-stream",
+                },
+            });
+        }
+    } else {
+        response = await fetch("/index_tdocs/all", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Accept": "text/event-stream",
+            },
+        });
+    }
+
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder("utf-8");
+    let buffer = "";
+
+    while (true) {
+        const {
+            done,
+            value
+        } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, {
+            stream: true
+        });
+
+        let events = buffer.split("\n\n"); // séparer les événements
+        buffer = events.pop(); // garder le reste pour le prochain chunk
+
+        for (const rawEvent of events) {
+            const event = {};
+            rawEvent.split("\n").forEach((line) => {
+                const [key, ...rest] = line.split(":");
+                if (key) event[key.trim()] = rest.join(":").trim();
+            });
+
+            // dispatch selon event.event ou par défaut message
+            switch (event.event) {
+                case "progress":
+                    console.log("[progress]", event.data);
+                    progress.value = event.data;
+                    break;
+                case "get-maximum":
+                    console.log("[new-max]", event.data);
+                    progress.max = event.data
+                    break;
+                case "info":
+                    console.log("[info]", event.data);
+                    document.getElementById('infoText').textContent = event.data
+                    break;
+                case "end":
+                    console.log("[end]", event.data);
+                    document.getElementById('infoText').textContent = "Indexation successful"
+                    break;
+                default:
+                    if (event.data) {
+                        console.log("[message]", event.data);
+                    };
+            }
+        }
+    }
+
+    enableButtons()
+});
+
+document.getElementById('spec-3gpp-btn').addEventListener('click', () => {
+    disableButtons()
+    logMessage(`Started re-indexing 3GPP Specifications`);
+    fetch("/index_specs/3gpp", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            }
+        })
+        .then(resp => resp.text())
+        .then(data => {
+            enableButtons()
+        })
+});
+
+document.getElementById('spec-etsi-btn').addEventListener('click', () => {
+    logMessage('Started re-indexing ETSI Specifications');
+    disableButtons()
+    fetch("/index_specs/etsi", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            }
+        })
+        .then(resp => resp.text())
+        .then(data => {
+            enableButtons()
+        })
+});

static/style.css

@@ -0,0 +1,132 @@
+body {
+    font-family: "Montserrat", sans-serif;
+    background: #fafafa;
+    margin: 24px;
+    color: #1f2937;
+}
+
+h1 {
+    font-size: 1.8rem;
+    margin-bottom: 24px;
+}
+
+.row {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 24px;
+}
+
+.column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+button {
+    background-color: #6c63ff;
+    color: white;
+    font-weight: 600;
+    font-size: 1rem;
+    padding: 10px 14px;
+    border: none;
+    border-radius: 0.6em;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgb(31 41 55 / 8%);
+    transition: background-color 0.2s ease;
+}
+
+button:hover {
+    background-color: #5753d6;
+}
+
+button:disabled {
+    cursor: default;
+    background-color: #778191;
+}
+
+select {
+    padding: 10px 14px;
+    border-radius: 0.6em;
+    border: none;
+    box-shadow: 0 2px 8px rgb(31 41 55 / 8%);
+    font-size: 1rem;
+    color: #374151;
+    background: #f3f4f6;
+    appearance: none;
+    cursor: pointer;
+}
+
+select:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #6c63ff;
+    background: white;
+}
+
+select:hover {
+    background: #e5e7eb;
+}
+
+select:disabled {
+    cursor: default;
+}
+
+.dropdown-content {
+    position: absolute;
+    /* ou fixed si tu veux */
+    z-index: 9999;
+    /* un nombre élevé pour être sûr que c'est au dessus */
+    background-color: white;
+    /* pour que ce soit bien visible */
+    border: 1px solid #ccc;
+    /* autres styles que tu avais déjà */
+    border-radius: 0.6em;
+    box-shadow: 0 2px 8px rgb(31 41 55 / 8%);
+    padding: 10px;
+    max-height: 55vh;
+    overflow-y: auto;
+}
+
+#dropbtn {
+    background: #f3f4f6;
+    color: #374151;
+    font-size: 1rem;
+    font-family: "Montserrat", sans-serif;
+    /* même font que body */
+    padding: 10px 14px;
+    border-radius: 0.6em;
+    font-weight: normal;
+    border: none;
+    box-shadow: 0 2px 8px rgb(31 41 55 / 8%);
+    cursor: pointer;
+    width: 100%;
+    text-align: left;
+    appearance: none;
+    /* supprime les styles natives du bouton */
+    user-select: none;
+    transition: background-color 0.2s ease;
+    display: inline-block;
+}
+
+#dropbtn:hover {
+    background: #e5e7eb;
+}
+
+#dropbtn:disabled {
+    cursor: default;
+}
+
+#dropbtn:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #6c63ff;
+    background: white;
+}
+
+option {
+    background: white;
+}
+
+progress {
+    width: 300px;
+    height: 30px;
+}