Redmind commited on
Commit
5fdaf55
·
verified ·
1 Parent(s): 3046de1

Delete templates/API_connectors.html

Browse files
Files changed (1) hide show
  1. templates/API_connectors.html +0 -443
templates/API_connectors.html DELETED
@@ -1,443 +0,0 @@
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
- .header-row {
20
- display: flex;
21
- justify-content: space-between;
22
- align-items: center;
23
- }
24
-
25
-
26
- .table-container {
27
- width: 100%;
28
- overflow-x: auto;
29
- }
30
-
31
- .wrapper {
32
- display: flex;
33
- flex-direction: column;
34
- height: 100vh;
35
- }
36
-
37
- .content-wrapper {
38
- flex: 1;
39
- overflow-y: auto;
40
- }
41
-
42
- .content-header {
43
- padding: 1rem;
44
- }
45
-
46
- .footer {
47
- text-align: right;
48
- padding: 10px;
49
- }
50
- .center-align {
51
- padding-top: 20px;
52
- display: flex;
53
- justify-content: center;
54
- align-items: center;
55
- width: 100%;
56
- }
57
- th,
58
- td {
59
- white-space: nowrap;
60
- }
61
-
62
- th:nth-child(1),
63
- td:nth-child(1) {
64
- /* Sno column */
65
- width: 5%;
66
- }
67
-
68
- th:nth-child(2),
69
- td:nth-child(2) {
70
- /* API Name column */
71
- width: 20%;
72
- }
73
-
74
- th:nth-child(3),
75
- td:nth-child(3) {
76
- /* API Endpoint column */
77
- width: 40%;
78
- }
79
-
80
- th:nth-child(4),
81
- td:nth-child(4) {
82
- /* Auth/Bearer token column */
83
- width: 20%;
84
- }
85
-
86
- th:nth-child(5),
87
- td:nth-child(5) {
88
- /* View column */
89
- width: 15%;
90
- }
91
- .reduced-width{
92
- width:25%;
93
- }
94
- </style>
95
- </head>
96
-
97
- <body>
98
- {% include 'sidepane.html' %}
99
-
100
- <div class="wrapper">
101
- <div class="content-wrapper">
102
- <!-- Content Header (Page header) -->
103
- <div class="content-header">
104
- <div class="container-fluid">
105
- <div class="container mt-2">
106
- <div class="form-group center-align">
107
- <label for="company" class="mr-2">Company Name <span class="text-danger">*</span></label>
108
- <select type="text" id="company" name="company" class="form-control reduced-width" required>
109
- <option value="" selected>Select</option>
110
- </select>
111
- <div class="col-8 d-flex justify-content-end mb-3">
112
- <button class="btn btn-primary" style="margin-top: 20px;" id="add">Add</button>
113
- </div>
114
- </div>
115
- <div class="row">
116
- <div id="message-container" style="margin-left: 200px;"></div>
117
-
118
- </div>
119
- </div>
120
- </div>
121
- </div>
122
- <section class="content" id="contentSection" style="display: none;">
123
- <div class="container-fluid">
124
- <div class="form-group">
125
- <!-- <label for="company_id">company_id</label>--->
126
- <input type="hidden" id="company_id" name="company_id" class="form-control" required>
127
- </div>
128
- </div>
129
- <!-- Main content -->
130
- <section class="content">
131
- <div class="container-fluid">
132
- <div class="row">
133
- <div class="col-12">
134
- <div class="card">
135
- <div class="card-body table-container">
136
- <table id="apiTable" class="table table-bordered table-striped">
137
- <thead>
138
- <tr>
139
- <th>Sno</th>
140
- <th>API Name</th>
141
- <th>API Endpoint</th>
142
- <th>View</th>
143
- </tr>
144
- </thead>
145
- <tbody>
146
- <!-- <tr>
147
- <td>1</td>
148
- <td>Warehouse</td>
149
- <td>http://193.203.162.39:9090/nxt-wms/userWarehouse/fetchWarehouseForUserId
150
- </td>
151
- <td><button class="btn btn-primary viewButton">View</button></td>
152
- </tr>
153
- <tr>
154
- <td>2</td>
155
- <td>customer</td>
156
- <td>http://193.203.162.39:9090/nxt-wms/userCustomer/fetchCustomerForUserId
157
- </td>
158
- <td><button class="btn btn-primary viewButton">View</button></td>
159
- </tr>
160
- <tr>
161
- <td>3</td>
162
- <td>SKU</td>
163
- <td>http://193.203.162.39:9090/nxt-wms/sku/autoComplete?</td>
164
- <td><button class="btn btn-primary viewButton">View</button></td>
165
- </tr>
166
- <tr>
167
- <td>4</td>
168
- <td>ASN</td>
169
- <td>http://193.203.162.39:9090/nxt-wms/trnHeader</td>
170
- <td><button class="btn btn-primary viewButton">View</button></td>
171
- </tr> -->
172
- </tbody>
173
- </table>
174
- </div>
175
- </div>
176
- </div>
177
- </div>
178
- </div>
179
- </section>
180
- </div>
181
-
182
- </div>
183
-
184
- <!-- Modal -->
185
- <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel"
186
- aria-hidden="true">
187
- <div class="modal-dialog" style="margin-top: -10px;" role="document">
188
- <div class="modal-content" >
189
- <div class="modal-header">
190
- <h5 class="modal-title" id="addModalLabel">Add API Details</h5>
191
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
192
- <span aria-hidden="true" data-backdrop="static" data-keyboard="false">&times;</span>
193
- </button>
194
- </div>
195
- <div class="modal-body">
196
- <div class="form-group">
197
- <!-- <label for="company_id">company_id</label>--->
198
- <input type="hidden" id="company_id" name="company_id" class="form-control" required>
199
- </div>
200
- <form id="documentForm">
201
- <div class="form-group">
202
- <label for="APIName">API Name <span class="text-danger">*</span></label>
203
- <input type="text" class="form-control" id="APIName" name="APIName" required>
204
- </div>
205
- <div class="form-group">
206
- <label for="APIEndpoint">API Endpoint <span class="text-danger">*</span></label>
207
- <input type="text" class="form-control" id="APIEndpoint" name="APIEndpoint" required>
208
- </div>
209
- <div class="form-group">
210
- <label for="Auth_Bearer">Auth/Bearer token <span class="text-danger">*</span></label>
211
- <input type="text" class="form-control" id="Auth_Bearer" name="Auth_Bearer" required>
212
- </div>
213
- <div class="form-group">
214
- <label for="Inputjson">Input parameter <span class="text-danger">*</span></label>
215
- <input type="text" class="form-control" id="Inputjson" name="Inputjson" required>
216
- </div>
217
- <div class="form-group">
218
- <label for="OutputJson">Output Json <span class="text-danger">*</span></label>
219
- <input type="text" class="form-control" id="OutputJson" name="OutputJson" required>
220
- </div>
221
- <div class="form-group">
222
- <label for="Description">Description <span class="text-danger">*</span></label>
223
- <textarea class="form-control" id="Description" name="Description" rows="3"
224
- required></textarea>
225
- </div>
226
- </form>
227
- </div>
228
- <div class="modal-footer">
229
- <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> -->
230
- <button type="button" id="save" onclick="save_file()" class="btn btn-primary">Save</button>
231
- </div>
232
- </div>
233
- </div>
234
- </div>
235
-
236
- <!-- Include DataTables JS and your custom script -->
237
- <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
238
- <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
239
- <script>
240
- $(document).ready(function () {
241
- // Show modal function
242
- $('#add').on('click', function () {
243
- clearFormFields();
244
- $('#message-container').empty(); // Clear the message container
245
- $('#addModal').modal('show');
246
- });
247
- $('.modal-footer .btn-secondary, .modal-header .close').on('click', function () {
248
- $('#addModal').modal('hide');
249
- });
250
- // $('#apiTable').DataTable({
251
- // autoWidth: false
252
- // });
253
-
254
- });
255
- document.addEventListener("DOMContentLoaded", function () {
256
-
257
- // clearFormFields();
258
- fetchCompanies();
259
-
260
- const companySelect = document.getElementById('company');
261
- const documentForm = document.getElementById('documentForm');
262
- const table = $('#apiTable').DataTable();
263
- // Initialize DataTable at the start
264
- companySelect.addEventListener('change', async function () {
265
- $("#message-container").empty();
266
- const selectedCompanyName = companySelect.options[companySelect.selectedIndex].text;
267
- console.log(`Selected Company Name: ${selectedCompanyName}`);
268
-
269
- if (selectedCompanyName !== "Select") {
270
-
271
- try {
272
- const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompanyName)}`);
273
- if (!response.ok) {
274
- contentSection.style.display = 'none';
275
- ("Document details does not exist for name does not exist. Please fill in the details.");
276
- const messageContainer = document.getElementById('message-container');
277
- if (messageContainer) {
278
- messageContainer.innerHTML = "<div class='alert alert-danger'>Document details do not exist for this company. Please fill in the details.</div>";
279
- }
280
- throw new Error('Network response was not ok');
281
- }
282
- const data = await response.json();
283
- console.log('data returned', data);
284
- console.log(`Company ID: ${data.company_id}`);
285
- const companyId = data.company_id;
286
- document.getElementById('company_id').value = companyId;
287
-
288
- if (companyId) {
289
- try {
290
- const Response = await fetch(`/api/get_api_connectors?company_id=${companyId}&company_name=${selectedCompanyName}`);
291
- const connectorsResponse = await Response.json();
292
- console.log("api connector data table after connecting to table", connectorsResponse);
293
- table.clear();
294
- if (!Array.isArray(connectorsResponse)) {
295
- throw new TypeError('Expected an array of companies');
296
-
297
- displayErrorMessage("Document details do not exist for this company. Please fill in the details.");
298
- contentSection.style.display = 'none';
299
- } else {
300
-
301
- connectorsResponse.forEach((company, index) => {
302
- table.row.add([
303
- index+1,
304
- company.APIName,
305
- company.APIEndpoint,
306
- "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye' fa-eye'></i></a>",
307
- ]).draw(false);
308
- });
309
- contentSection.style.display = 'block';
310
- }
311
-
312
- } catch (error) {
313
- console.error('Error fetching company documents:', error);
314
- //displayEmptyTable();
315
-
316
- displayErrorMessage("Document details1 do not exist for this company. Please fill in the details.");
317
- contentSection.style.display = 'none';
318
- }
319
- }
320
- else {
321
- // displayEmptyTable();
322
-
323
- displayErrorMessage("Document details2 for knowledge do not exist for this company. Please fill in the details.");
324
- }
325
- } catch (error) {
326
- console.error('No details for this company ID or data documents:', error);
327
- // displayEmptyTable();
328
-
329
- displayErrorMessage("Document details3 do not exist for this company. Please fill in the details.");
330
- contentSection.style.display = 'none';
331
- }
332
- } else {
333
-
334
- table.clear().draw();
335
- document.getElementById('contentSection').style.display = 'none';
336
- // Optionally, you might want to clear the form fields as well
337
- clearFormFields();
338
-
339
- }
340
- });
341
- function displayErrorMessage(message) {
342
- const messageContainer = document.getElementById('message-container');
343
- if (messageContainer) {
344
- messageContainer.innerHTML = `<div class='alert alert-danger'>${message}</div>`;
345
- }
346
- }
347
-
348
- });
349
- function save_file() {
350
- const form = document.getElementById('documentForm');
351
-
352
- // Check if the form is valid
353
- if (!form.checkValidity()) {
354
- // If the form is invalid, show validation messages and stop the submission
355
- form.reportValidity();
356
- return;
357
- }
358
- const company_id=$('#company_id').val();
359
- const APIName = $('#APIName').val();
360
- const APIEndpoint = $('#APIEndpoint').val();
361
- const Auth_Bearer = $('#Auth_Bearer').val();
362
- const Inputjson = $('#Inputjson').val();
363
- const OutputJson = $('#OutputJson').val();
364
- const Description = $('#Description').val();
365
- const view= "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye'></i></a>";
366
- var formData = new FormData($('#documentForm')[0]);
367
-
368
- formData.append("company_id",company_id),
369
- formData.append("api_name", APIName),
370
- formData.append("api_endpoint", APIEndpoint),
371
- formData.append("auth_bearer", Auth_Bearer),
372
- formData.append("input_json", Inputjson),
373
- formData.append("output_json", OutputJson),
374
- formData.append("description", Description)
375
-
376
- //const formData = new FormData();
377
- fetch('/api/save_api_details', {
378
- method: 'POST',
379
- body: formData
380
- })
381
- .then(response => {
382
- if (!response.ok) {
383
- throw new Error('Network response was not ok');
384
- }
385
- return response.text();
386
- })
387
- .then(data => {
388
- var table = $('#apiTable').DataTable();
389
- var rowCount = table.rows().count();
390
- table.row.add([
391
- rowCount + 1,
392
- APIName,
393
- APIEndpoint,
394
- Auth_Bearer,
395
- Inputjson,
396
- OutputJson,
397
- Description,
398
- view
399
- ]).draw(false);
400
-
401
- alert('Document saved successfully');
402
- $('#addModal').modal('hide');
403
- document.getElementById('contentSection').style.display = 'block'; // Show the table section
404
- })
405
- .catch(error => console.error('Error:', error));
406
- }
407
- async function fetchCompanies() {
408
- try {
409
- const response = await fetch('/api/companies');
410
- if (!response.ok) {
411
- throw new Error('Network response was not ok');
412
- }
413
- const data = await response.json();
414
- displayCompanies(data.companies);
415
- } catch (error) {
416
- console.error('Error fetching companies:', error);
417
- }
418
- }
419
-
420
- function displayCompanies(companies) {
421
- const companySelect = document.getElementById('company');
422
- companySelect.innerHTML = '<option value="" selected>Select</option>'; // Reset the dropdown
423
- companies.forEach(company => {
424
- const option = document.createElement('option');
425
- option.value = company.name;
426
- option.textContent = company.name;
427
- companySelect.appendChild(option);
428
- });
429
- }
430
- function clearFormFields() {
431
- document.getElementById('APIName').value = "";
432
- document.getElementById('APIEndpoint').value = "";
433
- document.getElementById('Auth_Bearer').value = "";
434
- document.getElementById('Inputjson').value = "";
435
- document.getElementById('OutputJson').value = "";
436
- document.getElementById('Description').value = "";
437
- }
438
-
439
-
440
- </script>
441
- </body>
442
-
443
- </html>