codemaxxerFrontend/testing.html at main · Codemaxxers/codemaxxerFrontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<script src="uri.js"></script>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Backend API Test</title>
    <style>
        .account-card {
            width: 300px;
            padding: 20px;
            background-color: #E5E4E2;
            border-radius: 10px;
            margin-left: 78%;
            text-align: center;
            margin-bottom: 20px;
            position: absolute;
            background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(230, 151, 8, 1) 0%, rgba(255, 0, 0, 1) 100%);
        }

        @keyframes fade-in {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .container-profile,
        .allBoxes,
        .container {
            animation: fade-in 1s ease-in-out;
        }
    </style>
</head>
<body>
    <div class="container-profile">
        <div class="summary-row">
            <div class="sumText">
                <h1 id="initName"></h1>
                <h3 id="detailText">Here are your gaming stats!</h3>
            </div>
            <div class="account-card">
                <div id="profilePicture"></div>
            </div>
        </div>
        <br>
    </div>
    <div class="allBoxes">
        <div class="container">
            <div class="summary-row">
                <div class="summary-card">
                    <h2>Account Points</h2>
                    <p id="accountPointsDisplay">Loading...</p>
                </div>
                <div class="summary-card">
                    <h2>Computer Science A</h2>
                    <p id="csaPointsDisplay">Loading...</p>
                </div>
                <div class="summary-card">
                    <h2>Computer Science P</h2>
                    <p id="cspPointsDisplay">Loading...</p>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="summary-row">
                <div class="summary-card">
                    <h2>Summary Card 2</h2>
                    <p>Text content for card 2</p>
                </div>
                <div class="summary-card">
                    <h2>Summary Card 3</h2>
                    <p>Text content for card 3</p>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="summary-row">
            <div class="summary-card">
                <h2>Predicted AP Score</h2>
                <p id="predictedAPScoreDisplay">Predicted AP Score will appear here</p>
            </div>
        </div>
    </div>

    <script>
        window.onload = function () {
            fetchUserData();
        };

        function fetchUserData() {
            var requestOptions = {
                method: 'GET',
                mode: 'cors',
                cache: 'default',
                credentials: 'include',
            };

            fetch(uri + "/api/person/jwt", requestOptions)
                .then(response => {
                    if (!response.ok) {
                        const errorMsg = 'Login error: ' + response.status;
                        console.log(errorMsg);

                        switch (response.status) {
                            case 401:
                                alert("Please log into or make an account");
                                window.location.href = "login";
                                break;
                            case 403:
                                alert("Access forbidden. You do not have permission to access this resource.");
                                break;
                            case 404:
                                alert("User not found. Please check your credentials.");
                                break;
                            default:
                                alert("Login failed. Please try again later.");
                        }

                        return Promise.reject('Login failed');
                    }
                    return response.json();
                })
                .then(data => {
                    document.getElementById("initName").innerText = data.name;
                    document.getElementById("accountPointsDisplay").innerText = data.accountPoints + " Points";
                    document.getElementById("csaPointsDisplay").innerText = data.csaPoints + " Points";
                    document.getElementById("cspPointsDisplay").innerText = data.cspPoints + " Points";

                    predictAPScore(data.csaPoints);
                })
                .catch(error => console.log('error', error));
        }

        function predictAPScore(csaPoints) {
            console.log("Sending request with csaPoints:", csaPoints);
            fetch(uri + "/api/predictAPScore?csaPoints=" + csaPoints)
                .then(response => {
                    console.log("Received response:", response);
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    console.log("Received data:", data);
                    const predictedAPScore = Math.round(data);
                    document.getElementById("predictedAPScoreDisplay").innerText = `Predicted AP Score: ${predictedAPScore}`;
                })
                .catch(error => {
                    console.error('There was a problem with the fetch operation:', error);
                    document.getElementById("predictedAPScoreDisplay").innerText = 'Failed to fetch prediction result.';
                });
        }
    </script>
</body>
</html>