BIU-Points-Calculator/index.html at main · omritriki/BIU-Points-Calculator · 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!-- ============================================================================================== -->
<!--                                       BIU N.K.Z Calculator                                      -->
<!--                                            Omri Triki                                           -->
<!--                                       Bar Ilan University                                       -->
<!--                                               2025                                              -->
<!-- ============================================================================================== -->
<!-- Description:                                                                                   -->
<!-- This is the main HTML file for the BIU Points Calculator. It provides a form for users to      -->
<!-- upload their gradesheet, select their degree and starting year, and view the calculated        -->
<!-- results. The page dynamically updates the starting years based on the selected degree.         -->
<!-- ============================================================================================== -->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BIU Points Calculator</title>
    <!-- Link to external CSS -->
    <link rel="stylesheet" href="./static/styles.css">
    <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
</head>
<body>
    <!-- Header Section -->
    <header>
        <h1>BIU Points Calculator</h1>
    </header>

    <!-- Main Content Section -->
    <main>
        <p>Please select your degree and starting year, then upload your PDF transcript from Inbar (אישורים להורדה ללא עלות - רשימת ציוני קורסים לסטודנט).</p>
        <p>The system will analyze your gradesheet and calculate your total credit points, including courses you're enrolled in (even if incomplete) and Jewish Studies courses.</p>

        <!-- Upload Form -->
        <form id="uploadForm" enctype="multipart/form-data">
            <!-- Title for file upload -->
            <label for="gradesheet">Upload Gradesheet (PDF):</label>
            <input type="file" id="gradesheet" name="gradesheet" accept=".pdf" required>

            <!-- Title for degree dropdown -->
            <label for="degree">Choose Degree:</label>
            <select id="degree" name="degree" required>
            </select>

            <!-- Title for starting year dropdown -->
            <label for="starting-year">Choose Starting Year:</label>
            <select id="starting-year" name="starting-year" required>
            </select>

            <!-- Exemptions Controls -->
            <div class="exemptions-container">
                <div class="exemptions-label">
                    <span class="label-text">Add Ptorim:</span>
                    <span class="small-message">Up to 10</span>
                </div>
                <div class="counter-buttons">
                    <button type="button" class="counter-btn minus">-</button>
                    <span class="counter">0</span>
                    <button type="button" class="counter-btn plus">+</button>
                </div>
            </div>

            <!-- Submit button -->
            <button type="submit">Calculate</button>
        </form>

        <!-- Results Section -->
        <div id="result" class="result" style="display: none;"></div>
    </main>

    <!-- Footer Section -->
    <footer>
        &copy; BIU Points Calculator - Omri Triki
    </footer>

    <!-- JavaScript Section -->
    <script>
        // Set the base URL depending on the environment
        const BASE_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
            ? 'http://127.0.0.1:8000'
            : 'https://biu-points-calculator.onrender.com';

        // Fetch degree options and starting years from the backend
        async function fetchOptions() {
            try {
                const response = await fetch(`${BASE_URL}/options`);
                const data = await response.json();

                if (data.error) {
                    console.error("Error fetching options:", data.error);
                    return;
                }

                console.log("Response:", data);

                const degreeSelect = document.getElementById('degree');
                const yearSelect = document.getElementById('starting-year');

                // Populate degree options
                data.degree_options.forEach(degree => {
                    const option = document.createElement('option');
                    option.value = degree;
                    option.textContent = degree;
                    degreeSelect.appendChild(option);
                });

                // Update starting years when a degree is selected
                degreeSelect.addEventListener('change', () => {
                    const selectedDegree = degreeSelect.value;

                    // Clear existing options
                    yearSelect.innerHTML = '';

                    // Populate starting years for the selected degree
                    if (data.starting_years[selectedDegree]) {
                        data.starting_years[selectedDegree].forEach(year => {
                            const option = document.createElement('option');
                            option.value = year;
                            option.textContent = year;
                            yearSelect.appendChild(option);
                        });
                    }
                });

                // Trigger change event to populate starting years for the default degree
                degreeSelect.dispatchEvent(new Event('change'));
            } catch (error) {
                console.error("Error fetching options:", error);
            }
        }

        // Fetch options on page load
        document.addEventListener('DOMContentLoaded', fetchOptions);

        // Exemption Counter Functionality
        document.addEventListener('DOMContentLoaded', function() {
            const counterDisplay = document.querySelector('.counter');
            const plusBtn = document.querySelector('.counter-btn.plus');
            const minusBtn = document.querySelector('.counter-btn.minus');
            let count = parseInt(counterDisplay.textContent, 10) || 0;

            plusBtn.addEventListener('click', () => {
                if (count < 10) {
                    count++;
                    counterDisplay.textContent = count;
                }
            });

            minusBtn.addEventListener('click', () => {
                if (count > 0) {
                    count--;
                    counterDisplay.textContent = count;
                }
            });
        });

        // Update the form submission handler
        document.getElementById('uploadForm').addEventListener('submit', async function (event) {
            event.preventDefault();

            const fileInput = document.getElementById('gradesheet');
            const degreeSelect = document.getElementById('degree');
            const yearSelect = document.getElementById('starting-year');
            const exemptions = document.querySelector('.counter').textContent;
            const footer = document.querySelector('footer');
            const resultElement = document.getElementById('result');

            // Validate inputs
            if (!fileInput.files.length || !degreeSelect.value || !yearSelect.value) {
                alert("Please fill in all required fields");
                return;
            }

            const formData = new FormData();
            formData.append('gradesheet', fileInput.files[0]);
            formData.append('degree', degreeSelect.value);
            formData.append('year', yearSelect.value);
            formData.append('exemptions', exemptions);

            try {
                const response = await fetch(`${BASE_URL}/upload`, {
                    method: 'POST',
                    body: formData,
                });

                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.detail || 'Upload failed');
                }

                const data = await response.json();

                if (data.success) {
                    resultElement.innerHTML = `
                        <h3 class="results-header">Calculation Results</h3>
                        <div class="result">
                            ${data.result}
                        </div>
                    `;
                    resultElement.style.display = 'block'; // Show results
                    footer.style.display = 'none'; // Hide footer
                } else {
                    throw new Error(data.error || 'Unknown error occurred');
                }
            } catch (error) {
                resultElement.innerHTML = `
                    <div class="error-message">
                        <h3>Error</h3>
                        <p>${error.message}</p>
                    </div>`;
                resultElement.style.display = 'block'; // Show error message
                footer.style.display = 'none'; // Hide footer
            }
        });
    </script>
</body>
</html>