Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Data Connectors</title> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css"> | |
| <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css"> | |
| <style> | |
| html, | |
| body { | |
| height: 90%; | |
| margin: 0; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| body { | |
| display: inline-flex; | |
| flex-direction: column; | |
| min-height: 90%; | |
| } | |
| .main-content { | |
| flex: 1; | |
| display:inline-flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: flex-start; | |
| padding: 40px; | |
| } | |
| /* .container { | |
| margin-top: 50px; | |
| margin-left: 320px; | |
| max-width: 800px; | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| background-color: #fff; | |
| position: relative; | |
| z-index: 1; | |
| } */ | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-group label { | |
| font-weight: bold; | |
| margin-left: 50px; | |
| display: block; | |
| } | |
| .form-group input, | |
| .form-group select, | |
| .form-group textarea { | |
| width: 100%; | |
| margin-left: 50px; | |
| padding: 5px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| } | |
| .btn-primary { | |
| margin-right: 10px; | |
| color: black; | |
| font-size: 16px; | |
| font-weight: bold; | |
| } | |
| /* .btn-container { | |
| text-align: center; | |
| margin-top: 20px; | |
| margin-bottom: 10px; | |
| } */ | |
| .btn-primary { | |
| margin-right: 10px; | |
| color: black; | |
| font-size: 16px; | |
| font-weight: bold; | |
| } | |
| .btn-container { | |
| text-align: center; | |
| margin-top: 30px; | |
| margin-left: 90px; | |
| margin-right: 0px; | |
| margin-bottom: 10px; | |
| /* color: white; */ | |
| } | |
| .btn-container1 { | |
| text-align: center; | |
| margin-top: 30px; | |
| margin-left: 80px; | |
| margin-right: 30px; | |
| margin-bottom: 10px; | |
| color: white; | |
| } | |
| /* #selectedTables, | |
| #labelselected { | |
| display: none; | |
| } */ | |
| .btn-primary:focus, | |
| .btn-primary:active { | |
| color: black; | |
| background-color: #007bff; | |
| border-color: #007bff; | |
| box-shadow: none; | |
| } | |
| #saveBtn1 { | |
| margin: 0 auto; | |
| } | |
| footer { | |
| position: relative; | |
| margin-top: auto; | |
| width: 100%; | |
| color: black; | |
| text-align: right; | |
| padding-right: 245px; | |
| padding-top: 20px; | |
| background-color: #f8f9fa; | |
| border: none ; | |
| } | |
| .small-select { | |
| width: 200px; /* Adjust the width as needed */ | |
| } | |
| .custom-dropdown { | |
| width: 230px; /* Adjust the width as needed */ | |
| } | |
| </style> | |
| </style> | |
| </head> | |
| <body> | |
| {% include 'sidepane.html' %} | |
| <div class="main-content"> | |
| <div id="message-container"></div> | |
| <div class="mt-2"> | |
| <div class="form-group small-select"> | |
| <label for="company">Company Name <span class="text-danger">*</span></label> | |
| <select type="text" id="company" name="company" class="form-control " required> | |
| <option value="" selected>Select</option> | |
| </select> | |
| </div> | |
| <form id="databaseconnectorForm" class="needs-validation" novalidate action="/save_data_connectors" method="post" style="display:none;"> | |
| <div class="form-group"> | |
| <!-- <label for="company_id">company_id</label>---> | |
| <input type="hidden" id="company_id" name="company_id" class="form-control" required> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label for="database">Database Type<span class="text-danger">*</span></label> | |
| <select type="text" id="database" name="database" class="form-control" required> | |
| <option value="" selected>Select</option> | |
| <option value="Postgress">Postgres</option> | |
| <option value="mysql">Mysql</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label for="server">Server IP <span class="text-danger">*</span></label> | |
| <input type="text" id="server" name="server" class="form-control" required> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label for="port">Port <span class="text-danger">*</span></label> | |
| <input type="text" id="port" name="port" class="form-control" required> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label for="databaseName">Database Name <span class="text-danger">*</span></label> | |
| <input type="text" id="databaseName" name="databaseName" class="form-control" required> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label for="userame">UserName <span class="text-danger">*</span></label> | |
| <input type="text" id="username" name="username" class="form-control" required> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label for="password">Password <span class="text-danger">*</span></label> | |
| <input type="password" id="password" name="password" class="form-control" required> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="form-group d-flex justify-content-between"> | |
| <div class="form-group btn-container"> | |
| <button type="button" id="connectBtn" class="btn btn-primary">Connect</button> | |
| <button type="reset" class="btn btn-primary">Clear</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="schema-table-section" style="display: none;"> | |
| <div class="row"> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label for="schemas" >Select Schemas <span class="text-danger">*</span></label> | |
| <select type="text" id="schemas" name="schemas" class="form-control" required> | |
| <option value="" selected>Select</option> | |
| <option value="schema1">Lookup</option> | |
| <option value="schema2">Public</option> | |
| <option value="schema3" selected>tenant_default</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="co-md-3" > | |
| <div class="formgroup"> | |
| <label for="tableschema" style="margin-left: 90px;margin-right: 30px;">Select Tables <span class="text-danger">*</span></label> | |
| <div class="dropdown custom-dropdown"> | |
| <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"> | |
| Select Tables | |
| </button> | |
| <ul class="dropdown-menu" aria-labelledby="tablesDropdown"> | |
| <li> | |
| <select type="text" id="tableschema" name="tableschema" class="form-control" multiple required> | |
| <option value="customer_master">customer_master</option> | |
| <option value="efs_company_master">efs_company_master</option> | |
| <option value="efs_group_company_master">efs_group_company_master</option> | |
| <option value="efs_region_master">efs_region_master</option> | |
| <option value="party_address_detail">party_address_detail</option> | |
| <option value="wms_warehouse_master">wms_warehouse_master</option> | |
| </select> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- <div class="col-md-3"> | |
| <div class="btn-container1"> | |
| <button type="button" id="saveBtn" class="btn btn-primary">Save</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row">--> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label for="selectedTables" id="labelselected">Selected Tables</label> | |
| <textarea type="text" id="selectedTables" name="selectedTables" class="form-control" rows="4" | |
| readonly></textarea> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <div class="btn-container1"> | |
| <button type="submit" id="saveBtn" class="btn btn-primary">Save</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p></p> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function () { | |
| fetchCompanies(); | |
| const companySelect = document.getElementById('company'); | |
| const databaseconnectorForm = document.getElementById('databaseconnectorForm'); | |
| companySelect.addEventListener('change', async function () { | |
| $("#message-container").empty(); | |
| const selectedCompanyName = companySelect.options[companySelect.selectedIndex].text; | |
| console.log(`Selected Company Name: ${selectedCompanyName}`); | |
| if (selectedCompanyName !== "Select") { | |
| $("#schema-table-section").hide(); | |
| try { | |
| const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompanyName)}`); | |
| if (!response.ok) { | |
| throw new Error('Network response was not ok'); | |
| } | |
| const data = await response.json(); | |
| console.log(`Company ID: ${data.company_id}`); | |
| const companyId = data.company_id; | |
| document.getElementById('company_id').value = companyId; | |
| if (companyId) { | |
| try { | |
| const connectorsResponse = await fetch(`/api/check_data_connectors?company_id=${companyId}&company_name=${selectedCompanyName}`); | |
| if (!connectorsResponse.ok) { | |
| throw new Error('data connector Network response was not ok'); | |
| } | |
| const connectorsData = await connectorsResponse.json(); | |
| //setMultiSelectValues(document.getElementById('database'), connectorsData.databasetype); // Ensure this is an array | |
| //setMultiSelectValues(document.getElementById('databaseName'), connectorsData.database_name); // Ensure this is an array | |
| document.getElementById('database').value = connectorsData.databasetype; | |
| document.getElementById('server').value = connectorsData.serverip; | |
| document.getElementById('port').value = connectorsData.port; | |
| document.getElementById('databaseName').value = connectorsData.database_name; | |
| document.getElementById('username').value = connectorsData.username; | |
| document.getElementById('password').value = connectorsData.password; | |
| document.getElementById('selectedTables').value = connectorsData.dbtablename; | |
| databaseconnectorForm.style.display = 'block'; | |
| } catch (error) { | |
| document.getElementById('database').value = " "; | |
| document.getElementById('server').value = " "; | |
| document.getElementById('port').value = " "; | |
| document.getElementById('databaseName').value = " "; | |
| document.getElementById('username').value = " "; | |
| document.getElementById('password').value = " "; | |
| document.getElementById('selectedTables').value = " "; | |
| console.error('Error fetching data from data connectors:', error); | |
| ("Company name does not exist. Please fill in the details."); | |
| // Optionally, you can insert a message into the DOM | |
| const messageContainer = document.getElementById('message-container'); | |
| if (messageContainer) { | |
| messageContainer.innerHTML = "<div class='alert alert-danger'>Database details does not exist for this Company name.. Please fill in the details.</div>"; | |
| } | |
| databaseconnectorForm.style.display = 'block'; | |
| } | |
| } else { | |
| console.log(`Company ID does not exist, you can create and save data: ${data.company_id}`); | |
| databaseconnectorForm.style.display = 'none'; | |
| } | |
| } catch (error) { | |
| console.error('Error fetching company ID or data connectors:', error); | |
| databaseconnectorForm.style.display = 'none'; | |
| } | |
| } else { | |
| databaseconnectorForm.style.display = 'none'; | |
| } | |
| }); | |
| document.getElementById("connectBtn").addEventListener("click", function (event) { | |
| var database = document.getElementById("database").value; | |
| var server = document.getElementById("server").value; | |
| var port = document.getElementById("port").value; | |
| var databaseName = document.getElementById("databaseName").value; | |
| var username = document.getElementById("username").value; | |
| var password = document.getElementById("password").value; | |
| if (!database || !server || !port || !databaseName || !username || !password) { | |
| alert("Please fill in all required fields."); | |
| return; | |
| } | |
| document.getElementById("schema-table-section").style.display = "block"; | |
| }); | |
| $("#tableschema").change(function () { | |
| var selectedTables = $(this).val(); | |
| var currentText = $("#selectedTables").val(); | |
| selectedTables.forEach(function (table) { | |
| if (!currentText.includes(table)) { | |
| if (currentText.length > 0) { | |
| currentText += ", " + table; | |
| } else { | |
| currentText = table; | |
| } | |
| } | |
| }); | |
| $("#selectedTables").val(currentText); | |
| }); | |
| // document.getElementById("saveBtn").addEventListener("click", function (event) { | |
| // var tables = Array.from(document.getElementById("tableschema").selectedOptions).map(option => option.value); | |
| // if (tables.length === 0) { | |
| // alert("Please select at least one table."); | |
| // return; | |
| // } | |
| // var selectedTables = document.getElementById("selectedTables"); | |
| // selectedTables.value = tables.join(", "); | |
| // selectedTables.style.display = "block"; | |
| // document.getElementById("labelselected").style.display = "block"; | |
| // document.getElementById("saveBtn1").style.display = "block"; | |
| // }); | |
| document.getElementById("saveBtn").addEventListener("click", async function(event) { | |
| event.preventDefault(); // Prevent default form submission | |
| const form = document.getElementById('databaseconnectorForm'); | |
| const formData = new FormData(form); | |
| try { | |
| const response = await fetch(form.action, { | |
| method: form.method, | |
| body: formData | |
| }); | |
| if (!response.ok) { | |
| throw new Error('Network response was not ok'); | |
| } | |
| const result = await response.json(); | |
| // Optionally, handle the response from the server | |
| if (result.success) { | |
| alert('Data saved successfully'); | |
| } else { | |
| alert('Error saving data: ' + result.message); | |
| } | |
| } catch (error) { | |
| console.error('Error saving data:', error); | |
| alert('An error occurred while saving data'); | |
| } | |
| }); | |
| }); | |
| async function fetchCompanies() { | |
| try { | |
| const response = await fetch('/api/companies'); | |
| if (!response.ok) { | |
| throw new Error('Network response was not ok'); | |
| } | |
| const data = await response.json(); | |
| displayCompanies(data.companies); | |
| } catch (error) { | |
| console.error('Error fetching companies:', error); | |
| } | |
| } | |
| function displayCompanies(companies) { | |
| const companySelect = document.getElementById('company'); | |
| companySelect.innerHTML = '<option value="" selected>Select</option>'; // Reset the dropdown | |
| companies.forEach(company => { | |
| const option = document.createElement('option'); | |
| option.value = company.name; | |
| option.textContent = company.name; | |
| companySelect.appendChild(option); | |
| }); | |
| } | |
| function setMultiSelectValues(selectElement, values) { | |
| // Ensure values is an array | |
| if (!Array.isArray(values)) { | |
| values = [values]; | |
| } | |
| Array.from(selectElement.options).forEach(option => { | |
| option.selected = values.includes(option.value); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |