Redmind_GPT_API

Sleeping

App Files Files Community

Redmind commited on Sep 20, 2024

Commit

3b3957e

verified ·

1 Parent(s): 12311a9

Update templates/sidepane.html

Browse files

Files changed (1) hide show

templates/sidepane.html +172 -31

templates/sidepane.html CHANGED Viewed

@@ -1,36 +1,143 @@
-<!-- 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>
-    <div class="container-fluid d-flex justify-content-center align-items-center">
-        <img src="/static/img/redmindlogo3.jpg" alt="Logo" style="width: 80px; height: auto; margin-right: 10px;">
-        <h3 style="text-align: center; margin-bottom: 0;">Redmind GPT  -  {{title}}</h3>
-        <button class="btn btn-primary" style="position: absolute; top: 30px;right:40px;" onclick="logout()">Logout</button>
     </div>
-    <!-- Left navbar links -->
-    <!-- <ul class="navbar-nav">
-        <li class="nav-item">
-            <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
-        </li>
-    </ul> -->
 </nav>
-<!-- Main Sidebar Container -->
-<aside class="main-sidebar sidebar-dark-primary elevation-4" style="width: 200px; position: fixed; top: 0; left: 0; height: 100vh; overflow: hidden;">
-    <!-- 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">
                     <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;">
@@ -44,13 +151,21 @@
                         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" >
                     <a href="{{ url_for('company_profile') }}" class="nav-link">
                         <i class="nav-icon fas fa-users"></i>
@@ -111,8 +226,24 @@
     <!-- /.sidebar -->
 </aside>
 <!-- AdminLTE JS -->
 <script >
         function logout() {
@@ -134,9 +265,9 @@ document.addEventListener("DOMContentLoaded", function() {
         if (siderole==='admin') {
             console.log("Company ID inside sidepane:", sidecompanyId);
             console.log("Role inside sidepane:",siderole);
-                      editCompany(sidecompanyId,siderole);
-            console.log("inside admin before edit");
             updateLinkVisibility(siderole);
     }
@@ -156,7 +287,7 @@ document.addEventListener("DOMContentLoaded", function() {
 }
     }
     async function  editCompany(sidecompanyId,siderole) {
-        console.log("inside edit ", sidecompanyId);
         console.log("inside edit role role",siderole);
         $.getJSON(`/api/getcompanydetails/${sidecompanyId}`, function (company) {
             // Set the value of #llm_tools and trigger change event
@@ -194,13 +325,23 @@ document.addEventListener("DOMContentLoaded", function() {
             dataConnectors:  data_connectors_link.style.display
         }));
                 }
-           updateLinkVisibility(siderole);
         }).fail(function () {
             alert("Error retrieving company details.");
         });
     }
 </script>
 </head>
-</html>

+ <!-- 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 !important;
+        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 !important;
+        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;">Redmind GPT - {{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;">
                         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>
     <!-- /.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() {
         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  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
             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> -->