Handle form fields with arrays and visibility field

This commit is contained in:
Mitch Roote 2018-02-10 20:29:00 -05:00
parent 8418de4c8d
commit 0d3547e7dc

View File

@ -31,7 +31,21 @@ class ConfigContent extends React.Component {
var change = this.state.serverSettings; var change = this.state.serverSettings;
if (e.target.value === "true" || e.target.value === "false") { if (e.target.value === "true" || e.target.value === "false") {
// Ensure Boolean type is used if required
if (e.target.id === "lan" || e.target.id === "public") {
if (e.target.value == "true") {
fieldValue = true
} else {
fieldValue = false
}
change["visibility"][e.target.id] = fieldValue
this.setState({serverSettings: change});
return;
}
fieldValue = Boolean(e.target.value) fieldValue = Boolean(e.target.value)
} else if (e.target.id === "admins" || e.target.id === "tags") {
// Split settings values that are stored as arrays
fieldValue = e.target.value.split(",")
} else { } else {
fieldValue = e.target.value fieldValue = e.target.value
} }
@ -105,66 +119,78 @@ class ConfigContent extends React.Component {
switch(typeof setting) { switch(typeof setting) {
case "number": case "number":
return ( return (
<input <input
key={key} key={key}
ref={key} ref={key}
id={key} id={key}
className="form-control" className="form-control"
defaultValue={setting} defaultValue={setting}
type="number" type="number"
onChange={this.handleServerSettingsChange.bind(this, key)} onChange={this.handleServerSettingsChange.bind(this, key)}
/> />
) )
case "string": case "string":
if (key.includes("password")) { if (key.includes("password")) {
return ( return (
<input <input
key={key} key={key}
ref={key} ref={key}
id={key} id={key}
className="form-control" className="form-control"
defaultValue={setting} defaultValue={setting}
type="password" type="password"
onChange={this.handleServerSettingsChange.bind(this, key)} onChange={this.handleServerSettingsChange.bind(this, key)}
/> />
) )
} else { } else {
return ( return (
<input <input
key={key} key={key}
ref={key} ref={key}
id={key} id={key}
className="form-control" className="form-control"
defaultValue={setting} defaultValue={setting}
type="text" type="text"
onChange={this.handleServerSettingsChange.bind(this, key)} onChange={this.handleServerSettingsChange.bind(this, key)}
/> />
) )
} }
case "boolean": case "boolean":
console.log(key)
return ( return (
<select key={key} ref={key} id={key} className="form-control" onChange={this.handleServerSettingsChange.bind(this, key)}> <select key={key} ref={key} id={key} className="form-control" onChange={this.handleServerSettingsChange.bind(this, key)}>
<option value={true}>True</option> <option value={true}>True</option>
<option value={false}>False</option> <option value={false}>False</option>
</select> </select>
) )
case "object": case "object":
if (Array.isArray(setting)) { if (Array.isArray(setting)) {
return ( return (
<input <input
key={key} key={key}
ref={key} ref={key}
id={key} id={key}
className="form-control" className="form-control"
defaultValue={setting} defaultValue={setting}
type="text" type="text"
onChange={this.handleServerSettingsChange.bind(this, key)} onChange={this.handleServerSettingsChange.bind(this, key)}
/> />
) )
} else { } else {
if (Object.keys(setting).length > 0) { if (key.includes("visibility")) {
//this.formTypeField(key, setting); let vis_fields = []
for (const key in setting) {
const field =
<div>
<p>{key}</p>
<select label={key} key={key} ref={key} id={key} className="form-control" onChange={this.handleServerSettingsChange.bind(this, key)}>
<option selected={setting[key] ? "selected" : ""} value={true}>True</option>
<option selected={!setting[key] ? "selected" : ""} value={false}>False</option>
</select>
</div>
vis_fields.push(field)
}
return vis_fields
} }
} }
default: default: