diff --git a/src/components/entry-page/entry-page.css b/src/components/entry-page/entry-page.css index 6fa1062b5efca0fad9a42b20f92e5c01ab4df63b..50191e6f08a948c706a86e8b35fdf0cee320b1b0 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 06be4c102f643e4ff9c6120aca71dec32cf1a0d3..6a3c88def7eb9d53b2e168d714ac706ea216a3e1 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 efb3d3d5852c11f7b71bac93cce77c06e947f3a1..a82678a390351782e4d5f53d0f0601d510e54e16 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> ); } }