lukas/WordClockESP
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

delete unneccessary ui elements

Browse Source 
use uint_8 for all index types
fix some minor errors
This commit is contained in:
lukas
2021-03-07 17:45:03 +01:00
parent d44f3bbb06
commit 6d06bf103e
12 changed files with 106 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
interface/src/project/DemoProject.tsx
View File

@ -8,9 +8,7 @@ import { MenuAppBar } from '../components';
import { AuthenticatedRoute } from '../authentication';
import DemoInformation from './DemoInformation';
import LightStateRestController from './LightStateRestController';
import LightStateWebSocketController from './LightStateWebSocketController';
import LightMqttSettingsController from './LightMqttSettingsController';
class DemoProject extends Component<RouteComponentProps> {
@ -20,18 +18,14 @@ class DemoProject extends Component<RouteComponentProps> {
render() {
return (
<MenuAppBar sectionTitle="Demo Project">
<MenuAppBar sectionTitle="WordClock">
<Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
<Tab value={`/${PROJECT_PATH}/demo/information`} label="Information" />
<Tab value={`/${PROJECT_PATH}/demo/rest`} label="REST Controller" />
<Tab value={`/${PROJECT_PATH}/demo/socket`} label="WebSocket Controller" />
<Tab value={`/${PROJECT_PATH}/demo/mqtt`} label="MQTT Controller" />
<Tab value={`/${PROJECT_PATH}/demo/socket`} label="Settings" />
</Tabs>
<Switch>
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/demo/information`} component={DemoInformation} />
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/demo/rest`} component={LightStateRestController} />
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/demo/socket`} component={LightStateWebSocketController} />
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/demo/mqtt`} component={LightMqttSettingsController} />
<Redirect to={`/${PROJECT_PATH}/demo/information`} />
</Switch>
</MenuAppBar>

90
interface/src/project/LightMqttSettingsController.tsx
View File

@ -1,90 +0,0 @@
import React, { Component } from 'react';
import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator';
import { Typography, Box } from '@material-ui/core';
import SaveIcon from '@material-ui/icons/Save';
import { ENDPOINT_ROOT } from '../api';
import { restController, RestControllerProps, RestFormLoader, RestFormProps, FormActions, FormButton, SectionContent } from '../components';
import { LightMqttSettings } from './types';
export const LIGHT_BROKER_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "brokerSettings";
type LightMqttSettingsControllerProps = RestControllerProps<LightMqttSettings>;
class LightMqttSettingsController extends Component<LightMqttSettingsControllerProps> {
componentDidMount() {
this.props.loadData();
}
render() {
return (
<SectionContent title='MQTT Controller' titleGutter>
<RestFormLoader
{...this.props}
render={props => (
<LightMqttSettingsControllerForm {...props} />
)}
/>
</SectionContent>
)
}
}
export default restController(LIGHT_BROKER_SETTINGS_ENDPOINT, LightMqttSettingsController);
type LightMqttSettingsControllerFormProps = RestFormProps<LightMqttSettings>;
function LightMqttSettingsControllerForm(props: LightMqttSettingsControllerFormProps) {
const { data, saveData, handleValueChange } = props;
return (
<ValidatorForm onSubmit={saveData}>
<Box bgcolor="primary.main" color="primary.contrastText" p={2} mt={2} mb={2}>
<Typography variant="body1">
The LED is controllable via MQTT with the demo project designed to work with Home Assistant's auto discovery feature.
</Typography>
</Box>
<TextValidator
validators={['required']}
errorMessages={['Unique ID is required']}
name="unique_id"
label="Unique ID"
fullWidth
variant="outlined"
value={data.unique_id}
onChange={handleValueChange('unique_id')}
margin="normal"
/>
<TextValidator
validators={['required']}
errorMessages={['Name is required']}
name="name"
label="Name"
fullWidth
variant="outlined"
value={data.name}
onChange={handleValueChange('name')}
margin="normal"
/>
<TextValidator
validators={['required']}
errorMessages={['MQTT Path is required']}
name="mqtt_path"
label="MQTT Path"
fullWidth
variant="outlined"
value={data.mqtt_path}
onChange={handleValueChange('mqtt_path')}
margin="normal"
/>
<FormActions>
<FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
Save
</FormButton>
</FormActions>
</ValidatorForm>
);
}

67
interface/src/project/LightStateRestController.tsx
View File

@ -1,67 +0,0 @@
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, 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>
</FormActions>
</ValidatorForm>
);
}

2
interface/src/project/ProjectMenu.tsx
View File

@ -16,7 +16,7 @@ class ProjectMenu extends Component<RouteComponentProps> {
<ListItemIcon>
<SettingsRemoteIcon />
</ListItemIcon>
<ListItemText primary="Demo Project" />
<ListItemText primary="WordClock" />
</ListItem>
</List>
)

8
interface/src/project/types.ts
View File

@ -1,9 +1,3 @@
export interface LightState {
led_on: boolean;
}
export interface LightMqttSettings {
unique_id : string;
name: string;
mqtt_path : string;
}
}