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> | |
| <!-- Include AdminLTE CSS --> | |
| <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css"> | |
| <!-- Include DataTables 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: flex; | |
| flex-direction: column; | |
| } | |
| .main-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: flex-start; | |
| padding: 20px; | |
| } | |
| .container { | |
| margin-top: 50px; | |
| max-width: 600px; | |
| padding: 40px; | |
| 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-bottom: 5px; | |
| display: block; | |
| } | |
| .form-group input, .form-group select, .form-group textarea { | |
| width: 100%; | |
| height: auto; | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| } | |
| .btn-primary { | |
| margin-right: 10px; | |
| color: black; | |
| font-size: 16px; | |
| font-weight: bold; | |
| } | |
| h2 { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| } | |
| .btn-container { | |
| text-align: center; | |
| margin-top: 30px; | |
| // margin-bottom: 20px; | |
| color: white; | |
| } | |
| #selectedTables ,#labelselected { | |
| display: none; | |
| } | |
| #saveBtn1{ | |
| display: none; | |
| margin: 0 auto; | |
| } | |
| footer { | |
| position: relative; | |
| bottom: 0; | |
| width: 100%; | |
| color: black; | |
| text-align: right; | |
| padding-right: 245px; | |
| padding-top: 10px; | |
| background-color: #f8f9fa; | |
| border-top: 1px solid #ccc; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| {% include 'sidepane.html' %} | |
| <div class="container mt-2"> | |
| <h2>Data Connectors</h2> | |
| <form id="companyProfileForm" class="needs-validation" novalidate> | |
| <div class="form-group"> | |
| <label for="database">Database</label> | |
| <select type="text" id="database" name="database" class="form-control"> | |
| <option value="" selected>Select</option> | |
| <option value="Postgress">Postgress</option> | |
| <option value="mysql">Mysql</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="server">Server IP</label> | |
| <input type="text" id="server" name="server" class="form-control"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="port">Port</label> | |
| <input type="text" id="port" name="port" class="form-control"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="databaseName">Database Name</label> | |
| <select type="text" id="databaseName" name="databaseName" class="form-control"> | |
| <option value="" selected>Select</option> | |
| <option value="Warehouse">Warehouse</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="username">UserName</label> | |
| <input type="text" id="username" name="username" class="form-control"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="password">Password</label> | |
| <input type="text" id="password" name="password" class="form-control"> | |
| </div> | |
| <div class="btn-container"> | |
| <button type="button" id="connectBtn" class="btn btn-primary">Connect</button> | |
| <button type="reset" class="btn btn-primary">Clear</button> | |
| </div> | |
| <div id="schema-table-section" style="display: none;"> | |
| <div class="form-group"> | |
| <div class="row"> | |
| <div class="col"> | |
| <label for="schemas">Available Schemas</label> | |
| <select type="text" id="schemas" name="schemas" class="form-control"> | |
| <option value="" selected>Select</option> | |
| <option value="schema1">Lookup</option> | |
| <option value="schema2">Public</option> | |
| <option value="schema3">Tenant_default</option> | |
| </select> | |
| </div> | |
| <div class="col"> | |
| <label for="tables">Available Tables</label> | |
| <select type="text" id="tables" name="tables" class="form-control" multiple> | |
| <option value="" selected>Select</option> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label id="labelselected" for="selectedTables">Selected Tables</label> | |
| <textarea id="selectedTables" class="form-control" rows="5" readonly></textarea> | |
| </div> | |
| </div> | |
| <div class="mt-5" id="table-container"> | |
| <!-- Table will be dynamically inserted here --> | |
| </div> | |
| <div class="btn-container"> | |
| <button type="button" id="saveBtn1" class="btn btn-primary">Save</button> | |
| </div> | |
| </form> | |
| </div> | |
| <footer> | |
| {% include 'footer.html' %} | |
| </footer> | |
| <!-- Bootstrap JS (Optional, if you need JavaScript functionality) --> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/adminlte.min.js"></script> | |
| <script> | |
| $(document).ready(function() { | |
| $('#connectBtn').on('click', function(event) { | |
| event.preventDefault(); | |
| alert('Connected!'); | |
| $('#schema-table-section').show(); | |
| $('#saveBtn1').show(); | |
| }); | |
| // Handle Save button click | |
| $('#saveBtn1').on('click', function(event) { | |
| event.preventDefault(); | |
| const selectedTables = $('#tables').val(); | |
| if (selectedTables.length > 0) { | |
| // Show the textarea and populate with selected tables | |
| $('#selectedTables').empty(); | |
| selectedTables.forEach(table => { | |
| $('#selectedTables').append(table + '\n'); | |
| }); | |
| $('#selectedTables').show(); | |
| $('#labelselected').show(); | |
| alert('Data saved successfully!'); | |
| } else { | |
| alert('Please select at least one table.'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |