diff options
Diffstat (limited to 'maps-frontend/src')
| -rw-r--r-- | maps-frontend/src/App.js | 7 | ||||
| -rw-r--r-- | maps-frontend/src/components/Hub.js | 9 | ||||
| -rw-r--r-- | maps-frontend/src/components/HubList.js | 18 | ||||
| -rw-r--r-- | maps-frontend/src/components/InvestorInfo.js | 65 | ||||
| -rw-r--r-- | maps-frontend/src/components/Loading.js | 2 | ||||
| -rw-r--r-- | maps-frontend/src/components/Visualization.js | 13 | ||||
| -rw-r--r-- | maps-frontend/src/css/UserCheckin.css | 2 |
7 files changed, 94 insertions, 22 deletions
diff --git a/maps-frontend/src/App.js b/maps-frontend/src/App.js index a080adc..2eb0c81 100644 --- a/maps-frontend/src/App.js +++ b/maps-frontend/src/App.js @@ -24,6 +24,8 @@ function App() { }); // State for visualization data const [data, setData] = useState([]); + // State for selected person + const [selected, setSelected] = useState(-1); const toEpochMilli = date => Date.parse(date); const getGraphData = () => { @@ -55,7 +57,6 @@ function App() { getGraphData(); }, [dates]); - return ( <> {(!hasLoaded) ? <Loading></Loading> : @@ -64,9 +65,9 @@ function App() { <div className="Canvas-filler Canvas-filler-1"></div> <div className="Canvas-filler Canvas-filler-2"></div> <div className="Canvas-filler Canvas-filler-3"></div> - <HubList setHasLoaded={setHasLoaded} data={data}></HubList> + <HubList setHasLoaded={setHasLoaded} data={data} setSelected={setSelected} selected={selected} dates={dates}></HubList> <TimeSelector isChanging={isChanging} dates={dates} setDates={setDates}></TimeSelector> - <Visualization hasLoaded={hasLoaded} data={data}></Visualization> + <Visualization hasLoaded={hasLoaded} data={data} setSelected={setSelected}></Visualization> </div> } </> diff --git a/maps-frontend/src/components/Hub.js b/maps-frontend/src/components/Hub.js index 0504e3b..b5b3f28 100644 --- a/maps-frontend/src/components/Hub.js +++ b/maps-frontend/src/components/Hub.js @@ -11,17 +11,12 @@ import '../css/UserCheckin.css'; */ function Hub(props) { // State - toggled - const [isToggled, setIsToggled] = useState(false); return ( <li className='Checkin'> <div className="Img-flex"> - <span><span className="Clickable-name" onClick= {(e) => console.log(props.name)}>{props.name}</span> just checked in!</span> - <img className="Img-btn" hidden={isToggled} onClick={() => setIsToggled((toggle) => !toggle)} src="/round_expand_more_white_18dp.png" alt="image"/> - <img className="Img-btn" hidden={!isToggled} onClick={() => setIsToggled((toggle) => !toggle)} src="/round_expand_less_white_18dp.png" alt="image"/> - </div> - <div hidden={!isToggled}> - Nothin.... + <span className="Clickable-name" onClick= {() => props.setSelected(props.id)}>{props.name}</span> + <span>{props.value.toFixed(3)}</span> </div> </li>); } diff --git a/maps-frontend/src/components/HubList.js b/maps-frontend/src/components/HubList.js index af6c9b0..d046e94 100644 --- a/maps-frontend/src/components/HubList.js +++ b/maps-frontend/src/components/HubList.js @@ -1,6 +1,7 @@ // React and component imports import { useEffect, useState } from "react"; import Hub from "./Hub.js"; +import InvestorInfo from "./InvestorInfo.js"; // CSS import import '../css/UserCheckin.css'; @@ -12,6 +13,7 @@ import '../css/UserCheckin.css'; */ function HubList(props) { const [hubItems, setHubItems] = useState([]); + const [isSelected, setIsSelected] = useState(false); /** * Loads new the checkins into the current cache/map of hubs. @@ -21,21 +23,35 @@ function HubList(props) { let hubs = []; const sorted = props.data.sort((a, b) => b.suspicionScore - a.suspicionScore); sorted.forEach(hub => hubs.push( - <Hub key={hub.id} name={hub.name} value={hub.suspicionScore}></Hub> + <Hub key={hub.id} id={hub.id} name={hub.name} value={hub.suspicionScore} setSelected={props.setSelected}></Hub> )); setHubItems(hubs); } + const getName = () => { + console.log(props.selected); + props.data.forEach(hub => { + if (hub.id == props.selected) { + return hub.name; + } + }) + return ''; + } + // React hook that updates when the hubs are recalculated useEffect(() => updateHubItems(), [props.data]); + //React hook to show data for an investor + useEffect(() => setIsSelected(true), [props.selected]); + return ( <div className="User-checkin"> <div className="Checkins"> <h2>Suspicion Ranks</h2> <ul className='Checkin-list'>{hubItems}</ul> </div> + <InvestorInfo name={getName()} dates={props.dates}></InvestorInfo> </div> ); } diff --git a/maps-frontend/src/components/InvestorInfo.js b/maps-frontend/src/components/InvestorInfo.js new file mode 100644 index 0000000..24994d0 --- /dev/null +++ b/maps-frontend/src/components/InvestorInfo.js @@ -0,0 +1,65 @@ +// React import +import { useEffect, useState } from "react"; + +// CSS import +import '../css/UserCheckin.css'; + +/** + * Componenet for checkins. Has a toggle to show more info. + * @param {Object} props The props of the component. + * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info. + */ +function InvestorInfo(props) { + const [info, setInfo] = useState({}); + + const toEpochMilli = date => Date.parse(date); + const getInfo = () => { + if (props.name === "") { + return; + } + + console.log({ + person: props.name, + start: toEpochMilli(props.dates.start), + end: toEpochMilli(props.dates.end) + }); + fetch("http://localhost:4567/profit", { + method: "POST", + body: JSON.stringify({ + person: props.name, + start: toEpochMilli(props.dates.start), + end: toEpochMilli(props.dates.end) + }), + headers: { + "Content-Type": "application/json", + }, + credentials: "same-origin" + }) + .then(res => { + console.log(res); + res.json(); + }) + .then(data => { + console.log(data); + setInfo(data); + }) + .catch(err => console.log(err)); + } + /* + + const coords = userCoords.map((coord, index) => + <li key={index}> + <span>{'('+coord[0].toFixed(6)}, {coord[1].toFixed(6)+')'}</span> + </li> + );*/ + + useEffect(() => getInfo(), [props.name]) + +return ( + <div className="Chosen-user"> + hi + </div> +); +} + +export default InvestorInfo;
\ No newline at end of file diff --git a/maps-frontend/src/components/Loading.js b/maps-frontend/src/components/Loading.js index ed95bb1..6fdf5ba 100644 --- a/maps-frontend/src/components/Loading.js +++ b/maps-frontend/src/components/Loading.js @@ -10,7 +10,7 @@ function Loading() { <div className="App Loading"> <header className="App-header"> <img src={"./logo512.png"} className="App-logo" alt="logo" /> - <h1 className="App-title">Loading Maps</h1> + <h1 className="App-title">Loading WatchDogs</h1> <p className="App-title">It takes a minute to connect to the servers and database :)</p> </header> </div> diff --git a/maps-frontend/src/components/Visualization.js b/maps-frontend/src/components/Visualization.js index c33339b..c0e5811 100644 --- a/maps-frontend/src/components/Visualization.js +++ b/maps-frontend/src/components/Visualization.js @@ -15,33 +15,28 @@ function Visualization(props) { const options = { edges: { color: "#ffffff" - } + }, + autoResize: true }; - const events = { - select: event => { - console.log(event); - } + select: () => event => props.setSelected(event.nodes[0]) }; - const [graphState, setGraphState] = useState({ nodes: [], edges: [] }); - const getNodes = () => { let nodes = []; props.data.forEach(hub => { nodes.push({ id: hub.id, label: hub.name, - size: hub.suspicionScore * 50 + size: hub.suspicionScore * 10 }); }); return nodes; } - const getEdges = () => { let edges = [] props.data.forEach(hub => { diff --git a/maps-frontend/src/css/UserCheckin.css b/maps-frontend/src/css/UserCheckin.css index 3e16ffd..141cc01 100644 --- a/maps-frontend/src/css/UserCheckin.css +++ b/maps-frontend/src/css/UserCheckin.css @@ -60,7 +60,7 @@ ul { .Checkin { - padding-bottom: 20px; + padding-top: 10px; border-bottom: 1px solid #e6ecf0; } |