a1f4e57a21
* Update back end to add MQTT and WebSocket support * Update demo project to demonstrate MQTT and WebSockets * Update documentation to describe newly added and modified functionallity * Introduce separate MQTT pub/sub, HTTP get/post and WebSocket rx/tx classes * Significant reanaming - more accurate class names * Use PROGMEM_WWW as default * Update README documenting PROGMEM_WWW as default * Update README with API changes
71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
import React, { Component } from 'react';
|
|
import { ValidatorForm } from 'react-material-ui-form-validator';
|
|
|
|
import { Typography, Box, Checkbox } from '@material-ui/core';
|
|
import SaveIcon from '@material-ui/icons/Save';
|
|
|
|
import { ENDPOINT_ROOT } from '../api';
|
|
import { restController, RestControllerProps, RestFormLoader, RestFormProps, FormActions, FormButton, SectionContent, BlockFormControlLabel } from '../components';
|
|
|
|
import { LightState } from './types';
|
|
|
|
export const LIGHT_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "lightState";
|
|
|
|
type LightStateRestControllerProps = RestControllerProps<LightState>;
|
|
|
|
class LightStateRestController extends Component<LightStateRestControllerProps> {
|
|
|
|
componentDidMount() {
|
|
this.props.loadData();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<SectionContent title='REST Controller' titleGutter>
|
|
<RestFormLoader
|
|
{...this.props}
|
|
render={props => (
|
|
<LightStateRestControllerForm {...props} />
|
|
)}
|
|
/>
|
|
</SectionContent>
|
|
)
|
|
}
|
|
|
|
}
|
|
|
|
export default restController(LIGHT_SETTINGS_ENDPOINT, LightStateRestController);
|
|
|
|
type LightStateRestControllerFormProps = RestFormProps<LightState>;
|
|
|
|
function LightStateRestControllerForm(props: LightStateRestControllerFormProps) {
|
|
const { data, saveData, loadData, handleValueChange } = props;
|
|
return (
|
|
<ValidatorForm onSubmit={saveData}>
|
|
<Box bgcolor="primary.main" color="primary.contrastText" p={2} mt={2} mb={2}>
|
|
<Typography variant="body1">
|
|
The form below controls the LED via the RESTful service exposed by the ESP device.
|
|
</Typography>
|
|
</Box>
|
|
<BlockFormControlLabel
|
|
control={
|
|
<Checkbox
|
|
checked={data.led_on}
|
|
onChange={handleValueChange('led_on')}
|
|
color="primary"
|
|
/>
|
|
}
|
|
label="LED State?"
|
|
/>
|
|
<FormActions>
|
|
<FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
|
|
Save
|
|
</FormButton>
|
|
<FormButton variant="contained" color="secondary" onClick={loadData}>
|
|
Reset
|
|
</FormButton>
|
|
</FormActions>
|
|
</ValidatorForm>
|
|
);
|
|
}
|