Hugging Face's logo

Spaces:
Rsnarsna
/
Redmind_GPT_API
Sleeping

App Files Community
1
Redmind commited on
Commit
b4d510e
·
verified ·
1 Parent(s): 54a3f35

Update templates/API_connectors.html

Browse files
Files changed (1) hide show
  1. templates/API_connectors.html +636 -456
templates/API_connectors.html CHANGED
@@ -1,457 +1,637 @@
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
- view,
411
- edit,
412
- dele
413
- ]).draw(false);
414
-
415
- alert('Document saved successfully');
416
- $('#addModal').modal('hide');
417
- document.getElementById('contentSection').style.display = 'block'; // Show the table section
418
- })
419
- .catch(error => console.error('Error:', error));
420
- }
421
- async function fetchCompanies() {
422
- try {
423
- const response = await fetch('/api/companies');
424
- if (!response.ok) {
425
- throw new Error('Network response was not ok');
426
- }
427
- const data = await response.json();
428
- displayCompanies(data.companies);
429
- } catch (error) {
430
- console.error('Error fetching companies:', error);
431
- }
432
- }
433
-
434
- function displayCompanies(companies) {
435
- const companySelect = document.getElementById('company');
436
- companySelect.innerHTML = '<option value="" selected>Select</option>'; // Reset the dropdown
437
- companies.forEach(company => {
438
- const option = document.createElement('option');
439
- option.value = company.name;
440
- option.textContent = company.name;
441
- companySelect.appendChild(option);
442
- });
443
- }
444
- function clearFormFields() {
445
- document.getElementById('APIName').value = "";
446
- document.getElementById('APIEndpoint').value = "";
447
- document.getElementById('Auth_Bearer').value = "";
448
- document.getElementById('Inputjson').value = "";
449
- document.getElementById('OutputJson').value = "";
450
- document.getElementById('Description').value = "";
451
- }
452
-
453
-
454
- </script>
455
- </body>
456
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
457
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>API Connectors</title>
5
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
6
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
7
+ <!-- Include AdminLTE CSS -->
8
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css">
9
+ <!-- Include DataTables CSS -->
10
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
11
+ <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
12
+ <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
13
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
14
+ <style>
15
+ .form-group {
16
+ margin-top: -10px;
17
+ }
18
+ .card {
19
+ padding: 0;
20
+ margin-top: -15px;
21
+ margin-left: -40px;
22
+ }
23
+ .header-row {
24
+ display: flex;
25
+ justify-content: space-between;
26
+ align-items: center;
27
+ }
28
+
29
+
30
+ .table-container {
31
+ width: 100%;
32
+ overflow-x: auto;
33
+ }
34
+
35
+ .wrapper {
36
+ display: flex;
37
+ flex-direction: column;
38
+ height: 100vh;
39
+ }
40
+
41
+ .content-wrapper {
42
+ flex: 1;
43
+ overflow-y: auto;
44
+ }
45
+
46
+ .content-header {
47
+ padding: 5px;
48
+ }
49
+
50
+ th,
51
+ td {
52
+ white-space: nowrap;
53
+ }
54
+
55
+ th:nth-child(1),
56
+ td:nth-child(1) {
57
+ /* Sno column */
58
+ width: 5%;
59
+ }
60
+ div.dataTables_wrapper div.dataTables_length select{
61
+ width: 60px;
62
+ display: inline-block;
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: 40%;
74
+ }
75
+
76
+ th:nth-child(4),
77
+ td:nth-child(4) {
78
+ /* Auth/Bearer token column */
79
+ width: 5%;
80
+ }
81
+
82
+ th:nth-child(5),
83
+ td:nth-child(5) {
84
+ /* View column */
85
+ width: 5%;
86
+ }
87
+ th:nth-child(6),
88
+ td:nth-child(6) {
89
+ /* View column */
90
+ width: 5%;
91
+ }
92
+
93
+ .reduced-width {
94
+ width: 25%;
95
+ }
96
+ div.dataTables_wrapper div.dataTables_length select{
97
+ width: 60px;
98
+ display: inline-block;
99
+ }
100
+
101
+ </style>
102
+ </head>
103
+
104
+ <body>
105
+ {% include 'sidepane.html' %}
106
+
107
+ <div class="wrapper">
108
+ <div class="main-header"style="border-bottom: none;">
109
+ <!-- Content Header (Page header) -->
110
+ <div class="content-header">
111
+ <div class="container-fluid">
112
+ <div class="container mt-2">
113
+ <div class="form-group left-align">
114
+ <label for="company" class="mr-1" style="margin-left:-60px;margin-top: 5px;">Company Name <span class="text-danger">*</span></label>
115
+ <select type="text" id="company" name="company" class="form-control"style="width: 20%;margin-left:-60px;" required>
116
+ <option value="" selected>Select</option>
117
+ </select>
118
+ <div class="col-12 d-flex justify-content-end mb-3">
119
+ <button class="btn btn-primary" style="margin-top: -40px;margin-right: -25px;position: fixed;" id="add">Add</button>
120
+ </div>
121
+ </div>
122
+ <div class="row">
123
+ <div id="message-container" style="margin-left: 200px; width:500px;"></div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ <section class="content" id="contentSection" style="display: none;">
129
+ <div class="container-fluid">
130
+ <div class="form-group">
131
+ <!-- <label for="company_id">company_id</label>--->
132
+ <input type="hidden" id="company_id" name="company_id" class="form-control" required>
133
+ </div>
134
+ </div>
135
+ <!-- Main content -->
136
+ <section class="content">
137
+ <div class="container-fluid">
138
+ <div class="row">
139
+ <div class="col-12">
140
+ <div class="card">
141
+ <div class="card-body table-container">
142
+ <table id="apiTable" class="table table-bordered table-striped">
143
+ <thead>
144
+ <tr>
145
+ <th>Sno</th>
146
+ <th>API Name</th>
147
+ <th>API Endpoint</th>
148
+ <th>View</th>
149
+ <th>Edit</th>
150
+ <th>Delete</th>
151
+ </tr>
152
+ </thead>
153
+ <tbody>
154
+ <!-- <tr>
155
+ <td>1</td>
156
+ <td>Warehouse</td>
157
+ <td>http://193.203.162.39:9090/nxt-wms/userWarehouse/fetchWarehouseForUserId
158
+ </td>
159
+ <td><button class="btn btn-primary viewButton">View</button></td>
160
+ </tr>
161
+ <tr>
162
+ <td>2</td>
163
+ <td>customer</td>
164
+ <td>http://193.203.162.39:9090/nxt-wms/userCustomer/fetchCustomerForUserId
165
+ </td>
166
+ <td><button class="btn btn-primary viewButton">View</button></td>
167
+ </tr>
168
+ <tr>
169
+ <td>3</td>
170
+ <td>SKU</td>
171
+ <td>http://193.203.162.39:9090/nxt-wms/sku/autoComplete?</td>
172
+ <td><button class="btn btn-primary viewButton">View</button></td>
173
+ </tr>
174
+ <tr>
175
+ <td>4</td>
176
+ <td>ASN</td>
177
+ <td>http://193.203.162.39:9090/nxt-wms/trnHeader</td>
178
+ <td><button class="btn btn-primary viewButton">View</button></td>
179
+ </tr> -->
180
+ </tbody>
181
+ </table>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </section>
188
+ </div>
189
+
190
+ </div>
191
+
192
+ <!-- Modal -->
193
+ <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel"
194
+ aria-hidden="true">
195
+ <div class="modal-dialog" style="margin-top: -10px;" role="document">
196
+ <div class="modal-content">
197
+ <div class="modal-header">
198
+ <h5 class="modal-title" id="addModalLabel">Add API Details</h5>
199
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
200
+ <span aria-hidden="true" data-backdrop="static" data-keyboard="false">&times;</span>
201
+ </button>
202
+ </div>
203
+ <div class="modal-body">
204
+ <div class="form-group">
205
+ <!-- <label for="company_id">company_id</label>--->
206
+ <input type="hidden" id="company_id" name="company_id" class="form-control" required>
207
+ </div>
208
+ <form id="documentForm">
209
+ <div class="form-group">
210
+ <label for="APIName">API Name <span class="text-danger">*</span></label>
211
+ <input type="text" class="form-control" id="APIName" name="APIName" required>
212
+ </div>
213
+ <div class="form-group">
214
+ <label for="APIEndpoint">API Endpoint <span class="text-danger">*</span></label>
215
+ <input type="text" class="form-control" id="APIEndpoint" name="APIEndpoint" required>
216
+ </div>
217
+ <div class="form-group">
218
+ <label for="Auth_Bearer">Auth/Bearer token <span class="text-danger">*</span></label>
219
+ <input type="text" class="form-control" id="Auth_Bearer" name="Auth_Bearer" required>
220
+ </div>
221
+ <div class="form-group">
222
+ <label for="Inputjson">Input parameter <span class="text-danger">*</span></label>
223
+ <input type="text" class="form-control" id="Inputjson" name="Inputjson" required>
224
+ </div>
225
+ <div class="form-group">
226
+ <label for="OutputJson">Output Json <span class="text-danger">*</span></label>
227
+ <input type="text" class="form-control" id="OutputJson" name="OutputJson" required>
228
+ </div>
229
+ <div class="form-group">
230
+ <label for="Description">Description <span class="text-danger">*</span></label>
231
+ <textarea class="form-control" id="Description" name="Description" rows="3"
232
+ required></textarea>
233
+ </div>
234
+ </form>
235
+ </div>
236
+ <div class="modal-footer">
237
+ <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> -->
238
+ <button type="button" id="saveupdate" class="btn btn-primary" style="display: none;">Update</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
+ const modalTitle = document.getElementById('addModalLabel');
255
+ modalTitle.textContent = 'Add API Details';
256
+ clearFormFields();
257
+ $('#save').show();
258
+ $('#saveupdate').hide();
259
+ $('#message-container').empty(); // Clear the message container
260
+ $('#addModal').modal('show');
261
+ });
262
+ $('.modal-footer .btn-secondary, .modal-header .close').on('click', function () {
263
+ $('#addModal').modal('hide');
264
+ });
265
+ // $('#apiTable').DataTable({
266
+ // autoWidth: false
267
+ // });
268
+
269
+ });
270
+ document.addEventListener("DOMContentLoaded", function () {
271
+
272
+ // clearFormFields();
273
+ fetchCompanies();
274
+
275
+ const companySelect = document.getElementById('company');
276
+ const documentForm = document.getElementById('documentForm');
277
+ const table = $('#apiTable').DataTable();
278
+ // Initialize DataTable at the start
279
+ companySelect.addEventListener('change', async function () {
280
+ $("#message-container").empty();
281
+ const selectedCompanyName = companySelect.options[companySelect.selectedIndex].text;
282
+ console.log(`Selected Company Name: ${selectedCompanyName}`);
283
+
284
+ if (selectedCompanyName !== "Select") {
285
+
286
+ try {
287
+ const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompanyName)}`);
288
+ if (!response.ok) {
289
+ contentSection.style.display = 'none';
290
+ ("Company id does not exist for this company name does not exist. Please fill in the details.");
291
+ const messageContainer = document.getElementById('message-container');
292
+ if (messageContainer) {
293
+ messageContainer.innerHTML = "<div class='alert alert-danger'>API details do not exist for this company. Please fill in the details.</div>";
294
+ }
295
+ throw new Error('Network response was not ok');
296
+ }
297
+ const data = await response.json();
298
+ console.log('data returned', data);
299
+ console.log(`Company ID: ${data.company_id}`);
300
+ const companyId = data.company_id;
301
+ document.getElementById('company_id').value = companyId;
302
+
303
+ if (companyId) {
304
+ try {
305
+ const Response = await fetch(`/api/get_api_connectors?company_id=${companyId}&company_name=${selectedCompanyName}`);
306
+ const connectorsResponse = await Response.json();
307
+ console.log("api connector data table after connecting to table", connectorsResponse);
308
+ table.clear();
309
+ if (!Array.isArray(connectorsResponse)) {
310
+ throw new TypeError('Expected an array of companies');
311
+
312
+ displayErrorMessage("Data do not exist for this company. Please fill in the details by clicking add button.");
313
+ contentSection.style.display = 'none';
314
+ } else {
315
+
316
+ connectorsResponse.forEach((company, index) => {
317
+ table.row.add([
318
+ index + 1,
319
+ company.APIName,
320
+ company.APIEndpoint,
321
+ `<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>`,
322
+ `<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>`,
323
+ `<a href='#' class='btn btn-danger btn-sm' data-kid-id='${company.row_id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`,
324
+ // "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye' fa-eye'></i></a>",
325
+ // "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>",
326
+ // "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></button>"
327
+ ]).draw(false);
328
+ });
329
+ contentSection.style.display = 'block';
330
+ }
331
+
332
+ } catch (error) {
333
+ console.error('Error fetching company documents:', error);
334
+ //displayEmptyTable();
335
+
336
+ displayErrorMessage("Data do not exist for this company. Please fill in the details by clicking add button.");
337
+ contentSection.style.display = 'none';
338
+ }
339
+ }
340
+ else {
341
+ // displayEmptyTable();
342
+
343
+ displayErrorMessage("Document details2 for knowledge do not exist for this company. Please fill in the details.");
344
+ }
345
+ } catch (error) {
346
+ console.error('No details for this company ID or data documents:', error);
347
+ // displayEmptyTable();
348
+
349
+ displayErrorMessage("Document details3 do not exist for this company. Please fill in the details.");
350
+ contentSection.style.display = 'none';
351
+ }
352
+ } else {
353
+
354
+ table.clear().draw();
355
+ document.getElementById('contentSection').style.display = 'none';
356
+ // Optionally, you might want to clear the form fields as well
357
+ clearFormFields();
358
+
359
+ }
360
+ });
361
+ function displayErrorMessage(message) {
362
+ const messageContainer = document.getElementById('message-container');
363
+ if (messageContainer) {
364
+ messageContainer.innerHTML = `<div class='alert alert-danger'>${message}</div>`;
365
+ }
366
+ }
367
+
368
+ });
369
+ function viewCompany(button) {
370
+ var companyId = $(button).data('kid-id');
371
+ const modalTitle = document.getElementById('addModalLabel');
372
+ modalTitle.textContent = 'View API Details';
373
+ $.getJSON(`/api/viewapiconnectors/${companyId}`, function (company) {
374
+
375
+ $('#APIName').val(company.api_name).attr('readonly','readonly');
376
+ $('#APIEndpoint').val(company.api_endpoint).attr('readonly', 'readonly');
377
+ $('#Auth_Bearer') .val(company.auth_token).attr('readonly', 'readonly') ;
378
+ $('#Inputjson').val(company.input_param).attr('readonly', 'readonly');
379
+ $('#OutputJson').val(company.output_json).attr('readonly', 'readonly');
380
+ $('#Description').val(company.description).attr('readonly', 'readonly');
381
+ $('#save').hide();
382
+ $('#saveupdate').hide();
383
+ $('#addModal').modal('show');
384
+ }).fail(function () {
385
+ alert("Error retrieving API details.");
386
+ });
387
+ }
388
+
389
+ // Edit knowledge base details
390
+ function editCompany(button) {
391
+ var companyId = $(button).data('kid-id');
392
+ const modalTitle = document.getElementById('addModalLabel');
393
+ modalTitle.textContent = 'Edit API Details';
394
+
395
+ // Fetch company details by ID
396
+ $.getJSON(`/api/viewapiconnectors/${companyId}`, function (company) {
397
+
398
+ $('#APIName').val(company.api_name);
399
+ $('#APIEndpoint').val(company.api_endpoint);
400
+ $('#Auth_Bearer') .val(company.auth_token);
401
+ $('#Inputjson').val(company.input_param);
402
+ $('#OutputJson').val(company.output_json);
403
+ $('#Description').val(company.description);
404
+
405
+ // Show/hide appropriate elements
406
+ $('#uploadFile').show(); // Hide the file upload field
407
+ $('#save').hide(); // Hide the default save button
408
+ $('#saveupdate').show(); // Show the update button
409
+
410
+ // Ensure fields are editable
411
+ $('#APIName').removeAttr('readonly');
412
+ $('#APIEndpoint').removeAttr('readonly');
413
+ $('#Auth_Bearer').removeAttr('readonly');
414
+ $('#Inputjson').removeAttr('readonly');
415
+ $('#OutputJson').removeAttr('readonly');
416
+ $('#Description').removeAttr('readonly');
417
+
418
+
419
+ // Show the modal
420
+ $('#addModal').modal('show');
421
+
422
+ // Set up the click event for the update button
423
+ $('#saveupdate').off('click').on('click', function () {
424
+ saveupdate(companyId); // Pass the company ID for updating
425
+ });
426
+ }).fail(function () {
427
+ alert("Error in retrieving API details.");
428
+ });
429
+ }
430
+
431
+
432
+ function saveupdate(companyId, filename) {
433
+ const formData = new FormData();
434
+
435
+ const company_id=document.getElementById("company_id").value;
436
+ formData.append("company_id", $('#company_id').val());
437
+ formData.append("APIName", $('#APIName').val());
438
+ formData.append("APIEndpoint", $('#APIEndpoint').val());
439
+ formData.append("Auth_Bearer", $('#Auth_Bearer').val());
440
+ formData.append("Inputjson", $('#Inputjson').val());
441
+ formData.append("OutputJson", $('#OutputJson').val());
442
+ formData.append("Description", $('#Description').val());
443
+ console.log("company_id to table refresh",company_id)
444
+ const messageContainer = document.getElementById('message-container');
445
+ $.ajax({
446
+ url: `/api/editapiconnectors/${companyId}`,
447
+ type: 'PUT',
448
+ data: formData,
449
+ processData: false, // Required for FormData
450
+ contentType: false, // Required for FormData
451
+ success: function (response) {
452
+ // alert('Knowledgebase details updated successfully.');
453
+
454
+ if(messageContainer)
455
+ messageContainer.innerHTML = `
456
+ <div class='alert alert-success'>
457
+ API Data Updated successfully
458
+ <button class='close' onclick='dismissMessage()'>OK</button>
459
+ </div>`;
460
+ $('#addModal').modal('hide'); // Close the modal after saving
461
+ fetchUpdatedDocuments(company_id);
462
+ },
463
+ error: function () {
464
+ alert('Form has no changes to update knowledge base details.');
465
+ }
466
+ });
467
+ }
468
+ function dismissMessage() {
469
+ const messageContainer = document.getElementById('message-container');
470
+ if (messageContainer) {
471
+ messageContainer.innerHTML = '';
472
+ }
473
+ }
474
+ async function fetchUpdatedDocuments(company_id) {
475
+ console.log("company_id:", company_id);
476
+
477
+ var table = $('#apiTable').DataTable();
478
+ try {
479
+ const response = await fetch(`/api/api_updatetable?company_id=${company_id}`);
480
+ const connectorsResponse = await response.json();
481
+
482
+ console.log("Fetched connectorsResponse:", connectorsResponse);
483
+
484
+ table.clear(); // Clear existing data in the table
485
+
486
+ if (!Array.isArray(connectorsResponse) || connectorsResponse.length === 0) {
487
+ displayErrorMessage("Knowledgebase details do not exist for this company. Please fill in the details.");
488
+ contentSection.style.display = 'none';
489
+ } else {
490
+ connectorsResponse.forEach((company, index) => {
491
+ table.row.add([
492
+ index + 1,
493
+ company.api_name,
494
+ company.api_endpoint,
495
+ `<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>`,
496
+ `<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>`,
497
+ `<a href='#' class='btn btn-danger btn-sm' data-kid-id='${company.row_id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`,
498
+ company.row_id
499
+ ]);
500
+ });
501
+ table.draw(false); // Draw the table with the new data
502
+ contentSection.style.display = 'block';
503
+ }
504
+ } catch (error) {
505
+ console.error("Error fetching updated documents:", error);
506
+ displayErrorMessage("There was an error fetching the updated documents.");
507
+ }
508
+ }
509
+
510
+ // Delete company
511
+ function deleteCompany(button) {
512
+ var companyId = $(button).data('kid-id');
513
+ console.log("k_id deleted",companyId);
514
+ $.ajax({
515
+ type: "DELETE",
516
+ url: `/api/deleteapi/${companyId}`,
517
+ success: function () {
518
+ var table = $('#apiTable').DataTable();
519
+ table.row($(button).closest('tr')).remove().draw();
520
+ const messageContainer = document.getElementById('message-container');
521
+ if(messageContainer)
522
+ messageContainer.innerHTML = `
523
+ <div class='alert alert-danger'>
524
+ API Data Deleted successfully
525
+ <button class='close' onclick='dismissMessage()'>OK</button>
526
+ </div>`;
527
+ //alert("Company deleted successfully.");
528
+ fetchCompanies(); // Refresh the table
529
+ },
530
+ error: function (xhr) {
531
+ alert("Error deleting company: " + xhr.responseJSON.detail);
532
+ }
533
+ });
534
+ }
535
+
536
+ function save_file() {
537
+ const form = document.getElementById('documentForm');
538
+ const messageContainer = document.getElementById('message-container');
539
+ // Check if the form is valid
540
+ if (!form.checkValidity()) {
541
+ // If the form is invalid, show validation messages and stop the submission
542
+ form.reportValidity();
543
+ return;
544
+ }
545
+ const company_id = $('#company_id').val();
546
+ const APIName = $('#APIName').val();
547
+ const APIEndpoint = $('#APIEndpoint').val();
548
+ const Auth_Bearer = $('#Auth_Bearer').val();
549
+ const Inputjson = $('#Inputjson').val();
550
+ const OutputJson = $('#OutputJson').val();
551
+ const Description = $('#Description').val();
552
+ const view = "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye'></i></a>";
553
+ const edit = "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>";
554
+ const dele = "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></a>";
555
+
556
+ var formData = new FormData($('#documentForm')[0]);
557
+
558
+ formData.append("company_id", company_id),
559
+ formData.append("api_name", APIName),
560
+ formData.append("api_endpoint", APIEndpoint),
561
+ formData.append("auth_bearer", Auth_Bearer),
562
+ formData.append("input_json", Inputjson),
563
+ formData.append("output_json", OutputJson),
564
+ formData.append("description", Description)
565
+
566
+ //const formData = new FormData();
567
+ fetch('/api/save_api_details', {
568
+ method: 'POST',
569
+ body: formData
570
+ })
571
+ .then(response => {
572
+ if (!response.ok) {
573
+ throw new Error('Network response was not ok');
574
+ }
575
+ return response.text();
576
+ })
577
+ .then(data => {
578
+ var table = $('#apiTable').DataTable();
579
+ var rowCount = table.rows().count();
580
+ table.row.add([
581
+ rowCount + 1,
582
+ APIName,
583
+ APIEndpoint,
584
+ view,
585
+ edit,
586
+ dele
587
+ ]).draw(false);
588
+
589
+ // alert('Document saved successfully');
590
+ if(messageContainer)
591
+ messageContainer.innerHTML = `
592
+ <div class='alert alert-success'>
593
+ API Data saved successfully
594
+ <button class='close' onclick='dismissMessage()'>OK</button>
595
+ </div>`;
596
+ $('#addModal').modal('hide');
597
+ document.getElementById('contentSection').style.display = 'block'; // Show the table section
598
+ })
599
+ .catch(error => console.error('Error:', error));
600
+ }
601
+ async function fetchCompanies() {
602
+ try {
603
+ const response = await fetch('/api/companies');
604
+ if (!response.ok) {
605
+ throw new Error('Network response was not ok');
606
+ }
607
+ const data = await response.json();
608
+ displayCompanies(data.companies);
609
+ } catch (error) {
610
+ console.error('Error fetching companies:', error);
611
+ }
612
+ }
613
+
614
+ function displayCompanies(companies) {
615
+ const companySelect = document.getElementById('company');
616
+ companySelect.innerHTML = '<option value="" selected>Select</option>'; // Reset the dropdown
617
+ companies.forEach(company => {
618
+ const option = document.createElement('option');
619
+ option.value = company.name;
620
+ option.textContent = company.name;
621
+ companySelect.appendChild(option);
622
+ });
623
+ }
624
+ function clearFormFields() {
625
+ document.getElementById('APIName').value = "";
626
+ document.getElementById('APIEndpoint').value = "";
627
+ document.getElementById('Auth_Bearer').value = "";
628
+ document.getElementById('Inputjson').value = "";
629
+ document.getElementById('OutputJson').value = "";
630
+ document.getElementById('Description').value = "";
631
+ }
632
+
633
+
634
+ </script>
635
+ </body>
636
+
637
  </html>