moved mqtt and system to correct web pages

interface/src/project/EMSESPSettings.tsx

@@ -0,0 +1,35 @@
+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 EMSESPSettingsController from './EMSESPSettingsController';
+
+class EMSESP extends Component<RouteComponentProps> {
+
+  handleTabChange = (event: React.ChangeEvent<{}>, path: string) => {
+    this.props.history.push(path);
+  };
+
+  render() {
+    return (
+      <MenuAppBar sectionTitle="Settings">
+        <Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
+          <Tab value={`/${PROJECT_PATH}/settings`} label="EMS-ESP Settings" />
+        </Tabs>
+        <Switch>
+          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/settings`} component={EMSESPSettingsController} />
+          <Redirect to={`/${PROJECT_PATH}/settings`} />
+        </Switch>
+      </MenuAppBar>
+
+    )
+  }
+
+}
+
+export default EMSESP;

interface/src/project/EMSESPSettingsController.tsx

@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import { ValidatorForm, TextValidator, SelectValidator } from 'react-material-ui-form-validator';
 
-import { Checkbox, Typography, Box } from '@material-ui/core';
+import { Checkbox, Typography, Box, Link } from '@material-ui/core';
 import SaveIcon from '@material-ui/icons/Save';
 import MenuItem from '@material-ui/core/MenuItem';
 
@@ -46,9 +46,9 @@ function EMSESPSettingsControllerForm(props: EMSESPSettingsControllerFormProps)
     const { data, saveData, loadData, handleValueChange } = props;
     return (
         <ValidatorForm onSubmit={saveData}>
-            <Box bgcolor="primary.main" color="primary.contrastText" p={2} mt={2} mb={2}>
+            <Box bgcolor="info.main" p={2} mt={2} mb={2}>
                 <Typography variant="body1">
-                    Customize EMS-ESP by editing the default settings here. Refer to the <a href="https://emsesp.github.io/docs/#/">Wiki</a> for assistance.
+                    Customize EMS-ESP by editing the default settings here. Refer to the <Link href="https://emsesp.github.io/docs/#/" color="primary">{'Wiki'}</Link>&nbsp;for descriptions of each setting.
                 </Typography>
             </Box>
             <TextValidator
@@ -63,51 +63,6 @@ function EMSESPSettingsControllerForm(props: EMSESPSettingsControllerFormProps)
                 onChange={handleValueChange('tx_mode')}
                 margin="normal"
             />
-            <BlockFormControlLabel
-                control={
-                    <Checkbox
-                        checked={data.system_heartbeat}
-                        onChange={handleValueChange('system_heartbeat')}
-                        value="system_heartbeat"
-                    />
-                }
-                label="MQTT Heartbeat"
-            />
-            <SelectValidator name="mqtt_format"
-                label="MQTT Format"
-                value={data.mqtt_format}
-                fullWidth
-                variant="outlined"
-                onChange={handleValueChange('mqtt_format')}
-                margin="normal">
-                <MenuItem value={1}>Single</MenuItem>
-                <MenuItem value={2}>Nested</MenuItem>
-                <MenuItem value={3}>Home Assistant</MenuItem>
-                <MenuItem value={4}>Custom</MenuItem>
-            </SelectValidator>
-            <SelectValidator name="mqtt_qos"
-                label="MQTT QoS"
-                value={data.mqtt_qos}
-                fullWidth
-                variant="outlined"
-                onChange={handleValueChange('mqtt_qos')}
-                margin="normal">
-                <MenuItem value={0}>0</MenuItem>
-                <MenuItem value={1}>1</MenuItem>
-                <MenuItem value={2}>2</MenuItem>
-            </SelectValidator>
-            <TextValidator
-                validators={['required', 'isNumber', 'minNumber:1', 'maxNumber:65535']}
-                errorMessages={['Keep alive is required', "Must be a number", "Must be greater than 0", "Max value is 65535"]}
-                name="publish_time"
-                label="MQTT Publish Time (seconds)"
-                fullWidth
-                variant="outlined"
-                value={data.publish_time}
-                type="number"
-                onChange={handleValueChange('publish_time')}
-                margin="normal"
-            />
             <BlockFormControlLabel
                 control={
                     <Checkbox

interface/src/project/EMSESPStatus.ts

@@ -29,15 +29,3 @@ export const busStatus = ({ status }: EMSESPStatus) => {
       return "Unknown";
   }
 }
-
-export const mqttStatusHighlight = ({ mqtt_fails }: EMSESPStatus, theme: Theme) => {
-
-  if (mqtt_fails === 0)
-    return theme.palette.success.main;
-
-  if (mqtt_fails < 10)
-    return theme.palette.warning.main;
-
-  return theme.palette.success.main;
-
-}

interface/src/project/EMSESPStatusForm.tsx

@@ -7,20 +7,18 @@ import {
   TableCell,
   TableHead,
   TableRow,
-  Avatar,
   Divider,
   List,
   ListItem,
   ListItemAvatar,
-  ListItemText
+  ListItemText,
+  Typography,
+  Box,
+  Link
 } from "@material-ui/core";
 
-import BuildIcon from "@material-ui/icons/Build";
 import RefreshIcon from "@material-ui/icons/Refresh";
 import DeviceHubIcon from "@material-ui/icons/DeviceHub";
-import SpeakerNotesOffIcon from "@material-ui/icons/SpeakerNotesOff";
-import TimerIcon from "@material-ui/icons/Timer";
-import BatteryUnknownIcon from "@material-ui/icons/BatteryUnknown";
 
 import {
   RestFormProps,
@@ -28,11 +26,11 @@ import {
   FormButton,
   HighlightAvatar,
 } from "../components";
+
 import {
   busStatus,
   busStatusHighlight,
-  isConnected,
-  mqttStatusHighlight,
+  isConnected
 } from "./EMSESPStatus";
 
 import { EMSESPStatus } from "./EMSESPtypes";
@@ -44,55 +42,24 @@ class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
     const { data, theme } = this.props;
     return (
       <Fragment>
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar>
-              <BuildIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText primary="Firmware Version" secondary={data.version} />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar>
-              <TimerIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText primary="System Uptime" secondary={data.uptime} />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar>
-              <BatteryUnknownIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary="Free System Memory"
-            secondary={data.free_mem + "%"}
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <HighlightAvatar color={mqttStatusHighlight(data, theme)}>
-              <SpeakerNotesOffIcon />
-            </HighlightAvatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary="MQTT Publish Errors"
-            secondary={data.mqtt_fails}
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
+        <Box bgcolor="info.main" border={1} p={3} mt={1} mb={0}>
+          <Typography variant="body1">
+            Firmware Version is <b>{data.version}</b>
+            <br /><br />
+            Check for news and updates on the <Link href="https://emsesp.github.io/docs/#/" color="primary">{'Wiki'}</Link>
+            <br/>
+            For live community chat go to <Link href="https://gitter.im/EMS-ESP/community#" color="primary">{'Gitter'}</Link>
+            <br/>
+            To report issues, contribute and give kudos visit <Link href="https://github.com/proddy/EMS-ESP" color="primary">{'github.com/proddy/EMS-ESP'}</Link>
+          </Typography>
+        </Box>
         <ListItem>
           <ListItemAvatar>
             <HighlightAvatar color={busStatusHighlight(data, theme)}>
               <DeviceHubIcon />
             </HighlightAvatar>
           </ListItemAvatar>
-          <ListItemText primary="EMS Bus Status" secondary={busStatus(data)} />
+          <ListItemText primary="EMS Connection Status" secondary={busStatus(data)} />
         </ListItem>
         {isConnected(data) && (
           <Fragment>

interface/src/project/EMSESPtypes.ts

@@ -1,16 +1,12 @@
 export interface EMSESPSettings {
   tx_mode: number;
   ems_bus_id: number;
-  system_heartbeat: boolean;
   syslog_level: number;
   syslog_mark_interval: number;
   syslog_host: string;
   master_thermostat: number;
   shower_timer: boolean;
   shower_alert: boolean;
-  publish_time: number;
-  mqtt_format: number;
-  mqtt_qos: number;
 }
 
 export enum busConnectionStatus {
@@ -26,9 +22,6 @@ export interface EMSESPStatus {
   tx_sent: number;
   crc_errors: number;
   tx_errors: number;
-  mqtt_fails: number;
-  uptime: string;
-  free_mem: number;
 }
 
 export interface Device {