Rework backend add MQTT and WebSocket support
* 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
This commit is contained in:
70
interface/src/project/LightStateRestController.tsx
Normal file
70
interface/src/project/LightStateRestController.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user