From d39ba0709b460bc039d5c95ee43e7f55c3c398e4 Mon Sep 17 00:00:00 2001
From: Michael Neumeier <neumeier@fortiss.org>
Date: Tue, 13 Jun 2023 11:20:43 +0000
Subject: [PATCH] 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 | 20 +++--
src/components/entry-page/entry-page.js | 11 ++-
.../nrp-core-dashboard/nrp-core-dashboard.js | 82 +++++++++----------
3 files changed, 60 insertions(+), 53 deletions(-)
diff --git a/src/components/entry-page/entry-page.css b/src/components/entry-page/entry-page.css
index 6fa1062..50191e6 100644
--- a/src/components/entry-page/entry-page.css
+++ b/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
diff --git a/src/components/entry-page/entry-page.js b/src/components/entry-page/entry-page.js
index 06be4c1..6a3c88d 100644
--- a/src/components/entry-page/entry-page.js
+++ b/src/components/entry-page/entry-page.js
@@ -1,4 +1,5 @@
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>
);
diff --git a/src/components/nrp-core-dashboard/nrp-core-dashboard.js b/src/components/nrp-core-dashboard/nrp-core-dashboard.js
index efb3d3d..a82678a 100644
--- a/src/components/nrp-core-dashboard/nrp-core-dashboard.js
+++ b/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>
);
}
}
--
GitLab