83 lines
2.4 KiB
JavaScript
83 lines
2.4 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { ValidatorForm } from 'react-material-ui-form-validator';
|
|
|
|
import { ENDPOINT_ROOT } from '../constants/Env';
|
|
import SectionContent from '../components/SectionContent';
|
|
import { restComponent } from '../components/RestComponent';
|
|
import LoadingNotification from '../components/LoadingNotification';
|
|
|
|
import Button from '@material-ui/core/Button';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import Slider from '@material-ui/core/Slider';
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
|
|
export const DEMO_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "demoSettings";
|
|
|
|
const valueToPercentage = (value) => `${Math.round(value / 255 * 100)}%`;
|
|
|
|
class DemoController extends Component {
|
|
componentDidMount() {
|
|
this.props.loadData();
|
|
}
|
|
|
|
render() {
|
|
const { data, fetched, errorMessage, saveData, loadData, handleSliderChange } = this.props;
|
|
return (
|
|
<SectionContent title="Controller" titleGutter>
|
|
<LoadingNotification
|
|
onReset={loadData}
|
|
fetched={fetched}
|
|
errorMessage={errorMessage}
|
|
render={() =>
|
|
<DemoControllerForm
|
|
demoSettings={data}
|
|
onReset={loadData}
|
|
onSubmit={saveData}
|
|
handleSliderChange={handleSliderChange}
|
|
/>
|
|
}
|
|
/>
|
|
</SectionContent>
|
|
)
|
|
}
|
|
}
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
button: {
|
|
marginRight: theme.spacing(2),
|
|
marginTop: theme.spacing(2),
|
|
},
|
|
blinkSpeedLabel: {
|
|
marginBottom: theme.spacing(5),
|
|
}
|
|
}));
|
|
|
|
function DemoControllerForm(props) {
|
|
const { demoSettings, onSubmit, onReset, handleSliderChange } = props;
|
|
const classes = useStyles();
|
|
return (
|
|
<ValidatorForm onSubmit={onSubmit}>
|
|
<Typography id="blink-speed-slider" className={classes.blinkSpeedLabel}>
|
|
Blink Speed
|
|
</Typography>
|
|
<Slider
|
|
value={demoSettings.blink_speed}
|
|
valueLabelFormat={valueToPercentage}
|
|
aria-labelledby="blink-speed-slider"
|
|
valueLabelDisplay="on"
|
|
min={0}
|
|
max={255}
|
|
onChange={handleSliderChange('blink_speed')}
|
|
/>
|
|
<Button variant="contained" color="primary" className={classes.button} type="submit">
|
|
Save
|
|
</Button>
|
|
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
|
|
Reset
|
|
</Button>
|
|
</ValidatorForm>
|
|
);
|
|
}
|
|
|
|
export default restComponent(DEMO_SETTINGS_ENDPOINT, DemoController);
|