Update templates/update_db.html

templates/update_db.html

@@ -2,7 +2,6 @@
 
 {% block content %}
 <style>
-    /* Ensure the body takes full height for proper layout */
     html, body {
         height: 100%;
         margin: 0;
@@ -11,8 +10,8 @@
     .container {
         display: flex;
         flex-direction: column;
-        height: 50vh; /* Full height of the viewport */
-        overflow: hidden; /* Prevent extra scrollbars */
+        height: 50vh;
+        overflow: hidden;
     }
 
     .card {
@@ -20,9 +19,9 @@
         background-color: #2c2c3e;
         color: #f5f5f5;
         border: none;
-        width: 50%; /* Centered and appropriately sized */
-        max-height: calc(50vh - 50px); /* Adjust to fit within view */
-        overflow-y: auto; /* Add scrolling if content overflows */
+        width: 50%;
+        max-height: calc(50vh - 50px);
+        overflow-y: auto;
     }
 
     .card-header {
@@ -30,13 +29,12 @@
         border-bottom: 2px solid #444;
         padding: 1rem;
         text-align: center;
-        position: sticky; /* Keeps header fixed */
+        position: sticky;
         top: 0;
-        z-index: 1000; /* Ensures it stays above scrollable content */
+        z-index: 1000;
     }
 
     .text-muted {
-        --bs-text-opacity: 1;
         color: rgb(121 136 151 / 75%) !important;
     }
 
@@ -61,10 +59,6 @@
     .btn-primary {
         background-color: #4c4cff;
         border-color: #4c4cff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
     }
 
     .btn-primary:hover {
@@ -72,77 +66,42 @@
         border-color: #3838e8;
     }
 
-    /* Loader on the button */
-    .button-spinner {
-        display: none; /* Hidden by default */
-        width: 20px;
-        height: 20px;
-        border: 3px solid #f3f3f3;
-        border-top: 3px solid #ffffff;
-        border-radius: 50%;
-        animation: spin 1s linear infinite;
-        margin-left: 10px; /* Space between button text and loader */
-    }
-
-    .btn-loading .button-spinner {
-        display: inline-block; /* Show spinner when loading */
-    }
-
-    @keyframes spin {
-        0% {
-            transform: rotate(0deg);
-        }
-        100% {
-            transform: rotate(360deg);
-        }
+    .card::-webkit-scrollbar {
+        width: 8px;
     }
 
-    .btn-loading .btn-text {
-        opacity: 0.5; /* Dim button text when loading */
+    .card::-webkit-scrollbar-thumb {
+        background-color: #444;
+        border-radius: 4px;
     }
 </style>
 
 <div class="container mt-5">
     <div class="card shadow">
         <div class="card-header">
-            <h3>Create a New Vector Database</h3>
+            <h3>Update the Vector Database</h3>
         </div>
         <div class="card-body">
-            <form id="db-form" method="post" enctype="multipart/form-data">
-                <!-- Database Name Input -->
+            <form method="post" enctype="multipart/form-data">
+                <!-- Database Name Display -->
                 <div class="form-group">
                     <label for="db_name" class="form-label">Database Name</label>
-                    <input type="text" id="db_name" name="db_name" class="form-control" placeholder="Enter database name" required>
+                    <input type="text" id="db_name" name="db_name" class="form-control" value="{{ db_name }}" readonly>
                 </div>
             
-                <!-- Folder Upload Input -->
+                <!-- File or Folder Upload -->
                 <div class="form-group mt-3">
-                    <label for="folder" class="form-label">Upload Folder</label>
-                    <input type="file" id="folder" name="folder" class="form-control" webkitdirectory directory multiple required>
-                    <small class="text-muted">Note: You can upload folder having your documents.</small>
+                    <label for="files" class="form-label">Upload Files or Folder</label>
+                    <input type="file" id="files" name="files" class="form-control" webkitdirectory directory multiple>
+                    <small class="text-muted">Note: You can upload multiple files, a folder, or a single file.</small>
                 </div>
             
                 <!-- Submit Button -->
                 <div class="mt-4 text-center">
-                    <button type="submit" class="btn btn-primary px-5">
-                        <span class="btn-text">Create</span>
-                        <div class="button-spinner"></div>
-                    </button>
+                    <button type="submit" class="btn btn-primary px-5">Update</button>
                 </div>
             </form>
         </div>
     </div>
 </div>
-
-<script>
-    // Show loader on button click
-    const form = document.getElementById('db-form');
-    const submitButton = document.querySelector('.btn-primary');
-
-    form.addEventListener('submit', function (event) {
-        submitButton.classList.add('btn-loading'); // Add loading class
-        submitButton.disabled = true; // Disable button to prevent multiple clicks
-    });
-</script>
-
-{% endblock %}
+{% endblock %}