feat: app settings

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

client/src/features/modals/AppSettingsModal.jsx

@@ -1,121 +1,180 @@
 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
+              <p className={style.notes}>
-              <br />
+                Options related to the application
-              !!! Changing of these options is not yet implemented !!!
+                <br />
-            </p>
+                !!! Changes take effect after app restart !!!
+              </p>
 
-            <FormControl id='viewerPort'>
+              <FormControl id='serverPort'>
-              <FormLabel htmlFor='viewerPort'>
+                <FormLabel htmlFor='serverPort'>
-                Viewer Port
+                  Viewer Port
-                <span className={style.notes}>
+                  <span className={style.notes}>Port to access viewers</span>
-                  Port to access viewers - Default 4001
+                </FormLabel>
-                </span>
+                <Input
-              </FormLabel>
+                  size='sm'
-              <Input
+                  name='title'
-                size='sm'
+                  placeholder='4001'
-                name='title'
+                  autoComplete='off'
-                placeholder='4001'
+                  value={4001}
-                autoComplete='off'
+                  readOnly
-                value={4001}
+                  style={{ width: '6em', textAlign: 'center' }}
-                onChange={(event) => {
+                />
-                  // Nothing here yet
+                <span className={style.notes}>(Read Only Value)</span>
-                }}
+              </FormControl>
-                isDisabled={true}
+              <FormControl id='oscInPort'>
-                style={{ width: '6em' }}
+                <FormLabel htmlFor='oscInPort'>
-              />
+                  OSC In Port
-            </FormControl>
-            <FormControl id='oscInPort'>
-              <FormLabel htmlFor='oscInPort'>
-                OSC In Port
-                <span className={style.notes}>
-                  <br />
-                  App control - Default 8888
-                </span>
-              </FormLabel>
-              <Input
-                size='sm'
-                name='oscInPort'
-                placeholder='8888'
-                autoComplete='off'
-                value={8888}
-                onChange={(event) => {
-                  // Nothing here yet
-                }}
-                isDisabled={true}
-                style={{ width: '6em' }}
-              />
-            </FormControl>
-            <div className={style.modalInline}>
-              <FormControl id='oscOutTarget'>
-                <FormLabel htmlFor='oscOutTarget'>
-                  OSC Out Target IP
                   <span className={style.notes}>
                     <br />
-                    App Feedback - Default 127.0.0.1
+                    App Control - Default 8888
                   </span>
                 </FormLabel>
                 <Input
                   size='sm'
-                  name='oscOutPort'
+                  name='oscInPort'
-                  placeholder='9999'
+                  placeholder='8888'
                   autoComplete='off'
-                  value={'127.0.0.1'}
+                  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', textAlign: 'center' }}
                 />
               </FormControl>
-              <FormControl id='oscOutPort'>
+              <div className={style.modalInline}>
-                <FormLabel htmlFor='oscOutPort'>
+                <FormControl id='oscOutIP' width='auto'>
-                  OSC Out Port
+                  <FormLabel htmlFor='oscOutIP'>
-                  <span className={style.notes}>
+                    OSC Out Target IP
-                    <br />
+                    <span className={style.notes}>
-                    Default 9999
+                      <br />
-                  </span>
+                      App Feedback - Default 127.0.0.1
-                </FormLabel>
+                    </span>
-                <Input
+                  </FormLabel>
-                  size='sm'
+                  <Input
-                  name='oscOutPort'
+                    size='sm'
-                  placeholder='9999'
+                    name='oscOutIP'
-                  autoComplete='off'
+                    placeholder='127.0.0.1'
-                  value={9999}
+                    autoComplete='off'
-                  onChange={(event) => {
+                    value={formData.oscOutIP}
-                    // Nothing here yet
+                    onChange={(event) => {
-                  }}
+                      setChanged(true);
-                  isDisabled={true}
+                      setFormData({
-                  style={{ width: '6em' }}
+                        ...formData,
-                />
+                        oscOutIP: event.target.value,
-              </FormControl>
+                      });
-            </div>
+                    }}
-          </>
+                    isDisabled={submitting}
+                    style={{ width: '12em', textAlign: 'right' }}
+                  />
+                </FormControl>
+                <FormControl id='oscOutPort' width='auto'>
+                  <FormLabel htmlFor='oscOutPort'>
+                    OSC Out Port
+                    <span className={style.notes}>
+                      <br />
+                      Default 9999
+                    </span>
+                  </FormLabel>
+                  <Input
+                    size='sm'
+                    name='oscOutPort'
+                    placeholder='9999'
+                    autoComplete='off'
+                    type='number'
+                    value={formData.oscOutPort}
+                    min='1024'
+                    max='65535'
+                    onChange={(event) => {
+                      setChanged(true);
+                      setFormData({
+                        ...formData,
+                        oscOutPort: parseInt(event.target.value),
+                      });
+                    }}
+                    isDisabled={submitting}
+                    style={{ width: '6em', textAlign: 'left' }}
+                  />
+                </FormControl>
+              </div>
+            </>
+          )}
           <Button
             colorScheme='blue'
             type='submit'
             isLoading={submitting}
-            disabled={true}
+            disabled={!changed}
           >
             Save
           </Button>