From b8b08ab9949a589364940e6179ee6044eb2acdbb Mon Sep 17 00:00:00 2001 From: David Hermann Date: Mon, 18 Sep 2023 14:23:57 +0200 Subject: [PATCH] Opens new window on icon click WiP - Show correct data in window Changed .gitignore --- backend/.gitignore | 3 +- frontend/src/components/TerminalTabs.tsx | 76 +++++++++++++++++++++--- 2 files changed, 70 insertions(+), 9 deletions(-) diff --git a/backend/.gitignore b/backend/.gitignore index ecdef5b..357dc59 100644 --- a/backend/.gitignore +++ b/backend/.gitignore @@ -1 +1,2 @@ -static \ No newline at end of file +static +custom.sh \ No newline at end of file diff --git a/frontend/src/components/TerminalTabs.tsx b/frontend/src/components/TerminalTabs.tsx index e96ae1e..a3d8995 100644 --- a/frontend/src/components/TerminalTabs.tsx +++ b/frontend/src/components/TerminalTabs.tsx @@ -4,8 +4,11 @@ import Tab from "@mui/material/Tab"; import IconButton from "@mui/material/IconButton"; import FullscreenIcon from '@mui/icons-material/Fullscreen'; import FullscreenExitIcon from '@mui/icons-material/FullscreenExit'; +import OpenInNewIcon from '@mui/icons-material/OpenInNew'; +import OpenInNewOffIcon from '@mui/icons-material/OpenInNewOff'; import Grid from "@mui/material/Grid"; import Tooltip from '@mui/material/Tooltip'; +import { createRoot } from "react-dom/client"; interface TabsProps { index: any; @@ -27,11 +30,11 @@ function TabPanel(props: TabsProps) { {...other} >
- {value === index && - Array.isArray(children) && children.map((child, id) => -
{child}
- ) - } + {value === index && + Array.isArray(children) && children.map((child, id) => +
{child}
+ ) + }
); @@ -43,8 +46,14 @@ interface TabControlProps { } export default function TerminalTabs(props: TabControlProps) { - const [value, setValue] = React.useState(0); - const [fullscreen, setFullscreen] = React.useState(false); + const [ value, setValue ] = React.useState(0); + const [ fullscreen, setFullscreen ] = React.useState(false); + const [ popout, setPopout ] = React.useState(false); + + + const container = document.createElement("div") + + const newWindow = React.useRef(null); const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => { setValue(newValue); @@ -70,9 +79,60 @@ export default function TerminalTabs(props: TabControlProps) { {fullscreen ? : } + + { + setPopout(true); + if (container) { + newWindow.current = window.open( + "", + "", + "width=600, height=400, left=200, top=200" + ); + const curWindow = newWindow.current; + + // Erstelle ein HTML-Dokument im Popup-Fenster + curWindow.document.open(); + curWindow.document.write('Popout Window'); + + // Übertrage den Inhalt aus props.children ins Popup-Fenster + props.children?.forEach((child, index) => { + const container = document.createElement('div'); + container.className = fullscreen ? "myFullscreenTerminalTab" : "myTerminalTab"; + + // Erstelle ein React-Root und rendere das React-Element darin + const root = createRoot(container); + root.render( + React.createElement(TabPanel, { value, fullscreen, index, key: index }, child) + ); + + // Füge das gerenderte React-Element in das Popup-Fenster ein + curWindow.document.body.appendChild(container); + }); + + + // Schließe das HTML-Dokument im Popup-Fenster + curWindow.document.write(''); + curWindow.document.close(); + + // Schließe das Popup-Fenster, wenn es geschlossen wird + curWindow.onunload = () => { + setPopout(false); + newWindow.current = null; + }; + } + }} + color="primary" + className="myFullscreenButton" + > + {popout ? : } + + + + + - {Array.isArray(props.children) && props.children.map((child, index) => {child}