DerexXD/ut-grade-distribution-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Formatting after learning some style; improve functions later

Browse Source
This commit is contained in:
Derek Chen
2023-06-07 10:33:25 +08:00
parent 69b7fe1971
commit 335547cb6a
1 changed files with 53 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
docs/main.js
View File

@@ -3,13 +3,13 @@ submitButton.addEventListener("click", parseName);
const chartDiv = document.querySelector('#grades'); const chartDiv = document.querySelector('#grades');
const aboutDiv = document.querySelector('.about-text'); const aboutDiv = document.querySelector('.about-text');
const formDiv = document.querySelector('.bg-form'); const formDiv = document.querySelector('.bg-form');
if(chartDiv.getAttribute('value') == 'invisible'){ if (chartDiv.getAttribute('value') == 'invisible') {
chartDiv.style.display = 'none'; chartDiv.style.display = 'none';
} }
var gradeChart; var gradeChart;
const ctx = document.getElementById("gradeBar"); const ctx = document.getElementById("gradeBar");
const gradeLabels = ["A", "A-", "B+", "B", "B-", "C+", "C", "C-", "D+", "D", "D-", "F"]; const gradeLabels = ["A", "A-", "B+", "B", "B-", "C+", "C", "C-", "D+", "D", "D-", "F"];
const backgroundColor = ["rgb(98, 244, 54)", "rgb(129, 231, 10)", "rgb(151, 218, 0)", "rgb(168, 204, 0)", "rgb(181, 190, 0)", "rgb(191, 176, 0)", "rgb(199, 162, 0)", "rgb(205, 148, 0)", "rgb(209, 133, 0)", "rgb(211, 119, 0)", "rgb(210, 105, 0)", "rgb(208, 91, 23)", "rgb(204, 78, 36)", "rgb(198, 66, 46)", "rgb(190, 54, 54)", ""];
/* /*
Parse the input form and class data Parse the input form and class data
*/ */
@@ -20,19 +20,21 @@ async function parseName() {
let department = document.getElementById('courseField').value.trim().toUpperCase(); let department = document.getElementById('courseField').value.trim().toUpperCase();
let semester = document.getElementById('semester').value; let semester = document.getElementById('semester').value;
let departments = ''; let departments = '';
if(!fiveDigit) { if (!fiveDigit) {
await fetch('https://derec4.github.io/ut-grade-data/2022prefixes.json') await fetch('https://derec4.github.io/ut-grade-data/2022prefixes.json')
.then(res => res.json()) .then(res => res.json())
.then(data => { departments = data; }); .then(data => {
if(!className && !classNum && !department) { departments = data;
});
if (!className && !classNum && !department) {
alert("At least fill out the form..."); alert("At least fill out the form...");
return; return;
} }
if(!department || !classNum) { if (!department || !classNum) {
alert("Missing fields") alert("Missing fields")
return; return;
} }
if(!departments.includes(department)) { if (!departments.includes(department)) {
alert("Invalid Department"); alert("Invalid Department");
return; return;
} }
@@ -80,13 +82,15 @@ async function PapaParse(department, num, name, sem, unique) {
break; break;
} }
await fetch(url) await fetch(url)
.then(res => res.json()) .then(res => res.json())
.then(data => { cData = data; }); .then(data => {
cData = data;
});
let selectedClass = ''; let selectedClass = '';
if(unique) { if (unique) {
selectedClass = cData.filter(cData => cData['Section Number'] == unique); selectedClass = cData.filter(cData => cData['Section Number'] == unique);
} else { } else {
if(sem.substring(0,2)==='s2') { if (sem.substring(0, 2) === 's2') {
console.log("Summer Semester Detected"); console.log("Summer Semester Detected");
selectedClass = cData.filter(cData => cData["Course Prefix"] == department) selectedClass = cData.filter(cData => cData["Course Prefix"] == department)
.filter(cData => cData["Course Number"].includes(num.toString().toUpperCase())) .filter(cData => cData["Course Number"].includes(num.toString().toUpperCase()))
@@ -95,7 +99,7 @@ async function PapaParse(department, num, name, sem, unique) {
// summer names are weird // summer names are weird
console.log("Invalid name; trying again with just the course number"); console.log("Invalid name; trying again with just the course number");
selectedClass = cData.filter(cData => cData["Course Prefix"] == department) selectedClass = cData.filter(cData => cData["Course Prefix"] == department)
.filter(cData => cData["Course Number"].includes(num.toString().toUpperCase())) .filter(cData => cData["Course Number"].includes(num.toString().toUpperCase()))
} }
} else { } else {
selectedClass = cData.filter(cData => cData["Course Prefix"] == department) selectedClass = cData.filter(cData => cData["Course Prefix"] == department)
@@ -109,7 +113,7 @@ async function PapaParse(department, num, name, sem, unique) {
} }
} }
} }
if(selectedClass.length == 0) { if (selectedClass.length == 0) {
// Still can't find anything? Just exit without making a chart and alert that nothing could be found // Still can't find anything? Just exit without making a chart and alert that nothing could be found
alert("No data found. Try again :("); alert("No data found. Try again :(");
return; return;
@@ -134,34 +138,34 @@ async function PapaParse(department, num, name, sem, unique) {
let lableName = selectedClass[0]["Course Title"]; let lableName = selectedClass[0]["Course Title"];
let sameName = true; let sameName = true;
for(i in selectedClass) { for (i in selectedClass) {
let letterGrade = selectedClass[i]["Letter Grade"]; let letterGrade = selectedClass[i]["Letter Grade"];
let cnt = selectedClass[i]["Count of letter grade"] let cnt = selectedClass[i]["Count of letter grade"]
gradeDist[letterGrade] += cnt; gradeDist[letterGrade] += cnt;
if(sameName && !(lableName === selectedClass[i]["Course Title"])) { if (sameName && !(lableName === selectedClass[i]["Course Title"])) {
lableName = (sem.substring(0,2)==='s2' ? "Remember, summer courses have special prefixes!" : "Multiple courses detected; try specifying a course name!"); lableName = (sem.substring(0, 2) === 's2' ? "Remember, summer courses have special prefixes!" : "Multiple courses detected; try specifying a course name!");
sameName = false; sameName = false;
} }
// console.log(selectedClass[i]["Letter Grade"]); // console.log(selectedClass[i]["Letter Grade"]);
// console.log(selectedClass[i]["Count of letter grade"]); // console.log(selectedClass[i]["Count of letter grade"]);
} }
console.log(gradeDist); console.log(gradeDist);
if(gradeChart) { if (gradeChart) {
gradeChart.config.data = { gradeChart.config.data = {
labels: gradeLabels, labels: gradeLabels,
datasets: [{ datasets: [{
label: '\"' + lableName +"\"", label: '\"' + lableName + "\"",
data: Object.values(gradeDist), data: Object.values(gradeDist),
borderWidth: 2, borderWidth: 2,
// borderColor: '#36A2EB', // borderColor: '#36A2EB',
backgroundColor: ["rgb(98, 244, 54)", "rgb(129, 231, 10)", "rgb(151, 218, 0)", "rgb(168, 204, 0)", "rgb(181, 190, 0)", "rgb(191, 176, 0)", "rgb(199, 162, 0)", "rgb(205, 148, 0)", "rgb(209, 133, 0)", "rgb(211, 119, 0)", "rgb(210, 105, 0)", "rgb(208, 91, 23)", "rgb(204, 78, 36)", "rgb(198, 66, 46)", "rgb(190, 54, 54)", ""], backgroundColor: backgroundColor,
}] }]
}; };
gradeChart.update(); gradeChart.update();
} else { } else {
loadChart(gradeDist, lableName); loadChart(gradeDist, lableName);
aboutDiv.style.visibility='hidden'; aboutDiv.style.visibility = 'hidden';
aboutDiv.style.display='none'; aboutDiv.style.display = 'none';
chartDiv.style.display = ''; chartDiv.style.display = '';
formDiv.setAttribute("style", "grid-row: 1"); formDiv.setAttribute("style", "grid-row: 1");
} }
@@ -171,13 +175,13 @@ function loadChart(gradeDist, courseName) {
gradeChart = new Chart(ctx, { gradeChart = new Chart(ctx, {
type: 'bar', type: 'bar',
data: { data: {
labels: gradeLabels, labels: gradeLabels,
datasets: [{ datasets: [{
label: '\"' + courseName + "\"", label: '\"' + courseName + "\"",
data: Object.values(gradeDist), data: Object.values(gradeDist),
borderWidth: 2, borderWidth: 2,
backgroundColor: ["rgb(98, 244, 54)", "rgb(129, 231, 10)", "rgb(151, 218, 0)", "rgb(168, 204, 0)", "rgb(181, 190, 0)", "rgb(191, 176, 0)", "rgb(199, 162, 0)", "rgb(205, 148, 0)", "rgb(209, 133, 0)", "rgb(211, 119, 0)", "rgb(210, 105, 0)", "rgb(208, 91, 23)", "rgb(204, 78, 36)", "rgb(198, 66, 46)", "rgb(190, 54, 54)", ""], backgroundColor: backgroundColor,
}] }]
}, },
options: { options: {
legend: { legend: {
@@ -189,17 +193,17 @@ function loadChart(gradeDist, courseName) {
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
scales: { scales: {
y: { y: {
stacked: true, stacked: true,
grid: { grid: {
display: true, display: true,
}
},
x: {
grid: {
display: false
}
} }
},
x: {
grid: {
display: false
}
}
} }
} }
}); });