File size: 6,626 Bytes
1392287
 
546fbbe
1392287
 
 
 
 
 
 
546fbbe
1392287
 
 
546fbbe
1392287
 
546fbbe
1392287
 
 
 
 
 
 
 
 
 
 
 
 
546fbbe
 
1392287
 
 
 
 
 
 
546fbbe
1392287
 
040cfa1
1392287
546fbbe
1392287
 
040cfa1
1392287
546fbbe
1392287
 
 
 
040cfa1
03e159d
040cfa1
 
546fbbe
 
 
 
040cfa1
 
 
 
 
 
 
 
 
 
1392287
 
03e159d
1392287
 
 
 
 
 
 
546fbbe
1392287
 
 
 
 
 
 
 
fe9ab1e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23a6ce4
fe9ab1e
 
 
 
 
 
 
 
 
 
546fbbe
 
040cfa1
 
 
 
03e159d
 
040cfa1
 
 
 
 
1392287
 
546fbbe
1392287
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!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 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 id="categorizeReqContainer" class="hidden">
            <div class="w-full max-w-[100%] mx-auto p-6" id="carousels">
                <h1 class="text-xl font-bold mb-8 text-center">Requirements categories list</h1>
                
            </div>
            <div class="w-full max-w-[100%] mx-auto px-6 pb-6" id="catReqActions">
                <div class="flex items-center justify-center gap-4 flex-wrap">
                    <!-- Checkbox et Input Limite -->
                    <div class="flex items-center gap-2">
                        <input 
                            type="number" 
                            id="limitInput" 
                            placeholder="10" 
                            min="1" 
                            max="9999"
                            class="w-20 px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        >
                    </div>
                    
                    <!-- Boutons -->

                    <button 
                        id="getSolutions"
                        class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200"
                    >
                        Get solutions
                    </button>
                    
                    <button 
                        id="getSolutionsStepByStep"
                        class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors duration-200"
                    >
                        Get solutions (Step-by-step)
                    </button>
                </div>
            </div>
        </div>

        <div id="criticizeSoluceContainer" class="hidden">

        </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>