Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Company Profile</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"> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> | |
| <link href="https://cdn.jsdelivr.net/npm/@ttskch/[email protected]/dist/select2-bootstrap4.min.css" | |
| rel="stylesheet" /> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| padding: 20px; | |
| } | |
| .form-wrapper { | |
| max-width: 600px; /* Set maximum width for the form */ | |
| margin-left:380px; /* Center the form horizontally */ | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-group label { | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| padding-top: 20px; | |
| margin-left: 90px; | |
| display: block; | |
| } | |
| .form-group input, | |
| .form-group select { | |
| width: calc(100% - 90px); | |
| padding: 10px; | |
| margin-left: 90px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| } | |
| /* .form-group select.select2-container--bootstrap4 .select2-selection--multiple { | |
| height: 10px !important; | |
| align-content: center!important; | |
| align-items: center !important; | |
| } */ | |
| .selection{ | |
| margin-left: 90px ; | |
| width: calc(100% - 95px); | |
| min-height:0px; | |
| padding-top: 20px ; | |
| margin-bottom: -20px; | |
| } | |
| .select2-container{ | |
| text-align: center ; | |
| height: 0px ; | |
| margin: -25px 5px; | |
| } | |
| select.form-control[multiple], select.form-control[size]{ | |
| height: 10px ; | |
| } | |
| /* .select2-selection select2-selection--multiple{ | |
| margin-top: 10px; | |
| margin: -25px!important; | |
| } */ | |
| .btn-primary { | |
| margin-right: 10px; | |
| margin-left: 40px; | |
| color: white; | |
| background-color: #007bff; | |
| font-size: 16px; | |
| font-weight: bold; | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 4px; | |
| } | |
| .btn-container { | |
| text-align: center; | |
| margin-top: 20px; | |
| margin-left: 20px; | |
| } | |
| footer { | |
| position: fixed; | |
| bottom: 0; | |
| width: 100%; | |
| color: black; | |
| text-align: right; | |
| padding-right: 20px; | |
| padding-top: 10px; | |
| background-color: #f8f9fa; | |
| border: none ; | |
| } | |
| #llm_tools { | |
| text-align: center; | |
| font-weight: bold; | |
| } | |
| .form-control1{ | |
| margin-top: 0px ; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| {% include 'sidepane.html' %} | |
| <div class="form-wrapper"> | |
| <div id="message-container"></div> | |
| <form id="roleform"> | |
| <div id="roleform" class="form-group ",style="display:none;"> | |
| <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> | |
| <input type="hidden" id="company_id" name="company_id" class="form-control" required> | |
| </form> | |
| <form id="companyProfileForm" class="needs-validation" novalidate action="/submit_company_profile" | |
| method="post"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <input type="hidden" id="userRole" name="userRole" value={{userRole}}> | |
| <label for="company_name">Company Name <span class="text-danger">*</span></label> | |
| <input type="text" id="company_name" name="company_name" class="form-control" required> | |
| <div class="invalid-feedback"> | |
| Please enter the company name. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label for="company_code">Company Code <span class="text-danger">*</span></label> | |
| <input type="text" id="company_code" name="company_code" class="form-control" required> | |
| <div class="invalid-feedback"> | |
| Please enter the company code. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label for="domain">Domain/Business <span class="text-danger">*</span></label> | |
| <input type="text" id="domain" name="domain" class="form-control" required> | |
| <div class="invalid-feedback"> | |
| Please enter the domain/business. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="selection"> | |
| <label for="llm_tools">LLM Tools <span class="text-danger">*</span></label> | |
| <select type='text' id="llm_tools" name="llm_tools" class="form-control" multiple required> | |
| <option value="Database">Database</option> | |
| <option value="Static Documents">Static Documents</option> | |
| <option value="API">API</option> | |
| </select> | |
| <div class="invalid-feedback"> | |
| Please select at least one LLM tool. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="btn-container"> | |
| <button type="submit" class="btn btn-primary">Save</button> | |
| <button type="reset" class="btn btn-primary">Clear</button> | |
| </div> | |
| </form> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script> | |
| <script> | |
| document.addEventListener("DOMContentLoaded", function() { | |
| // // Retrieve user role from sessionStorage | |
| // var role = sessionStorage.getItem('userRole'); | |
| // console.log("Retrieved user role from sessionStorage:", role); // Debugging | |
| // if (role) { | |
| // document.getElementById('userRole').value = role; | |
| // console.log("role is set"); | |
| fetchCompanies(); | |
| const companySelect = document.getElementById('company'); | |
| const companyProfileForm = document.getElementById('companyProfileForm'); | |
| companySelect.addEventListener('change', async function () { | |
| const selectedCompanyName = companySelect.options[companySelect.selectedIndex].text; | |
| console.log(`Selected Company Name: ${selectedCompanyName}`); | |
| if (selectedCompanyName !== "Select") { | |
| 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) { | |
| //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('company_name').value =data.company_name; | |
| document.getElementById('company_code').value = data.company_code; | |
| document.getElementById('domain').value = data.domain; | |
| //document.getElementById('llm_tools').value = data.llm_tools; | |
| $('#llm_tools').val(data.llm_tools).trigger('change'); | |
| } | |
| else { | |
| console.log(`Company ID does not exist, you can create and save data: ${data.company_id}`); | |
| companyProfileForm.style.display = 'none'; | |
| } | |
| }catch (error) { | |
| document.getElementById('company_name').value = " "; | |
| document.getElementById('company_code').value = " "; | |
| document.getElementById('domain').value = " "; | |
| //document.getElementById('llm_tools').value = " "; | |
| $('#llm_tools').val([]).trigger('change'); // Clear the multi-select dropdown | |
| 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>"; | |
| } | |
| companyProfileForm.style.display = 'block'; | |
| } | |
| } | |
| }); | |
| // } | |
| }); | |
| $(document).ready(function () { | |
| // Initialize Select2 for multi-select dropdown | |
| $('#llm_tools').select2({ | |
| theme: 'bootstrap4', | |
| placeholder: 'Select', | |
| allowClear: true | |
| }); | |
| }); | |
| async function fetchCompanies() { | |
| try { | |
| // const roledata=document.getElementById("userRole").value; | |
| // console.log("Role data before fetch:", roledata); // Debugging | |
| // if(roledata==='admin') | |
| // { | |
| // console.log("Admin role detected"); // Debugging | |
| // $('#roleform').show(); | |
| 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); | |
| }); | |
| } | |
| $('#companyProfileForm').on('submit', function (event) { | |
| event.preventDefault(); // Prevent default form submission | |
| // Gather form data | |
| var formData = $(this).serialize(); | |
| $.ajax({ | |
| type: "POST", | |
| url: "/submit_company_profile", | |
| data: formData, | |
| success: function (response) { | |
| alert("Data saved successfully"); // Show success message | |
| setTimeout(function () { | |
| window.location.href = '/company_profile'; // Redirect to the desired page after a delay | |
| }, 2000); // Delay for 2 seconds (2000 milliseconds) | |
| }, | |
| error: function (xhr) { | |
| alert("An error occurred: " + xhr.responseJSON.detail); // Show error message | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |