ConnectionConfig inputs

src/renderer/App.tsx

@@ -4,6 +4,7 @@
   useReducer,
   useEffect,
   useLayoutEffect,
+  ChangeEvent,
 } from 'react';
 import Topbar from './Topbar';
 import Editor from './editor/Editor';
@@ -79,6 +80,12 @@
     [-1, -1],
   );
 
+  // for the ConnectionConfigModal
+  const [IPAddress, setIPAddress] = useState('192.168.0.100');
+  const [SSHAddress, setSSHAddress] = useState('192.168.0.100');
+  const [FieldIPAddress, setFieldIPAddress] = useState('localhost');
+  const [FieldStationNum, setFieldStationNum] = useState('4');
+
   // Update windowSize:
   useLayoutEffect(() => {
     const onResize = () =>
@@ -229,6 +236,19 @@
   };
   const closeModal = () => changeActiveModal('');
 
+  const handleConnectionChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { id, value } = event.target;
+    if (id == 'IPAddress') {
+      setIPAddress(value);
+    } else if (id == 'SSHAddress') {
+      setSSHAddress(value);
+    } else if (id == 'FieldIPAddress') {
+      setFieldIPAddress(value);
+    } else if (id == 'FieldStationNum') {
+      setFieldStationNum(value);
+    }
+  };
+
   return (
     <StrictMode>
       <div className="App">
@@ -268,6 +288,11 @@
           <ConnectionConfigModal
             isActive={activeModal === 'ConnectionConfig'}
             onClose={closeModal}
+            onChange={handleConnectionChange}
+            IPAddress={IPAddress}
+            SSHAddress={SSHAddress}
+            FieldIPAddress={FieldIPAddress}
+            FieldStationNum={FieldStationNum}
           />
           <GamepadInfoModal
             isActive={activeModal === 'GamepadInfo'}

src/renderer/modals/ConnectionConfigModal.tsx

@@ -1,18 +1,47 @@
 import Modal from './Modal';
+import { useState, ChangeEvent } from 'react';
 
 /**
  * Modal component exposing info about the connection to the robot (IP address, port, etc.)
  */
 export default function ConnectionInfoModal({
   onClose,
   isActive,
+  onChange,
+  IPAddress,
+  SSHAddress,
+  FieldIPAddress,
+  FieldStationNum
 }: {
   onClose: () => void;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   isActive: boolean;
+  IPAddress: string;
+  SSHAddress: string;
+  FieldIPAddress: string;
+  FieldStationNum: string;
 }) {
   return (
     <Modal modalTitle="Connection info" onClose={onClose} isActive={isActive}>
-      Test
+      <div>
+        IP Address: 
+        <input id="IPAddress" onChange={onChange} value={IPAddress} />
+      </div>
+      <div>
+        SSH Address: 
+        <input id="SSHAddress" onChange={onChange} value={SSHAddress} />
+      </div>
+      <div>
+        Field Control Settings
+        <div>
+          Field Control IP Address: 
+          <input id="FieldIPAddress" onChange={onChange} value={FieldIPAddress} />
+        </div>
+        <div>
+          Field Control Station Number: 
+          <input id="FieldStationNum" onChange={onChange} value={FieldStationNum} />
+        </div>
+      </div>
     </Modal>
   );
 }