settings dialog content separated from sidebar button

This commit is contained in:
Daniel Shleifman
2021-06-29 20:34:27 +03:00
parent a75c05398e
commit aac36eff1d

View File

@@ -13,26 +13,13 @@ import Button from '@material-ui/core/Button'
import { FormControlLabel, InputLabel, Select, Switch } from '@material-ui/core' import { FormControlLabel, InputLabel, Select, Switch } from '@material-ui/core'
import { settingsHost, setTorrServerHost, getTorrServerHost } from 'utils/Hosts' import { settingsHost, setTorrServerHost, getTorrServerHost } from 'utils/Hosts'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { ThemeProvider } from '@material-ui/core/styles'
import { lightTheme } from '../style/materialUISetup' const SettingsDialog = ({ handleClose }) => {
export default function SettingsDialog() {
const { t } = useTranslation() const { t } = useTranslation()
const [open, setOpen] = useState(false)
const [settings, setSets] = useState({}) const [settings, setSets] = useState({})
const [show, setShow] = useState(false) const [show, setShow] = useState(false)
const [tsHost, setTSHost] = useState(getTorrServerHost()) const [tsHost, setTSHost] = useState(getTorrServerHost())
const handleClickOpen = () => setOpen(true)
const handleClose = () => setOpen(false)
const handleSave = () => {
setOpen(false)
const sets = JSON.parse(JSON.stringify(settings))
sets.CacheSize *= 1024 * 1024
axios.post(settingsHost(), { action: 'set', sets })
}
useEffect(() => { useEffect(() => {
axios axios
.post(settingsHost(), { action: 'get' }) .post(settingsHost(), { action: 'get' })
@@ -43,6 +30,12 @@ export default function SettingsDialog() {
.catch(() => setShow(false)) .catch(() => setShow(false))
}, [tsHost]) }, [tsHost])
const handleSave = () => {
handleClose()
const sets = JSON.parse(JSON.stringify(settings))
sets.CacheSize *= 1024 * 1024
axios.post(settingsHost(), { action: 'set', sets })
}
const onInputHost = ({ target: { value } }) => { const onInputHost = ({ target: { value } }) => {
const host = value.replace(/\/$/gi, '') const host = value.replace(/\/$/gi, '')
setTorrServerHost(host) setTorrServerHost(host)
@@ -94,6 +87,204 @@ export default function SettingsDialog() {
RemoveCacheOnDrop, RemoveCacheOnDrop,
} = settings } = settings
return (
<Dialog open onClose={handleClose} aria-labelledby='form-dialog-title' fullWidth>
<DialogTitle id='form-dialog-title'>{t('Settings')}</DialogTitle>
<DialogContent>
<TextField
onChange={onInputHost}
margin='dense'
id='TorrServerHost'
label={t('Host')}
value={tsHost}
type='url'
fullWidth
/>
{show && (
<>
<TextField
onChange={inputForm}
margin='dense'
id='CacheSize'
label={t('CacheSize')}
value={CacheSize}
type='number'
fullWidth
/>
<br />
<TextField
onChange={inputForm}
margin='dense'
id='ReaderReadAHead'
label={t('ReaderReadAHead')}
value={ReaderReadAHead}
type='number'
fullWidth
/>
<br />
<FormControlLabel
control={<Switch checked={PreloadBuffer} onChange={inputForm} id='PreloadBuffer' color='primary' />}
label={t('PreloadBuffer')}
/>
<br />
<FormControlLabel
control={<Switch checked={UseDisk} onChange={inputForm} id='UseDisk' color='primary' />}
label={t('UseDisk')}
/>
<br />
<small>{t('UseDiskDesc')}</small>
<br />
<FormControlLabel
control={
<Switch checked={RemoveCacheOnDrop} onChange={inputForm} id='RemoveCacheOnDrop' color='primary' />
}
label={t('RemoveCacheOnDrop')}
/>
<br />
<small>{t('RemoveCacheOnDropDesc')}</small>
<br />
<TextField
onChange={inputForm}
margin='dense'
id='TorrentsSavePath'
label={t('TorrentsSavePath')}
value={TorrentsSavePath}
type='url'
fullWidth
/>
<br />
<FormControlLabel
control={<Switch checked={EnableIPv6} onChange={inputForm} id='EnableIPv6' color='primary' />}
label={t('EnableIPv6')}
/>
<br />
<FormControlLabel
control={<Switch checked={!DisableTCP} onChange={inputForm} id='DisableTCP' color='primary' />}
label={t('TCP')}
/>
<br />
<FormControlLabel
control={<Switch checked={!DisableUTP} onChange={inputForm} id='DisableUTP' color='primary' />}
label={t('UTP')}
/>
<br />
<FormControlLabel
control={<Switch checked={!DisablePEX} onChange={inputForm} id='DisablePEX' color='primary' />}
label={t('PEX')}
/>
<br />
<FormControlLabel
control={<Switch checked={ForceEncrypt} onChange={inputForm} id='ForceEncrypt' color='primary' />}
label={t('ForceEncrypt')}
/>
<br />
<TextField
onChange={inputForm}
margin='dense'
id='TorrentDisconnectTimeout'
label={t('TorrentDisconnectTimeout')}
value={TorrentDisconnectTimeout}
type='number'
fullWidth
/>
<br />
<TextField
onChange={inputForm}
margin='dense'
id='ConnectionsLimit'
label={t('ConnectionsLimit')}
value={ConnectionsLimit}
type='number'
fullWidth
/>
<br />
<FormControlLabel
control={<Switch checked={!DisableDHT} onChange={inputForm} id='DisableDHT' color='primary' />}
label={t('DHT')}
/>
<br />
<TextField
onChange={inputForm}
margin='dense'
id='DhtConnectionLimit'
label={t('DhtConnectionLimit')}
value={DhtConnectionLimit}
type='number'
fullWidth
/>
<br />
<TextField
onChange={inputForm}
margin='dense'
id='DownloadRateLimit'
label={t('DownloadRateLimit')}
value={DownloadRateLimit}
type='number'
fullWidth
/>
<br />
<FormControlLabel
control={<Switch checked={!DisableUpload} onChange={inputForm} id='DisableUpload' color='primary' />}
label={t('Upload')}
/>
<br />
<TextField
onChange={inputForm}
margin='dense'
id='UploadRateLimit'
label={t('UploadRateLimit')}
value={UploadRateLimit}
type='number'
fullWidth
/>
<br />
<TextField
onChange={inputForm}
margin='dense'
id='PeersListenPort'
label={t('PeersListenPort')}
value={PeersListenPort}
type='number'
fullWidth
/>
<br />
<FormControlLabel
control={<Switch checked={!DisableUPNP} onChange={inputForm} id='DisableUPNP' color='primary' />}
label={t('UPNP')}
/>
<br />
<InputLabel htmlFor='RetrackersMode'>{t('RetrackersMode')}</InputLabel>
<Select onChange={inputForm} type='number' native id='RetrackersMode' value={RetrackersMode}>
<option value={0}>{t('DontAddRetrackers')}</option>
<option value={1}>{t('AddRetrackers')}</option>
<option value={2}>{t('RemoveRetrackers')}</option>
<option value={3}>{t('ReplaceRetrackers')}</option>
</Select>
<br />
</>
)}
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color='primary' variant='outlined'>
{t('Cancel')}
</Button>
<Button onClick={handleSave} color='primary' variant='outlined'>
{t('Save')}
</Button>
</DialogActions>
</Dialog>
)
}
export default function Settings() {
const { t } = useTranslation()
const [open, setOpen] = useState(false)
const handleClickOpen = () => setOpen(true)
const handleClose = () => setOpen(false)
return ( return (
<div> <div>
<ListItem button key={t('Settings')} onClick={handleClickOpen}> <ListItem button key={t('Settings')} onClick={handleClickOpen}>
@@ -103,195 +294,7 @@ export default function SettingsDialog() {
<ListItemText primary={t('Settings')} /> <ListItemText primary={t('Settings')} />
</ListItem> </ListItem>
<ThemeProvider theme={lightTheme}> {open && <SettingsDialog handleClose={handleClose} />}
<Dialog open={open} onClose={handleClose} aria-labelledby='form-dialog-title' fullWidth>
<DialogTitle id='form-dialog-title'>{t('Settings')}</DialogTitle>
<DialogContent>
<TextField
onChange={onInputHost}
margin='dense'
id='TorrServerHost'
label={t('Host')}
value={tsHost}
type='url'
fullWidth
/>
{show && (
<>
<TextField
onChange={inputForm}
margin='dense'
id='CacheSize'
label={t('CacheSize')}
value={CacheSize}
type='number'
fullWidth
/>
<br />
<TextField
onChange={inputForm}
margin='dense'
id='ReaderReadAHead'
label={t('ReaderReadAHead')}
value={ReaderReadAHead}
type='number'
fullWidth
/>
<br />
<FormControlLabel
control={<Switch checked={PreloadBuffer} onChange={inputForm} id='PreloadBuffer' color='primary' />}
label={t('PreloadBuffer')}
/>
<br />
<FormControlLabel
control={<Switch checked={UseDisk} onChange={inputForm} id='UseDisk' color='primary' />}
label={t('UseDisk')}
/>
<br />
<small>{t('UseDiskDesc')}</small>
<br />
<FormControlLabel
control={
<Switch checked={RemoveCacheOnDrop} onChange={inputForm} id='RemoveCacheOnDrop' color='primary' />
}
label={t('RemoveCacheOnDrop')}
/>
<br />
<small>{t('RemoveCacheOnDropDesc')}</small>
<br />
<TextField
onChange={inputForm}
margin='dense'
id='TorrentsSavePath'
label={t('TorrentsSavePath')}
value={TorrentsSavePath}
type='url'
fullWidth
/>
<br />
<FormControlLabel
control={<Switch checked={EnableIPv6} onChange={inputForm} id='EnableIPv6' color='primary' />}
label={t('EnableIPv6')}
/>
<br />
<FormControlLabel
control={<Switch checked={!DisableTCP} onChange={inputForm} id='DisableTCP' color='primary' />}
label={t('TCP')}
/>
<br />
<FormControlLabel
control={<Switch checked={!DisableUTP} onChange={inputForm} id='DisableUTP' color='primary' />}
label={t('UTP')}
/>
<br />
<FormControlLabel
control={<Switch checked={!DisablePEX} onChange={inputForm} id='DisablePEX' color='primary' />}
label={t('PEX')}
/>
<br />
<FormControlLabel
control={<Switch checked={ForceEncrypt} onChange={inputForm} id='ForceEncrypt' color='primary' />}
label={t('ForceEncrypt')}
/>
<br />
<TextField
onChange={inputForm}
margin='dense'
id='TorrentDisconnectTimeout'
label={t('TorrentDisconnectTimeout')}
value={TorrentDisconnectTimeout}
type='number'
fullWidth
/>
<br />
<TextField
onChange={inputForm}
margin='dense'
id='ConnectionsLimit'
label={t('ConnectionsLimit')}
value={ConnectionsLimit}
type='number'
fullWidth
/>
<br />
<FormControlLabel
control={<Switch checked={!DisableDHT} onChange={inputForm} id='DisableDHT' color='primary' />}
label={t('DHT')}
/>
<br />
<TextField
onChange={inputForm}
margin='dense'
id='DhtConnectionLimit'
label={t('DhtConnectionLimit')}
value={DhtConnectionLimit}
type='number'
fullWidth
/>
<br />
<TextField
onChange={inputForm}
margin='dense'
id='DownloadRateLimit'
label={t('DownloadRateLimit')}
value={DownloadRateLimit}
type='number'
fullWidth
/>
<br />
<FormControlLabel
control={<Switch checked={!DisableUpload} onChange={inputForm} id='DisableUpload' color='primary' />}
label={t('Upload')}
/>
<br />
<TextField
onChange={inputForm}
margin='dense'
id='UploadRateLimit'
label={t('UploadRateLimit')}
value={UploadRateLimit}
type='number'
fullWidth
/>
<br />
<TextField
onChange={inputForm}
margin='dense'
id='PeersListenPort'
label={t('PeersListenPort')}
value={PeersListenPort}
type='number'
fullWidth
/>
<br />
<FormControlLabel
control={<Switch checked={!DisableUPNP} onChange={inputForm} id='DisableUPNP' color='primary' />}
label={t('UPNP')}
/>
<br />
<InputLabel htmlFor='RetrackersMode'>{t('RetrackersMode')}</InputLabel>
<Select onChange={inputForm} type='number' native id='RetrackersMode' value={RetrackersMode}>
<option value={0}>{t('DontAddRetrackers')}</option>
<option value={1}>{t('AddRetrackers')}</option>
<option value={2}>{t('RemoveRetrackers')}</option>
<option value={3}>{t('ReplaceRetrackers')}</option>
</Select>
<br />
</>
)}
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color='primary' variant='outlined'>
{t('Cancel')}
</Button>
<Button onClick={handleSave} color='primary' variant='outlined'>
{t('Save')}
</Button>
</DialogActions>
</Dialog>
</ThemeProvider>
</div> </div>
) )
} }