Skip to content

Commit

Permalink
HG-VideoFeed
Browse files Browse the repository at this point in the history
  • Loading branch information
@hogfig
hogfig committed Jan 8, 2023
1 parent ab25034 commit f001db1
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 34 deletions.
48 changes: 48 additions & 0 deletions frontend/src/components/AddVideoFeedPopup.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React, { useState, useContext } from "react";
import AuthContext from '../context/auth-context';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import Form from 'react-bootstrap/Form'
import TopicDropdown from './TopicDropdown';

function AddVideoFeedPopup(props) {
const handleSubmit = async (event) => {
event.preventDefault();

props.handleClose();
}

return (
<Modal show={props.show} onHide={props.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Add Video Feed</Modal.Title>
</Modal.Header>
<Form onSubmit={handleSubmit}>
<Modal.Body>
<Form.Group className="mb-3 w-100" style={{ "display": "inline-flex", "justify-content": "space-between" }}>
<Form.Label>Select a topic</Form.Label>
{/* <TopicDropdown className="float-right" /> */}
</Form.Group>
<Form.Group className="mb-3" controlId="topicValue">
<Form.Label>Topic value to display</Form.Label>
<Form.Control type="input" placeholder="battery_voltage" />
</Form.Group>
<Form.Group className="mb-3" controlId="topicLable">
<Form.Label>Window name</Form.Label>
<Form.Control type="input" placeholder="battery status" />
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Button variant="primary" type="submit">
Add video feed
</Button>
<Button variant="secondary" onClick={props.handleClose}>
Close
</Button>
</Modal.Footer>
</Form>
</Modal>
);
}

export default AddVideoFeedPopup;
94 changes: 61 additions & 33 deletions frontend/src/components/Navigation.js
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,73 @@
import React, {useContext} from "react";
import {LinkContainer} from "react-router-bootstrap";
import { Button, Navbar, Nav, Container} from 'react-bootstrap';
import React, { useContext, useState } from "react";
import { LinkContainer } from "react-router-bootstrap";
import { Button, Navbar, Nav, Container } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle';
import NavbarCollapse from 'react-bootstrap/esm/NavbarCollapse';
import AuthContext from "../context/auth-context";
import RosContext from "../context/ros-context";
import Dropdown from 'react-bootstrap/Dropdown';
import NavItem from 'react-bootstrap/NavItem';
import NavLink from 'react-bootstrap/NavLink';
import AddVideoFeedPopup from "./AddVideoFeedPopup";
//topic contet

const Navigation = (props) =>{
const Navigation = (props) => {
const contextRos = useContext(RosContext);
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);

const handleVideoFeeePopup = (event) =>{
event.preventDefault();
setShow(true)
}

return (
<AuthContext.Consumer>
{(context) =>{
return (
<Navbar className='fixed-top' variant="dark" bg="dark" display="block" expand="lg">
<Container fluid>
{context.token && <Navbar.Toggle className='ma-auto'/>}
<Navbar.Brand>HEKTOR</Navbar.Brand>
{context.token &&
<React.Fragment>
<NavbarCollapse>
<Nav className='ms-auto'>
<LinkContainer to='/home'>
<Nav.Link className='px-5'>Home</Nav.Link>
</LinkContainer>
{/* Show only if we have a ROS connection */}
{ contextRos.isConnected &&
<LinkContainer to='/view'>
<Nav.Link className='px-5'>View</Nav.Link>
</LinkContainer>}
</Nav>
</NavbarCollapse>
<Button variant="primary" onClick={context.logout}>Log Out</Button>
</React.Fragment>
}
</Container>
</Navbar>

);
}}
<AuthContext.Consumer>
{(context) => {
return (
<Navbar className='fixed-top' variant="dark" bg="dark" display="block" expand="lg">
<Container fluid>
{context.token && <Navbar.Toggle className='ma-auto' />}
<Navbar.Brand>HEKTOR</Navbar.Brand>
{context.token &&
<React.Fragment>
<NavbarCollapse>
<Nav className='ms-auto'>
<LinkContainer to='/home'>
<Nav.Link className='px-5'>Home</Nav.Link>
</LinkContainer>
{/* Show only if we have a ROS connection */}
{contextRos.isConnected &&
<LinkContainer to='/view'>
<Nav.Link className='px-5'>View</Nav.Link>
</LinkContainer>}
{contextRos.isConnected &&
<Dropdown as={NavItem} className='px-5'>
<Dropdown.Toggle as={NavLink} variant="primary" id="dropdown-basic">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item id="t1" onClick={handleVideoFeeePopup}>Add video feed</Dropdown.Item>
<Dropdown.Item id="t1">Add point cloud</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
}
<AddVideoFeedPopup show={show} handleClose={handleClose} />
</Nav>
</NavbarCollapse>
<Button variant="primary" onClick={context.logout}>Log Out</Button>
</React.Fragment>
}
</Container>
</Navbar>

);
}}
</AuthContext.Consumer>
);
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/StatusWindowField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ function StatusWindowField (props) {
//if can be converted to number
//tu dodaj da ga konvertas samo ako mora ic u graph data.
if( Number(object)){
props.topic[2] = Number(object);
props.topic[2] = Number(object).toFixed(2); //Number shows only 2 decimal places
}else{
props.topic[2] = object;
}
Expand Down

0 comments on commit f001db1

Please sign in to comment.