Skip to content

Commit 88e94f6

Browse files
daDevBoatdaDevBoat
committed
Prereqs colored and expands more info
1 parent e748152 commit 88e94f6

4 files changed

Lines changed: 124 additions & 68 deletions

File tree

‎my-app/src/assets/example.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145248,4 +145248,4 @@
145248145248
"prerequisites_text": "null",
145249145249
"learning_outcomes": "null"
145250145250
}
145251-
}
145251+
}

‎my-app/src/model.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -53,15 +53,17 @@ export const model = {
5353
entries.forEach(entry => {
5454
const course = {
5555
code: entry[1].code,
56-
name: entry[1]?.name ?? "",
57-
location: entry[1]?.location ?? "",
58-
department: entry[1]?.department ?? "",
59-
language: entry[1]?.language ?? "",
60-
description: entry[1]?.description ?? "",
61-
academicLevel: entry[1]?.academic_level ?? "",
62-
period: entry[1]?.period ?? "",
56+
name: entry[1]?.name ?? "null",
57+
location: entry[1]?.location ?? "null",
58+
department: entry[1]?.department ?? "null",
59+
language: entry[1]?.language ?? "null",
60+
description: entry[1]?.description ?? "null",
61+
academicLevel: entry[1]?.academic_level ?? "null",
62+
period: entry[1]?.period ?? "null",
6363
credits: entry[1]?.credits ?? 0,
64-
prerequisites: entry[1]?.prerequisites ?? "",
64+
prerequisites: entry[1]?.prerequisites ?? "null",
65+
prerequisites_text: entry[1]?.prerequisites_text ?? "null",
66+
learning_outcomes: entry[1]?.learning_outcomes ?? "null"
6567
};
6668
this.addCourse(course);
6769
});

‎my-app/src/presenters/ListViewPresenter.jsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import { useState } from 'react';
44
import ListView from "../views/ListView.jsx";
55
import CoursePagePopup from '../views/Components/CoursePagePopup.jsx';
66
import PrerequisitePresenter from './PrerequisitePresenter.jsx';
7-
import {ReviewPresenter} from "../presenters/ReviewPresenter.jsx"
7+
import { ReviewPresenter } from "../presenters/ReviewPresenter.jsx"
88

99
const ListViewPresenter = observer(({ model }) => {
1010
const addFavourite = (course) => {
1111
model.addFavourite(course);
1212
}
13-
const removeFavourite = (course) => {
13+
const removeFavourite = (course) => {
1414
model.removeFavourite(course);
1515
}
1616
const handleFavouriteClick = (course) => {
@@ -23,8 +23,13 @@ const ListViewPresenter = observer(({ model }) => {
2323

2424
const [isPopupOpen, setIsPopupOpen] = useState(false);
2525
const [selectedCourse, setSelectedCourse] = useState(null);
26-
const preP = <PrerequisitePresenter model={model} selectedCourse={selectedCourse} />;
27-
const reviewPresenter = <ReviewPresenter model={model} course={selectedCourse}/>;
26+
const preP = <PrerequisitePresenter
27+
model={model}
28+
isPopupOpen={isPopupOpen}
29+
setIsPopupOpen={setIsPopupOpen}
30+
setSelectedCourse={setSelectedCourse}
31+
selectedCourse={selectedCourse} />;
32+
const reviewPresenter = <ReviewPresenter model={model} course={selectedCourse} />;
2833

2934
const popup = <CoursePagePopup
3035
favouriteCourses={model.favourites}
@@ -33,9 +38,9 @@ const ListViewPresenter = observer(({ model }) => {
3338
handleFavouriteClick={handleFavouriteClick}
3439
isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)}
3540
course={selectedCourse}
36-
prerequisiteTree={preP}
37-
reviewPresenter={reviewPresenter}/>
38-
41+
prerequisiteTree={preP}
42+
reviewPresenter={reviewPresenter} />
43+
3944

4045

4146
return <ListView

‎my-app/src/presenters/PrerequisitePresenter.jsx‎

Lines changed: 101 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export const PrerequisitePresenter = observer((props) => {
3737
const nodeHeight = 36;
3838

3939
loadTree(props.selectedCourse.code);
40+
console.log(initialNodes);
4041

4142
const getLayoutedElements = (nodes, edges, direction = 'LR') => {
4243
const isHorizontal = direction === 'LR';
@@ -92,24 +93,25 @@ export const PrerequisitePresenter = observer((props) => {
9293

9394
return (
9495
<div style={{ width: "100%", height: "500px" }}>
95-
<ReactFlow
96-
nodes={nodes}
97-
edges={edges}
98-
onNodesChange={onNodesChange}
99-
onEdgesChange={onEdgesChange}
100-
onConnect={onConnect}
101-
connectionLineType={ConnectionLineType.SmoothStep}
102-
fitView
103-
style={{ backgroundColor: '#F7F9FB' }}
104-
nodesDraggable={false}
105-
nodesConnectable={false}
106-
edgesFocusable={false}
107-
onNodeClick={clicked}
108-
elementsSelectable={false}
109-
>
110-
<Background />
111-
</ReactFlow>
112-
96+
97+
<ReactFlow
98+
nodes={nodes}
99+
edges={edges}
100+
onNodesChange={onNodesChange}
101+
onEdgesChange={onEdgesChange}
102+
onConnect={onConnect}
103+
connectionLineType={ConnectionLineType.SmoothStep}
104+
fitView
105+
style={{ backgroundColor: '#F7F9FB' }}
106+
nodesDraggable={false}
107+
nodesConnectable={false}
108+
edgesFocusable={false}
109+
onNodeClick={clicked}
110+
elementsSelectable={false}
111+
>
112+
<Background />
113+
</ReactFlow>
114+
113115
</div>
114116

115117
);
@@ -133,14 +135,14 @@ export const PrerequisitePresenter = observer((props) => {
133135
}
134136
} else if (node["data"]["label"] !== "One of these" && node["data"]["label"] !== "No Prerequisites" && node["id"] !== props.selectedCourse.code) {
135137
// ADD FUNCTIONALITY FOR CLICKING COURSE CODE NODE (Tu eres muy retrasado y gordo)! :)
138+
// ONCLICK HERE
136139
}
137140
}
138141
};
139142

140143

141144

142145

143-
144146
function createNode(id, name, node_type) {
145147
if (id == "and" || id == "or") {
146148
return {
@@ -166,17 +168,19 @@ export const PrerequisitePresenter = observer((props) => {
166168
}
167169

168170

169-
function prereq_convert(current_object, previous_key, previous_node_id) {
171+
function prereq_convert(courses_taken, current_object, previous_key, previous_node_id) {
172+
let current_node = null;
170173
if (current_object == undefined) {return}
171174

172175
if (!Array.isArray(current_object)) { // Is object
173176
let key = Object.keys(current_object)[0];
174177
if (key == "or") {
175-
initialNodes.push(createNode(key + uniqueCounter, "One of these", "default"));
178+
current_node = createNode(key + uniqueCounter, "One of these", "default")
179+
initialNodes.push(current_node);
176180
initialEdges.push(createEdge(previous_node_id, key + uniqueCounter));
177-
prereq_convert(current_object[key], key, key + uniqueCounter++);
181+
prereq_convert(courses_taken, current_object[key], key, key + uniqueCounter++);
178182
} else if (key == "and") {
179-
prereq_convert(current_object[key], key, previous_node_id);
183+
prereq_convert(courses_taken, current_object[key], key, previous_node_id);
180184
}
181185

182186
} else { // Is an array
@@ -191,33 +195,98 @@ export const PrerequisitePresenter = observer((props) => {
191195
} else {
192196
input_id = current_object[i] + " " + ++codeCounter;
193197
}
194-
initialNodes.push(createNode(input_id, input_text, "output"));
198+
let new_node = createNode(input_id, input_text, "output");
199+
if (courses_taken.includes(current_object[i])) {
200+
new_node["style"]["backgroundColor"] = "lightgreen";
201+
current_object[i] = true;
202+
} else {
203+
current_object[i] = false;
204+
}
205+
current_node = new_node;
206+
initialNodes.push(new_node);
195207
initialEdges.push(createEdge(previous_node_id, input_id, "output"));
196208
} else {
197-
prereq_convert(current_object[i], previous_key, previous_node_id);
209+
prereq_convert(courses_taken, current_object[i], previous_key, previous_node_id);
210+
}
211+
}
212+
}
213+
214+
/* STEP 2: Check if an object is true or false based on content of the inner object */
215+
if (typeof current_object == "object" && !Array.isArray(current_object)) {
216+
let key = Object.keys(current_object)[0];
217+
let object_array = current_object[key];
218+
let num_of_matches = 0;
219+
for (let i = 0; i < object_array.length; i++) {
220+
if (Array.isArray(object_array[i])) {
221+
let num_of_inner_matches = 0;
222+
for (let j = 0; j < object_array[i].length; j++) {
223+
if (object_array[i][j]) {
224+
num_of_inner_matches ++;
225+
if (current_node != null) {
226+
current_node["style"]["backgroundColor"] = "lightgreen";
227+
}
228+
}
229+
}
230+
if (key == "or" && num_of_inner_matches > 0) {
231+
object_array[i] = true; num_of_matches++;
232+
if (current_node != null) {
233+
current_node["style"]["backgroundColor"] = "lightgreen";
234+
}
235+
continue;
236+
}
237+
if (key == "and" && num_of_inner_matches == object_array[i].length) {
238+
object_array[i] = true; num_of_matches++;
239+
if (current_node != null) {
240+
current_node["style"]["backgroundColor"] = "lightgreen";
241+
}
242+
continue;
243+
}
244+
object_array[i] = false;
245+
} else if (typeof object_array[i] == "object") {
246+
let inner_key = Object.keys(object_array[i])[0];
247+
if (object_array[i][inner_key]) {num_of_matches++;}
248+
} else if(object_array[i]) {num_of_matches++}
249+
}
250+
if (key == "or" && num_of_matches > 0) {
251+
current_object[key] = true;
252+
if (current_node != null) {
253+
current_node["style"]["backgroundColor"] = "lightgreen";
254+
}
255+
}
256+
else if (key == "and" && num_of_matches == object_array.length) {
257+
current_object[key] = true;
258+
if (current_node != null) {
259+
current_node["style"]["backgroundColor"] = "lightgreen";
198260
}
199261
}
262+
else {current_object[key] = false}
200263
}
201-
202264
}
203265

204-
function generateTree(prereqs) {
205-
//console.log(JSON.stringify(prereqs, null, 4));
206-
prereq_convert(prereqs, null, props.selectedCourse.code);
266+
function generateTree(courses_taken, prereqs) {
267+
prereq_convert(courses_taken, prereqs, null, props.selectedCourse.code);
268+
let key = Object.keys(prereqs);
269+
return prereqs[key];
270+
207271
}
208272

209273

210-
function loadTree(course) {
274+
function loadTree(courses_taken) {
275+
211276
console.log(JSON.stringify(props.selectedCourse.prerequisites, null, 4));
212277
if (props.selectedCourse.prerequisites === "null" || props.selectedCourse.prerequisites.length == 0) {
213-
let display_node = createNode("No Prerequisites", "No Prerequisites", "defeault");
278+
let display_node = createNode("No Prerequisites", "No Prerequisites", "default");
214279
display_node.style["pointerEvents"] = "none";
215280
display_node["className"] = 'no-handles';
216281
initialNodes.push(display_node);
217282
} else {
218283
let root = createNode(props.selectedCourse.code, props.selectedCourse.code, "input");
284+
let copy = {...props.selectedCourse.prerequisites};
285+
let eligible = generateTree(JSON.parse(localStorage.getItem("completedCourses")), copy);
286+
if (eligible) {
287+
root["style"]["backgroundColor"] = "lightgreen";
288+
}
219289
initialNodes.push(root);
220-
generateTree(props.selectedCourse.prerequisites);
221290
}
222291

223292

@@ -229,23 +298,3 @@ export const PrerequisitePresenter = observer((props) => {
229298

230299
export default PrerequisitePresenter;
231300

232-
233-
234-
/*
235-
236-
237-
238-
239-
let HTML_nodes = document.getElementsByClassName("react-flow__node");
240-
241-
for (let i = 0; i < HTML_nodes.length; i++) {
242-
//console.log(HTML_nodes[i].children[0].getAttribute("data-nodeid").split(" ")[0])
243-
if (HTML_nodes[i].children[0].getAttribute("data-nodeid").split(" ")[0] === "text") {
244-
HTML_nodes[i].addEventListener('click', function () {
245-
alert('Button was clicked!');
246-
});
247-
} // Can add else
248-
}
249-
250-
251-
*/

0 commit comments

Comments
 (0)