Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change major button #9

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Change major button #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
40699fd
Flowchart Course Box UI Changes
sherpa2025 Feb 13, 2023
c2cd508
Change major Button
sherpa2025 Feb 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,692 changes: 1,692 additions & 0 deletions root/frontend/public/BACS.json
View file
Open in desktop

Large diffs are not rendered by default.

1,692 changes: 1,692 additions & 0 deletions root/frontend/public/CSCY.json
View file
Open in desktop

Large diffs are not rendered by default.

14 changes: 12 additions & 2 deletions root/frontend/public/csreqs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,17 @@
"MATH": "#e1efd8",
"CS SYSTEMS CORE": "#2d74b5",
"CS BREADTH": "#D9BBF9",
"ENGR": "#e7d0b9"
"ENGR": "#F5CBA7"
},
"Colors_Credit": {
"CS CORE": "25",
"CS ELECTIVE": "15",
"SCIENCE": "10",
"GEN ED CORE": "24",
"MATH": "12",
"CS SYSTEMS CORE": "21",
"CS BREADTH": "18",
"ENGR": "3"
},
"Semesters": [
"Fall-1",
Expand Down Expand Up @@ -115,7 +125,7 @@
"Color": "SCIENCE"
},
{
"Name": "Science",
"Name": "Science Lab",
"Credits": "1 hour",
"Semester": "Fall-2",
"Color": "SCIENCE"
Expand Down
30 changes: 28 additions & 2 deletions root/frontend/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -403,8 +403,34 @@ thead {
margin-top: 10px;
}


/*** Status Button Styling ***/
.custom-toggle-buttons {
margin-left: 10px;
margin-right: 10px;
margin-left: 0px;
margin-right: 2px;
}
/* Nima */
.collapsible .content {
padding: 6px;
background-color: #eeeeee;
}
.collapsible .header {
background-color: #dddddd;
padding: 6px;
cursor: pointer;
}


.row{
padding: 10px 15px 20px;
}

.buttonSpace{
margin-left: 15px;
}

.addYear{
padding-top: 30px;
padding-left: 30px;
padding-button: 30px;
}
174 changes: 117 additions & 57 deletions root/frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { Component } from 'react';
// import React, { Component } from 'react';
import React from 'react';
import './App.css';
import { compareSemesters } from './functions.js';
import ListView from './ListView.jsx';
Expand All @@ -14,14 +15,21 @@ import Dropzone from 'react-dropzone';
import AddCustomSemester from './CustomSemesterModal';
import ProgressBar from 'react-bootstrap/ProgressBar';
import LoginButton from './LoginButton.jsx'
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import {DropdownButton} from "react-bootstrap";

class App extends Component {

class App extends React.Component
{
constructor(props) {
super(props);
this.state = {
Display: 'Flow', // determines which page to display
// information from json file
Colors: {},
Colors_ID:[],
Colors_Credit: {},
Categories: {},
Semesters: [],
Classes: [],
Expand All @@ -31,20 +39,30 @@ class App extends Component {
PlannedClasses: [],
displayAll: false, // checkbox to display all information on the flowchart is clicked
showAlert: [null, null], // to display alert, holds [Bootstrap type (to color - warn/error), Message]
AddedClasses: [] // store ids of user-added-classes to save in file
AddedClasses: [], // store ids of user-added-classes to save in file
dropDownValue: "Choose a Major"
};
// https://stackoverflow.com/questions/64420345/how-to-click-on-a-ref-in-react
this.fileUploader = React.createRef(); // ref to upload file dialog
}

/*** when component mounts, load data from json, set state with information ***/
componentDidMount() { // runs when component loads
fetch('csreqs.json') // get file at csreqs.json asyncronously
componentDidMount(i) {
var i, fileName = 'csreqs.json';
if(i === 1)
{fileName = 'csreqs.json';}
else if (i === 2)
{fileName = 'BACS.json'}
else if (i === 3)
{fileName = 'CSCY.json'}

fetch(fileName) // get file at csreqs.json asyncronously
.then(response => response.text())
.then(json => JSON.parse(json))
.then(data => this.setState(data)) // set state information
.catch(e => console.error('Couldn\'t read json file. The error was:\n', e)); // print any errors
}
return;
}

onAddSemesterSubmit = (semester) => {
if (this.state.Semesters.includes(semester)) {
Expand Down Expand Up @@ -82,7 +100,6 @@ class App extends Component {
AddedClasses: [...this.state.AddedClasses, newClassObj.Id]
});
}

/*** function for handling a click on one of the top navbar links ***/
menuClick(i) {
if (i === 0) { // if the first button is clicked
Expand All @@ -94,6 +111,24 @@ class App extends Component {
} else if (i == 3) { //if second submenu of second button is clicked
this.setState({ Display: 'EditCS' });
}
// else if (i == 4) { //if second submenu of second button is clicked
// this.setState({ Display: 'Admin' });
// }
}

// New code by Nima
changeMajor(text, i) {
this.setState({dropDownValue: text})
if (i === 1) { // if the first button is clicked
this.componentDidMount(1);
this.setState({ Display: 'Flow' });
} else if (i === 2) { // if the second button is clicked
this.componentDidMount(2);
this.setState({ Display: 'Flow' });
} else if (i === 3) { //if first submenu of second button is clicked
this.componentDidMount(3);
this.setState({ Display: 'Flow' });
}
}

/*** function for reading an uploaded file and parsing it to JSON ***/
Expand Down Expand Up @@ -185,6 +220,65 @@ class App extends Component {
}
}

/*** Header content being displayed for Student's flowchart and edit class webpage ***/
headerContent() {
let [takenHours, plannedHours, neededHours] = this.calculateTotalHours();
return (
<React.Fragment>
<ProgressBar>
<ProgressBar variant="success" now={takenHours/neededHours*100} />
<ProgressBar variant="warning" now={plannedHours/neededHours*100} />
</ProgressBar>
<div className='header-options'>
<div className="credit-count">{`${takenHours}/${neededHours} taken credits`}</div>
<div className='spacer'></div>
<DropdownButton
as={ButtonGroup}
id="dropdown-item-button"
title={this.state.dropDownValue}
className="format"
variant="dark"
menuVariant="dark">
<DropdownButton
as={ButtonGroup}
id="dropdown-item-submenu-end"
drop={"end"}
title="BS in Computer Science"
className="format"
variant="dark"
menuVariant="dark">
<Dropdown.Item
onClick={(e) => this.changeMajor(e.target.textContent,1)}>BS in Computer Science (Regular)
</Dropdown.Item>
<Dropdown.Item
onClick={(e) => this.changeMajor(e.target.textContent,1.1)}>BS in CS with Cybersecurity Certificate
</Dropdown.Item>
</DropdownButton>
<Dropdown.Item
onClick={(e) => this.changeMajor(e.target.textContent,2)}>BA in Computer Science</Dropdown.Item>
<Dropdown.Item
onClick={(e) => this.changeMajor(e.target.textContent,3)}>BS in Cybersecurity</Dropdown.Item>
</DropdownButton>
<div className='spacer'></div>
<AddCustomSemester onSubmit={this.onAddSemesterSubmit} />
<AddCustomClass
onSubmit={this.onAddClassSubmit}
// gets category names that can fill in multiple boxes on the flowchart
CategoryOpts={Object.keys(this.state.Categories).filter(k => 'FC_Name' in this.state.Categories[k])}
/>
</div>
<div className="flow-warn">
*3000 & 4000 level CSCI courses are semester dependent. Courses may be offered
more frequently as resources allow, but students cannot expect them to be
offered off‐semester. Students should use the rotation shown on this flowchart
as a guide for planning their upper level courses.
</div>
</React.Fragment>
);
}



/** adds the path of classes to the flowchart
Note: this is currently releated to adding the correct science classes */
addPathToFlowchart(classes, classID) {
Expand Down Expand Up @@ -399,11 +493,14 @@ class App extends Component {
/*** render function under App class is used to tell application to display content ***/
render() {
let content; // variable to store the content to render
let header_content; // variable to store the header content to render on Student's flowchart and edit class page
// set content to display based on which tab the user is currently in (the mode they currently see)
if (this.state.Display === 'Flow') {
content = this.displayFlowChart();
header_content = this.headerContent();
} else {
content = this.displayEditView();
header_content = this.headerContent();
}
let [takenHours, plannedHours, neededHours] = this.calculateTotalHours();

Expand All @@ -428,9 +525,7 @@ class App extends Component {
</Nav.Link>
<Nav.Link
className={(this.state.Display === 'Flow') ? 'active' : 'inactive'}
onClick={() => this.menuClick(0)}>
Flowchart
</Nav.Link>
onClick={() => this.menuClick(0)}>Flowchart</Nav.Link>
<NavDropdown
className={((this.state.Display.startsWith('Edit')) ? 'active' : 'inactive')}
onClick={() => this.menuClick(1)}
Expand All @@ -442,59 +537,24 @@ class App extends Component {
<NavDropdown.Item
onClick={() => this.menuClick(3)}>Computer Science BS</NavDropdown.Item>
</NavDropdown>

{/* <Nav.Link
className={(this.state.Display === 'Admin') ? 'active' : 'inactive'}
onClick={() => this.menuClick(4)}>Administrator</Nav.Link> */}

</Nav>
</Navbar>
<ProgressBar>
<ProgressBar variant="success" now={takenHours/neededHours*100} />
<ProgressBar variant="warning" now={plannedHours/neededHours*100} />
</ProgressBar>
</div>
<div className='header-options'>
<div className="credit-count">{`${takenHours}/${neededHours} taken credits`}</div>
<div className='spacer'></div>
<AddCustomSemester onSubmit={this.onAddSemesterSubmit} />
<AddCustomClass
onSubmit={this.onAddClassSubmit}
// gets category names that can fill in multiple boxes on the flowchart
CategoryOpts={Object.keys(this.state.Categories).filter(k => 'FC_Name' in this.state.Categories[k])}
/>
</div>
<div className="flow-warn">
*3000 & 4000 level CSCI courses are semester dependent. Courses may be offered
more frequently as resources allow, but students cannot expect them to be
offered off‐semester. Students should use the rotation shown on this flowchart
as a guide for planning their upper level courses.
</div>
{content}
<Navbar variant='dark' bg='dark' fixed='bottom'>
<div>
<input
ref={this.fileUploader}
id="uploadFileButton"
accept=".json" type="file"
onClick={(e) => { e.target.value = '' }} // ensures uploading file with same name is done
onChange={(e) => this.onUploadFile(e.target.files)} />
<Button variant="outline-primary" id="upload-button"
onClick={() => this.fileUploader.current.click()}>Upload</Button>
</div>
<div className="dropzone d-none d-sm-block">
<Dropzone onDrop={acceptedFiles => this.onUploadFile(acceptedFiles)}>
{({ getRootProps, getInputProps }) => (
<section>
<div {...getRootProps()}>
<input {...getInputProps()} />
<p>Drop your Course Dragon .json file here</p>
</div>
</section>
)}
</Dropzone>
</div>
<Button variant="outline-primary" id="save-button" onClick={() => this.saveClick()}>Save</Button>
<Button variant="outline-primary" id="print-button" onClick={() => window.print()}>Print</Button>
</Navbar>
{header_content} {/* header_content displays the changeMajor dropdown menu and other info when the user
clicks either Flowchart or Edit Class or Login -> Student from the Navbar*/}

{content}
</div>
);
}

}


export default App;

Loading