Hugging Face's logo

Spaces:
Redmind
/
Redmind_GPT_API
Runtime error

App Files Community
1
Redmind_GPT_API / templates /knowledgebase.html
lakshmivairamani's picture
lakshmivairamani
Upload 24 files
4774d1c verified
raw
history blame
18.6 kB
 <!DOCTYPE html>
<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>
<style>
body {
background-color: transparent !important;
}
.content-wrapper {
background-color: transparent !important;
text-align: center;
}
.wrapper {
background-color: transparent !important;
}
.modal-content {
background-color: #fff;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
/* Adjust table width to full container width */
.card-body {
padding: 0;
}
.table {
width: 100%;
}
.text-wrap {
white-space: normal !important;
word-break: break-word;
}
.center-align {
padding-top: 20px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.reduced-width {
width: 50%;
/* Adjust the percentage as needed */
}
</style>
</head>
<body>
{% include 'sidepane.html' %}
<div class="wrapper" style="position: relative; top: 0;">
<div class="content-wrapper">
<div class="content-header">
<div class="container-fluid">
<div class="container mt-2">
<h1 class="m-0 text-center" style="flex-grow: 1;">Knowledge Base</h1>
<div class="form-group center-align">
<label for="company" class="mr-2">Company Name <span class="text-danger">*</span></label>
<select type="text" id="company" name="company" class="form-control reduced-width" required>
<option value="" selected>Select</option>
</select>
</div>
</div>
</div>
</div>
<section class="content" id="contentSection" style="display: none;">
<div class="container-fluid">
<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 d-flex justify-content-end mb-3">
<button class="btn btn-primary" id="add">Add</button>
</div>
<div class="row mb-2">
<div class="col-12">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<div id="message-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>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>NewAge eWMS BusinessRequirementsDocument_V1.9 - Inbound
</td>
<td>GRN Inbound</td>
<td>1.9</td>
<td>Yes</td>
<td>
<button class="btn btn-primary viewButton">View</button>
</td>
</tr>
<tr>
<td>2</td>
<td>NewAge eWMS BusinessRequirementsDocument_V2.3 - Inbound
</td>
<td>GRN Inbound</td>
<td>2.3</td>
<td>No</td>
<td>
<button class="btn btn-primary viewButton">View</button>
</td>
</tr>
<tr>
<td>3</td>
<td>NewAge eWMS BusinessRequirementsDocument_V1.9 - Outbound
</td>
<td>GRN Outbound</td>
<td>1.9</td>
<td>Yes</td>
<td>
<button class="btn btn-primary viewButton">View</button>
</td>
</tr>
<tr>
<td>4</td>
<td class="text-wrap">NewAge eWMS
BusinessRequirementsDocument_V2.2 - Outbound</td>
<td>ASN Outbound</td>
<td>2.2</td>
<td>No</td>
<td>
<button class="btn btn-primary viewButton">View</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</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</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</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>
<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="save" onclick="save_file()" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript to handle modal display -->
<script>
document.addEventListener("DOMContentLoaded", function () {
now = new Date().toISOString().substr(0, 10);
document.getElementById('lastUpdated').value = now
// clearFormFields();
});
document.addEventListener('DOMContentLoaded', function () {
fetchCompanies();
const companySelect = document.getElementById('company');
const documentForm = document.getElementById('documentForm');
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) {
contentSection.style.display='none';
const messageContainer = document.getElementById('message-container');
if (messageContainer) {
messageContainer.innerHTML = "<div class='alert alert-danger'>Document details do not exist for this company. Please fill in the details.</div>";
}
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) {
contentSection.style.display = 'block';
}
} catch (error) {
console.error('Error fetching company ID or data documents:', error);
documentForm.style.display = 'none';
}
} else {
//clearFormFields();
documentForm.style.display = 'block';
}
});
});
function clearFormFields() {
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 () {
clearFormFields();
$('#addModal').modal('show');
});
$('.modal-footer .btn-secondary').on('click', function () {
$('#addModal').modal('hide');
});
// Your save file function here
// async function save_file() {
// alert('Save button clicked');
// // Your save file logic goes here
// }
});
function save_file() {
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();
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("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 => {
alert('Document saved successfully');
// $('#addModal').modal('hide');
})
.catch(error => console.error('Error:', error));
}
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>