Docxtract / index.html
om4r932's picture
Separate JS and HTML + add Categorize reqs
546fbbe
raw
history blame
4.83 kB
<!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/daisyui@3.9.4/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 class="" id="dataFrameForm">
<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 Item</option>
<option>Tous</option>
</select>
</div>
</div>
<div class="flex justify-center mt-12 min-h-[10vh] hidden" id="queryReqForm">
<div class="w-full max-w-md">
<div class="grid grid-cols-1 gap-4">
<textarea placeholder="Enter your problem description here ..."
class="w-full mx-auto px-4 py-2 border rounded" id="problemDescription"></textarea>
<button class="w-1/2 mx-auto px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
id="queryReq">
Find requirements
</button>
</div>
</div>
</div>
<center>
<span class="loading loading-bars loading-xl hidden" id="loadingBar"></span>
<p class="hidden" id="progressText"></p>
</center>
<!-- Tableau des données -->
<div class="max-h-[65vh] overflow-y-auto mt-12" id="dataFrameDiv">
<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</th>
<th>URL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="w-full max-w-[100%] mx-auto p-6 hidden" id="carousels">
<h1 class="text-xl font-bold mb-8 text-center">Liste des catégories de requirements</h1>
</div>
<center>
<div id="buttons">
<p id="reqStatus" class="mt-6 hidden">Requirements extracted</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<button class="btn mt-6 hidden" id="getReqs">Extract Requirements</button>
<button class="btn mt-6 hidden" id="downloadZip">Download TDocs</button>
<button class="btn mt-6 hidden" id="searchReq">Query requirements</button>
<button class="btn mt-6 hidden" id="categorizeReq">Categorize requirements</button>
</div>
</div>
</center>
</div>
<script src="/static/script.js"></script>
</body>
</html>