131 lines
3.8 KiB
JavaScript
131 lines
3.8 KiB
JavaScript
import React from 'react';
|
|
import './ConfigurationItem.css';
|
|
import settings from '../../assets/settings';
|
|
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
|
import {faInfoCircle} from '@fortawesome/free-solid-svg-icons';
|
|
import {connect} from 'react-redux';
|
|
import {notifyInfo} from '../../redux/actions/error_actions';
|
|
|
|
const mapDispatchToProps = dispatch => {
|
|
return {
|
|
notifyInfo: (title, msg) => dispatch(notifyInfo(title, msg))
|
|
}
|
|
};
|
|
|
|
export default connect(null, mapDispatchToProps)(props => {
|
|
const handleChanged = (e) => {
|
|
const target = e.target;
|
|
if (target.type === 'checkbox') {
|
|
target.value = e.target.checked ? "true" : "false";
|
|
}
|
|
props.changed(target);
|
|
};
|
|
|
|
let infoDisplay;
|
|
if (settings[props.grouping] && settings[props.grouping][props.label]) {
|
|
const displayInfo = () => {
|
|
const description = settings[props.grouping][props.label];
|
|
props.notifyInfo(props.label, description);
|
|
};
|
|
|
|
infoDisplay = <a href={void(0)}
|
|
className={'ConfigurationInfo'}
|
|
onClick={()=>{displayInfo(); return false;}}><FontAwesomeIcon icon={faInfoCircle}/></a>;
|
|
}
|
|
|
|
let data;
|
|
switch (props.template.type) {
|
|
case "bool":
|
|
data = <input checked={JSON.parse(props.value)}
|
|
onChange={e=>handleChanged(e)}
|
|
type={'checkbox'}/>;
|
|
break;
|
|
|
|
case "double":
|
|
data = <input min={0.0}
|
|
onChange={e=>handleChanged(e)}
|
|
step={"0.01"}
|
|
className={'ConfigurationItemInput'}
|
|
type={'number'}
|
|
value={parseFloat(props.value).toFixed(2)}/>;
|
|
break;
|
|
|
|
case "list":
|
|
const options = props.items.map((s, i) => {
|
|
return (
|
|
<option className={'ConfigurationItemOption'} key={i} value={s}>{s}</option>
|
|
);
|
|
});
|
|
|
|
data = (
|
|
<select onChange={e=>handleChanged(e)}
|
|
className={'ConfigurationItemSelect'}
|
|
value={props.value}>
|
|
{options}
|
|
</select>
|
|
);
|
|
break;
|
|
|
|
case "string":
|
|
data = <input onChange={e=>handleChanged(e)}
|
|
className={'ConfigurationItemInput'}
|
|
type={'text'}
|
|
value={props.value}/>;
|
|
break;
|
|
|
|
case "uint8":
|
|
data = <input max={255}
|
|
min={0}
|
|
onChange={e=>handleChanged(e)}
|
|
className={'ConfigurationItemInput'}
|
|
type={'number'}
|
|
value={props.value}/>;
|
|
break;
|
|
|
|
case "uint16":
|
|
data = <input max={65535}
|
|
min={0}
|
|
onChange={e=>handleChanged(e)}
|
|
className={'ConfigurationItemInput'}
|
|
type={'number'}
|
|
value={props.value}/>;
|
|
break;
|
|
|
|
case "uint32":
|
|
data = <input max={4294967295}
|
|
min={0}
|
|
onChange={e=>handleChanged(e)}
|
|
className={'ConfigurationItemInput'}
|
|
type={'number'}
|
|
value={props.value}/>;
|
|
break;
|
|
|
|
case "uint64":
|
|
data = <input max={18446744073709551615}
|
|
min={0}
|
|
onChange={e=>handleChanged(e)}
|
|
className={'ConfigurationItemInput'}
|
|
type={'number'}
|
|
value={props.value}/>;
|
|
break;
|
|
|
|
default:
|
|
data = <div>{props.value}</div>;
|
|
}
|
|
|
|
return (
|
|
<div className={'ConfigurationItem'}>
|
|
<table cellPadding='2'
|
|
width='100%'>
|
|
<tbody>
|
|
<tr>
|
|
{infoDisplay ?
|
|
<td width='100%'>{infoDisplay} {props.label}</td> :
|
|
<td width='100%'>{props.label}</td>}
|
|
<td>{data}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}); |