new feature

vsergione · vsergione · commit 675acd19e623 · 2025-11-14T13:54:53.000+02:00
add the ability to configure the API URL in the frontend and save it in localstorage
diff --git a/index.html b/index.html
@@ -68,6 +68,12 @@
         .search-form .form-check {
             margin-top: 0.5rem;
         }
+        .config-button {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            z-index: 1000;
+        }
     </style>
     <style>
         #filesNavigator {
@@ -88,6 +94,11 @@
     </style>
 </head>
 <body>
+    <!-- Configuration Button -->
+    <button class="btn btn-outline-secondary btn-sm config-button" onclick="showConfigModal()" title="Configure API URL">
+        <i class="fa-solid fa-cog"></i>
+    </button>
+
     <div class="sidebar">
         <h4 class="mb-4">CSV File Manager</h4>
         
@@ -164,6 +175,29 @@ <h4>${filename}</h4>
         </template>
     </div>
 
+    <!-- Configuration Modal -->
+    <div class="modal fade" id="configModal" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">API Configuration</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="form-group mb-3">
+                        <label for="apiUrl" class="form-label">API URL</label>
+                        <input type="url" class="form-control" id="apiUrl" placeholder="https://example.com/api.php">
+                        <div class="form-text">Enter the full URL to your CSV API endpoint</div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-primary" onclick="saveConfig()">Save</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Edit Modal -->
     <div class="modal fade" id="editModal" tabindex="-1">
         <div class="modal-dialog">
@@ -199,12 +233,50 @@ <h5 class="modal-title">New Record</h5>
     </div>
 
     <script>
-        const API_URL = 'api.php';
+        let API_URL = 'api.php';
         let currentFile = null;
         let currentPage = 0;
         let pageSize = 50;
         let authToken = null;
 
+        // Configuration functions
+        function loadConfig() {
+            const savedApiUrl = localStorage.getItem('csvApiUrl');
+            if (savedApiUrl) {
+                API_URL = savedApiUrl;
+            }
+        }
+
+        function showConfigModal() {
+            document.getElementById('apiUrl').value = API_URL;
+            new bootstrap.Modal(document.getElementById('configModal')).show();
+        }
+
+        function saveConfig() {
+            const newApiUrl = document.getElementById('apiUrl').value.trim();
+            if (!newApiUrl) {
+                alert('Please enter a valid API URL');
+                return;
+            }
+
+            // Validate URL format
+            try {
+                new URL(newApiUrl);
+            } catch (e) {
+                alert('Please enter a valid URL');
+                return;
+            }
+
+            API_URL = newApiUrl;
+            localStorage.setItem('csvApiUrl', newApiUrl);
+            
+            // Close modal
+            bootstrap.Modal.getInstance(document.getElementById('configModal')).hide();
+            
+            // Show success message
+            alert('API URL saved successfully!');
+        }
+
         // Input sanitization functions
         function sanitizeInput(input) {
             if (typeof input !== 'string') return input;
@@ -504,8 +576,9 @@ <h5 class="modal-title">New Record</h5>
             });
         }
 
-        // Check for existing token on page load
+        // Initialize on page load
         $(document).ready(function() {
+            loadConfig();
             checkExistingToken();
         });
     </script>
