Redmind commited on
Commit
5a5cb30
·
verified ·
1 Parent(s): f66fc5e

Delete templates/API_connectors.html

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