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"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.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: 30px; | |
| } | |
| /* .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-top: -10px; | |
| margin-left:-22px; | |
| display: block; | |
| } | |
| .form-group input, | |
| .form-group select, | |
| .form-group textarea { | |
| width: 90%; | |
| margin-left:-22px; | |
| padding: 2px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| } | |
| .btn-primary { | |
| margin-right: 10px; | |
| color: white; | |
| font-size: 16px; | |
| font-weight: bold; | |
| } | |
| /* .btn-container { | |
| text-align: center; | |
| margin-top: 20px; | |
| margin-bottom: 10px; | |
| } */ | |
| .btn-primary { | |
| margin-right: 10px; | |
| color: white; | |
| font-size: 16px; | |
| font-weight: bold; | |
| } | |
| .btn-container { | |
| text-align: center; | |
| margin-top: 30px; | |
| margin-left: 20px; | |
| margin-right: 0px; | |
| margin-bottom: 10px; | |
| /* color: white; */ | |
| } | |
| .btn-container1 { | |
| text-align: center; | |
| margin-top: 50px; | |
| margin-left: 30px; | |
| margin-right: 30px; | |
| margin-bottom: 10px; | |
| color: white; | |
| } | |
| /* #selectedTables, | |
| #labelselected { | |
| display: none; | |
| } */ | |
| .btn-primary:focus, | |
| .btn-primary:active { | |
| color: white; | |
| 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 !important; | |
| } | |
| */ | |
| .small-select { | |
| margin-top: 5px; | |
| width: 200px; | |
| /* Adjust the width as needed */ | |
| } | |
| .custom-dropdown { | |
| width: 250px; | |
| /* Adjust the width as needed */ | |
| } | |
| /* Ensure the new row aligns with the previous row */ | |
| #schema-table-section { | |
| margin-left: -20px; /* Adjust this if you need spacing between rows */ | |
| padding-top: 5px; /* Adjust padding if needed */ | |
| } | |
| .alert { | |
| position: relative; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| border: 1px solid transparent; | |
| border-radius: 4px; | |
| } | |
| .alert-success { | |
| color: #3c763d; | |
| background-color: #dff0d8; | |
| border-color: #d6e9c6; | |
| } | |
| .alert-danger { | |
| color: #a94442; | |
| background-color: #f2dede; | |
| border-color: #ebccd1; | |
| } | |
| .close { | |
| position: absolute; | |
| bottom: 10px; | |
| right: 10px; | |
| border: none; | |
| background: none; | |
| font-size: 16px; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| {% include 'sidepane.html' %} | |
| <div class="wrapper"> | |
| <div class="main-header" style="border-bottom: none;"> | |
| <!-- Content Header (Page header) --> | |
| <div class="content-header"> | |
| <div class="container-fluid"> | |
| <div class="container mt-2"> | |
| <!-- <div class="form-group left-align"> | |
| <label for="company" class="mr-1" style="margin-left:-60px;margin-top:-1px;">Company Name <span class="text-danger">*</span></label> | |
| <select type="text" id="company" name="company" class="form-control "style="width: 20%;margin-left:-60px;margin-bottom:-35px" required> | |
| <option value="" selected>Select</option> | |
| </select> | |
| </div> --> | |
| <div class="row"> | |
| <div id="message-container" style="padding:10px 10px;margin-left: 150px;width:500px;margin-bottom:-20px; margin-top: -30px;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <form id="databaseconnectorForm" class="needs-validation" novalidate action="/save_data_connectors" | |
| method="post" > | |
| <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> | |
| <h4 id="selectedCompany" style="margin-left: 300px;margin-bottom: 50px;margin-top: -50px;"></h4> | |
| <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="Postgres">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-group1"> | |
| <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="col-md-3"> | |
| <div class="form-group1"> | |
| <label for="tableschema" style="margin-left: 30px;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: 30px;margin-right: 0px;" 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-group1"> | |
| <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 class="footer"> | |
| {%include 'footer.html'%} | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function () { | |
| // fetchCompanies(); | |
| // const companySelect = document.getElementById('company'); | |
| // const databaseconnectorForm = document.getElementById('databaseconnectorForm'); | |
| // database.addEventListener('change', async function () { | |
| // $("#message-container").empty(); | |
| // }); | |
| // 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; | |
| var table = $('#databaseconnecorsform').show(); | |
| const role = sessionStorage.getItem('userRole'); | |
| const passedCompanyName=sessionStorage.getItem('company_name') | |
| document.getElementById('selectedCompany').innerText = `Company name: ${passedCompanyName}`; | |
| console.log('Current role:', role); // Debug statement to check the role | |
| const storecompany_id=sessionStorage.getItem('company_id'); | |
| document.getElementById("company_id").value=storecompany_id; | |
| data_get_from_db(storecompany_id,passedCompanyName); | |
| }); | |
| async function data_get_from_db(storecompany_id,selectedCompanyName) { | |
| if (storecompany_id) { | |
| try { | |
| const connectorsResponse = await fetch(`/api/check_data_connectors?company_id=${storecompany_id}&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('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 > 1) { | |
| currentText += ", " + table; | |
| } else { | |
| currentText = table; | |
| } | |
| } | |
| }); | |
| $("#selectedTables").val(currentText); | |
| }); | |
| 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) { | |
| alert("Please fill in all required fields."); | |
| return; | |
| } | |
| // document.getElementById("schema-table-section").style.display = "block"; | |
| fetch("/api/connect", { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json" | |
| }, | |
| body: JSON.stringify({ | |
| database_type: database, | |
| server: server, | |
| port: port, | |
| databaseName: databaseName, | |
| username: username, | |
| password: password | |
| }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.success) { | |
| document.getElementById("schema-table-section").style.display = "block"; | |
| populateSchemaDropdown(data.schemas); | |
| // Set default selection for tables | |
| if (data.schemas.length > 0) { | |
| updateTablesDropdown(data.schema_tables, data.schemas[0]); | |
| schemas.addEventListener("change", function (event) { | |
| var selectedSchema = event.target.value; | |
| updateTablesDropdown(data.schema_tables, selectedSchema); | |
| }); | |
| } | |
| } else { | |
| alert("Failed to connect to the database. Please check your credentials."); | |
| document.getElementById("schema-table-section").style.display = "none"; | |
| } | |
| }) | |
| .catch(error => { | |
| console.error("Error:", error); | |
| alert("An error occurred while connecting to the database."); | |
| }); | |
| }); | |
| function populateSchemaDropdown(schemas) { | |
| var schemaSelect = document.getElementById("schemas"); | |
| schemaSelect.innerHTML = ""; // Clear any existing options | |
| schemas.forEach(function (schema) { | |
| var option = document.createElement("option"); | |
| option.value = schema; | |
| option.textContent = schema; | |
| schemaSelect.appendChild(option); | |
| }); | |
| } | |
| function updateTablesDropdown(schemaTables, selectedSchema) { | |
| var tableSchemaSelect = document.getElementById("tableschema"); | |
| tableSchemaSelect.innerHTML = ""; // Clear any existing options | |
| if (schemaTables[selectedSchema]) { | |
| schemaTables[selectedSchema].forEach(function (table) { | |
| var option = document.createElement("option"); | |
| option.value = table; | |
| option.textContent = table; | |
| tableSchemaSelect.appendChild(option); | |
| }); | |
| } | |
| } | |
| document.getElementById("saveBtn").addEventListener("click", async function (event) { | |
| event.preventDefault(); // Prevent the default form submission | |
| // Set the password value | |
| //document.getElementById("password").value = "root"; | |
| const form = document.getElementById('databaseconnectorForm'); | |
| const formData = new FormData(form); | |
| formData.append("company_id", document.getElementById('company_id').value); | |
| try { | |
| console.log("inside save",formData); | |
| console.log("comaonyid", document.getElementById('company_id').value); | |
| for (const [key, value] of formData.entries()) { | |
| console.log(`${key}: ${value}`); | |
| } | |
| const response = await fetch(form.action, { | |
| method: "POST", | |
| body: formData | |
| }); | |
| if (!response.ok) { | |
| throw new Error('Network response was not ok'); | |
| } | |
| const data = await response.json(); | |
| console.log("result", response); | |
| const messageContainer = document.getElementById('message-container'); | |
| if (data.created) { | |
| if (messageContainer) { | |
| const messageType = data.created ? 'alert-success' : 'alert-danger'; | |
| messageContainer.innerHTML = ` | |
| <div class='alert ${messageType}'> | |
| ${data.msg} | |
| <button class='close'style='font-size:medium;margin-top:6px;'onclick='dismissMessage()'>OK</button> | |
| </div>`; | |
| } | |
| } | |
| } catch (error) { | |
| console.error('Error saving data:', error); | |
| const messageContainer = document.getElementById('message-container'); | |
| if (messageContainer) { | |
| messageContainer.innerHTML = ` | |
| <div class='alert alert-danger'> | |
| An error occurred while saving data in database. | |
| <button class='close' style='font-size:medium;margin-top:6px;' onclick='dismissMessage()'>OK</button> | |
| </div>`; | |
| } | |
| } | |
| }); | |
| function dismissMessage() { | |
| const messageContainer = document.getElementById('message-container'); | |
| if (messageContainer) { | |
| messageContainer.innerHTML = ''; | |
| } | |
| } | |
| function handleError() { | |
| document.getElementById('database').value = " "; | |
| document.getElementById('server').value = " "; | |
| document.getElementById('port').value = " "; | |
| document.getElementById('databaseName').value = " "; | |
| document.getElementById('username').value = " "; | |
| document.getElementById('password').value = " "; | |
| } | |
| 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> |