feat: app settings

- user can change the service ports
!!! we cannot change the express server port yet

client/src/features/modals/AppSettingsModal.jsx

@@ -1,37 +1,78 @@
 import { ModalBody } from '@chakra-ui/modal';
 import { FormLabel, FormControl, Input, Button } from '@chakra-ui/react';
-import { fetchEvent } from 'app/api/eventApi';
+import { getInfo, ontimePlaceholderInfo, postInfo } from 'app/api/ontimeApi';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useFetch } from 'app/hooks/useFetch';
-import { EVENT_TABLE } from 'app/api/apiConstants';
+import { APP_TABLE } from 'app/api/apiConstants';
+import { showErrorToast } from 'common/helpers/toastManager';
 import style from './Modals.module.css';
 
 export default function AppSettingsModal() {
-  const { data, status, isError } = useFetch(EVENT_TABLE, fetchEvent);
+  const { data, status } = useFetch(APP_TABLE, getInfo);
+  const [formData, setFormData] = useState(ontimePlaceholderInfo);
+  const [changed, setChanged] = useState(false);
   const [submitting, setSubmitting] = useState(false);
 
+  useEffect(() => {
+    if (data == null) return;
+
+    setFormData({
+      oscInPort: data.oscInPort,
+      oscOutPort: data.oscOutPort,
+      oscOutIP: data.oscOutIP,
+    });
+  }, [data]);
+
   const submitHandler = async (event) => {
     event.preventDefault();
-    // NOTHING HERE YET
+
+    const f = formData;
+    let e = { status: false, message: '' };
+
+    // Validate fields
+    if (f.oscInPort < 1024 || f.oscInPort > 65535) {
+      // Port in incorrect range
+      e.status = true;
+      e.message += 'OSC IN Port in incorrect range (1024 - 65535)';
+    } else if (f.oscOutPort < 1024 || f.oscOutPort > 65535) {
+      // Port in incorrect range
+      e.status = true;
+      e.message += 'OSC OUT Port in incorrect range (1024 - 65535)';
+    } else if (f.oscInPort === f.oscOutPort) {
+      // Cant use the same port
+      e.status = true;
+      e.message += 'OSC IN and OUT Ports cant be the same';
+    }
+
+    // set fields with error
+    if (e.status) {
+      showErrorToast('Invalid Input', e.message);
+      return;
+    }
+
+    // Post here
+    postInfo(formData);
+
+    setChanged(false);
+    setSubmitting(false);
   };
 
   return (
     <>
       <form onSubmit={submitHandler}>
         <ModalBody className={style.modalBody}>
+          {status === 'success' && (
             <>
               <p className={style.notes}>
                 Options related to the application
                 <br />
-              !!! Changing of these options is not yet implemented !!!
+                !!! Changes take effect after app restart !!!
               </p>
 
-            <FormControl id='viewerPort'>
+              <FormControl id='serverPort'>
-              <FormLabel htmlFor='viewerPort'>
+                <FormLabel htmlFor='serverPort'>
                   Viewer Port
-                <span className={style.notes}>
+                  <span className={style.notes}>Port to access viewers</span>
-                  Port to access viewers - Default 4001
-                </span>
                 </FormLabel>
                 <Input
                   size='sm'
@@ -39,19 +80,17 @@ export default function AppSettingsModal() {
                   placeholder='4001'
                   autoComplete='off'
                   value={4001}
-                onChange={(event) => {
+                  readOnly
-                  // Nothing here yet
+                  style={{ width: '6em', textAlign: 'center' }}
-                }}
-                isDisabled={true}
-                style={{ width: '6em' }}
                 />
+                <span className={style.notes}>(Read Only Value)</span>
               </FormControl>
               <FormControl id='oscInPort'>
                 <FormLabel htmlFor='oscInPort'>
                   OSC In Port
                   <span className={style.notes}>
                     <br />
-                  App control - Default 8888
+                    App Control - Default 8888
                   </span>
                 </FormLabel>
                 <Input
@@ -59,17 +98,24 @@ export default function AppSettingsModal() {
                   name='oscInPort'
                   placeholder='8888'
                   autoComplete='off'
-                value={8888}
+                  type='number'
+                  value={formData.oscInPort}
+                  min='1024'
+                  max='65535'
                   onChange={(event) => {
-                  // Nothing here yet
+                    setChanged(true);
+                    setFormData({
+                      ...formData,
+                      oscInPort: parseInt(event.target.value),
+                    });
                   }}
-                isDisabled={true}
+                  isDisabled={submitting}
-                style={{ width: '6em' }}
+                  style={{ width: '6em', textAlign: 'center' }}
                 />
               </FormControl>
               <div className={style.modalInline}>
-              <FormControl id='oscOutTarget'>
+                <FormControl id='oscOutIP' width='auto'>
-                <FormLabel htmlFor='oscOutTarget'>
+                  <FormLabel htmlFor='oscOutIP'>
                     OSC Out Target IP
                     <span className={style.notes}>
                       <br />
@@ -78,17 +124,22 @@ export default function AppSettingsModal() {
                   </FormLabel>
                   <Input
                     size='sm'
-                  name='oscOutPort'
+                    name='oscOutIP'
-                  placeholder='9999'
+                    placeholder='127.0.0.1'
                     autoComplete='off'
-                  value={'127.0.0.1'}
+                    value={formData.oscOutIP}
                     onChange={(event) => {
-                    // Nothing here yet
+                      setChanged(true);
+                      setFormData({
+                        ...formData,
+                        oscOutIP: event.target.value,
+                      });
                     }}
-                  isDisabled={true}
+                    isDisabled={submitting}
+                    style={{ width: '12em', textAlign: 'right' }}
                   />
                 </FormControl>
-              <FormControl id='oscOutPort'>
+                <FormControl id='oscOutPort' width='auto'>
                   <FormLabel htmlFor='oscOutPort'>
                     OSC Out Port
                     <span className={style.notes}>
@@ -101,21 +152,29 @@ export default function AppSettingsModal() {
                     name='oscOutPort'
                     placeholder='9999'
                     autoComplete='off'
-                  value={9999}
+                    type='number'
+                    value={formData.oscOutPort}
+                    min='1024'
+                    max='65535'
                     onChange={(event) => {
-                    // Nothing here yet
+                      setChanged(true);
+                      setFormData({
+                        ...formData,
+                        oscOutPort: parseInt(event.target.value),
+                      });
                     }}
-                  isDisabled={true}
+                    isDisabled={submitting}
-                  style={{ width: '6em' }}
+                    style={{ width: '6em', textAlign: 'left' }}
                   />
                 </FormControl>
               </div>
             </>
+          )}
           <Button
             colorScheme='blue'
             type='submit'
             isLoading={submitting}
-            disabled={true}
+            disabled={!changed}
           >
             Save
           </Button>