Spaces:
Sleeping
Sleeping
| <!-- sidepane.html --> | |
| <!-- This file represents the sidepane component of a web application. It contains the navigation menu and sidebar. --> | |
| <!-- <!DOCTYPE html> | |
| <html lang="en"> --> | |
| <head> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <!-- Include Bootstrap JS --> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script> | |
| <style> | |
| /* Sidebar Styles */ | |
| .main-sidebar { | |
| background: #222; /* Dark background for sidebar */ | |
| color: #fff; | |
| width: 250px; /* Default width */ | |
| height: 600px ; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| transition: all 0.3s ease; | |
| /* Ensure sidebar content scrolls if needed */ | |
| } | |
| .main-sidebar.toggled { | |
| width: 60px; /* Minimized width */ | |
| } | |
| .sidebar-header { | |
| text-align: center; | |
| padding: 15px; | |
| background: #333; /* Dark background for header */ | |
| color: #fff; | |
| border-radius: 5px; | |
| margin-bottom: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .sidebar-header i { | |
| font-size: 1.5rem; | |
| } | |
| .sidebar-header .menu-text { | |
| font-size: 14px; | |
| font-weight: bold; | |
| } | |
| /* Navigation Menu */ | |
| .nav-link { | |
| display: flex; | |
| align-items: center; | |
| color: #fff; | |
| padding: 10px; | |
| border-radius: 5px; | |
| transition: background-color 0.3s ease; | |
| text-decoration: none; | |
| } | |
| .nav-link:hover { | |
| background-color: #F8BE12; /* Highlight color on hover */ | |
| color: #fff; | |
| } | |
| .menu-text { | |
| margin-left: 10px; | |
| font-weight: bold; | |
| color: #fff; | |
| } | |
| /* Sidebar Icon Sizes */ | |
| .nav-icon { | |
| font-size: 20px; | |
| } | |
| /* Hide menu text when sidebar is collapsed */ | |
| .main-sidebar.toggled .menu-text { | |
| display: none; | |
| } | |
| /* Content Wrapper */ | |
| #content-wrapper { | |
| margin-left: 250px; | |
| padding: 15px; | |
| height: 700px ; | |
| transition: margin-left 0.3s ease; | |
| } | |
| #content-wrapper.toggled { | |
| margin-left: 60px; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 991px) { | |
| .main-sidebar { | |
| width: 60px; /* Default to minimized on small screens */ | |
| } | |
| #content-wrapper { | |
| margin-left: 60px; | |
| } | |
| .main-sidebar.toggled + #content-wrapper { | |
| margin-left: 0; | |
| } | |
| } | |
| </style> | |
| <nav class="main-header navbar navbar-expand navbar-light bg-white shadow-sm" style="padding: 15px; "> | |
| <div class="container-fluid d-flex justify-content-between align-items-center"> | |
| <!-- Toggle Sidebar Button --> | |
| <button class="btn btn-outline-secondary" id="sidebarToggle" style="margin-right: 15px;"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <!-- Logo and Title Section --> | |
| <div class="d-flex align-items-center"> | |
| <img src="/static/img/redmindlogo3.jpg" alt="Logo" style="width: 70px; height: auto; margin-right: 15px;"> | |
| <h3 class="m-0" style="font-weight: 500;">RedMindGPT - {{title}}</h3> | |
| </div> | |
| <!-- Buttons Section --> | |
| <div> | |
| <button class="btn btn-primary me-3" id="add">Add</button> | |
| <button class="btn btn-primary" onclick="logout()">Logout</button> | |
| </div> | |
| </div> | |
| </nav> | |
| <div id="wrapper"> | |
| <!-- Main Sidebar Container --> | |
| <aside class="main-sidebar sidebar-custom elevation-4" id="sidebarPanel"> | |
| <!-- Sidebar --> | |
| <div class="sidebar"> | |
| <!-- Sidebar Menu --> | |
| <nav class="mt-2"> | |
| <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false" id="sidebarMenu"> | |
| <input type="hidden" id="userRole" name="userRole" value={{role}}> | |
| <input type="hidden" id="company_id" name="company_id" value={{company_id}}> | |
| <div class="form-group"style="display: none;"> | |
| <label for="llm_tools" >LLM Tools<span class="text-danger">*</span></label> | |
| <select class="form-control" id="llm_tools" name="llm_tools" multiple required style="display: none;"> | |
| <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> | |
| <li class="nav-item"> | |
| <a href="{{url_for('dashboard')}}" class="nav-link"> | |
| <i class="nav-icon fas fa-home"></i> | |
| <p>Dashboard</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <div class="sidebar-header"> | |
| <i class="nav-icon fas fa-building"></i> | |
| <span class="menu-text" id="selectedCompany">Select a company</span> <!-- Initial text as fallback --> | |
| <!-- <span class="menu-text" id="selectedCompany">{{company_name}}</span> --> | |
| </div> | |
| </li> | |
| <li class="nav-item" > | |
| <a href="{{ url_for('company_profile') }}" class="nav-link"> | |
| <i class="nav-icon fas fa-users"></i> | |
| <p>Company Profile</p> | |
| </a> | |
| </li> | |
| <li class="nav-item" id="knowledgebase_link"> | |
| <a href="{{ url_for('knowledgebase') }}" class="nav-link"> | |
| <i class="nav-icon fas fa-cogs"></i> | |
| <p>KnowledgeBase</p> | |
| </a> | |
| </li> | |
| <li class="nav-item" id="data_connectors_link"> | |
| <a href="{{ url_for('data_connectors') }}" class="nav-link"> | |
| <i class="nav-icon fas fa-cogs"></i> | |
| <p>Data Connectors</p> | |
| </a> | |
| </li> | |
| <li class="nav-item" id="api_connectors_link"> | |
| <a href="{{ url_for('API_connectors') }}" class="nav-link"> | |
| <i class="nav-icon fas fa-cogs"></i> | |
| <p>API Connectors</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="{{url_for('prompt_template')}}" class="nav-link"> | |
| <i class="nav-icon fas fa-cogs"></i> | |
| <p>Prompt Templates</p> | |
| </a> | |
| </li> | |
| <!--<li class="nav-item"> | |
| <a href="#" class="nav-link"> | |
| <i class="nav-icon fas fa-cogs"></i> | |
| <p>LLM Settings</p> | |
| </a> | |
| <ul class="nav nav-treeview"> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Sublink 1</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Sublink 2</p> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> --> | |
| <!-- Add more navigation links here --> | |
| </ul> | |
| </nav> | |
| <!-- /.sidebar-menu --> | |
| </div> | |
| <!-- /.sidebar --> | |
| </aside> | |
| <input type="hidden" id="userRole" name="userRole" value={{role}}> | |
| <input type="hidden" id="company_id" name="company_id" value={{company_id}}> | |
| <div class="form-group"style="display: none;"> | |
| <label for="llm_tools" >LLM Tools<span class="text-danger">*</span></label> | |
| <select class="form-control" id="llm_tools" name="llm_tools" multiple required style="display: none;"> | |
| <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> | |
| <!-- AdminLTE JS --> | |
| <script > | |
| function logout() { | |
| sessionStorage.removeItem('role'); | |
| sessionStorage.clear(); | |
| window.location.href = '/'; | |
| } | |
| document.addEventListener("DOMContentLoaded", function() { | |
| const company_id1 = document.getElementById("company_id").value; | |
| const role1 = document.getElementById("userRole").value; | |
| sessionStorage.setItem('siderole1',role1); | |
| sessionStorage.setItem('sidecompanyId1',company_id1); | |
| const sidecompanyId = sessionStorage.getItem('sidecompanyId1'); | |
| const siderole = sessionStorage.getItem('siderole1'); | |
| if (siderole==='admin') { | |
| console.log("Company ID inside sidepane:", sidecompanyId); | |
| console.log("Role inside sidepane:",siderole); | |
| editCompany(sidecompanyId,siderole); | |
| console.log("inside admin after edit"); | |
| updateLinkVisibility(siderole); | |
| } | |
| }); | |
| async function updateLinkVisibility(siderole) { | |
| //const role = sessionStorage.getItem('role'); | |
| if(siderole==='admin') | |
| { | |
| const displayState = JSON.parse(sessionStorage.getItem('displayState')); | |
| // Update the visibility of links based on the stored state | |
| document.getElementById('api_connectors_link').style.display = displayState.apiConnectors; | |
| document.getElementById('knowledgebase_link').style.display = displayState.knowledgeBase; | |
| document.getElementById('data_connectors_link').style.display = displayState.dataConnectors | |
| } | |
| } | |
| async function editCompany(sidecompanyId,siderole) { | |
| console.log("inside edit company id", sidecompanyId); | |
| console.log("inside edit role role",siderole); | |
| $.getJSON(`/api/getcompanydetails/${sidecompanyId}`, function (company) { | |
| // Set the value of #llm_tools and trigger change event | |
| $('#llm_tools').val(company.llm_tools.split(',')).trigger('change'); | |
| // Get the selected values from #llm_tools | |
| const llmTools = $('#llm_tools').val(); // This is an array | |
| console.log("inside sidepane edit llmTools", llmTools); | |
| //const role =sessionStorage.getItem('role'); | |
| if (llmTools && llmTools.length > 0) { | |
| console.log("inside if"); | |
| // Example: Conditionally display some links based on llm_tools | |
| if (api_connectors_link) { | |
| api_connectors_link.style.display = llmTools.includes('API') ? 'block' : 'none'; | |
| console.log("state api",api_connectors_link.style.display ); | |
| } | |
| if (knowledgebase_link) { | |
| knowledgebase_link.style.display = llmTools.includes('Static Documents') ? 'block' : 'none'; | |
| console.log("state know", knowledgebase_link.style.display); | |
| } | |
| if (data_connectors_link) { | |
| data_connectors_link.style.display = llmTools.includes('Database') ? 'block' : 'none'; | |
| console.log("state dataconn", data_connectors_link.style.display); | |
| } | |
| console.log("inside storageadmin"); | |
| sessionStorage.setItem('displayState', JSON.stringify({ | |
| apiConnectors: api_connectors_link.style.display, | |
| knowledgeBase: knowledgebase_link.style.display , | |
| dataConnectors: data_connectors_link.style.display | |
| })); | |
| updateLinkVisibility(siderole); | |
| } | |
| }).fail(function () { | |
| alert("Error retrieving company details."); | |
| }); | |
| } | |
| document.getElementById('sidebarToggle').addEventListener('click', function() { | |
| const sidebar = document.getElementById('sidebarPanel'); | |
| const contentWrapper = document.getElementById('content-wrapper'); | |
| // Toggle sidebar width and content margin | |
| sidebar.classList.toggle('toggled'); | |
| contentWrapper.classList.toggle('toggled'); | |
| }); | |
| </script> | |
| </head> | |
| <!-- </html> --> | |