Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/WPI-Roadmap/client-side
Browse files Browse the repository at this point in the history
  • Loading branch information
@huangrandy
huangrandy committed Jan 13, 2024
2 parents 5c7f7ba + dbfb3ac commit 357b700
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 96 deletions.
16 changes: 16 additions & 0 deletions src/components/Dashboard/Dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,20 @@
background-color: #FFAEBC;
/* height: 100vh; */

}

.sideButt:hover {
background-color: white !important;
color: black !important;
border-color: black !important;
}

.courseNode {
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.courseNode:hover {
cursor: pointer;
background-color: black;
color: white;
}
208 changes: 114 additions & 94 deletions src/components/Dashboard/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Button, ConfigProvider, Dropdown, Form, Input, Layout, Menu, Modal, Sel
import Table from "../Table/Table.jsx";

import { MenuFoldOutlined, MenuUnfoldOutlined, ApartmentOutlined, FileTextOutlined, UserOutlined } from "@ant-design/icons";
import ReactFlow from 'reactflow';
import ReactFlow, { Background, MarkerType } from 'reactflow';
import Flow from './Flow.js';
import RequirementsSidebar from './Requirements/Requirements.js';

Expand Down Expand Up @@ -130,6 +130,12 @@ function Dashboard() {
if (tempCourses[j].data.label.match(courseCodeRegex) == courseCodes[k]) {
tempEdges.push({
id: 'e' + first.toString() + '-' + second.toString(),
type: 'smoothstep',
markerStart: {
type: MarkerType.ArrowClosed,
width: 20,
height: 20,
},
source: tempCourses[i].id,
target: tempCourses[j].id
});
Expand Down Expand Up @@ -240,102 +246,116 @@ function Dashboard() {

let [q, setQ] = useState(1);

let windowContent
if (tab == 1) {
windowContent = <Content
style={{
margin: 0,//'24px 16px',
padding: 24,
minHeight: 280,
background: colorBgContainer,
borderRadius: borderRadiusLG,
}}
>
<Flow initialNodes={nodes} initialEdges={edges} />
{/* <ReactFlow nodes={nodes} edges={initialEdges} /> */}
</Content>;
} else {
// windowContent = <Table />
}

return (
<>
<ConfigProvider
theme={{
token: {
colorPrimary: '#AB2B37',

},
}}
>
<Layout style={{ height: "100vh" }}>
<Sider trigger={null} collapsible collapsed={collapsed}>
<div className="demo-logo-vertical" />
<Menu
theme="dark"
mode="inline"
defaultSelectedKeys={['1']}
items={[
{
key: '1',
icon: <ApartmentOutlined />,
label: 'Roadmap',
onClick: () => {
setTab(0);
}
},
{
key: '2',
icon: <FileTextOutlined />,
label: 'Tracking Sheet',
onClick: () => {
setTab(1);
}
},
{
key: '3',
icon: <UserOutlined />,
label: 'Profile',
onClick: () => {
setTab(2);
}
}
]}
/>
</Sider>
<Layout>
<Header
style={{
padding: 0,
background: colorBgContainer,
}}
>
<Button
type="text"
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
onClick={() => setCollapsed(!collapsed)}
style={{
fontSize: '16px',
width: 64,
height: 64,
}}
/>
</Header>
<Content
style={{
margin: '24px 16px',
padding: 24,
minHeight: 280,
background: colorBgContainer,
borderRadius: borderRadiusLG,
}}
>
{
tab == 0 ?
<Flow initialNodes={nodes} initialEdges={edges} />
: tab == 1
? <Table />
:
<><h1>Profile</h1>
<h3>First Name: {first}</h3>
<h3>Last Name: {last}</h3>
<h3>Year: {year}</h3>
<h3>Major: {major}</h3>
</>
<ConfigProvider
theme={{
token: {
colorPrimary: '#AB2B37',

},
}}
>
<Layout style={{ height: "100vh" }}>
<Sider trigger={null} collapsible collapsed={collapsed}>
<div className="demo-logo-vertical" />
<Menu
theme="dark"
mode="inline"
defaultSelectedKeys={['1']}
items={[
{
key: '1',
icon: <ApartmentOutlined />,
label: 'Roadmap',
onClick: () => {
setTab(0);
}

{/* <ReactFlow nodes={nodes} edges={initialEdges} /> */}
</Content>
<RequirementsSidebar switchTree={() => { }} />
</Layout>
</Layout>
<Modal title="Get Started!" open={signup} onClose={handleClose} footer={[]}>

<p>Tell us a little bit about yourself to customize your roadmap experience!</p>
<br></br>
<Form layout='vertical'>
},
{
key: '2',
icon: <FileTextOutlined />,
label: 'Tracking Sheet',
onClick: () => {
setTab(1);
}
},
{
key: '3',
icon: <UserOutlined />,
label: 'Profile',
onClick: () => {
setTab(2);
}
}
]}
/>
</Sider>
<Layout>
<Header
style={{
padding: 0,
background: colorBgContainer,
}}
>
<Button
type="text"
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
onClick={() => setCollapsed(!collapsed)}
style={{
fontSize: '16px',
width: 64,
height: 64,
}}
/>
</Header>
<Content
style={{
margin: '24px 16px',
padding: 24,
minHeight: 280,
background: colorBgContainer,
borderRadius: borderRadiusLG,
}}
>
{
tab == 0 ? <Flow initialNodes={nodes} initialEdges={edges} /> : tab == 1 ? <h1>Tracking Sheet</h1> :
<><h1>Profile</h1>
<h3>First Name: {first}</h3>
<h3>Last Name: {last}</h3>
<h3>Year: {year}</h3>
<h3>Major: {major}</h3>
</>
}

{/* <ReactFlow nodes={nodes} edges={initialEdges} /> */}
</Content>
<RequirementsSidebar switchTree={() => { }} />
</Layout>
</Layout>
<Modal title="Get Started!" open={signup} onClose={handleClose} footer={[]}>

<p>Tell us a little bit about yourself to customize your roadmap experience!</p>
<br></br>
<Form layout='vertical'>
<Form.Item label="First Name" style={{
width: "50%",
marginBottom: "10px"
Expand Down
4 changes: 2 additions & 2 deletions src/components/Dashboard/Flow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import 'reactflow/dist/style.css';
import DataParse from '../DataParse/DataParse';



const elk = new ELK();
const elkOptions = {
"elk.algorithm": 'layered',
Expand Down Expand Up @@ -46,6 +45,7 @@ const getLayoutedElements = (nodes, edges, options = {}) => {
// Hardcode a width and height for elk to use when layouting.
width: 150,
height: 50,
className: "courseNode",
})),
edges: edges,
};
Expand Down Expand Up @@ -93,7 +93,7 @@ function FlowWithoutProvider({initialNodes, initialEdges}) {

// Calculate the initial layout on mount.
useLayoutEffect(() => {
onLayout({ direction: 'DOWN', useInitialNodes: true });
onLayout({ direction: 'UP', useInitialNodes: true });
}, []);


Expand Down

0 comments on commit 357b700

Please sign in to comment.