Opens new window on icon click

WiP - Show correct data in window Changed .gitignore
prona-p4-learning-platform · Sep 18, 2023 · b8b08ab · b8b08ab
1 parent 1f3a734
commit b8b08ab
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 9 deletions.
diff --git a/backend/.gitignore b/backend/.gitignore
@@ -1 +1,2 @@
-static
+static
+custom.sh
diff --git 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}
     >
       <div className="myTerminalContainer">
-      {value === index &&
-        Array.isArray(children) && children.map((child, id) =>
-          <div key={id} className="myTerminal">{child}</div>
-        )
-      }
+        {value === index &&
+          Array.isArray(children) && children.map((child, id) =>
+            <div key={id} className="myTerminal">{child}</div>
+          )
+        }
       </div>
     </div>
   );
@@ -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<any>(null);
 
   const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
     setValue(newValue);
@@ -70,9 +79,60 @@ export default function TerminalTabs(props: TabControlProps) {
               {fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
             </IconButton>
           </Tooltip>
+          <Tooltip title="Create popout" placement="left">
+            <IconButton
+              onClick={() => {
+                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('<html><head><title>Popout Window</title></head><body>');
+
+                  // Ü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('</body></html>');
+                  curWindow.document.close();
+
+                  // Schließe das Popup-Fenster, wenn es geschlossen wird
+                  curWindow.onunload = () => {
+                    setPopout(false);
+                    newWindow.current = null;
+                  };
+                }
+              }}
+              color="primary"
+              className="myFullscreenButton"
+            >
+              {popout ? <OpenInNewOffIcon /> : <OpenInNewIcon />}
+            </IconButton>
+          </Tooltip>
+
+
+
         </Grid>
       </Tabs>
-
       {Array.isArray(props.children) && props.children.map((child, index) =>
         <TabPanel value={value} fullscreen={fullscreen} index={index} key={index}>
           {child}