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

add option to switch to the TwentyAfter Syntax and show UHR always

Browse Source
This commit is contained in:
Lukas Heiligenbrunner
2021-03-17 16:57:54 +00:00
parent 78b38fc759
commit 9b58bea546
10 changed files with 315 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
interface/package-lock.json generated
View File

@ -1,5 +1,5 @@
{
"name": "esp8266-react",
"name": "wordclock",
"version": "0.1.0",
"lockfileVersion": 1,
"requires": true,

144
interface/src/project/DemoInformation.tsx
View File

@ -1,77 +1,91 @@
import React, { Component } from 'react';
import { Typography, Box, List, ListItem, ListItemText } from '@material-ui/core';
import { SectionContent } from '../components';
import {Typography, Switch} from '@material-ui/core';
import {
BlockFormControlLabel,
SectionContent,
webSocketController,
WebSocketControllerProps,
WebSocketFormLoader,
WebSocketFormProps
} from '../components';
class DemoInformation extends Component {
import {InformationState} from "./types";
import {WEB_SOCKET_ROOT} from "../api";
import {ValidatorForm} from "react-material-ui-form-validator";
export const INFORMATION_WEBSOCKET_URL = WEB_SOCKET_ROOT + "information";
type InformationStateWebSocketControllerProps = WebSocketControllerProps<InformationState>;
class DemoInformation extends Component<InformationStateWebSocketControllerProps> {
render() {
return (
<SectionContent title='Demo Information' titleGutter>
<SectionContent title='WordClock Information' titleGutter>
<Typography variant="body1" paragraph>
This simple demo project allows you to control the built-in LED.
It demonstrates how the esp8266-react framework may be extended for your own IoT project.
Welcome to the WordClock Overview page. Here you can turn on and off your WordClock and set Basic Settings
</Typography>
<Typography variant="body1" paragraph>
It is recommended that you keep your project interface code under the project directory.
This serves to isolate your project code from the from the rest of the user interface which should
simplify merges should you wish to update your project with future framework changes.
</Typography>
<Typography variant="body1" paragraph>
The demo project interface code is stored in the 'interface/src/project' directory:
</Typography>
<List>
<ListItem>
<ListItemText
primary="ProjectMenu.tsx"
secondary="You can add your project's screens to the side bar here."
/>
</ListItem>
<ListItem>
<ListItemText
primary="ProjectRouting.tsx"
secondary="The routing which controls the screens of your project."
/>
</ListItem>
<ListItem>
<ListItemText
primary="DemoProject.tsx"
secondary="This screen, with tabs and tab routing."
/>
</ListItem>
<ListItem>
<ListItemText
primary="DemoInformation.tsx"
secondary="The demo information page."
/>
</ListItem>
<ListItem>
<ListItemText
primary="LightStateRestController.tsx"
secondary="A form which lets the user control the LED over a REST service."
/>
</ListItem>
<ListItem>
<ListItemText
primary="LightStateWebSocketController.tsx"
secondary="A form which lets the user control and monitor the status of the LED over WebSockets."
/>
</ListItem>
<ListItem>
<ListItemText
primary="LightMqttSettingsController.tsx"
secondary="A form which lets the user change the MQTT settings for MQTT based control of the LED."
/>
</ListItem>
</List>
<Box mt={2}>
<Typography variant="body1">
See the project <a href="https://github.com/rjwats/esp8266-react/">README</a> for a full description of the demo project.
</Typography>
</Box>
<WebSocketFormLoader
{...this.props}
render={props => (
<LightStateWebSocketControllerForm {...props} />
)}
/>
</SectionContent>
)
}
}
export default DemoInformation;
export default webSocketController(INFORMATION_WEBSOCKET_URL, 100, DemoInformation);
type InformationWebSocketControllerFormProps = WebSocketFormProps<InformationState>;
function LightStateWebSocketControllerForm(props: InformationWebSocketControllerFormProps) {
const { data, saveData, setData } = props;
const changeWordClockOn = (event: React.ChangeEvent<HTMLInputElement>) => {
setData({wordclockOn: event.target.checked,twentyAfterSyntax: data.twentyAfterSyntax, uhrAlwaysOn: data.uhrAlwaysOn }, saveData);
}
const changeTwentyAfterSyntax = (event: React.ChangeEvent<HTMLInputElement>) => {
setData({wordclockOn: data.wordclockOn, twentyAfterSyntax: event.target.checked, uhrAlwaysOn: data.uhrAlwaysOn }, saveData);
}
const changeUhrAlwaysOn = (event: React.ChangeEvent<HTMLInputElement>) => {
setData({wordclockOn: data.wordclockOn,twentyAfterSyntax: data.twentyAfterSyntax, uhrAlwaysOn: event.target.checked }, saveData);
}
return (
<ValidatorForm onSubmit={saveData}>
<BlockFormControlLabel
control={
<Switch
checked={data.wordclockOn}
onChange={changeWordClockOn}
color="primary"
/>
}
label="WordClock turned on?"
/>
<BlockFormControlLabel
control={
<Switch
checked={data.twentyAfterSyntax}
onChange={changeTwentyAfterSyntax}
color="primary"
/>
}
label="Use Twenty-After Syntax?"
/>
<BlockFormControlLabel
control={
<Switch
checked={data.uhrAlwaysOn}
onChange={changeUhrAlwaysOn}
color="primary"
/>
}
label="Always Display UHR label"
/>
</ValidatorForm>
);
}

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

@ -1,3 +1,9 @@
export interface LightState {
led_on: boolean;
}
export interface InformationState {
wordclockOn: boolean;
twentyAfterSyntax: boolean;
uhrAlwaysOn: boolean;
}