forked from asyncapi/simulator
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: added Dropdown Menu for Drag-and-Drop Node Creation + creation …
…of local mqtt server using aedes (asyncapi#185) * added react-flow and updated toolbar * file upload and parsing added * parsing and displaying of nodes added * removed commented code and fixed the file structure * before removing comments * before pushing * removed comments and fixed the drag and drop issue * integrated mqtt using aedes and websocket * fixed subscribe node unhandled exception error * fixing sonar cloud error --------- Co-authored-by: NektariosFifes <[email protected]>
- Loading branch information
1 parent
a45c0ae
commit 98b7e47
Showing
17 changed files
with
7,664 additions
and
3,939 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| import React, { useState, useEffect, useRef } from 'react'; | ||
| import './index.css' | ||
| import { CSSTransition } from 'react-transition-group' | ||
| import { BsPlusLg, BsPlayFill, BsChevronRight, BsArrowLeft, BsArrowBarUp, BsArrowBarDown, BsFillHddRackFill, BsFillDiagram2Fill } from "react-icons/bs"; | ||
| import Subscribe from './NodeInput/Subscribe'; | ||
| import Application from './NodeInput/Application'; | ||
| import Publish from './NodeInput/Publish'; | ||
|
|
||
|
|
||
| const AddButton = ({ nodes, setNodes }) => { | ||
|
|
||
| return ( | ||
| <Navbar> | ||
|
|
||
| <NavItem icon={<BsPlayFill />} /> | ||
|
|
||
| <NavItem icon={<BsPlusLg />}> | ||
| <DropdownMenu nodes={nodes} setNodes={setNodes} ></DropdownMenu> | ||
| </NavItem> | ||
|
|
||
| </Navbar> | ||
| ); | ||
| } | ||
|
|
||
| function Navbar(props: { children: React.ReactNode }) { | ||
| return ( | ||
| <nav className="navbar"> | ||
| <ul className="navbar-nav">{props.children}</ul> | ||
| </nav> | ||
| ); | ||
| } | ||
|
|
||
| function NavItem(props: { icon: React.ReactChild; children?: React.ReactNode }) { | ||
| const [open, setOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <li className="nav-item"> | ||
| <a href="#" className="icon-button" onClick={() => setOpen(!open)}> | ||
| {props.icon} | ||
| </a> | ||
|
|
||
| {open && props.children} | ||
| </li> | ||
| ); | ||
| } | ||
|
|
||
| function DropdownMenu({ nodes, setNodes }) { | ||
| const [activeMenu, setActiveMenu] = useState('main'); | ||
| const [menuHeight, setMenuHeight] = useState(null); | ||
| const dropdownRef = useRef(null); | ||
|
|
||
| useEffect(() => { | ||
| setMenuHeight(dropdownRef.current?.firstChild.offsetHeight) | ||
| }, []) | ||
|
|
||
| function calcHeight(el) { | ||
| const height = el.offsetHeight; | ||
| setMenuHeight(height); | ||
| } | ||
|
|
||
| function DropdownItem(props) { | ||
| return ( | ||
| <div className="menu-item" onClick={() => props.goToMenu && setActiveMenu(props.goToMenu)} onKeyDown={() => props.goToMenu && setActiveMenu(props.goToMenu)}> | ||
| <span className="icon-button">{props.leftIcon}</span> | ||
| {props.children} | ||
| <span className="icon-right">{props.rightIcon}</span> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="dropdown" style={{ height: menuHeight }} ref={dropdownRef}> | ||
|
|
||
| <CSSTransition | ||
| in={activeMenu === 'main'} | ||
| timeout={500} | ||
| classNames="menu-primary" | ||
| unmountOnExit | ||
| onEnter={calcHeight}> | ||
| <div className="menu"> | ||
| <DropdownItem leftIcon={<BsFillDiagram2Fill/>} >Add Nodes</DropdownItem> | ||
| <DropdownItem | ||
| leftIcon={<BsFillHddRackFill/>} | ||
| rightIcon={<BsChevronRight/>} | ||
| goToMenu="application"> | ||
| Application Node | ||
| </DropdownItem> | ||
| <DropdownItem | ||
| leftIcon={<BsArrowBarUp/>} | ||
| rightIcon={<BsChevronRight/>} | ||
| goToMenu="publish"> | ||
| Publish Node | ||
| </DropdownItem> | ||
| <DropdownItem | ||
| leftIcon={<BsArrowBarDown/>} | ||
| rightIcon={<BsChevronRight/>} | ||
| goToMenu="subscribe"> | ||
| Subscribe Node | ||
| </DropdownItem> | ||
|
|
||
| </div> | ||
| </CSSTransition> | ||
|
|
||
| <CSSTransition | ||
| in={activeMenu === 'application'} | ||
| timeout={500} | ||
| classNames="menu-secondary" | ||
| unmountOnExit | ||
| onEnter={calcHeight}> | ||
| <div className="menu"> | ||
| <DropdownItem goToMenu="main" leftIcon={<BsArrowLeft/>}> | ||
| <h3>Create Application Node</h3> | ||
| </DropdownItem> | ||
| <Application nodes={nodes} setNodes={setNodes}/> | ||
| </div> | ||
| </CSSTransition> | ||
|
|
||
| <CSSTransition | ||
| in={activeMenu === 'publish'} | ||
| timeout={500} | ||
| classNames="menu-secondary" | ||
| unmountOnExit | ||
| onEnter={calcHeight}> | ||
| <div className="menu"> | ||
| <DropdownItem goToMenu="main" leftIcon={<BsArrowLeft/>}> | ||
| <h3>Create Publish Node</h3> | ||
| </DropdownItem> | ||
| <Publish nodes={nodes} setNodes={setNodes} /> | ||
| </div> | ||
| </CSSTransition> | ||
|
|
||
| <CSSTransition | ||
| in={activeMenu === 'subscribe'} | ||
| timeout={500} | ||
| classNames="menu-secondary" | ||
| unmountOnExit | ||
| onEnter={calcHeight}> | ||
| <div className="menu"> | ||
| <DropdownItem goToMenu="main" leftIcon={<BsArrowLeft/>}> | ||
| <h3>Create Subscribe Node</h3> | ||
| </DropdownItem> | ||
| <Subscribe nodes={nodes} setNodes={setNodes}/> | ||
| </div> | ||
| </CSSTransition> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default AddButton |
93 changes: 93 additions & 0 deletions
93
Desktop/src/renderer/AddNodesDnD/NodeInput/Application.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import React, { useState } from "react"; | ||
| import "./index.css"; | ||
|
|
||
| export default function Application({ nodes, setNodes }) { | ||
| const [formData, setFormData] = useState({ | ||
| description: "", | ||
| title: "", | ||
| version: "", | ||
| license: "", | ||
| externalDocs: "", | ||
| servers: "", | ||
| defaultContentType: "", | ||
| }); | ||
|
|
||
| const handleChange = (event) => { | ||
| const { name, value } = event.target; | ||
| setFormData((prevFormData) => ({ ...prevFormData, [name]: value })); | ||
| }; | ||
|
|
||
| const onDragStart = (event, nodeType) => { | ||
| event.dataTransfer.setData('application/reactflow', nodeType); | ||
| event.dataTransfer.effectAllowed = 'move'; | ||
| event.dataTransfer.setData('application/json', JSON.stringify(formData)); | ||
| }; | ||
|
|
||
| return ( | ||
| <div onDragStart={(event) => onDragStart(event, 'applicationNode')} draggable> | ||
| <form className="custom-form"> | ||
| <label htmlFor="description">Description:</label> | ||
| <textarea | ||
| id="description" | ||
| name="description" | ||
| value={formData.description} | ||
| onChange={handleChange} | ||
| /> | ||
|
|
||
| <label htmlFor="title">Title:</label> | ||
| <input | ||
| type="text" | ||
| id="title" | ||
| name="title" | ||
| value={formData.title} | ||
| onChange={handleChange} | ||
| /> | ||
|
|
||
| <label htmlFor="version">Version:</label> | ||
| <input | ||
| type="text" | ||
| id="version" | ||
| name="version" | ||
| value={formData.version} | ||
| onChange={handleChange} | ||
| /> | ||
|
|
||
| <label htmlFor="license">License:</label> | ||
| <input | ||
| type="text" | ||
| id="license" | ||
| name="license" | ||
| value={formData.license} | ||
| onChange={handleChange} | ||
| /> | ||
|
|
||
| <label htmlFor="externalDocs">External Docs:</label> | ||
| <input | ||
| type="text" | ||
| id="externalDocs" | ||
| name="externalDocs" | ||
| value={formData.externalDocs} | ||
| onChange={handleChange} | ||
| /> | ||
|
|
||
| <label htmlFor="servers">Servers:</label> | ||
| <input | ||
| type="text" | ||
| id="servers" | ||
| name="servers" | ||
| value={formData.servers} | ||
| onChange={handleChange} | ||
| /> | ||
|
|
||
| <label htmlFor="defaultContentType">Default Content Type:</label> | ||
| <input | ||
| type="text" | ||
| id="defaultContentType" | ||
| name="defaultContentType" | ||
| value={formData.defaultContentType} | ||
| onChange={handleChange} | ||
| /> | ||
| </form> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.