simple python flask webserver from cline (claude 3.7). still unsure about using window.env from html or just an endpoint.

1 files changed, 50 insertions, 4 deletions

diff --git a/js/main.js b/js/main.js
index 80014d3..d85a655 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,5 @@
-//environment passed in from server
-let env = window.env; 
+//environment variables will be fetched from server
+let env = {'thing': 123}; // Default value until loaded
 
 //the application config. default values here which can be overridden by user's local storage
 let cfg = { 
@@ -18,7 +18,7 @@ let dom = {
 
 //APP START HERE
 $(document).ready(async function() {
-
+    console.log(window.env);
     // 1. setup relationship with DOM and grab references to its elements
     log('init DOM');
     await initDOM();
@@ -51,10 +51,56 @@ function initServices(){
     //connect to websocket server
 
     //grab data from REST API
+
+    // Load environment variables from a server
+    return fetch('/api/env')
+        .then(response => {
+            if (response.status == 200){
+                return response.json()
+            } else {
+                return null;
+            }
+        })
+        .then(data => {
+            env = data;
+            console.log('Environment loaded:', env);
+            updateServerStatus('connected');
+            return data;
+        })
+        .catch(error => {
+            console.error('Error loading environment:', error);
+            updateServerStatus('error');
+            return env; // Return default
+        });
+}
+
+// Update server status indicator
+function updateServerStatus(status) {
+    const serverStatus = document.getElementById('server-status');
+    if (!serverStatus) return;
+    
+    switch(status) {
+        case 'connecting':
+            serverStatus.innerHTML = 'Server status: Connecting...';
+            serverStatus.style.color = 'orange';
+            break;
+        case 'connected':
+            serverStatus.innerHTML = 'Server status: Connected (Environment loaded successfully)';
+            serverStatus.style.color = 'green';
+            break;
+        case 'error':
+            serverStatus.innerHTML = 'Server status: Error (Could not load environment)';
+            serverStatus.style.color = 'red';
+            break;
+    }
 }
 
 function initDOM(){
     dom.body = $('body')[0];
+    dom.serverStatus = document.getElementById('server-status');
+    if (dom.serverStatus) {
+        updateServerStatus('connecting');
+    }
 }
 
 function log(msg, lvl=1){
@@ -62,4 +108,4 @@ function log(msg, lvl=1){
         dom.debugInfo.innerHTML = msg; //TODO running log + timestamp
     }
     console.log(msg);
-}
\ No newline at end of file
+}