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" /> | |
| <link rel="stylesheet" href="/static/css/data_connectors.css"> | |
| </head> | |
| <style> | |
| </style> | |
| <body> | |
| {% include 'sidepane.html' %} | |
| <div class="wrapper" style="z-index: 0 !important;"> | |
| <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="container-fluid main" id="main"> | |
| <div class="form-group"> | |
| <input type="hidden" id="company_id" name="company_id" class="form-control" required> | |
| </div> | |
| <h4 id="selectedCompany" class="text-center mb-4"></h4> | |
| <div class="row"> | |
| <div class="col-md-6 col-lg-3 mb-3"> | |
| <div class="form-group"> | |
| <label for="database">Database Type <span class="text-danger">*</span></label> | |
| <select 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-6 col-lg-3 mb-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-6 col-lg-3 mb-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-6 col-lg-3 mb-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-6 col-lg-3 mb-3"> | |
| <div class="form-group"> | |
| <label for="username">UserName <span class="text-danger">*</span></label> | |
| <input type="text" id="username" name="username" class="form-control" required> | |
| </div> | |
| </div> | |
| <div class="col-md-6 col-lg-3 mb-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-12 col-lg-6 d-flex justify-content-center align-items-center mb-3 " | |
| id="btnbox"> | |
| <div class="btn-container"> | |
| <button type="button" id="connectBtn" class="btn btn-primary me-2">Connect</button> | |
| <button type="reset" class="btn btn-secondary">Clear</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Table --> | |
| <div class="container-fluid table-container" style="display: none;" id="table"> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card shadow p-4"> | |
| <h1 class="text-center fs-4" id="tablename">Selected Tables</h1> | |
| <div class="table-responsive"> | |
| <table id="adminlte-table" class="table table-bordered table-striped"> | |
| <thead> | |
| <tr> | |
| <th>Sno</th> | |
| <th>Table Name</th> | |
| <th>Schema Name</th> | |
| </tr> | |
| </thead> | |
| <tbody id="table-body"> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="schema-table-section" style="margin-left: 30px; width: 100%; height: 530px; 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" style="position: absolute; right: 15%;"> | |
| <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 | |
| style="height: 310px !important; width: 330px !important;"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-3" style="margin-top: 50px;margin-left: -100px;"> | |
| <div class="form-group"> | |
| <!-- Label with better spacing --> | |
| <label for="tableschema" class="form-label" style="margin-top: 0px; width: 200%;"> | |
| Available Tables <span class="text-danger">*</span> | |
| </label> | |
| <!-- Dropdown container --> | |
| <div class="dropdown custom-dropdown" style="margin-top: -35px;"> | |
| <!-- Dropdown menu with form styling --> | |
| <ul class="dropdown-menu p-3 w-100" aria-labelledby="tablesDropdown" | |
| style="max-height: 200px; overflow-y: auto;"> | |
| <li> | |
| <!-- Multiple select dropdown with custom styles --> | |
| <select id="tableschema" name="tableschema" class="form-select" multiple | |
| required | |
| style="height: 150px; width: 240px; border-radius: .375rem; box-shadow: 0 1px 2px rgba(0,0,0,.1);margin-left: 10px;padding: 5px;"> | |
| <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> | |
| <div class="col-md-3" style="margin-top: 250px;"> | |
| <div class="btn-container1"> | |
| <button type="button" id="saveBtn" class="btn btn-primary" | |
| style="width: 600px; margin-top: 10px;">Save</button> | |
| </div> | |
| </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> --> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="footer"> | |
| {%include 'footer.html'%} | |
| </footer> | |
| <!-- Include jQuery, DataTables, and AdminLTE Scripts --> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/admin-lte/dist/js/adminlte.min.js"></script> | |
| <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"; | |
| document.getElementById("main").style.display = "none" | |
| document.getElementById("table").style.display = "none" | |
| 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 | |
| // Get values from form fields | |
| const schemaname = document.getElementById("schemas") ? document.getElementById("schemas").value : null; | |
| const tablename = document.getElementById('selectedTables') ? document.getElementById('selectedTables').value : null; | |
| const companyId = document.getElementById('company_id') ? document.getElementById('company_id').value : null; | |
| // Validate required fields | |
| if (!tablename) { | |
| alert('Table name is required'); | |
| return; | |
| } | |
| if (!companyId) { | |
| alert('Company ID is required'); | |
| return; | |
| } | |
| // Save the table name to localStorage | |
| window.localStorage.setItem("tablename", tablename); | |
| // Retrieve table names from localStorage and process | |
| const tableNames = localStorage.getItem("tablename"); // Retrieve the string | |
| if (tableNames) { | |
| const tableArray = tableNames.split(','); // Split the string into an array | |
| tableArray.forEach((table) => console.error(table.trim())); // Print each table name | |
| } else { | |
| console.error("No table names found in localStorage."); | |
| } | |
| const form = document.getElementById('databaseconnectorForm'); | |
| const formData = new FormData(form); | |
| // Append additional data to the formData | |
| formData.append("company_id", companyId); | |
| try { | |
| console.log("inside save", formData); | |
| console.log("company_id", companyId); | |
| // Log form data for debugging | |
| for (const [key, value] of formData.entries()) { | |
| console.error(`${key}: ${value}`); | |
| } | |
| // Send data to the server | |
| 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", data); | |
| const messageContainer = document.getElementById('message-container'); | |
| if (data.created) { | |
| if (messageContainer) { | |
| dismissMessage() | |
| } | |
| // If there are table names in localStorage, display them in the table | |
| const schemaName = schemaname ? schemaname : 'N/A'; // Default to 'N/A' if schema is null | |
| const tableNames = localStorage.getItem("tablename"); | |
| const tableBody = document.getElementById("table-body"); | |
| if (tableNames) { | |
| const tableArray = tableNames.split(','); | |
| let serialNumber = tableBody.rows.length + 1; | |
| tableArray.forEach((table, index) => { | |
| const row = document.createElement("tr"); | |
| row.innerHTML = ` | |
| <td>${serialNumber++}</td> | |
| <td>${table.trim()}</td> | |
| <td>${schemaName}</td> | |
| `; | |
| tableBody.appendChild(row); | |
| }); | |
| } else { | |
| console.error("No table names found in localStorage."); | |
| } | |
| // Initialize DataTable only if it's not already initialized | |
| $(document).ready(function () { | |
| if (!$.fn.dataTable.isDataTable('#adminlte-table')) { | |
| $("#adminlte-table").DataTable({ | |
| responsive: true, | |
| autoWidth: false, | |
| paging: true, | |
| lengthChange: true, | |
| searching: true, | |
| ordering: true, | |
| info: true, | |
| pageLength: 5, | |
| lengthMenu: [5, 10, 15, 20], | |
| language: { | |
| paginate: { | |
| previous: "<button class='btn1'>Previous</button>", | |
| next: "<button class='btn1'>Next</button>", | |
| } | |
| } | |
| }); | |
| } | |
| }); | |
| } | |
| } catch (error) { | |
| console.error('Error saving data:', error); | |
| } | |
| }); | |
| function dismissMessage() { | |
| const messageContainer = document.getElementById('message-container'); | |
| if (messageContainer) { | |
| messageContainer.innerHTML = ''; | |
| document.getElementById("main").style.display = "block" | |
| document.getElementById("table").style.display = "block" | |
| document.getElementById("schema-table-section").style.display = "none" | |
| } | |
| } | |
| 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> |