Compare commits

..

1 Commits

Author SHA1 Message Date
Hykilpikonna 8b41296507 deploy 2020-08-02 12:45:47 -04:00
77 changed files with 661 additions and 14472 deletions
-21
View File
@@ -1,21 +0,0 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
View File
+1
View File
@@ -0,0 +1 @@
demo.vera.hydev.org
-21
View File
@@ -1,21 +0,0 @@
MIT License
Copyright (c) 2019 HyDEV
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-56
View File
@@ -1,56 +0,0 @@
<h1 align="center"><br><br>
VeracrossAnalyzer UI
</h1>
<h4 align="center">
A Website, A Visual Representation of Students' Grade Data on Veracross
</h4>
<h5 align="center">
<a href="#intro">Introduction</a>&nbsp;&nbsp;
<a href="#setup">Project Setup</a>&nbsp;&nbsp;
<a href="#license">License</a>
</h5><br><br><br>
<a name="intro"></a>
Introduction:
--------
This is a website that generates visual representation of students' grade data on Veracross. Currently there is only one graph and one numerical data representing the GPA. But also it just released yesterday! (Yay!) What do you expect this soon lol?
**Here's how it looks like right now:** *(Now all of you know my grades ;-;)*
![](https://user-images.githubusercontent.com/22280294/65841599-155ead00-e2f2-11e9-9d9f-c2f23c45d9a4.png)
<br>
<a name="setup"></a>
Project Setup:
--------
TODO: Actually write a project setup tutorial that's not generated by Vue on initialization ;-;.
### Install
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
<br>
<a name="license"></a>
License: [MIT](https://choosealicense.com/licenses/mit/)
--------
The MIT license basically means that this project is open-soucred and you can do whatever you want with it, as long as you include a copy of this license in your distribution. You don't have to ask for permissions to use or anything. However, if you do bad things with it, I'm not responsible.
-5
View File
@@ -1,5 +0,0 @@
module.exports = {
presets: [
'@vue/app'
]
};
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
View File
@@ -0,0 +1 @@
{"success":true,"data":{"assignments":[{"score_id":5593330,"id":322150,"assignment_id":322150,"assignment_type_id":3,"assignment_type":"Quiz","assignment_type_sort_key":3,"assignment_description":"2.3 Open Notes","grading_period":"Quarter 1","assignment_date_long":"Wed, Sep 11","due_date_long":"Wed, Sep 11","due_date":"Sep 11","due_day":"Wed","_date":"09/11/2019","include_in_calculated_grade":1,"num_attachments":0,"num_criteria":0,"num_feedback":0,"maximum_score":16,"points_possible":16,"raw_score":"14","percent_grade":"8750%","completion_status_id":3,"completion_status":"Complete","is_unread":1.0,"is_notification":0,"is_problem":0,"display_grade":1,"display_score":1,"display_maximum_score":1,"display_percent_grade":1,"display_points_possible":1,"allow_student_feedback":0},{"score_id":5584935,"id":321649,"assignment_id":321649,"assignment_type_id":3,"assignment_type":"Quiz","assignment_type_sort_key":3,"assignment_description":"2.2 Open Notes","grading_period":"Quarter 1","assignment_date_long":"Mon, Sep 09","due_date_long":"Mon, Sep 09","due_date":"Sep 09","due_day":"Mon","_date":"09/09/2019","include_in_calculated_grade":1,"num_attachments":0,"num_criteria":0,"num_feedback":0,"maximum_score":10,"points_possible":10,"raw_score":"6","percent_grade":"6000%","completion_status_id":3,"completion_status":"Complete","is_notification":0,"is_problem":0,"display_grade":1,"display_score":1,"display_maximum_score":1,"display_percent_grade":1,"display_points_possible":1,"allow_student_feedback":0},{"score_id":5602940,"id":322723,"assignment_id":322723,"assignment_type_id":2,"assignment_type":"Homework","assignment_type_sort_key":2,"assignment_description":"Autobiography","grading_period":"Quarter 1","assignment_date_long":"Wed, Sep 04","due_date_long":"Thu, Sep 05","due_date":"Sep 05","due_day":"Thu","_date":"09/05/2019","include_in_calculated_grade":1,"num_attachments":0,"num_criteria":0,"num_feedback":0,"maximum_score":10,"points_possible":10,"raw_score":"","percent_grade":"0%","completion_status_id":0,"completion_status":"Pending","is_notification":0,"is_problem":0,"display_grade":1,"display_score":1,"display_maximum_score":1,"display_percent_grade":1,"display_points_possible":1,"allow_student_feedback":0}],"attachments":[],"criteria":[],"criteria_grade_scale_levels":[]}}
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
View File
@@ -0,0 +1 @@
{"success":true,"data":{"assignments":[],"attachments":[],"criteria":[],"criteria_grade_scale_levels":[]}}
File diff suppressed because one or more lines are too long
+1
View File
@@ -0,0 +1 @@
{"success":true,"data":{"assignments":[],"attachments":[],"criteria":[],"criteria_grade_scale_levels":[]}}
+1
View File
@@ -0,0 +1 @@
{"success":true,"data":{"assignments":[],"attachments":[],"criteria":[],"criteria_grade_scale_levels":[]}}
+1
View File
@@ -0,0 +1 @@
{"success":true,"data":{"assignments":[],"attachments":[],"criteria":[],"criteria_grade_scale_levels":[]}}
+1
View File
@@ -0,0 +1 @@
{"success":true,"data":{"assignments":[],"attachments":[],"criteria":[],"criteria_grade_scale_levels":[]}}
+250
View File
@@ -0,0 +1,250 @@
{
"success": true,
"data": {
"user": {
"id": 1,
"schoolPersonPk": 109467,
"username": "ygui21",
"lastLogin": "Jun 5, 2020 1:28:51 PM",
"firstLogin": "Dec 2, 2019 7:31:15 PM",
"firstName": "Yijie",
"lastName": "Gui",
"graduationYear": 2021,
"emails": "ygui21@stjohnsprep.org",
"classes": "32451|32453|32458|32856|32872|32874|32878|32880|32882|32890|33070|33093|33121|33173|33337|33464|34174|34197|34199|34209"
},
"token": "Removed",
"courses": [
{
"level": "H",
"id_ci": 196,
"rating": {
"id_ci": 196,
"id_user": 1,
"userFullName": "Yijie]\u003d[Gui",
"ratings": [
5,
5,
3,
5,
4
],
"comment": "Mr. Crowell\u0027s selected books for this course are very interesting, and the essay topics are generally unique too, allowing us to express our creativity. His lectures are also very in-depth, strengthening our understanding of the ideas that the authors wanted to express. However, the style of the classroom might be boring for some people. For grading fairness, I think it is very fair, but his standards are a little bit too high because achieving a perfect score for an essay is very much impossible."
},
"name": "English 3 H",
"teacherName": "Mr. Crowell",
"id": 33337,
"assignmentsId": 10934147,
"letterGrade": "A+",
"numericGrade": 97.14,
"status": "active"
},
{
"level": "AP",
"id_ci": 19,
"rating": {
"id_ci": 19,
"id_user": -1,
"userFullName": "Anonymous]\u003d[Student",
"ratings": [
5,
5,
5,
5,
5
],
"comment": "Calculus made so much easier"
},
"name": "AP Calculus AB (Juniors)",
"teacherName": "Ms. Dobrowolski",
"id": 32453,
"assignmentsId": 10934142,
"letterGrade": "A+",
"numericGrade": 100.0,
"status": "active"
},
{
"level": "AP",
"id_ci": 251,
"rating": {
"id_ci": 251,
"id_user": 1,
"userFullName": "Yijie]\u003d[Gui",
"ratings": [
5,
5,
5,
5,
5
],
"comment": "Cations go meow"
},
"name": "AP Chemistry",
"teacherName": "Ms. Stone",
"id": 33464,
"assignmentsId": 10934148,
"letterGrade": "A+",
"numericGrade": 100.0,
"status": "active"
},
{
"level": "AP",
"id_ci": 22,
"rating": {
"id_ci": 22,
"id_user": 1,
"userFullName": "Yijie]\u003d[Gui",
"ratings": [
5,
5,
5,
3,
4
],
"comment": "Mr. Dankert can\u0027t really systematically teach, often he forgets to tell us something very important and then forgets that he forgot. The labs explained a lot of them very well."
},
"name": "AP Physics 1",
"teacherName": "Mr. Dankert",
"id": 32458,
"assignmentsId": 10934143,
"letterGrade": "A",
"numericGrade": 95.67,
"status": "active"
},
{
"level": "AP",
"id_ci": 18,
"rating": {
"id_ci": 18,
"id_user": 1,
"userFullName": "Yijie]\u003d[Gui",
"ratings": [
5,
5,
5,
5,
5
],
"comment": "Psychology is the best, and most valuable class I\u0027ve ever taken! Everything is just so relatable to my life!"
},
"name": "AP Psychology",
"teacherName": "Mr. Emerson",
"id": 32451,
"assignmentsId": 10934141,
"letterGrade": "A+",
"numericGrade": 100.0,
"status": "active"
},
{
"level": "A",
"id_ci": 98,
"rating": {
"id_ci": 98,
"id_user": 1,
"userFullName": "Yijie]\u003d[Gui",
"ratings": [
5,
5,
5,
5,
5
],
"comment": "Mr. Pynchon is very nice and encouraging."
},
"name": "US History A",
"teacherName": "Mr. Pynchon",
"id": 33093,
"assignmentsId": 10941280,
"letterGrade": "A+",
"numericGrade": 99.39,
"status": "active"
},
{
"level": "H",
"id_ci": 100,
"name": "US History H",
"teacherName": "Ms. Heath",
"id": 33096,
"assignmentsId": 10934144,
"status": "past"
},
{
"level": "A",
"id_ci": 134,
"name": "Relational Dynamics A",
"teacherName": "Mr. Reinbold",
"id": 33173,
"assignmentsId": 10934146,
"status": "past"
},
{
"level": "A",
"id_ci": 77,
"rating": {
"id_ci": 77,
"id_user": -1,
"userFullName": "Anonymous]\u003d[Student",
"ratings": [
5,
4,
5,
5,
3
],
"comment": "Honestly, everything is great except that the grading is way too harsh for an Accelerated course."
},
"name": "Social Justice A",
"teacherName": "Mr. Reinbold",
"id": 33121,
"assignmentsId": 10934145,
"letterGrade": "A+",
"numericGrade": 97.0,
"status": "active"
},
{
"level": "Sport",
"name": "Yoga AS",
"teacherName": "Ms. Fanikos",
"id": 33070,
"assignmentsId": 10935189,
"status": "past"
},
{
"level": "Club",
"id_ci": 316,
"name": "HS Magic Trick Club 2019",
"teacherName": "Mr. Reinbold",
"id": 34174,
"assignmentsId": 10949139,
"status": "active"
},
{
"level": "Club",
"id_ci": 331,
"name": "HS Science \u0026amp; Technology 2019",
"teacherName": "Ms. Erwin",
"id": 34197,
"assignmentsId": 10952100,
"status": "active"
},
{
"level": "Club",
"id_ci": 333,
"name": "HS Computer Club 2019",
"teacherName": "Mr. Gilmore",
"id": 34199,
"assignmentsId": 10951448,
"status": "active"
},
{
"level": "Club",
"id_ci": 336,
"name": "HS Chinese Ambassadors Club 2019",
"teacherName": "Mrs. Mills",
"id": 34209,
"assignmentsId": 10953979,
"status": "active"
}
]
}
}
View File

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

+5
View File
@@ -0,0 +1,5 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=1024"><link rel=icon href=/logo@32px.png><title>Veracross Analyzer</title><link href=/css/app.72ceade9.css rel=preload as=style><link href=/js/app.c7702e9a.js rel=preload as=script><link href=/js/chunk-vendors.4383782d.js rel=preload as=script><link href=/css/app.72ceade9.css rel=stylesheet></head><body style="margin: 0"><noscript><strong>We're sorry but veracross-analyzer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js></script><script src=https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js></script><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css><link rel=stylesheet href=https://unpkg.com/element-ui/lib/theme-chalk/index.css><link href="https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap" rel=stylesheet><script src=/js/chunk-vendors.4383782d.js></script><script src=/js/app.c7702e9a.js></script></body><script async src="https://www.googletagmanager.com/gtag/js?id=G-Q615K1KFLC"></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-Q615K1KFLC');</script></html>
+14
View File
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Redirecting...</title>
<meta http-equiv = "refresh" content = "0; url = https://vera.hydev.org/#info" />
</head>
<body>
Redirecting to (<a href="https://vera.hydev.org/#info">https://vera.hydev.org/#info</a>)...
<script>
window.location.href = 'https://vera.hydev.org/#info';
</script>
</body>
</html>
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

-11605
View File
File diff suppressed because it is too large Load Diff
-40
View File
@@ -1,40 +0,0 @@
{
"name": "veracross-analyzer",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.5",
"echarts": "^4.2.1",
"element-ui": "^2.11.1",
"moment": "^2.24.0",
"p-wait-for": "^3.1.0",
"v-charts": "^1.19.0",
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-cookies": "^1.5.13",
"vue-property-decorator": "^8.1.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.10.0",
"@vue/cli-plugin-typescript": "^3.10.0",
"@vue/cli-service": "^3.10.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.1.0",
"typescript": "^3.4.3",
"vue-template-compiler": "^2.6.10"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
-38
View File
@@ -1,38 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Veracross Analyzer</title>
</head>
<body style="margin: 0">
<noscript>
<strong>We're sorry but veracross-analyzer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- V-Charts -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
<!-- ElementUI -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</body>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Q615K1KFLC"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-Q615K1KFLC');
</script>
</html>
-22
View File
@@ -1,22 +0,0 @@
#!/usr/bin/env bash
# abort on errors
set -e
# build
npm run build
# navigate into the build output directory
cd dist
# if you are deploying to a custom domain
echo 'vera.hydev.org' > CNAME
git init
git add -A
git commit -m 'deploy'
# if you are deploying to https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:HyDevelop/VeracrossAnalyzer.Client.git master:gh-pages
cd -
-2
View File
@@ -1,2 +0,0 @@
cd ../
npm run serve
Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

-85
View File
@@ -1,85 +0,0 @@
#app
{
font-family: var(--font);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-bottom: 100px;
}
#app-content
{
// Limit max width
max-width: 1300px;
text-align: center;
margin: auto;
}
.theme-default
{
--unread: #ff6c00;
--main: #0c6dad;
--assignment-type-2: #3f991e;
--assignment-type-3: #ff9900;
--assignment-type-4: #b02b02;
--font: 'Avenir', Helvetica, Arial, sans-serif;
}
// ##############
// # Global CSS #
// ##############
.el-card
{
margin: 10px;
padding: 0;
}
.el-card.large
{
height: 494px;
}
// Fix padding
.el-card__body
{
padding-top: 0 !important;
padding-bottom: 0 !important;
}
// Vertical centering
.vertical-center
{
// Vertical center
display: flex;
justify-content: center;
flex-direction: column;
}
// Remove card padding for styling issues
div.el-card.course-card > div.el-card__body
{
padding-right: 0 !important;
padding-left: 0 !important;
}
// Clickable text
.clickable:hover
{
text-decoration: underline;
cursor: pointer;
}
// Non-selectable text
.unselectable
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
-275
View File
@@ -1,275 +0,0 @@
import {Component, Vue} from 'vue-property-decorator';
import Login from '@/components/login/login';
import Navigation from '@/components/navigation/navigation';
import Overall from '@/pages/overall/overall.vue';
import Constants from '@/constants';
import JsonUtils from '@/utils/json-utils';
import pWaitFor from 'p-wait-for';
import {HttpUtils} from '@/utils/http-utils';
import {CourseUtils} from '@/utils/course-utils';
import {GPAUtils} from '@/utils/gpa-utils';
import Loading from '@/components/loading/loading.vue';
import CoursePage from '@/pages/course/course-page.vue';
import {FormatUtils} from '@/utils/format-utils';
/**
* Objects of this interface represent assignment grades.
*/
export interface Assignment
{
id: number,
scoreId: number,
type: string,
typeId: number,
description: string,
date: string,
complete: string,
include: boolean,
display: boolean,
unread: boolean,
scoreMax: number,
score: number
}
/**
* A course
*/
export interface Course
{
assignmentsId: number,
id: number,
name: string,
teacherName: string,
status: string,
letterGrade?: string,
numericGrade?: number,
level: string,
scaleUp: number,
grading:
{
method: string,
weightingMap: {[index: string]: number}
}
assignments: Assignment[]
}
@Component({
components: {Login, Navigation, Overall, Loading, CoursePage},
})
export default class App extends Vue
{
// Is the login panel shown
public showLogin: boolean = true;
// List of course that the student takes
public courses: Course[] = [];
// List of course that should be displayed
public filteredCourses: Course[] = [];
// Currently selected tab
public selectedTab: string = 'overall';
// Are the course assignments loaded from the server.
public assignmentsReady: boolean = false;
// Token
public token: string = '';
// Loading text
public loading: string = '';
// Loading error
public loadingError: boolean = false;
// Http Client
public static http: HttpUtils = new HttpUtils();
// Instance
public static instance: App;
/**
* This is called when the instance is created.
*/
public created()
{
// Show splash
console.log(Constants.SPLASH);
// Update instance
App.instance = this;
}
/**
* This is called when the user logs in.
*
* @param token Authorization token
*/
public onLogin(token: string)
{
// Hide login bar
this.showLogin = false;
// Show loading message
this.logLoading('1. Logging in...');
// Store token
this.token = token;
// Assign token to http client
App.http.token = token;
// Load data
this.loadCoursesAfterLogin();
}
/**
* Load courses data after login.
*/
public loadCoursesAfterLogin()
{
// Show loading message
this.logLoading('2. Loading courses...');
// Post request
App.http.post('/courses', {}).then(response =>
{
// Check success
if (response.success)
{
// Save courses
this.courses = response.data;
// Post processing
CourseUtils.postProcess(this.courses);
// Load assignments
this.loadAssignments();
}
else throw new Error(response.data);
})
.catch(e => this.showError(`Error: Course data failed to load.\n(${e})`));
}
/**
* Load the assignments of the courses
*/
public loadAssignments()
{
// Show loading message
this.logLoading('3. Loading assignments...');
// Get assignments for all the courses
this.courses.forEach(course =>
{
// Send request to get assignments
App.http.post('/assignments', {'assignmentsId': course.assignmentsId}).then(response =>
{
// Check success
if (response.success)
{
// Load assignments
// Parse json and filter it
course.assignments = JsonUtils.filterAssignments(response.data);
}
else throw new Error(response.data);
})
.catch(e => this.showError(`Error: Assignments data failed to load.\n(${e})`));
});
// Wait for assignments to be ready.
pWaitFor(() => this.courses.every(c => c.assignments != null)).then(() =>
{
// Filter courses
this.filteredCourses = CourseUtils.getGradedCourses(this.courses);
// Check grading algorithms
this.checkGradingAlgorithms();
});
}
/**
* Check the courses' grading algorithms. (Total-mean or percent-type)
*/
private checkGradingAlgorithms()
{
// Show loading message
this.logLoading('4. Checking grading algorithms...');
// Loop through all the courses
for (const course of this.filteredCourses)
{
// Check if total-average grade is the same with percent-type grade
if (course.numericGrade == +GPAUtils.getTotalMeanAverage(course).toFixed(2))
{
course.grading = {method: 'TOTAL_MEAN', weightingMap: {}};
}
else
{
// Request grading scheme for this course
App.http.post('/grading', {'assignmentsId': course.assignmentsId}).then(response =>
{
// Check success
if (response.success)
{
// Add it to course
course.grading = response.data;
}
else throw new Error(response.data);
})
.catch(e => this.showError(`Error: Grading data failed to load.\n(${e})`))
}
}
// Wait for done
pWaitFor(() => this.filteredCourses.every(c => c.grading != undefined)).then(() =>
{
// When the assignments are ready
this.assignmentsReady = true;
// Remove loading
this.logLoading('');
})
}
/**
* Log a message to loading screen
*
* @param message Message
*/
private logLoading(message: string)
{
if (message == '') this.loading = '';
else this.loading += '\n' + message;
}
/**
* Show error message on loading screen
*
* @param message Error message
*/
private showError(message: string)
{
this.loadingError = true;
this.loading = message;
}
/**
* Sign out
*/
public signOut()
{
// Clear all cookies
this.$cookies.keys().forEach(key => this.$cookies.remove(key));
// Refresh
window.location.reload();
}
}
-23
View File
@@ -1,23 +0,0 @@
<template>
<div id="app" class="theme-default">
<login v-if="showLogin" v-on:login:token="onLogin"></login>
<navigation :courses="filteredCourses"
:activeIndex.sync="selectedTab"
v-on:sign-out="signOut">
</navigation>
<div id="app-content" v-if="assignmentsReady && loading === ''">
<overall v-if="selectedTab === 'overall'"
:courses="filteredCourses">
</overall>
<course-page v-if="selectedTab.split('/')[0] === 'course'"
:course="filteredCourses.find(c => +c.id === +selectedTab.split('/')[1])">
</course-page>
</div>
<loading v-if="loading !== ''" :text="loading" :error="loadingError"></loading>
</div>
</template>
<script src="./app.ts" lang="ts"></script>
<style src="./app.scss" lang="scss"></style>
-114
View File
@@ -1,114 +0,0 @@
<template>
<div id="loading">
<div id="text" :class="message()">
{{message()}}
<div v-if="!error" class="el-loading-spinner">
<svg viewBox="25 25 50 50" class="circular">
<circle cx="50" cy="50" r="20" fill="none" class="path" />
</svg>
</div>
<div v-if="error" id="error-details">
<span v-for="(line, index) in getText()" :style="`font-size: ${-index === 0 ? 16 : 12}px;`">
{{line}}
<br>
</span>
</div>
</div>
<div v-if="!error" id="details">
<span v-for="(line, index) in getText()" :style="`font-size: ${16 - getText().length + index}px;`">
{{line}}
<br>
</span>
</div>
</div>
</template>
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
@Component({
components: {}
})
export default class Loading extends Vue
{
@Prop({required: true}) text: string;
@Prop({required: true}) error: boolean;
getText()
{
return this.text.split('\n');
}
message()
{
return this.error ? 'Error' : 'Loading';
}
}
</script>
<style scoped>
#loading
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
box-shadow: inset 0 0 1px 1px rgba(0,0,0,.1);
background: -webkit-linear-gradient(left, rgba(95, 18, 72, 0.4), rgba(42, 81, 117, 0.4) 100%);
text-align: center;
}
.Error
{
color: #ffdddd !important;
}
#text
{
color: white;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 46px;
}
#details
{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
margin-top: -5px;
font-size: 16px;
color: #f9f9f9;
}
#error-details
{
font-size: 16px;
}
.el-loading-spinner
{
top: unset !important;
margin-top: 0 !important;
width: unset !important;
position: unset !important;
}
.el-loading-spinner .path
{
stroke: white;
}
</style>
-99
View File
@@ -1,99 +0,0 @@
// Parent div for login
#login
{
}
// Parent overlay
.login-overlay
{
// Credit to w3schools.com:
// https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
// Fill entire screen
height: 100%;
width: 100%;
left: 0;
top: 0;
// Stay in place
position: fixed;
// Sit on top layer
z-index: 1;
// Overlay color
background-color: rgba(0,0,0, 0.65);
// Disable horizontal scroll
overflow-x: hidden;
// Make it a table for vertical centering
display: table;
}
.login-vertical-center
{
// Vertically center
display: table-cell;
vertical-align: middle;
}
// The user interacting panel
.login-panel
{
// Make it smaller
width: 256px;
// Center
margin-left: auto;
margin-right: auto;
// Borders
padding: 15px;
border-radius: 10px;
// box-shadow: 0 0 20px 0 white;
border: 1px solid #DCDFE6;
// Make it white
background-color: white;
// Input bars
.el-input
{
margin: 5px 0;
}
// Button
.el-button
{
margin: 5px 0;
width: 100%;
}
}
// Error
.input-error
{
.el-input__inner
{
color: #ff3a3a6b !important;
border-color: #ff3a3a6b !important;
background-color: #ffdddd3b !important;
}
.el-input__inner:focus
{
background-color: white !important;
}
}
// Fix error message
.el-form-item__error.custom
{
padding-top: 0;
position: relative;
top: auto;
float: left;
}
-108
View File
@@ -1,108 +0,0 @@
import {Component, Vue} from 'vue-property-decorator';
import Constants from '@/constants';
import App from '@/components/app/app';
import VersionUtils from '@/utils/version-utils';
/**
* This component handles user login, and obtains data from the server.
*/
@Component({
components: {},
})
export default class Login extends Vue
{
public username: any = '';
public password: any = '';
public loading: boolean = false;
public error: String = '';
/**
* This is called when the instance is created.
*/
public created()
{
// Check login cookies
if (this.$cookies.isKey('va.token'))
{
// Check cookies version
if (this.needToUpdateCookies())
{
console.log('Version Updated! Clearing cookies...');
// Clear all cookies
this.$cookies.keys().forEach(key => this.$cookies.remove(key));
}
// Already contains valid token / TODO: Validate
// TODO: Update token each access
this.$emit('login:token', this.$cookies.get('va.token'));
}
else
{
console.log('Cookies doesn\'t exist');
}
}
/**
* Check version number
*
* @returns boolean Need to clear cookies or not
*/
public needToUpdateCookies(): boolean
{
// Version doesn't exist
if (!this.$cookies.isKey('va.version')) return true;
// If the current version is less than the min supported version
return VersionUtils.compare(this.$cookies.get('va.version'), Constants.MIN_SUPPORTED_VERSION) == -1;
}
/**
* On click, sends username and password to the server.
*/
public onLoginClick()
{
// Make login button loading
this.loading = true;
// Fetch request
App.http.post('/login', {username: this.username, password: this.password})
.then(response =>
{
// Check success
if (response.success)
{
// Save token to cookies
this.$cookies.set('va.token', response.data, '27d');
this.$cookies.set('va.version', Constants.VERSION, '27d');
// Call custom event with token
this.$emit('login:token', response.data);
}
else
{
// Show error message
this.error = response.data;
// Allow the user to retry
this.loading = false;
}
})
.catch(err =>
{
alert(err);
// Allow the user to retry
this.loading = false;
});
}
/**
* This is called when the user hits enter in the input boxes.
*/
public onEnter()
{
this.onLoginClick();
}
}
-32
View File
@@ -1,32 +0,0 @@
<template>
<div id="login" class="login-overlay">
<div class="login-vertical-center">
<div class="login-panel">
<img alt="Vue logo" src="../../assets/logo.png">
<h1>Veracross Analyzer</h1>
<form id="login-form">
<el-input v-model="username"
placeholder="School Username"
:class="{'input-error': error !== ''}"
@keyup.enter.native="onEnter">
</el-input>
<el-input v-model="password"
placeholder="Veracross Password"
show-password=""
:class="{'input-error': error !== ''}"
@keyup.enter.native="onEnter">
</el-input>
<div class="el-form-item__error custom">{{error}}</div>
<el-button plain type="primary" @click="onLoginClick" :loading="loading">Login</el-button>
</form>
</div>
</div>
</div>
</template>
<script src="./login.ts" lang="ts"></script>
<style src="./login.scss" lang="scss"></style>
-85
View File
@@ -1,85 +0,0 @@
.el-menu.centered li
{
display: inline-block !important;
float: none !important;
}
// Borders
#navigation
{
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
ul
{
border-bottom-width: 0;
}
}
#sign-out-button
{
// Float right
position: absolute;
right: 0;
// Set width and height
height: 60px;
width: 110px;
}
#nav-title
{
// Float left
position: absolute;
left: 0;
// Set height
height: 60px;
// Center text
align-items: center;
// Margins
margin-left: 14px;
margin-right: 8px;
// Font
font-size: 1.25rem;
display: inline-flex;
}
#next-course
{
// Down center
width: 50%;
position: absolute;
bottom: 0;
left: 25%;
padding-top: 2px;
box-shadow: 0 -2px 9px 0 #ecebeb;
}
#prev-course
{
// Up center
width: 50%;
position: absolute;
top: 61px;
left: 25%;
padding-bottom: 2px;
box-shadow: 0 2px 9px 0 #ecebeb;
}
.nav-course-operations
{
// Background
background-color: rgba(214, 214, 214, 0.67);
opacity: 0.85;
// Font
font-size: 14px;
color: #ab8585;
// Cursor
cursor: pointer;
}
-156
View File
@@ -1,156 +0,0 @@
import {Component, Prop, Vue} from 'vue-property-decorator';
import App, {Course} from '@/components/app/app';
import {CourseUtils} from '@/utils/course-utils';
import {FormatUtils} from '@/utils/format-utils';
import pWaitFor from 'p-wait-for';
/**
* This component is the top navigation bar
*/
@Component({
components: {},
})
export default class Navigation extends Vue
{
@Prop({required: true}) activeIndex: string;
@Prop({required: true}) courses: Course[];
// Instance
public static instance: Navigation;
/**
* This is called when the instance is created.
*/
public mounted()
{
// Set instance
Navigation.instance = this;
// Set history state
let url = '/' + window.location.hash;
if (url == '/' || url == '') url = '/#overall';
window.history.replaceState({lastTab: url.substring(1)}, '', url);
// Update initial index after loading is done
pWaitFor(() => this.courses.length > 1 && App.instance.loading != '').then(() =>
{
this.updateIndex(url.substring(2), false);
});
// Create history state listener
window.onpopstate = e =>
{
if (e.state)
{
// Restore previous tab
console.log(`onPopState: Current: ${this.activeIndex}, Previous: ${e.state.lastTab}`);
this.updateIndex(e.state.lastTab, false);
}
};
}
public formatCourseIndex(course: Course)
{
return CourseUtils.formatTabIndex(course);
}
/**
* This function is called when the selection changes.
*
* @param index The index selected
* @param indexPath The path of the index
*/
public onSelect(index: string, indexPath: string)
{
// Update active index
this.updateIndex(index);
}
/**
* Update index
*
* @param newIndex New index
* @param history Record in history or not (Default true)
*/
public updateIndex(newIndex: string, history?: boolean)
{
// Call custom event
this.$emit('update:activeIndex', newIndex);
// Record or not
if (history == null || history)
{
// Check url
let url = `/#${newIndex}`;
// Push history state
window.history.pushState({lastTab: newIndex}, '', url);
}
// Update title
document.title = 'Veracross Analyzer - ' + this.getTitle(newIndex);
}
/**
* Get title for index
*
* @param index Index
*/
public getTitle(index: string)
{
// Course
if (index.startsWith('course'))
{
return this.findCourse(index.split('/')[1], 0).name;
}
// Others
return FormatUtils.toTitleCase(index);
}
/**
* Move to the next course
*
* @param indexOffset Index offset (Eg. 1 for next)
*/
public nextCourse(indexOffset: number)
{
// Set tab to the next index
this.updateIndex(CourseUtils.formatTabIndex(this.findNextCourse(indexOffset)))
}
/**
* Find the next course
*
* @param indexOffset Index offset (Eg. 1 for next)
*/
public findNextCourse(indexOffset: number)
{
return this.findCourse(this.activeIndex.split('/')[1], indexOffset);
}
/**
* Find course
*
* @param courseId Course ID
* @param indexOffset Index offset (Eg. 1 for next)
*/
public findCourse(courseId: string, indexOffset: number)
{
// Find current course index
let courseIndex = this.courses.findIndex(c => c.id == +courseId);
// Find next course
return this.courses[courseIndex + indexOffset];
}
/**
* This function is called when the sign out button is clicked.
*/
public signOut()
{
// Call custom event
this.$emit('sign-out');
}
}
-33
View File
@@ -1,33 +0,0 @@
<template>
<div id="navigation">
<el-menu style="margin-bottom: 10px;" class="centered" mode="horizontal"
:default-active="activeIndex" @select="onSelect">
<!--div id="nav-title">
Veracross Analyzer
</div-->
<el-menu-item index="overall">Overall</el-menu-item>
<el-submenu index="courses">
<template slot="title">Courses</template>
<el-menu-item v-for="course in courses"
:index="formatCourseIndex(course)"
:key="course.name">{{course.name}}</el-menu-item>
</el-submenu>
<el-button @click="signOut" id="sign-out-button" type="text">Sign Out</el-button>
</el-menu>
<div v-if="activeIndex.includes('course') && findNextCourse(-1) != null"
@click="nextCourse(-1)" id="prev-course" class="nav-course-operations unselectable">
PREVIOUS COURSE
</div>
<div v-if="activeIndex.includes('course') && findNextCourse(1) != null"
@click="nextCourse(1)" id="next-course" class="nav-course-operations unselectable">
NEXT COURSE
</div>
</div>
</template>
<script src="./navigation.ts" lang="ts"></script>
<style src="./navigation.scss" lang="scss"></style>
-57
View File
@@ -1,57 +0,0 @@
/**
* This class stores the static constants.
*/
export default class Constants
{
/** Base url for api access */
public static API_URL: string = 'https://va.hydev.org/api';
/** Current version */
public static VERSION: string = '0.3.6.784';
/** Minimum version that still supports the same cookies */
public static MIN_SUPPORTED_VERSION: string = '0.3.4.561';
public static GITHUB: string = 'https://github.com/HyDevelop/VeracrossAnalyzer.Client';
public static SPLASH: string =
'. , ,---. | \n' +
'| |. , |---|,---.,---.| , .,---,,---.,---.\n' +
' \\ / >< | || |,---|| | | .-\' |---\'| \n' +
' `\' \' ` ` \'` \'`---^`---\'`---|\'---\'`---\'` \n' +
' `---\' \n' +
` Version v${Constants.VERSION} by Hykilpikonna (YGui21)\n` +
` Github: ${Constants.GITHUB}`;
// Graph Theme
public static THEME =
{
// Colors
colors:
[
'#19d4ae',
'#5ab1ef',
'#fa6e86',
'#ffb980',
'#0067a6',
'#c4b4e4',
'#d87a80',
'#9cbbff',
'#d9d0c7',
'#87a997',
'#d49ea2',
'#5b4947',
'#7ba3a8',
'#fc97af',
'#919e8b',
'#d7ab82',
'#6e7074',
'#61a0a8',
'#efa18d',
'#787464',
'#cc7e63',
'#724e58',
'#4b565b'
]
}
}
-22
View File
@@ -1,22 +0,0 @@
import Vue from 'vue';
import ElementUI from 'element-ui';
import App from './components/app/app.vue';
import VueCookies from 'vue-cookies';
const VCharts = require('v-charts');
Vue.config.productionTip = false;
// Use Element UI
Vue.use(ElementUI, {locale: 'en-us'});
// Use VCharts
Vue.use(VCharts);
// Use Cookies
Vue.use(VueCookies);
// Init app
new Vue({
render: (h) => h(App),
}).$mount('#app');
-20
View File
@@ -1,20 +0,0 @@
// Card
.el-card.course-card
{
// Margins
margin-right: 20px;
margin-left: 20px;
// Limit name length
white-space: nowrap;
// Expansion color
background: #f4f6f9;
}
.course-card-content.expand
{
// Top shadow
// https://stackoverflow.com/questions/17572619/inset-box-shadow-only-on-one-side
box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.1);
}
-56
View File
@@ -1,56 +0,0 @@
<template>
<el-card id="course-card" class="course-card">
<course-head :clickable="false" :course="course" :unread="countUnread()"></course-head>
<div class="course-card-content expand">
<el-row>
<el-col :span="24">
<el-card class="large overall-line-card vertical-center">
<course-scatter :course="course"></course-scatter>
</el-card>
</el-col>
<el-col :span="0">
</el-col>
</el-row>
<!--AssignmentEntry v-for="assignment in course.assignments"
:assignment="assignment" :unread="false">
</AssignmentEntry-->
</div>
</el-card>
</template>
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import {Assignment, Course} from '@/components/app/app';
import CourseHead from '@/pages/overall/overall-course/course-head/course-head.vue';
import CourseScatter from '@/pages/course/course-scatter/course-scatter';
import AssignmentEntry from '@/pages/overall/overall-course/assignment-entry/assignment-entry.vue';
@Component({
components: {AssignmentEntry, CourseHead, CourseScatter}
})
export default class CoursePage extends Vue
{
@Prop({required: true}) course: Course;
private unread: number = -1;
private unreadAssignments: Assignment[] = [];
/**
* Count the number of unread assignments with cache
*/
countUnread(): number
{
if (this.unread == -1)
{
this.unreadAssignments = this.course.assignments.filter(a => a.unread);
return this.unread = this.unreadAssignments.length;
}
else return this.unread;
}
}
</script>
<style src="./course-page.scss" lang="scss" scoped></style>
@@ -1,162 +0,0 @@
import {Component, Prop, Vue} from 'vue-property-decorator';
import {Assignment, Course} from '@/components/app/app';
import Constants from '@/constants';
import {FormatUtils} from '@/utils/format-utils';
import moment from 'moment';
@Component({
})
export default class CourseScatter extends Vue
{
private static DOT = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:{color}"></span>';
@Prop({required: true}) course: Course;
/**
* Override options
*
* @param options Original options (Unused)
*/
afterConfig(options: any)
{
return this.chartSettings;
}
/**
* Generate settings
*/
get chartSettings()
{
// Map assignments
let map = this.mapAssignments();
// Scatter data point style
let itemStyle =
{
normal:
{
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.2)'
}
};
// Create settings
let settings =
{
// Color
color: Constants.THEME.colors,
// Title
title:
{
show: true,
textStyle:
{
fontSize: 13
},
text: 'Assignments',
subtext: 'Assignment scores for ' + this.course.name,
x: 'center'
},
// X axis represents course names
xAxis:
{
type: 'time',
axisLabel:
{
formatter: (name: any) => moment(name).format('MMM DD')
},
max: FormatUtils.toChartDate(new Date())
},
// Y axis represents GPAs and MaxGPAs
yAxis:
{
type: 'value',
name: 'Percentage Score',
nameLocation: 'center',
nameGap: 38,
axisLabel:
{
formatter: (name: any) => name + '%'
},
max: 100,
min: (value: any) => Math.floor(value.min) - 5
},
// Tooltip
tooltip:
{
trigger: 'axis',
axisPointer:
{
type: 'cross'
},
formatter: (ps: any[]) => ps[0].data[0] + '<br>' + ps.map(p =>
`${CourseScatter.DOT.replace('{color}', p.color)}
${FormatUtils.limit(p.data[2], 22)}: ${p.data[1]}%<br>`).join('')
},
// Legend
legend:
{
bottom: 24,
itemWidth: 14,
textStyle:
{
color: '#777',
fontSize: 11
}
},
// Data
series: Array.from(map, ([type, assignments]) =>
{
return {
type: 'scatter',
name: type,
data: CourseScatter.assignmentsData(assignments),
itemStyle: itemStyle
}
})
};
return settings;
}
/**
* Map assignments to {assignmentType, [assignment]} format.
*/
private mapAssignments(): Map<string, Assignment[]>
{
// Define map
let map = new Map();
// Move data to map
this.course.assignments.forEach(a =>
{
// Null case, create empty array
if (!map.has(a.type)) map.set(a.type, []);
// Put data
map.get(a.type).push(a);
});
return map;
}
/**
* Convert assignments to series data
*
* @param assignments Assignments
*/
private static assignmentsData(assignments: Assignment[])
{
return assignments.filter(a => a.complete == 'Complete')
.map(a => [FormatUtils.toChartDate(a.date), (a.score / a.scoreMax * 100).toFixed(2), a.description]);
}
}
@@ -1,16 +0,0 @@
<template>
<div id="course-scatter">
<ve-scatter height="450px" class="graph" :extend="{heyIUsedCourseObject: this.course.name}" :after-config="afterConfig"></ve-scatter>
</div>
</template>
<script src="./course-scatter.ts" lang="ts"></script>
<style lang="scss" scoped>
#overall-bar
{
.graph
{
margin-top: 50px;
}
}
</style>
@@ -1,109 +0,0 @@
import {Component, Prop, Vue} from 'vue-property-decorator';
import {Course} from '@/components/app/app';
import {GPAUtils} from '@/utils/gpa-utils';
import Constants from '@/constants';
import {FormatUtils} from '@/utils/format-utils';
@Component({
})
export default class OverallBar extends Vue
{
@Prop({required: true}) courses: Course[];
/**
* Generate settings
*/
get chartSettings()
{
let settings =
{
// Title
title:
{
show: true,
textStyle:
{
fontSize: 12
},
text: 'Course GPA',
subtext: 'Current GPA for every course',
x: 'center'
},
// X axis represents course names
xAxis:
{
type: 'category',
axisLabel: {
interval: 0,
inside: false,
rotate: 90,
// Truncate text length
formatter: (value: string) => FormatUtils.limit(value, 16)
},
},
// Y axis represents GPAs and MaxGPAs
yAxis:
{
type: 'value'
},
// Data
series:
[
{
type: 'bar',
barGap: '-100%',
data: this.courses.map(course =>
{
return {value: [course.name, GPAUtils.getGP(course, 'A+')],
itemStyle: {color: '#d8d8d8'}}
}),
},
{
type: 'bar',
barGap: '-100%',
data: this.generateGPData(),
label:
{
show: true,
rotate: 90
}
}
],
// Disable tooltip
tooltip:
{
show: false
}
};
return settings;
}
/**
* Generate GP data for each course
*/
private generateGPData()
{
let data: any = [];
this.courses.forEach(course =>
{
data.push(
{
value: [course.name, GPAUtils.getGP(course, course.letterGrade)],
itemStyle:
{
color: Constants.THEME.colors[data.length]
}
});
});
return data;
}
}
@@ -1,17 +0,0 @@
<template>
<div id="overall-bar">
<ve-bar height="450px" class="graph"
:extend="chartSettings"></ve-bar>
</div>
</template>
<script src="./overall-bar.ts" lang="ts"></script>
<style lang="scss" scoped>
#overall-bar
{
.graph
{
margin-top: 50px;
}
}
</style>
@@ -1,107 +0,0 @@
// Row
.unread-entry
{
height: 40px;
padding: 0 10px 0 20px;
background: #f5f7fa;
text-align: left;
// Date
.el-col.date
{
min-width: 130px;
span.month
{
margin-right: 5px;
}
span.now
{
font-size: 11px;
color: #888;
}
}
// Description
.el-col.description
{
width: unset;
span.type
{
display: inline-block;
font-size: 13px;
font-weight: 700;
background: #eee;
border-left: 2px solid #000;
height: 22px;
line-height: 22px;
margin-right: 8px;
}
}
// Grade
.el-col.grade
{
text-align: right;
float: right;
span.percent
{
font-style: italic;
background: #ffc;
color: #555;
margin-right: 8px;
.symbol
{
padding: 0 1px;
}
}
// Score you got
span.score
{
background: #f2f2f2;
color: #555;
}
// Max score
span.max
{
background: #ddd;
color: #333;
}
// Mark as read
button.mark-as-read
{
margin-left: 8px;
color: #aaa;
padding: 4px;
}
}
.entry-box
{
height: 22px;
padding: 0 5px;
}
}
.unread-entry:first-child
{
padding-top: 3px;
// Top shadow
// https://stackoverflow.com/questions/17572619/inset-box-shadow-only-on-one-side
box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.1);
}
@@ -1,65 +0,0 @@
<template>
<div class="unread-entry vertical-center">
<el-row class="unread-row">
<el-col :span="3" class="date">
<span class="month">{{getMoment(assignment.date).format("MMM Do")}}</span>
<span class="now">({{getMoment(assignment.date).fromNow()}})</span>
</el-col>
<el-col :span="15" class="description">
<span class="type entry-box"
:style="`border-color: var(--assignment-type-${assignment.typeId})`">
{{assignment.type}}
</span>
<span class="text">{{assignment.description}}</span>
</el-col>
<el-col :span="6" class="grade">
<span class="percent entry-box">
{{(assignment.score / assignment.scoreMax * 100).toFixed(1)}}
<span class="symbol">%</span>
</span>
<span class="score entry-box">{{assignment.score}}</span>
<span class="max entry-box">{{assignment.scoreMax}}</span>
<el-button class="mark-as-read" size="mini" type="text"
icon="el-icon-close" @click="markAsRead" v-if="unread">
</el-button>
</el-col>
</el-row>
</div>
</template>
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import {Assignment} from '@/components/app/app';
import moment from 'moment';
@Component
export default class AssignmentEntry extends Vue
{
@Prop({required: true}) assignment: Assignment;
@Prop({default: false}) unread: boolean;
/**
* Format a date to the displayed format
*
* @param date Date
*/
getMoment(date: string)
{
return moment(new Date(date));
}
/**
* Mark this unread assignment as read
*/
markAsRead()
{
// Call custom event
this.$emit('mark-as-read', this.assignment)
}
}
</script>
<style src="./assignment-entry.scss" lang="scss" scoped></style>
@@ -1,92 +0,0 @@
// Main card content
.course-card-content.main
{
padding: 0 20px 0 20px;
height: 90px;
// Main color
background: white;
}
.course-col-name
{
// Align left
text-align: left;
float: left;
.course-name
{
overflow: hidden;
font-size: 22px;
color: var(--main);
}
.course-teacher
{
font-size: 12px;
color: #999999;
font-style: italic;
}
}
.course-col-grade
{
// Align right
text-align: right;
float: right;
// Adjust position
margin-top: -2px;
.course-grade
{
font-size: 21px;
}
.course-updates
{
font-size: 14px;
.unread-number
{
display: inline-block;
width: 20px;
text-align: center;
border-radius: 5px;
padding-left: 3px;
padding-right: 3px;
margin-right: 3px;
}
.unread-text
{
font-style: italic;
}
}
.course-updates.unread
{
.unread-number
{
background: var(--unread);
color: white;
}
.unread-text
{
color: var(--unread);
}
}
.course-updates.none
{
color: #999999;
.unread-number
{
background: #eeeeee;
}
}
}
@@ -1,52 +0,0 @@
<template>
<div id="course-head" class="course-card-content main vertical-center">
<el-row>
<el-col :span="12" class="course-col-name">
<div v-if="clickable" class="course-name clickable" @click="redirect">{{course.name}}</div>
<div v-if="!clickable" class="course-name">{{course.name}}</div>
<div class="course-teacher">{{course.teacherName}}</div>
</el-col>
<el-col :span="12" class="course-col-grade">
<div class="course-grade">
<span class="letter">{{course.letterGrade}} </span>
<span class="numeric">{{course.numericGrade.toFixed(2)}}</span>
<span class="percent">%</span>
</div>
<div class="course-updates" @click="redirect" :class="unread === 0 ? 'none' : 'unread'">
<span class="unread-number">{{unread}}</span>
<span class="unread-text" :class="clickable ? 'clickable' : ''">
new update{{unread >= 2 ? 's' : ''}}
</span>
</div>
</el-col>
</el-row>
</div>
</template>
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import {Course} from '@/components/app/app';
import {CourseUtils} from '@/utils/course-utils';
import Navigation from '@/components/navigation/navigation';
@Component
export default class CourseHead extends Vue
{
@Prop({required: true}) unread: number;
@Prop({required: true}) course: Course;
@Prop({required: true}) clickable: boolean;
/**
* Redirect to the course page
*/
redirect()
{
if (!this.clickable) return;
Navigation.instance.updateIndex(CourseUtils.formatTabIndex(this.course));
}
}
</script>
<style src="./course-head.scss" lang="scss"></style>
@@ -1,16 +0,0 @@
// Card
.el-card.course-card
{
// Margins
margin-right: 20px;
margin-left: 20px;
// Height limit
max-height: 250px;
// Limit name length
white-space: nowrap;
// Expansion color
background: #f4f6f9;
}
@@ -1,50 +0,0 @@
import {Component, Prop, Vue} from 'vue-property-decorator';
import App, {Assignment, Course} from '@/components/app/app';
import AssignmentEntry from '@/pages/overall/overall-course/assignment-entry/assignment-entry.vue';
import CourseHead from '@/pages/overall/overall-course/course-head/course-head.vue';
@Component({
components: {UnreadEntry: AssignmentEntry, CourseHead}
})
export default class OverallCourse extends Vue
{
@Prop({required: true}) course: Course;
private unread: number = -1;
private unreadAssignments: Assignment[] = [];
/**
* Count the number of unread assignments with cache
*/
countUnread(): number
{
if (this.unread == -1)
{
this.unreadAssignments = this.course.assignments.filter(a => a.unread);
return this.unread = this.unreadAssignments.length;
}
else return this.unread;
}
/**
* Mark an assignment as read
*/
markAsRead(assignment: Assignment)
{
App.http.post('/mark-as-read', {scoreId: assignment.scoreId})
.then(response =>
{
// Check success
if (response.success)
{
this.unreadAssignments = this.unreadAssignments.filter(a => a != assignment);
this.unread = this.unreadAssignments.length;
}
else
{
// Show error message TODO: Show it properly
alert(response.data)
}
})
}
}
@@ -1,19 +0,0 @@
<template>
<div id="overall-course">
<el-card class="course-card">
<course-head :clickable="true" :course="course" :unread="countUnread()"></course-head>
<div class="course-card-content expand"
v-if="countUnread() !== 0">
<unread-entry v-for="assignment in unreadAssignments"
:assignment="assignment"
:key="assignment.id"
unread="true"
v-on:mark-as-read="markAsRead">
</unread-entry>
</div>
</el-card>
</div>
</template>
<script src="./overall-course.ts" lang="ts"></script>
<style src="./overall-course.scss" lang="scss" scoped></style>
@@ -1,179 +0,0 @@
import {Component, Prop, Vue} from 'vue-property-decorator';
import {Course} from '@/components/app/app';
import moment from 'moment';
@Component({
})
export default class OverallLine extends Vue
{
@Prop({required: true}) courses: Course[];
private settings =
{
// Title
title:
{
show: true,
textStyle:
{
fontSize: 12
},
text: 'Average Grade',
subtext: 'Average score trend for every course',
x: 'center'
},
// Legend
legend:
{
show: false,
//left: 'auto',
//align: 'left',
//orient: 'vertical'
textStyle:
{
fontSize: 11
},
icon: 'circle'
},
// Zoom bar
dataZoom:
[
{
startValue: moment().subtract(30, 'days').format('M/D/YYYY')
},
{
type: 'inside'
}
],
series:
{
smooth: true
},
xAxis:
{
//type: 'time'
},
yAxis:
{
min: (value: any) => Math.floor(value.min),
max: (value: any) => value.max
}
};
/**
* Convert assignments list to a graph dataset.
*/
get convertChart()
{
let courses = this.courses;
// Compute the column names
let columns = courses.map(course => course.name);
columns.unshift('date');
// Find the min date
let minDates = courses.map(course => new Date(course.assignments[course.assignments.length - 1].date).getTime());
let minDate: Date = new Date(Math.min.apply(null, minDates));
// Find the dates in between
let now = new Date();
let dates = [];
for (let date = minDate; date <= now; date.setDate(date.getDate() + 1))
{
dates.push(new Date(date));
}
// Compute the rows data
let rows: {[index: string]: any}[] = [];
dates.forEach(date =>
{
// Define row object
let row: {[index: string]:any} = {'date': date.toLocaleDateString('en-US')};
// Loop through courses
courses.forEach(course =>
{
// Total Mean
if (course.grading.method == 'TOTAL_MEAN')
{
let score = 0;
let max = 0;
// Loop through assignments
course.assignments.forEach(assignment =>
{
// If assignment should be displayed
if (assignment.complete != 'Complete') return;
// Date is being looked at
let assignmentDate = new Date(assignment.date);
if (assignmentDate.getTime() < date.getTime())
{
// Record scores
score += assignment.score;
max += assignment.scoreMax;
}
});
// Add average to the row
row[course.name] = score / max * 100;
}
else if (course.grading.method == 'PERCENT_TYPE')
{
let typeScores: {[index: string]: any} = {};
let typeCounts: {[index: string]: any} = {};
// Loop through assignments
course.assignments.forEach(assignment =>
{
// If assignment should be displayed
if (assignment.complete != 'Complete') return;
// Date is being looked at
let assignmentDate = new Date(assignment.date);
if (assignmentDate.getTime() < date.getTime())
{
// Record scores
if (typeScores[assignment.type] == undefined) typeScores[assignment.type] = 0;
typeScores[assignment.type] += assignment.score / assignment.scoreMax;
if (typeCounts[assignment.type] == undefined) typeCounts[assignment.type] = 0;
typeCounts[assignment.type] ++;
}
});
// Count total percentage (This is to avoid less than expected cases)
// Eg. If HW = 25% and Quiz = 75%, I have 1 hw and 0 quiz
// Without total percentage, the avg grade I get is 25%.
let totalPercentage = 0;
for (let type in course.grading.weightingMap)
{
if (typeScores[type] != undefined)
{
totalPercentage += course.grading.weightingMap[type];
}
}
// Count
let score = 0;
for (let type in typeScores)
{
let typeFactor = course.grading.weightingMap[type] / totalPercentage;
score += typeScores[type] * typeFactor / typeCounts[type];
}
// Add average to the row
if (score != 0) row[course.name] = score * 100;
}
});
// Add it to the array
rows.push(row);
});
return {
columns: columns,
rows: rows
}
}
}
@@ -1,10 +0,0 @@
<template>
<div id="overall-line">
<ve-line :data="convertChart" :extend="settings"></ve-line>
</div>
</template>
<script src="./overall-line.ts" lang="ts"></script>
<style lang="scss" scoped>
</style>
-42
View File
@@ -1,42 +0,0 @@
.gpa-card
{
margin-left: 20px;
min-width: 136px;
}
.gpa
{
display: block;
}
.gpa.header
{
font-size: 14px;
}
.gpa.text
{
font-size: 35px;
font-family: var(--font);
}
.gpa.max
{
margin-top: -10px;
margin-bottom: 10px;
font-size: 12px;
color: #409eff;
}
.gpa.time
{
font-size: 11px;
}
// Cards
.el-card.overall-bar-card
{
margin-right: 20px;
min-width: 170px;
}
-61
View File
@@ -1,61 +0,0 @@
<template>
<div id="overall">
<el-row>
<el-col :span="4">
<el-card class="large gpa-card vertical-center">
<div style="padding: 14px;">
<span class="gpa header">GPA:</span>
<span class="gpa text">{{getGPA().gpa}}</span>
<span class="gpa max">(Out of {{getGPA().max}})</span>
<div class="bottom clearfix gpa time">
<time>{{ new Date().toDateString() }}</time>
</div>
</div>
</el-card>
</el-col>
<el-col :span="14">
<el-card class="large overall-line-card vertical-center">
<overall-line :courses="courses"></overall-line>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="large overall-bar-card vertical-center">
<overall-bar :courses="courses"></overall-bar>
</el-card>
</el-col>
</el-row>
<overall-course v-for="course in courses"
:course="course"
:key="course.id">
</overall-course>
</div>
</template>
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import OverallLine from '@/pages/overall/overall-line/overall-line';
import OverallBar from '@/pages/overall/overall-bar/overall-bar';
import OverallCourse from '@/pages/overall/overall-course/overall-course';
import {Course} from '@/components/app/app';
import {GPAUtils} from '@/utils/gpa-utils';
@Component({
components: {OverallLine, OverallBar, OverallCourse}
})
export default class Overall extends Vue
{
@Prop({required: true}) courses: Course[];
/**
* This function is called to get gpa since I can't import another
* class in the Vue file.
*/
public getGPA()
{
return GPAUtils.getGPA(this.courses);
}
}
</script>
<style src="./overall.scss" lang="scss" scoped></style>
-13
View File
@@ -1,13 +0,0 @@
import Vue, {VNode} from 'vue';
declare global {
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode {}
// tslint:disable no-empty-interface
interface ElementClass extends Vue {}
interface IntrinsicElements {
[elem: string]: any;
}
}
}
-5
View File
@@ -1,5 +0,0 @@
declare module '*.vue'
{
import Vue from 'vue';
export default Vue;
}
-127
View File
@@ -1,127 +0,0 @@
import {Course} from '@/components/app/app';
import {FormatUtils} from '@/utils/format-utils';
const LEVEL_AP = {level: 'AP', scaleUp: 1};
const LEVEL_H = {level: 'H', scaleUp: 0.75};
const LEVEL_A = {level: 'A', scaleUp: 0.5};
const LEVEL_CP = {level: 'CP', scaleUp: 0.25};
const LEVEL_CLUB = {level: 'Club', scaleUp: -1};
const UNKNOWN_COURSE_LIST = new Map();
UNKNOWN_COURSE_LIST.set('Piano Masterclass', LEVEL_H);
UNKNOWN_COURSE_LIST.set('Multivariable Calculus with Differential Equations', LEVEL_H);
UNKNOWN_COURSE_LIST.set('Introduction to Algorithmic Thinking and Computational Technologies', LEVEL_A);
UNKNOWN_COURSE_LIST.set('Ceramics 1', LEVEL_CP);
UNKNOWN_COURSE_LIST.set('Ceramics 2', LEVEL_A);
UNKNOWN_COURSE_LIST.set('Sculpture', LEVEL_CP);
UNKNOWN_COURSE_LIST.set('Drawing', LEVEL_CP);
UNKNOWN_COURSE_LIST.set('Painting', LEVEL_CP);
export class CourseUtils
{
/**
* Return a list of courses that are graphed
*
* @param original Original course list
* @return Course[] Filtered course list
*/
public static getGradedCourses(original: Course[]): Course[]
{
// Define result
let result: Course[] = [];
// Filter through courses
original.forEach(course =>
{
// Skip future or past courses
if (course.status != 'active') return;
// Skip courses without levels TODO: Ask for user input
if (course.level == 'None' || course.level == 'Unknown' || course.scaleUp == -1) return;
// Skip courses without graded assignments
if (course.assignments.filter(a => a.complete == 'Complete').length == 0) return;
// Skip if there are no grading scale
// if (course.grading.method == 'NOT_GRADED') return;
// Add it to the list
result.push(course);
});
return result;
}
/**
* Format course to tab index string
*
* @param course Course object
* @return string Tab index
*/
public static formatTabIndex(course: Course): string
{
return `course/${course.id}/${course.name.toLowerCase().split(' ').join('-')}`;
}
/**
* Post process course list
*
* @param courses Course list
*/
public static postProcess(courses: Course[])
{
for (let course of courses)
{
// Parse name
course.name = FormatUtils.parseText(course.name).trim();
// Detect level
let level = this.detectLevel(course.name);
if (level != undefined)
{
course.level = level.level;
course.scaleUp = level.scaleUp;
}
else
{
course.level = 'Unknown';
}
}
}
/**
* Detect course level based on course name
*
* @param name Course name
*/
private static detectLevel(name: string)
{
// Common ones
if (name.startsWith('AP')) return LEVEL_AP;
if (name.endsWith(' H')) return LEVEL_H;
if (name.endsWith(' A')) return LEVEL_A;
if (name.endsWith(' CP')) return LEVEL_CP;
if (name.startsWith('HS ')) return LEVEL_CLUB;
if (name.startsWith('MS ')) return LEVEL_CLUB;
// Uncommon ones
let lower = name.toLowerCase();
if (name.startsWith('Pre-AP')) return LEVEL_AP;
if (lower.endsWith(' acc')) return LEVEL_A;
if (name.endsWith('H')) return LEVEL_H;
if (name.endsWith('A')) return LEVEL_A;
if (name.endsWith('CP')) return LEVEL_CP;
// Even more uncommon
if (lower.includes('honors')) return LEVEL_H;
if (lower.includes('accelerated')) return LEVEL_A;
if (name.includes('Advanced')) return LEVEL_A;
// Unknown course list
if (UNKNOWN_COURSE_LIST.has(name)) return UNKNOWN_COURSE_LIST.get(name);
// Really unknown
return undefined;
}
}
-50
View File
@@ -1,50 +0,0 @@
import moment from 'moment';
export class FormatUtils
{
/**
* Convert date format to yyyy-mm-dd
*
* @param _date Date
*/
public static toChartDate(_date: string | Date)
{
// Convert to Date
let date: Date = _date instanceof Date ? _date : new Date(_date);
// Convert to yyyy-mm-dd
return moment(date).format('YYYY-MM-DD');
}
/**
* Limit string length
*
* @param str String
* @param length Max length
*/
public static limit(str: string, length: number): string
{
return str.length <= length ? str : str.substr(0, length - 2) + '...'
}
/**
* To Title Case
*
* @param str oRigInAL sTrING
* @return string Original String
*/
public static toTitleCase(str: string)
{
return str.replace(/\w\S*/g, s => s.charAt(0).toUpperCase() + s.substr(1).toLowerCase())
}
/**
* Parse html text
*
* @param str
*/
public static parseText(str: string): string
{
return str.replace(/&amp;/g, '&');
}
}
-130
View File
@@ -1,130 +0,0 @@
/**
* This is an utility class to calculate GPA.
*/
import {Course} from '@/components/app/app';
export class GPAUtils
{
// [[Min score, Letter grade, Base GPA], ...]
public static SCALE =
[
[96.5, 'A+', 4.00],
[92.5, 'A' , 3.75],
[89.5, 'A-', 3.50],
[86.5, 'B+', 3.25],
[82.5, 'B' , 3.00],
[79.5, 'B-', 2.75],
[76.5, 'C+', 2.50],
[72.5, 'C' , 2.25],
[70.5, 'C-', 2.00],
[69.5, 'D' , 1.00],
[0 , 'F' , 0.00]
];
// Keywords
public static MIN = 0;
public static LETTER = 1;
public static GPA = 2;
/**
* Calculate GPA for a list of couses
*
* @param coursesOriginal List of courses
*/
public static getGPA(coursesOriginal: Course[]): {gpa: number, accurate: boolean, max: number}
{
// Clone array
let courses: Course[] = [];
// Accurate or not
let accurate: boolean = true;
// Remove all courses that does not have a grade
coursesOriginal.forEach(course =>
{
if (course.letterGrade == null || course.letterGrade == '')
{
accurate = false;
}
else if (course.level != 'none')
{
courses.push(course);
}
});
// If no course have grade, return -1
if (courses.length == 0)
{
return {gpa: -1, accurate: false, max: -1};
}
// Count total GPA
let totalGPA = 0;
let maxTotal = 0;
courses.forEach(course =>
{
totalGPA += this.getGP(course, course.letterGrade);
maxTotal += this.getGP(course, 'A+');
});
// Get average GPA, round to two decimal places
let gpa = Math.round(totalGPA / courses.length * 100) / 100;
let maxGPA = Math.round(maxTotal / courses.length * 100) / 100;
// Return results
return {gpa: gpa, accurate: accurate, max: maxGPA};
}
/**
* Calculate GPA for a course
*
* @param course Course
* @param letterGrade Letter grade
*/
public static getGP(course: Course, letterGrade?: string): number
{
// Find the GPA for this course.
for (let scale of this.SCALE)
{
// Letter grades are the same
if (scale[this.LETTER] == letterGrade)
{
// Get grade and add it
let grade = <number> scale[this.GPA];
// Add scaleUp if not failed.
if (grade != 0) grade += course.scaleUp;
// That's it
return grade;
}
}
return -1;
}
/**
* Calculate the total-mean (total/max) average
*
* @param course Course
*/
public static getTotalMeanAverage(course: Course)
{
let score = 0;
let max = 0;
// Loop through assignments
course.assignments.forEach(assignment =>
{
// If assignment should be displayed
if (assignment.complete != 'Complete') return;
// Record scores
score += assignment.score;
max += assignment.scoreMax;
});
// Return
return score / max * 100;
}
}
-30
View File
@@ -1,30 +0,0 @@
import Constants from '@/constants';
export class HttpUtils
{
public token: string = '';
public post(node: string, body: any): Promise<any>
{
// Add token
if (this.token != '') body['token'] = this.token;
// Create promise
return new Promise<any>((resolve, reject) =>
{
// Fetch request
fetch(`${Constants.API_URL}${node}`, {method: 'POST', body: JSON.stringify(body)}).then(res =>
{
// Get response body text
res.text().then(text =>
{
// Parse response
let response = JSON.parse(text);
resolve(response);
})
.catch(reject)
})
.catch(reject)
});
}
}
-38
View File
@@ -1,38 +0,0 @@
import {Assignment} from '@/components/app/app';
export default class JsonUtils
{
/**
* This method filters the information provided in an assignments json.
*
* @param assignments Assignments object
* @returns Assignment[] Filtered assignment grade object list
*/
public static filterAssignments(assignments: any): Assignment[]
{
let result: Assignment[] = [];
assignments.assignments.forEach((assignment: any) =>
{
result.push(
{
id: assignment.assignment_id,
scoreId: assignment.score_id,
type: assignment.assignment_type,
typeId: assignment.assignment_type_id,
description: assignment.assignment_description,
date: assignment._date,
complete: assignment.completion_status,
include: assignment.include_in_calculated_grade == 1,
display: assignment.display_grade == 1,
unread: assignment.is_unread == 1,
scoreMax: assignment.maximum_score,
score: +assignment.raw_score
});
});
return result;
}
}
-41
View File
@@ -1,41 +0,0 @@
export default class VersionUtils
{
/**
* Compare two version numbers
*
* Eg.
* compare('0.1.2', '0.1.3') = -1
* compare('1.0.0', '0.1.3') = 1
* compare('0.0.1', '0.0.1') = 0
*
* @param ver1 Version 1
* @param ver2 Version 2
* @return number (-1 if ver1 < ver2), (1 if ver1 > ver2), (0 if equal)
*/
public static compare(ver1: string, ver2: string): number
{
// Equal case
if (ver1 == ver2) return 0;
// Split
let split1 = ver1.split('.');
let split2 = ver2.split('.');
// Detect each number
for (let i in split1)
{
// Get numbers
let num1 = split1[i];
let num2 = split2[i];
// Current number is equal
if (num1 == num2) continue;
// Current number is different
return +num1 < +num2 ? -1 : 1;
}
// Equal
return 0;
}
}
-42
View File
@@ -1,42 +0,0 @@
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
],
// Custom
"strictPropertyInitialization": false
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
-17
View File
@@ -1,17 +0,0 @@
{
"defaultSeverity": "warning",
"linterOptions": {
"exclude": [
"node_modules/**"
]
},
"rules": {
"indent": [true, "spaces", 4],
"curly": false,
"interface-name": false,
"no-consecutive-blank-lines": false,
"object-literal-sort-keys": false,
"ordered-imports": false,
"quotemark": [true, "single"]
}
}
-7
View File
@@ -1,7 +0,0 @@
module.exports =
{
devServer:
{
disableHostCheck: true,
}
};