|
|
<!DOCTYPE html> |
|
|
<html lang="fr" data-theme="light"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Requirements Extractor</title> |
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
</head> |
|
|
<body class="p-8 bg-base-100"> |
|
|
<div class="container mx-auto"> |
|
|
<h1 class="text-4xl font-bold text-center mb-8">Requirements Extractor</h1> |
|
|
<div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> |
|
|
<select class="select select-bordered" id="workingGroupSelect"> |
|
|
<option disabled selected value="">Working Group</option> |
|
|
<option>SA1</option> |
|
|
<option>SA2</option> |
|
|
<option>SA3</option> |
|
|
<option>SA4</option> |
|
|
<option>SA5</option> |
|
|
<option>SA6</option> |
|
|
<option>CT1</option> |
|
|
<option>CT2</option> |
|
|
<option>CT3</option> |
|
|
<option>CT4</option> |
|
|
<option>CT5</option> |
|
|
<option>CT6</option> |
|
|
</select> |
|
|
<select class="select select-bordered" id="meetingSelect" disabled> |
|
|
<option disabled selected value="">Select a working group</option> |
|
|
</select> |
|
|
<button class="btn" id="getTDocs">Get TDocs</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden" id="filters"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> |
|
|
<select class="select select-bordered" id="docType"> |
|
|
<option disabled selected value="">Type</option> |
|
|
<option>Tous</option> |
|
|
</select> |
|
|
|
|
|
<select class="select select-bordered" id="docStatus"> |
|
|
<option disabled selected value="">Status</option> |
|
|
<option>Tous</option> |
|
|
</select> |
|
|
|
|
|
<select class="select select-bordered" id="agendaItem"> |
|
|
<option disabled selected value = "">Agenda</option> |
|
|
<option>Tous</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="max-h-[65vh] overflow-y-auto"> |
|
|
<table class="table table-zebra w-full" id="dataFrame"> |
|
|
<thead class="sticky top-0 bg-base-200 z-10"> |
|
|
<tr class="bg-base-200"> |
|
|
<th>TDoc</th> |
|
|
<th>Title</th> |
|
|
<th>Type</th> |
|
|
<th>Status</th> |
|
|
<th>Agenda Item N°</th> |
|
|
<th>URL</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<center><button class="btn mt-6 gap-4" id="getReqs">Get Requirements</button></center> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
function getDataFrame(){ |
|
|
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="">Type</option> |
|
|
<option>Tous</option> |
|
|
` |
|
|
|
|
|
document.getElementById('agendaItem').innerHTML = ` |
|
|
<option disabled selected value="">Type</option> |
|
|
<option>Tous</option> |
|
|
` |
|
|
const dataFrame = document.getElementById("dataFrame"); |
|
|
document.getElementById("getTDocs").setAttribute('disabled', 'true') |
|
|
document.getElementById("getTDocs").innerHTML = "Loading ..."; |
|
|
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") |
|
|
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("getTDocs").removeAttribute("disabled") |
|
|
document.getElementById("getTDocs").innerHTML = "Get TDocs"; |
|
|
} |
|
|
|
|
|
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 tableToGenBody(tableSelector) { |
|
|
|
|
|
let columnsMap = {"TDoc": "doc_id", "URL": "url"}; |
|
|
const table = document.querySelector(tableSelector); |
|
|
const headers = Array.from(table.querySelectorAll('thead th')).map(th => th.innerText.trim()); |
|
|
|
|
|
|
|
|
const selectedIndices = headers |
|
|
.map((header, idx) => columnsMap[header] ? idx : -1) |
|
|
.filter(idx => idx !== -1); |
|
|
|
|
|
return Array.from(table.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; |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
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) |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
