74 lines
1.6 KiB
JavaScript
74 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
import { observer } from 'mobx-react'
|
|
|
|
import algorithms from '../algorithms/index.js'
|
|
import { RangeInput } from './RangeInput.js'
|
|
|
|
import state from '../state.js'
|
|
|
|
const FieldComponent = observer(({ field }) => {
|
|
switch (field.type) {
|
|
case 'range':
|
|
let { name, id } = field
|
|
return (
|
|
<RangeInput
|
|
name={name}
|
|
label={id}
|
|
{...field.props}
|
|
value={field.value}
|
|
onChange={val => (field.value = val)}
|
|
/>
|
|
)
|
|
case 'checkbox':
|
|
return (
|
|
<>
|
|
{field.name}
|
|
<input
|
|
type="checkbox"
|
|
onChange={e => (field.value = e.target.checked)}
|
|
checked={field.value}
|
|
/>
|
|
</>
|
|
)
|
|
default:
|
|
return <span>Error: Field type {field.type} not known.</span>
|
|
}
|
|
})
|
|
|
|
const Options = ({ fields }) => {
|
|
return (
|
|
<fieldset>
|
|
{fields.map((field, i) => (
|
|
<FieldComponent key={i} field={field} />
|
|
))}
|
|
</fieldset>
|
|
)
|
|
}
|
|
|
|
@observer
|
|
export class SimplificationControl extends React.Component {
|
|
render() {
|
|
return (
|
|
<>
|
|
<h3>Simplification</h3>
|
|
<select
|
|
name="algorithm"
|
|
value={state.algorithmId}
|
|
onChange={e => (state.algorithmId = e.target.value)}
|
|
>
|
|
{algorithms.map((algo, i) => (
|
|
<option key={i} value={algo.id}>
|
|
{algo.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{algorithms.map((algo, i) => (
|
|
<div key={i} hidden={!(algo === state.selectedAlgorithm)}>
|
|
<Options fields={algo.fields} />
|
|
</div>
|
|
))}
|
|
</>
|
|
)
|
|
}
|
|
}
|