[U] Release v0.4.2.912

[S] Disable text selecting
[S] Adjust no-grade font size
2019-11-07 22:29:01 -05:00 · 2019-11-07 22:26:43 -05:00 · 2019-11-07 22:26:33 -05:00 · 2019-11-07 22:26:13 -05:00 · 2019-11-07 22:14:46 -05:00 · 2019-11-07 22:00:08 -05:00
48 changed files with 2470 additions and 390 deletions
@@ -22,7 +22,7 @@ This is a website that generates visual representation of students' grade data o
 **Here's how it looks like right now:** *(Now all of you know my grades ;-;)*
-![](https://i.imgur.com/xl3Q4Nt.jpg)
+![](https://user-images.githubusercontent.com/22280294/65841599-155ead00-e2f2-11e9-9d9f-c2f23c45d9a4.png)
 <br>
@@ -6935,6 +6935,11 @@
        }
      }
    },
    "moment": {
      "version": "2.24.0",
      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
    },
    "move-concurrently": {
      "version": "1.0.1",
      "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
@@ -11,6 +11,7 @@
    "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",
@@ -0,0 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>404: Redirecting...</title>
    <meta http-equiv = "refresh" content = "0; url = https://vera.hydev.org/" />
 </head>
 <body>
    404 Not Found! Redirecting to (<a href="https://vera.hydev.org">https://vera.hydev.org</a>)...
    <script>
        window.location.href = 'https://vera.hydev.org';
    </script>
 </body>
 </html>
@@ -25,4 +25,14 @@
        <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>
@@ -1,8 +1,85 @@
 #app
 {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    font-family: var(--font);
-  -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+    text-align: center;
-  color: #2c3e50;
+    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;
 }
@@ -1,50 +1,41 @@
 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';
+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 {GPAUtils} from '@/utils/gpa-utils';
 import Loading from '@/components/loading/loading.vue';
 import CoursePage from '@/pages/course/course-page.vue';
 import Course from '@/logic/course';
 /**
 * Objects of this interface represent assignment grades.
 */
-export interface Grade
+export interface Assignment
 {
-    type: string,
+    id: number
-    description: string,
+    scoreId: number
-    date: string,
+    type: string
-    complete: string,
+    typeId: number
-    include: boolean,
+    description: string
-    display: boolean,
+    date: Date
    complete: string
    include: boolean
    display: boolean
-    scoreMax: number,
+    unread: boolean
    scoreMax: number
    score: number
 }
-/**
+    gradingPeriod: number
 * A course
 */
 export interface Course
 {
    assignmentsId: number,
    id: number,
    name: string,
    teacherName: string,
    status: string,
    letterGrade?: string,
    numericGrade?: number,
    level: string,
    scaleUp: number,
    assignments: Grade[]
 }
@Component({
-    components: {Login, Navigation, Overall},
+    components: {Login, Navigation, Overall, Loading, CoursePage},
 })
 export default class App extends Vue
 {
@@ -54,6 +45,9 @@ export default class App extends Vue
    // 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';
@@ -63,8 +57,17 @@ export default class App extends Vue
    // Token
    public token: string = '';
    // Loading text
    public loading: string = '';
    // Loading error
    public loadingError: boolean = false;
    // Http Client
-    public http: HttpUtils = new HttpUtils('');
+    public static http: HttpUtils = new HttpUtils();
    // Instance
    public static instance: App;
    /**
     * This is called when the instance is created.
@@ -73,6 +76,9 @@ export default class App extends Vue
    {
        // Show splash
        console.log(Constants.SPLASH);
        // Update instance
        App.instance = this;
    }
    /**
@@ -85,11 +91,14 @@ export default class App extends Vue
        // Hide login bar
        this.showLogin = false;
        // Show loading message
        this.logLoading('1. Logging in...');
        // Store token
        this.token = token;
        // Assign token to http client
-        this.http.token = token;
+        App.http.token = token;
        // Load data
        this.loadCoursesAfterLogin();
@@ -100,90 +109,127 @@ export default class App extends Vue
     */
    public loadCoursesAfterLogin()
    {
-        this.http.post('/courses', {}).then(response =>
+        // 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;
+                this.courses = response.data.map((courseJson: any) => new Course(courseJson));
                // Load assignments
                this.loadAssignments();
            }
-            else
+            else throw new Error(response.data);
            {
                // Show error message TODO: Show it properly
                alert(response.data);
            }
        })
-        .catch(alert);
+        .catch(e => this.showError(`Error: Course data failed to load.\n(${e})`));
    }
    /**
     * Load the assignments of the courses
     *
     * @param courses Courses Json
     */
    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
-            this.http.post('/assignments', {id: course.assignmentsId}).then(response =>
+            App.http.post('/assignments', {'assignmentsId': course.assignmentsId}).then(response =>
            {
                // Check success
                if (response.success)
                {
-                    // Load assignments
+                    course.loadAssignments(response.data);
                    // Parse json and filter it
                    course.assignments = JsonUtils.filterAssignments(response.data);
                }
                else
                {
                    // Show error message TODO: Show it properly
                    alert(response.data);
                }
                else throw new Error(response.data);
            })
-            .catch(alert);
+            .catch(e => this.showError(`Error: Assignments data failed to load.\n(${e})`));
        });
        // Wait for assignments to be ready.
-        pWaitFor(() => this.isAssignmentsReady()).then(() =>
+        pWaitFor(() => this.courses.every(c => c.rawAssignments != null)).then(() =>
        {
-            // When the assignments are ready
+            // Filter courses
-            this.assignmentsReady = true;
+            this.filteredCourses = this.courses.filter(c => c.isGraded);
            // Check grading algorithms
            this.checkGradingAlgorithms();
        });
    }
    /**
-     * Are assignments ready or not
+     * Check the courses' grading algorithms. (Total-mean or percent-type)
     *
     * @returns boolean Ready or not
     */
-    private isAssignmentsReady(): boolean
+    private checkGradingAlgorithms()
    {
-        for (const course of this.courses)
+        // Show loading message
        this.logLoading('4. Checking grading algorithms...');
        // Loop through all the courses
        for (const course of this.filteredCourses)
        {
-            if (course.assignments == null) return false;
+            let termGrade = +GPAUtils.getTotalMeanAverage(course.computed.termAssignments[Constants.CURRENT_TERM]).toFixed(2);
            // Check if total-average grade is the same with percent-type grade
            if (course.rawNumericGrade == termGrade)
            {
                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})`))
            }
        }
-        return true;
+        // Wait for done
        pWaitFor(() => this.filteredCourses.every(c => c.grading != undefined)).then(() =>
        {
            // When the assignments are ready
            this.assignmentsReady = true;
            // Remove loading
            this.logLoading('');
        })
    }
    /**
-     * This is called when a navigation tab is clicked
+     * Log a message to loading screen
     *
-     * @param tab Tab name
+     * @param message Message
     */
-    public onNavigate(tab: string)
+    private logLoading(message: string)
    {
-        // Debug output TODO: Remove this
+        if (message == '') this.loading = '';
-        console.log(tab);
+        else this.loading += '\n' + message;
    }
-        // Update selected tab
+    /**
-        this.selectedTab = tab;
+     * Show error message on loading screen
     *
     * @param message Error message
     */
    private showError(message: string)
    {
        this.loadingError = true;
        this.loading = message;
    }
    /**
@@ -197,4 +243,15 @@ export default class App extends Vue
        // Refresh
        window.location.reload();
    }
    /**
     * Select time (Eg. Term 1, Term 2, All Year, etc.)
     *
     * @param code
     */
    public selectTime(code: number)
    {
        // TODO: Optimize
        window.location.reload();
    }
 }
@@ -1,14 +1,21 @@
 <template>
-    <div id="app">
+    <div id="app" class="theme-default">
-        <login v-if="showLogin" v-on:login:token="onLogin" :http="http"></login>
+        <login v-if="showLogin" v-on:login:token="onLogin"></login>
-        <navigation :courses="courses"
+        <navigation :courses="filteredCourses"
-                    v-on:sign-out="signOut()"
+                    :activeIndex.sync="selectedTab"
-                    v-on:navigation:select="onNavigate">
+                    @sign-out="signOut" @select-time="selectTime">
        </navigation>
-        <div id="app-content">
+        <div id="app-content" v-if="assignmentsReady && loading === ''">
-            <overall :courses="courses" v-if="selectedTab === 'overall' && assignmentsReady"></overall>
+            <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>
@@ -0,0 +1,114 @@
 <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>
@@ -1,10 +1,10 @@
-import {Component, Prop, Vue} from 'vue-property-decorator';
+import {Component, Vue} from 'vue-property-decorator';
 import Constants from '@/constants';
-import {HttpUtils} from '@/utils/http-utils';
+import App from '@/components/app/app';
 import VersionUtils from '@/utils/version-utils';
 /**
 * This component handles user login, and obtains data from the server.
 * TODO: Press enter to login
 */
@Component({
    components: {},
@@ -17,9 +17,6 @@ export default class Login extends Vue
    public loading: boolean = false;
    public error: String = '';
    @Prop()
    public http?: HttpUtils;
    /**
     * This is called when the instance is created.
     */
@@ -28,9 +25,39 @@ export default class Login extends Vue
        // Check login cookies
        if (this.$cookies.isKey('va.token'))
        {
-            // Already contains valid token / TODO: Validate
+            // Check cookies version
-            this.$emit('login:token', this.$cookies.get('va.token'));
+            if (this.needToUpdateCookies())
            {
                console.log('Version Updated! Clearing cookies...');
                // Clear all cookies
                this.$cookies.keys().forEach(key => this.$cookies.remove(key));
            }
            else
            {
                // 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;
    }
    /**
@@ -42,14 +69,15 @@ export default class Login extends Vue
        this.loading = true;
        // Fetch request
-        (<HttpUtils> this.http).post('/login', {username: this.username, password: this.password})
+        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, '7d');
+                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);
@@ -5,23 +5,24 @@
                <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="username"
+                    <el-input v-model="password"
-                          placeholder="School Username"
+                              placeholder="Veracross Password"
-                          :class="{'input-error': error !== ''}"
+                              show-password=""
-                          @keyup.enter.native="onEnter">
+                              :class="{'input-error': error !== ''}"
-                </el-input>
+                              @keyup.enter.native="onEnter">
                    </el-input>
-                <el-input v-model="password"
+                    <div class="el-form-item__error custom">{{error}}</div>
                          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>
                <el-button plain type="primary" @click="onLoginClick" :loading="loading">Login</el-button>
            </div>
        </div>
    </div>
@@ -15,3 +15,99 @@
        border-bottom-width: 0;
    }
 }
 #sign-out-button
 {
    // Float right
    position: absolute;
    right: 0;
    // Set width and height
    height: 60px;
    width: 110px;
 }
 #nav-grading-period
 {
    // Float right
    position: absolute;
    right: 110px;
    // Margins
    margin-top: 12px;
    margin-bottom: 12px;
 }
 #nav-title
 {
    // Float left
    position: absolute;
    left: 0;
    // Set height
    height: 60px;
    // Center text
    align-items: center;
    // Margins
    margin-left: 20px;
    margin-right: 8px;
    // Font
    font: bold 16px arial;
    display: inline-flex;
    // Shadow effect
    -webkit-background-clip: text;
    background-color: #b1b1b1;
    color: transparent;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.85);
    // Make it non-clickable
    pointer-events: none;
 }
 #next-course
 {
    // Down center
    width: 50%;
    position: absolute;
    bottom: 0;
    left: 25%;
    padding-top: 2px;
    box-shadow: 0 -2px 9px 0 #ecebeb;
 }
 footer
 {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
 }
 #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;
 }
@@ -1,5 +1,9 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
-import Constants from '@/constants';
+import App from '@/components/app/app';
 import {CourseUtils} from '@/utils/course-utils';
 import {FormatUtils} from '@/utils/format-utils';
 import pWaitFor from 'p-wait-for';
 import Course from '@/logic/course';
 /**
 * This component is the top navigation bar
@@ -9,9 +13,63 @@ import Constants from '@/constants';
 })
 export default class Navigation extends Vue
 {
-    public activeIndex: string = 'overall';
+    @Prop({required: true}) activeIndex: string;
-    @Prop() courses: any;
+    @Prop({required: true}) courses: Course[];
    private gradingPeriod: string = 'All Year';
    // Instance
    public static instance: Navigation;
    /**
     * This is called when the instance is created.
     */
    public created()
    {
        // Check selected time
        if (!this.$cookies.isKey('va.grading-period'))
        {
            this.$cookies.set('va.grading-period', this.gradingPeriod, '10y');
        }
        this.gradingPeriod = this.$cookies.get('va.grading-period');
    }
    /**
     * This is called when the instance is loaded.
     */
    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.
@@ -22,18 +80,107 @@ export default class Navigation extends Vue
    public onSelect(index: string, indexPath: string)
    {
        // Update active index
-        this.activeIndex = index;
+        this.updateIndex(index);
        // Call custom event
        this.$emit('navigation:select', this.activeIndex);
    }
    /**
-     * This function is called when the sign out button is clicked.
+     * Update index
     *
     * @param newIndex New index
     * @param history Record in history or not (Default true)
     */
-    public signOut()
+    public updateIndex(newIndex: string, history?: boolean)
    {
        // Call custom event
-        this.$emit('sign-out');
+        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];
    }
    /**
     * Select grading period
     *
     * @param command Term 1, Term 2, All Year, etc.
     */
    public selectGradingPeriod(command: string)
    {
        this.gradingPeriod = command;
        this.$cookies.set('va.grading-period', command, '10y');
        // Call event
        this.$emit('select-time', this.getSelectedGradingPeriod());
    }
    /**
     * Get code for selected time
     */
    public getSelectedGradingPeriod(): number
    {
        if (this.gradingPeriod == 'All Year') return -1;
        else return +this.gradingPeriod.replace('Term ', '') - 1;
    }
 }
@@ -1,19 +1,49 @@
 <template>
    <div id="navigation">
-        <el-menu class="centered" :default-active="activeIndex" mode="horizontal" @select="onSelect">
+        <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="`course-${course.name}`"
+                              :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>
+            <!-- Grading period selection -->
            <el-dropdown id="nav-grading-period" @command="selectGradingPeriod">
                <el-button type="primary" size="medium">
                    {{gradingPeriod}}<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="Term 1">Term 1</el-dropdown-item>
                    <el-dropdown-item command="Term 2">Term 2</el-dropdown-item>
                    <el-dropdown-item command="Term 3" disabled>Term 3</el-dropdown-item>
                    <el-dropdown-item command="Term 4" disabled>Term 4</el-dropdown-item>
                    <el-dropdown-item command="All Year" divided>All Year</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-button @click="$emit('sign-out')" id="sign-out-button" type="text">Sign Out</el-button>
        </el-menu>
-        <div class="line"></div>
+
        <!-- Previous course / Next course (Only when the page is courses) -->
        <div v-if="activeIndex.includes('course') && findNextCourse(-1) != null"
             @click="nextCourse(-1)" id="prev-course" class="nav-course-operations unselectable">
            ▲ PREVIOUS COURSE ▲
        </div>
        <footer>
            <div v-if="activeIndex.includes('course') && findNextCourse(1) != null"
                 @click="nextCourse(1)" id="next-course" class="nav-course-operations unselectable">
                ▼ NEXT COURSE ▼
            </div>
        </footer>
    </div>
 </template>
@@ -3,15 +3,59 @@
 */
 export default class Constants
 {
-    /**
+    /** Base url for api access */
     * Base url for api access
     */
    public static API_URL: string = 'https://va.hydev.org/api';
    /** Current version */
    public static VERSION: string = '0.4.2.912';
    /** 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' +
-        '      v0.1.2.236                  `---\'               '
+        '                                  `---\'               \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'
        ]
    };
    // Terms (TODO: Actually get the terms dynamically
    public static TERMS = [new Date('Sep 04 2019'), new Date('Nov 01 2019'), new Date('Feb 02 2020')];
    public static CURRENT_TERM = 1;
 }
@@ -0,0 +1,181 @@
 import {Assignment} from '@/components/app/app';
 import JsonUtils from '@/utils/json-utils';
 import {FormatUtils} from '@/utils/format-utils';
 import {CourseUtils} from '@/utils/course-utils';
 import Navigation from '@/components/navigation/navigation';
 import {GPAUtils} from '@/utils/gpa-utils';
 export default class Course
 {
    id: number;
    assignmentsId: number;
    name: string;
    teacherName: string;
    status: string;
    rawAssignments: Assignment[];
    rawLetterGrade?: string;
    rawNumericGrade?: number;
    level: string;
    scaleUp: number;
    grading:
    {
        method: string
        weightingMap: {[index: string]: number}
    };
    computed:
    {
        termAssignments: Assignment[][]
        allYearGrade: number
    };
    /**
     * Construct a course with a course json object
     *
     * @param courseJson Course json object
     */
    constructor(courseJson: any)
    {
        this.id = courseJson.id;
        this.assignmentsId = courseJson.assignmentsId;
        this.name = FormatUtils.parseText(courseJson.name).trim();
        this.teacherName = courseJson.teacherName;
        this.status = courseJson.status;
        this.rawLetterGrade = courseJson.letterGrade;
        this.rawNumericGrade = courseJson.numericGrade;
        // Other api issue
        if (this.rawLetterGrade == '')
        {
            this.rawNumericGrade = undefined;
            this.rawLetterGrade = undefined;
        }
        // Level and scaleUp
        let level = CourseUtils.detectLevel(this.name);
        if (level != undefined)
        {
            this.level = level.level;
            this.scaleUp = level.scaleUp;
        }
        else this.level = 'Unknown';
        this.grading = courseJson.grading;
    }
    /**
     * Load in assignments data
     *
     * @param data Assignments data
     */
    loadAssignments(data: any)
    {
        // Load assignments
        // Parse json and filter it
        this.rawAssignments = JsonUtils.filterAssignments(data);
        // Sort by date (Latest is at 0)
        this.rawAssignments.sort((a, b) => b.date.getTime() - a.date.getTime());
        // Filter assignments into terms
        let termAssignments: Assignment[][] = [[], [], [], []];
        let currentTerm = 0;
        // Loop through it by time order
        this.rawAssignments.forEach(a => termAssignments[a.gradingPeriod].push(a));
        // Set computed data
        this.computed = {termAssignments: termAssignments, allYearGrade: -1};
    }
    /**
     * Is graded or not
     */
    get isGraded(): boolean
    {
        // Skip future or past courses
        if (this.status != 'active') return false;
        // Skip courses without levels TODO: Ask for user input
        if (this.level == 'None' || this.level == 'Unknown' || this.scaleUp == -1) return false;
        // Skip courses without graded assignments
        if (this.assignments.filter(a => a.complete == 'Complete').length == 0) return false;
        // Skip if there are no grading scale
        // if (course.grading.method == 'NOT_GRADED') return;
        // Is graded
        return true;
    }
    /**
     * Get assignments of the selected time
     */
    get assignments(): Assignment[]
    {
        let timeCode = Navigation.instance.getSelectedGradingPeriod();
        // All year
        if (timeCode == -1)
        {
            return this.rawAssignments;
        }
        // Specific time
        return this.computed.termAssignments[timeCode];
    }
    // TODO: Optimize this
    private letterGradeComputed = false;
    /**
     * Get letter grade
     */
    get letterGrade(): string
    {
        // Cached
        if (this.rawLetterGrade != undefined && this.letterGradeComputed)
            return this.rawLetterGrade;
        this.letterGradeComputed = true;
        // Get scale
        let scale = GPAUtils.findScale(this.numericGrade);
        // Scale not found
        if (scale == undefined) return this.rawLetterGrade = '--';
        // Return
        return this.rawLetterGrade = scale.letter;
    }
    private numericGradeComputed = false;
    /**
     * Get numeric grade
     */
    get numericGrade(): number
    {
        // Cached
        if (this.rawNumericGrade != undefined && this.numericGradeComputed)
            return this.rawNumericGrade;
        this.numericGradeComputed = true;
        // Calculate
        if (this.grading.method == 'PERCENT_TYPE')
        {
            return this.rawNumericGrade = GPAUtils.getPercentTypeAverage(this, this.assignments);
        }
        if (this.grading.method == 'TOTAL_MEAN')
        {
            return this.rawNumericGrade = GPAUtils.getTotalMeanAverage(this.assignments);
        }
        // Error
        return -1;
    }
 }
@@ -1,10 +1,10 @@
 import Vue from 'vue';
 import ElementUI from 'element-ui';
 const VCharts = require('v-charts');
 import App from './components/app/app.vue';
 import VueCookies from 'vue-cookies';
 const VCharts = require('v-charts');
 Vue.config.productionTip = false;
 // Use Element UI
@@ -0,0 +1,80 @@
 <template>
    <div id="assignment-type-head">
        <el-card :body-style="{padding: '0px'}">
            <div id="type-info-card">
                <span id="type-name">{{typeName}}</span>
                <span id="type-average">Average: {{average.toFixed(2)}}%</span>
            </div>
            <AssignmentEntry v-for="assignment of filteredAssignments" :key="assignment.id"
                             :assignment="assignment" :unread="false"
                             backgroundColor="#ffffff" narrow="true">
            </AssignmentEntry>
        </el-card>
    </div>
 </template>
 <script lang="ts">
    import {Component, Prop, Vue} from 'vue-property-decorator';
    import {Assignment} from '@/components/app/app';
    import AssignmentEntry from '@/pages/overall/overall-course/assignment-entry/assignment-entry.vue';
    @Component({
        components: {AssignmentEntry}
    })
    export default class AssignmentTypeHead extends Vue
    {
        @Prop({required: true}) typeName: string;
        @Prop({required: true}) assignments: Assignment[];
        get filteredAssignments()
        {
            // Filter assignments to only this type
            return this.assignments.filter(a => a.complete == 'Complete' && a.type == this.typeName);
        }
        get average()
        {
            return this.filteredAssignments.reduce((a, b) => a + b.score, 0) /
                this.filteredAssignments.reduce((a, b) => a + b.scoreMax, 0) * 100;
        }
    }
 </script>
 <style lang="scss" scoped>
    #type-info-card
    {
        height: 60px;
    }
    #type-name
    {
        // Font
        font-size: 22px;
        color: var(--main);
        // Center
        height: 60px;
        line-height: 60px;
        // Alignment
        padding-left: 20px;
        float: left;
    }
    #type-average
    {
        // Font
        font-size: 14px;
        color: #8db3e4;
        // Center
        height: 60px;
        line-height: 64px;
        // Alignment
        float: left;
        margin-left: 15px;
        display: inline-block;
    }
 </style>
@@ -0,0 +1,20 @@
 // 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);
 }
@@ -0,0 +1,73 @@
 <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>
            <AssignmentTypeHead v-for="type in getAssignmentTypes()" :key="type"
                                :type-name="type" :assignments="course.assignments">
            </AssignmentTypeHead>
        </div>
    </el-card>
 </template>
 <script lang="ts">
    import {Component, Prop, Vue} from 'vue-property-decorator';
    import {Assignment} 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';
    import AssignmentTypeHead from '@/pages/course/assignment-type-head/assignment-type-head.vue';
    import Course from '@/logic/course';
    @Component({
        components: {AssignmentEntry, CourseHead, CourseScatter, AssignmentTypeHead}
    })
    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;
        }
        /**
         * Get all the types of the assignments.
         */
        getAssignmentTypes(): string[]
        {
            // Get all types
            let types = this.course.assignments.map(a => a.type);
            // Remove duplicates
            types = types.filter((type, i, a) => a.indexOf(type) == i);
            // Return it
            return types;
        }
    }
 </script>
 <style src="./course-page.scss" lang="scss" scoped></style>
@@ -0,0 +1,163 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import {Assignment} from '@/components/app/app';
 import Constants from '@/constants';
 import {FormatUtils} from '@/utils/format-utils';
 import moment from 'moment';
 import Course from '@/logic/course';
@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]);
    }
 }
@@ -0,0 +1,16 @@
 <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,21 +0,0 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import {Course} from '@/components/app/app';
@Component({
 })
 export default class GraphOverall extends Vue
 {
    @Prop({required: true}) chart: any;
    private settings =
    {
        series:
        {
            smooth: false
        },
        yAxis:
        {
            min: 70
        }
    }
 }
@@ -1,9 +0,0 @@
 <template>
    <div id="graph-overall">
        <p>Your average score graph all time:</p>
        <ve-line :data="chart" :extend="settings"></ve-line>
    </div>
 </template>
 <script src="./graph-overall.ts" lang="ts"></script>
 <style src="./graph-overall.scss" lang="scss"></style>
@@ -0,0 +1,117 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import Course from '@/logic/course';
 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:
            [
                // Max GP
                {
                    type: 'bar',
                    barGap: '-100%',
                    data: this.courses.map(course =>
                    {
                        return {value: [course.name, GPAUtils.getGP(course, 'A+')], itemStyle: {color: '#d8d8d8'}}
                    }),
                },
                // Current GP
                {
                    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, index) =>
        {
            // Get GP
            let gp = GPAUtils.getGP(course, course.letterGrade);
            // No grade cases
            if (gp == -1) return;
            // Push data
            data.push(
            {
                value: [course.name, gp],
                itemStyle:
                {
                    color: Constants.THEME.colors[index]
                }
            });
        });
        return data;
    }
 }
@@ -0,0 +1,17 @@
 <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>
@@ -0,0 +1,142 @@
 // Row
 .assignment-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;
            // Unified width
            display: inline-block;
            min-width: 50px;
        }
        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;
    }
    // Unified width
    .entry-box.score, .entry-box.max
    {
        min-width: 30px;
        display: inline-block;
        text-align: center;
    }
    // Unified width
    .entry-box.percent
    {
        min-width: 60px;
        display: inline-block;
        text-align: right;
    }
 }
 // Narrow layout
 .assignment-entry.narrow
 {
    height: 34px;
 }
 // Unread
 .no-unread
 {
    visibility: hidden !important;
    width: 0 !important;
    margin-left: 0 !important;
    padding: 0 0 0 10px !important;
 }
 .assignment-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);
 }
@@ -0,0 +1,71 @@
 <template>
    <div class="assignment-entry vertical-center"
         :class="narrow ? 'narrow' : ''"
         :style="`background: ${backgroundColor}`">
        <el-row class="unread-row">
            <el-col :span="3" class="date">
                <span class="month">{{getMoment(assignment.date).format("MMM D")}}</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" :class="unread ? 'unread' : 'no-unread'"
                           size="mini" type="text" icon="el-icon-close"
                           @click="markAsRead">
                </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;
        @Prop({default: '#f5f7fa'}) backgroundColor: string;
        @Prop({default: false}) narrow: 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>
@@ -0,0 +1,92 @@
 // 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;
        }
    }
 }
@@ -0,0 +1,52 @@
 <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 === undefined ? '--' : course.numericGrade.toFixed(2)}}</span>
                    <span class="percent" v-if="course.numericGrade !== undefined">%</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 '@/logic/course';
    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>
@@ -0,0 +1,16 @@
 // 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;
 }
@@ -0,0 +1,51 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import App, {Assignment} 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';
 import Course from '@/logic/course';
@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)
            }
        })
    }
 }
@@ -0,0 +1,19 @@
 <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>
@@ -0,0 +1,224 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import moment from 'moment';
 import Course from '@/logic/course';
@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,
            textStyle:
            {
                fontSize: 11
            },
            icon: 'circle'
        },
        // Zoom bar
        dataZoom:
        [
            {
                startValue: moment().subtract(30, 'days').format('M/D/YYYY')
            },
            {
                type: 'inside'
            }
        ],
        series:
        {
            smooth: true,
            // Mark area
            markArea:
            {
                silent: true,
                data:
                [
                    // Above 100
                    [
                        {
                            yAxis: 120,
                            itemStyle: {color: 'rgba(230,253,255,0.09)'}
                        }, {yAxis: 100}
                    ],
                    // 90 to 100
                    [
                        {
                            yAxis: 100,
                            itemStyle: {color: 'rgba(241,255,237,0.09)'}
                        }, {yAxis: 90}
                    ],
                    // 80 to 90
                    [
                        {
                            yAxis: 90,
                            itemStyle: {color: 'rgba(255,250,216,0.09)'}
                        }, {yAxis: 80}
                    ],
                    // 70 to 80
                    [
                        {
                            yAxis: 80,
                            itemStyle: {color: 'rgba(255,225,199,0.1)'}
                        }, {yAxis: 70}
                    ],
                    // Below 70 (Fail)
                    [
                        {
                            yAxis: 70,
                            itemStyle: {color: 'rgb(255,190,184, 0.09)'}
                        }, {yAxis: -100}
                    ]
                ]
            }
        },
        xAxis:
        {
            //type: 'time'
        },
        yAxis:
        {
            min: (value: any) => Math.floor(value.min),
            max: (value: any) => Math.min(value.max, 110)
        }
    };
    chartCache: any;
    /**
     * Convert assignments list to a graph dataset.
     */
    get convertChart()
    {
        // Caching
        if (this.chartCache != undefined) return this.chartCache;
        let courses = this.courses.filter(c => c.assignments.length > 0);
        // Compute the column names
        let columns = courses.map(course => course.name);
        columns.unshift('date');
        // Find the min date
        let minDates = courses.map(course => 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
                        if (assignment.date.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
                        if (assignment.date.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 this.chartCache =
        {
            columns: columns,
            rows: rows
        }
    }
 }
@@ -0,0 +1,10 @@
 <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>
@@ -1,17 +1,4 @@
 // Add some margins
 .el-card
 {
    margin: 10px;
    height: 494px;
    padding: 0;
    // Vertical center
    display: flex;
    justify-content: center;
    flex-direction: column;
 }
 .gpa-card
 {
    margin-left: 20px;
@@ -31,7 +18,7 @@
 .gpa.text
 {
    font-size: 35px;
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    font-family: var(--font);
 }
 .gpa.max
@@ -46,3 +33,21 @@
 {
    font-size: 11px;
 }
 .no-grade
 {
    font-size: 30px;
    color: #b1b1b1;
    // Disable selecting
    display:block;
    pointer-events: none;
    user-select: none;
 }
 // Cards
 .el-card.overall-bar-card
 {
    margin-right: 20px;
    min-width: 170px;
 }
@@ -1,155 +0,0 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import GraphOverall from '@/pages/overall/graph-overall/graph-overall';
 import {Course} from '@/components/app/app';
 import {GPAUtils} from '@/utils/gpa-utils';
@Component({
    components: {GraphOverall}
 })
 export default class Overall extends Vue
 {
    // @ts-ignore
    @Prop({required: true}) courses: Course[];
    /**
     * Convert assignments list to a graph dataset.
     */
    get convertCharts()
    {
        // Null case
        if (this.courses == null) return [];
        // Filter it
        let courses: Course[] = this.filterCourses();
        // Compute the column names
        let columns = ['date'];
        courses.forEach(course =>
        {
            columns.push(course.name);
        });
        // Find the min date
        let minDate: Date = new Date();
        courses.forEach(course =>
        {
            if (course.assignments.length == 0) return;
            let date = new Date(course.assignments[course.assignments.length - 1].date);
            if (date < minDate) minDate = date;
        });
        // 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));
        }
        // Initialize course specific variables
        let courseScores: {[index: string]: any} = {};
        let courseMaxScores: {[index: string]: any} = {};
        let courseIndexes: {[index: string]: any} = {};
        courses.forEach(course =>
        {
            courseScores[course.name] = 0;
            courseMaxScores[course.name] = 0;
            courseIndexes[course.name] = course.assignments.length - 1;
        });
        // 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 =>
            {
                // Reversed loop through the assignments
                for (let r = courseIndexes[course.name]; r >= 0; r--)
                {
                    let assignment = course.assignments[r];
                    // If assignment should be displayed
                    if (assignment.complete != 'Complete') continue;
                    // Date is being looked at
                    let assignmentDate = new Date(assignment.date);
                    if (assignmentDate.getTime() == date.getTime())
                    {
                        // Record scores
                        courseScores[course.name] += assignment.score;
                        courseMaxScores[course.name] += assignment.scoreMax;
                    }
                    // Not now
                    else if (assignmentDate > date)
                    {
                        courseIndexes[course.name] = r;
                        break;
                    }
                }
                // Add average to the row
                row[course.name] = courseScores[course.name] / courseMaxScores[course.name] * 100;
            });
            // Add it to the array
            rows.push(row);
        });
        console.log(rows);
        return {
            columns: columns,
            rows: rows
        }
    }
    /**
     * Return a list of courses that are graphed
     */
    private filterCourses(): Course[]
    {
        // Define result
        let result: Course[] = [];
        // Filter through courses
        this.courses.forEach(course =>
        {
            // Skip future or past courses
            if (course.status != 'active') return;
            // Skip courses without levels
            if (course.level == 'None') return;
            // Skip courses without assignments
            if (course.assignments.length == 0) return;
            // Add it to the list
            result.push(course);
        });
        return result;
    }
    /**
     * This function is called to get gpa since I can't import another
     * class in the Vue file.
     */
    public getGPA()
    {
        let gpa = GPAUtils.getGPA(this.courses);
        // let result = '' + gpa.gpa;
        /* Not accurate
        if (!gpa.accurate)
        {
            result = `(${result})`;
        }*/
        return gpa;
    }
 }
@@ -1,8 +1,8 @@
 <template>
    <div id="overall">
-        <el-row>
+        <el-row v-if="getGPA().gpa !== -1">
            <el-col :span="4">
-                <el-card class="gpa-card">
+                <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>
@@ -13,15 +13,55 @@
                    </div>
                </el-card>
            </el-col>
-            <el-col :span="20">
+            <el-col :span="14">
-                <el-card style="margin-right: 20px">
+                <el-card class="large overall-line-card vertical-center">
-                    <graph-overall :chart="convertCharts"></graph-overall>
+                    <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>
-        <div class=""></div>
+
        <el-row v-if="getGPA().gpa === -1">
            <el-card class="large gpa-card vertical-center">
                <div class="no-grade">This quarter has no grades yet...</div>
            </el-card>
        </el-row>
        <overall-course v-for="course in courses"
                        :course="course"
                        :key="course.id">
        </overall-course>
    </div>
 </template>
-<script src="./overall.ts" lang="ts"></script>
+<script lang="ts">
-<style src="./overall.scss" lang="scss"></style>
+    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 '@/logic/course';
    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>
@@ -1,4 +1,4 @@
-import Vue, { VNode } from 'vue';
+import Vue, {VNode} from 'vue';
 declare global {
  namespace JSX {
@@ -1,4 +1,5 @@
-declare module '*.vue' {
+declare module '*.vue'
-  import Vue from 'vue';
+{
-  export default Vue;
+    import Vue from 'vue';
    export default Vue;
 }
@@ -0,0 +1,67 @@
 import Course from '@/logic/course';
 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
 {
    /**
     * 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('-')}`;
    }
    /**
     * Detect course level based on course name
     *
     * @param name Course name
     */
    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;
    }
 }
@@ -0,0 +1,50 @@
 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, '&');
    }
 }
@@ -1,31 +1,34 @@
 import Course from '@/logic/course';
 import {Assignment} from '@/components/app/app';
 export interface Scale
 {
    min: number
    letter: string
    gp: number
 }
 /**
 * 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 =
+    public static SCALE: Scale[] =
    [
-        [96.5, 'A+', 4.00],
+        {min: 96.5, letter: 'A+', gp: 4.00},
-        [92.5, 'A' , 3.75],
+        {min: 92.5, letter: 'A' , gp: 3.75},
-        [89.5, 'A-', 3.50],
+        {min: 89.5, letter: 'A-', gp: 3.50},
-        [86.5, 'B+', 3.25],
+        {min: 86.5, letter: 'B+', gp: 3.25},
-        [82.5, 'B' , 3.00],
+        {min: 82.5, letter: 'B' , gp: 3.00},
-        [79.5, 'B-', 2.75],
+        {min: 79.5, letter: 'B-', gp: 2.75},
-        [76.5, 'C+', 2.50],
+        {min: 76.5, letter: 'C+', gp: 2.50},
-        [72.5, 'C' , 2.25],
+        {min: 72.5, letter: 'C' , gp: 2.25},
-        [70.5, 'C-', 2.00],
+        {min: 70.5, letter: 'C-', gp: 2.00},
-        [69.5, 'D' , 1.00],
+        {min: 69.5, letter: 'D' , gp: 1.00},
-        [0   , 'F' , 0.00]
+        {min: 0   , letter: 'F' , gp: 0.00}
    ];
    // Keywords
    public static MIN = 0;
    public static LETTER = 1;
    public static GPA = 2;
    /**
     * Calculate GPA for a list of couses
     *
@@ -81,25 +84,108 @@ export class GPAUtils
     * @param course Course
     * @param letterGrade Letter grade
     */
-    public static getGP(course: Course, letterGrade?: string): number
+    public static getGP(course: Course, letterGrade: string): number
    {
-        // Find the GPA for this course.
+        // Get scale
-        for (let scale of this.SCALE)
+        let scale = this.findScale(letterGrade);
        // No scale
        if (scale == undefined) return -1;
        // Add scaleUp if not failed.
        return scale.gp == 0 ? 0 : scale.gp + course.scaleUp;
    }
    /**
     * Find the scale for a grade
     *
     * @param grade Letter grade or numeric grade
     */
    public static findScale(grade: string | number): Scale | undefined
    {
        // Letter grade
        if (typeof grade == 'string')
        {
-            // Letter grades are the same
+            return this.SCALE.find(scale => scale.letter == grade);
-            if (scale[this.LETTER] == letterGrade)
+        }
        // Numeric grade
        return this.SCALE.find(scale => grade >= scale.min);
    }
    /**
     * Calculate the total-mean (total/max) average
     *
     * @param assignments
     */
    public static getTotalMeanAverage(assignments: Assignment[])
    {
        let score = 0;
        let max = 0;
        // Loop through assignments
        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;
    }
    /**
     * Calculate the percent type
     * TODO: Combine it with overall-line
     *
     * @param course
     * @param assignments
     */
    public static getPercentTypeAverage(course: Course, assignments: Assignment[])
    {
        let typeScores: {[index: string]: any} = {};
        let typeCounts: {[index: string]: any} = {};
        // Loop through assignments
        assignments.forEach(assignment =>
        {
            // If assignment should be displayed
            if (assignment.complete != 'Complete') return;
            // 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)
            {
-                // Get grade and add it
+                totalPercentage += course.grading.weightingMap[type];
                let grade = <number> scale[this.GPA];
                // Add scaleUp if not failed.
                if (grade != 0) grade += course.scaleUp;
                // That's it
                return grade;
            }
        }
-        return -1;
+        // 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
        return score * 100;
    }
 }
@@ -4,11 +4,6 @@ export class HttpUtils
 {
    public token: string = '';
    constructor (token: string)
    {
        this.token = token;
    }
    public post(node: string, body: any): Promise<any>
    {
        // Add token
@@ -1,4 +1,4 @@
-import {Grade} from '@/components/app/app';
+import {Assignment} from '@/components/app/app';
 export default class JsonUtils
 {
@@ -6,28 +6,30 @@ export default class JsonUtils
     * This method filters the information provided in an assignments json.
     *
     * @param assignments Assignments object
-     * @returns Grade[] Filtered assignment grade object list
+     * @returns Assignment[] Filtered assignment grade object list
     */
-    public static filterAssignments(assignments: any): Grade[]
+    public static filterAssignments(assignments: any): Assignment[]
    {
-        let result: Grade[] = [];
+        return assignments.assignments.map((assignment: any) =>
        assignments.assignments.forEach((assignment: any) =>
        {
-            result.push(
+            return {
-            {
+                id: assignment.assignment_id,
                scoreId: assignment.score_id,
                type: assignment.assignment_type,
                typeId: assignment.assignment_type_id,
                description: assignment.assignment_description,
-                date: assignment._date,
+                date: new Date(assignment._date),
                complete: assignment.completion_status,
                include: assignment.include_in_calculated_grade == 1,
                display: assignment.display_grade == 1,
-                scoreMax: assignment.maximum_score,
+                unread: assignment.is_unread == 1,
                score: +assignment.raw_score
            });
        });
-        return result;
+                scoreMax: assignment.maximum_score,
                score: +assignment.raw_score,
                gradingPeriod: +assignment.grading_period.replace('Quarter ', '') - 1
            }
        });
    }
 }
@@ -0,0 +1,41 @@
 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;
    }
 }
@@ -24,7 +24,10 @@
      "dom",
      "dom.iterable",
      "scripthost"
-    ]
+    ],
    // Custom
    "strictPropertyInitialization": false
  },
  "include": [
    "src/**/*.ts",