Merged in NRRPLT-8832 (pull request #45)

[NRRPLT-8832] add news section + clean up nrp dashboard

* [NRRPLT-8832] add news section + clean up nrp dashboard

* Merged development into NRRPLT-8832
* Merged development into NRRPLT-8832
* small layout change

* Merged development into NRRPLT-8832
* Merged development into NRRPLT-8832
* Merged development into NRRPLT-8832

Approved-by: Sandro Weber

src/components/entry-page/entry-page.css

@@ -2,7 +2,7 @@
   height: 100vh;
   display: grid;
   grid-template-rows: 200px auto;
-  grid-template-columns: auto minmax(250px, 500px) minmax(250px, 500px) auto;
+  grid-template-columns: auto auto auto auto;
   grid-template-areas:
     "nrp-header nrp-header nrp-header nrp-header"
     "sidebar-left experiments-left experiments-right sidebar-right";
@@ -28,12 +28,8 @@
   background-color: white;
   text-align: left;
   padding: 20px;
-}
-
-.img-experiment-list {
-  width: 100px;
-  height: 100px;
-  padding: 10px;
+  display: flex;
+  flex-direction: row;
 }
 
 .sidebar-left {
@@ -45,3 +41,13 @@
   grid-area: sidebar-right;
   background-color: white;
 }
+
+.img-experiment-list {
+  width: 100px;
+  height: 100px;
+  padding: 10px;
+}
+
+.nrp-news {
+  border: 0;
+}
\ No newline at end of file

src/components/entry-page/entry-page.js

 import React from 'react';
+import Grid from '@material-ui/core/Grid';
 
 import NrpHeader from '../nrp-header/nrp-header.js';
 
@@ -12,9 +13,8 @@ export default class EntryPage extends React.Component {
       <div className='entry-page-wrapper'>
         <div className='entry-page-header'>
           <NrpHeader title1='NEUROROBOTICS' title2='PLATFORM' />
-        </div>
-
-        {/*<div className='sidebar-left'></div>
+        </div >
+        {/* <div className='sidebar-left'></div>
         <div className='experiments-left'>
           <img
             src={PlaceholderImage}
@@ -32,7 +32,10 @@ export default class EntryPage extends React.Component {
         {/* <div>
           <div><b>!!! NRP Core testing !!!</b></div>
         </div> */}
-        <NrpCoreDashboard />
+        <div className='nrp-core-dashboard sidebar-left'>
+          <NrpCoreDashboard />
+        </div >
+        <iframe className='nrp-news sidebar-right' src='https://neurorobotics.net/latest.html' />
         {/*<TransceiverFunctionEditor experimentId='mqtt_simple_1'/>*/}
       </div>
     );

src/components/nrp-core-dashboard/nrp-core-dashboard.js

@@ -98,49 +98,47 @@ export default class NrpCoreDashboard extends React.Component {
 
   render() {
     return (
-      <div>
-        <Grid container spacing={1}>
-          <Grid item xs={12}>
-            <Alert severity={this.state.mqttConnected ? 'success' : 'error'}>
-              <AlertTitle>MQTT Broker Connection</AlertTitle>
-              {this.mqttBrokerUrl}
-            </Alert>
-          </Grid>
-          <Grid item xs={12}>
-            <Alert severity={this.state.proxyConnected ? 'success' : 'error'}
-              action={
-                <Button
-                  color='inherit'
-                  size='small'
-                  disabled={this.state.reconnectDisabled}
-                  onClick={ async () => {
-                    this.setState({ reconnectDisabled: true});
-                    try {
-                      await NrpUserService.instance.getCurrentUser();
-                    }
-                    finally {
-                      this.setState({ reconnectDisabled: EventProxyService.instance.isConnected()});
-                    }
-                  }}
-                >
-                  Try to reconnect
-                </Button>
-              }
-            >
-              <AlertTitle>NRP Proxy Connection</AlertTitle>
-              {this.state.proxyConnected ? 'Connected' : 'Could not get response from the Proxy'}
-            </Alert>
-          </Grid>
-          <Grid item xs={12}>
-            <Button onClick={this.triggerProxyScanStorage} disabled={!this.state.proxyConnected}>
-              Proxy Scan Storage
-            </Button>
-          </Grid>
-          {/* <Grid item xs={12}>
-            <button onClick={NrpUserService.instance.getCurrentUser()}>Try to login</button>
-          </Grid> */}
+      <Grid container spacing={1}>
+        <Grid item xs={12}>
+          <Alert severity={this.state.mqttConnected ? 'success' : 'error'}>
+            <AlertTitle>MQTT Broker Connection</AlertTitle>
+            {this.mqttBrokerUrl}
+          </Alert>
+        </Grid>
+        <Grid item xs={12}>
+          <Alert severity={this.state.proxyConnected ? 'success' : 'error'}
+            action={
+              <Button
+                color='inherit'
+                size='small'
+                disabled={this.state.reconnectDisabled}
+                onClick={ async () => {
+                  this.setState({ reconnectDisabled: true});
+                  try {
+                    await NrpUserService.instance.getCurrentUser();
+                  }
+                  finally {
+                    this.setState({ reconnectDisabled: EventProxyService.instance.isConnected()});
+                  }
+                }}
+              >
+                Try to reconnect
+              </Button>
+            }
+          >
+            <AlertTitle>NRP Proxy Connection</AlertTitle>
+            {this.state.proxyConnected ? 'Connected' : 'Could not get response from the Proxy'}
+          </Alert>
         </Grid>
-      </div>
+        <Grid item xs={12}>
+          <Button onClick={this.triggerProxyScanStorage} disabled={!this.state.proxyConnected}>
+            Proxy Scan Storage
+          </Button>
+        </Grid>
+        {/*<Grid item xs={12}>
+          <button onClick={NrpUserService.instance.getCurrentUser()}>Try to login</button>
+          </Grid> */}
+      </Grid>
     );
   }
 }