Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>Knowledge Base</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"> | |
| <!-- Include AdminLTE JS --> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/adminlte.min.js"></script> | |
| <!-- Include DataTables JS --> | |
| <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script> | |
| <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> | |
| <style> | |
| body { | |
| background-color: transparent ; | |
| } | |
| .content-wrapper{ | |
| flex: 1; | |
| overflow-y: auto; | |
| } | |
| .wrapper { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| } | |
| .modal-content { | |
| background-color: #fff; | |
| } | |
| .content-header { | |
| padding: 1rem; | |
| } | |
| h1 { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| } | |
| .card { | |
| padding: 0; | |
| margin-top: -15px; | |
| margin-left: -40px; | |
| } | |
| .table-responsive { | |
| width: 100%; | |
| overflow-x: auto; | |
| /*overflow-y: scroll;*/ | |
| /* Allows horizontal scrolling if necessary */ | |
| } | |
| .table, | |
| .table-bordered { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-right: 7.5px; | |
| } | |
| .text-wrap { | |
| white-space: normal ; | |
| word-break: break-word; | |
| } | |
| div.dataTables_wrapper div.dataTables_length select{ | |
| width: 60px; | |
| display: inline-block; | |
| } | |
| th { | |
| white-space: nowrap; | |
| } | |
| th:nth-child(1), | |
| td:nth-child(1) { | |
| /* Sno column */ | |
| width: 2%; | |
| } | |
| th:nth-child(2), | |
| td:nth-child(2) { | |
| /* Document Name column */ | |
| width: auto; | |
| } | |
| th:nth-child(3), | |
| td:nth-child(3) { | |
| /* Document Description column */ | |
| width: auto; | |
| } | |
| th:nth-child(4), | |
| td:nth-child(4) { | |
| /* Document Version column */ | |
| width: 20%; | |
| } | |
| th:nth-child(5), | |
| td:nth-child(5) { | |
| /* VectorDB Flag column */ | |
| width: auto; | |
| } | |
| th:nth-child(6), | |
| td:nth-child(6) { | |
| /* View column */ | |
| width: 10%; | |
| } | |
| th:nth-child(7), | |
| td:nth-child(7) { | |
| /* Edit column */ | |
| width: 10%; | |
| } | |
| th:nth-child(8), | |
| td:nth-child(8) { | |
| /* Delete column */ | |
| width: auto; | |
| } | |
| .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;"> | |
| <div class="container mt-2"> | |
| <div class="form-group left-align" > | |
| <label for="company" class="mr-1" style="margin-left:-40px; margin-top: 12px;">Company Name <span class="text-danger">*</span></label> | |
| <select type="text" id="company" name="company" class="form-control" style="width:20%;margin-left:-40px;"required> | |
| <option value="" selected>Select</option> | |
| </select> | |
| <div class="col-12 d-flex justify-content-end mb-3"> | |
| <button class="btn btn-primary" style="margin-top:-40px;margin-right: -10px;position: fixed;" | |
| id="add" data-action="add">Add</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div id="message-container" style="margin-left: 200px;width:600px;"></div> | |
| </div> | |
| <section class="content" id="contentSection" style="display: none;"> | |
| <div class="container-fluid"> | |
| <div> | |
| <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-12"> | |
| <div class="card"> | |
| <div id="message-container"> | |
| <div class="card-body table-container"> | |
| <table id="knowledgeTable" class="table table-bordered table-striped"> | |
| <thead> | |
| <tr> | |
| <th>Sno</th> | |
| <th>Document Name</th> | |
| <th>Document Description</th> | |
| <th>Document Version</th> | |
| <th>VectorDB Flag</th> | |
| <th>View</th> | |
| <th>Edit</th> | |
| <th>Delete</th> | |
| <!-- <th style="display:none;">Company ID</th> --> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" | |
| aria-hidden="true"> | |
| <div class="modal-dialog" role="document"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="addModalLabel">Add Document Details</h5> | |
| <button type="button" class="btn-close" data-dismiss="modal" > | |
| <span aria-hidden="true" data-backdrop="static" data-keyboard="false"></span> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <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> | |
| <form id="documentForm"> | |
| <div class="form-group"> | |
| <label for="uploadFile">Upload File<span class="text-danger">*</span></label> | |
| <span id="file-name"></span> | |
| <input type="hidden" id="file_name" name="file_name" class="form-control" required> | |
| <input type="file" class="form-control-file" id="uploadFile" name="uploadFile" required | |
| accept=".pdf,.doc,.docx"> | |
| <small class="form-text text-muted">Accepted formats: .pdf, .doc, .docx</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="documentName">Document Name<span class="text-danger">*</span></label> | |
| <input type="text" class="form-control" id="documentName" name="documentName" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="documentDescription">Document Description<span | |
| class="text-danger">*</span></label> | |
| <textarea class="form-control" id="documentDescription" name="documentDescription" | |
| rows="3" required></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="department">Department<span class="text-danger">*</span></label> | |
| <input type="text" class="form-control" id="department" name="department" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="version">Version<span class="text-danger">*</span></label> | |
| <input type="text" class="form-control" id="version" name="version" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="lastUpdated">Last Updated<span class="text-danger">*</span></label> | |
| <input type="text" class="form-control" id="lastUpdated" name="lastUpdated" required> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="modal-footer"> | |
| <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> --> | |
| <button type="button" id="saveupdate" class="btn btn-primary" style="display: none;">Update</button> | |
| <button type="button" id="save" onclick="save_file()" class="btn btn-primary">Save</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {%include 'footer.html'%} | |
| <!-- JavaScript to handle modal display --> | |
| <script> | |
| document.addEventListener("DOMContentLoaded", function () { | |
| now = new Date().toISOString().replace('T', ' ').substr(0, 19); | |
| document.getElementById('lastUpdated').value = now; | |
| const inputs = document.querySelectorAll("#documentForm input, textarea"); | |
| inputs.forEach((input, index) => { | |
| input.addEventListener("keydown", function (event) { | |
| if (event.key === "Enter") { | |
| event.preventDefault(); | |
| moveToNextInput(inputs, index); | |
| } | |
| }); | |
| }); | |
| function moveToNextInput(inputs, currentIndex) { | |
| const nextInput = inputs[currentIndex + 1]; | |
| if (nextInput) { | |
| nextInput.focus(); | |
| } else { | |
| // Optionally, submit the form or trigger the save button | |
| document.getElementById("save").focus(); | |
| } | |
| } | |
| // $(document).on('click', '.btn-view', function () { | |
| // const companyId = $(this).data('id'); | |
| // console.log("company_id in view",companyId); | |
| // viewCompany(companyId); | |
| // }); | |
| // // Edit company details | |
| // $(document).on('click', '.btn-edit', function () { | |
| // const companyId = $(this).data('id'); | |
| // console.log("company_id in edit",companyId); | |
| // editCompany(companyId); | |
| // }); | |
| // // Delete company | |
| // $(document).on('click', '.btn-delete', function () { | |
| // const kid = $(this).data('id'); // Get the company ID from the da | |
| // console.log("company_id in delete",kid); | |
| // if (confirm("Are you sure you want to delete this company?")) { | |
| // deleteCompany(kid); // Call the delete function with the company ID | |
| // } | |
| // }); | |
| fetchCompanies(); | |
| const companySelect = document.getElementById('company'); | |
| const documentForm = document.getElementById('documentForm'); | |
| const table = $('#knowledgeTable').DataTable(); // Initialize DataTable at the start | |
| companySelect.addEventListener('change', async function () { | |
| $("#message-container").empty(); | |
| 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) { | |
| contentSection.style.display = 'none'; | |
| displayErrorMessage("Document details do not exist for this company. Please fill in the details."); | |
| throw new Error('Network response was not ok'); | |
| } | |
| const data = await response.json(); | |
| console.log('data returned', data); | |
| const companyId = data.company_id; | |
| document.getElementById('company_id').value = companyId; | |
| if (companyId) { | |
| try { | |
| const Response = await fetch(`/api/document_upload?company_id=${companyId}&company_name=${selectedCompanyName}`); | |
| const connectorsResponse = await Response.json(); | |
| console.log("knowledge data table after connecting to table", connectorsResponse); | |
| table.clear(); | |
| if (!Array.isArray(connectorsResponse) || connectorsResponse.length === 0) { | |
| //displayEmptyTable(); | |
| displayErrorMessage("Document details do not exist for this company. Please fill in the details."); | |
| contentSection.style.display = 'none'; | |
| } else { | |
| connectorsResponse.forEach((company, index) => { | |
| table.row.add([ | |
| index + 1, | |
| company.document_name, | |
| company.document_desc, | |
| company.version, | |
| company.vectorDBflag, | |
| `<a href='#' class='btn btn-info btn-sm'data-kid-id='${company.row_id}' data-action="view" onclick='viewCompany(this)''><i class='fas fa-eye'></i></a>`, | |
| `<a href='#' class='btn btn-warning btn-sm'data-kid-id='${company.row_id}' data-action="edit" onclick='editCompany(this)'><i class='fas fa-edit'></i></a>`, | |
| //`<a href='#' class='btn btn-danger btn-sm' onclick='deleteCompany(${company.company_id})'><i class='fas fa-trash'></i></a>`, | |
| `<a href='#' class='btn btn-danger btn-sm' data-kid-id='${company.row_id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`, | |
| company.row_id | |
| // "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye'></i></a>", | |
| // "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>", | |
| // "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></button>" | |
| ]).draw(false); | |
| }); | |
| contentSection.style.display = 'block'; | |
| } | |
| } catch (error) { | |
| console.error('Error fetching company documents:', error); | |
| //displayEmptyTable(); | |
| displayErrorMessage("Document details1 do not exist for this company. Please fill in the details."); | |
| contentSection.style.display = 'none'; | |
| } | |
| } else { | |
| // displayEmptyTable(); | |
| displayErrorMessage("Document details2 for knowledge do not exist for this company. Please fill in the details."); | |
| } | |
| } catch (error) { | |
| console.error('No details for this company ID or data documents:', error); | |
| // displayEmptyTable(); | |
| displayErrorMessage("Document details3 do not exist for this company. Please fill in the details."); | |
| contentSection.style.display = 'none'; | |
| } | |
| } else { | |
| table.clear().draw(); | |
| document.getElementById('contentSection').style.display = 'none'; | |
| clearFormFields(); | |
| } | |
| }); | |
| function displayErrorMessage(message) { | |
| const messageContainer = document.getElementById('message-container'); | |
| if (messageContainer) { | |
| messageContainer.innerHTML = `<div class='alert alert-danger'>${message}</div>`; | |
| } | |
| } | |
| }); | |
| function clearFormFields() { | |
| document.getElementById('file-name').textContent="" | |
| document.getElementById('uploadFile').value = ""; | |
| document.getElementById('documentName').value = ""; | |
| document.getElementById('documentDescription').value = ""; | |
| document.getElementById('department').value = ""; | |
| document.getElementById('version').value = ""; | |
| //document.getElementById('lastUpdated').value = ""; | |
| } | |
| $(document).ready(function () { | |
| // Show modal function | |
| $('#add').on('click', function () { | |
| const modalTitle = document.getElementById('addModalLabel'); | |
| modalTitle.textContent = 'Add Document Details'; | |
| $('#uploadFile').show(); | |
| $('#saveupdate').hide(); | |
| clearFormFields(); | |
| $('#message-container').empty(); // Clear the message container | |
| $('#addModal').modal('show'); | |
| }); | |
| $('.modal-footer .btn-secondary, .modal-header .btn-close').on('click', function () { | |
| $('#addModal').modal('hide'); | |
| }); | |
| $('#KnowledgeTable').DataTable({ | |
| autoWidth: false | |
| }); | |
| }); | |
| function viewCompany(button) { | |
| var companyId = $(button).data('kid-id'); | |
| const modalTitle = document.getElementById('addModalLabel'); | |
| modalTitle.textContent = 'View Document Details'; | |
| $.getJSON(`/api/getknowledgebase/${companyId}`, function (company) { | |
| $('#uploadFile').hide(); | |
| $('#file-name').text(company.file_path).attr('readonly','readonly'); | |
| $('#documentName').val(company.document_name).attr('readonly', 'readonly'); | |
| $('#documentDescription').val(company.document_desc).attr('readonly', 'readonly'); | |
| $('#department').val(company.department).attr('readonly', 'readonly'); | |
| $('#version').val(company.version).attr('readonly', 'readonly'); | |
| //$('#lastUpdated').val(company.last_updated).attr('readonly', 'readonly'); | |
| var lastUpdated = company.last_updated; | |
| $('#lastUpdated').val(lastUpdated).attr('readonly', 'readonly'); | |
| $('#save').hide();// Disable the "Save" button when the modal opens | |
| $('#addModal').modal('show'); | |
| }).fail(function () { | |
| alert("Error retrieving company details."); | |
| }); | |
| } | |
| // Edit company details | |
| function editCompany(button) { | |
| var companyId = $(button).data('kid-id'); | |
| const modalTitle = document.getElementById('addModalLabel'); | |
| modalTitle.textContent = 'Edit Document Details'; | |
| // Fetch company details by ID | |
| $.getJSON(`/api/getknowledgebase/${companyId}`, function (company) { | |
| $('#uploadFile').hide(); | |
| $('#file-name').text(company.file_path).attr('readonly','readonly'); | |
| $('#documentName').removeAttr('readonly'); | |
| $('#documentDescription').removeAttr('readonly'); | |
| $('#department').removeAttr('readonly'); | |
| $('#version').removeAttr('readonly'); | |
| $('#lastUpdated').removeAttr('readonly'); | |
| // $('#vectorDBflag').removeAttr('readonly'); | |
| $('#company_id').removeAttr('readonly'); | |
| $('#save').hide(); | |
| $('#saveupdate').show(); | |
| // Populate the form with the company's details | |
| $('#uploadFile').hide(); | |
| $('#file_name').val(company.file_path); | |
| $('#file-name').val(company.file_path); | |
| $('#documentName').val(company.document_name); | |
| $('#documentDescription').val(company.document_desc); | |
| $('#department').val(company.department); | |
| $('#version').val(company.version); | |
| $('#lastUpdated').val(company.last_updated); | |
| $('#company_id').val(company.company_id); | |
| $('#addModal').modal('show'); | |
| $('saveupdate').show(); | |
| // Update the save button to save the edited company | |
| $('#saveupdate').off('click').on('click', function () { | |
| saveupdate(companyId); // Pass the company ID for updating | |
| }); | |
| }).fail(function () { | |
| alert("Error retrieving company details."); | |
| }); | |
| } | |
| // Delete company | |
| function deleteCompany(button) { | |
| var companyId = $(button).data('kid-id'); | |
| console.log("k_id deleted",companyId); | |
| $.ajax({ | |
| type: "DELETE", | |
| url: `/api/delknowledgebase/${companyId}`, | |
| success: function () { | |
| var table = $('#knowledgeTable').DataTable(); | |
| table.row($(button).closest('tr')).remove().draw(); | |
| alert("Company deleted successfully."); | |
| fetchCompanies(); // Refresh the table | |
| }, | |
| error: function (xhr) { | |
| alert("Error deleting company: " + xhr.responseJSON.detail); | |
| } | |
| }); | |
| } | |
| function saveupdate(companyId) { | |
| console.log("k_id", companyId); | |
| var fileInput = document.getElementById('uploadFile'); // Assuming an input element for file upload | |
| // var filePath = $('#file-name').text(); | |
| // console.log("k_id path", filePath); | |
| var formData = new FormData(); | |
| formData.append('company_id', $('#company_id').val()); | |
| formData.append('file_name', $('#file_name').val()); | |
| formData.append('uploadFile', fileInput.files[0]); // Assuming a file input for upload | |
| formData.append('documentName', $('#documentName').val()); | |
| formData.append('documentDescription', $('#documentDescription').val()); | |
| formData.append('department', $('#department').val()); | |
| formData.append('version', $('#version').val()); | |
| formData.append('vectorDBFlag', "NO"); | |
| formData.append('lastUpdated', $('#lastUpdated').val()); | |
| $.ajax({ | |
| url: `/api/putknowledgebase/${companyId}`, | |
| type: 'PUT', | |
| data: formData, | |
| processData: false, // Required for FormData | |
| contentType: false, // Required for FormData | |
| success: function (response) { | |
| alert('Knowledgebase details updated successfully.'); | |
| $('#addModal').modal('hide'); // Close the modal after saving | |
| fetchCompanies(); | |
| }, | |
| error: function () { | |
| alert('Failed to update company details.'); | |
| } | |
| }); | |
| } | |
| function save_file() { | |
| const form = document.getElementById('documentForm'); | |
| // Check if the form is valid | |
| if (!form.checkValidity()) { | |
| // If the form is invalid, show validation messages and stop the submission | |
| form.reportValidity(); | |
| return; | |
| } | |
| const uploadFile = document.getElementById("uploadFile").files[0]; | |
| const documentName = document.getElementById("documentName").value; | |
| const documentDescription = document.getElementById("documentDescription").value; | |
| const department = document.getElementById("department").value; | |
| const version = document.getElementById("version").value; | |
| const lastUpdated = document.getElementById("lastUpdated").value; | |
| const company_id = document.getElementById("company_id").value; | |
| //const formData = new FormData(); | |
| var formData = new FormData($('#documentForm')[0]); | |
| const vectorDBFlag = "NO"; // Example value | |
| const view = "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye'></i></a>"; | |
| const edit = "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>"; | |
| const dele= "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></a>"; | |
| formData.append("uploadFile", uploadFile); | |
| formData.append("documentName", documentName); | |
| formData.append("documentDescription", documentDescription); | |
| formData.append("department", department); | |
| formData.append("version", version); | |
| formData.append("lastUpdated", lastUpdated); | |
| formData.append("vectorDBflag", vectorDBFlag); | |
| formData.append("company_id", company_id); | |
| fetch('/upload_document', { | |
| method: 'POST', | |
| body: formData | |
| }) | |
| .then(response => { | |
| if (!response.ok) { | |
| throw new Error('Network response was not ok'); | |
| } | |
| return response.text(); | |
| }) | |
| .then(data => { | |
| var table = $('#knowledgeTable').DataTable(); | |
| var rowCount = table.rows().count(); | |
| table.row.add([ | |
| rowCount + 1, | |
| documentName, | |
| documentDescription, | |
| version, | |
| vectorDBFlag, | |
| view, | |
| edit, | |
| dele | |
| ]).draw(false); | |
| const messageContainer = document.getElementById('message-container'); | |
| if(messageContainer) | |
| messageContainer.innerHTML = ` | |
| <div class='alert alert-success'> | |
| Data saved successfully | |
| <button class='close' onclick='dismissMessage()'>OK</button> | |
| </div>`; | |
| // alert('Document saved successfully'); | |
| $('#addModal').modal('hide'); | |
| document.getElementById('contentSection').style.display = 'block'; // Show the table section | |
| }) | |
| .catch(error => console.error('Error:', error)); | |
| } | |
| function dismissMessage() { | |
| const messageContainer = document.getElementById('message-container'); | |
| if (messageContainer) { | |
| messageContainer.innerHTML = ''; | |
| } | |
| } | |
| 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); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |