aboutsummaryrefslogtreecommitdiffstats
path: root/ui-react/src/components/app/LoopUI.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui-react/src/components/app/LoopUI.js')
-rw-r--r--ui-react/src/components/app/LoopUI.js56
1 files changed, 37 insertions, 19 deletions
diff --git a/ui-react/src/components/app/LoopUI.js b/ui-react/src/components/app/LoopUI.js
index 7de6ad01b..d058543a2 100644
--- a/ui-react/src/components/app/LoopUI.js
+++ b/ui-react/src/components/app/LoopUI.js
@@ -31,14 +31,15 @@ import { GlobalClampStyle } from '../../theme/globalStyle.js';
import ClosedLoopSvg from '../loop_viewer/svg/ClosedLoopSvg';
import ClosedLoopLogs from '../loop_viewer/logs/ClosedLoopLogs';
import ClosedLoopStatus from '../loop_viewer/status/ClosedLoopStatus';
+import UserService from '../backend_communication/UserService';
-const ProjectNameStyle = styled.a`
+const ProjectNameStyled = styled.a`
vertical-align: middle;
padding-left: 30px;
font-size: 30px;
`
-const LoopViewDivStyle = styled.div`
+const LoopViewDivStyled = styled.div`
height: 90vh;
overflow: hidden;
margin-left: 10px;
@@ -50,52 +51,69 @@ const LoopViewDivStyle = styled.div`
border-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
`
-const LoopViewHeaderDivStyle = styled.div`
+const LoopViewHeaderDivStyled = styled.div`
background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
padding: 10px 10px;
color: ${props => props.theme.loopViewerHeaderFontColor};
`
-const LoopViewBodyDivStyle = styled.div`
+const LoopViewBodyDivStyled = styled.div`
background-color: ${props => (props.theme.loopViewerBackgroundColor)};
padding: 10px 10px;
color: ${props => (props.theme.loopViewerHeaderFontColor)};
height: 95%;
`
-const LoopViewLoopNameSpanStyle = styled.span`
+const LoopViewLoopNameSpanStyled = styled.span`
font-weight: bold;
color: ${props => (props.theme.loopViewerHeaderFontColor)};
background-color: ${props => (props.theme.loopViewerHeaderBackgroundColor)};
`
export default class LoopUI extends React.Component {
+ state = {
+ userName: null,
+ loopName: "Empty (NO loop loaded yet)",
+ };
- loopName="Empty (NO loop loaded yet)";
+ constructor() {
+ super();
+ this.getUser = this.getUser.bind(this);
+ }
+
+ componentDidMount() {
+ this.getUser();
+ }
+
+ getUser() {
+ UserService.LOGIN().then(user => {
+ this.setState({userName:user})
+ });
+ }
renderMenuNavBar() {
return (
<MenuBar />
);
}
-
+
renderUserLoggedNavBar() {
return (
<Navbar.Text>
- Signed in as: <a href="login">{localStorage.getItem('user')}</a>
+ Signed in as: <a href="/login">{this.state.userName}</a>
</Navbar.Text>
);
}
-
+
renderLogoNavBar() {
return (
<Navbar.Brand>
<img height="50px" width="234px" src={logo} alt=""/>
- <ProjectNameStyle>CLAMP</ProjectNameStyle>
+ <ProjectNameStyled>CLAMP</ProjectNameStyled>
</Navbar.Brand>
);
}
-
+
renderNavBar() {
return (
<Navbar expand="lg">
@@ -108,34 +126,34 @@ export default class LoopUI extends React.Component {
renderLoopViewHeader() {
return (
- <LoopViewHeaderDivStyle>
- Loop Viewer - <LoopViewLoopNameSpanStyle id="loop_name">{this.loopName}</LoopViewLoopNameSpanStyle>
- </LoopViewHeaderDivStyle>
+ <LoopViewHeaderDivStyled>
+ Loop Viewer - <LoopViewLoopNameSpanStyled id="loop_name">{this.state.loopName}</LoopViewLoopNameSpanStyled>
+ </LoopViewHeaderDivStyled>
);
}
renderLoopViewBody() {
return (
- <LoopViewBodyDivStyle>
+ <LoopViewBodyDivStyled>
<ClosedLoopSvg />
<ClosedLoopLogs />
<ClosedLoopStatus />
- </LoopViewBodyDivStyle>
+ </LoopViewBodyDivStyled>
);
}
renderLoopViewer() {
return (
- <LoopViewDivStyle>
+ <LoopViewDivStyled>
{this.renderLoopViewHeader()}
{this.renderLoopViewBody()}
- </LoopViewDivStyle>
+ </LoopViewDivStyled>
);
}
render() {
return (
- <div>
+ <div id="main_div">
<GlobalClampStyle />
{this.renderNavBar()}
{this.renderLoopViewer()}