diff --git a/src/Components/Pages/Visualizer/Graphs/MVT/Components/Form.js b/src/Components/Pages/Visualizer/Graphs/MVT/Components/Form.js new file mode 100644 index 0000000..6d42d70 --- /dev/null +++ b/src/Components/Pages/Visualizer/Graphs/MVT/Components/Form.js @@ -0,0 +1,94 @@ +import React, { useContext, useState } from 'react'; +import { FontVarTitle } from '../../../../../Shared/Title'; +import { Icon } from '../../../../../Shared/Icon'; +import { transactionsIcon } from '../../../../../../Resources/Icons'; +import { ThemeContext } from '../../../../../../Context/theme'; +import { ReplicaButton } from '../../../../../Shared/Buttons'; + +const Form = () => { + const { theme } = useContext(ThemeContext); + + const [formData, setFormData] = useState({ + formKey: '', + value: '' + }); + + const handleChange = (e) => { + setFormData({ + ...formData, + [e.target.name]: e.target.value + }); + }; + + const submitGet = () => { + // ! CALL GET API HERE + console.log('GET', formData.formKey); + setFormData({ + formKey: '', + value: '' + }); + }; + + const submitCommit = () => { + // ! CALL COMMIT API HERE + console.log('COMMIT', formData); + setFormData({ + formKey: '', + value: '' + }); + }; + + return ( +
+
+ + +
+
+ +
+ +
+
+
+ +
+ +
+
+
+ + +
+
+ ); +}; + +export default Form; \ No newline at end of file diff --git a/src/Components/Pages/Visualizer/Graphs/MVT/index.js b/src/Components/Pages/Visualizer/Graphs/MVT/index.js index 2dd10fa..453718f 100644 --- a/src/Components/Pages/Visualizer/Graphs/MVT/index.js +++ b/src/Components/Pages/Visualizer/Graphs/MVT/index.js @@ -4,6 +4,7 @@ import { mvtGraphComputation } from "../../Ancilliary/Computation/MVT"; import ResizableContainer from "../Components/GraphContainer"; import MvtGraph from "./Components/Graph"; import Manipulator from "./Components/Manipulator"; +import Form from "./Components/Form"; const LABEL_TOGGLES = { "Replica 1": true, "Replica 2": true, "Replica 3": true, "Replica 4": true }; const FAULT_TOGGLES = { "Replica 1": false, "Replica 2": false, "Replica 3": false, "Replica 4": false }; @@ -123,7 +124,8 @@ const Mvt = () => { -
+
+
{
- +
diff --git a/src/Context/visualizer.js b/src/Context/visualizer.js index 54c178d..8969445 100644 --- a/src/Context/visualizer.js +++ b/src/Context/visualizer.js @@ -156,7 +156,7 @@ export const VizDataHistoryProvider = ({ children }) => { }; updateStatus(); - const interval = setInterval(updateStatus, 3000); + const interval = setInterval(updateStatus, 20000); return () => clearInterval(interval); }, []); diff --git a/src/Resources/Icons/index.js b/src/Resources/Icons/index.js index dbb89ed..d45da3b 100644 --- a/src/Resources/Icons/index.js +++ b/src/Resources/Icons/index.js @@ -89,4 +89,7 @@ export const maximizeIcon = "M200 32H56C42.7 32 32 42.7 32 56V200c0 9.7 5.8 18.5 export const tableIcon = "M64 256V160H224v96H64zm0 64H224v96H64V320zm224 96V320H448v96H288zM448 256H288V160H448v96zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z" // Transactions ICON | Back and Forth, Left and Right | viewBox="0 0 448 512" -export const transactionsIcon = "M438.6 150.6c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.7 96 32 96C14.3 96 0 110.3 0 128s14.3 32 32 32l306.7 0-41.4 41.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l96-96zm-333.3 352c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 416 416 416c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0 41.4-41.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3l96 96z"; \ No newline at end of file +export const transactionsIcon = "M438.6 150.6c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.7 96 32 96C14.3 96 0 110.3 0 128s14.3 32 32 32l306.7 0-41.4 41.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l96-96zm-333.3 352c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 416 416 416c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0 41.4-41.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3l96 96z"; + +// Lightning Icon | Bolt, Thunder | viewBox="0 0 448 512" +export const lightningIcon = "M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8-39.9 1.8l-256 224c-10 8.8-13.6 22.9-8.9 35.3S50.7 288 64 288l111.5 0L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8 39.9-1.8l256-224c10-8.8 13.6-22.9 8.9-35.3s-16.6-20.7-30-20.7l-111.5 0L349.4 44.6z"; \ No newline at end of file