python service managment on client, port configuration

electron-ui/src/renderer/Settings.tsx

@@ -5,7 +5,7 @@ import './App.css';
 import TextField from '@mui/material/TextField';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
-import { apiFetch } from './api';
+import apiFetch from './api';
 
 type AudioDevice = {
   index: number;
@@ -57,10 +57,26 @@ async function fetchSettings(): Promise<Settings> {
     });
 }
 
-const sendSettingsToBackend = (settings: Settings) => {
+const sendSettingsToBackend = async (settings: Settings) => {
   // Replace with actual backend call
   // Example: window.api.updateSettings(settings);
   console.log('Settings updated:', settings);
+  await apiFetch('settings/update', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ settings }),
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      console.log('Settings update response:', data);
+      if (data.status === 'success') {
+        window.audio.restartService();
+      }
+      return data;
+    })
+    .catch((error) => {
+      console.error('Error updating settings:', error);
+    });
 };
 
 export default function SettingsPage() {
@@ -95,11 +111,10 @@ export default function SettingsPage() {
       });
   }, []);
 
-  useEffect(() => {
-    sendSettingsToBackend(settings);
-  }, [settings]);
+  useEffect(() => {}, [settings]);
 
   const handleChange = () => {
+    sendSettingsToBackend(settings);
     // const { name, value } = e.target;
     // setSettings((prev) => ({
     //   ...prev,
@@ -142,7 +157,7 @@ export default function SettingsPage() {
             type="text"
             name="httpPort"
             value={settings.http_port}
-            onBlur={() => console.log('port blur')}
+            onBlur={() => handleChange()}
             onChange={(e) => {
               if (!Number.isNaN(Number(e.target.value))) {
                 setSettings((prev) => ({
@@ -168,8 +183,12 @@ export default function SettingsPage() {
               if (newDevice) {
                 setSettings((prev) => ({
                   ...prev,
-                  inputDevice: newDevice,
+                  input_device: newDevice,
                 }));
+                sendSettingsToBackend({
+                  ...settings,
+                  input_device: newDevice,
+                });
               }
             }}
             className="ml-2 w-64"
@@ -196,6 +215,10 @@ export default function SettingsPage() {
                   ...prev,
                   output_device: newDevice,
                 }));
+                sendSettingsToBackend({
+                  ...settings,
+                  output_device: newDevice,
+                });
               }
             }}
             className="ml-2 w-64"
@@ -222,6 +245,7 @@ export default function SettingsPage() {
                 }));
               }
             }}
+            onBlur={() => handleChange()}
             className="ml-2 w-[150px]"
           />
         </div>