Hugging Face's logo

Spaces:
Rsnarsna
/
Redmind_GPT_API
Sleeping

App Files Community
1
Redmind commited on
Commit
f127b6f
·
verified ·
1 Parent(s): 2e0c7df

Upload 5 files

Browse files
Files changed (5) hide show
  1. templates/API_connectors.html +461 -0
  2. templates/company_profile.html +521 -0
  3. templates/data_connectors.html +662 -0
  4. templates/knowledgebase.html +667 -0
  5. templates/prompt_template.html +459 -0
templates/API_connectors.html ADDED
@@ -0,0 +1,461 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <title>API Connectors</title>
6
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
7
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
8
+ <!-- Include AdminLTE CSS -->
9
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css">
10
+ <!-- Include DataTables CSS -->
11
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
12
+ <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
13
+ <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
15
+ <style>
16
+ .form-group {
17
+ margin-top: -10px;
18
+ }
19
+ .card {
20
+ padding: 0;
21
+ margin-top: -15px;
22
+ margin-left: -40px;
23
+ }
24
+ .header-row {
25
+ display: flex;
26
+ justify-content: space-between;
27
+ align-items: center;
28
+ }
29
+
30
+
31
+ .table-container {
32
+ width: 100%;
33
+ overflow-x: auto;
34
+ }
35
+
36
+ .wrapper {
37
+ display: flex;
38
+ flex-direction: column;
39
+ height: 100vh;
40
+ }
41
+
42
+ .content-wrapper {
43
+ flex: 1;
44
+ overflow-y: auto;
45
+ }
46
+
47
+ .content-header {
48
+ padding: 5px;
49
+ }
50
+
51
+ th,
52
+ td {
53
+ white-space: nowrap;
54
+ }
55
+
56
+ th:nth-child(1),
57
+ td:nth-child(1) {
58
+ /* Sno column */
59
+ width: 5%;
60
+ }
61
+ div.dataTables_wrapper div.dataTables_length select{
62
+ width: 60px;
63
+ display: inline-block;
64
+ }
65
+ th:nth-child(2),
66
+ td:nth-child(2) {
67
+ /* API Name column */
68
+ width: 20%;
69
+ }
70
+
71
+ th:nth-child(3),
72
+ td:nth-child(3) {
73
+ /* API Endpoint column */
74
+ width: 40%;
75
+ }
76
+
77
+ th:nth-child(4),
78
+ td:nth-child(4) {
79
+ /* Auth/Bearer token column */
80
+ width: 5%;
81
+ }
82
+
83
+ th:nth-child(5),
84
+ td:nth-child(5) {
85
+ /* View column */
86
+ width: 5%;
87
+ }
88
+ th:nth-child(6),
89
+ td:nth-child(6) {
90
+ /* View column */
91
+ width: 5%;
92
+ }
93
+
94
+ .reduced-width {
95
+ width: 25%;
96
+ }
97
+ div.dataTables_wrapper div.dataTables_length select{
98
+ width: 60px;
99
+ display: inline-block;
100
+ }
101
+
102
+ </style>
103
+ </head>
104
+
105
+ <body>
106
+ {% include 'sidepane.html' %}
107
+
108
+ <div class="wrapper">
109
+ <div class="main-header"style="border-bottom: none;">
110
+ <!-- Content Header (Page header) -->
111
+ <div class="content-header">
112
+ <div class="container-fluid">
113
+ <div class="container mt-2">
114
+ <div class="form-group left-align">
115
+ <label for="company" class="mr-1" style="margin-left:-60px;margin-top: 5px;">Company Name <span class="text-danger">*</span></label>
116
+ <select type="text" id="company" name="company" class="form-control"style="width: 20%;margin-left:-60px;" required>
117
+ <option value="" selected>Select</option>
118
+ </select>
119
+ <div class="col-12 d-flex justify-content-end mb-3">
120
+ <button class="btn btn-primary" style="margin-top: -40px;margin-right: -25px;position: fixed;" id="add">Add</button>
121
+ </div>
122
+ </div>
123
+ <div class="row">
124
+ <div id="message-container" style="margin-left: 150px; width: auto;"></div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ <section class="content" id="contentSection" style="display: none;">
130
+ <div class="container-fluid">
131
+ <div class="form-group">
132
+ <!-- <label for="company_id">company_id</label>--->
133
+ <input type="hidden" id="company_id" name="company_id" class="form-control" required>
134
+ </div>
135
+ </div>
136
+ <!-- Main content -->
137
+ <section class="content">
138
+ <div class="container-fluid">
139
+ <div class="row">
140
+ <div class="col-12">
141
+ <div class="card">
142
+ <div class="card-body table-container">
143
+ <table id="apiTable" class="table table-bordered table-striped">
144
+ <thead>
145
+ <tr>
146
+ <th>Sno</th>
147
+ <th>API Name</th>
148
+ <th>API Endpoint</th>
149
+ <th>View</th>
150
+ <th>Edit</th>
151
+ <th>Delete</th>
152
+ </tr>
153
+ </thead>
154
+ <tbody>
155
+ <!-- <tr>
156
+ <td>1</td>
157
+ <td>Warehouse</td>
158
+ <td>http://193.203.162.39:9090/nxt-wms/userWarehouse/fetchWarehouseForUserId
159
+ </td>
160
+ <td><button class="btn btn-primary viewButton">View</button></td>
161
+ </tr>
162
+ <tr>
163
+ <td>2</td>
164
+ <td>customer</td>
165
+ <td>http://193.203.162.39:9090/nxt-wms/userCustomer/fetchCustomerForUserId
166
+ </td>
167
+ <td><button class="btn btn-primary viewButton">View</button></td>
168
+ </tr>
169
+ <tr>
170
+ <td>3</td>
171
+ <td>SKU</td>
172
+ <td>http://193.203.162.39:9090/nxt-wms/sku/autoComplete?</td>
173
+ <td><button class="btn btn-primary viewButton">View</button></td>
174
+ </tr>
175
+ <tr>
176
+ <td>4</td>
177
+ <td>ASN</td>
178
+ <td>http://193.203.162.39:9090/nxt-wms/trnHeader</td>
179
+ <td><button class="btn btn-primary viewButton">View</button></td>
180
+ </tr> -->
181
+ </tbody>
182
+ </table>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </section>
189
+ </div>
190
+
191
+ </div>
192
+
193
+ <!-- Modal -->
194
+ <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel"
195
+ aria-hidden="true">
196
+ <div class="modal-dialog" style="margin-top: -10px;" role="document">
197
+ <div class="modal-content">
198
+ <div class="modal-header">
199
+ <h5 class="modal-title" id="addModalLabel">Add API Details</h5>
200
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
201
+ <span aria-hidden="true" data-backdrop="static" data-keyboard="false">&times;</span>
202
+ </button>
203
+ </div>
204
+ <div class="modal-body">
205
+ <div class="form-group">
206
+ <!-- <label for="company_id">company_id</label>--->
207
+ <input type="hidden" id="company_id" name="company_id" class="form-control" required>
208
+ </div>
209
+ <form id="documentForm">
210
+ <div class="form-group">
211
+ <label for="APIName">API Name <span class="text-danger">*</span></label>
212
+ <input type="text" class="form-control" id="APIName" name="APIName" required>
213
+ </div>
214
+ <div class="form-group">
215
+ <label for="APIEndpoint">API Endpoint <span class="text-danger">*</span></label>
216
+ <input type="text" class="form-control" id="APIEndpoint" name="APIEndpoint" required>
217
+ </div>
218
+ <div class="form-group">
219
+ <label for="Auth_Bearer">Auth/Bearer token <span class="text-danger">*</span></label>
220
+ <input type="text" class="form-control" id="Auth_Bearer" name="Auth_Bearer" required>
221
+ </div>
222
+ <div class="form-group">
223
+ <label for="Inputjson">Input parameter <span class="text-danger">*</span></label>
224
+ <input type="text" class="form-control" id="Inputjson" name="Inputjson" required>
225
+ </div>
226
+ <div class="form-group">
227
+ <label for="OutputJson">Output Json <span class="text-danger">*</span></label>
228
+ <input type="text" class="form-control" id="OutputJson" name="OutputJson" required>
229
+ </div>
230
+ <div class="form-group">
231
+ <label for="Description">Description <span class="text-danger">*</span></label>
232
+ <textarea class="form-control" id="Description" name="Description" rows="3"
233
+ required></textarea>
234
+ </div>
235
+ </form>
236
+ </div>
237
+ <div class="modal-footer">
238
+ <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> -->
239
+ <button type="button" id="save" onclick="save_file()" class="btn btn-primary">Save</button>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ {%include 'footer.html'%}
246
+
247
+ <!-- Include DataTables JS and your custom script -->
248
+ <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
249
+ <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
250
+ <script>
251
+ $(document).ready(function () {
252
+ // Show modal function
253
+ $('#add').on('click', function () {
254
+ clearFormFields();
255
+ $('#message-container').empty(); // Clear the message container
256
+ $('#addModal').modal('show');
257
+ });
258
+ $('.modal-footer .btn-secondary, .modal-header .close').on('click', function () {
259
+ $('#addModal').modal('hide');
260
+ });
261
+ // $('#apiTable').DataTable({
262
+ // autoWidth: false
263
+ // });
264
+
265
+ });
266
+ document.addEventListener("DOMContentLoaded", function () {
267
+
268
+ // clearFormFields();
269
+ fetchCompanies();
270
+
271
+ const companySelect = document.getElementById('company');
272
+ const documentForm = document.getElementById('documentForm');
273
+ const table = $('#apiTable').DataTable();
274
+ // Initialize DataTable at the start
275
+ companySelect.addEventListener('change', async function () {
276
+ $("#message-container").empty();
277
+ const selectedCompanyName = companySelect.options[companySelect.selectedIndex].text;
278
+ console.log(`Selected Company Name: ${selectedCompanyName}`);
279
+
280
+ if (selectedCompanyName !== "Select") {
281
+
282
+ try {
283
+ const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompanyName)}`);
284
+ if (!response.ok) {
285
+ contentSection.style.display = 'none';
286
+ ("Company id does not exist for this company name does not exist. Please fill in the details.");
287
+ const messageContainer = document.getElementById('message-container');
288
+ if (messageContainer) {
289
+ messageContainer.innerHTML = "<div class='alert alert-danger'>Document details do not exist for this company. Please fill in the details.</div>";
290
+ }
291
+ throw new Error('Network response was not ok');
292
+ }
293
+ const data = await response.json();
294
+ console.log('data returned', data);
295
+ console.log(`Company ID: ${data.company_id}`);
296
+ const companyId = data.company_id;
297
+ document.getElementById('company_id').value = companyId;
298
+
299
+ if (companyId) {
300
+ try {
301
+ const Response = await fetch(`/api/get_api_connectors?company_id=${companyId}&company_name=${selectedCompanyName}`);
302
+ const connectorsResponse = await Response.json();
303
+ console.log("api connector data table after connecting to table", connectorsResponse);
304
+ table.clear();
305
+ if (!Array.isArray(connectorsResponse)) {
306
+ throw new TypeError('Expected an array of companies');
307
+
308
+ displayErrorMessage("Data do not exist for this company. Please fill in the details by clicking add button.");
309
+ contentSection.style.display = 'none';
310
+ } else {
311
+
312
+ connectorsResponse.forEach((company, index) => {
313
+ table.row.add([
314
+ index + 1,
315
+ company.APIName,
316
+ company.APIEndpoint,
317
+ "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye' fa-eye'></i></a>",
318
+ "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>",
319
+ "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></button>"
320
+ ]).draw(false);
321
+ });
322
+ contentSection.style.display = 'block';
323
+ }
324
+
325
+ } catch (error) {
326
+ console.error('Error fetching company documents:', error);
327
+ //displayEmptyTable();
328
+
329
+ displayErrorMessage("Data do not exist for this company. Please fill in the details by clicking add button.");
330
+ contentSection.style.display = 'none';
331
+ }
332
+ }
333
+ else {
334
+ // displayEmptyTable();
335
+
336
+ displayErrorMessage("Document details2 for knowledge do not exist for this company. Please fill in the details.");
337
+ }
338
+ } catch (error) {
339
+ console.error('No details for this company ID or data documents:', error);
340
+ // displayEmptyTable();
341
+
342
+ displayErrorMessage("Document details3 do not exist for this company. Please fill in the details.");
343
+ contentSection.style.display = 'none';
344
+ }
345
+ } else {
346
+
347
+ table.clear().draw();
348
+ document.getElementById('contentSection').style.display = 'none';
349
+ // Optionally, you might want to clear the form fields as well
350
+ clearFormFields();
351
+
352
+ }
353
+ });
354
+ function displayErrorMessage(message) {
355
+ const messageContainer = document.getElementById('message-container');
356
+ if (messageContainer) {
357
+ messageContainer.innerHTML = `<div class='alert alert-danger'>${message}</div>`;
358
+ }
359
+ }
360
+
361
+ });
362
+ function save_file() {
363
+ const form = document.getElementById('documentForm');
364
+
365
+ // Check if the form is valid
366
+ if (!form.checkValidity()) {
367
+ // If the form is invalid, show validation messages and stop the submission
368
+ form.reportValidity();
369
+ return;
370
+ }
371
+ const company_id = $('#company_id').val();
372
+ const APIName = $('#APIName').val();
373
+ const APIEndpoint = $('#APIEndpoint').val();
374
+ const Auth_Bearer = $('#Auth_Bearer').val();
375
+ const Inputjson = $('#Inputjson').val();
376
+ const OutputJson = $('#OutputJson').val();
377
+ const Description = $('#Description').val();
378
+ const view = "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye'></i></a>";
379
+ const edit = "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>";
380
+ const dele = "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></a>";
381
+
382
+ var formData = new FormData($('#documentForm')[0]);
383
+
384
+ formData.append("company_id", company_id),
385
+ formData.append("api_name", APIName),
386
+ formData.append("api_endpoint", APIEndpoint),
387
+ formData.append("auth_bearer", Auth_Bearer),
388
+ formData.append("input_json", Inputjson),
389
+ formData.append("output_json", OutputJson),
390
+ formData.append("description", Description)
391
+
392
+ //const formData = new FormData();
393
+ fetch('/api/save_api_details', {
394
+ method: 'POST',
395
+ body: formData
396
+ })
397
+ .then(response => {
398
+ if (!response.ok) {
399
+ throw new Error('Network response was not ok');
400
+ }
401
+ return response.text();
402
+ })
403
+ .then(data => {
404
+ var table = $('#apiTable').DataTable();
405
+ var rowCount = table.rows().count();
406
+ table.row.add([
407
+ rowCount + 1,
408
+ APIName,
409
+ APIEndpoint,
410
+ Auth_Bearer,
411
+ Inputjson,
412
+ OutputJson,
413
+ Description,
414
+ view,
415
+ edit,
416
+ dele
417
+ ]).draw(false);
418
+
419
+ alert('Document saved successfully');
420
+ $('#addModal').modal('hide');
421
+ document.getElementById('contentSection').style.display = 'block'; // Show the table section
422
+ })
423
+ .catch(error => console.error('Error:', error));
424
+ }
425
+ async function fetchCompanies() {
426
+ try {
427
+ const response = await fetch('/api/companies');
428
+ if (!response.ok) {
429
+ throw new Error('Network response was not ok');
430
+ }
431
+ const data = await response.json();
432
+ displayCompanies(data.companies);
433
+ } catch (error) {
434
+ console.error('Error fetching companies:', error);
435
+ }
436
+ }
437
+
438
+ function displayCompanies(companies) {
439
+ const companySelect = document.getElementById('company');
440
+ companySelect.innerHTML = '<option value="" selected>Select</option>'; // Reset the dropdown
441
+ companies.forEach(company => {
442
+ const option = document.createElement('option');
443
+ option.value = company.name;
444
+ option.textContent = company.name;
445
+ companySelect.appendChild(option);
446
+ });
447
+ }
448
+ function clearFormFields() {
449
+ document.getElementById('APIName').value = "";
450
+ document.getElementById('APIEndpoint').value = "";
451
+ document.getElementById('Auth_Bearer').value = "";
452
+ document.getElementById('Inputjson').value = "";
453
+ document.getElementById('OutputJson').value = "";
454
+ document.getElementById('Description').value = "";
455
+ }
456
+
457
+
458
+ </script>
459
+ </body>
460
+
461
+ </html>
templates/company_profile.html ADDED
@@ -0,0 +1,521 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Company Profile</title>
8
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
10
+ <!-- Include AdminLTE CSS -->
11
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css">
12
+ <!-- Include DataTables CSS -->
13
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
14
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
15
+ <link href="https://cdn.jsdelivr.net/npm/@ttskch/[email protected]/dist/select2-bootstrap4.min.css"
16
+ rel="stylesheet" />
17
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
18
+ <style>
19
+ body {
20
+ background-color: transparent !important;
21
+ }
22
+
23
+ .card {
24
+ padding: 0;
25
+ margin-top: 10px;
26
+ margin-left: -40px;
27
+ }
28
+
29
+ .content-wrapper {
30
+ background-color: transparent !important;
31
+ text-align: center;
32
+ }
33
+
34
+ .wrapper {
35
+ background-color: transparent !important;
36
+ }
37
+
38
+ .modal-content {
39
+ background-color: #fff;
40
+ }
41
+
42
+ h1 {
43
+ text-align: center;
44
+ margin-bottom: 30px;
45
+ }
46
+
47
+
48
+ .table-responsive {
49
+ width: 100%;
50
+ overflow-x: auto;
51
+ }
52
+
53
+ .table {
54
+ width: 100%;
55
+ }
56
+
57
+ .text-wrap {
58
+ white-space: normal !important;
59
+ word-break: break-word;
60
+ }
61
+
62
+ div.dataTables_wrapper div.dataTables_length select {
63
+ width: 60px;
64
+ display: inline-block;
65
+ }
66
+
67
+ .center-align {
68
+ padding-top: 20px;
69
+ display: flex;
70
+ justify-content: center;
71
+ align-items: center;
72
+ width: 100%;
73
+ }
74
+
75
+ .reduced-width {
76
+ width: 50%;
77
+ }
78
+
79
+ th,
80
+ td {
81
+ white-space: nowrap;
82
+ }
83
+
84
+ .select2-container--bootstrap4 {
85
+ z-index: 1050;
86
+ /* Higher than the modal's z-index */
87
+ }
88
+
89
+ .select2-container--open {
90
+ z-index: 1060;
91
+ /* Ensure the dropdown is above the modal */
92
+ }
93
+
94
+ th:nth-child(1),
95
+ td:nth-child(1) {
96
+ width: 5%;
97
+ }
98
+
99
+ th:nth-child(2),
100
+ td:nth-child(2) {
101
+ width: 20%;
102
+ }
103
+
104
+ th:nth-child(3),
105
+ td:nth-child(3) {
106
+ width: 20%;
107
+ }
108
+
109
+ th:nth-child(4),
110
+ td:nth-child(4) {
111
+ width: 20%;
112
+ }
113
+
114
+ th:nth-child(5),
115
+ td:nth-child(5) {
116
+ width: 20%;
117
+ }
118
+
119
+ th:nth-child(6),
120
+ td:nth-child(6) {
121
+ width: 15%;
122
+ }
123
+
124
+ th:nth-child(7),
125
+ td:nth-child(7) {
126
+ width: 20%;
127
+ }
128
+
129
+ .alert {
130
+ position: relative;
131
+ padding: 15px;
132
+ margin-bottom: 20px;
133
+ border: 1px solid transparent;
134
+ border-radius: 4px;
135
+ }
136
+
137
+ .alert-success {
138
+ color: #3c763d;
139
+ background-color: #dff0d8;
140
+ border-color: #d6e9c6;
141
+ }
142
+
143
+ .alert-danger {
144
+ color: #a94442;
145
+ background-color: #f2dede;
146
+ border-color: #ebccd1;
147
+ }
148
+
149
+ .close2 {
150
+ position: absolute;
151
+ bottom: 10px;
152
+ right: 10px;
153
+ border: none;
154
+ background: none;
155
+ font-size: 16px;
156
+ cursor: pointer;
157
+ }
158
+ </style>
159
+ </head>
160
+
161
+ <body>
162
+ {% include 'sidepane.html' %}
163
+
164
+ <div class="wrapper">
165
+ <div class="content-wrapper">
166
+ <!-- Content Header (Page header) -->
167
+ <div class="content-header">
168
+ <div class="container-fluid">
169
+ <div class="row mb-2">
170
+ <div class="col-12">
171
+ <div class="col-12 d-flex justify-content-end mb-3">
172
+ <button class="btn btn-primary" style="margin-bottom:-30px;position:fixed"
173
+ id="add">Add</button>
174
+ </div>
175
+ </div>
176
+ <div class="row">
177
+ <div id="message-container" style="margin-left: 200px;width:600px;"></div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ <!-- Main content -->
183
+ <section class="content">
184
+ <div class="container-fluid">
185
+ <div class="row">
186
+ <div class="col-12">
187
+ <div class="card">
188
+ <div class="card-body table-container">
189
+ <table id="companyTable"
190
+ class="custom-select-lm table table-bordered table-striped">
191
+ <thead>
192
+ <tr>
193
+ <th>Sno</th>
194
+ <th>Company Name</th>
195
+ <th>Company code</th>
196
+ <th>Domain</th>
197
+ <th>LLM Tools</th>
198
+ <th>View</th>
199
+ <th>Edit</th>
200
+ <th>Delete</th>
201
+ </tr>
202
+ </thead>
203
+ <tbody>
204
+ </tbody>
205
+ </table>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </section>
212
+ </div>
213
+ </div>
214
+ <!-- Modal -->
215
+ <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel"
216
+ aria-hidden="true">
217
+ <div class="modal-dialog" role="document">
218
+ <div class="modal-content">
219
+ <div class="modal-header">
220
+ <h5 class="modal-title" id="addModalLabel">Add Company Profile</h5>
221
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
222
+ <span aria-hidden="true" data-backdrop="static" data-keyboard="false">&times;</span>
223
+ </button>
224
+ </div>
225
+ <div class="modal-body">
226
+ <form id="companyForm">
227
+ <div class="form-group">
228
+ <label for="companyName">Company Name<span class="text-danger">*</span></label>
229
+ <input type="text" class="form-control" id="company_name" name="company_name" required>
230
+ </div>
231
+ <div class="form-group">
232
+ <label for="companyCode">Company Code<span class="text-danger">*</span></label>
233
+ <input type="text" class="form-control" id="company_code" name="company_code" required>
234
+ </div>
235
+ <div class="form-group">
236
+ <label for="domain">Domain<span class="text-danger">*</span></label>
237
+ <input type="text" class="form-control" id="domain" name="domain" required>
238
+ </div>
239
+ <div class="form-group">
240
+ <label for="llm_tools">LLM Tools<span class="text-danger">*</span></label>
241
+ <select class="form-control" id="llm_tools" name="llm_tools" multiple required>
242
+ <option value="Database">Database</option>
243
+ <option value="Static Documents">Static Documents</option>
244
+ <option value="API">API</option>
245
+ </select>
246
+ <div class="invalid-feedback">
247
+ Please select at least one LLM tool.
248
+ </div>
249
+ </div>
250
+ </form>
251
+ </div>
252
+ <div class="modal-footer">
253
+ <button type="button" id="saveupdate" class="btn btn-primary" style="display: none;">Update</button>
254
+ <button type="button" id="save" onclick="saveProfile()" class="btn btn-primary">Save</button>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ {%include 'footer.html'%}
260
+ <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
261
+ <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
262
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
263
+ <script>
264
+ document.addEventListener('DOMContentLoaded', function () {
265
+
266
+ const role = sessionStorage.getItem('userRole');
267
+ console.log('Current role:', role); // Debug statement to check the role
268
+
269
+ if (role === 'admin') {
270
+ document.getElementById('add').style.display = 'block';
271
+ } else {
272
+ document.getElementById('add').style.display = 'none';
273
+ }
274
+ fetchCompanies();
275
+ });
276
+ window.addEventListener('pageshow', function (event) {
277
+ if (event.persisted || (window.performance && window.performance.navigation.type === 2)) {
278
+ window.location.reload();
279
+ }
280
+ });
281
+
282
+
283
+ $(document).ready(function () {
284
+ // Initialize DataTable
285
+ $('#companyTable').DataTable();
286
+ // Initialize Select2
287
+ $('#llm_tools').select2({
288
+ theme: 'bootstrap4',
289
+ placeholder: 'Select',
290
+ allowClear: true
291
+ });
292
+ // Show modal function
293
+ $('#add').on('click', function () {
294
+ $('#addModal').modal('show');
295
+ $('#save').show();
296
+ $('#saveupdate').hide();
297
+ clearmodal();
298
+ $('#save').prop('disabled', false); // Disable the "Save" button when the modal opens
299
+ });
300
+ $('.modal-footer .btn-secondary, .modal-header .close').on('click', function () {
301
+ $('#addModal').modal('hide');
302
+ });
303
+
304
+
305
+ $(document).on('click', '.btn-view', function () {
306
+ const companyId = $(this).data('id');
307
+ console.log("company_id in view", companyId);
308
+ viewCompany(companyId);
309
+ });
310
+
311
+ // Edit company details
312
+ $(document).on('click', '.btn-edit', function () {
313
+ const companyId = $(this).data('id');
314
+ console.log("company_id in edit", companyId);
315
+ editCompany(companyId);
316
+ });
317
+
318
+ // Delete company
319
+ $(document).on('click', '.btn-delete', function () {
320
+ const companyId = $(this).data('id'); // Get the company ID from the da
321
+ console.log("company_id in delete", companyId);
322
+ if (confirm("Are you sure you want to delete this company?")) {
323
+ deleteCompany(companyId); // Call the delete function with the company ID
324
+ }
325
+ });
326
+
327
+ });
328
+ // View company details
329
+ function viewCompany(companyId) {
330
+ // Fetch company details by ID
331
+ $.getJSON(`/api/getcompanydetails/${companyId}`, function (company) {
332
+ // alert(`Company Name: ${company.company_name}\nCompany Code: ${company.company_code}\nDomain: ${company.domain}\nLLM Tools: ${company.llm_tools}`);
333
+ $('#company_name').val(company.company_name).attr('readonly', 'readonly');
334
+ $('#company_code').val(company.company_code).attr('readonly', 'readonly');
335
+ $('#domain').val(company.domain).attr('readonly', 'readonly');
336
+ $('#llm_tools').val(company.llm_tools.split(',')).trigger('change');
337
+ $('#llm_tools').prop('disabled', true); // Disable the select input
338
+
339
+ // Open the modal for editing
340
+
341
+ $('#save').hide();// Disable the "Save" button when the modal opens
342
+ $('#addModal').modal('show');
343
+ }).fail(function () {
344
+ alert("Error retrieving company details.");
345
+ });
346
+ }
347
+
348
+ // Edit company details
349
+ function editCompany(companyId) {
350
+ // Fetch company details by ID
351
+ $.getJSON(`/api/getcompanydetails/${companyId}`, function (company) {
352
+ $('#company_name').removeAttr('readonly');
353
+ $('#company_code').removeAttr('readonly');
354
+ $('#domain').removeAttr('readonly');
355
+ $('#llm_tools').prop('disabled', false);
356
+ $('#save').hide();
357
+ $('#saveupdate').show();
358
+ // Populate the form with the company's details
359
+ $('#company_name').val(company.company_name);
360
+ $('#company_code').val(company.company_code);
361
+ $('#domain').val(company.domain);
362
+ $('#llm_tools').val(company.llm_tools.split(',')).trigger('change');
363
+
364
+ // Open the modal for editing
365
+ $('#addModal').modal('show');
366
+
367
+ // Update the save button to save the edited company
368
+ $('#saveupdate').off('click').on('click', function () {
369
+
370
+ saveupdate(companyId); // Pass the company ID for updating
371
+ });
372
+ }).fail(function () {
373
+ alert("Error retrieving company details.");
374
+ });
375
+ }
376
+
377
+ // Delete company
378
+ function deleteCompany(companyId) {
379
+ console.log("company_id deleted", companyId);
380
+ $.ajax({
381
+ type: "DELETE",
382
+ url: `/api/delcompanydetails/${companyId}`,
383
+ success: function () {
384
+ // alert("Company deleted successfully.");
385
+ const messageContainer = document.getElementById('message-container');
386
+ if (messageContainer)
387
+ messageContainer.innerHTML = `
388
+ <div class='alert alert-success'>
389
+ Company deleted successfully.
390
+ <button class='close' onclick='dismissMessage()'>OK</button>
391
+ </div>`;
392
+ fetchCompanies(); // Refresh the table
393
+ },
394
+ error: function (xhr) {
395
+ alert("Error deleting company: " + xhr.responseJSON.detail);
396
+ }
397
+ });
398
+ }
399
+ function saveupdate(companyId) {
400
+ console.log("company_id", companyId);
401
+ var companyData = {
402
+ company_name: $('#company_name').val(),
403
+ company_code: $('#company_code').val(),
404
+ domain: $('#domain').val(),
405
+ llm_tools: $('#llm_tools').val().join(',') // Assuming llm_tools is a multi-select
406
+ };
407
+ console.log("company_data", companyData);
408
+
409
+ $.ajax({
410
+ url: `/api/putcompanydetails/${companyId}`,
411
+ type: 'PUT',
412
+ data: companyData,
413
+ success: function (response) {
414
+ alert('Company details updated successfully.');
415
+ $('#addModal').modal('hide'); // Close the modal after saving
416
+ fetchCompanies();
417
+ },
418
+ error: function () {
419
+ alert('Failed to update company details.');
420
+ }
421
+ });
422
+ }
423
+ function saveProfile() {
424
+ const form = document.getElementById('companyForm');
425
+
426
+ // Check if the form is valid
427
+ if (!form.checkValidity()) {
428
+ // If the form is invalid, show validation messages and stop the submission
429
+ form.reportValidity();
430
+ return;
431
+ }
432
+ // Gather form data
433
+ const company_name = document.getElementById('company_name').value;
434
+ const company_code = document.getElementById('company_code').value;
435
+ const domain = document.getElementById('domain').value;
436
+ const llm_tools = $('#llm_tools').val(); // Get selected values from Select2
437
+
438
+ // Prepare FormData
439
+ let formData = new FormData();
440
+ formData.append("company_name", company_name);
441
+ formData.append("company_code", company_code);
442
+ formData.append("domain", domain);
443
+ formData.append("llm_tools", llm_tools.join(','));
444
+
445
+ $.ajax({
446
+ type: "POST",
447
+ url: "/submit_company_profile",
448
+ data: formData,
449
+ processData: false,
450
+ contentType: false,
451
+ success: function (response) {
452
+ // alert("Data saved successfully"); // Show success message
453
+ const messageContainer = document.getElementById('message-container');
454
+ if (messageContainer)
455
+ messageContainer.innerHTML = `
456
+ <div class='alert alert-success'>
457
+ Data saved successfully
458
+ <button class='close' onclick='dismissMessage()'>OK</button>
459
+ </div>`;
460
+ fetchCompanies(); // Refresh table data
461
+
462
+ // Clear the form and close the modal
463
+ // $('#companyForm')[0].reset();
464
+ $('#addModal').modal('hide');
465
+ },
466
+ error: function (xhr) {
467
+ alert("An error occurred: " + xhr.responseJSON.detail); // Show error message
468
+ }
469
+ });
470
+ }
471
+ function dismissMessage() {
472
+ const messageContainer = document.getElementById('message-container');
473
+ if (messageContainer) {
474
+ messageContainer.innerHTML = '';
475
+ }
476
+ }
477
+ async function fetchCompanies() {
478
+ try {
479
+ console.log("Fetching companies...");
480
+ const response = await fetch(`/api/companydetails`);
481
+ const companies = await response.json();
482
+ console.log(companies); // Inspect the data here
483
+
484
+ if (!Array.isArray(companies)) {
485
+ throw new TypeError('Expected an array of companies');
486
+ }
487
+
488
+ const table = $('#companyTable').DataTable();
489
+ table.clear(); // Clear existing table data
490
+
491
+ companies.forEach((company, index) => {
492
+ table.row.add([
493
+ index + 1,
494
+ company.company_name,
495
+ company.company_code,
496
+ company.domain,
497
+ company.llm_tools, // Join array of tools into a string
498
+ `<a href='#' class='btn btn-info btn-sm'onclick='viewCompany(${company.company_id})'><i class='fas fa-eye'></i></a>`,
499
+ `<a href='#' class='btn btn-warning btn-sm'onclick='editCompany(${company.company_id})'><i class='fas fa-edit'></i></a>`,
500
+ `<a href='#' class='btn btn-danger btn-sm' onclick='deleteCompany(${company.company_id})'><i class='fas fa-trash'></i></a>`
501
+
502
+ ]).draw(false);
503
+ });
504
+ } catch (error) {
505
+ console.error('Error fetching companies:', error);
506
+ }
507
+ }
508
+ function clearmodal() {
509
+ $('#companyForm')[0].reset(); // Reset all form fields
510
+ $('#llm_tools').val(null).trigger('change'); // Clear and reset the Select2 field
511
+ $('#llm_tools').select2({
512
+ theme: 'bootstrap4',
513
+ placeholder: 'Select',
514
+ allowClear: true
515
+ }); // Reinitialize Select2
516
+ }
517
+
518
+ </script>
519
+ </body>
520
+
521
+ </html>
templates/data_connectors.html ADDED
@@ -0,0 +1,662 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Data Connectors</title>
8
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
10
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css">
11
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
13
+
14
+ <style>
15
+ html,
16
+ body {
17
+ height: 90%;
18
+ margin: 0;
19
+ display: flex;
20
+ flex-direction: column;
21
+ }
22
+
23
+ body {
24
+ display: inline-flex;
25
+ flex-direction: column;
26
+ min-height: 90%;
27
+ }
28
+
29
+ .main-content {
30
+ flex: 1;
31
+ display: inline-flex;
32
+ flex-direction: column;
33
+ align-items: center;
34
+ justify-content: flex-start;
35
+ padding: 30px;
36
+ }
37
+
38
+ /* .container {
39
+ margin-top: 50px;
40
+ margin-left: 320px;
41
+ max-width: 800px;
42
+ padding: 10px;
43
+ border: 1px solid #ccc;
44
+ border-radius: 5px;
45
+ background-color: #fff;
46
+ position: relative;
47
+ z-index: 1;
48
+ } */
49
+
50
+ .form-group {
51
+ margin-bottom: 20px;
52
+ }
53
+
54
+ .form-group label {
55
+ font-weight: bold;
56
+ margin-top: -10px;
57
+ margin-left:-22px;
58
+ display: block;
59
+ }
60
+
61
+ .form-group input,
62
+ .form-group select,
63
+ .form-group textarea {
64
+ width: 90%;
65
+ margin-left:-22px;
66
+ padding: 2px;
67
+ border: 1px solid #ccc;
68
+ border-radius: 4px;
69
+ }
70
+
71
+ .btn-primary {
72
+ margin-right: 10px;
73
+ color: white;
74
+ font-size: 16px;
75
+ font-weight: bold;
76
+ }
77
+
78
+ /* .btn-container {
79
+ text-align: center;
80
+ margin-top: 20px;
81
+ margin-bottom: 10px;
82
+ } */
83
+ .btn-primary {
84
+ margin-right: 10px;
85
+ color: white;
86
+ font-size: 16px;
87
+ font-weight: bold;
88
+ }
89
+
90
+
91
+ .btn-container {
92
+ text-align: center;
93
+ margin-top: 30px;
94
+ margin-left: 20px;
95
+ margin-right: 0px;
96
+ margin-bottom: 10px;
97
+ /* color: white; */
98
+ }
99
+
100
+ .btn-container1 {
101
+ text-align: center;
102
+ margin-top: 50px;
103
+ margin-left: 30px;
104
+ margin-right: 30px;
105
+ margin-bottom: 10px;
106
+ color: white;
107
+ }
108
+
109
+ /* #selectedTables,
110
+ #labelselected {
111
+ display: none;
112
+ } */
113
+ .btn-primary:focus,
114
+ .btn-primary:active {
115
+ color: white;
116
+ background-color: #007bff;
117
+ border-color: #007bff;
118
+ box-shadow: none;
119
+ }
120
+
121
+ #saveBtn1 {
122
+
123
+ margin: 0 auto;
124
+ }
125
+
126
+ /* footer {
127
+ position: relative;
128
+ margin-top: auto;
129
+ width: 100%;
130
+ color: black;
131
+ text-align: right;
132
+ padding-right: 245px;
133
+ padding-top: 20px;
134
+ background-color: #f8f9fa;
135
+ border: none !important;
136
+ }
137
+ */
138
+ .small-select {
139
+ margin-top: 5px;
140
+ width: 200px;
141
+ /* Adjust the width as needed */
142
+ }
143
+
144
+ .custom-dropdown {
145
+ width: 250px;
146
+ /* Adjust the width as needed */
147
+ }
148
+ /* Ensure the new row aligns with the previous row */
149
+ #schema-table-section {
150
+
151
+ margin-left: -20px; /* Adjust this if you need spacing between rows */
152
+ padding-top: 5px; /* Adjust padding if needed */
153
+ }
154
+
155
+ .alert {
156
+ position: relative;
157
+ padding: 15px;
158
+ margin-bottom: 20px;
159
+ border: 1px solid transparent;
160
+ border-radius: 4px;
161
+ }
162
+
163
+ .alert-success {
164
+ color: #3c763d;
165
+ background-color: #dff0d8;
166
+ border-color: #d6e9c6;
167
+ }
168
+
169
+ .alert-danger {
170
+ color: #a94442;
171
+ background-color: #f2dede;
172
+ border-color: #ebccd1;
173
+ }
174
+
175
+ .close {
176
+ position: absolute;
177
+ bottom: 10px;
178
+ right: 10px;
179
+ border: none;
180
+ background: none;
181
+ font-size: 16px;
182
+ cursor: pointer;
183
+ }
184
+
185
+
186
+ </style>
187
+ </head>
188
+
189
+ <body>
190
+ {% include 'sidepane.html' %}
191
+ <div class="wrapper">
192
+ <div class="main-header" style="border-bottom: none;">
193
+ <!-- Content Header (Page header) -->
194
+ <div class="content-header">
195
+ <div class="container-fluid">
196
+ <div class="container mt-2">
197
+ <div class="form-group left-align">
198
+ <label for="company" class="mr-1" style="margin-left:-60px;margin-top:-1px;">Company Name <span class="text-danger">*</span></label>
199
+ <select type="text" id="company" name="company" class="form-control "style="width: 20%;margin-left:-60px;margin-bottom:10px" required>
200
+ <option value="" selected>Select</option>
201
+ </select>
202
+ </div>
203
+ <div class="row">
204
+ <div id="message-container" style="padding:20px;margin-left: 150px;width:500px;"></div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ <form id="databaseconnectorForm" class="needs-validation" novalidate action="/save_data_connectors"
210
+ method="post" style="display:none;">
211
+ <div class="form-group">
212
+ <!-- <label for="company_id">company_id</label>--->
213
+ <input type="hidden" id="company_id" name="company_id" class="form-control" required>
214
+ </div>
215
+ <div class="row">
216
+ <div class="col-md-3">
217
+ <div class="form-group">
218
+ <label for="database">Database Type<span class="text-danger">*</span></label>
219
+ <select type="text" id="database" name="database" class="form-control" required>
220
+ <option value="" selected>Select</option>
221
+ <option value="Postgres">Postgres</option>
222
+ <option value="mysql">mysql</option>
223
+ </select>
224
+ </div>
225
+ </div>
226
+ <div class="col-md-3">
227
+ <div class="form-group">
228
+ <label for="server">Server IP <span class="text-danger">*</span></label>
229
+ <input type="text" id="server" name="server" class="form-control" required>
230
+ </div>
231
+ </div>
232
+ <div class="col-md-3">
233
+ <div class="form-group">
234
+ <label for="port">Port <span class="text-danger">*</span></label>
235
+ <input type="text" id="port" name="port" class="form-control" required>
236
+ </div>
237
+ </div>
238
+ <div class="col-md-3">
239
+ <div class="form-group">
240
+ <label for="databaseName">Database Name <span class="text-danger">*</span></label>
241
+ <input type="text" id="databaseName" name="databaseName" class="form-control" required>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ <div class="row">
246
+ <div class="col-md-3">
247
+ <div class="form-group">
248
+ <label for="userame">UserName <span class="text-danger">*</span></label>
249
+ <input type="text" id="username" name="username" class="form-control" required>
250
+ </div>
251
+ </div>
252
+ <div class="col-md-3">
253
+ <div class="form-group">
254
+ <label for="password">Password <span class="text-danger">*</span></label>
255
+ <input type="password" id="password" name="password" class="form-control" required>
256
+ </div>
257
+ </div>
258
+
259
+ <div class="col-md-6">
260
+ <div class="form-group d-flex justify-content-between">
261
+ <div class="form-group btn-container">
262
+ <button type="button" id="connectBtn" class="btn btn-primary">Connect</button>
263
+ <button type="reset" class="btn btn-primary">Clear</button>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <div id="schema-table-section" style="display: none;">
270
+ <div class="row">
271
+ <div class="col-md-3">
272
+ <div class="form-group1">
273
+ <label for="schemas">Select Schemas <span class="text-danger">*</span></label>
274
+ <select type="text" id="schemas" name="schemas" class="form-control" required>
275
+ <option value="" selected>Select</option>
276
+ <option value="schema1">Lookup</option>
277
+ <option value="schema2">Public</option>
278
+ <option value="schema3" selected>tenant_default</option>
279
+ </select>
280
+ </div>
281
+ </div>
282
+
283
+ <div class="col-md-3">
284
+ <div class="form-group1">
285
+ <label for="tableschema" style="margin-left: 30px;margin-right: 30px;">Select Tables <span
286
+ class="text-danger">*</span></label>
287
+ <div class="dropdown custom-dropdown">
288
+ <button class="btn btn-secondary dropdown-toggle"
289
+ style="margin-left: 30px;margin-right: 0px;" type="button" id="tablesDropdown"
290
+ data-bs-toggle="dropdown" aria-expanded="false">
291
+ Select Tables
292
+ </button>
293
+ <ul class="dropdown-menu" aria-labelledby="tablesDropdown">
294
+ <li>
295
+ <select type="text" id="tableschema" name="tableschema" class="form-control"
296
+ multiple required>
297
+ <option value="customer_master">customer_master</option>
298
+ <option value="efs_company_master">efs_company_master</option>
299
+ <option value="efs_group_company_master">efs_group_company_master</option>
300
+ <option value="efs_region_master">efs_region_master</option>
301
+ <option value="party_address_detail">party_address_detail</option>
302
+ <option value="wms_warehouse_master">wms_warehouse_master</option>
303
+ </select>
304
+ </li>
305
+ </ul>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ <!-- <div class="col-md-3">
310
+ <div class="btn-container1">
311
+ <button type="button" id="saveBtn" class="btn btn-primary">Save</button>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ <div class="row">-->
316
+ <div class="col-md-3">
317
+ <div class="form-group1">
318
+ <label for="selectedTables" id="labelselected">Selected Tables</label>
319
+ <textarea type="text" id="selectedTables" name="selectedTables" class="form-control"
320
+ rows="4" readonly></textarea>
321
+ </div>
322
+ </div>
323
+
324
+ <div class="col-md-3">
325
+ <div class="form-group">
326
+ <div class="btn-container1">
327
+ <button type="submit" id="saveBtn" class="btn btn-primary">Save</button>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </form>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ <footer class="footer">
338
+ {%include 'footer.html'%}
339
+ </footer>
340
+ <script>
341
+ // document.getElementById('database').addEventListener('change', function () {
342
+ // const selectedDatabaseType =this.value;
343
+ // if (selectedDatabaseType) {
344
+ // fetchDatabaseDetails(selectedDatabaseType);
345
+ // }
346
+ // });
347
+
348
+ // async function fetchDatabaseDetails(databaseType) {
349
+ // try {
350
+ // const response = await fetch(`/api/get_database_details?database_type=${encodeURIComponent(databaseType)}`);
351
+ // if (!response.ok) {
352
+ // throw new Error('Network response was not ok');
353
+ // }
354
+ // const connectorsData= await response.json();
355
+ // //document.getElementById('server').value = connectorsData.server;
356
+ // // document.getElementById('port').value = connectorsData.port;
357
+ // // document.getElementById('databaseName').value = connectorsData.database_name;
358
+ // // document.getElementById('username').value = connectorsData.username;
359
+ // // document.getElementById('password').value = connectorsData.password;
360
+ // // document.getElementById('selectedTables').value = connectorsData.dbtablename;
361
+ // //updateFormFields(data);
362
+ // } catch (error) {
363
+ // console.error('Error fetching database details:', error);
364
+ // }
365
+ // }
366
+ document.addEventListener('DOMContentLoaded', function () {
367
+ fetchCompanies();
368
+ const companySelect = document.getElementById('company');
369
+ const databaseconnectorForm = document.getElementById('databaseconnectorForm');
370
+ database.addEventListener('change', async function () {
371
+ $("#message-container").empty();
372
+ });
373
+ companySelect.addEventListener('change', async function () {
374
+ $("#message-container").empty();
375
+ const selectedCompanyName = companySelect.options[companySelect.selectedIndex].text;
376
+ console.log(`Selected Company Name: ${selectedCompanyName}`);
377
+
378
+ if (selectedCompanyName !== "Select") {
379
+ $("#schema-table-section").hide();
380
+ try {
381
+ const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompanyName)}`);
382
+ if (!response.ok) {
383
+ throw new Error('Network response was not ok');
384
+ }
385
+ const data = await response.json();
386
+ console.log(`Company ID: ${data.company_id}`);
387
+ const companyId = data.company_id;
388
+ document.getElementById('company_id').value = companyId;
389
+
390
+ if (companyId) {
391
+ try {
392
+ const connectorsResponse = await fetch(`/api/check_data_connectors?company_id=${companyId}&company_name=${selectedCompanyName}`);
393
+ if (!connectorsResponse.ok) {
394
+ throw new Error('data connector Network response was not ok');
395
+ }
396
+ const connectorsData = await connectorsResponse.json();
397
+ //setMultiSelectValues(document.getElementById('database'), connectorsData.databasetype); // Ensure this is an array
398
+ //setMultiSelectValues(document.getElementById('databaseName'), connectorsData.database_name); // Ensure this is an array
399
+ document.getElementById('database').value = connectorsData.databasetype;
400
+ document.getElementById('server').value=connectorsData.serverip; // document.getElementById('server').value = connectorsData.serverip;
401
+ document.getElementById('port').value = connectorsData.port;
402
+ document.getElementById('databaseName').value = connectorsData.database_name;
403
+ document.getElementById('username').value = connectorsData.username;
404
+ document.getElementById('password').value = connectorsData.password;
405
+ document.getElementById('selectedTables').value = connectorsData.dbtablename;
406
+ databaseconnectorForm.style.display = 'block';
407
+
408
+ } catch (error) {
409
+ document.getElementById('database').value = " ";
410
+ document.getElementById('server').value = " ";
411
+ document.getElementById('port').value = " ";
412
+ document.getElementById('databaseName').value = " ";
413
+ document.getElementById('username').value = " ";
414
+ document.getElementById('password').value = " ";
415
+ document.getElementById('selectedTables').value = " ";
416
+ console.error('Error fetching data from data connectors:', error);
417
+ ("Company name does not exist. Please fill in the details.");
418
+
419
+ // Optionally, you can insert a message into the DOM
420
+ const messageContainer = document.getElementById('message-container');
421
+ if (messageContainer) {
422
+ messageContainer.innerHTML = "<div class='alert alert-danger'>Database details does not exist for this Company name.. Please fill in the details.</div>";
423
+ }
424
+
425
+
426
+ databaseconnectorForm.style.display = 'block';
427
+ }
428
+ } else {
429
+ console.log(`Company ID does not exist, you can create and save data: ${data.company_id}`);
430
+ databaseconnectorForm.style.display = 'none';
431
+ }
432
+
433
+ } catch (error) {
434
+
435
+ console.error('Error fetching company ID or data connectors:', error);
436
+ databaseconnectorForm.style.display = 'none';
437
+ }
438
+ } else {
439
+ databaseconnectorForm.style.display = 'none';
440
+ }
441
+ });
442
+
443
+ // document.getElementById("connectBtn").addEventListener("click", function (event) {
444
+ // var database = document.getElementById("database").value;
445
+ // var server = document.getElementById("server").value;
446
+ // var port = document.getElementById("port").value;
447
+ // var databaseName = document.getElementById("databaseName").value;
448
+ // var username = document.getElementById("username").value;
449
+ // var password = document.getElementById("password").value;
450
+
451
+ // if (!database || !server || !port || !databaseName || !username || !password) {
452
+ // alert("Please fill in all required fields.");
453
+ // return;
454
+ // }
455
+
456
+ // document.getElementById("schema-table-section").style.display = "block";
457
+ // });
458
+ $("#tableschema").change(function () {
459
+ var selectedTables = $(this).val();
460
+ var currentText = $("#selectedTables").val();
461
+ selectedTables.forEach(function (table) {
462
+ if (!currentText.includes(table)) {
463
+ if (currentText.length > 1) {
464
+ currentText += ", " + table;
465
+ } else {
466
+ currentText = table;
467
+ }
468
+ }
469
+ });
470
+ $("#selectedTables").val(currentText);
471
+ });
472
+ document.getElementById("connectBtn").addEventListener("click", function (event) {
473
+ var database = document.getElementById("database").value;
474
+ var server = document.getElementById("server").value;
475
+ var port = document.getElementById("port").value;
476
+ var databaseName = document.getElementById("databaseName").value;
477
+ var username = document.getElementById("username").value;
478
+ var password = document.getElementById("password").value || "";
479
+
480
+ if (!database || !server || !port || !databaseName || !username) {
481
+ alert("Please fill in all required fields.");
482
+ return;
483
+ }
484
+ document.getElementById("schema-table-section").style.display = "block";
485
+ fetch("/api/connect", {
486
+ method: "POST",
487
+ headers: {
488
+ "Content-Type": "application/json"
489
+ },
490
+ body: JSON.stringify({
491
+ database_type: database,
492
+ server: server,
493
+ port: port,
494
+ databaseName: databaseName,
495
+ username: username,
496
+ password: password
497
+ })
498
+ })
499
+ .then(response => response.json())
500
+ .then(data => {
501
+ if (data.success) {
502
+ populateSchemaDropdown(data.schemas);
503
+ // Set default selection for tables
504
+ if (data.schemas.length > 0) {
505
+ updateTablesDropdown(data.schema_tables, data.schemas[0]);
506
+ schemas.addEventListener("change", function (event) {
507
+ var selectedSchema = event.target.value;
508
+ updateTablesDropdown(data.schema_tables, selectedSchema);
509
+ });
510
+ }
511
+ } else {
512
+ alert("Failed to connect to the database. Please check your credentials.");
513
+ }
514
+ })
515
+ .catch(error => {
516
+ console.error("Error:", error);
517
+ alert("An error occurred while connecting to the database.");
518
+ });
519
+ });
520
+
521
+ function populateSchemaDropdown(schemas) {
522
+ var schemaSelect = document.getElementById("schemas");
523
+ schemaSelect.innerHTML = ""; // Clear any existing options
524
+
525
+ schemas.forEach(function (schema) {
526
+ var option = document.createElement("option");
527
+ option.value = schema;
528
+ option.textContent = schema;
529
+ schemaSelect.appendChild(option);
530
+ });
531
+
532
+ }
533
+
534
+ function updateTablesDropdown(schemaTables, selectedSchema) {
535
+ var tableSchemaSelect = document.getElementById("tableschema");
536
+ tableSchemaSelect.innerHTML = ""; // Clear any existing options
537
+
538
+ if (schemaTables[selectedSchema]) {
539
+ schemaTables[selectedSchema].forEach(function (table) {
540
+ var option = document.createElement("option");
541
+ option.value = table;
542
+ option.textContent = table;
543
+ tableSchemaSelect.appendChild(option);
544
+ });
545
+ }
546
+ }
547
+
548
+ // $("#tableschema").change(function () {
549
+ // var selectedTables = $(this).val();
550
+ // var currentText = $("#selectedTables").val();
551
+ // selectedTables.forEach(function (table) {
552
+ // if (!currentText.includes(table)) {
553
+ // if (currentText.length > 1) {
554
+ // currentText += ", " + table;
555
+ // } else {
556
+ // currentText = table;
557
+ // }
558
+ // }
559
+ // });
560
+ // $("#selectedTables").val(currentText);
561
+ // });
562
+
563
+ // document.getElementById("saveBtn").addEventListener("click", function (event) {
564
+ // var tables = Array.from(document.getElementById("tableschema").selectedOptions).map(option => option.value);
565
+ // if (tables.length === 0) {
566
+ // alert("Please select at least one table.");
567
+ // return;
568
+ // }
569
+
570
+ // var selectedTables = document.getElementById("selectedTables");
571
+ // selectedTables.value = tables.join(", ");
572
+ // selectedTables.style.display = "block";
573
+ // document.getElementById("labelselected").style.display = "block";
574
+ // document.getElementById("saveBtn1").style.display = "block";
575
+ // });
576
+ document.getElementById("saveBtn").addEventListener("click", async function (event) {
577
+ //event.preventDefault(); // Prevent default form submission
578
+
579
+ const form = document.getElementById('databaseconnectorForm');
580
+ const formData = new FormData(form);
581
+ console.log("formdatat",formData);
582
+ try {
583
+ const response = await fetch(form.action, {
584
+ method: form.method,
585
+ body: formData
586
+ });
587
+ console.log('Response:', response);
588
+ if (!response.ok) {
589
+ throw new Error('Network response was not ok');
590
+
591
+ }
592
+
593
+ const result = await response.json();
594
+ // // Optionally, handle the response from the server
595
+ if (result.success) {
596
+ // alert('Data saved successfully');
597
+
598
+
599
+ const messageContainer = document.getElementById('message-container');
600
+ if(messageContainer)
601
+ messageContainer.innerHTML = `
602
+ <div class='alert alert-success'>
603
+ Data saved successfully
604
+ <button class='close' onclick='dismissMessage()'>OK</button>
605
+ </div>`;
606
+ }
607
+ } catch (error) {
608
+ console.error('Error saving data:', error);
609
+ alert('An error occurred while saving data');
610
+ }
611
+ });
612
+ });
613
+ function dismissMessage() {
614
+ const messageContainer = document.getElementById('message-container');
615
+ if (messageContainer) {
616
+ messageContainer.innerHTML = '';
617
+ }
618
+ }
619
+ function handleError() {
620
+ document.getElementById('database').value = " ";
621
+ document.getElementById('server').value = " ";
622
+ document.getElementById('port').value = " ";
623
+ document.getElementById('databaseName').value = " ";
624
+ document.getElementById('username').value = " ";
625
+ document.getElementById('password').value = " ";
626
+ }
627
+ async function fetchCompanies() {
628
+ try {
629
+ const response = await fetch('/api/companies');
630
+ if (!response.ok) {
631
+ throw new Error('Network response was not ok');
632
+ }
633
+ const data = await response.json();
634
+ displayCompanies(data.companies);
635
+ } catch (error) {
636
+ console.error('Error fetching companies:', error);
637
+ }
638
+ }
639
+
640
+ function displayCompanies(companies) {
641
+ const companySelect = document.getElementById('company');
642
+ companySelect.innerHTML = '<option value="" selected>Select</option>'; // Reset the dropdown
643
+ companies.forEach(company => {
644
+ const option = document.createElement('option');
645
+ option.value = company.name;
646
+ option.textContent = company.name;
647
+ companySelect.appendChild(option);
648
+ });
649
+ }
650
+
651
+ function setMultiSelectValues(selectElement, values) {
652
+ // Ensure values is an array
653
+ if (!Array.isArray(values)) {
654
+ values = [values];
655
+ }
656
+ Array.from(selectElement.options).forEach(option => {
657
+ option.selected = values.includes(option.value);
658
+ });
659
+ }
660
+ </script>
661
+ </body>
662
+ </html>
templates/knowledgebase.html ADDED
@@ -0,0 +1,667 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <title>Knowledge Base</title>
6
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
7
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
8
+ <!-- Include AdminLTE CSS -->
9
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css">
10
+ <!-- Include DataTables CSS -->
11
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
12
+ <!-- Include AdminLTE JS -->
13
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/adminlte.min.js"></script>
14
+ <!-- Include DataTables JS -->
15
+ <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
16
+ <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
17
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
18
+ <style>
19
+ body {
20
+ background-color: transparent !important;
21
+ }
22
+ .content-wrapper{
23
+ flex: 1;
24
+ overflow-y: auto;
25
+ }
26
+
27
+ .wrapper {
28
+ display: flex;
29
+ flex-direction: column;
30
+ height: 100vh;
31
+ }
32
+
33
+
34
+ .modal-content {
35
+ background-color: #fff;
36
+ }
37
+
38
+ .content-header {
39
+ padding: 1rem;
40
+ }
41
+
42
+ h1 {
43
+ text-align: center;
44
+ margin-bottom: 30px;
45
+ }
46
+
47
+ .card {
48
+ padding: 0;
49
+ margin-top: -15px;
50
+ margin-left: -40px;
51
+ }
52
+
53
+ .table-responsive {
54
+ width: 100%;
55
+ overflow-x: auto;
56
+ /*overflow-y: scroll;*/
57
+ /* Allows horizontal scrolling if necessary */
58
+ }
59
+
60
+ .table,
61
+ .table-bordered {
62
+ width: 100%;
63
+ border-collapse: collapse;
64
+ margin-right: 7.5px;
65
+ }
66
+
67
+
68
+ .text-wrap {
69
+ white-space: normal !important;
70
+ word-break: break-word;
71
+ }
72
+ div.dataTables_wrapper div.dataTables_length select{
73
+ width: 60px;
74
+ display: inline-block;
75
+ }
76
+
77
+ th {
78
+ white-space: nowrap;
79
+ }
80
+
81
+ th:nth-child(1),
82
+ td:nth-child(1) {
83
+ /* Sno column */
84
+ width: 2%;
85
+ }
86
+
87
+ th:nth-child(2),
88
+ td:nth-child(2) {
89
+ /* Document Name column */
90
+ width: auto;
91
+ }
92
+
93
+ th:nth-child(3),
94
+ td:nth-child(3) {
95
+ /* Document Description column */
96
+ width: auto;
97
+ }
98
+
99
+ th:nth-child(4),
100
+ td:nth-child(4) {
101
+ /* Document Version column */
102
+ width: 20%;
103
+ }
104
+
105
+ th:nth-child(5),
106
+ td:nth-child(5) {
107
+ /* VectorDB Flag column */
108
+ width: auto;
109
+ }
110
+
111
+ th:nth-child(6),
112
+ td:nth-child(6) {
113
+ /* View column */
114
+ width: 10%;
115
+ }
116
+
117
+ th:nth-child(7),
118
+ td:nth-child(7) {
119
+ /* Edit column */
120
+ width: 10%;
121
+ }
122
+
123
+ th:nth-child(8),
124
+ td:nth-child(8) {
125
+ /* Delete column */
126
+ width: auto;
127
+ }
128
+ .alert {
129
+ position: relative;
130
+ padding: 15px;
131
+ margin-bottom: 20px;
132
+ border: 1px solid transparent;
133
+ border-radius: 4px;
134
+ }
135
+
136
+ .alert-success {
137
+ color: #3c763d;
138
+ background-color: #dff0d8;
139
+ border-color: #d6e9c6;
140
+ }
141
+
142
+ .alert-danger {
143
+ color: #a94442;
144
+ background-color: #f2dede;
145
+ border-color: #ebccd1;
146
+ }
147
+
148
+ .close {
149
+ position: absolute;
150
+ bottom: 10px;
151
+ right: 10px;
152
+ border: none;
153
+ background: none;
154
+ font-size: 16px;
155
+ cursor: pointer;
156
+ }
157
+
158
+ </style>
159
+ </head>
160
+
161
+ <body>
162
+ {% include 'sidepane.html' %}
163
+ <div class="wrapper">
164
+ <div class="main-header" style="border-bottom: none;">
165
+ <div class="container mt-2">
166
+ <div class="form-group left-align" >
167
+ <label for="company" class="mr-1" style="margin-left:-40px; margin-top: 12px;">Company Name <span class="text-danger">*</span></label>
168
+ <select type="text" id="company" name="company" class="form-control" style="width:20%;margin-left:-40px;"required>
169
+ <option value="" selected>Select</option>
170
+ </select>
171
+ <div class="col-12 d-flex justify-content-end mb-3">
172
+ <button class="btn btn-primary" style="margin-top:-40px;margin-right: -10px;position: fixed;"
173
+ id="add" data-action="add">Add</button>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ <div class="row">
178
+ <div id="message-container" style="margin-left: 200px;width:600px;"></div>
179
+ </div>
180
+
181
+ <section class="content" id="contentSection" style="display: none;">
182
+ <div class="container-fluid">
183
+ <div>
184
+ <div class="form-group">
185
+ <!-- <label for="company_id">company_id</label>--->
186
+ <input type="hidden" id="company_id" name="company_id" class="form-control" required>
187
+ </div>
188
+ <div class="row">
189
+ <div class="col-12">
190
+ <div class="card">
191
+ <div id="message-container">
192
+ <div class="card-body table-container">
193
+ <table id="knowledgeTable" class="table table-bordered table-striped">
194
+ <thead>
195
+ <tr>
196
+
197
+ <th>Sno</th>
198
+ <th>Document Name</th>
199
+ <th>Document Description</th>
200
+ <th>Document Version</th>
201
+ <th>VectorDB Flag</th>
202
+ <th>View</th>
203
+ <th>Edit</th>
204
+ <th>Delete</th>
205
+ <!-- <th style="display:none;">Company ID</th> -->
206
+ </tr>
207
+ </thead>
208
+ <tbody>
209
+
210
+ </tbody>
211
+ </table>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </section>
218
+ </div>
219
+
220
+ <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel"
221
+ aria-hidden="true">
222
+ <div class="modal-dialog" role="document">
223
+ <div class="modal-content">
224
+ <div class="modal-header">
225
+ <h5 class="modal-title" id="addModalLabel">Add Document Details</h5>
226
+ <button type="button" class="btn-close" data-dismiss="modal" >
227
+ <span aria-hidden="true" data-backdrop="static" data-keyboard="false"></span>
228
+ </button>
229
+ </div>
230
+ <div class="modal-body">
231
+ <div class="form-group">
232
+ <!-- <label for="company_id">company_id</label>--->
233
+ <input type="hidden" id="company_id" name="company_id" class="form-control" required>
234
+ </div>
235
+ <form id="documentForm">
236
+ <div class="form-group">
237
+ <label for="uploadFile">Upload File<span class="text-danger">*</span></label>
238
+ <span id="file-name"></span>
239
+ <input type="hidden" id="file_name" name="file_name" class="form-control" required>
240
+ <input type="file" class="form-control-file" id="uploadFile" name="uploadFile" required
241
+ accept=".pdf,.doc,.docx">
242
+ <small class="form-text text-muted">Accepted formats: .pdf, .doc, .docx</small>
243
+ </div>
244
+ <div class="form-group">
245
+ <label for="documentName">Document Name<span class="text-danger">*</span></label>
246
+ <input type="text" class="form-control" id="documentName" name="documentName" required>
247
+ </div>
248
+ <div class="form-group">
249
+ <label for="documentDescription">Document Description<span
250
+ class="text-danger">*</span></label>
251
+ <textarea class="form-control" id="documentDescription" name="documentDescription"
252
+ rows="3" required></textarea>
253
+ </div>
254
+ <div class="form-group">
255
+ <label for="department">Department<span class="text-danger">*</span></label>
256
+ <input type="text" class="form-control" id="department" name="department" required>
257
+ </div>
258
+ <div class="form-group">
259
+ <label for="version">Version<span class="text-danger">*</span></label>
260
+ <input type="text" class="form-control" id="version" name="version" required>
261
+ </div>
262
+ <div class="form-group">
263
+ <label for="lastUpdated">Last Updated<span class="text-danger">*</span></label>
264
+ <input type="text" class="form-control" id="lastUpdated" name="lastUpdated" required>
265
+ </div>
266
+ </form>
267
+ </div>
268
+ <div class="modal-footer">
269
+ <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
270
+ <button type="button" id="saveupdate" class="btn btn-primary" style="display: none;">Update</button>
271
+ <button type="button" id="save" onclick="save_file()" class="btn btn-primary">Save</button>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+
278
+ {%include 'footer.html'%}
279
+
280
+ <!-- JavaScript to handle modal display -->
281
+ <script>
282
+ document.addEventListener("DOMContentLoaded", function () {
283
+ now = new Date().toISOString().replace('T', ' ').substr(0, 19);
284
+ document.getElementById('lastUpdated').value = now;
285
+ const inputs = document.querySelectorAll("#documentForm input, textarea");
286
+
287
+ inputs.forEach((input, index) => {
288
+ input.addEventListener("keydown", function (event) {
289
+ if (event.key === "Enter") {
290
+ event.preventDefault();
291
+ moveToNextInput(inputs, index);
292
+ }
293
+ });
294
+ });
295
+
296
+ function moveToNextInput(inputs, currentIndex) {
297
+ const nextInput = inputs[currentIndex + 1];
298
+ if (nextInput) {
299
+ nextInput.focus();
300
+ } else {
301
+ // Optionally, submit the form or trigger the save button
302
+ document.getElementById("save").focus();
303
+ }
304
+ }
305
+ // $(document).on('click', '.btn-view', function () {
306
+ // const companyId = $(this).data('id');
307
+ // console.log("company_id in view",companyId);
308
+ // viewCompany(companyId);
309
+ // });
310
+
311
+ // // Edit company details
312
+ // $(document).on('click', '.btn-edit', function () {
313
+ // const companyId = $(this).data('id');
314
+ // console.log("company_id in edit",companyId);
315
+ // editCompany(companyId);
316
+ // });
317
+
318
+ // // Delete company
319
+ // $(document).on('click', '.btn-delete', function () {
320
+ // const kid = $(this).data('id'); // Get the company ID from the da
321
+ // console.log("company_id in delete",kid);
322
+ // if (confirm("Are you sure you want to delete this company?")) {
323
+ // deleteCompany(kid); // Call the delete function with the company ID
324
+ // }
325
+ // });
326
+ fetchCompanies();
327
+
328
+ const companySelect = document.getElementById('company');
329
+ const documentForm = document.getElementById('documentForm');
330
+ const table = $('#knowledgeTable').DataTable(); // Initialize DataTable at the start
331
+
332
+ companySelect.addEventListener('change', async function () {
333
+ $("#message-container").empty();
334
+ const selectedCompanyName = companySelect.options[companySelect.selectedIndex].text;
335
+ console.log(`Selected Company Name: ${selectedCompanyName}`);
336
+
337
+ if (selectedCompanyName !== "Select") {
338
+ try {
339
+ const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompanyName)}`);
340
+ if (!response.ok) {
341
+ contentSection.style.display = 'none';
342
+ displayErrorMessage("Document details do not exist for this company. Please fill in the details.");
343
+ throw new Error('Network response was not ok');
344
+ }
345
+ const data = await response.json();
346
+ console.log('data returned', data);
347
+ const companyId = data.company_id;
348
+ document.getElementById('company_id').value = companyId;
349
+
350
+ if (companyId) {
351
+ try {
352
+ const Response = await fetch(`/api/document_upload?company_id=${companyId}&company_name=${selectedCompanyName}`);
353
+ const connectorsResponse = await Response.json();
354
+ console.log("knowledge data table after connecting to table", connectorsResponse);
355
+ table.clear();
356
+ if (!Array.isArray(connectorsResponse) || connectorsResponse.length === 0) {
357
+ //displayEmptyTable();
358
+
359
+ displayErrorMessage("Document details do not exist for this company. Please fill in the details.");
360
+ contentSection.style.display = 'none';
361
+ } else {
362
+
363
+ connectorsResponse.forEach((company, index) => {
364
+ table.row.add([
365
+
366
+ index + 1,
367
+ company.document_name,
368
+ company.document_desc,
369
+ company.version,
370
+ company.vectorDBflag,
371
+ `<a href='#' class='btn btn-info btn-sm'data-kid-id='${company.row_id}' data-action="view" onclick='viewCompany(this)''><i class='fas fa-eye'></i></a>`,
372
+ `<a href='#' class='btn btn-warning btn-sm'data-kid-id='${company.row_id}' data-action="edit" onclick='editCompany(this)'><i class='fas fa-edit'></i></a>`,
373
+ //`<a href='#' class='btn btn-danger btn-sm' onclick='deleteCompany(${company.company_id})'><i class='fas fa-trash'></i></a>`,
374
+ `<a href='#' class='btn btn-danger btn-sm' data-kid-id='${company.row_id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`,
375
+ company.row_id
376
+ // "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye'></i></a>",
377
+ // "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>",
378
+ // "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></button>"
379
+ ]).draw(false);
380
+ });
381
+ contentSection.style.display = 'block';
382
+ }
383
+ } catch (error) {
384
+ console.error('Error fetching company documents:', error);
385
+ //displayEmptyTable();
386
+
387
+ displayErrorMessage("Document details1 do not exist for this company. Please fill in the details.");
388
+ contentSection.style.display = 'none';
389
+ }
390
+ } else {
391
+ // displayEmptyTable();
392
+
393
+ displayErrorMessage("Document details2 for knowledge do not exist for this company. Please fill in the details.");
394
+ }
395
+ } catch (error) {
396
+ console.error('No details for this company ID or data documents:', error);
397
+ // displayEmptyTable();
398
+
399
+ displayErrorMessage("Document details3 do not exist for this company. Please fill in the details.");
400
+ contentSection.style.display = 'none';
401
+ }
402
+ } else {
403
+ table.clear().draw();
404
+ document.getElementById('contentSection').style.display = 'none';
405
+ clearFormFields();
406
+ }
407
+ });
408
+
409
+ function displayErrorMessage(message) {
410
+ const messageContainer = document.getElementById('message-container');
411
+ if (messageContainer) {
412
+ messageContainer.innerHTML = `<div class='alert alert-danger'>${message}</div>`;
413
+ }
414
+ }
415
+
416
+ });
417
+
418
+ function clearFormFields() {
419
+ document.getElementById('file-name').textContent=""
420
+ document.getElementById('uploadFile').value = "";
421
+ document.getElementById('documentName').value = "";
422
+ document.getElementById('documentDescription').value = "";
423
+ document.getElementById('department').value = "";
424
+ document.getElementById('version').value = "";
425
+ //document.getElementById('lastUpdated').value = "";
426
+ }
427
+
428
+
429
+ $(document).ready(function () {
430
+ // Show modal function
431
+ $('#add').on('click', function () {
432
+ const modalTitle = document.getElementById('addModalLabel');
433
+ modalTitle.textContent = 'Add Document Details';
434
+ $('#uploadFile').show();
435
+ $('#saveupdate').hide();
436
+ clearFormFields();
437
+ $('#message-container').empty(); // Clear the message container
438
+ $('#addModal').modal('show');
439
+ });
440
+
441
+
442
+ $('.modal-footer .btn-secondary, .modal-header .btn-close').on('click', function () {
443
+ $('#addModal').modal('hide');
444
+ });
445
+ $('#KnowledgeTable').DataTable({
446
+ autoWidth: false
447
+ });
448
+
449
+ });
450
+ function viewCompany(button) {
451
+ var companyId = $(button).data('kid-id');
452
+ const modalTitle = document.getElementById('addModalLabel');
453
+ modalTitle.textContent = 'View Document Details';
454
+ $.getJSON(`/api/getknowledgebase/${companyId}`, function (company) {
455
+ $('#uploadFile').hide();
456
+ $('#file-name').text(company.file_path).attr('readonly','readonly');
457
+ $('#documentName').val(company.document_name).attr('readonly', 'readonly');
458
+ $('#documentDescription').val(company.document_desc).attr('readonly', 'readonly');
459
+ $('#department').val(company.department).attr('readonly', 'readonly');
460
+ $('#version').val(company.version).attr('readonly', 'readonly');
461
+ //$('#lastUpdated').val(company.last_updated).attr('readonly', 'readonly');
462
+ var lastUpdated = company.last_updated;
463
+ $('#lastUpdated').val(lastUpdated).attr('readonly', 'readonly');
464
+ $('#save').hide();// Disable the "Save" button when the modal opens
465
+ $('#addModal').modal('show');
466
+ }).fail(function () {
467
+ alert("Error retrieving company details.");
468
+ });
469
+ }
470
+
471
+ // Edit company details
472
+ function editCompany(button) {
473
+ var companyId = $(button).data('kid-id');
474
+ const modalTitle = document.getElementById('addModalLabel');
475
+ modalTitle.textContent = 'Edit Document Details';
476
+ // Fetch company details by ID
477
+ $.getJSON(`/api/getknowledgebase/${companyId}`, function (company) {
478
+ $('#uploadFile').hide();
479
+ $('#file-name').text(company.file_path).attr('readonly','readonly');
480
+ $('#documentName').removeAttr('readonly');
481
+ $('#documentDescription').removeAttr('readonly');
482
+ $('#department').removeAttr('readonly');
483
+ $('#version').removeAttr('readonly');
484
+ $('#lastUpdated').removeAttr('readonly');
485
+ // $('#vectorDBflag').removeAttr('readonly');
486
+ $('#company_id').removeAttr('readonly');
487
+ $('#save').hide();
488
+ $('#saveupdate').show();
489
+ // Populate the form with the company's details
490
+ $('#uploadFile').hide();
491
+ $('#file_name').val(company.file_path);
492
+ $('#file-name').val(company.file_path);
493
+ $('#documentName').val(company.document_name);
494
+ $('#documentDescription').val(company.document_desc);
495
+ $('#department').val(company.department);
496
+ $('#version').val(company.version);
497
+ $('#lastUpdated').val(company.last_updated);
498
+ $('#company_id').val(company.company_id);
499
+ $('#addModal').modal('show');
500
+ $('saveupdate').show();
501
+ // Update the save button to save the edited company
502
+ $('#saveupdate').off('click').on('click', function () {
503
+
504
+ saveupdate(companyId); // Pass the company ID for updating
505
+ });
506
+ }).fail(function () {
507
+ alert("Error retrieving company details.");
508
+ });
509
+ }
510
+
511
+ // Delete company
512
+ function deleteCompany(button) {
513
+ var companyId = $(button).data('kid-id');
514
+ console.log("k_id deleted",companyId);
515
+ $.ajax({
516
+ type: "DELETE",
517
+ url: `/api/delknowledgebase/${companyId}`,
518
+ success: function () {
519
+ var table = $('#knowledgeTable').DataTable();
520
+ table.row($(button).closest('tr')).remove().draw();
521
+
522
+ alert("Company deleted successfully.");
523
+ fetchCompanies(); // Refresh the table
524
+ },
525
+ error: function (xhr) {
526
+ alert("Error deleting company: " + xhr.responseJSON.detail);
527
+ }
528
+ });
529
+ }
530
+ function saveupdate(companyId) {
531
+ console.log("k_id", companyId);
532
+
533
+ var fileInput = document.getElementById('uploadFile'); // Assuming an input element for file upload
534
+ // var filePath = $('#file-name').text();
535
+ // console.log("k_id path", filePath);
536
+ var formData = new FormData();
537
+ formData.append('company_id', $('#company_id').val());
538
+ formData.append('file_name', $('#file_name').val());
539
+ formData.append('uploadFile', fileInput.files[0]); // Assuming a file input for upload
540
+ formData.append('documentName', $('#documentName').val());
541
+ formData.append('documentDescription', $('#documentDescription').val());
542
+ formData.append('department', $('#department').val());
543
+ formData.append('version', $('#version').val());
544
+ formData.append('vectorDBFlag', "NO");
545
+ formData.append('lastUpdated', $('#lastUpdated').val());
546
+
547
+ $.ajax({
548
+ url: `/api/putknowledgebase/${companyId}`,
549
+ type: 'PUT',
550
+ data: formData,
551
+ processData: false, // Required for FormData
552
+ contentType: false, // Required for FormData
553
+ success: function (response) {
554
+ alert('Knowledgebase details updated successfully.');
555
+ $('#addModal').modal('hide'); // Close the modal after saving
556
+ fetchCompanies();
557
+ },
558
+ error: function () {
559
+ alert('Failed to update company details.');
560
+ }
561
+ });
562
+ }
563
+
564
+ function save_file() {
565
+ const form = document.getElementById('documentForm');
566
+
567
+ // Check if the form is valid
568
+ if (!form.checkValidity()) {
569
+ // If the form is invalid, show validation messages and stop the submission
570
+ form.reportValidity();
571
+ return;
572
+ }
573
+ const uploadFile = document.getElementById("uploadFile").files[0];
574
+ const documentName = document.getElementById("documentName").value;
575
+ const documentDescription = document.getElementById("documentDescription").value;
576
+ const department = document.getElementById("department").value;
577
+ const version = document.getElementById("version").value;
578
+ const lastUpdated = document.getElementById("lastUpdated").value;
579
+ const company_id = document.getElementById("company_id").value;
580
+
581
+ //const formData = new FormData();
582
+ var formData = new FormData($('#documentForm')[0]);
583
+ const vectorDBFlag = "NO"; // Example value
584
+ const view = "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye'></i></a>";
585
+ const edit = "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>";
586
+ const dele= "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></a>";
587
+
588
+
589
+ formData.append("uploadFile", uploadFile);
590
+ formData.append("documentName", documentName);
591
+ formData.append("documentDescription", documentDescription);
592
+ formData.append("department", department);
593
+ formData.append("version", version);
594
+ formData.append("lastUpdated", lastUpdated);
595
+ formData.append("vectorDBflag", vectorDBFlag);
596
+ formData.append("company_id", company_id);
597
+
598
+ fetch('/upload_document', {
599
+ method: 'POST',
600
+ body: formData
601
+ })
602
+ .then(response => {
603
+ if (!response.ok) {
604
+ throw new Error('Network response was not ok');
605
+ }
606
+ return response.text();
607
+ })
608
+ .then(data => {
609
+ var table = $('#knowledgeTable').DataTable();
610
+ var rowCount = table.rows().count();
611
+ table.row.add([
612
+ rowCount + 1,
613
+ documentName,
614
+ documentDescription,
615
+ version,
616
+ vectorDBFlag,
617
+ view,
618
+ edit,
619
+ dele
620
+ ]).draw(false);
621
+
622
+ const messageContainer = document.getElementById('message-container');
623
+ if(messageContainer)
624
+ messageContainer.innerHTML = `
625
+ <div class='alert alert-success'>
626
+ Data saved successfully
627
+ <button class='close' onclick='dismissMessage()'>OK</button>
628
+ </div>`;
629
+ // alert('Document saved successfully');
630
+ $('#addModal').modal('hide');
631
+ document.getElementById('contentSection').style.display = 'block'; // Show the table section
632
+ })
633
+ .catch(error => console.error('Error:', error));
634
+ }
635
+ function dismissMessage() {
636
+ const messageContainer = document.getElementById('message-container');
637
+ if (messageContainer) {
638
+ messageContainer.innerHTML = '';
639
+ }
640
+ }
641
+ async function fetchCompanies() {
642
+ try {
643
+ const response = await fetch('/api/companies');
644
+ if (!response.ok) {
645
+ throw new Error('Network response was not ok');
646
+ }
647
+ const data = await response.json();
648
+ displayCompanies(data.companies);
649
+ } catch (error) {
650
+ console.error('Error fetching companies:', error);
651
+ }
652
+ }
653
+
654
+ function displayCompanies(companies) {
655
+ const companySelect = document.getElementById('company');
656
+ companySelect.innerHTML = '<option value="" selected>Select</option>'; // Reset the dropdown
657
+ companies.forEach(company => {
658
+ const option = document.createElement('option');
659
+ option.value = company.name;
660
+ option.textContent = company.name;
661
+ companySelect.appendChild(option);
662
+ });
663
+ }
664
+ </script>
665
+ </body>
666
+
667
+ </html>
templates/prompt_template.html ADDED
@@ -0,0 +1,459 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <title>Prompt Template</title>
6
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
7
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
8
+ <!-- Include AdminLTE CSS -->
9
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css">
10
+ <!-- Include DataTables CSS -->
11
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
12
+ <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
13
+ <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
15
+ <style>
16
+ .header-row {
17
+ display: flex;
18
+ justify-content: space-between;
19
+ align-items: center;
20
+ }
21
+ .card {
22
+ padding: 0;
23
+ margin-top: -15px;
24
+ margin-left: -40px;
25
+ }
26
+ .table-container {
27
+ width: 100%;
28
+ overflow-x: auto;
29
+
30
+ }
31
+
32
+ .wrapper {
33
+ display: flex;
34
+ flex-direction: column;
35
+ height: 100vh;
36
+ }
37
+
38
+ .content-wrapper {
39
+ flex: 1;
40
+ overflow-y: auto;
41
+ }
42
+
43
+ .content-header {
44
+ padding: 5px;
45
+
46
+ }
47
+
48
+ div.dataTables_wrapper div.dataTables_length select{
49
+ width: 60px;
50
+ display: inline-block;
51
+ }
52
+
53
+ th,
54
+ td {
55
+ white-space: nowrap;
56
+ }
57
+
58
+ th:nth-child(1),
59
+ td:nth-child(1) {
60
+ /* Sno column */
61
+ width: 1%;
62
+ }
63
+
64
+ th:nth-child(2),
65
+ td:nth-child(2) {
66
+ /* API Name column */
67
+ width: 20%;
68
+ }
69
+
70
+ th:nth-child(3),
71
+ td:nth-child(3) {
72
+ /* API Endpoint column */
73
+ width: 45%;
74
+ }
75
+
76
+ th:nth-child(4),
77
+ td:nth-child(4) {
78
+ /* view column*/
79
+ width: 5%;
80
+ }
81
+ th:nth-child(5),
82
+ td:nth-child(5) {
83
+ /* view column*/
84
+ width: 5%;
85
+ }
86
+ th:nth-child(6),
87
+ td:nth-child(6) {
88
+ /* view column*/
89
+ width: 5%;
90
+ }
91
+
92
+ .reduced-width {
93
+ width: 25%;
94
+ }
95
+
96
+ .viewButton {
97
+ size: 2px;
98
+ }
99
+ div.dataTables_wrapper div.dataTables_length select{
100
+ width: 60px;
101
+ display: inline-block;
102
+ }
103
+ </style>
104
+ </head>
105
+
106
+ <body>
107
+ {% include 'sidepane.html' %}
108
+
109
+ <div class="wrapper">
110
+ <div class="main-header" style="border-bottom: none;">
111
+ <!-- Content Header (Page header) -->
112
+ <div class="content-header">
113
+ <div class="container-fluid">
114
+ <div class="container mt-2">
115
+ <div class="form-group left-align">
116
+ <label for="company" class="mr-1" style="margin-left:-60px;margin-top:-11px;">Company Name <span class="text-danger">*</span></label>
117
+ <select type="text" id="company" name="company" class="form-control "style="width: 20%;margin-left:-60px;" required>
118
+ <option value="" selected>Select</option>
119
+ </select>
120
+ <div class="col-12 d-flex justify-content-end mb-2">
121
+ <button class="btn btn-primary" style="margin-top:-40px;margin-right: -25px;position: fixed;" id="add">Add</button>
122
+
123
+ <!-- <button class="btn btn-primary" style="margin-top: 20px;" id="add">Add</button> -->
124
+ </div>
125
+ </div>
126
+ <div class="row">
127
+ <div id="message-container" style="margin-left: 150px;width:auto;"></div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ <section class="content" id="contentSection" style="display: none;">
133
+ <div class="container-fluid">
134
+ <div class="form-group">
135
+ <!-- <label for="company_id">company_id</label>--->
136
+ <input type="hidden" id="company_id" name="company_id" class="form-control" required>
137
+ </div>
138
+ </div>
139
+ <!-- Main content-->
140
+ <section class="content">
141
+ <div class="container-fluid">
142
+ <div class="row">
143
+ <div class="col-12">
144
+ <div class="card">
145
+ <div class="card-body table-container">
146
+ <table id="promptTable" class="table table-bordered table-striped">
147
+ <thead>
148
+ <tr>
149
+ <th>Sno</th>
150
+ <th>Datasource</th>
151
+ <th>Sample Prompt</th>
152
+ <th>View</th>
153
+ <th>Edit</th>
154
+ <th>Delete</th>
155
+ </tr>
156
+ </thead>
157
+ <tbody>
158
+ <!-- <tr>
159
+ <td>1</td>
160
+ <td>API</td>
161
+ <td>What are the details of ASN24080200002?</td>
162
+ <td><button class="btn btn-primary viewButton">View</button></td>
163
+ </tr>
164
+ <tr>
165
+ <td>2</td>
166
+ <td>API</td>
167
+ <td>What is the expected receiving date of ASN24080200002</td>
168
+ <td><button class="btn btn-primary viewButton">View</button></td>
169
+ </tr>
170
+ <tr>
171
+ <td>3</td>
172
+ <td>Document</td>
173
+ <td>Explain Pre-Receiving Yard Management</td>
174
+ <td><button class="btn btn-primary viewButton">View</button></td>
175
+ </tr>
176
+ <tr>
177
+ <td>4</td>
178
+ <td>Document</td>
179
+ <td>Can you explain the process of unloading a vehicle in more detail?</td>
180
+ <td><button class="btn btn-primary viewButton">View</button></td>
181
+ </tr>
182
+ <tr>
183
+ <td>5</td>
184
+ <td>Visual Analysis</td>
185
+ <td>I want to analyze item name and quantity in a bar chart in warehouse Allcargo Logistics</td>
186
+ <td><button class="btn btn-primary viewButton">View</button></td>
187
+ </tr>
188
+ <tr>
189
+ <td>6</td>
190
+ <td>Visual Analysis</td>
191
+ <td>Can you generate a pie chart with item names and quantities in warehouse Allcargo Logistics</td>
192
+ <td><button class="btn btn-primary viewButton">View</button></td>
193
+ </tr>
194
+ <tr>
195
+ <td>7</td>
196
+ <td>Database</td>
197
+ <td>What are the active warehouses available</td>
198
+ <td><button class="btn btn-primary viewButton">View</button></td>
199
+ </tr>
200
+ <tr>
201
+ <td>8</td>
202
+ <td>Database</td>
203
+ <td>What are the warehouses available</td>
204
+ <td><button class="btn btn-primary viewButton">View</button></td>
205
+ </tr>
206
+ -->
207
+ </tbody>
208
+ </table>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </section>
215
+ </section>
216
+ </div>
217
+
218
+ </div>
219
+
220
+
221
+
222
+ <!-- Modal -->
223
+ <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel"
224
+ aria-hidden="true">
225
+ <div class="modal-dialog" role="document">
226
+ <div class="modal-content">
227
+ <div class="modal-header">
228
+ <h5 class="modal-title" id="addModalLabel">Add Prompt</h5>
229
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
230
+ <span aria-hidden="true" data-backdrop="static" data-keyboard="false">&times;</span>
231
+ </div>
232
+ <div class="modal-body">
233
+ <div class="form-group">
234
+ <!-- <label for="company_id">company_id</label>--->
235
+ <input type="hidden" id="company_id" name="company_id" class="form-control" required>
236
+ </div>
237
+ <form id="addPromptForm">
238
+ <div class="form-group">
239
+ <label for="scenario">Scenario <span class="text-danger">*</span></label>
240
+ <input type="text" class="form-control" id="scenario" name="scenario" required>
241
+ </div>
242
+ <div class="form-group">
243
+ <label for="prompt">Sample Prompt <span class="text-danger">*</span></label>
244
+ <input type="text" class="form-control" id="prompt" name="sampleprompt" required>
245
+ </div>
246
+ <div class="form-group">
247
+ <label for="comments">Comments <span class="text-danger">*</span></label>
248
+ <input type="text" class="form-control" id="comments" name="comments" required>
249
+ </div>
250
+ </form>
251
+ </div>
252
+ <div class="modal-footer">
253
+ <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> -->
254
+ <button type="button" id="save" onclick="save_file()" class="btn btn-primary">Save</button>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+
260
+ {%include 'footer.html'%}
261
+ <!-- Include DataTables JS and your custom script -->
262
+ <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
263
+ <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
264
+ <script>
265
+ $(document).ready(function () {
266
+ $('#add').on('click', function () {
267
+ clearFormFields();
268
+ $('#message-container').empty(); // Clear the message container
269
+ $('#addModal').modal('show');
270
+ });
271
+ $('.modal-footer .btn-secondary, .modal-header .close').on('click', function () {
272
+ $('#addModal').modal('hide');
273
+ });
274
+
275
+ });
276
+ document.addEventListener("DOMContentLoaded", function () {
277
+
278
+ // clearFormFields();
279
+ fetchCompanies();
280
+
281
+ const companySelect = document.getElementById('company');
282
+ const addPromptForm = document.getElementById('addPromptForm');
283
+ const table = $('#promptTable').DataTable();
284
+ // Initialize DataTable at the start
285
+ companySelect.addEventListener('change', async function () {
286
+ $("#message-container").empty();
287
+ const selectedCompanyName = companySelect.options[companySelect.selectedIndex].text;
288
+ console.log(`Selected Company Name: ${selectedCompanyName}`);
289
+
290
+ if (selectedCompanyName !== "Select") {
291
+
292
+ try {
293
+ const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompanyName)}`);
294
+ if (!response.ok) {
295
+ contentSection.style.display = 'none';
296
+ ("company id does not exist for name does not exist. Please fill in the details.");
297
+ const messageContainer = document.getElementById('message-container');
298
+ if (messageContainer) {
299
+ messageContainer.innerHTML = "<div class='alert alert-danger'>Document details do not exist for this company. Please fill in the details.</div>";
300
+ }
301
+ throw new Error('Network response was not ok');
302
+ }
303
+ const data = await response.json();
304
+ console.log('data returned', data);
305
+ console.log(`Company ID: ${data.company_id}`);
306
+ const companyId = data.company_id;
307
+ document.getElementById('company_id').value = companyId;
308
+
309
+ if (companyId) {
310
+ try {
311
+ const Response = await fetch(`/api/get_prompt_templates?company_id=${companyId}&company_name=${selectedCompanyName}`);
312
+ const connectorsResponse = await Response.json();
313
+ console.log("prompt template data table after connecting to table", connectorsResponse);
314
+ table.clear();
315
+ if (!Array.isArray(connectorsResponse)) {
316
+ throw new TypeError('Expected an array of companies');
317
+
318
+ displayErrorMessage("template details do not exist for this company. Please fill in the details.");
319
+ contentSection.style.display = 'none';
320
+ } else {
321
+
322
+ connectorsResponse.forEach((company, index) => {
323
+ table.row.add([
324
+ index + 1,
325
+ company.scenario,
326
+ company.prompt,
327
+ "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye' fa-eye'></i></a>",
328
+ "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>",
329
+ "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></button>"
330
+ ]).draw(false);
331
+ });
332
+ contentSection.style.display = 'block';
333
+ }
334
+
335
+ } catch (error) {
336
+ console.error('Error fetching company documents:', error);
337
+ //displayEmptyTable();
338
+
339
+ displayErrorMessage("Prompt template do not exist for this company. Please fill in the details by clicking add button.");
340
+ contentSection.style.display = 'none';
341
+ }
342
+ }
343
+ else {
344
+ // displayEmptyTable();
345
+
346
+ displayErrorMessage("Company id do not exist for this company. Please fill in the details by clicking add button.");
347
+ }
348
+ } catch (error) {
349
+ console.error('No details for this company ID or data documents:', error);
350
+ // displayEmptyTable();
351
+
352
+ displayErrorMessage("Document details3 do not exist for this company. Please fill in the details.");
353
+ contentSection.style.display = 'none';
354
+ }
355
+ } else {
356
+
357
+ table.clear().draw();
358
+ document.getElementById('contentSection').style.display = 'none';
359
+ // Optionally, you might want to clear the form fields as well
360
+ clearFormFields();
361
+
362
+ }
363
+ });
364
+ function displayErrorMessage(message) {
365
+ const messageContainer = document.getElementById('message-container');
366
+ if (messageContainer) {
367
+ messageContainer.innerHTML = `<div class='alert alert-danger'>${message}</div>`;
368
+ }
369
+ }
370
+
371
+ });
372
+ function save_file() {
373
+ const form = document.getElementById('addPromptForm');
374
+
375
+ // Check if the form is valid
376
+ if (!form.checkValidity()) {
377
+ // If the form is invalid, show validation messages and stop the submission
378
+ form.reportValidity();
379
+ return;
380
+ }
381
+ const company_id = $('#company_id').val();
382
+ const scenario = $('#scenario').val();
383
+ const prompt = $('#prompt').val();
384
+ const comments = $('#comments').val();
385
+ const view = "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye'></i></a>";
386
+ const edit = "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>";
387
+ const dele = "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></a>";
388
+
389
+ var formData = new FormData($('#addPromptForm')[0]);
390
+
391
+ formData.append("company_id", company_id),
392
+ formData.append("scenario", scenario),
393
+ formData.append("prompt", prompt),
394
+ formData.append("comments", comments),
395
+
396
+ //const formData = new FormData();
397
+ fetch('/api/save_prompt_details', {
398
+ method: 'POST',
399
+ body: formData
400
+ })
401
+ .then(response => {
402
+ if (!response.ok) {
403
+ throw new Error('Network response was not ok');
404
+ }
405
+ return response.text();
406
+ })
407
+ .then(data => {
408
+ var table = $('#promptTable').DataTable();
409
+ var rowCount = table.rows().count();
410
+ table.row.add([
411
+ rowCount + 1,
412
+ scenario,
413
+ prompt,
414
+ view,
415
+ edit,
416
+ dele
417
+ ]).draw(false);
418
+
419
+ alert('Document saved successfully');
420
+ $('#addModal').modal('hide');
421
+ document.getElementById('contentSection').style.display = 'block'; // Show the table section
422
+ })
423
+ .catch(error => console.error('Error:', error));
424
+ }
425
+ async function fetchCompanies() {
426
+ try {
427
+ const response = await fetch('/api/companies');
428
+ if (!response.ok) {
429
+ throw new Error('Network response was not ok');
430
+ }
431
+ const data = await response.json();
432
+ displayCompanies(data.companies);
433
+ } catch (error) {
434
+ console.error('Error fetching companies:', error);
435
+ }
436
+ }
437
+
438
+ function displayCompanies(companies) {
439
+ const companySelect = document.getElementById('company');
440
+ companySelect.innerHTML = '<option value="" selected>Select</option>'; // Reset the dropdown
441
+ companies.forEach(company => {
442
+ const option = document.createElement('option');
443
+ option.value = company.name;
444
+ option.textContent = company.name;
445
+ companySelect.appendChild(option);
446
+ });
447
+ }
448
+ function clearFormFields() {
449
+ document.getElementById('scenario').value = "";
450
+ document.getElementById('prompt').value = "";
451
+ document.getElementById('comments').value = "";
452
+
453
+ }
454
+
455
+
456
+ </script>
457
+ </body>
458
+
459
+ </html>