cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-10 18:03:47 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

feat: app settings

Browse Source 
- user can change the service ports
!!! we cannot change the express server port yet
This commit is contained in:
cv
2021-10-27 22:52:43 +02:00
parent 6b5fb186cc
commit 0a5fa12c21
1 changed files with 145 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/features/modals/AppSettingsModal.jsx
+145 -86
View File
@@ -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 { useState } from 'react';
import { getInfo, ontimePlaceholderInfo, postInfo } from 'app/api/ontimeApi';
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}>
<>
<p className={style.notes}>
Options related to the application
<br />
!!! Changing of these options is not yet implemented !!!
</p>
{status === 'success' && (
<>
<p className={style.notes}>
Options related to the application
<br />
!!! Changes take effect after app restart !!!
</p>
<FormControl id='viewerPort'>
<FormLabel htmlFor='viewerPort'>
Viewer Port
<span className={style.notes}>
Port to access viewers - Default 4001
</span>
</FormLabel>
<Input
size='sm'
name='title'
placeholder='4001'
autoComplete='off'
value={4001}
onChange={(event) => {
// Nothing here yet
}}
isDisabled={true}
style={{ width: '6em' }}
/>
</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
<FormControl id='serverPort'>
<FormLabel htmlFor='serverPort'>
Viewer Port
<span className={style.notes}>Port to access viewers</span>
</FormLabel>
<Input
size='sm'
name='title'
placeholder='4001'
autoComplete='off'
value={4001}
readOnly
style={{ width: '6em', textAlign: 'center' }}
/>
<span className={style.notes}>(Read Only Value)</span>
</FormControl>
<FormControl id='oscInPort'>
<FormLabel htmlFor='oscInPort'>
OSC In Port
<span className={style.notes}>
<br />
App Feedback - Default 127.0.0.1
App Control - Default 8888
</span>
</FormLabel>
<Input
size='sm'
name='oscOutPort'
placeholder='9999'
name='oscInPort'
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'>
<FormLabel htmlFor='oscOutPort'>
OSC Out Port
<span className={style.notes}>
<br />
Default 9999
</span>
</FormLabel>
<Input
size='sm'
name='oscOutPort'
placeholder='9999'
autoComplete='off'
value={9999}
onChange={(event) => {
// Nothing here yet
}}
isDisabled={true}
style={{ width: '6em' }}
/>
</FormControl>
</div>
</>
<div className={style.modalInline}>
<FormControl id='oscOutIP' width='auto'>
<FormLabel htmlFor='oscOutIP'>
OSC Out Target IP
<span className={style.notes}>
<br />
App Feedback - Default 127.0.0.1
</span>
</FormLabel>
<Input
size='sm'
name='oscOutIP'
placeholder='127.0.0.1'
autoComplete='off'
value={formData.oscOutIP}
onChange={(event) => {
setChanged(true);
setFormData({
...formData,
oscOutIP: event.target.value,
});
}}
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>