static/script.js

let requirements;

function downloadTDocs() {
    const data = tableToGenBody({
        "TDoc": "doc"
    });
    const dataSet = [...new Set(data.map(item => item.doc))];
    console.log(dataSet);
    let body = {
        "documents": dataSet,
        "meeting": document.getElementById('meetingSelect').value
    };
    if (document.getElementById('agendaItem').value != "" | document.getElementById('agendaItem').value !=
        "Tous") {
        body['agenda_item'] = document.getElementById('agendaItem').value;
    }
    fetch('/download_tdocs', {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(body)
        })
        .then(resp => resp.blob())
        .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            let dl_name = `${document.getElementById('meetingSelect').value}`;
            if (document.getElementById('agendaItem').value != "" | document.getElementById('agendaItem')
                .value != "Tous") {
                dl_name = dl_name + `_${document.getElementById('agendaItem').value}`
            };
            if (document.getElementById('docStatus').value != "" | document.getElementById('docStatus')
                .value != "Tous") {
                dl_name = dl_name + `_${document.getElementById('docStatus').value}`
            };
            if (document.getElementById('docType').value != "" | document.getElementById('docType').value !=
                "Tous") {
                dl_name = `${document.getElementById('docType').value}_${dl_name}`
            };
            if (document.getElementById('queryReqForm').classList.contains('hidden')) {
                dl_name = `requirements_${dl_name}_${url.split('/').pop()}`
            }
            dl_name = dl_name + ".zip";
            a.download = dl_name;
            document.body.appendChild(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url); // libération mémoire
        })
}

function getDataFrame() {
    document.getElementById("loadingBar").classList.remove("hidden");
    const wg = document.getElementById('workingGroupSelect').value;
    const meeting = document.getElementById('meetingSelect').value;
    document.getElementById('docType').innerHTML = `
                <option disabled selected value="">Type</option>
                <option>Tous</option>
            `

    document.getElementById('docStatus').innerHTML = `
                <option disabled selected value="">Status</option>
                <option>Tous</option>
            `

    document.getElementById('agendaItem').innerHTML = `
                <option disabled selected value="">Agenda Item</option>
                <option>Tous</option>
            `
    const dataFrame = document.getElementById("dataFrame");
    document.getElementById("progressText").classList.remove('hidden')
    document.getElementById("progressText").innerHTML = "Loading ...";
    document.getElementById("loadingBar").classList.remove("hidden")
    fetch("/get_dataframe", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                "working_group": wg,
                "meeting": meeting
            })
        })
        .then(resp => resp.json())
        .then(data => {
            document.getElementById("filters").classList.remove("hidden");
            document.getElementById("loadingBar").classList.add("hidden");
            document.getElementById("downloadZip").classList.remove("hidden");
            document.getElementById("getReqs").classList.remove("hidden");
            const dataframeBody = dataFrame.querySelector("tbody");
            dataframeBody.innerHTML = "";
            const setType = new Set();
            const setAgenda = new Set();
            const setStatus = new Set();
            data.data.forEach(row => {
                const tr = document.createElement("tr");
                tr.setAttribute("data-type", row['Type']);
                tr.setAttribute("data-status", row["TDoc Status"]);
                tr.setAttribute("data-agenda", row["Agenda item description"]);
                tr.innerHTML = `
                        <td>${row["TDoc"]}</td>
                        <td>${row["Title"]}</td>
                        <td>${row["Type"]}</td>
                        <td>${row["TDoc Status"]}</td>
                        <td>${row["Agenda item description"]}</td>
                        <td>
                            <a href="${row["URL"]}" class="link">${row["URL"]}</a>
                        </td>
                    `;
                dataframeBody.appendChild(tr);
                setType.add(row["Type"]);
                setAgenda.add(row["Agenda item description"]);
                setStatus.add(row["TDoc Status"]);
            })

            setType.forEach(tdoctype => {
                const option = document.createElement("option");
                option.textContent = tdoctype;
                option.value = tdoctype;
                document.getElementById('docType').appendChild(option);
            })

            setAgenda.forEach(agenda => {
                const option = document.createElement("option");
                option.textContent = agenda;
                option.value = agenda;
                document.getElementById('agendaItem').appendChild(option);
            })

            setStatus.forEach(status => {
                const option = document.createElement("option");
                option.textContent = status;
                option.value = status;
                document.getElementById('docStatus').appendChild(option);
            })
        })

    document.getElementById("progressText").classList.add('hidden')
    document.getElementById("loadingBar").classList.add("hidden")
}

function filterTable() {
    const type = document.getElementById('docType').value
    const status = document.getElementById('docStatus').value
    const agenda = document.getElementById('agendaItem').value

    document.querySelectorAll('#dataFrame tbody tr').forEach(row => {
        const showRow =
            (type === 'Tous' || row.dataset.type === type || type === "") &&
            (status === 'Tous' || row.dataset.status === status || status === "") &&
            (agenda === 'Tous' || row.dataset.agenda === agenda || agenda === "")

        row.style.display = showRow ? '' : 'none'
    })
}

function getMeetings() {
    const workingGroup = document.getElementById("workingGroupSelect").value;
    document.getElementById("meetingSelect").setAttribute('disabled', 'true')
    document.getElementById("meetingSelect").innerHTML = "<option>Loading...</option>"
    document.getElementById("getTDocs").setAttribute('disabled', 'true')
    fetch("/get_meetings", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                "working_group": workingGroup
            })
        })
        .then(resp => resp.json())
        .then(data => {
            document.getElementById("meetingSelect").innerHTML = "";
            document.getElementById("meetingSelect").removeAttribute("disabled");
            document.getElementById("getTDocs").removeAttribute("disabled")
            for (const [key, value] of Object.entries(data.meetings)) {
                const option = document.createElement("option");
                option.textContent = key;
                option.value = value;
                document.getElementById('meetingSelect').appendChild(option);
            }
        })
}

function generateRequirements() {
    const bodyreq = tableToGenBody({
        "TDoc": "document",
        "URL": "url"
    });
    document.getElementById("progressText").classList.remove('hidden');
    document.getElementById("progressText").innerHTML =
        "Generating requirements, please wait, it may take a while ...";
    document.getElementById("loadingBar").classList.remove("hidden");

    fetch("/generate_requirements", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                "documents": bodyreq
            })
        })
        .then(resp => resp.json())
        .then(data => {
            document.getElementById("loadingBar").classList.add("hidden");
            document.getElementById("progressText").classList.add("hidden");
            document.getElementById("reqStatus").classList.remove("hidden");
            document.getElementById("getReqs").classList.add("hidden");
            document.getElementById("searchReq").classList.remove("hidden");
            document.getElementById("categorizeReq").classList.remove("hidden");
            requirements = [];
            data.requirements.forEach(obj => {
                obj.requirements.forEach(req => {
                    requirements.push({
                        "document": obj.document,
                        "context": obj.context,
                        "requirement": req
                    })
                })
            })
        })
}

function queryRequirements() {
    fetch("/get_reqs_from_query", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                query: document.getElementById("problemDescription").value,
                requirements
            })
        })
        .then(resp => resp.json())
        .then(data => {
            const dataFrame = document.getElementById("dataFrameDiv");
            const dataFrameHead = dataFrame.querySelector("thead");
            const dataFrameBody = dataFrame.querySelector("tbody");
            document.getElementById("buttons").classList.remove("hidden");
            document.getElementById("searchReq").classList.add("hidden");
            document.getElementById("categorizeReq").classList.add("hidden");
            document.getElementById("getReqs").classList.add("hidden");
            document.getElementById("reqStatus").classList.add("hidden");
            document.getElementById("downloadZip").classList.remove("hidden");

            dataFrame.classList.remove("hidden");

            dataFrameHead.innerHTML = `
                    <th>TDoc</th>
                    <th>Context</th>
                    <th>Requirement</th>
                `;

            dataFrameBody.innerHTML = "";

            data.requirements.forEach(req => {
                const tr = document.createElement("tr");
                tr.innerHTML = `
                        <td>${req["document"]}</td>
                        <td>${req["context"]}</td>
                        <td>${req["requirement"]}</td>
                    `;
                dataFrameBody.appendChild(tr);
            })
        })
}

function tableToGenBody(columnsMap) {
    // columnsMap : { "NomHeaderDansTable": "nom_voulu", ... }
    const dataFrame = document.getElementById("dataFrame");
    const headers = Array.from(dataFrame.querySelectorAll('thead th')).map(th => th.innerText.trim());

    // Indices des colonnes à extraire
    const selectedIndices = headers
        .map((header, idx) => columnsMap[header] ? idx : -1)
        .filter(idx => idx !== -1);

    return Array.from(dataFrame.querySelectorAll('tbody tr'))
        .filter(row => getComputedStyle(row).display !== 'none')
        .map(row => {
            const cells = Array.from(row.querySelectorAll('td'));
            const obj = {};
            selectedIndices.forEach(idx => {
                const originalHeader = headers[idx];
                const newKey = columnsMap[originalHeader];
                obj[newKey] = cells[idx].innerText.trim();
            });
            return obj;
        });
}

function createCard(cardTitle, cardSub, cardText) {
    return `
        <div class="flex-none w-80 bg-white rounded-lg shadow-md p-6 mr-4 border border-gray-200 hover:shadow-lg transition-shadow duration-300">
            <h3 class="text-lg font-semibold text-gray-800 mb-2">${cardTitle}</h3>
            <p class="text-sm text-gray-600 mb-3 font-medium">${cardSub}</p>
            <p class="text-gray-700 text-sm leading-relaxed">${cardText}</p>
        </div>
    `;
}

function createCarousel(carouselTitle, cards) {
    let cardsHTML = cards.join("\n");
    return `
        <div class="mb-8">
            <h2 class="text-xl font-bold text-gray-800 mb-4">${carouselTitle}</h2>
            <div class="overflow-x-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                <div class="flex pb-4">
                    ${cardsHTML}
                </div>
            </div>
        </div>
    `;
}

function categorizeRequirements() {
    fetch("https://game4all-reqroup.hf.space/categorize_requirements", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                requirements
            })
        })
        .then(resp => resp.json())
        .then(data => {
            document.getElementById('dataFrameForm').classList.add('hidden');
            document.getElementById('filters').classList.add('hidden');
            document.getElementById('carousels').classList.remove('hidden');
            document.getElementById('dataFrameDiv').classList.add('hidden');
            document.getElementById('buttons').classList.add('hidden');
            data.categories.forEach(cat => {
                let reqCards = [];
                cat.requirements.forEach(reqContent => { // Correction ici
                    reqCards.push(createCard(reqContent.document, reqContent.context, reqContent.requirement))
                });
                document.getElementById('carousels').innerHTML += createCarousel(cat.title, reqCards);
            })
        })
    }

// Écouteurs d'événements pour les filtres

document.getElementById('docType').addEventListener('change', filterTable)
document.getElementById('docStatus').addEventListener('change', filterTable)
document.getElementById('agendaItem').addEventListener('change', filterTable)
document.getElementById("workingGroupSelect").addEventListener('change', getMeetings)
document.getElementById('getTDocs').addEventListener('click', getDataFrame)
document.getElementById("getReqs").addEventListener("click", generateRequirements);
document.getElementById('categorizeReq').addEventListener('click', categorizeRequirements);
document.getElementById("downloadZip").addEventListener('click', downloadTDocs)
document.getElementById("queryReq").addEventListener("click", queryRequirements)
document.getElementById('searchReq').addEventListener('click', () => {
    document.getElementById('dataFrameForm').classList.add('hidden');
    document.getElementById('filters').classList.add('hidden');
    document.getElementById('queryReqForm').classList.remove('hidden');
    document.getElementById('dataFrameDiv').classList.add('hidden');
    document.getElementById('buttons').classList.add('hidden');
})