Add Modal

components/ProjectModal.tsx

@@ -0,0 +1,63 @@
+import type { NextPage } from "next";
+import { useEffect, useRef, useState } from "react";
+import asciidoctor from "asciidoctor";
+import styles from "../styles/ProjectModal.module.css";
+
+interface ModalInput {
+    project: string;
+    visible: boolean;
+    setVisible: CallableFunction;
+}
+
+const ad = asciidoctor();
+
+const ProjectModal: NextPage<ModalInput> = ({ project, visible, setVisible }) => {
+    const projectEmpty = "<div>Kein Projekt ausgewählt.</div>";
+    const [projectData, setProjectData] = useState<string>(projectEmpty);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const projectNotFoundHtml = `<div class="${"error"}">Sorry! There is no data for this project. Please check back later to see if that changed!</div>`;
+    const projectServerErrorHtml = `<div class="${"error"}">Sorry! A server error happend when the project data was fetched!</div>`;
+
+    useEffect(() => {
+        if (project && project !== "") {
+            // TODO
+            // set Spinner
+            fetch(`/api/get_project?projectName=${project}`).then((res) => {
+                if (res.status === 404) setProjectData(projectNotFoundHtml);
+                if (res.status !== 200) setProjectData(projectServerErrorHtml);
+                res.text().then(data => {
+                    try {
+                        setProjectData(ad.convert(data).toString());
+                    } catch {
+                        setProjectData(projectServerErrorHtml);
+                    }
+                });
+            });
+        } else if (project === "") setProjectData(projectEmpty)
+    }, [project])
+
+    useEffect(() => {
+        if (projectData && containerRef.current && projectData !== "") {
+            containerRef.current.innerHTML = projectData;
+        }
+
+    }, [projectData, visible])
+
+    const onEscClose = (e: React.KeyboardEvent) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            setVisible(false);
+        }
+    }
+    
+    if (!visible) return <></>
+
+    return <div className={styles.modal} onKeyDown={onEscClose}>
+        <div ref={containerRef} className={styles.modalContainer}>
+        </div>
+    </div>
+}
+
+
+export default ProjectModal;

components/REPL/REPLInput.tsx

@@ -1,19 +1,24 @@
 import type { NextPage } from "next";
 import React, { MutableRefObject } from "react";
-import { commandCompletion, executeCommand } from "../../lib/commands";
+import { CommandInterface } from "../../lib/commands";
 import styles from "../../styles/REPL/REPLInput.module.css";
 
 interface REPLInputParams {
     historyCallback: CallableFunction;
     historyClear: CallableFunction;
     inputRef: MutableRefObject<HTMLInputElement|undefined>;
+    modalManipulation: {
+        setModalVisible: CallableFunction;
+        setModalProject: CallableFunction;
+    }
 }
 
-const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, inputRef}) => {
+const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, inputRef, modalManipulation}) => {
     const typed = React.createRef<HTMLSpanElement>();
     const completion = React.createRef<HTMLSpanElement>();
     const [currentCmd, setCurrentCmd] = React.useState<string[]>([]);
     const [justTabbed, setJustTabbed] = React.useState<number>(0);
+    const cmdIf = new CommandInterface(modalManipulation);
 
     const clearInput = (inputRef: HTMLInputElement) => {
         inputRef.value = "";
@@ -37,7 +42,7 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
         } else {
             input.maxLength = 20;
             // Get completion hint
-            const suggest = commandCompletion(currentInput);
+            const suggest = CommandInterface.commandCompletion(currentInput);
             setCurrentCmd(suggest);
             if (suggest.length === 0) suggest.push("");
             if (typed.current) typed.current.innerHTML = currentInput;
@@ -64,7 +69,7 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
                 historyClear();
                 return false;
             }
-            const result = executeCommand(command);
+            const result = cmdIf.executeCommand(command);
             clearInput(input);
             historyCallback(result);
             return false;
@@ -72,7 +77,7 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
 
         if (e.key === "d" && e.ctrlKey) {
             e.preventDefault();
-            const result = executeCommand("exit");
+            const result = cmdIf.executeCommand("exit");
             clearInput(input);
             historyCallback(result);
             return false;

components/REPL/index.tsx

@@ -4,7 +4,15 @@ import REPLHistory from "./REPLHistory";
 import styles from "../../styles/REPL/REPLComplete.module.css";
 import type { NextPage } from "next";
 
-const REPL: NextPage<{inputRef: MutableRefObject<HTMLInputElement|undefined>}> = ({ inputRef }) => {
+interface IREPLProps {
+    inputRef: MutableRefObject<HTMLInputElement|undefined>;
+    modalManipulation: {
+        setModalVisible: CallableFunction;
+        setModalProject: CallableFunction;
+    }
+}
+
+const REPL: NextPage<IREPLProps> = ({ inputRef, modalManipulation }) => {
     const [history, manipulateHistory] = useState<string[]>([]);
     const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000));
     const onClearHistory = () => manipulateHistory([]);
@@ -15,7 +23,7 @@ const REPL: NextPage<{inputRef: MutableRefObject<HTMLInputElement|undefined>}> =
 
     return (<div className={styles.container}>
         <REPLHistory history={history} inputRef={inputRef} />
-        <REPLInput historyCallback={onCommandExecuted} historyClear={onClearHistory} inputRef={inputRef} />
+        <REPLInput historyCallback={onCommandExecuted} historyClear={onClearHistory} inputRef={inputRef} modalManipulation={modalManipulation} />
         <div style={{flexGrow: 2}} onClick={focusInput}></div>
     </div>);
 };