diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx new file mode 100644 index 000000000..3faa4537b --- /dev/null +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -0,0 +1,160 @@ +import { Dialog, Transition } from "@headlessui/react"; +import { XMarkIcon, CommandLineIcon, CodeBracketSquareIcon } from "@heroicons/react/24/outline"; +import { Fragment, useContext, useRef, useState } from "react"; +import { PopUpContext } from "../../contexts/popUpContext"; +import AceEditor from "react-ace"; +import "ace-builds/src-noconflict/mode-python"; +import "ace-builds/src-noconflict/theme-github"; +import "ace-builds/src-noconflict/theme-twilight"; +import "ace-builds/src-noconflict/ext-language_tools"; +import "ace-builds/webpack-resolver"; +import { darkContext } from "../../contexts/darkContext"; +import { checkCode } from "../../controllers/API"; +import { alertContext } from "../../contexts/alertContext"; +import { FaPython } from "react-icons/fa"; + +const pythonCode = `import requests + +API_URL = "{window.location.protocol}//{window.location.host}/predict" + +def predict(message): + with open("FLOW NAME.json:, "r") as f: + json_data = json.load(f) + payload['exported_flow'] = json_data + payload['message'] = message + response = requests.post(API_URL, json=payload) + return response.json() # JSON {"result": "Response"} + +print(predict("Your message"))`; + +const jsCode = `codigo em javascript`; + +const tabs = [ + { + name: "Python", + mode: "python", + image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", + code: pythonCode, + }, + { + name: "Javascript", + mode: "js", + image: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1024px-Unofficial_JavaScript_logo_2.svg.png?20141107110902", + code: jsCode, + }, + +] + +export default function ApiModal() { + const [open, setOpen] = useState(true); + const { dark } = useContext(darkContext); + const { closePopUp } = useContext(PopUpContext); + const [activeTab, setActiveTab] = useState(0); + const ref = useRef(); + function setModalOpen(x: boolean) { + setOpen(x); + if (x === false) { + setTimeout(() => { + closePopUp(); + }, 300); + } + } + return ( + + + +
+ + +
+
+ + +
+ +
+
+
+
+
+
+ + Use API + +
+
+
+
+
+ {tabs.map((tab, index) => ( + + ))} +
+
+ +
+
+
+
+ + +
+
+
+ + ); +} diff --git a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx index f4fac149f..4b321915d 100644 --- a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx @@ -8,6 +8,7 @@ import { ArrowDownTrayIcon, ArrowUpTrayIcon, BellIcon, + CodeBracketSquareIcon, MoonIcon, SunIcon, } from "@heroicons/react/24/outline"; @@ -17,6 +18,7 @@ import { alertContext } from "../../../../contexts/alertContext"; import ImportModal from "../../../../modals/importModal"; import ExportModal from "../../../../modals/exportModal"; import { typesContext } from "../../../../contexts/typesContext"; +import ApiModal from "../../../../modals/ApiModal"; export default function TabsManagerComponent() { const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } = @@ -55,6 +57,12 @@ export default function TabsManagerComponent() { flow={null} />
+