Hugging Face's logo

Spaces:
Rsnarsna
/
Redmind_GPT_API
Sleeping

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

Update templates/company_profile.html

Browse files
Files changed (1) hide show
  1. templates/company_profile.html +542 -520
templates/company_profile.html CHANGED
@@ -1,521 +1,543 @@
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>
 
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
+ const modalTitle = document.getElementById('addModalLabel');
295
+ modalTitle.textContent = 'Add Company Details';
296
+ $('#addModal').modal('show');
297
+ $('#save').show();
298
+ $('#saveupdate').hide();
299
+ clearmodal();
300
+ $('#save').prop('disabled', false); // Disable the "Save" button when the modal opens
301
+ });
302
+ $('.modal-footer .btn-secondary, .modal-header .close').on('click', function () {
303
+ $('#addModal').modal('hide');
304
+ });
305
+
306
+
307
+ $(document).on('click', '.btn-view', function () {
308
+ const companyId = $(this).data('id');
309
+ console.log("company_id in view", companyId);
310
+ viewCompany(companyId);
311
+ });
312
+
313
+ // Edit company details
314
+ $(document).on('click', '.btn-edit', function () {
315
+ const companyId = $(this).data('id');
316
+ console.log("company_id in edit", companyId);
317
+ editCompany(companyId);
318
+ });
319
+
320
+ // Delete company
321
+ $(document).on('click', '.btn-delete', function () {
322
+ const companyId = $(this).data('id'); // Get the company ID from the da
323
+ console.log("company_id in delete", companyId);
324
+ if (confirm("Are you sure you want to delete this company?")) {
325
+ deleteCompany(companyId); // Call the delete function with the company ID
326
+ }
327
+ });
328
+
329
+ });
330
+ // View company details
331
+ function viewCompany(companyId) {
332
+ // Fetch company details by ID
333
+ const modalTitle = document.getElementById('addModalLabel');
334
+ modalTitle.textContent = 'View Company Details';
335
+ $.getJSON(`/api/getcompanydetails/${companyId}`, function (company) {
336
+ // alert(`Company Name: ${company.company_name}\nCompany Code: ${company.company_code}\nDomain: ${company.domain}\nLLM Tools: ${company.llm_tools}`);
337
+ $('#company_name').val(company.company_name).attr('readonly', 'readonly');
338
+ $('#company_code').val(company.company_code).attr('readonly', 'readonly');
339
+ $('#domain').val(company.domain).attr('readonly', 'readonly');
340
+ $('#llm_tools').val(company.llm_tools.split(',')).trigger('change');
341
+ $('#llm_tools').prop('disabled', true); // Disable the select input
342
+
343
+ // Open the modal for editing
344
+ $('#saveupdate').hide();
345
+ $('#save').hide();// Disable the "Save" button when the modal opens
346
+ $('#addModal').modal('show');
347
+ }).fail(function () {
348
+ alert("Error retrieving company details.");
349
+ });
350
+ }
351
+
352
+ // Edit company details
353
+ function editCompany(companyId) {
354
+ const modalTitle = document.getElementById('addModalLabel');
355
+ modalTitle.textContent = 'Edit Company Details';
356
+ // Fetch company details by ID
357
+ $.getJSON(`/api/getcompanydetails/${companyId}`, function (company) {
358
+ $('#company_name').removeAttr('readonly');
359
+ $('#company_code').removeAttr('readonly');
360
+ $('#domain').removeAttr('readonly');
361
+ $('#llm_tools').prop('disabled', false);
362
+ $('#save').hide();
363
+ $('#saveupdate').show();
364
+ // Populate the form with the company's details
365
+ $('#company_name').val(company.company_name);
366
+ $('#company_code').val(company.company_code);
367
+ $('#domain').val(company.domain);
368
+ $('#llm_tools').val(company.llm_tools.split(',')).trigger('change');
369
+
370
+ // Open the modal for editing
371
+ $('#addModal').modal('show');
372
+
373
+ // Update the save button to save the edited company
374
+ $('#saveupdate').off('click').on('click', function () {
375
+
376
+ saveupdate(companyId); // Pass the company ID for updating
377
+ });
378
+ }).fail(function () {
379
+ alert("Error retrieving company details.");
380
+ });
381
+ }
382
+
383
+ // Delete company
384
+ function deleteCompany(companyId) {
385
+ console.log("company_id deleted", companyId);
386
+ $.ajax({
387
+ type: "DELETE",
388
+ url: `/api/delcompanydetails/${companyId}`,
389
+ success: function () {
390
+ // alert("Company deleted successfully.");
391
+ const messageContainer = document.getElementById('message-container');
392
+ if (messageContainer)
393
+ messageContainer.innerHTML = `
394
+ <div class='alert alert-danger'>
395
+ Company details deleted successfully.
396
+ <button class='close' onclick='dismissMessage()'>OK</button>
397
+ </div>`;
398
+ fetchCompanies(); // Refresh the table
399
+ },
400
+ error: function (xhr) {
401
+ alert("Error deleting company: " + xhr.responseJSON.detail);
402
+ }
403
+ });
404
+ }
405
+ function saveupdate(companyId) {
406
+ console.log("company_id", companyId);
407
+ var companyData = {
408
+ company_name: $('#company_name').val(),
409
+ company_code: $('#company_code').val(),
410
+ domain: $('#domain').val(),
411
+ llm_tools: $('#llm_tools').val().join(',') // Assuming llm_tools is a multi-select
412
+ };
413
+ console.log("company_data", companyData);
414
+
415
+ $.ajax({
416
+ url: `/api/putcompanydetails/${companyId}`,
417
+ type: 'PUT',
418
+ data: companyData,
419
+ success: function (response) {
420
+ // alert('Company details updated successfully.');
421
+ const messageContainer = document.getElementById('message-container');
422
+ if(messageContainer)
423
+ messageContainer.innerHTML = `
424
+ <div class='alert alert-success'>
425
+ Company Data Updated successfully
426
+ <button class='close' onclick='dismissMessage()'>OK</button>
427
+ </div>`;
428
+ $('#addModal').modal('hide'); // Close the modal after saving
429
+ fetchCompanies();
430
+ },
431
+ error: function () {
432
+
433
+ const messageContainer = document.getElementById('message-container');
434
+ if(messageContainer)
435
+ messageContainer.innerHTML = `
436
+ <div class='alert alert-danger'>
437
+ No changes have been made to update company details.
438
+ <button class='close' onclick='dismissMessage()'>OK</button>
439
+ </div>`;
440
+ $('#addModal').modal('hide');
441
+ //alert('No changes have been made to update company details.');
442
+ }
443
+ });
444
+ }
445
+ function saveProfile() {
446
+ const form = document.getElementById('companyForm');
447
+
448
+ // Check if the form is valid
449
+ if (!form.checkValidity()) {
450
+ // If the form is invalid, show validation messages and stop the submission
451
+ form.reportValidity();
452
+ return;
453
+ }
454
+ // Gather form data
455
+ const company_name = document.getElementById('company_name').value;
456
+ const company_code = document.getElementById('company_code').value;
457
+ const domain = document.getElementById('domain').value;
458
+ const llm_tools = $('#llm_tools').val(); // Get selected values from Select2
459
+
460
+ // Prepare FormData
461
+ let formData = new FormData();
462
+ formData.append("company_name", company_name);
463
+ formData.append("company_code", company_code);
464
+ formData.append("domain", domain);
465
+ formData.append("llm_tools", llm_tools.join(','));
466
+
467
+ $.ajax({
468
+ type: "POST",
469
+ url: "/submit_company_profile",
470
+ data: formData,
471
+ processData: false,
472
+ contentType: false,
473
+ success: function (response) {
474
+ // alert("Data saved successfully"); // Show success message
475
+ const messageContainer = document.getElementById('message-container');
476
+ if (messageContainer)
477
+ messageContainer.innerHTML = `
478
+ <div class='alert alert-success'>
479
+ Data saved successfully
480
+ <button class='close' onclick='dismissMessage()'>OK</button>
481
+ </div>`;
482
+ fetchCompanies(); // Refresh table data
483
+
484
+ // Clear the form and close the modal
485
+ // $('#companyForm')[0].reset();
486
+ $('#addModal').modal('hide');
487
+ },
488
+ error: function (xhr) {
489
+ alert("An error occurred: " + xhr.responseJSON.detail); // Show error message
490
+ }
491
+ });
492
+ }
493
+ function dismissMessage() {
494
+ const messageContainer = document.getElementById('message-container');
495
+ if (messageContainer) {
496
+ messageContainer.innerHTML = '';
497
+ }
498
+ }
499
+ async function fetchCompanies() {
500
+ try {
501
+ console.log("Fetching companies...");
502
+ const response = await fetch(`/api/companydetails`);
503
+ const companies = await response.json();
504
+ console.log(companies); // Inspect the data here
505
+
506
+ if (!Array.isArray(companies)) {
507
+ throw new TypeError('Expected an array of companies');
508
+ }
509
+
510
+ const table = $('#companyTable').DataTable();
511
+ table.clear(); // Clear existing table data
512
+
513
+ companies.forEach((company, index) => {
514
+ table.row.add([
515
+ index + 1,
516
+ company.company_name,
517
+ company.company_code,
518
+ company.domain,
519
+ company.llm_tools, // Join array of tools into a string
520
+ `<a href='#' class='btn btn-info btn-sm'onclick='viewCompany(${company.company_id})'><i class='fas fa-eye'></i></a>`,
521
+ `<a href='#' class='btn btn-warning btn-sm'onclick='editCompany(${company.company_id})'><i class='fas fa-edit'></i></a>`,
522
+ `<a href='#' class='btn btn-danger btn-sm' onclick='deleteCompany(${company.company_id})'><i class='fas fa-trash'></i></a>`
523
+
524
+ ]).draw(false);
525
+ });
526
+ } catch (error) {
527
+ console.error('Error fetching companies:', error);
528
+ }
529
+ }
530
+ function clearmodal() {
531
+ $('#companyForm')[0].reset(); // Reset all form fields
532
+ $('#llm_tools').val(null).trigger('change'); // Clear and reset the Select2 field
533
+ $('#llm_tools').select2({
534
+ theme: 'bootstrap4',
535
+ placeholder: 'Select',
536
+ allowClear: true
537
+ }); // Reinitialize Select2
538
+ }
539
+
540
+ </script>
541
+ </body>
542
+
543
  </html>