Hugging Face's logo

Spaces:
Rsnarsna
/
Redmind_GPT_API
Sleeping

App Files Community
1
Redmind commited on
Commit
c0c5599
·
verified ·
1 Parent(s): 5a5cb30

Upload API_connectors.html

Browse files
Files changed (1) hide show
  1. templates/API_connectors.html +457 -0
templates/API_connectors.html ADDED
@@ -0,0 +1,457 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>