moved mqtt and system to correct web pages

2025-12-08 00:39:50 +03:00 · 2020-07-16 22:34:13 +02:00
parent 5271f59187
commit a65c3ac96f
24 changed files with 484 additions and 428 deletions
--- a/interface/src/mqtt/MqttSettingsForm.tsx
+++ b/interface/src/mqtt/MqttSettingsForm.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
+import { TextValidator, ValidatorForm, SelectValidator } from 'react-material-ui-form-validator';

 import { Checkbox, TextField } from '@material-ui/core';
 import SaveIcon from '@material-ui/icons/Save';
+import MenuItem from '@material-ui/core/MenuItem';

 import { RestFormProps, FormActions, FormButton, BlockFormControlLabel, PasswordValidator } from '../components';
 import { isIP, isHostname, or } from '../validators';
@@ -115,6 +116,51 @@ class MqttSettingsForm extends React.Component<MqttSettingsFormProps> {
          onChange={handleValueChange('max_topic_length')}
          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={['Publish time 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"
+        />
        <FormActions>
          <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
            Save
--- a/interface/src/mqtt/MqttStatus.ts
+++ b/interface/src/mqtt/MqttStatus.ts
@@ -43,3 +43,15 @@ export const disconnectReason = ({ disconnect_reason }: MqttStatus) => {
      return "Unknown"
  }
 }
+
+export const mqttStatusHighlight2 = ({ mqtt_fails }: MqttStatus, 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;
+
+}
--- a/interface/src/mqtt/MqttStatusForm.tsx
+++ b/interface/src/mqtt/MqttStatusForm.tsx
@@ -6,9 +6,10 @@ import { Avatar, Divider, List, ListItem, ListItemAvatar, ListItemText } from '@
 import DeviceHubIcon from '@material-ui/icons/DeviceHub';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import ReportIcon from '@material-ui/icons/Report';
+import SpeakerNotesOffIcon from "@material-ui/icons/SpeakerNotesOff";

 import { RestFormProps, FormActions, FormButton, HighlightAvatar } from '../components';
-import { mqttStatusHighlight, mqttStatus, disconnectReason } from './MqttStatus';
+import { mqttStatusHighlight, mqttStatus, mqttStatusHighlight2, disconnectReason } from './MqttStatus';
 import { MqttStatus } from './types';

 type MqttStatusFormProps = RestFormProps<MqttStatus> & WithTheme;
@@ -16,7 +17,7 @@ type MqttStatusFormProps = RestFormProps<MqttStatus> & WithTheme;
 class MqttStatusForm extends Component<MqttStatusFormProps> {

  renderConnectionStatus() {
-    const { data } = this.props
+    const { data, theme } = this.props
    if (data.connected) {
      return (
        <Fragment>
@@ -27,6 +28,17 @@ class MqttStatusForm extends Component<MqttStatusFormProps> {
            <ListItemText primary="Client ID" secondary={data.client_id} />
          </ListItem>
          <Divider variant="inset" component="li" />
+          <ListItem>
+          <ListItemAvatar>
+            <HighlightAvatar color={mqttStatusHighlight2(data, theme)}>
+              <SpeakerNotesOffIcon />
+            </HighlightAvatar>
+          </ListItemAvatar>
+          <ListItemText
+            primary="MQTT Publish Errors"
+            secondary={data.mqtt_fails}
+          />
+        </ListItem>
        </Fragment>
      );
    }
--- a/interface/src/mqtt/types.ts
+++ b/interface/src/mqtt/types.ts
@@ -14,6 +14,7 @@ export interface MqttStatus {
  connected: boolean;
  client_id: string;
  disconnect_reason: MqttDisconnectReason;
+  mqtt_fails: number;
 }

 export interface MqttSettings {
@@ -26,4 +27,8 @@ export interface MqttSettings {
  keep_alive: number;
  clean_session: boolean;
  max_topic_length: number;
+  publish_time: number;
+  mqtt_format: number;
+  mqtt_qos: number;
+  system_heartbeat: boolean;
 }
--- a/interface/src/project/EMSESPSettings.tsx
+++ b/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;
--- a/interface/src/project/EMSESPSettingsController.tsx
+++ b/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
--- a/interface/src/project/EMSESPStatus.ts
+++ b/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;
-
-}
--- a/interface/src/project/EMSESPStatusForm.tsx
+++ b/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>
--- a/interface/src/project/EMSESPtypes.ts
+++ b/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 {
--- a/interface/src/system/SystemStatusForm.tsx
+++ b/interface/src/system/SystemStatusForm.tsx
@@ -13,6 +13,8 @@ import AppsIcon from '@material-ui/icons/Apps';
 import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import SettingsBackupRestoreIcon from '@material-ui/icons/SettingsBackupRestore';
+import BatteryUnknownIcon from "@material-ui/icons/BatteryUnknown";
+import TimerIcon from "@material-ui/icons/Timer";

 import { redirectingAuthorizedFetch, AuthenticatedContextProps, withAuthenticatedContext } from '../authentication';
 import { RestFormProps, FormButton, ErrorButton } from '../components';
@@ -53,6 +55,14 @@ class SystemStatusForm extends Component<SystemStatusFormProps, SystemStatusForm
          <ListItemText primary="Device (Platform / SDK)" secondary={data.esp_platform + ' / ' + data.sdk_version} />
        </ListItem>
        <Divider variant="inset" component="li" />
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar>
+              <TimerIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary="System Uptime" secondary={data.uptime} />
+        </ListItem>
        <ListItem >
          <ListItemAvatar>
            <Avatar>
@@ -84,6 +94,17 @@ class SystemStatusForm extends Component<SystemStatusFormProps, SystemStatusForm
              </ListItem>
            </Fragment>)
        }
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar>
+              <BatteryUnknownIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText
+            primary="Free System Memory"
+            secondary={data.free_mem + "%"}
+          />
+        </ListItem>
        <Divider variant="inset" component="li" />
        <ListItem >
          <ListItemAvatar>
--- a/interface/src/system/types.ts
+++ b/interface/src/system/types.ts
@@ -15,6 +15,8 @@ interface ESPSystemStatus {
  flash_chip_speed: number;
  fs_used: number;
  fs_total: number;
+  uptime: string;
+  free_mem: number;
 }

 export interface ESP32SystemStatus extends ESPSystemStatus {