Redmind commited on
Commit
3589f06
·
verified ·
1 Parent(s): bba76f9

Delete templates/data_connectors.html

Browse files
Files changed (1) hide show
  1. templates/data_connectors.html +0 -463
templates/data_connectors.html DELETED
@@ -1,463 +0,0 @@
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>Data Connectors</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
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css">
11
- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
12
-
13
- <style>
14
- html,
15
- body {
16
- height: 90%;
17
- margin: 0;
18
- display: flex;
19
- flex-direction: column;
20
- }
21
-
22
- body {
23
- display: inline-flex;
24
- flex-direction: column;
25
- min-height: 90%;
26
- }
27
-
28
- .main-content {
29
- flex: 1;
30
- display:inline-flex;
31
- flex-direction: column;
32
- align-items: center;
33
- justify-content: flex-start;
34
- padding: 40px;
35
- }
36
-
37
- /* .container {
38
- margin-top: 50px;
39
- margin-left: 320px;
40
- max-width: 800px;
41
- padding: 10px;
42
- border: 1px solid #ccc;
43
- border-radius: 5px;
44
- background-color: #fff;
45
- position: relative;
46
- z-index: 1;
47
- } */
48
-
49
- .form-group {
50
- margin-bottom: 20px;
51
- }
52
-
53
- .form-group label {
54
- font-weight: bold;
55
- margin-left: 50px;
56
- display: block;
57
- }
58
-
59
- .form-group input,
60
- .form-group select,
61
- .form-group textarea {
62
- width: 100%;
63
- margin-left: 50px;
64
- padding: 5px;
65
- border: 1px solid #ccc;
66
- border-radius: 4px;
67
- }
68
-
69
- .btn-primary {
70
- margin-right: 10px;
71
- color: black;
72
- font-size: 16px;
73
- font-weight: bold;
74
- }
75
-
76
- /* .btn-container {
77
- text-align: center;
78
- margin-top: 20px;
79
- margin-bottom: 10px;
80
- } */
81
- .btn-primary {
82
- margin-right: 10px;
83
- color: black;
84
- font-size: 16px;
85
- font-weight: bold;
86
- }
87
-
88
-
89
- .btn-container {
90
- text-align: center;
91
- margin-top: 30px;
92
- margin-left: 90px;
93
- margin-right: 0px;
94
- margin-bottom: 10px;
95
- /* color: white; */
96
- }
97
- .btn-container1 {
98
- text-align: center;
99
- margin-top: 30px;
100
- margin-left: 80px;
101
- margin-right: 30px;
102
- margin-bottom: 10px;
103
- color: white;
104
- }
105
- /* #selectedTables,
106
- #labelselected {
107
- display: none;
108
- } */
109
- .btn-primary:focus,
110
- .btn-primary:active {
111
- color: black;
112
- background-color: #007bff;
113
- border-color: #007bff;
114
- box-shadow: none;
115
- }
116
- #saveBtn1 {
117
-
118
- margin: 0 auto;
119
- }
120
-
121
- footer {
122
- position: relative;
123
- margin-top: auto;
124
- width: 100%;
125
- color: black;
126
- text-align: right;
127
- padding-right: 245px;
128
- padding-top: 20px;
129
- background-color: #f8f9fa;
130
- border: none !important;
131
- }
132
-
133
- .small-select {
134
- width: 200px; /* Adjust the width as needed */
135
- }
136
- .custom-dropdown {
137
- width: 230px; /* Adjust the width as needed */
138
- }
139
- </style>
140
-
141
- </style>
142
- </head>
143
-
144
- <body>
145
- {% include 'sidepane.html' %}
146
- <div class="main-content">
147
- <div id="message-container"></div>
148
- <div class="mt-2">
149
- <div class="form-group small-select">
150
- <label for="company">Company Name <span class="text-danger">*</span></label>
151
- <select type="text" id="company" name="company" class="form-control " required>
152
- <option value="" selected>Select</option>
153
- </select>
154
- </div>
155
- <form id="databaseconnectorForm" class="needs-validation" novalidate action="/save_data_connectors" method="post" style="display:none;">
156
- <div class="form-group">
157
- <!-- <label for="company_id">company_id</label>--->
158
- <input type="hidden" id="company_id" name="company_id" class="form-control" required>
159
- </div>
160
- <div class="row">
161
- <div class="col-md-3">
162
- <div class="form-group">
163
- <label for="database">Database Type<span class="text-danger">*</span></label>
164
- <select type="text" id="database" name="database" class="form-control" required>
165
- <option value="" selected>Select</option>
166
- <option value="Postgress">Postgres</option>
167
- <option value="mysql">Mysql</option>
168
- </select>
169
- </div>
170
- </div>
171
- <div class="col-md-3">
172
- <div class="form-group">
173
- <label for="server">Server IP <span class="text-danger">*</span></label>
174
- <input type="text" id="server" name="server" class="form-control" required>
175
- </div>
176
- </div>
177
- <div class="col-md-3">
178
- <div class="form-group">
179
- <label for="port">Port <span class="text-danger">*</span></label>
180
- <input type="text" id="port" name="port" class="form-control" required>
181
- </div>
182
- </div>
183
- <div class="col-md-3">
184
- <div class="form-group">
185
- <label for="databaseName">Database Name <span class="text-danger">*</span></label>
186
- <input type="text" id="databaseName" name="databaseName" class="form-control" required>
187
- </div>
188
- </div>
189
- </div>
190
- <div class="row">
191
- <div class="col-md-3">
192
- <div class="form-group">
193
- <label for="userame">UserName <span class="text-danger">*</span></label>
194
- <input type="text" id="username" name="username" class="form-control" required>
195
- </div>
196
- </div>
197
- <div class="col-md-3">
198
- <div class="form-group">
199
- <label for="password">Password <span class="text-danger">*</span></label>
200
- <input type="password" id="password" name="password" class="form-control" required>
201
- </div>
202
- </div>
203
-
204
- <div class="col-md-6">
205
- <div class="form-group d-flex justify-content-between">
206
- <div class="form-group btn-container">
207
- <button type="button" id="connectBtn" class="btn btn-primary">Connect</button>
208
- <button type="reset" class="btn btn-primary">Clear</button>
209
- </div>
210
- </div>
211
- </div>
212
- </div>
213
- <div id="schema-table-section" style="display: none;">
214
- <div class="row">
215
- <div class="col-md-3">
216
- <div class="form-group">
217
- <label for="schemas" >Select Schemas <span class="text-danger">*</span></label>
218
- <select type="text" id="schemas" name="schemas" class="form-control" required>
219
- <option value="" selected>Select</option>
220
- <option value="schema1">Lookup</option>
221
- <option value="schema2">Public</option>
222
- <option value="schema3" selected>tenant_default</option>
223
- </select>
224
- </div>
225
- </div>
226
-
227
- <div class="co-md-3" >
228
- <div class="formgroup">
229
- <label for="tableschema" style="margin-left: 90px;margin-right: 30px;">Select Tables <span class="text-danger">*</span></label>
230
- <div class="dropdown custom-dropdown">
231
- <button class="btn btn-secondary dropdown-toggle" style="margin-left: 90px;margin-right: 30px;" type="button" id="tablesDropdown" data-bs-toggle="dropdown" aria-expanded="false">
232
- Select Tables
233
- </button>
234
- <ul class="dropdown-menu" aria-labelledby="tablesDropdown">
235
- <li>
236
- <select type="text" id="tableschema" name="tableschema" class="form-control" multiple required>
237
- <option value="customer_master">customer_master</option>
238
- <option value="efs_company_master">efs_company_master</option>
239
- <option value="efs_group_company_master">efs_group_company_master</option>
240
- <option value="efs_region_master">efs_region_master</option>
241
- <option value="party_address_detail">party_address_detail</option>
242
- <option value="wms_warehouse_master">wms_warehouse_master</option>
243
- </select>
244
- </li>
245
- </ul>
246
- </div>
247
- </div>
248
- </div>
249
- <!-- <div class="col-md-3">
250
- <div class="btn-container1">
251
- <button type="button" id="saveBtn" class="btn btn-primary">Save</button>
252
- </div>
253
- </div>
254
- </div>
255
- <div class="row">-->
256
- <div class="col-md-3">
257
- <div class="form-group">
258
- <label for="selectedTables" id="labelselected">Selected Tables</label>
259
- <textarea type="text" id="selectedTables" name="selectedTables" class="form-control" rows="4"
260
- readonly></textarea>
261
- </div>
262
- </div>
263
-
264
- <div class="col-md-3">
265
- <div class="form-group">
266
- <div class="btn-container1">
267
- <button type="submit" id="saveBtn" class="btn btn-primary">Save</button>
268
- </div>
269
- </div>
270
- </div>
271
- </div>
272
- </div>
273
- </form>
274
- </div>
275
- </div>
276
- </div>
277
- <footer>
278
- <p></p>
279
- </footer>
280
- <script>
281
-
282
- document.addEventListener('DOMContentLoaded', function () {
283
- fetchCompanies();
284
- const companySelect = document.getElementById('company');
285
- const databaseconnectorForm = document.getElementById('databaseconnectorForm');
286
-
287
- companySelect.addEventListener('change', async function () {
288
- $("#message-container").empty();
289
- const selectedCompanyName = companySelect.options[companySelect.selectedIndex].text;
290
- console.log(`Selected Company Name: ${selectedCompanyName}`);
291
-
292
- if (selectedCompanyName !== "Select") {
293
- $("#schema-table-section").hide();
294
- try {
295
- const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompanyName)}`);
296
- if (!response.ok) {
297
- throw new Error('Network response was not ok');
298
- }
299
- const data = await response.json();
300
- console.log(`Company ID: ${data.company_id}`);
301
- const companyId = data.company_id;
302
- document.getElementById('company_id').value = companyId;
303
-
304
- if (companyId) {
305
- try {
306
- const connectorsResponse = await fetch(`/api/check_data_connectors?company_id=${companyId}&company_name=${selectedCompanyName}`);
307
- if (!connectorsResponse.ok) {
308
- throw new Error('data connector Network response was not ok');
309
- }
310
- const connectorsData = await connectorsResponse.json();
311
- //setMultiSelectValues(document.getElementById('database'), connectorsData.databasetype); // Ensure this is an array
312
- //setMultiSelectValues(document.getElementById('databaseName'), connectorsData.database_name); // Ensure this is an array
313
- document.getElementById('database').value = connectorsData.databasetype;
314
- document.getElementById('server').value = connectorsData.serverip;
315
- document.getElementById('port').value = connectorsData.port;
316
- document.getElementById('databaseName').value = connectorsData.database_name;
317
- document.getElementById('username').value = connectorsData.username;
318
- document.getElementById('password').value = connectorsData.password;
319
- document.getElementById('selectedTables').value = connectorsData.dbtablename;
320
- databaseconnectorForm.style.display = 'block';
321
-
322
- } catch (error) {
323
- document.getElementById('database').value = " ";
324
- document.getElementById('server').value = " ";
325
- document.getElementById('port').value = " ";
326
- document.getElementById('databaseName').value = " ";
327
- document.getElementById('username').value = " ";
328
- document.getElementById('password').value = " ";
329
- document.getElementById('selectedTables').value = " ";
330
- console.error('Error fetching data from data connectors:', error);
331
- ("Company name does not exist. Please fill in the details.");
332
-
333
- // Optionally, you can insert a message into the DOM
334
- const messageContainer = document.getElementById('message-container');
335
- if (messageContainer) {
336
- messageContainer.innerHTML = "<div class='alert alert-danger'>Database details does not exist for this Company name.. Please fill in the details.</div>";
337
- }
338
-
339
- databaseconnectorForm.style.display = 'block';
340
- }
341
- } else {
342
- console.log(`Company ID does not exist, you can create and save data: ${data.company_id}`);
343
- databaseconnectorForm.style.display = 'none';
344
- }
345
-
346
- } catch (error) {
347
-
348
- console.error('Error fetching company ID or data connectors:', error);
349
- databaseconnectorForm.style.display = 'none';
350
- }
351
- } else {
352
- databaseconnectorForm.style.display = 'none';
353
- }
354
- });
355
-
356
- document.getElementById("connectBtn").addEventListener("click", function (event) {
357
- var database = document.getElementById("database").value;
358
- var server = document.getElementById("server").value;
359
- var port = document.getElementById("port").value;
360
- var databaseName = document.getElementById("databaseName").value;
361
- var username = document.getElementById("username").value;
362
- var password = document.getElementById("password").value;
363
-
364
- if (!database || !server || !port || !databaseName || !username || !password) {
365
- alert("Please fill in all required fields.");
366
- return;
367
- }
368
-
369
- document.getElementById("schema-table-section").style.display = "block";
370
- });
371
- $("#tableschema").change(function () {
372
- var selectedTables = $(this).val();
373
- var currentText = $("#selectedTables").val();
374
- selectedTables.forEach(function (table) {
375
- if (!currentText.includes(table)) {
376
- if (currentText.length > 0) {
377
- currentText += ", " + table;
378
- } else {
379
- currentText = table;
380
- }
381
- }
382
- });
383
- $("#selectedTables").val(currentText);
384
- });
385
- // document.getElementById("saveBtn").addEventListener("click", function (event) {
386
- // var tables = Array.from(document.getElementById("tableschema").selectedOptions).map(option => option.value);
387
- // if (tables.length === 0) {
388
- // alert("Please select at least one table.");
389
- // return;
390
- // }
391
-
392
- // var selectedTables = document.getElementById("selectedTables");
393
- // selectedTables.value = tables.join(", ");
394
- // selectedTables.style.display = "block";
395
- // document.getElementById("labelselected").style.display = "block";
396
- // document.getElementById("saveBtn1").style.display = "block";
397
- // });
398
- document.getElementById("saveBtn").addEventListener("click", async function(event) {
399
- event.preventDefault(); // Prevent default form submission
400
-
401
- const form = document.getElementById('databaseconnectorForm');
402
- const formData = new FormData(form);
403
-
404
- try {
405
- const response = await fetch(form.action, {
406
- method: form.method,
407
- body: formData
408
- });
409
-
410
- if (!response.ok) {
411
- throw new Error('Network response was not ok');
412
- }
413
-
414
- const result = await response.json();
415
- // Optionally, handle the response from the server
416
- if (result.success) {
417
- alert('Data saved successfully');
418
- } else {
419
- alert('Error saving data: ' + result.message);
420
- }
421
- } catch (error) {
422
- console.error('Error saving data:', error);
423
- alert('An error occurred while saving data');
424
- }
425
- });
426
- });
427
- async function fetchCompanies() {
428
- try {
429
- const response = await fetch('/api/companies');
430
- if (!response.ok) {
431
- throw new Error('Network response was not ok');
432
- }
433
- const data = await response.json();
434
- displayCompanies(data.companies);
435
- } catch (error) {
436
- console.error('Error fetching companies:', error);
437
- }
438
- }
439
-
440
- function displayCompanies(companies) {
441
- const companySelect = document.getElementById('company');
442
- companySelect.innerHTML = '<option value="" selected>Select</option>'; // Reset the dropdown
443
- companies.forEach(company => {
444
- const option = document.createElement('option');
445
- option.value = company.name;
446
- option.textContent = company.name;
447
- companySelect.appendChild(option);
448
- });
449
- }
450
-
451
- function setMultiSelectValues(selectElement, values) {
452
- // Ensure values is an array
453
- if (!Array.isArray(values)) {
454
- values = [values];
455
- }
456
- Array.from(selectElement.options).forEach(option => {
457
- option.selected = values.includes(option.value);
458
- });
459
- }
460
- </script>
461
- </body>
462
-
463
- </html>