Options button added

Rahuljagwani · Rahuljagwani · commit d4c420465d9f · 2023-06-15T19:00:59.000+05:30
diff --git a/src/App.jsx b/src/App.jsx
@@ -15,6 +15,7 @@ import HistoryModal from './component/modals/History';
 import LocalFileBrowser from './component/fileBrowser';
 import FileEditModal from './component/modals/FileEdit';
 import MarkDown from './component/modals/markDown';
+import OptionsModal from './component/modals/OptionsModal';
 
 const app = () => {
     const [superState, dispatcher] = useReducer(reducer, initialState);
@@ -35,6 +36,7 @@ const app = () => {
             <SettingsModal superState={superState} dispatcher={dispatcher} />
             <HistoryModal superState={superState} dispatcher={dispatcher} />
             <FileEditModal superState={superState} dispatcher={dispatcher} />
+            <OptionsModal superState={superState} dispatcher={dispatcher} />
             <GraphCompDetails
                 closeModal={() => dispatcher({ type: T.Model_Close })}
                 superState={superState}
diff --git a/src/component/modals/GraphCompDetails.jsx b/src/component/modals/GraphCompDetails.jsx
@@ -96,7 +96,8 @@ const ModalComp = ({ closeModal, superState, dispatcher }) => {
             if (matchingElement) {
                 const fr = new FileReader();
                 fr.onload = (x) => {
-                    dispatcher({ type: T.SET_INPUT_FILE, payload: x.target.result });
+                    // eslint-disable-next-line max-len
+                    dispatcher({ type: T.SET_INPUT_FILE, payload: { content: x.target.result, fname: matchingElement.key.split('/')[1] } });
                 };
                 if (matchingElement.fileHandle) {
                     fr.readAsText(await matchingElement.fileHandle.getFile());
diff --git a/src/component/modals/NodeDetails.jsx b/src/component/modals/NodeDetails.jsx
@@ -170,8 +170,16 @@ const NodeDetails = ({
                                                 }
                                                 indexOfFile.push(indexOfFile[indexOfFile.length - 1] + 1);
                                                 index = indexOfFile[indexOfFile.length - 1] + 1;
-                                                // eslint-disable-next-line jsx-a11y/control-has-associated-label
-                                                return <option value={list} key={index} />;
+                                                /* eslint-disable */
+                                                return (
+                                                    <>
+                                                        <label htmlFor="dropdown">
+                                                            Hi
+                                                            <option value={list} key={index} />
+                                                        </label>
+                                                    </>
+                                                );
+                                                /* eslint-enable */
                                             }
                                             return null;
                                         })
diff --git a/src/component/modals/OptionsModal.jsx b/src/component/modals/OptionsModal.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import ParentModal from './ParentModal';
+import { actionType as T } from '../../reducer';
+import './optionsModal.css';
+
+const OptionsModal = ({ superState, dispatcher }) => {
+    const close = () => {
+        dispatcher({ type: T.SET_OPTIONS_MODAL, payload: false });
+    };
+    const Options = 'Options';
+    return (
+        <ParentModal closeModal={close} ModelOpen={superState.optionsModal} title={Options}>
+            <div className="main-div">
+                <label htmlFor="Docker">
+                    Docker
+                    <input type="checkbox" />
+                </label>
+                <label htmlFor="Unlock" className="main-div-comp">
+                    Unlock
+                    <input type="checkbox" />
+                </label>
+                <label htmlFor="Maxtime" className="main-div-comp">
+                    Max Time&nbsp;
+                    <input type="text" />
+                </label>
+                <br />
+                <br />
+                <br />
+                <span>Params:</span>
+                <br />
+                <textarea name="" id="" cols="80" rows="10" />
+            </div>
+        </ParentModal>
+    );
+};
+
+export default OptionsModal;
diff --git a/src/component/modals/markDown.jsx b/src/component/modals/markDown.jsx
@@ -4,12 +4,12 @@ import ParentModal from './ParentModal';
 import { actionType as T } from '../../reducer';
 
 const MarkDown = ({ superState, dispatcher }) => {
-    const title = 'Demo';
     const close = () => {
         dispatcher({ type: T.SET_MARKDOWN_MODAL, payload: false });
+        dispatcher({ type: T.SET_INPUT_FILE, payload: { inputFile: '', fname: '' } });
     };
     return (
-        <ParentModal closeModal={close} ModelOpen={superState.markDownModal} title={title}>
+        <ParentModal closeModal={close} ModelOpen={superState.markDownModal} title={superState.inputFileName}>
             <ReactMarkdown>{superState.inputFile}</ReactMarkdown>
         </ParentModal>
     );
diff --git a/src/component/modals/optionsModal.css b/src/component/modals/optionsModal.css
@@ -0,0 +1,6 @@
+.main-div {
+    padding: 30px;
+}
+.main-div-comp {
+    margin: 20px;
+}
diff --git a/src/reducer/actionType.js b/src/reducer/actionType.js
@@ -32,6 +32,7 @@ const actionType = {
     SET_ZOOM_LEVEL: 'SET_ZOOM_LEVEL',
     SET_EDIT_DETAILS_MODAL: 'SET_EDIT_DETAILS_MODAL',
     SET_NEW_GRAPH_MODAL: 'SET_NEW_GRAPH_MODAL',
+    SET_OPTIONS_MODAL: 'SET_OPTIONS_MODAL',
     EDIT_TEXTFILE: 'EDIT_TEXTFILE',
     SET_FILE_HANDLE: 'SET_FILE_HANDLE',
     SET_DIR_NAME: 'SET_DIR_NAME',
diff --git a/src/reducer/initialState.js b/src/reducer/initialState.js
@@ -13,6 +13,7 @@ const initialState = {
     settingsModal: false,
     editDetailsModal: false,
     newGraphModal: false,
+    optionsModal: false,
     markDownModal: false,
     eleSelected: false,
     drawModeOn: true,
diff --git a/src/reducer/reducer.js b/src/reducer/reducer.js
@@ -134,6 +134,10 @@ const reducer = (state, action) => {
         return { ...state, shareModal: action.payload };
     }
 
+    case T.SET_OPTIONS_MODAL: {
+        return { ...state, optionsModal: action.payload };
+    }
+
     case T.SET_FILE_STATE: {
         return { ...state, fileState: action.payload };
     }
@@ -147,7 +151,7 @@ const reducer = (state, action) => {
     }
 
     case T.SET_INPUT_FILE: {
-        return { ...state, inputFile: action.payload };
+        return { ...state, inputFile: action.payload.content, inputFileName: action.payload.fname };
     }
 
     case T.SET_FILE_REF: {
diff --git a/src/toolbarActions/toolbarFunctions.js b/src/toolbarActions/toolbarFunctions.js
@@ -130,6 +130,13 @@ const readTextFile = (state, setState, file, fileHandle) => {
     }
 };
 
+const optionModalToggle = (state, setState) => {
+    setState({
+        type: T.SET_OPTIONS_MODAL,
+        payload: true,
+    });
+};
+
 const createFile = (state, setState) => {
     setState({
         type: T.EDIT_TEXTFILE,
@@ -187,5 +194,5 @@ export {
     createNode, editElement, deleteElem, downloadImg, saveAction, saveGraphMLFile,
     createFile, readFile, readTextFile, newProject, clearAll, editDetails, undo, redo,
     openShareModal, openSettingModal, viewHistory, resetAfterClear,
-    toggleServer,
+    toggleServer, optionModalToggle,
 };
diff --git a/src/toolbarActions/toolbarList.js b/src/toolbarActions/toolbarList.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-alert */
 import {
     FaSave, FaUndo, FaRedo, FaTrash, FaFileImport, FaPlus, FaDownload, FaEdit, FaRegTimesCircle, FaHistory,
-    FaHammer, FaBug, FaBomb, FaToggleOn, FaThermometerEmpty, FaTrashRestore,
+    FaHammer, FaBug, FaBomb, FaToggleOn, FaThermometerEmpty, FaTrashRestore, FaCogs,
 } from 'react-icons/fa';
 
 import {
@@ -12,7 +12,7 @@ import {
 import {
     createNode, editElement, deleteElem, downloadImg, saveAction, saveGraphMLFile,
     createFile, readFile, clearAll, undo, redo, viewHistory, resetAfterClear,
-    toggleServer,
+    toggleServer, optionModalToggle,
     // openSettingModal,
 } from './toolbarFunctions';
 
@@ -135,6 +135,14 @@ const toolbarList = (state, dispatcher) => [
         active: true,
         visibility: true,
     },
+    {
+        type: 'action',
+        text: 'Options',
+        icon: FaCogs,
+        action: () => optionModalToggle(state, dispatcher),
+        active: state.isWorkflowOnServer,
+        visibility: state.isWorkflowOnServer,
+    },
     {
         type: 'action',
         text: 'Build',

Original file line number	Diff line number	Diff line change
`@@ -134,6 +134,10 @@ const reducer = (state, action) => {`
`134`	`134`	`return { ...state, shareModal: action.payload };`
`135`	`135`	`}`
`136`	`136`
	`137`	`+ case T.SET_OPTIONS_MODAL: {`
	`138`	`+ return { ...state, optionsModal: action.payload };`
	`139`	`+ }`
	`140`	`+`
`137`	`141`	`case T.SET_FILE_STATE: {`
`138`	`142`	`return { ...state, fileState: action.payload };`
`139`	`143`	`}`
`@@ -147,7 +151,7 @@ const reducer = (state, action) => {`
`147`	`151`	`}`
`148`	`152`
`149`	`153`	`case T.SET_INPUT_FILE: {`
`150`		`- return { ...state, inputFile: action.payload };`
	`154`	`+ return { ...state, inputFile: action.payload.content, inputFileName: action.payload.fname };`
`151`	`155`	`}`
`152`	`156`
`153`	`157`	`case T.SET_FILE_REF: {`