UI improvements in web

interface/src/project/EMSESP.tsx

@@ -9,6 +9,7 @@ import { AuthenticatedRoute } from '../authentication';
 
 import EMSESPStatusController from './EMSESPStatusController';
 import EMSESPDevicesController from './EMSESPDevicesController';
+import EMSESPHelp from './EMSESPHelp';
 
 class EMSESP extends Component<RouteComponentProps> {
 
@@ -20,10 +21,12 @@ class EMSESP extends Component<RouteComponentProps> {
     return (
       <MenuAppBar sectionTitle="Dashboard">
         <Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
-          <Tab value={`/${PROJECT_PATH}/status`} label="EMS-ESP Status" />
+          <Tab value={`/${PROJECT_PATH}/status`} label="EMS Status" />
           <Tab value={`/${PROJECT_PATH}/devices`} label="EMS Devices" />
+          <Tab value={`/${PROJECT_PATH}/help`} label="EMS-ESP Help" />
         </Tabs>
         <Switch>
+          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/help`} component={EMSESPHelp} />
           <AuthenticatedRoute exact path={`/${PROJECT_PATH}/status`} component={EMSESPStatusController} />
           <AuthenticatedRoute exact path={`/${PROJECT_PATH}/devices`} component={EMSESPDevicesController} />
           <Redirect to={`/${PROJECT_PATH}/status`} />

interface/src/project/EMSESPDevicesForm.tsx

@@ -115,7 +115,7 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
           (
             <Box bgcolor="error.main" color="error.contrastText" p={2} mt={2} mb={2}>
               <Typography variant="body1">
-                No EMS devices found. Check connection and for Tx errors. Try forcing a scan.
+                No EMS devices found. Check the connection and for possible Tx errors and try scanning for new devices.
               </Typography>
             </Box>
           )
@@ -174,8 +174,9 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
   render() {
     return (
       <Fragment>
+        <br></br>
         {this.createTableItems()}
-
+        <br></br>
         <Box display="flex" flexWrap="wrap">
           <Box flexGrow={1} padding={1}>
             <FormButton startIcon={<RefreshIcon />} variant="contained" color="secondary" onClick={this.props.loadData}>

interface/src/project/EMSESPHelp.tsx

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import { Typography, Box, Link } from '@material-ui/core';
+import { SectionContent } from '../components';
+
+class EMSESPHelp extends Component {
+
+    render() {
+        return (
+            <SectionContent title='EMS-ESP Help' titleGutter>
+
+                <Box bgcolor="info.main" border={1} p={3} mt={1} mb={0}>
+                    <Typography variant="body1">
+                        EMS-ESP is an open-source firmware to communicate with heating devices that support the EMS protocol, such as equipment from Bosch, Junkers, Nefit, Buderus and Worcester.
+            <p></p>
+            Please consider supporting this project via the GitHub page <Link href="https://github.com/proddy/EMS-ESP" color="primary">{'http://github.com/proddy/EMS-ESP'}</Link>.
+                    </Typography>
+                </Box>
+                <br></br>
+                <Typography variant="body1" paragraph>
+                    Check for news and updates on the <Link href="https://emsesp.github.io/docs/#/" color="primary">{'Wiki'}</Link>.
+                </Typography>
+                <Typography variant="body1" paragraph>
+                    For live community chat go to <Link href="https://gitter.im/EMS-ESP/community#" color="primary">{'Gitter'}</Link>.
+                </Typography>
+                <Typography variant="body1" paragraph>
+                    To report an issue or feature request go to <Link href="https://github.com/proddy/EMS-ESP/issues/new/choose" color="primary">{'the github project page'}</Link>.
+                </Typography>
+
+            </SectionContent>
+        )
+    }
+
+}
+
+export default EMSESPHelp;

interface/src/project/EMSESPStatusController.tsx

@@ -17,7 +17,7 @@ class EMSESPStatusController extends Component<EMSESPStatusControllerProps> {
 
     render() {
         return (
-            <SectionContent title="EMS-ESP Status">
+            <SectionContent title="EMS Status">
                 <RestFormLoader
                     {...this.props}
                     render={formProps => <EMSESPStatusForm {...formProps} />}

interface/src/project/EMSESPStatusForm.tsx

@@ -12,9 +12,6 @@ import {
   ListItem,
   ListItemAvatar,
   ListItemText,
-  Typography,
-  Box,
-  Link
 } from "@material-ui/core";
 
 import RefreshIcon from "@material-ui/icons/Refresh";
@@ -42,17 +39,7 @@ class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
     const { data, theme } = this.props;
     return (
       <Fragment>
-        <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)}>

interface/src/project/EMSESPtypes.ts

@@ -16,7 +16,6 @@ export enum busConnectionStatus {
 }
 
 export interface EMSESPStatus {
-  version: string;
   status: busConnectionStatus;
   rx_received: number;
   tx_sent: number;