Add apiConfig.json to ui runtime

pi/docker-compose.yaml

@@ -16,6 +16,8 @@ services:
     image: ghcr.io/jordojordo/lawndon-pi-ui:latest
     ports:
       - "80:80" # Expose UI
+    volumes:
+      - ./apiConfig.json:/usr/share/nginx/html/apiConfig.json:ro # Mount config for API
     depends_on:
       - server
     networks:

pi/ui/public/apiConfig.json

@@ -0,0 +1,3 @@
+{
+  "API_URL": "http://localhost:5000"
+}

pi/ui/src/components/UWBVisualization.vue

@@ -16,7 +16,7 @@ interface AnchorConfig {
 export default defineComponent({
   name: 'UWBVisualization',
   setup() {
-    const backendUrl = import.meta.env.VITE_API_URL || window.location.origin;
+    const backendUrl = ref('');
     const socket = inject('socket') as Socket;
 
     const uwbData = ref<AnchorData[]>([]);
@@ -36,25 +36,45 @@ export default defineComponent({
 
     const scalingFactor = 50; // Adjust to control visualization size
 
-    onMounted(() => {
-      fetch(`${ backendUrl }/api/config`)
-        .then((response) => response.json())
-        .then((configData: AnchorConfig) => {
-          console.log('## configData:', configData);
-          parseConfiguration(configData);
-          initVisualization();
-
-          socket.on('uwb_data', (data: AnchorData[]) => {
-            uwbData.value = data;
-            updateVisualization();
-            if (uwbData?.value.length === 3) {
-              console.log('Incoming UWB data:', JSON.parse(JSON.stringify(uwbData.value)));
-            }
-          });
-        })
-        .catch((error) => {
-          console.error('Failed to load configuration:', error);
+    const loadRuntimeConfig = async() => {
+      try {
+        const response = await fetch('/apiConfig.json'); // Fetch runtime configuration
+        const config = await response.json();
+
+        backendUrl.value = config.API_URL || window.location.origin;
+        console.log('Loaded runtime config:', backendUrl.value);
+      } catch (error) {
+        console.error('Failed to load runtime config:', error);
+        backendUrl.value = window.location.origin; // Fallback to window.location.origin
+      }
+    };
+
+
+    const fetchBackendConfig = async() => {
+      try {
+        const response = await fetch(`${ backendUrl.value }/api/config`);
+        const configData: AnchorConfig = await response.json();
+
+        console.log('Backend configuration:', configData);
+        parseConfiguration(configData);
+        initVisualization();
+
+        socket.on('uwb_data', (data: AnchorData[]) => {
+          uwbData.value = data;
+          updateVisualization();
+
+          if (uwbData?.value.length === 3) {
+            console.log('Incoming UWB data:', JSON.parse(JSON.stringify(uwbData.value)));
+          }
         });
+      } catch (error) {
+        console.error('Failed to load backend configuration:', error);
+      }
+    };
+
+    onMounted(async() => {
+      await loadRuntimeConfig(); // Load runtime config first
+      await fetchBackendConfig(); // Fetch backend configuration
     });
 
     function parseConfiguration(config: AnchorConfig) {

pi/ui/src/main.ts

@@ -7,14 +7,22 @@ import { io, Socket } from 'socket.io-client';
 import App from './App.vue';
 import router from './router';
 
-const app = createApp(App);
+async function loadConfig() {
+  const response = await fetch('/apiConfig.json');
 
-const backendUrl = import.meta.env.VITE_API_URL || window.location.origin;
-const socket: Socket = io(backendUrl, { transports: ['websocket'] });
+  return response.json();
+}
 
-app.provide('socket', socket);
+loadConfig().then((config) => {
+  const backendUrl = config.API_URL || window.location.origin;
+  const socket: Socket = io(backendUrl, { transports: ['websocket'] });
 
-app.use(createPinia());
-app.use(router);
+  const app = createApp(App);
 
-app.mount('#app');
+  app.provide('socket', socket);
+
+  app.use(createPinia());
+  app.use(router);
+
+  app.mount('#app');
+});

pi/ui/vite.config.ts

@@ -1,39 +1,15 @@
 import { fileURLToPath, URL } from 'node:url';
-import os from 'os';
 
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueDevTools from 'vite-plugin-vue-devtools';
 
-function getLocalIP() {
-  const networkInterfaces = os.networkInterfaces();
-
-  for (const interfaceName in networkInterfaces) {
-    const interfaceInfo = networkInterfaces[interfaceName];
-
-    if (!interfaceInfo) {
-      continue;
-    }
-
-    for (const info of interfaceInfo) {
-      if (info.family === 'IPv4' && !info.internal) {
-        return info.address;
-      }
-    }
-  }
-
-  return 'localhost'; // Fallback to localhost if no external IP is found
-}
-
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     vueDevTools(),
   ],
   resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } },
-  server:  {
-    proxy: { '/api': 'http://localhost:5000' },
-    host:  getLocalIP()
-  },
+  server:  { proxy: { '/api': 'http://localhost:5000' } },
 });