Styling configure - extract components
This commit is contained in:
Igor Katson
parent
9ab6fb03ce
commit
66561e64a1
1 changed files with 145 additions and 169 deletions
|
|
@ -5,6 +5,49 @@ import { ErrorComponent } from "./rqbit-webui-src/rqbit-web";
|
||||||
import { invokeAPI } from "./api";
|
import { invokeAPI } from "./api";
|
||||||
import { ErrorDetails } from "./rqbit-webui-src/api-types";
|
import { ErrorDetails } from "./rqbit-webui-src/api-types";
|
||||||
|
|
||||||
|
const FormCheck: React.FC<{
|
||||||
|
label: string,
|
||||||
|
name: string,
|
||||||
|
checked: boolean,
|
||||||
|
onChange: (e: any) => void,
|
||||||
|
disabled?: boolean,
|
||||||
|
}> = ({ label, name, checked, onChange, disabled }) => {
|
||||||
|
return <Form.Group as={Row} controlId={name} className="mb-3">
|
||||||
|
<Form.Label className="col-4">{label}</Form.Label>
|
||||||
|
<div className="col-8">
|
||||||
|
<Form.Check
|
||||||
|
type="switch"
|
||||||
|
name={name}
|
||||||
|
checked={checked}
|
||||||
|
onChange={onChange}
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Form.Group>
|
||||||
|
}
|
||||||
|
|
||||||
|
const FormInput: React.FC<{
|
||||||
|
label: string,
|
||||||
|
name: string,
|
||||||
|
value: string | number,
|
||||||
|
inputType: string,
|
||||||
|
onChange: (e: any) => void,
|
||||||
|
disabled?: boolean,
|
||||||
|
}> = ({ label, name, value, inputType, onChange, disabled }) => {
|
||||||
|
return <Form.Group as={Row} controlId={name} className="mb-3">
|
||||||
|
<Form.Label className="col-4 col-form-label">{label}</Form.Label>
|
||||||
|
<div className="col-8">
|
||||||
|
<Form.Control
|
||||||
|
type={inputType}
|
||||||
|
name={name}
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Form.Group>
|
||||||
|
}
|
||||||
|
|
||||||
export const ConfigModal: React.FC<{
|
export const ConfigModal: React.FC<{
|
||||||
handleOk: (config: RqbitDesktopConfig) => void,
|
handleOk: (config: RqbitDesktopConfig) => void,
|
||||||
initialConfig: RqbitDesktopConfig,
|
initialConfig: RqbitDesktopConfig,
|
||||||
|
|
@ -79,210 +122,143 @@ export const ConfigModal: React.FC<{
|
||||||
className="mb-3">
|
className="mb-3">
|
||||||
|
|
||||||
<Tab className="mb-3" eventKey="home" title="Home">
|
<Tab className="mb-3" eventKey="home" title="Home">
|
||||||
<Form.Group as={Row} controlId="default_download_location" className="mb-3">
|
<FormInput
|
||||||
<Form.Label className="col-4 col-form-label">Default download folder</Form.Label>
|
label="Default download folder"
|
||||||
<div className="col-8">
|
name="default_download_location"
|
||||||
<Form.Control
|
value={config.default_download_location}
|
||||||
type="text"
|
inputType="text"
|
||||||
name="default_download_location"
|
onChange={handleInputChange}
|
||||||
value={config.default_download_location}
|
/>
|
||||||
onChange={handleInputChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</Form.Group>
|
|
||||||
</Tab>
|
</Tab>
|
||||||
|
|
||||||
<Tab className="mb-3" eventKey="dht" title="DHT">
|
<Tab className="mb-3" eventKey="dht" title="DHT">
|
||||||
<legend>DHT config</legend>
|
<legend>DHT config</legend>
|
||||||
|
|
||||||
<Form.Group controlId="dht_disable" className="mb-3">
|
<FormCheck
|
||||||
<Form.Check
|
label="Enable DHT"
|
||||||
type="switch"
|
name="dht.disable"
|
||||||
label="Disable DHT"
|
checked={!config.dht.disable}
|
||||||
name="dht.disable"
|
onChange={handleToggleChange}
|
||||||
checked={config.dht.disable}
|
/>
|
||||||
onChange={handleToggleChange}
|
|
||||||
/>
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group controlId="dht_disable_persistence" className="mb-3">
|
<FormCheck
|
||||||
<Form.Check
|
label="Enable DHT persistence"
|
||||||
type="switch"
|
name="dht.disable_persistence"
|
||||||
label="Disable DHT Persistence"
|
checked={!config.dht.disable_persistence}
|
||||||
name="dht.disable_persistence"
|
onChange={handleToggleChange}
|
||||||
checked={config.dht.disable_persistence}
|
/>
|
||||||
disabled={config.dht.disable}
|
|
||||||
onChange={handleToggleChange}
|
|
||||||
/>
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group as={Row} controlId="dht_persistence_filename" className="mb-3">
|
<FormInput
|
||||||
<Form.Label className="col-4 col-form-label">Persistence Filename</Form.Label>
|
label="Persistence filename"
|
||||||
<div className="col-8">
|
name="dht.persistence_filename"
|
||||||
<Form.Control
|
value={config.dht.persistence_filename}
|
||||||
type="text"
|
inputType="text"
|
||||||
name="dht.persistence_filename"
|
onChange={handleInputChange}
|
||||||
value={config.dht.persistence_filename}
|
/>
|
||||||
disabled={config.dht.disable}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Form.Group>
|
|
||||||
</Tab>
|
</Tab>
|
||||||
|
|
||||||
<Tab className="mb-3" eventKey="tcp_listen" title="TCP">
|
<Tab className="mb-3" eventKey="tcp_listen" title="TCP">
|
||||||
<legend>TCP Listener config</legend>
|
<legend>TCP Listener config</legend>
|
||||||
|
|
||||||
<Form.Group controlId="tcp_listen_disable" className="mb-3">
|
<FormCheck
|
||||||
<Form.Check
|
label="Listen on TCP"
|
||||||
type="switch"
|
name="tcp_listen.disable"
|
||||||
label="Disable TCP Listen"
|
checked={!config.tcp_listen.disable}
|
||||||
name="tcp_listen.disable"
|
onChange={handleToggleChange}
|
||||||
checked={config.tcp_listen.disable}
|
/>
|
||||||
onChange={handleToggleChange}
|
|
||||||
/>
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group as={Row} controlId="tcp_listen_min_port" className="mb-3">
|
<FormCheck
|
||||||
<Form.Label className="col-4 col-form-label">Min port</Form.Label>
|
label="Advertise over UPnP"
|
||||||
<div className="col-8">
|
name="tcp_listen.disable"
|
||||||
<Form.Control
|
checked={!config.tcp_listen.disable}
|
||||||
type="number"
|
onChange={handleToggleChange}
|
||||||
name="tcp_listen.min_port"
|
/>
|
||||||
value={config.tcp_listen.min_port}
|
|
||||||
disabled={config.tcp_listen.disable}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</Form.Group>
|
<FormInput
|
||||||
|
inputType="number"
|
||||||
<Form.Group as={Row} controlId="tcp_listen_max_port" className="mb-3">
|
label="Min port"
|
||||||
<Form.Label className="col-4 col-form-label">Max Port</Form.Label>
|
name="tcp_listen.min_port"
|
||||||
<div className="col-8">
|
value={config.tcp_listen.min_port}
|
||||||
<Form.Control
|
disabled={config.tcp_listen.disable}
|
||||||
type="number"
|
onChange={handleInputChange}
|
||||||
name="tcp_listen.max_port"
|
/>
|
||||||
value={config.tcp_listen.max_port}
|
|
||||||
disabled={config.tcp_listen.disable}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group controlId="upnp_disable" className="mb-3">
|
|
||||||
<Form.Check
|
|
||||||
type="switch"
|
|
||||||
label="Do not advertise TCP port over UPnP"
|
|
||||||
name="upnp.disable"
|
|
||||||
checked={config.upnp.disable}
|
|
||||||
disabled={config.tcp_listen.disable}
|
|
||||||
onChange={handleToggleChange}
|
|
||||||
/>
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
|
<FormInput
|
||||||
|
inputType="number"
|
||||||
|
label="Max port"
|
||||||
|
name="tcp_listen.max_port"
|
||||||
|
value={config.tcp_listen.max_port}
|
||||||
|
disabled={config.tcp_listen.disable}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
</Tab>
|
</Tab>
|
||||||
|
|
||||||
|
|
||||||
<Tab className="mb-3" eventKey="session_persistence" title="Session">
|
<Tab className="mb-3" eventKey="session_persistence" title="Session">
|
||||||
<legend>Session persistence</legend>
|
<legend>Session persistence</legend>
|
||||||
|
|
||||||
<Form.Group controlId="persistence_disable" className="mb-3">
|
<FormCheck
|
||||||
<Form.Check
|
label="Enable persistence"
|
||||||
type="switch"
|
name="persistence.disable"
|
||||||
label="Disable Persistence"
|
checked={!config.persistence.disable}
|
||||||
name="persistence.disable"
|
onChange={handleToggleChange}
|
||||||
checked={config.persistence.disable}
|
/>
|
||||||
onChange={handleToggleChange}
|
|
||||||
/>
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group as={Row} controlId="persistence_filename" className="mb-3">
|
|
||||||
<Form.Label className="col-4 col-form-label">Persistence Filename</Form.Label>
|
|
||||||
<div className="col-8">
|
|
||||||
<Form.Control
|
|
||||||
type="text"
|
|
||||||
name="persistence.filename"
|
|
||||||
value={config.persistence.filename}
|
|
||||||
disabled={config.persistence.disable}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
|
<FormInput
|
||||||
|
label="Persistence filename"
|
||||||
|
name="persistence.filename"
|
||||||
|
inputType="text"
|
||||||
|
value={config.persistence.filename}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
</Tab>
|
</Tab>
|
||||||
|
|
||||||
<Tab className="mb-3" eventKey="peer_opts" title="Peer options">
|
<Tab className="mb-3" eventKey="peer_opts" title="Peer options">
|
||||||
<legend>Peer connection options</legend>
|
<legend>Peer connection options</legend>
|
||||||
|
|
||||||
<Form.Group as={Row} controlId="peer_opts_connect_timeout" className="mb-3">
|
<FormInput
|
||||||
<Form.Label className="col-4 col-form-label">Connect timeout (seconds)</Form.Label>
|
label="Connect timeout (seconds)"
|
||||||
<div className="col-8">
|
inputType="number"
|
||||||
<Form.Control
|
name="peer_opts.connect_timeout"
|
||||||
type="number"
|
value={config.peer_opts.connect_timeout}
|
||||||
name="peer_opts.connect_timeout"
|
onChange={handleInputChange}
|
||||||
value={config.peer_opts.connect_timeout}
|
/>
|
||||||
onChange={handleInputChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</Form.Group>
|
<FormInput
|
||||||
|
label="Read/write timeout (seconds)"
|
||||||
<Form.Group as={Row} controlId="peer_opts_read_write_timeout" className="mb-3">
|
inputType="number"
|
||||||
<Form.Label className="col-4 col-form-label">Read/write timeout (seconds)</Form.Label>
|
name="peer_opts.read_write_timeout"
|
||||||
<div className="col-8">
|
value={config.peer_opts.read_write_timeout}
|
||||||
<Form.Control
|
onChange={handleInputChange}
|
||||||
type="number"
|
/>
|
||||||
name="peer_opts.read_write_timeout"
|
|
||||||
value={config.peer_opts.read_write_timeout}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</Form.Group>
|
|
||||||
</Tab>
|
</Tab>
|
||||||
|
|
||||||
<Tab className="mb-3" eventKey="http_api" title="HTTP API">
|
<Tab className="mb-3" eventKey="http_api" title="HTTP API">
|
||||||
<legend>HTTP API config</legend>
|
<legend>HTTP API config</legend>
|
||||||
|
|
||||||
<Form.Group controlId="http_api_disable" className="mb-3">
|
<FormCheck
|
||||||
<Form.Check
|
label="Enable HTTP API"
|
||||||
type="switch"
|
name="http_api.disable"
|
||||||
label="Disable HTTP API"
|
checked={!config.http_api.disable}
|
||||||
name="http_api.disable"
|
onChange={handleToggleChange}
|
||||||
checked={config.http_api.disable}
|
/>
|
||||||
onChange={handleToggleChange}
|
|
||||||
/>
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group as={Row} controlId="http_api_listen_addr" className="mb-3">
|
<FormCheck
|
||||||
<Form.Label className="col-4 col-form-label">HTTP API Listen Address</Form.Label>
|
label="Read Only"
|
||||||
<div className="col-8">
|
name="http_api.read_only"
|
||||||
<Form.Control
|
checked={config.http_api.read_only}
|
||||||
type="text"
|
disabled={config.http_api.disable}
|
||||||
name="http_api.listen_addr"
|
onChange={handleToggleChange}
|
||||||
value={config.http_api.listen_addr}
|
/>
|
||||||
disabled={config.http_api.disable}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group controlId="http_api_read_only" className="mb-3">
|
|
||||||
<Form.Check
|
|
||||||
type="switch"
|
|
||||||
label="HTTP API Read Only"
|
|
||||||
name="http_api.read_only"
|
|
||||||
checked={config.http_api.read_only}
|
|
||||||
disabled={config.http_api.disable}
|
|
||||||
onChange={handleToggleChange}
|
|
||||||
/>
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
|
<FormInput
|
||||||
|
label="Listen address"
|
||||||
|
inputType="text"
|
||||||
|
name="http_api.listen_addr"
|
||||||
|
value={config.http_api.listen_addr}
|
||||||
|
disabled={config.http_api.disable}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
</Tab>
|
</Tab>
|
||||||
|
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue