Big Project Feature Check #2 - 4/18 Team Review

Runtime Links

Quick Scoring Box

Name	Comments	Issue/Blog
Aiden	Completed backend integration for table generator	Blog
Ryan	Ui fixes in sign in page, message inbox system.
Edwin
Ekam	Finished Resume feature, started backend with exporting resume as PDF, general frontend/UI fixes
Ishi	Finished the coin-flip half of the probability simulator, will start working on the dice-roll half soon
Drew	Finished backend implementation of the assignment submission process using Raymond’s setup, implementing JWT, creating submission object and creating backend endpoint
Haoxuan	Worked on initial versions of backend data storage
Raymond	Began framework of backend data storage for Stapplet features, researched and created file upload system for assignment submission (endpoint method, variables, etc.)
AJ	Pair programmed with Drew on backend assignment submission, provided guidance on Assignment functionality, worked on translating wireframes to frontend
Toby	Worked on backend features for graphing, including quantitative and categorical variables; finished implementation of issue conversion to blog
Kevin	Worked on student search features, prior to full implementation with current objects
Isabelle	Worked on video call and person status features
Aaron	Worked on frontend connection and implementation of graphing features

Features & Demos

Backend Integration of Table Generator

Functionality

Originally wanted to have full CRUD, but this could not work because each student is an object tied to an account; making accounts for this wouldn’t make sense
Combined first iteration of backend functionality with original localStorage functionality to create current iteration
- When creating a new class, the user is prompted with the option to import their existing classes, creating a copy of it locally

Here is the main function for connecting with the backend. It is async so that when it is called using await we can return the user’s classes if there are any. If the user isn’t signed in, it will return an empty array that is checked for in other parts of the code.

async function fetchClassList() {
    // Create array of classes
    var classes = []

    // Fetch backend
    try {
        const response = await fetch(url + '/api/class_period/dashboard', {
            method: 'GET',
            mode: 'cors',
            cache: 'no-cache',
            credentials: 'include',
            headers: {
                "content-type": "application/json",
            },
        })

        // Error check
        if (!response.ok) {
            throw new Error('Network response was not ok')
        }

        // Convert response to JSON, which contains classes that user is the leader of
        const data = await response.json()
        console.log(JSON.stringify(data))
        var classList = data.leader

        // For each class of the user
        for (let classData of classList) {
            // Define list of students in each class
            var studentList = []

            // Push students from response into class array
            for (let student of classData.students) {
                studentList.push(student.name)
            }

            // Add each class from response into frontend class array
            classes.push({id: `class-${classData.id}`, class: studentList, name: classData.name})
        }
    } 
    // If there is an error, return an empty array
    catch (error) {
        console.error('There was a problem with the fetch operation:', error)

        // This only occurs when not signed in
        return []
    }

    return classes
}

On the backend, the code looks like this, returning the data tied to the user, including their classes.

@GetMapping("/dashboard")
    public ResponseEntity<?> fetchBothClassData(@CookieValue("jwt") String jwtToken) {
        // checking if JWT token is missing
        if (jwtToken.isEmpty()) {
            return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
        }

        // getting user data
        String userEmail = tokenUtil.getUsernameFromToken(jwtToken);
        Person existingPerson = personRepository.findByEmail(userEmail);
        if (existingPerson == null) {
            return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
        }
        List<ClassPeriod> student = classPeriodDetailsService.getClassPeriodsByStudent(existingPerson);
        List<ClassPeriod> leader = classPeriodDetailsService.getClassPeriodsByLeader(existingPerson);

        // initializing storage device vrrrmmmm ERRT ERRT ERRT beeeeeep
        HashMap<String, List<ClassPeriod>> classData = new HashMap<>();

        // adding class periods to storage device brrp brrp bleeeeeeebpt
        classData.put("student", student);
        classData.put("leader", leader);

        // return class data
        return new ResponseEntity<>(classData, HttpStatus.OK);
    }

Styling updates

New menus for creating classes

Wireframe:

Screen Shot 2024-04-24 at 10 09 45 AM

Integration:

If the user isn’t signed in (an empty array is returned by the fetch)

Screen Shot 2024-04-24 at 10 42 45 AM

When signed in:

Screen Shot 2024-04-24 at 10 44 55 AM

Resume Builder

Screen Shot 2024-04-18 at 8 47 34 AM

Screen Shot 2024-04-18 at 8 50 14 AM

Finished the feature –> pull request with all info

Message Inbox system

Gets messages from the backend
Sorts messages by id
Displays sorted messages in inbox

More Wireframes!!

Stats Display Page

Screen Shot 2024-04-18 at 8 44 23 AM

Link

Probability Simulation

Wireframe:

The user can choose the probability that the coin will land on the head and the number of tosses
- There is also a checkbox for ideal probability but I will be removing this since it’s redundant
It updates everytime the “Toss” button is pressed and adds the number of points indicated
I used chart.js to create the graph