2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright (C) 2019 AT&T Intellectual Property. All rights
7 * ================================================================================
8 * Licensed under the Apache License, Version 2.0 (the "License");
9 * you may not use this file except in compliance with the License.
10 * You may obtain a copy of the License at
12 * http://www.apache.org/licenses/LICENSE-2.0
14 * Unless required by applicable law or agreed to in writing, software
15 * distributed under the License is distributed on an "AS IS" BASIS,
16 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17 * See the License for the specific language governing permissions and
18 * limitations under the License.
19 * ============LICENSE_END============================================
20 * ===================================================================
24 import React from 'react';
25 import styled from 'styled-components';
26 import MenuBar from '../menu/MenuBar';
27 import Navbar from 'react-bootstrap/Navbar';
28 import logo from './logo.png';
29 import { GlobalClampStyle } from '../../theme/globalStyle.js';
31 import ClosedLoopSvg from '../loop_viewer/svg/ClosedLoopSvg';
32 import ClosedLoopLogs from '../loop_viewer/logs/ClosedLoopLogs';
33 import ClosedLoopStatus from '../loop_viewer/status/ClosedLoopStatus';
34 import UserService from '../backend_communication/UserService';
36 const ProjectNameStyled = styled.a`
37 vertical-align: middle;
42 const LoopViewDivStyled = styled.div`
48 color: ${props => props.theme.loopViewerFontColor};
49 background-color: ${props => props.theme.loopViewerBackgroundColor};
50 border: 1px solid transparent;
51 border-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
54 const LoopViewHeaderDivStyled = styled.div`
55 background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
57 color: ${props => props.theme.loopViewerHeaderFontColor};
60 const LoopViewBodyDivStyled = styled.div`
61 background-color: ${props => (props.theme.loopViewerBackgroundColor)};
63 color: ${props => (props.theme.loopViewerHeaderFontColor)};
67 const LoopViewLoopNameSpanStyled = styled.span`
69 color: ${props => (props.theme.loopViewerHeaderFontColor)};
70 background-color: ${props => (props.theme.loopViewerHeaderBackgroundColor)};
73 export default class LoopUI extends React.Component {
76 loopName: "Empty (NO loop loaded yet)",
81 this.getUser = this.getUser.bind(this);
89 UserService.LOGIN().then(user => {
90 this.setState({userName:user})
100 renderUserLoggedNavBar() {
103 Signed in as: <a href="/login">{this.state.userName}</a>
111 <img height="50px" width="234px" src={logo} alt=""/>
112 <ProjectNameStyled>CLAMP</ProjectNameStyled>
120 {this.renderLogoNavBar()}
121 {this.renderMenuNavBar()}
122 {this.renderUserLoggedNavBar()}
127 renderLoopViewHeader() {
129 <LoopViewHeaderDivStyled>
130 Loop Viewer - <LoopViewLoopNameSpanStyled id="loop_name">{this.state.loopName}</LoopViewLoopNameSpanStyled>
131 </LoopViewHeaderDivStyled>
135 renderLoopViewBody() {
137 <LoopViewBodyDivStyled>
141 </LoopViewBodyDivStyled>
148 {this.renderLoopViewHeader()}
149 {this.renderLoopViewBody()}
158 {this.renderNavBar()}
159 {this.renderLoopViewer()}