diff options
Diffstat (limited to 'react-frontend/src/components')
| -rw-r--r-- | react-frontend/src/components/HubList.js | 1 | ||||
| -rw-r--r-- | react-frontend/src/components/Modal.js | 70 | ||||
| -rw-r--r-- | react-frontend/src/components/landing.html | 10 |
3 files changed, 81 insertions, 0 deletions
diff --git a/react-frontend/src/components/HubList.js b/react-frontend/src/components/HubList.js index f5b1414..5736e89 100644 --- a/react-frontend/src/components/HubList.js +++ b/react-frontend/src/components/HubList.js @@ -39,6 +39,7 @@ function HubList(props) { setName(''); } + // React hook that updates when the hubs are recalculated useEffect(() => updateHubItems(), [props.data]); diff --git a/react-frontend/src/components/Modal.js b/react-frontend/src/components/Modal.js new file mode 100644 index 0000000..3ce5d39 --- /dev/null +++ b/react-frontend/src/components/Modal.js @@ -0,0 +1,70 @@ +import { useEffect, useState } from "react"; + +import '../css/Modal.css'; + + +function Modal() { + + const [count, setCount] = useState(0); + + const nextModal1 = () => { + setCount(1); + } + const nextModal2 = () => { + setCount(2); + } + const nextModal3 = () => { + setCount(3); + } + const nextModal4 = () => { + setCount(4); + } + const startModal = () => { + document.getElementById("main-modal").style.display = 'block'; + setCount(0); + } + const exitModal = () => { + document.getElementById("main-modal").style.display = 'none'; + } + + + return ( + <div> + <div id="main-modal"className="modal" style={{display : 'block'}}> + {(count == 0) && <p className="m modal0"> + <p className="align-center"><span>Welcome to WatchDogs!</span></p> + <p className="align-center">Click start for an introduction to the WatchDogs interface.</p> + <p className="align-center"><button className="next" onClick={nextModal1}>Start</button></p> + <p className="align-center"><button className="skip" onClick={exitModal}>Skip</button></p> + </p>} + {(count == 1) && <p className="m modal1"> + <p className="align-right"><i class="arrow right"></i></p> + <span>This is the suspicion ranking pane,</span> which displays + high-profile traders and the suspicion score our algorithm assigned + to them. The higher an individual is ranked, the more likely they are involved in insider trading. + <p className="align-center"><button className="next" onClick={nextModal2}>Next</button></p> + </p>} + {(count == 2) && <p className="m modal2"> + <p></p> + <span>The Timeframe pane </span> + allows you to chose the timespan you'd like to see trade data from. Individuals' suspicion score will + be calculated based on the trades that occured during the timeframe you select. + <p className="align-center"><button className="next" onClick={nextModal3}>Next</button></p> + <p className="align-right"><i class="arrow down"></i></p> + </p>} + {count == 3 && <p className="m modal3"> + <p className="align-left"><i class="arrow left"></i></p> + <span>The Trader Graph </span> + shows how traders are related. Click on a name in the graph to see more information about that individual. + <p className="align-center"><button className="next" onClick={nextModal4}>Next</button></p> + </p>} + {count == 4 && <p className="m modal4"> + <button className="next" onClick={exitModal}>You're ready to start using WatchDogs!</button> + </p>} + </div> + <span className="restart-modal align-center" onClick={startModal}></span> + </div> + ); +} + +export default Modal;
\ No newline at end of file diff --git a/react-frontend/src/components/landing.html b/react-frontend/src/components/landing.html new file mode 100644 index 0000000..8b33b5c --- /dev/null +++ b/react-frontend/src/components/landing.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html lang="en-US"> + <head> + <meta charset="utf-8"> + <title>WatchDogLanding</title> + </head> + <body> + <p>Hello welcome to watchdog</p> + </body> +</html> |