From 93e2d2bd922789daba0c491f8340f9a86c6faee7 Mon Sep 17 00:00:00 2001 From: Suhas-G Date: Fri, 8 Jul 2022 20:08:32 +0200 Subject: [PATCH 1/4] in progress --- frontend/package-lock.json | 25 ++++++ frontend/package.json | 3 +- frontend/src/App.tsx | 15 +++- frontend/src/components/menu/index.tsx | 104 +++++++++++++++++++++++-- frontend/src/pages/display/index.tsx | 7 ++ 5 files changed, 144 insertions(+), 10 deletions(-) create mode 100644 frontend/src/pages/display/index.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e13107f9..9b6ac2bb 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -7225,6 +7225,14 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -12029,6 +12037,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" }, + "react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "requires": { + "history": "^5.2.0", + "react-router": "6.3.0" + } + }, "react-scripts": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index fbc9e805..6dc68559 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -20,14 +20,15 @@ "closest": "0.0.1", "dagre": "^0.8.5", "lodash": "^4.17.21", - "sass": "^1.50.0", "pathfinding": "^0.4.18", "paths-js": "^0.4.11", "react": "^17.0.2", "react-dom": "^17.0.2", "react-modal-promise": "^0.7.6", + "react-router-dom": "^6.3.0", "react-scripts": "4.0.3", "resize-observer-polyfill": "^1.5.1", + "sass": "^1.50.0", "typescript": "^4.1.2", "web-vitals": "^1.0.1" }, diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index e4e1d162..7fd0b77e 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -6,6 +6,12 @@ import MenuBar from './components/menu'; import Editor from './core/editor'; import { GlobalState, IGlobalState } from './core/store'; import Board from './pages/board'; +import { + BrowserRouter, + Routes, + Route, +} from "react-router-dom"; +import Display from './pages/display'; /** * Use default dark theme from Material UI @@ -30,10 +36,15 @@ function App() { return (
- {/* Global State */} - + + + + } /> + } /> + +
diff --git a/frontend/src/components/menu/index.tsx b/frontend/src/components/menu/index.tsx index 3984fa7a..b5461598 100644 --- a/frontend/src/components/menu/index.tsx +++ b/frontend/src/components/menu/index.tsx @@ -1,25 +1,41 @@ -import { AppBar, Button, Toolbar, useTheme } from '@material-ui/core'; -import { ClickEvent, Menu, MenuItem, SubMenu } from '@szhsin/react-menu'; -import React, { ChangeEvent } from 'react'; +import { AppBar, Button, IconButton, Toolbar, useTheme } from '@material-ui/core'; +import { ClickEvent, Menu, MenuButton, MenuItem, MenuRadioGroup, RadioChangeEvent, SubMenu } from '@szhsin/react-menu'; +import { ChangeEvent, Fragment, useEffect, useState } from 'react'; +import { useLocation } from 'react-router-dom'; import logo from '../../assets/images/logo.png'; import { PROJECT_FILE_EXTENSION } from '../../core/constants'; import Editor from '../../core/editor'; import { textFile2DataURL } from '../../core/utils'; import { collectionBlocks, CollectionBlockType } from '../blocks/collection/collection-factory'; +import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; import './styles.scss'; - +import { PlayArrow, Stop } from '@material-ui/icons'; export interface MenuBarProps { editor: Editor; } + +function MenuBar(props: MenuBarProps) { + const location = useLocation(); + console.log(location.pathname); + + if (location.pathname === '/') { + return + } else if (location.pathname === '/display') { + return + } else { + return
; + } +} + /** * * MenuBar component * It offers 'File', 'Edit', 'Basic' and 'Blocks' menus */ -function MenuBar(props: MenuBarProps) { +function MenuBarMain(props: MenuBarProps) { const theme = useTheme(); const isDark = theme.palette.type === 'dark'; @@ -27,6 +43,7 @@ function MenuBar(props: MenuBarProps) { const blockReader = new FileReader(); const { editor } = props; + /** * Callback for when a block is selected. * It adds the block to the current project through the editor. @@ -131,11 +148,12 @@ function MenuBar(props: MenuBarProps) { let filename = editor.getName(); if (process.env.REACT_APP_BACKEND_HOST && model) { const url = process.env.REACT_APP_BACKEND_HOST + 'build' - const headers: HeadersInit = {'Content-Type': 'application/json'}; + const headers: HeadersInit = { 'Content-Type': 'application/json' }; fetch(url, { method: 'POST', body: JSON.stringify(model), - headers: headers} + headers: headers + } ).then((response) => { if (response.ok) { // Get the filename @@ -161,6 +179,15 @@ function MenuBar(props: MenuBarProps) { } } + + /** + * Open new tab to connect to VNC of localhost + * @param _event + */ + const openVNCDisplay = (_event: ClickEvent) => { + window.open('/display', '_blank')?.focus(); + } + /** * Recursive helper function to generate menu options for the Blocks menu. * @param blocks Map containing Blocks menu structure @@ -199,6 +226,7 @@ function MenuBar(props: MenuBarProps) { Save as.. Add as block Build and Download + Open Display Edit} @@ -251,4 +279,66 @@ function MenuBar(props: MenuBarProps) { ) } +function MenuBarDisplay() { + + const theme = useTheme(); + const isDark = theme.palette.type === 'dark'; + const socket = new WebSocket('ws://localhost:8765'); + const [gazeboStarted, toggleGazebo] = useState(false); + const [gazeboWorld, setGazeboWorld] = useState('empty'); + + const changeGazeboWorld = (_event: RadioChangeEvent) => { + if (!gazeboStarted) { + setGazeboWorld(_event.value); + } + } + + const toggleGazeboWorld = () => { + toggleGazebo(!gazeboStarted); + if (gazeboStarted) { + socket.send(JSON.stringify({"command": "start_gazebo", "world": gazeboWorld})); + } else { + socket.send(JSON.stringify({"command": "stop_gazebo"})); + } + } + + const getPlayButton = () => { + if (!gazeboStarted) { + return ; + } else { + return ; + } + } + + return ( + + + Visual Circuit +
+ + {getPlayButton()} + + World: {gazeboWorld} +
+ + + Gazebo worlds + } + theming={isDark ? 'dark' : undefined}> + + Empty World + {/* Green + Blue */} + + + + + ); +} + + + export default MenuBar; \ No newline at end of file diff --git a/frontend/src/pages/display/index.tsx b/frontend/src/pages/display/index.tsx new file mode 100644 index 00000000..4e03404e --- /dev/null +++ b/frontend/src/pages/display/index.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +function Display() { + return