File system initializing

.gitignore

@@ -7,3 +7,4 @@
 /interface/build
 /interface/node_modules
 .vscode
+*.json

features.ini

@@ -4,5 +4,5 @@ build_flags =
     -D FT_SECURITY=1
     -D FT_MQTT=0
     -D FT_NTP=1
-    -D FT_OTA=1
-    -D FT_UPLOAD_FIRMWARE=1
+    -D FT_OTA=0
+    -D FT_UPLOAD_FIRMWARE=0

interface/package.json

@@ -14,6 +14,8 @@
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.6",
     "compression-webpack-plugin": "^4.0.0",
+    "highcharts": "^8.2.2",
+    "highcharts-react-official": "^3.0.0",
     "jwt-decode": "^3.1.1",
     "lodash": "^4.17.20",
     "mime-types": "^2.1.27",

interface/src/components/WebSocketController.tsx

@@ -62,6 +62,7 @@ export function webSocketController<D, P extends WebSocketControllerProps<D>>(ws
       }
 
       onMessage = (event: MessageEvent) => {
+        console.log("incoming web socket message : ", event.data);
         const rawData = event.data;
         if (typeof rawData === 'string' || rawData instanceof String) {
           this.handleMessage(JSON.parse(rawData as string) as WebSocketMessage<D>);

interface/src/components/WebSocketFormLoader.tsx

@@ -37,4 +37,4 @@ export default function WebSocketFormLoader<D>(props: WebSocketFormLoaderProps<D
     );
   }
   return render({ ...rest, data });
-}
+}

interface/src/project/AquariumController.tsx

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import { Redirect, Switch, RouteComponentProps } from 'react-router-dom'
+
+import { Tabs, Tab } from '@material-ui/core';
+
+import { PROJECT_PATH } from '../api';
+import { MenuAppBar } from '../components';
+import { AuthenticatedRoute } from '../authentication';
+
+import DemoInformation from './Information';
+import RgbStateWebSocketController from './RgbStateWebSocketController';
+import RgbCycleController from './RgbCycleController';
+
+class AquariumController extends Component<RouteComponentProps> {
+
+  handleTabChange = (event: React.ChangeEvent<{}>, path: string) => {
+    this.props.history.push(path);
+  };
+
+  render() {
+    return (
+      <MenuAppBar sectionTitle="ESP8266 Project">
+        <Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
+          <Tab value={`/${PROJECT_PATH}/information`} label="Information" />
+          <Tab value={`/${PROJECT_PATH}/rgb`} label="RGB Controller" />
+          <Tab value={`/${PROJECT_PATH}/rgbSettings`} label="RGB Settings" />
+        </Tabs>
+        <Switch>
+          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/information`} component={DemoInformation} />
+          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/rgb`} component={RgbStateWebSocketController} />
+          <AuthenticatedRoute component={RgbCycleController} />
+
+          <Redirect to={`/${PROJECT_PATH}/information`} />
+        </Switch>
+      </MenuAppBar>
+    )
+  }
+}
+
+export default AquariumController;

interface/src/project/Information.tsx

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import { Typography, Box, List, ListItem, ListItemText } from '@material-ui/core';
+import { SectionContent } from '../components';
+
+class DemoInformation extends Component {
+
+  render() {
+    return (
+      <SectionContent title='Information' titleGutter>
+        <Typography variant="body1" paragraph>
+          This interface allows you to control the aquarium lights.
+        </Typography>
+        <Typography variant="body1" paragraph>
+          It is still in development process and new features are being added on regular basis.
+        </Typography>      
+        <List>
+          <ListItem>
+            <ListItemText
+              primary="RGB controller"
+              secondary="You can adjust intensity for red, blue and green colors."
+            />
+          </ListItem>
+          <ListItem>
+            <ListItemText
+              primary="RGB settings"
+              secondary="Here you can adjust light auto cycle settings. It simulates 24 hour day/night enviroument and 
+                        change each color based on time."
+            />
+          </ListItem>
+        </List>
+        <Box mt={2}>
+          <Typography variant="body1">
+            See my projects <a href="https://github.com/JanisDavidsons">at github</a> .
+          </Typography>
+        </Box>
+      </SectionContent>
+    )
+  }
+
+}
+
+export default DemoInformation;

interface/src/project/ProjectMenu.tsx

@@ -12,11 +12,11 @@ class ProjectMenu extends Component<RouteComponentProps> {
     const path = this.props.match.url;
     return (
       <List>
-        <ListItem to={`/${PROJECT_PATH}/demo/`} selected={path.startsWith(`/${PROJECT_PATH}/demo/`)} button component={Link}>
+        <ListItem to={`/${PROJECT_PATH}/`} selected={path.startsWith(`/${PROJECT_PATH}/`)} button component={Link}>
           <ListItemIcon>
             <SettingsRemoteIcon />
           </ListItemIcon>
-          <ListItemText primary="Demo Project" />
+          <ListItemText primary="ESP8266 Project" />
         </ListItem>
       </List>
     )

interface/src/project/ProjectRouting.tsx

@@ -4,7 +4,7 @@ import { Redirect, Switch } from 'react-router';
 import { PROJECT_PATH } from '../api';
 import { AuthenticatedRoute } from '../authentication';
 
-import DemoProject from './DemoProject';
+import AquariumController from './AquariumController';
 
 class ProjectRouting extends Component {
 
@@ -16,14 +16,14 @@ class ProjectRouting extends Component {
           * Add your project page routing below.
           */
         }
-        <AuthenticatedRoute exact path={`/${PROJECT_PATH}/demo/*`} component={DemoProject} />
+        <AuthenticatedRoute exact path={`/${PROJECT_PATH}/*`} component={AquariumController} />
         {
           /*
           * The redirect below caters for the default project route and redirecting invalid paths.
           * The "to" property must match one of the routes above for this to work correctly.
           */
         }
-        <Redirect to={`/${PROJECT_PATH}/demo/`} />
+        <Redirect to={`/${PROJECT_PATH}/`} />
       </Switch>
     )
   }

interface/src/project/RgbCycleController.js

@@ -0,0 +1,40 @@
+import React, { Component, useEffect } from 'react';
+import { Switch } from '@material-ui/core';
+import { WEB_SOCKET_ROOT } from '../api';
+import { WebSocketFormLoader, webSocketController } from '../components';
+import { SectionContent } from '../components';
+import RgbSettings from './components/RgbSettings';
+
+export const RGB_SETTINGS_WEBSOCKET_URL = WEB_SOCKET_ROOT + "rgbCycle";
+export const GREEN_COLOR_WEBSOCKET_URL = WEB_SOCKET_ROOT + "greenLight";
+// const test = webSocketController(GREEN_COLOR_WEBSOCKET_URL, 100, RgbCycleController);
+
+const RgbCycleController = (props) => {
+    const Test = webSocketController(GREEN_COLOR_WEBSOCKET_URL, 100, RgbCycleController);
+
+    return (
+        <SectionContent title='Rgb Controller' titleGutter>
+            <WebSocketFormLoader
+                {...props}
+                render={props => (
+                    <RgbCycleControllerForm {...props} />
+                )}
+            />
+        </SectionContent>
+    )
+}
+
+export default webSocketController(RGB_SETTINGS_WEBSOCKET_URL, 100, RgbCycleController);
+
+const RgbCycleControllerForm = (props) => {
+
+    const { data, saveData, setData } = props;
+
+    return (
+        <RgbSettings
+            setDataHandler={setData}
+            saveDataHandler={saveData}
+            data={data}
+        />
+    );
+}